Interactive UI

One of the most important bits of knowledge to have when creating a GUI is to know how to update your screen with new data; and how to do this fast. This tutorial will talk you through how to do so and teach you about how it works.

Variable recap

Before we can start learning how to do this we need to brush up on how variables work in python.

A variable in python is an object of a class, this class can be a built-in data type or could be one you have made. There are many different built-in data types in python but the main ones you will use are as follows:

  • Number: int, float, complex, Boolean

  • Sequence: string, list, tuple

  • Set: set

  • Mapping: dictionary

These variables can be divided in another way; this is into immutable and mutable variables.

Immutable variables

Immutable variables are such that they cannot change their value or state once they have been assigned. Therefore once we have assigned them a value during declaration we cannot make changes to it. Attempting to make changes to an immutable variable will give an error.

z = "HELLO WORLD" # assignment
z[0] = "W" # this will throw an error
# comment out the above line
z = "NEW WORLD" # this is not a change, this is a new assignment.

Note:

Assignments and making changes are very different. For example:

z = "HELLO WORLD"
# z is now "HELLO WORLD"
b = z
z = "NEW WORLD"
# b is still "HELLO WORLD"
# z is now "NEW WORLD"

Notice how b has not changed. This is because it still points to the old z. You would have to reassign b for it to show the changes to z.

Built-in immutable variables are:

  • int

  • float

  • bool

  • complex

  • Strings

  • tuples

Mutable variables

Mutable variables are such that their value or state can be altered after they have been assigned. Therefore we can assign them a new value or make changes to the one(s) they have while programming.

z = ["HELLO", "WORLD"] # assignment
# z is now ["HELLO", "WORLD"]
b = z[0] # assignment
# b is now "HELLO"
z[0] = "NEW" # alteration
# z is now ["NEW", "WORLD"]
# b is still "HELLO"

However it is only the values within the mutable variable that are alterable, i.e if you make a new assignment this is not dynamic. For example:

z = ["HELLO", "WORLD"] # assignment
b = z # assignment
z = ["NEW", "WORLD"] # assignment
# z is now ["NEW", "WORLD"]
# b is still ["HELLO", "WORLD"]

Built-in mutable variables are:

  • lists

  • dictionaries

redraw

The redraw function in the gui module is used to update the gui_list. It will not update any of the new data until you call gui.redraw(). To find out more about the redraw function see the redraw event

Creating live updating text

One of the most basic things you can update is text but this will teach you the fundamentals of all the others. Can you identify what is causing the example below to not work?

import gui
import vts
num = '0'
text = [gui.CTRL_TEXT, 400, 240, 31, 1536, num]
gui.show([
    text,
])
while 1:
    vts.delay_ms(1000)
    num = str(int(num) + 1)
    gui.redraw()
    print(num)

The answer is that the variable num is immutable. This means the data is not updating as it is just creating a new assignment each time.

import gui
import vts
num = ['0']
text = [gui.CTRL_TEXT, 400, 240, 31, 1536, num]
gui.show([
    text,
])
while 1:
    vts.delay_ms(1000)
    num[0] = str(int(num[0]) + 1)
    gui.redraw()
    print(num)

By simply changing num to be a list and altering the value of the list you now have an updating number.

You can also change the value within text itself:

import gui
import vts
text = [gui.CTRL_TEXT, 400, 240, 31, 1536, '0']
gui.show([
    text,
])
while 1:
    vts.delay_ms(1000)
    text[5] = str(int(text[5]) + 1)
    gui.redraw()

This is because text is also mutable as it is a list. This leads us to gui.SUBLIST.

Sublists

The gui module also contains a flag called SUBLIST. This can be used to indicate to the gui.show() that it should check another layer deeper in the lists. For example:

import gui
text = [gui.CTRL_TEXT, 400, 240, 31, 1536, '0']
gui.show([
    [
    text
    ]
])

This does not show up. However, if you tell it that there is a SUBLIST then it will:

import gui
text = [gui.CTRL_TEXT, 400, 240, 31, 1536, '0']
gui.show([
    [
    gui.SUBLIST,
    text
    ]
])

This has many useful applications, with this you can change the display list within a var.

import gui
import vts
horizontal_line = [
    gui.SUBLIST,
    [gui.DL_LINE_WIDTH(5)],
    [gui.DL_COLOR_RGB(0,128,0)], # dark green
    [gui.PRIM_LINES,
    [gui.DL_VERTEX2F(200,240),
    gui.DL_VERTEX2F(600,240),
    ]],
]
vertical_line = [
    gui.SUBLIST,
    [gui.DL_LINE_WIDTH(5)],
    [gui.DL_COLOR_RGB(255,0,0)], # red
    [gui.PRIM_LINES,
    [gui.DL_VERTEX2F(400,40),
    gui.DL_VERTEX2F(400,440),
    ]],
]
arrow = [
    gui.SUBLIST,
    [gui.DL_NOP()] # This does nothing and acts as a filler.
]
arrow[1] = horizontal_line
flag_horizontal = True

gui.show([
    arrow
])

while 1:
    vts.delay_ms(1000)
    if flag_horizontal:
        flag_horizontal = False
        arrow[1] = vertical_line
    else:
        flag_horizontal = True
        arrow[1] = horizontal_line

    gui.redraw()

This program demonstrates how you can have 2 sublists that you then choose to put into another one. This allows you to make a much more readable toggle. In this program, it changes the line every second.

You will learn more about creating the Shapes, Events and Widgets used in this tutorial in the following tutorials.