My WordPress Site

Category: By Software

Badger 2040 – a low-cost board with rpi microcontroller and e-ink display
Here you will soon find a short post about my first experiences with the BADGER 2040. This is a low-cost, credit card sized board that you can buy here for GBP 16.50. The Badger combines the Raspberry Pi RP2040 controller with a nice electronic ink display. You can use either C/C++ or MicroPython as programming languages.

A first photo

An easy way to create programs is to use the Thonny editor. This editor is quite versatile, it has a REPL (Read-eval-print-loop), so you can send Python commands directly to the BADGER and they will be executed. This is a nice way to try out code snippets.

Normally you will put your code into a file and then transfer it to the BADGER. The Thonny editor also allows you to view the files on the controller and those on your computer, so it is easy to move files forth and back within the editor. The editor will also highlight any syntax and runtime errors you make.

In order to familiarise yourself with Thonny and the BADGER, just follow the Tutorial. Here are some further remarks:
- You need to connect the BADGER to your computer. The USB socket on the BADGER is rather fragile, so please always hold a thumb on the socket when you connect/disconnect a USB cable. Furthermore, always use straight movements, do not bend or wiggle the connector as the socket may break off the board.
- You can find the code examples in a GitHub repository. A good way to get to know the BADGER and MicroPython is to read and understand existing code, modify the program and then run it to check if you get the desired outcome. In addition to the examples, you may need a bit of knowledge of Python and the MicroPython libraries being used. There are some lower level libraries/modules that are documented here and some BADGER specific libraries that are described here. The import statement at the beginning of a file will let you know where you have to look for. “import time” as an example means that functions of a module with the name time are being used, you find its description in the documentation for the MicroPython language. Below is a screenshot from the documentation. The example here shows functions in module time, they allow to delay execution or get timing information.
- If you want to get some more information about the controller, this may be a suitable site to get it.
- For the last examples of the tutorial you need to reformat a photo. You can find a short description on how to do that on a Windows machine here.
- Once you have finished your work, please do not forget to back up your files. If you have a GitHub account, you can also create a new repository and drag and drop the files there.
One more example, next step to your own programs …

So far you have only used the interactive REPL to enter code, upload it to the BADGER and then run the code. Normally you save your code in a file, then upload and run it on your machine, in our case the BADGER. The following file makes the LED on board of the BADGER blink. Create a new file using the green plus symbol in Thonny, and enter the 9 lines of code. In Python indentations need to be respected, they are part of the syntax. Once you are finished, click the round green button with the white flash. This will upload the file and run it.
September 17, 2022
The Console of the Chrome Developing Tools

The Google Chrome Development tools are very useful if you want to understand and learn about web programming.

The tools are integrated in the Chrome web browser and you can find them easily selecting the View Menu, then Developer and Developer Tools.

By default at the right side of the browser a panel will appear . For trying out some Javascript code, click on the Console tab and then clear the console.

The console allows you to enter small Javascript code snippets, just one line or a small block. When you have finished entering your command(s) behind the “>” prompt, press return on your keyboard to execute your code. If your code produces any output, it will be shown on the following line.

console.log(....) will print anything you ask it to print in between the parentheses. But methods and functions also have return values (like an output). If the function has nothing to return, it will often write “undefined“, no worries if you read this message.

October 19, 2020
How to Get Window Screenshots

Often you need to get a copy of your screen or a part of it for documentation purposes. There are many different ways available with Windows 10, my two favourite tools are mentioned here, they also give you some choice on what part of the screen you want to copy.

Snipping Tool

This tool is around already for a long time. It will not show up any more as an app, so you will need to type its name in the search bar at the bottom of the screen. Then you can choose it.

How to find the Snipping Tool with the Search Bar

Click the New button to begin the screenshot process. The default snip type is a rectangular snip, but you can also take free-form, full-screen and window snips.

The Snipping Tool does not automatically save your screenshots — you will need to manually save them in the tool before you exit — and it does automatically copy your captures to the clipboard.

This tool maybe discontinued in the future, a message with that content will be displayed when you launch the app.

Snip & Sketch

