Paul Sutton

Personal Blog

Free Code Camp – Visual Design 4

Completed some more of the visual design module in FreeCodeCamp so now reached 50% of the way through the module

visual design 4

So lots of progress made on this, and more useful skills being developed.

#learn, #freecodecamp, #web, #responsive,#visual #design, #html, #css, #skills, #codeclub,

Happy to provide help and support via decentralised social media. I can be contacted on Mastodon here. You can get a free account on the http://qoto.org instance by following this link.

cc-by logo

Licenced under Attribution 4.0 International (CC BY 4.0)


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

Collaboration with Overleaf

I attended the Overleaf Effective Collaboration webinar on Wednesday 20th May. This proved, once again to be very informative, useful and complements the other webinars nicely.

This webinar, specifically covered the features available to the different users of the system, the main difference with the free accounts includes the number of user who can collaborate and version history tracking.

I recently came across an excellent Overleaf curated article / report from 2017 on The Connected Culture of Collaboration Report

The document (pdf) can be downloaded free from the website and there is a citation guide too, if this is needed for your own articles or papers.

The webinar will be available on demand in due course.

References

#LaTeX, #overleaf, #collaboration, #report, #digital, #science,#writing,#publishing


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

Add more functions

I have added a few more maths functions to the application and also provided a clear function. There are still a few items to add to help improve debugging but the application is starting to take shape.

Notes

window = Tk()
window.title('Maths Application')
window.geometry("570x150") # w x h
window.resizable(0,0)
  1. The above code is being modified as I go. So I am changing the window size depending on what is being displayed.

  2. I have also made the Window title reflect the purpose of the application.

  3. That the source code now has 'result' as a label rather than output. This will show up future screenshots.

addition app

The code for the above is as follows.

#!/usr/bin/env python
import Tkinter # note use of caps
from Tkinter import *

window = Tk()
window.title('Maths Application')
window.geometry("570x150") # w x h
window.resizable(0,0)

#define button actions
def btn1():
	#convert box text in to integers	
	ent1 = int(entrytext.get())
	ent2 = int(entrytext2.get())
	
	#add the 2 integers and store in variable add
	add = (ent1 + ent2)
	print (add)
	
	#insert value of variable add in	to box outtext 
	outtext1.insert(0,str(add)) # insert response

def btn2():
	#print("subtraction")
	ent1 = int(entrytext.get())
	ent2 = int(entrytext2.get())
	
	#subtract the 2 integers and store in variable sub
	sub = (ent1 - ent2)
	
	
	#insert value of variable sub in	to box outtext 
	outtext1.insert(0,str(sub)) # insert response	
	
def btn3():
	#print("multiply")
	ent1 = int(entrytext.get())
	ent2 = int(entrytext2.get())
	
	#multiply the 2 integers and store in variable mul
	mul = (ent1 * ent2)
		
	#insert value of variable mul in	to box outtext 
	outtext1.insert(0,str(mul)) # insert response		

def btn4():
	#print("divide")
	ent1 = int(entrytext.get())
	ent2 = int(entrytext2.get())
	
	#multiply the 2 integers and store in variable div
	div = (ent1 / ent2)
		
	#insert value of variable mul in	to box outtext 
	outtext1.insert(0,str(div)) # insert response	
	
#clear boxes
def clear():
	#print("clear boxes") # leave in for legacy testing
	entrytext.delete(0, END) # clear input box
	entrytext2.delete(0, END) # clear input box2
	outtext1.delete(0, END) # clear output box
	
btn_tog2 = Button( window, text ='+', command=btn1) # add
btn_tog3 = Button( window, text ='-', command=btn2)  # subtract
btn_tog4 = Button( window, text ='x', command=btn3) #multiply
btn_tog5 = Button( window, text ='/', command=btn4) #divide
btn_tog6 = Button( window, text ='Clear', command=clear) #clear
btn_exit = Button( window, text ='Exit',command=exit)	 #exit

# define some labels
box1 = Label(window, text="1st Value")
box2 = Label(window, text="2nd Value")
box3 = Label(window, text="Result")

#define entry box 
entry1 = StringVar() # this is our entry box
entry2 = StringVar()
entrytext = Entry(window, textvariable=entry1) # this is our entry box
entrytext2 = Entry(window, textvariable=entry2) # this is our second entry box

#define out box 

entry2 = StringVar() # this is our output box
outtext1 = Entry(window, textvariable=entry2) # this is our output box

#display boxes
entrytext.grid(row = 3, column = 2,)  #display entry box
entrytext2.grid(row = 3, column = 3,)  #display entry box
outtext1.grid(row = 3, column = 4,) #display output box

