How to create/make semi transparent panel in Image background

#1

here I have one panel that have a image background. under this, there is one child panel that have some collection of controls. I want that child panel to be semi transparent with parent panel. Please find the regarding images as well.

image
image742×899 228 KB

The related code is as below.
import wx

class MyFrame2 ( wx.Frame ):

def __init__( self, parent ):
    wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 500,600 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
    self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
    bSizer11 = wx.BoxSizer( wx.HORIZONTAL )
    self.img1=wx.Image(".\src\images\Capture001.png", wx.BITMAP_TYPE_ANY)
    self.m_bitmap3 = wx.StaticBitmap( self, wx.ID_ANY, wx.BitmapFromImage(self.img1), wx.DefaultPosition, wx.DefaultSize, 0 )
    bSizer11.Add( self.m_bitmap3, 1, wx.EXPAND, 0 )
    self.Bind(wx.EVT_SIZE, self.onResize)
    self.SetSizer( bSizer11 )
    self.Layout()
    self.Centre(wx.BOTH)

    self.pn2 = wx.Panel(self.m_bitmap3, -1,pos = (100,200),size = (350,200))
    self.pn2.SetBackgroundColour(wx.Colour(242,242,242))
    sizer2 = wx.BoxSizer(wx.VERTICAL)
    self.pn2.SetSizer(sizer2)

    hbox_code_label = wx.BoxSizer(wx.HORIZONTAL)
    hbox_code_label.AddSpacer(20)
    hbox_code_label.Add(wx.StaticText(self.pn2, label='Code'), proportion=1)
    sizer2.Add(hbox_code_label, flag=wx.ALIGN_LEFT, border=10)
    sizer2.AddSpacer(10)
    self.m_bitmap3.SetSizer(sizer2)

    hbox_code_txtbox = wx.BoxSizer(wx.HORIZONTAL)
    hbox_code_txtbox.AddSpacer(20)
    hbox_code_txtbox.Add(wx.TextCtrl(self.pn2, value='',size=(280, 25)), proportion=1)
    sizer2.Add(hbox_code_txtbox, flag=wx.ALIGN_LEFT, border=10)
    sizer2.AddSpacer(10)
    self.pn2.SetSizer(sizer2)

    hbox_state_label = wx.BoxSizer(wx.HORIZONTAL)
    hbox_state_label.AddSpacer(20)
    hbox_state_label.Add(wx.StaticText(self.pn2, label='State'), proportion=1)
    sizer2.Add(hbox_state_label, flag=wx.ALIGN_LEFT, border=10)
    sizer2.AddSpacer(10)

    hbox_state_txtbox = wx.BoxSizer(wx.HORIZONTAL)
    hbox_state_txtbox.AddSpacer(20)
    hbox_state_txtbox.Add(wx.TextCtrl(self.pn2, value='',size=(280, 25)), proportion=1)

    sizer2.Add(hbox_state_txtbox, flag=wx.ALIGN_LEFT, border=10)
    sizer2.AddSpacer(10)

    hbox_submit = wx.BoxSizer(wx.HORIZONTAL)
    hbox_submit.AddSpacer(10)
    hbox_submit.Add(wx.Button(self.pn2,label = "Submit",name="submit"),proportion =1)
    sizer2.Add(hbox_submit, flag=wx.ALIGN_LEFT, border=10)


def __del__( self ):
    pass

def onResize(self, event):
    #self.Layout()
    frame_size = self.GetSize()
    frame_h = (frame_size[0]-10)
    frame_w = (frame_size[1]-10)
    img1 = self.img1.Scale(frame_h,frame_w)
    self.m_bitmap3.SetBitmap(wx.BitmapFromImage(img1))
    self.Refresh()
    self.Layout()

app = wx.App(0)
MyFrame2(None).Show()
app.MainLoop()

#2

Hi,

I had to make a few changes to your code to get it to run on my system (which uses Python 3.10.6 and wxPython 4.2.0 gtk3 (phoenix) wxWidgets 3.2.0 on Linux Mint 21.1).

Several of these changes were due to methods/functions being deprecated under wxPython 4.2.0.

