Click, slide, and rotate!

Welcome to the second example in Synthia's coding guide.

In this one, we'll use all the accessible inputs and play with them for a bit.

Inputs on Synthia are pushbuttons, sliders, and encoders - so, the parts you have soldered!

The first thing we'll do in this sketch is create two variables, "x", and "y", that will represent the axis.

Take the "set to" blocks for both variables and stick them in the Arduino run first section.

You can put the variables on any number you want, but we choose these numbers so the starting point is not on edge.

So, these numbers signify the position of the LED that lights up on the main matrix once we turn on the device.

Now is the time for another thing you know how to do: create the function.

We'll call it "drawPixel," as in the last sketch.

Take the "call drawPixel" block and place it under the variables.

With this function, we'll light up the LED that is determined by the variables "x" and "y".

Now, let's ensure the "drawPixel" will be able to light up that particular LED.

Step one is to clear the matrix before anything else starts.

You'll use the "clear the matrix" block from the LED matrix block section.

We'll need the "set track monochrome matrix pixel brightness to" block from the LED matrix.

Will set the brightness to 255 (that is the maximum), and "x" and "y" as the variables of those coordinates.

random image

Finally, you have to push the changes you have made, and for that, you have to use the "push changes to matrix" block from the LED matrix block section.

Amazing!

Now, let's go back to the Arduino run first section, create another variable, and call it RGB.

We'll use the "set RGB to" block, just like we did for the "x" and "y" variables, and place it under the "call drawPixel" block.

RGB variable defines the ordinal number of the LED that lights up. Set the numerical value of the RGB variable to 0.

The reason why we choose 0 is the same as in the last sketch. There are five RGB LEDs in the row, and the PC starts counting from 0, so we have to put the numerical value 0 for the first RGB LED to light up.

Let's create a function for this variable.

This function will do exactly the same as the last one, but for the RGB variable.

So, the next thing you'll have to do is place the "call drawRGB" block under the "set RGB to" block in the Arduino run first section.

DrawRGB function will light up a particular RGB LED based on the "RGB" variable.

In the "drawRGB" function, we'll determine the color of the LED and change the variable to RGB. The difference is that everything will be done twice - since we are doing it for the slot RGB and the track RGB matrixes.

Firstly, you'll have to clear the slot and track RGB. Then, set the color to cyan for both track and slot RGB, and ensure you place the value for the RGB variable.

In the end, you'll have to push changes you have made to the matrixes.

This was a setup, and this part is very important for the final code.

Now it's time to use the inputs!

We'll kick off with the encoders.

To work with the encoders, go to the I/O block section, and find the purple block saying encoders.

Drag and drop this block into the sketch.

Now, we have to determine what will happen with the "x" variable once we move the left encoder.

We'll need a "constrain" block from the Math section.

random image

The amount variable holds the value depending on which side we rotate the encoder. If we rotate it to the right, the value of the amount variable will be 1, and if we rotate it to the left, the value will be -1.

With the constrain block, we are limiting the value of the variables between 0 and 15 (because 16 is the maximum number of the LEDs placed horizontally).

So, we took the block from the Math section, get the sum of the "x" and "value", and with the constrain block limit that sum to be between 0 and 15.

If we rotate the encoder to the right, x will increase by 1, and if we rotate it to the left, x will decrease by 1.

After we set everything up, call the "drawPixel" function.

Now, let's do the same thing for the right encoder.

Since we'll be using all the same blocks, you can simply duplicate everything we did for the left encoder and change it a bit.

random image

So, instead of left, be sure to put "right encoder" and change "x" into the "y" variable.

Also, the rank for limiting will be between 0 and 4 since there are 5 LEDs placed vertically on the matrix.

Now is the time for the pushbuttons!

We'll work only on the first two pushbuttons from the left. The far left one will be named button A, and the right one will be named button B.

Find this block in the I/O block section:

First, we'll set everything up for button A, the far left one.

As you can see, we'll immediately change the value of the RGB variable to -1.

Once we click on the button A, the value will change by 1.

With the logic block, we are determining that if the value of the LED falls to 0, the value will go back to 4 (the far right button will light up).

In the end, we must put the "call drawRGB" block inside the big purple block.

Let's duplicate everything for button B.

Change it a bit to look like the block on the photo:

Everything will be the opposite for button B.

So, if we click on the button B, the value will change by 1, and once we get to 4, the value will go back to 0 (the far left LED will light up).

And last but not least, the sliders!

First, you have to find this block in the I/O block section:

While we are moving sliders, their value changes depending on the position of the pixels on the matrix.

The "value" variable is set between 0 and 255. Y-axis goes from 0 to 7 (the number of the LEDs on the side of the slider).

So, we have 256 values for the slider and 8 for the LED matrix.

To map the slider to a pixel coordinate, you have to divide its value by 32 (the number we get by dividing the value of the sliders with the value of the LED matrix) and round the number.

The slider's value at the lowest position is 0, and at the highest is 255.