#place labels
box1.grid(row = 1	, column = 2, padx = 5, pady = 5)
box2.grid(row = 1	, column = 3, padx = 5, pady = 5)
box3.grid(row = 1	, column = 4, padx = 5, pady = 5)

#buttons
btn_tog2.grid(row = 4, column = 2, padx = 1, pady = 1) # addition button
btn_tog3.grid(row = 4, column = 3, padx = 1, pady = 1) # subtraction button
btn_tog4.grid(row = 5, column = 2, padx = 1, pady = 1) # multiply button
btn_tog5.grid(row = 5, column = 3, padx = 1, pady = 1) # divide button
btn_tog6.grid(row = 4, column = 6, padx = 1, pady = 1) # clear button
btn_exit.grid(row = 3, column = 6, padx = 1, pady = 1) # exit button

window.mainloop()


The code that I used for a previous application to detect if numerical values have been used is below but provided 'as is' for now.

def response():
		
	msg = "error : must be a text value"

	i = circletext.get()
	y = i.isdigit()
	l = len(circletext.get())
	#print l
	if y == True or l == 0:
		circletext.insert(0,(msg))
		
	else:	
		x = random.choice(RESPONSES)
		circletext2.delete(0, END) # clear prev output
		circletext2.insert(0,str(x)) # insert response

I will integrate a version of this in to the main code.

#python, #tkinter, #programming, #python, #graphic, #applications, #bugs, #troubleshooting, #howto, #paignton, #library, #virtual, #codeclub

Happy to provide help and support via decentralised social media. I can be contacted on Mastodon here. You can get a free account on the http://qoto.org instance by following this link.

cc-by logo

Licenced under Attribution 4.0 International (CC BY 4.0)


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

Addition Application

So following on from the previous posts, I am how sharing a small application, that makes use of what we have been learning.

This presents 2 input boxes and an output box, any values entered in to the first two, the sum is placed in to the last box.

addition app

This is not perfect, but getting there slowly.

We need to:-

  • Fix the name of the button from button1
  • Detect if the user has entered numerical values
  • Detect for empty boxes
  • Make labels more useful
  • Fix spelling in comments
  • Fix clarity of comments

The code for the above is as follows.

#!/usr/bin/env python
import Tkinter # note use of caps
from Tkinter import *

window = Tk()
window.title('App 1')
window.geometry("650x125") # w x h
window.resizable(0,0)

#define button actions
def btn1():
	#convert box text in to integers	
	ent1 = int(entrytext.get())
	ent2 = int(entrytext2.get())
	
	#add the 2 integers and store in variable add
	add = (ent1 + ent2)
	print add
	
	#instert value add in	to box outtext 
	outtext1.insert(0,str(add)) # insert response
	
btn_tog2 = Button( window, text ='button1', command=btn1)
btn_exit = Button( window, text ='exit',command=exit)	

# define some labels
box1 = Label(window, text="Entry 1: ")
box2 = Label(window, text="Entry 2: ")
box3 = Label(window, text="Ouput1: ")

#define entry box 
entry1 = StringVar() # this is our entry box
entry2 = StringVar()
entrytext = Entry(window, textvariable=entry1) # this is our entry box
entrytext2 = Entry(window, textvariable=entry2) # this is our second entry box

#define out box 

entry2 = StringVar() # this is our output box
outtext1 = Entry(window, textvariable=entry2) # this is our output box

#display boxes
entrytext.grid(row = 3, column = 2,)  #display entry box
entrytext2.grid(row = 3, column = 3,)  #display entry box
outtext1.grid(row = 3, column = 4,) #display output box

#place labels
box1.grid(row = 1	, column = 2, padx = 5, pady = 5)
box2.grid(row = 1	, column = 3, padx = 5, pady = 5)
box3.grid(row = 1	, column = 4, padx = 5, pady = 5)

#buttons
btn_tog2.grid(row = 3, column = 5, padx = 5, pady = 5)
btn_exit.grid(row = 3, column = 6, padx = 5, pady = 5)

window.mainloop()

#python, #tkinter, #programming, #python, #graphic, #applications, #bugs, #troubleshooting, #howto, #paignton, #library, #virtual, #codeclub

Happy to provide help and support via decentralised social media. I can be contacted on Mastodon here. You can get a free account on the http://qoto.org instance by following this link.

cc-by logo

Licenced under Attribution 4.0 International (CC BY 4.0)


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

Free Code Camp – Visual Design 3

Completed some more of the visual design module in FreeCodeCamp so now reached 37% of the way through the module

visual design 1

Lots of useful design tips in this section of the course, so great for making small adjustments to css, which can really help to improve the visual look of page(s).

