Differences

This shows you the differences between two versions of the page.

--- a_4_button_gui [2016/08/10 19:57] – walkeradmin
+++ a_4_button_gui [2017/02/04 22:02] (current) – [The Code] walkeradmin
@@ Line 2: / Line 2: @@
 \\
 \\
-** NOTE ** You need Python 3 for this project, the syntax wont work in Python 2 (but can be changed If you know the differences)
+** NOTE ** You need **Python 3** for this project, the syntax wont work in Python 2 (but can be changed If you know the differences)
 \\
 \\
@@ Line 9: / Line 9: @@
 \\
 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.
 \\
 \\
@@ Line 26: / Line 29: @@
 ===== See the Program in Action =====
 \\
-{{ :4buttonguivideo.mp4 |}}
+{{:4buttonguivideo.mp4?640x360|}}
+{{:4buttonactual.mp4?640x360|}}
 \\
 ===== The Code =====
 \\
-You can download the code and icon files {{ :40x2_lcd.zip |Here:}}
+You can download the code and icon files {{ :4buttongui.zip |Here}}
 ----
-# Python 3.4.2\\
+<sxh [py][; options for SyntaxHighlighter]>
-#\\
+# Python 3.4.2
-# Test programme for doing a simple 4 button GUI\\
+#
-#\\
+# Test programme for doing a simple 4 button GUI
-# Alan Walker\\
+#
-# Aug 2016\\
+# 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\\
+# This programe creates a root window, then creates two frame in that root window (topFrame and bottomFrame)
-# Each button is assigned to a function so that something happens when the buttons are clicked.\\
+# Then four buttons are created, two in the top frame, two in the bottom. An image is loaded on to each button
-# The buttons are positioned left and right so you have a 2x2 layout\\
+# 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.\\
+#
-#\\
+# 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)\\
+from tkinter import *                    #import libraries
-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)\\
+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
-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.\\
+def btn2click():
-button1.img = PhotoImage(file="icons/timelapse.gif")   #associate the image timelapse.gif with this button\\
+print("You Pressed Button 2!")
-button1.config(image=button1.img)                      #set the button1 image on the button\\
-button1.config(command=btn1click)                       #set what function to execute upon button click\\
+def btn3click():
-\\
+print("You Pressed Button 3!")
-button2 = Button(topFrame, text="Button 2", fg="blue")\\
-button2.img = PhotoImage(file="icons/tlsettings.gif")\\
+def btn4click():
-button2.config(image=button2.img)\\
+print("You Pressed Button 4!")
-button2.config(command=btn2click)\\
-\\
-button3 = Button(bottomFrame, text="Button 3", fg="green")\\
+root = Tk()  #This is the root window, all the frames will be in this window
-button3.img = PhotoImage(file="icons/slidertl.gif")\\
-button3.config(image=button3.img)\\
+topFrame = Frame(root) #This project will have 2 frames, an upper and a lower. 2 icons in top, 2 in bottom
-button3.config(command=btn3click)\\
+#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
-button4 = Button(bottomFrame, text="Button 4", fg="black")\\
-button4.img = PhotoImage(file="icons/slidersettings.gif")\\
+topFrame.pack()        # something.pack means show that something (or it will be hidden)
-button4.config(image=button4.img)\\
+bottomFrame = Frame (root)    #the bottom frame (still in the root window)
-button4.config(command=btn4click) \\
+bottomFrame.pack(side=BOTTOM) #place the bottom frame at the bottom (by default, the only other frame will be at the top)
-\\
-button1.pack(side=LEFT)    #show button1 on the left\\
+button1 = Button(topFrame, text="Button 1", fg="red")  #make a button called button1, put it in the top frame,
-button2.pack(side=RIGHT)   #show button2 on the right (b1 and b2 are in the top frame)\\
+#call it button 1, make the forground colour (text) red.
-button3.pack(side=LEFT)\\
+button1.img = PhotoImage(file="icons/timelapse.gif")   #associate the image timelapse.gif with this button
-button4.pack(side=RIGHT)\\
+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>
 \\
-root.mainloop()\\
 \\