This is a newer tool, the fastest way to launch it with the keyboard shortcut Windows key + Shift + S. You will also see the Snip & Sketch tool listed in the Start button as well as in the notification panel where it is listed as Screen snip, these are two alternative ways to start the app.

After launch, the screen will be dim and a tiny menu will open at the top of your screen. It lets you choose which type of screenshot you want to take — rectangular, free-form, window or full-screen.

Choices for a screenshot with Snip & Sketch, displayed at the top of the screen

Once you take your screenshot, it will be saved to your clipboard. Click the notification that pops up to open the screenshot in the Snip & Sketch app to process it further in the app. You may also access the image via the notification panel.

There are other options. available with this tool, just have a look in the documentation.

Both these tools are not as powerful as some commercially available tools, but they give you the basic functionality and they are free-of-charge.

October 14, 2020

Sceenshot, Snip & Sketch, Snipping Tool
p5.js – Learn the basics about classes

Classes are a means to structure your program and make the code more easy to follow. A class allows you to put all variables and functions that create, manipulate and interact the same type of structure in one declaration and use them afterwards throughout your program.

(more to follow …)

October 14, 2020
p5.js – Learning about arrays
Arrays are a powerful element of programming languages. They allow to store and manipulate data using one name and then accessing individual data with an index (number). You can imagine them as a container that holds many objects.

You may also imagine a postman distributing letters in one street with a certain name, distinguishing the individual addresses by the house numbers. The name of the street compares to the array name in programming, the index has the same meaning as the house number.

The image below summaries the key features of an array and also visualises how the indexing works to create, access and delete fields of an array.

You have several ways to access the elements of an array. The most common ways are …
1. You can use the array name with the index in brackets to set or get the content of one field, Burt also to add new items.
2. You can use the push/pop methods to add or remove items at the end of the array.
3. You can use the unshift/shift methods to add or remove items at the beginning of an array.
A full documentation on arrays can be found on the MDN website. It not only describes in words what the class and its methods are doing, but it also provides small editors with sample code you can modify and execute. For each method there are detailed descriptions accessible on the left side of the window (if your browser window is wide enough) with even more sample code to play with. Have a look.

Assignment

The following screenshot shows how the push and pop methods are working.
1. Please follow the instructions given here to launch the Development Console of your Chrome browser and then do the example with the push and pop methods by yourself.
2. Next try to figure out how the unshift and shift methods are working. You can have a look at the MDS documentation first (you find at in the array section).
We will work extensively with the Array methods for making games, so getting familiar with them will be very helpful later.
October 14, 2020
Micro:bit controls Neopixels
How to set up the hardware

Please follow the wiring shown on the photo below. There are two connections to the micro:bit, one is on the GND connector (the yellow cable on the picture), the other is on PIN0 (the white cable on the picture).

The Neopixels get their power from a battery pack, as they may draw too much current to be run via the USB interface and the micro:bit. The battery holder is made for 4 or 6 batteries. As we can only use 3, the missing battery is replaced with a wire (the green cable) in case of the holder for 4 batteries. The 3 batteries supply 4.5V, this is sufficient and safe, 4 batteries with 6V may destroy the Neopixels! The seconc photo below shows the wiring scheme with the battery holder for 6 batteris, again we only put in 3 batteries.

How to start coding Neopixels with MakeCode blocks

Here are some links for you if you want to code the Neopixels with MakeCode Blocks. There is a nice tutorial here. If you want to start by yourself, launch the web editor here, create a new project, then go to Advanced/Extensions/neopixel to download the blocks to control the Neopixels. Here is a simple example project, the block “Pick random 0 to 255” at the bottom needs to be entered for red, green and blue each, so three times!

Here is another Makecode program that runs a rainbow on the 30 LED Neopixel stripe. You may notice that the for loop is different, it was wrong in the example above and is correct in the new code (why? Hint: How many LEDs do we have available on the stripe, how many do we count through in the for loop?)

The program uses a different colour encoding than the RGB (Red, Green, Blue) system we used so far. It is called HSL encoding and uses the three values Hue [0..360], Saturation [0..100] and Lightness/Luminosity [0..100]. The values inside the square brackets show the range the three parameters are allowed to have, see also the website here to play around with the parameters. For simplicity, change only the values of Hue in the given range and choose Saturation = 100 and Lightness = 50 to get bright and shiny colours.

