{"id":1170,"date":"2024-02-24T06:01:14","date_gmt":"2024-02-24T06:01:14","guid":{"rendered":"https:\/\/snersbots.co.uk\/?p=1170"},"modified":"2024-02-24T06:01:14","modified_gmt":"2024-02-24T06:01:14","slug":"wxpython-user-interface","status":"publish","type":"post","link":"https:\/\/snersbots.co.uk\/index.php\/wxpython-user-interface\/","title":{"rendered":"wxPython User Interface"},"content":{"rendered":"\n<p>I&#8217;m not ecstatic about the 90 degree corners. The whole UI is a little bit dated. But life is too short. The background image needs tweaking, but I don&#8217;t have any colour tools on this computer so we&#8217;ll live with it for now.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The image is of polar stratospheric clouds which made a wonderful showing here a few years back. I thought it would make a nice background. But the UI elements don&#8217;t work too well on it. However I&#8217;ve spent way too long on this UI already. It&#8217;s functional and that is the main thing.<\/p>\n\n\n\n<p>It does look a whole lot better than it did. I think it is essential to be able to control the fonts &#8211; that helps make it look a little less dated. I found a very nice tutorial at this <a href=\"https:\/\/www.blog.pythonlibrary.org\/2011\/04\/28\/wxpython-learning-to-use-fonts\/\">wxPython <\/a>blog.<\/p>\n\n\n\n<p>There are wx elements for most of the font options. But if you don&#8217;t like them you can use your own. wx.FONTSIZE_LARGE was too big and wx.FONTSIZE_MEDIUM was too small, so I used 13. It won&#8217;t scale down to a teeny phone but that&#8217;s not my target market so it&#8217;s fine.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>The whole script is quite long but it&#8217;s because of all the code needed for the user interface. I will put the work into another script, so this script is pretty much final.<\/p>\n\n\n\n<pre class=\"wp-block-code has-background\" style=\"background-color:#e9f1f7\"><code>import wx\n\nclass MainPanel(wx.Panel):\n    def __init__(self, parent):\n        self.phBackgroundColour = (255, 243, 226)\n        wx.Panel.__init__(self, parent, -1, style=wx.FULL_REPAINT_ON_RESIZE)\n        self.Bind(wx.EVT_PAINT, self.OnPaint)\n        self.img = wx.Image('background.jpg', wx.BITMAP_TYPE_JPEG)\n        self.bckImageWidth, self.bckImageHeight = self.img.GetSize()\n        self.SetBackgroundColour(self.phBackgroundColour)\n\n        #   The purpose of a frame is to house UI elements\n        file_sizer = wx.BoxSizer(wx.HORIZONTAL)\n        file_sizer.AddSpacer(15)\n\n        #   Get a font to use\n        #https:\/\/www.blog.pythonlibrary.org\/2011\/04\/28\/wxpython-learning-to-use-fonts\/\n        self.photoFont = wx.Font(13, wx.FONTFAMILY_DECORATIVE, wx.FONTSTYLE_NORMAL, \n                                   wx.FONTWEIGHT_MEDIUM)\n        #Label text\n        labelText = wx.StaticText(self, label='Root Folder:')\n        labelText.SetFont(self.photoFont)\n        file_sizer.Add(labelText, proportion=1, flag=wx.ALL, border=5)\n\n        # File path editable text frame\n        self.file_path = wx.TextCtrl(self)\n        self.file_path.SetBackgroundColour(self.phBackgroundColour)\n        self.file_path.SetFont(self.photoFont)\n        file_sizer.Add(self.file_path, proportion=3, flag=wx.ALL, border=5)\n\n        # Browse button\n        browse_button = self.GetPhotoButton('Browse')\n        browse_button.Bind(wx.EVT_BUTTON, self.onBrowseClicked)\n        file_sizer.Add(browse_button, proportion=1,\n                       flag=wx.ALL, border=5)\n        file_sizer.AddSpacer(15)\n\n        # All together\n        main_sizer = wx.BoxSizer(wx.VERTICAL)\n        main_sizer.AddSpacer(15)\n\n        # Collect button below\n        collect_button = self.GetPhotoButton('Collect images')\n        collect_button.Bind(wx.EVT_BUTTON, self.onCollectClicked)\n\n        # All together\n        main_sizer.Add(file_sizer)\n        main_sizer.Add(collect_button, 0, wx.ALL, 15)\n        self.SetSizer(main_sizer)\n        self.call_me()      # NB: Dont put self in brackets\n\n    def OnPaint(self, event):\n        dc = wx.PaintDC(self)\n        dc.Clear()\n        width,height = self.GetSize()\n        posx,posy = 0, 0\n\n        img = self.img.Scale(width,height, wx.IMAGE_QUALITY_HIGH)\n        self.bmp = wx.Bitmap(img)\n        dc.DrawBitmap(self.bmp,posx,posy)\n\n    def call_me(self) :\n        self.file_path.SetValue('')\n        \n    def onBrowseClicked(self, event):\n        #\n        print('You clicked Browse')\n        self.dir = event.GetString()\n        dlg = wx.DirDialog (None, \"Choose input directory\", \"\",\n                    wx.DD_DEFAULT_STYLE | wx.DD_DIR_MUST_EXIST)\n        if dlg.ShowModal() == wx.ID_OK:\n            print('Selected files are: ', dlg.GetPath())\n            self.file_path.SetValue(dlg.GetPath())\n        dlg.Destroy()\n\n    def onCollectClicked(self, event):\n        #\n        print('You clicked Collect')\n\n\n    def OnClose(self, e):\n        super().Close(True)\n\n    def GetPhotoButton(self, buttonLabel):\n        browse_button = wx.Button(self, label=buttonLabel)\n        browse_button.SetBackgroundColour(self.phBackgroundColour)\n        browse_button.SetFont(self.photoFont)\n        return browse_button\n\nclass MainFrame(wx.Frame):\n    def __init__(self, parent):\n        wx.Frame.__init__(self, parent, -1, title='Scaling Image', size=(600,400))\n        self.panel = MainPanel(self)\n        self.panel.SetAutoLayout(1)\n        self.Show()\n\napp = wx.App(0)\nframe = MainFrame(None)\napp.MainLoop()    <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m not ecstatic about the 90 degree corners. The whole UI is a little bit dated. But life is too short. The background image needs tweaking, but I don&#8217;t have any colour tools on this computer so we&#8217;ll live with it for now.<\/p>\n","protected":false},"author":1,"featured_media":1172,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,8],"tags":[69,71],"class_list":["post-1170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desktop-apps","category-software","tag-duplicate-photos","tag-python"],"_links":{"self":[{"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/1170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=1170"}],"version-history":[{"count":4,"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/1170\/revisions"}],"predecessor-version":[{"id":1175,"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/1170\/revisions\/1175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/media\/1172"}],"wp:attachment":[{"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=1170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=1170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/snersbots.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}