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.

random image

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

random image

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.

random image

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.

random image

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.

random image


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. 

random image

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.

random image

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.

random image

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.

random image

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 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. 

random image

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

random image

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

random image

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

random image

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.

random image

Let's duplicate everything for button B. 

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

random image

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:

random image

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. 

random image

In the end, we have to put the "push changes to slider monochrome matrix" block inside the purple block. 

random image

We can duplicate everything for the right slider.

The only thing we'll change is the value of the "x" parameter to 1. 

random image

Hit the Run button, wait for the code to compile, and enjoy!
You can test your code by rotating the encoders, sliding the sliders, and clicking on the pushbuttons.

Looks amazing, right? 

One more sketch to go, and you're ready to code on your own.

Here are a few photos showing what it will look like once you compile the code!

So if you are rotating encoders, you'll be moving the dot's position on the LED matrix.

random image

If you press the far left or the right pushbutton, another LED will light up. 

random image