Controlling the display
Scrolling colors
Now we're going to use the loop() part of the code.
See that mp.update() function? It's probably the most important function of all and it's located under the I/O section.
Its mission is to read everything that has happened between the last time it was called and now and to transfer those changes to the hardware.
For example, fillScreen() function would not change anything if the mp.update() isn't called.
Besides the screen, it also refreshes buttons, the speaker, LEDs and pretty much every other component on the phone.
One mp.update() is there by default but for this program, we've added two more.
We've also used another new block called wait().
It translates to the delay() function which stops everything for a certain amount of milliseconds.
The number value block can be found in the Math section and its value can be changed to suit our needs.
Since the loop() function is really fast, sometimes we need this delay to actually see what is going on on the screen.
Using delay when expecting a fast and responsive program, however, is not the way to go, especially when we're using buttons. More about that in the next lesson.
What we're actually doing in this program is alternating the screen color between three values.
Firstly we change it to white, then wait 500 milliseconds or 0.5 seconds.
Then, we change it to cyan and wait another 500 milliseconds.
Lastly, we change it to yellow, wait 500 milliseconds and return back to the beginning of the loop, where the screen is again changed to white.
Notice that we're calling the mp.update() function after each color change in order to transfer that color to the screen.
Update function
Be careful when using mp.update() since it is not the fastest function.Calling it too many times in one loop will slow down the program significantly - USE IT WELL!
Ringo library offers three different fonts that can be re-sized and re-colored as we like.
Functions for that are rather simple and should not be a problem to understand for anyone.
The font type is easily changed with the drop-down menu of the set font type block. The font size, however, multiplies the size of the selected font by the desired value. By default, both of those values are 1, so setting them at the beginning of the program to that same value actually made no difference.
Later both of those values have been changed. In the last example, we're printing out two words "And SIZE!" in a different font that is twice the size.
The print() function here is something that we're going to use quite often. The first empty slot is a string of characters that are meant to be written out.
You can find an empty one in the Text section.
The second and third slot are the location of the first letter. Setting both of those values to 0 will print out words in the upper left corner of the screen.
With these numbers, we're actually referencing pixel locations. Our screen is 128x160 pixels and we can manipulate each and every one of them.
Everything that we write/draw between the x values of 0 and 127 and y values of 0 and 159 will be visible on the screen.
If any of those values is out of that range, we will not see the component.
Be careful when using mp.update() since it is not the fastest function.Calling it too many times in one loop will slow down the program significantly - USE IT WELL!
Writing out some text
Now that we know how to change the background color, it's time to start writing something on that canvas.
Ringo library offers three different fonts that can be re-sized and re-colored as we like.
Functions for that are rather simple and should not be a problem to understand for anyone.
With this program, we're writing some words out on the screen in different fonts, sizes, and colors.
The font type is easily changed with the drop-down menu of the set font type block. The font size, however, multiplies the size of the selected font by the desired value. By default, both of those values are 1, so setting them at the beginning of the program to that same value actually made no difference.
Later both of those values have been changed. In the last example, we're printing out two words "And SIZE!" in a different font that is twice the size.
The print() function here is something that we're going to use quite often. The first empty slot is a string of characters that are meant to be written out.
You can find an empty one in the Text section.
The second and third slot are the location of the first letter. Setting both of those values to 0 will print out words in the upper left corner of the screen.
With these numbers, we're actually referencing pixel locations. Our screen is 128x160 pixels and we can manipulate each and every one of them.
Everything that we write/draw between the x values of 0 and 127 and y values of 0 and 159 will be visible on the screen.
If any of those values is out of that range, we will not see the component.