However, the following line caused the program to crash with a segmentation fault:

        self.pn2 = wx.Panel(self.m_bitmap3, -1,pos = (100,200),size = (350,200))

I changed that line to the following and the program then ran without crashing

        self.pn2 = wx.Panel(self, -1,pos = (100,200),size = (350,200))

To make self.pn2 semi-transparent, I set the alpha channel of its background colour to a suitable value:

        self.pn2.SetBackgroundColour(wx.Colour(242,242,242,150))

This produced the following result using one of my own images:

Screenshot at 2023-02-11 13-59-22
Screenshot at 2023-02-11 13-59-22500×600 169 KB

Please note, I am not able to test this on Windows.

My modified version is as follows:

import wx

class MyFrame2 ( wx.Frame ):

    def __init__( self, parent ):
        wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 500,600 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
        self.SetSizeHints( wx.DefaultSize, wx.DefaultSize )
        bSizer11 = wx.BoxSizer( wx.HORIZONTAL )
        self.img1=wx.Image("IMG_0775.jpg", wx.BITMAP_TYPE_ANY)
        self.m_bitmap3 = wx.StaticBitmap( self, wx.ID_ANY, wx.Bitmap(self.img1), wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer11.Add( self.m_bitmap3, 1, wx.EXPAND, 0 )
        self.Bind(wx.EVT_SIZE, self.onResize)
        self.SetSizer( bSizer11 )
        self.Layout()
        self.Centre(wx.BOTH)

        self.pn2 = wx.Panel(self, -1,pos = (100,200),size = (350,200))
        self.pn2.SetBackgroundColour(wx.Colour(242,242,242,150))
        sizer2 = wx.BoxSizer(wx.VERTICAL)
        self.pn2.SetSizer(sizer2)

        hbox_code_label = wx.BoxSizer(wx.HORIZONTAL)
        hbox_code_label.AddSpacer(20)
        hbox_code_label.Add(wx.StaticText(self.pn2, label='Code'), proportion=1)
        sizer2.Add(hbox_code_label, flag=wx.ALIGN_LEFT, border=10)
        sizer2.AddSpacer(10)
        self.pn2.SetSizer(sizer2)

        hbox_code_txtbox = wx.BoxSizer(wx.HORIZONTAL)
        hbox_code_txtbox.AddSpacer(20)
        hbox_code_txtbox.Add(wx.TextCtrl(self.pn2, value='',size=(280, 25)), proportion=1)
        sizer2.Add(hbox_code_txtbox, flag=wx.ALIGN_LEFT, border=10)
        sizer2.AddSpacer(10)
        self.pn2.SetSizer(sizer2)

        hbox_state_label = wx.BoxSizer(wx.HORIZONTAL)
        hbox_state_label.AddSpacer(20)
        hbox_state_label.Add(wx.StaticText(self.pn2, label='State'), proportion=1)
        sizer2.Add(hbox_state_label, flag=wx.ALIGN_LEFT, border=10)
        sizer2.AddSpacer(10)

        hbox_state_txtbox = wx.BoxSizer(wx.HORIZONTAL)
        hbox_state_txtbox.AddSpacer(20)
        hbox_state_txtbox.Add(wx.TextCtrl(self.pn2, value='',size=(280, 25)), proportion=1)

        sizer2.Add(hbox_state_txtbox, flag=wx.ALIGN_LEFT, border=10)
        sizer2.AddSpacer(10)

        hbox_submit = wx.BoxSizer(wx.HORIZONTAL)
        hbox_submit.AddSpacer(10)
        hbox_submit.Add(wx.Button(self.pn2,label = "Submit",name="submit"),proportion =1)
        sizer2.Add(hbox_submit, flag=wx.ALIGN_LEFT, border=10)


    def __del__( self ):
        pass

    def onResize(self, event):
        #self.Layout()
        frame_size = self.GetSize()
        frame_h = (frame_size[0]-10)
        frame_w = (frame_size[1]-10)
        img1 = self.img1.Scale(frame_h,frame_w)
        self.m_bitmap3.SetBitmap(wx.Bitmap(img1))
        self.Refresh()
        self.Layout()


app = wx.App(0)
MyFrame2(None).Show()
app.MainLoop()