Lets make a 'Hex Color Spinner' desktop app in both PyQT5 and wxPython.
This is going to be a simple desktop window frame that will spin out random hex color and value when a button is pressed.
By working through this app, we will get familiarized with:-
1) creating the GUI structure in both Qt designer and wxformbuilder.
2) connecting the widgets to functions.
3) read and update values on widgets.
4) change window's background color
Hexadecimal color code
A hex color code is made-up of '#' sign followed by six characters which include the combination of numbers between 0-9 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) and letters between A-F ("A", "B", "C", "D", "E", "F"). Notye that the letters can either be in upper or lower case.
So, for example:
#F35EEA, #5BDB6B, #9FE091, #8DA7ED, #ADD075 etc will all yeild unique HEX colors.
To come up with such random string in python, there are many possible ways. Below is one way to do it.
# import 'choice' function from the random module...
from random import choice
# define a list of legal HEX characters...
hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]
# loop through the list six time while selecting one character per loop...
hex_list = [str(choice(hex)) for x in range(6)]
# join the choosen characters and prefix with the '#' symbol...
hex_string = '#' + ''.join(hex_list)
print(hex_string)
Now that we have a python code that generates the hex color code, we will wrap it in a function to be called within our GUI.
PyQt5 GUI
For the GUI in pyqt, I made use of Qt designer to quickly created it as seen below.
The qt designer GUI consist of a QLable and a QPushButton arranged in a verticalLayot. I made use of verticalSpacer to give space above and belwo the widgets which were arranged vertically.
wxPython GUI
For the GUI in wxPython, I made use of wxFormBuilder to quickly created it as seen below.
The GUI is made off wxStaticText and wxButton arranged in a vertical BoxSizer. A spacer is used to give space above and belwo the widgets.
Running the App
In both cases above, we will generate the GUI file and call it in a
main.py file which loads the GUI and then connect the button to the function that runs the hex color code generator above.
PyQt5 code
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5 import uic
from random import choice
class MyWindow(QMainWindow):
"""docstring for MyWindow"""
def __init__(self):
super(MyWindow, self).__init__()
uic.loadUi('gui_Project.ui', self)
self.colorButton.clicked.connect(self.change_color_func)
self.show()
def change_color_func(self):
# print('#####################')
hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]
hex_list = [str(choice(hex)) for x in range(6)]
hex_string = '#' + ''.join(hex_list)
print(hex_string)
# ------------------------
# Change the text of '#XXXXXX' to current hex text
self.hex_text.setText(hex_string)
# ------------------------
# Change background color to current hex color
self.setStyleSheet("background-color: {};".format(hex_string))
if __name__ == '__main__':
app = QApplication(sys.argv)
window = MyWindow()
sys.exit(app.exec_())
wxpython code
import wx
from gui import MyWindow_1
from random import choice
class MyWindow_2(MyWindow_1):
def __init__(self, parent):
MyWindow_1.__init__ (self, parent)
def change_color_func(self, event):
# print('#####################')
hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]
hex_list = [str(choice(hex)) for x in range(6)]
hex_string = '#' + ''.join(hex_list)
print(hex_string)
# ---------------
# Change the text of '#XXXXXX' to current hex text
self.hex_text.SetLabel(hex_string)
self.Layout()
# ------------------------
# Change background color to current hex color
self.SetBackgroundColour(hex_string)
self.Refresh()
app = wx.App(0)
MyWindow_2(None).Show()
app.MainLoop()
The result should look like below....
Download the files from
this github repository.