In order to try out you code, you can actually run it in the simulator. This does even work for the stripe of 30 LEDs. It is good practise (and saves time) to test with the simulation first. When your code runs flawless there, upload it to the micro:bit and see it there in all its glory.

Here are some Micropython code snippets to upload, try out and modify to your liking.

You need to start a web browser and go to micro:bit to copy and paste the code below. Then press “Download” to create an executable file with the extension .hex. You find this file in your download folder. Next connect the micro:bit to an USB port and make sure that you see the micro:bit as a drive in the File Explorer. Then drag and drop the file onto the micro:bit drive icon. The yellow LED on the micro:bit will start to flash. If the program is correct, the program will start to run once the yellow LED lights up steadily. Otherwise you will get error messages with line numbers on the LED matrix of the micro:bit. Once you have fixed the errors, download again.

This first example changes the colour of the Neopixels one after another and leaves each pixel on until it is refreshed in a different colour.
```
[code language="python"]
"""
Repeatedly displays random colours onto the Neopixels.
Works for Neopixel strips of 30.
"""

from microbit import *
from neopixel import NeoPixel
from random import randint

# Setup the Neopixel strip on pin0 with a length of 30 pixels
np = NeoPixel(pin0, 30)
while True:
   #Iterate over each LED in the strip
   for pixel_id in range(0, len(np)):
      red = randint(0, 60)
      green = randint(0, 60)
      blue = randint(0, 60)
      # Assign the current LED a random red, green and blue value between 0 and 60
      np[pixel_id] = (red, green, blue)
      # Display the current pixel data on the Neopixel strip
      np.show()
      sleep(100)
[/code]
```
Here is another example with a different lighting pattern:
```
[code language="python"]

"""
Adafruit example, modified to run with 30 LED strip.
see at
https://learn.adafruit.com/pages/11472/elements/2981640/download
for the basic version with one running neopixel
180815 Modified the original version, but not yet debugged.
181001 Debugged and running!
"""

from microbit import *
from neopixel import NeoPixel

num_pixels = 30
foreground = [255, 0, 0] # Int color - red, green and blue
foreground2 = [0, 255, 0]
background = [16, 16, 16]

ring = NeoPixel(pin0, num_pixels)

while True:
   # red/green dot circles around a white background (for 30 neopixel strip)
   for i in range(0, num_pixels-1):
      ring[i] = foreground # set pixel i to foreground
      ring[i+1] = foreground2
      ring.show() # actually display it
      sleep(50) # milliseconds
      ring[i] = background # set pixel to background before moving on
      ring[i+1] = background
      ring.show()
      # implement the closing of the circle for last and first element.
      ring[num_pixels-1] = foreground
      ring[0] = foreground2
      sleep(50)
      ring[num_pixels-1] = background
      ring[0] = background
[/code]
```
ATTENTION: This code snippet uses the concept of a block of code. The lines in a block of code belong together, here they are inside loops starting with while and for … Everything inside the loop is repeated. In order for the interpreter to see where the blocks begin and end, each line inside is indented by four/eight spaces. The website may not show this properly. When copying the code over to your editor, please make sure that these lines remain indented.

Here you find the full documentation for the micro:python language with the micro:bit. The particular link brings you to the documentation for the Neopixel library.
October 12, 2020
The micro:bit

The micro:bit is a tiny computer that you can program with blocks and also with other programming languages. It has two buttons, 25 LEDS, and some more sensors built in, you can add more sensors (to pick up and measure events and data) and activators (lamps, other items to do something). If you are fancy to see more, have a look here on this website, there are more projects! Today you can create a small Rock, Paper, Scissor game, follow the link below.

Rock Paper Scissors Activity

How to use the micro:bit?

First, connect your micro:bit with the USB cable to the computer. Then you launch the editor and write your code. At the end you need to compile (translate) the code into something the processor on the micro:bit can understand and download it. When the download is finished (a red LED on the micro:bit will stop blinking) the program will start automatically. You’re done, congratulations!

