2.3 Display

This exercise extends our app's capabilities with a 128x64 display.

a) Display a welcome message

Welcome any new users to your application and show a welcome message on the OLED display on startup of your app.

Possible solution:

Exercise 2.3 - Display | a) Display a welcome message

b) Display and update sensor values

After 5 seconds, remove the welcome message from a) and reserve the first two rows to display the temperature and humidity. Update the values in an appropriate interval. Make sure you format the values so that they are readable and include units of measurements.

You can use the toFixed() function to truncate a decimal value to any number of decimal digits.

Possible solution:

Exercise 2.3 - Display | b) Display and update sensor values

c) Control the heat with the hardware button

Imagine a user of your app should be able to perform 3 different actions using the hardware devices. The actions are:

• Turn down heat

• Turn up heat

Improve your app's version from b) and reserve the lines 4 and 5 to display each action in a separate row. Indicate by a small arrow ">" that the first option is initially active. The user should now be able to navigate through the different options by pressing and releasing the hardware button. With every button press, the ">" should move to the next action, and when the last one is active, start over at the beginning.

To perform an action, the user should press and hold the hardware button for at least half a second. To simulate the status of the heat and its current level, reserve line 7 to display a number of symbols (for example a pipe: |) to indicate the current heat level in 10 discrete steps.

To measure how much time elapsed between the button being pressed and released, you can assign a variable with the current date when the button is pressed, and another when the button is released. The difference between both values will be the elapsed time in milliseconds:

var startTime = new Date();
...
var endTime = new Date();
var elapsed = startTime - endTime // time in ms

Possible solution:

Exercise 2.3 - Display | c) Control the heat with the hardware button

d) Temperature visualized

Visualize the temperature on the display. Create a character-based visualization every 5 seconds and use for displaying the temperature. Move the visualization from left to right with every new value, so the user can see a snapshot of the temperature's history.

See if you can find a suitable character for the visualization. Maybe a pipe will do?: |

A simple data visualization with pipe symbols.

Possible solution:

Exercise 2.3 - Display | d) Temperature visualized