#learn, #freecodecamp, #web, #responsive,#visual #design, #html, #css, #skills, #codeclub,

Happy to provide help and support via decentralised social media. I can be contacted on Mastodon here. You can get a free account on the http://qoto.org instance by following this link.

cc-by logo

Licenced under Attribution 4.0 International (CC BY 4.0)


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

More improvements

Adding labels

So last time we added some text boxes and made the application a little more presentable. Now we are going to do is add some labels above the boxes to help describe what they do.

Add this above were we define the entry boxes

# define some labels
box1 = Label(window, text="Entry 1: ")
box2 = Label(window, text="Entry 2: ")
box3 = Label(window, text="Ouput1: ")

Now add this below where we place the entry boxes but above window.mainloop()

#place labels
box1.grid(row = 1	, column = 2, padx = 5, pady = 5)
box2.grid(row = 1	, column = 3, padx = 5, pady = 5)
box3.grid(row = 1	, column = 4, padx = 5, pady = 5)

So here we have a window, with three text boxes.

app1

So again we have something that looks a little more like an application.

#tkinter,#python,#gui,#programming.


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

Tidying up our application

So my last post produced something that did not really look very good. So I have now tidied the code up a little bit to make it look better.

So one of the useful things within this is to adjust the dimensions of our application, so everything fits in to the window area nicely, but not leave too much empty space.

#!/usr/bin/env python
import Tkinter # note use of caps
from Tkinter import *

window = Tk()
window.title('App 1')
window.geometry("600x50") # w x h
window.resizable(0,0)

#define entry box 

entry1 = StringVar() # this is our entry box
entrytext = Entry(window, textvariable=entry1) # this is our entry box
entrytext2 = Entry(window, textvariable=entry1) # this is our second entry box
#define out box 

entry2 = StringVar() # this is our output box
outtext1 = Entry(window, textvariable=entry2) # this is our output box


#display boxes
entrytext.grid(row = 3, column = 2,)  #display entry box
entrytext2.grid(row = 3, column = 3,)  #display entry box
outtext1.grid(row = 3, column = 4,) #display output box


window.mainloop()

So here we have a window, with three text boxes.

app1

Which is starting to look a little better. The main bit of advice I can give here, is test, test and test again, that way you know your application is working as you go.

#tkinter,#python,#gui,#programming.


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

More tkinter : Add entry and text box

This code adds a box to our application, a box can serve either as a text output box OR a text entry box.

Note I have included the whole program here. I have also defined the size of our application.

While the window is bigger and the boxes are at the top, the idea is that it just displays those boxes. We can tidy things up later.

#!/usr/bin/env python
import Tkinter # note use of caps
from Tkinter import *

window = Tk()
window.title('GUI Tkinter 1')
window.geometry("300x250") # w x h
window.resizable(0,0)

#define entry box 

circleVar = StringVar()
circletext = Entry(window, textvariable=circleVar)

#define out box 

circleVar2 = StringVar()
circletext2 = Entry(window, textvariable=circleVar2)

circleVar2 = StringVar()
circletext2 = Entry(window, textvariable=circleVar2)


#display boxes
circletext.grid(row = 1, column = 2,)
circletext2.grid(row = 2, column = 2,)


window.mainloop()

We get:

tk label

#tkinter,#python,#gui,#programming.


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

Free Code Camp – Visual Design 2

Completed some more of the visual design module in FreeCodeCamp so am sharing my progress here.

visual design 1

So far this is proving really useful, and the website is really easy to follow.

#learn, #freecodecamp, #web, #responsive, #design, #html, #css, #skills, #codeclub


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay

More tkinter : Combine buttons and labels.

Now that we can add a label and a button, it is time to combine the two. The following code does this.

#define functions for button(s)
def btn1():
	print ("button pressed")
	
	
#create button object	
btn_tog2 = Button( window, text ='button1', command=btn1)
btn_exit = Button( window, text ='exit',command=exit)	

#place button object
btn_tog2.grid(row = 1, column = 2, padx = 5, pady = 5)
btn_exit.grid(row = 2, column = 2, padx = 5, pady = 5)

#define labeles
button1 = Label(window, text="press button")
button2 = Label(window, text="exit program")

#place labels
button1.grid(row = 1, column = 1, padx = 5, pady = 5)
button2.grid(row = 2, column = 1, padx = 5, pady = 5)

We get:

tk label

#tkinter,#python,#gui,#programming.


Mastodon ShellLabs Join Mastodon
AI statement : Consent is NOT granted to use the content of this blog for the purposes of AI training or similar activity. Consent CANNOT be assumed, it has to be granted.

Donate using Liberapay