October 12, 2020
Getting started with p5.js

p5.js is a programming language created for artists. It is easy to learn and uses Javascript, the computer language of the internet and beyond. p5.js runs on a web browser, recent versions of Firefox, Chrome or Safari are fine. As such you can even run it on a mobile phone or tablet. Here you go to the p5js homepage to get an overview over the language.

Normally you need to open several windows to run Javascript on a browser, and you also need to embed your code in some basic HTML and CSS structure. p5.js provides a so called IDE that allows you to focus on the main part, coding with Javascript. It consists of an editor, allows you to execute the code, read and write data, save code and more. Launch the p5.js Web Editor by clicking on the link. Then you can code away!

First, please create an account by clicking on Sign Up in the top right corner of the window and follow the instructions to create an user account.

Don’t forget to write down your username and the password! It is a good idea to save these credentials on your Google account, then you have it always available.

A short introduction to p5.js you find here. Whenever you have finished a program or need to stop, don’t forget to save your file by selecting Save in the File menu item of the editor. Later you can reload your project with Open and continue to work.

A more comprehensive source to learn p5.js is Getting Started With p5js. This is a good introductory book with lots of code samples you can copy and paste into the editor and try out. Happy Coding is another site that introduces you to p5.js covering some topics with tutorials, and others with sample code.

These information will allow you to get up and running, on this site you also find more posts on p5.js going into more detail and showcasing sample projects.

October 12, 2020
Alice 3: Move the hand up to show “ok”

The code below let a person raise his hand and form the ok sign with his index finger and thumb. This method can be used with all sprites that have a hand with fingers. They are arranged in the class Person. Therefore we create the procedure for this class and can then use it for all present and future persons in our project.

December 5, 2019
Alice 3: Make a biped walk

There is a nice video on how to create procedures that allow you to make bipeds (i.e. characters with two feet) walk. It is here

The movement has been separated into two procedures, the first halfstep called “firstStep()”.

Next we create a procedure for a full step with both legs called “walk()”.

For that we also need to create a Biped property that keeps track of which leg moves last so that next time the other leg moves. You create it also by clicking on the yellow hexagone and choose create Biped property. Here is the requester that comes up with all data you need to fill in. This property only has two values signaling which leg to move next. Values of type Boolean have only two values, they are suitable for this task.

Here are the two procedures used inside “myFirstMethod()”, the rest of the program is for another project, it also contains code to use colour effects.

Here is an add-on, it is the function walkSteps(steps). Here steps is a parameter that tells the method how many steps to take.

Object oriented design elements with classes and their properties and methods as well as inheritance as a way to structure classes.

All sprites and props in Alice are arranged in a class hierarchy.

You have already encountered class hierarchies in biology. They allow animals and plants to be classified by certain criteria in a taxonomy or hierarchy. The criteria go from more generic at the top of the tree (Domain in biology) to more specific at the bottom of the tree (Species in biology). A species shares most of the properties of the respective genus, and has different ones to distinguish itself from other species.

Source:

The same concept is applied in the class hierarchie in Alice. Here the more generic classes are called parent classes, a class derived from one parent may be called child class. When you are on the “Setup Scene”, you see all characters and props arranged in classes at the bottom. The class Biped contains humanoids, but also monkeys and other animals, all of them are walking on two legs, at least in Alice. In order to create a biped character on your scene, you select the class Biped, being the parent class, and then define a child class with individual properties as age, clothes, hair, … . The class Biped also provides methods that allow you to let them act that inherited to the child class. Inside the child class you can then define own properties and methods that are only applicable to that particular class.

Inside Alice the class hierarchie can be visualised by clicking on the yellow hexagone beside the Scene Tab in the Code Editor. Here is a screenshot how it may look like. You can see the inhertance structure be the amount of identation, i.e. AdultPerson is a child class of Person that is a child class of Biped.

If you want to create a procedure to make a biped walk, you select the Biped class, and then code your procedure. As a result, the procedure is available to all characters that are derived from the biped class, existing ones, but also those you may create in the future.

This is a major characteristic of so called Object Oriented Programming and helps you to structure your work and avoid repetitions of similar properties and methods.

December 5, 2019