WalkerWiki - wiki.alanwalker.uk

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== A 4 Button GUI ======
\\ 
\\ 
** NOTE ** You need **Python 3** for this project, the syntax wont work in Python 2 (but can be changed If you know the differences)
\\ 
\\ 
As a precursor to my Intervalometer Project, I need to create a control system. In a previous entry we looked at setting up a 3.2" LCD, and this is what I will use as it is a touchscreen. My project then wont require keyboards/mice or phone apps to work.
\\ 
\\ 
This is an example of using something in Python called Tkinter, which has many funcitons for creating GUI's (forms, labels, buttons etc) and the following code will create a 4 button app where a function is executed depending on what button is pressed.
\\ 
\\ 
This GUI can be used on an LCD Touchscreen, or simply as a GUI for a project that runs in a window on the desktop.
\\ 
\\ 
{{:4buttonguiscreenshot.jpg?300|}}
\\ 
\\ 
This program does the following:

  * Creates a window (root)
  * Creates 2 frames to go in that window (topFrame and bottomFrame)
  * Creates 4 Icons
  * Loads an image on to each Icon
  * Associates each button with a function
  * Sets button 1 and 2 in the top frame
  * Sets button 2 in the bottom frame
\\ 
===== See the Program in Action =====
\\ 
{{:4buttonguivideo.mp4?640x360|}}
{{:4buttonactual.mp4?640x360|}}
\\ 
===== The Code =====
\\ 
You can download the code and icon files {{ :4buttongui.zip |Here}}
----

<sxh [py][; options for SyntaxHighlighter]>
# Python 3.4.2
#
# Test programme for doing a simple 4 button GUI
#
# Alan Walker
# Aug 2016
#
#
# This programe creates a root window, then creates two frame in that root window (topFrame and bottomFrame)
# Then four buttons are created, two in the top frame, two in the bottom. An image is loaded on to each button
# Each button is assigned to a function so that something happens when the buttons are clicked.
# The buttons are positioned left and right so you have a 2x2 layout
#
# Thats it, this is just a tester for my LCD screen that I want to use for my Intervalometer.
#
#

from tkinter import *                    #import libraries

def btn1click():                         # define a function (you have to define it before you can call it, thats why its at the top of the programe
print("You Pressed Button 1!")       # function code

def btn2click():             
print("You Pressed Button 2!") 

def btn3click():             
print("You Pressed Button 3!") 

def btn4click():             
print("You Pressed Button 4!") 


root = Tk()  #This is the root window, all the frames will be in this window

topFrame = Frame(root) #This project will have 2 frames, an upper and a lower. 2 icons in top, 2 in bottom
#without the frames, its impossible to organise the 4 icons in a 2x2 configuration
#topFrame is the frame at the top, Frame=(root) means the frame is in the root window

topFrame.pack()        # something.pack means show that something (or it will be hidden)
bottomFrame = Frame (root)    #the bottom frame (still in the root window)
bottomFrame.pack(side=BOTTOM) #place the bottom frame at the bottom (by default, the only other frame will be at the top)

button1 = Button(topFrame, text="Button 1", fg="red")  #make a button called button1, put it in the top frame, 
#call it button 1, make the forground colour (text) red.
button1.img = PhotoImage(file="icons/timelapse.gif")   #associate the image timelapse.gif with this button
button1.config(image=button1.img)                      #set the button1 image on the button
button1.config(command=btn1click)                       #set what function to execute upon button click

button2 = Button(topFrame, text="Button 2", fg="blue")
button2.img = PhotoImage(file="icons/tlsettings.gif")
button2.config(image=button2.img)
button2.config(command=btn2click)

button3 = Button(bottomFrame, text="Button 3", fg="green")
button3.img = PhotoImage(file="icons/slidertl.gif")
button3.config(image=button3.img)
button3.config(command=btn3click)

button4 = Button(bottomFrame, text="Button 4", fg="black")
button4.img = PhotoImage(file="icons/slidersettings.gif")
button4.config(image=button4.img)
button4.config(command=btn4click) 

button1.pack(side=LEFT)    #show button1 on the left
button2.pack(side=RIGHT)   #show button2 on the right (b1 and b2 are in the top frame)
button3.pack(side=LEFT)
button4.pack(side=RIGHT)

root.mainloop()

#
#
</sxh>
\\ 
\\ 

----

\\