Object-Oriented Programming and Web User Interfacing Part II

Exercise 1

This session, I finally completed all parts of Exercise 1. To recap, the problem is provided below.

Write a class to encapsulate the functionality of your Raspberry Pi LED contraption. It should do the following:

1. Initialize itself by setting up all the LEDs we need to control.

2. Provide a led_on() method to turn on individual LEDs

3. Provide a led_off() method to turn off individual LEDs

4. Provide a race_up() method to make the LEDs race up

5. Provide a race_down() method to make the LEDs race down

6. Provide a dance_randomly() method to make the LEDs dance on and off randomly

7. Your class should also include tests when the file is run by itself using the if name == "main" trick you've learned.

A skeleton of the code was created after last session to visually display the test-driven development (TDD) method of programming. This makes the intimidating task of this exercise more manageable because it’s easier to see the direction the code is going. I will continue this method in the future, partly to map out the route the code should take, and partly because I know I’m supposed to do it this way. To begin, we will start at the top with the initialization.

Initialization

In our TDD skeleton, we defined the initialization function without really explaining what it means. For functions within a class, “self” is always one of or the only argument. This is how Python knows we are working inside the class. Functions within a class are called methods. Our initialization method looks like lines 28 and 29 as shown.

Initialization is useful to do at the beginning of every piece of code because it allows the software to clean things up and get itself ready for what’s to come. Inside this initialization function, we will also define which LEDs the end user may select. It is worth noting that adding an underscore as a prefix to variables ensures they may not be changed by the end user. We want immutable variables for which LEDs are valid, which LED in sequence corresponds to which general purpose input/output (GPIO) pins, the index value of each LED, and of course, LED as a variable itself. This is shown in lines 31 through 35.

Variables within a method must be prefixed with self. (including the period). This makes sense because self is always an argument within the functions that are inside a class. Therefore, the correct reference to valid LEDs the user may select is as shown in line 31 as self._valid_leds. In my example, the valid LEDs are connected to GPIO pins 18 through 22. Next, we compare the desired LED with the valid list. If the desired is within the valid list, then it is added to a new list called self._physical_leds. Finally, we create an index of 0 to 4 corresponding to the self._physical_leds list for easy reference later in the code.

Method: Turn Individual LEDs On

Now that initialization is complete, we may move on to developing methods to control our Raspberry Pi. We start by defining a method within our class. This method will be called led_on. As usual, the function must contain the argument self. In addition, we must also define our input argument. For the led_on function, we would like the user to input which LED they would like to turn on, so we will simply name the argument led_number. The user should input a number between 0 and 4 (since we have 5 LEDs and Python is zero-based) to communicate that is the desired LED to be turned on. If the number is outside the range, an error message will display the requested LED is invalid. If a valid number is requested, then a message will display in the terminal that the specified LED is on, and the code will turn on the LED. An if/else statement is useful for checking to see if the LEDs are within the desired range.

In the code above, it is worth mentioning the formatting within the print statements. It may have been noticed that the previously useless curly brackets {} were used. This allows the programmer to insert a changing variable inside a print statement. The .format(variable) inserts the desired variable to the designated place within the print statement. After writing out one method, the following methods are much easier because they are quite similar.

Method: Turn Individual LEDs Off

This method is literally the exact same as the led_on function, except on is replaced with off.

Method: Race the LEDs Down

Racing the LEDs down sounded daunting initially, however, it was actually very simple in practice. As usual, a method was defined as race_down() and contained the argument self. A for loop was created inside this function to cycle through each LED in the predefined index. Each LED was turned on, put to sleep for a predetermined amount of time, then turned off.

Method: Race the LEDs Up

Racing the LEDs up was the same as racing them down, however the reversed() function was used to cycle backwards through the LED index.

Method: Dance Randomly

Random dancing of the LEDs required some extra research. It was assumed that this was possible but I was unsure of how to do so. The random.seed() and rand.int() functions were used. A for loop was created to cycle through 5 times. A random number was selected between our index bounds to turn on, sleep, then turn off

Exercise 2

The next step of this assignment was to create a static HTML site with the following pages:

1. index.html - acts as the home page and has a menu to get to all the other pages

2. individual.html - has a menu to get to the other pages and a text box with on/off radio buttons to allow the user to control individual LEDs

3. group.html - has the menu, and a bunch of radio buttons to allow a user to turn on or off any of the LEDs at once

4. patterns.html - have the menu, and buttons to allow the user to make the LEDs race up, race down, or dance randomly

What is Static HTML?

Static HTML is essentially the code for a basic webpage that doesn’t necessarily work yet. It can be written in coding tools such as Atom or PyCharm, or in basic text editors such as Notepad. It is merely a collection of files that are outside of any sort of web building framework that outline the content of a web page. You can see an example by right clicking a website and selecting Inspect.

index.html

To begin, I prefer to write my HTML inside of PyCharm. It helps ensure I am not missing any closing statements or formatting inconsistently. Writing in HTML is not the same as writing in Python, which was a difficult concept for me to grasp. In HTML, comments are surrounded by <!-- and --->. Like Python, comments are only visible on the back end.

The basic components of my HTML page are:

<!DOCTYPE html>

<html>

<title> </title>

<h1> <h1>

<body> </body>

</html>

As you can see, every opened term must be closed. <!DOCTYPE html> establishes the document is an HTML file. <html> marks the beginning of the HTML code. <title>, <h1>, and <body> correspond to page title, header and body.

Parts 2 - 4 to be completed next time!