# User Interfaces & Usability: Exercises worksheet for Topic 6; week 14

## Preamble and introduction
In these exercises, we'll make sure that everyone has the basics ready for more challenging programming steps in the upcoming week. If you are an experienced programmer and are already comfortable with graphics libraries, how about mentoring your team mates?

We'll accomplish it by completing the following steps:
1. Environment: Make sure that you have the right operating environment (Python, pip)
2. Execution: Try downloading and executing a sample program from the repository
3. Editing: Take a sample program and try editing it
4. Retrospective: What worked, what didn't?

We will proceed as follows at each step: The lecturer will have a brief introduction about the topic and then do a short demo. Then they will introduce the assignment and let student groups of four work on the assignment for 40-ish minutes in breakout rooms. (in random groups)

If you are working in groups, I suggest that each group member has their own version of Python [IDLE](https://realpython.com/python-idle/). You can exchange program code for example with [Codeshare](https://codeshare.io/): Just share the URL in a chat with your friends and go. If that doesn't, [Yopad](https://yopad.eu/) is a good (non-code specific) backup.

## Step 1: Installing Python and IDLE
We'll make sure that everyone has their environment ready to go. We start step 1 with a slide deck recap and then start with the Assignment 1.

### Step 1 instructions

#### Part A
If you have your development machine with you: Install Python, a recent stable version from https://www.python.org/downloads/

*Be sure to add Python to environmental variables or 'add python to path'* when the installer asks.

Alternatively log in to https://one.lut.fi , start up a virtual machine and see if you can start up IDLE.

#### Part B
With Python 3, the install command should be pip3.

 pip3 install "kivy[base]" kivy_examples

If you are working in one.lut.fi virtual machine, you need to go to Python directory (see demo on how) and then run:

python -m pip install --upgrade pip setuptools
python -m pip install "kivy[base]" kivy_examples

And then after that, installing KivyMD

pip3 install https://github.com/kivymd/KivyMD/archive/master.zip

If running on the virtual machine

python -m pip install https://github.com/kivymd/KivyMD/archive/master.zip

### Further documentation about Kivy and KivyMD installation
- https://kivy.org/doc/stable/gettingstarted/installation.html
- https://kivymd.readthedocs.io/en/latest/getting-started/

## Step 2: Running a test file
Now that we have IDLE installed, let's download a test KivyMD file from course examples.

### Step 2 Instructions

#### Part A
First, download the contactlistdemo.py and contactlistdemo.kv from https://version.lab.fi/Antti.Knutas/uiu-topic-6-examples into a same directory.

Then, give them a try. Does a new window open with the cards?

#### Part B
Then, can you explain the program flow? What's happening, step by step?

If there are no volunteers, a random person will be asked to explain their view.

## Step 3: Exploring KivyMD
Now that we have explored Python a little bit with a complicated example, let us try basic KivyMD building blocks and Widgets.

### Step 3 Instructions
First, try running the test file and see what's there and what's working.

Try editing the Widget structure by creating a 3x3 grid with numbers, such as:
> 1 2 3
> 4 5 6
> 7 8 9

### Starting point
First, review this [stack layout example](https://gist.github.com/aknutas/ded65641a6f92c2498131ecba19917ab).

You can copy this code into your own IDLE and start editing then from this example:

from kivy.app import App
from kivy.lang import Builder

# Define the Kivy layout using a KV language string
kv = """
GridLayout:
    cols: 
    rows: 

"""

class GridLayoutDemo(App):
    def build(self):
        return Builder.load_string(kv)

if __name__ == '__main__':
    GridLayoutDemo().run()

### Extra challenge
Can you convert the Kivy program to KivyMD? What's the difference?

### Resources
Good starting point is the demo above and the documentation:
- https://www.geeksforgeeks.org/gridlayouts-in-kivy-python/
- https://kivy.org/doc/stable/api-kivy.uix.gridlayout.html#kivy.uix.gridlayout.GridLayout
- https://kivy.org/doc/stable/api-kivy.uix.gridlayout.html
- https://kivymd.readthedocs.io/en/latest/components/gridlayout/

## Step 4: Retrospective
At this final step, two selected student teams present their projects. Finally, we discuss: What was easy, what was difficult? Which kind of difficulties there might be in the final project?

###### tags: `user interfaces and usability` `course materials`