Volume Indicator - GC9A01 Display Using Visuino

In this tutorial we will make a colorful Volume Indicator using GC9A01 SPI Display, rotary encoder, Arduino and Visuino program.

Watch the video!

1. Arduino UNO (or any other Arduino or ESP)
2. GC9A01 SPI Display
3. Rotary encoder module
4. Jumper wires
5. Breadboard
6. Visuino program: Download Visuino

Note: If you plan to use a lot of graphics on the display or more sensore/modules then you might need a board with larger memory like Arduino UNO R4 WiFi

1. Connect GC9A01 Display pin [VCC] to Arduino pin [3.3V]
2. Connect GC9A01 Display pin [GND] to Arduino pin [GND]
3. Connect GC9A01 Display pin [SCL] to Arduino pin [13]
4. Connect GC9A01 Display pin [SDA] to Arduino pin [11]
5. Connect GC9A01 Display pin [DC] to Arduino pin [9]
6. Connect GC9A01 Display pin [CS] to Arduino pin [10]
7. Connect GC9A01 Display pin [RST ] to Arduino pin [8]
8. Connect Encoder module pin [CLK] to Arduino digital pin [2]
9. Connect Encoder module pin [DT] to Arduino digital pin [3]
10. Connect Encoder module pin [+] to Arduino pin [5v]
11. Connect Encoder module pin [-] to Arduino pin [GND]

Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "Arduino UNO" as shown on Picture 2

1. Add "GC9A01" component
2. Add "Rotary Encoder Sensor" component
3. Add "Integer Multi Source" component
4. Add 8X "Compare Integer Value" component
5. Add 8X "Digital To Color" component

Step 1: Open the Display Configuration

1. Double-click on the "Display1" component in the diagram.
2. This will open the Elements window for the display.

Step 2: Add a Draw Scene

1. In the Elements window, locate the Draw Scene element.
2. Drag the Draw Scene element to the left side of the window.
3. In the Properties window, select the Elements property.
4. Click on the 3 dots button next to the Elements property to open the Elements Editor.

Step 3: Add Draw Polygon Elements

1. In the Elements Editor, locate the Draw Polygon element.
2. Drag 8X Draw Polygon element to the left side of the window.
3. In the Properties window, configure the following:
4. Set the Color property to aclBlack.
5. Select the Fill Color property and click on the pin icon.
6. From the dropdown, select Alpha Color SinkPin.
7. Set the X property to 120.
8. Set the Y property to 120.

Step 4: Configure Polygon Points

1. In the Properties window, locate the Points property.
2. Click on the 3 dots button next to the Points property to open the Points Editor.
3. In the Points Editor, follow these steps for each polygon:

Polygon 1:

1. Drag a Point element to the left side.
2. In the Properties window, set:
3. X to 0
4. Y to 0
5. Drag another Point element to the left side.
6. In the Properties window, set:
7. X to 0
8. Y to -130
9. Drag another Point element to the left side.
10. In the Properties window, set:
11. X to 120
12. Y to -130
13. Drag another Point element to the left side.
14. In the Properties window, set:
15. X to 120
16. Y to 0
17. Close the Points Window.

Polygon 2:

1. Repeat the process for Polygon 2:
2. Point 1: X = 0, Y = 0
3. Point 2: X = 120, Y = -130
4. Point 3: X = 130, Y = 0
5. Point 4: X = 0, Y = 0
6. Close the Points Window.

Polygon 3:

1. Repeat the process for Polygon 3:
2. Point 1: X = 0, Y = 0
3. Point 2: X = 120, Y = 0
4. Point 3: X = 120, Y = 130
5. Point 4: X = 0, Y = 0
6. Close the Points Window.

Polygon 4:

1. Repeat the process for Polygon 4:
2. Point 1: X = 0, Y = 0
3. Point 2: X = 0, Y = 130
4. Point 3: X = 120, Y = 130
5. Point 4: X = 120, Y = 0
6. Close the Points Window.

Polygon 5:

1. Repeat the process for Polygon 5:
2. Point 1: X = 0, Y = 0
3. Point 2: X = 0, Y = 130
4. Point 3: X = -120, Y = 130
5. Point 4: X = 0, Y = 0
6. Close the Points Window.

Polygon 6:

1. Repeat the process for Polygon 6:
2. Point 1: X = 0, Y = 0
3. Point 2: X = -120, Y = 0
4. Point 3: X = -120, Y = 130
5. Point 4: X = 0, Y = 0
6. Close the Points Window.

Polygon 7:

1. Repeat the process for Polygon 7:
2. Point 1: X = 0, Y = 0
3. Point 2: X = -120, Y = 0
4. Point 3: X = -120, Y = -130
5. Point 4: X = 0, Y = 0
6. Close the Points Window.

Polygon 8:

1. Repeat the process for Polygon 8:
2. Point 1: X = 0, Y = 0
3. Point 2: X = 0, Y = -130
4. Point 3: X = -120, Y = -130
5. Point 4: X = 0, Y = 0
6. Close the Points Window.

Close all the windows.

Select "RotaryEncoderSensor1" and in the properties window set

1. "Max" > "Value" to 8 and "Max" > "Roll Over" to False
2. "Min" > "Value" to 0 and "Min" > "Roll Over" to False

Select "MultiSource1" and in the properties window set "Output pins" to 9

Step-by-Step Tutorial for Compare Components

Compare1

1. Select Compare1 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 1.

Compare2

1. Select Compare2 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 2.

Compare3

1. Select Compare3 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 3.

Compare4

1. Select Compare4 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 4.

Compare5

1. Select Compare5 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 5.

Compare6

1. Select Compare6 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 6.

Compare7

1. Select Compare7 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 7.

Compare8

1. Select Compare8 in the diagram.
2. In the Properties window:
3. Set Compare Type to ctBiggerOrEqual.
4. Set Value to 8.

Summary of Compare Components

1. Each Compare component is configured to check if the input value (from the rotary encoder) is greater than or equal to a specific threshold (1 to 8).
2. The output of each Compare component is connected to a DigitalToColor component, which maps the result to a specific color for the corresponding polygon on the display.

Step-by-Step Tutorial for DigitalToColor Components

DigitalToColor1

1. Select DigitalToColor1 in the diagram.
2. In the Properties window:
3. Set TrueValue to clNavy

DigitalToColor2

1. Select DigitalToColor2 in the diagram.
2. In the Properties window:
3. Set TrueValue to clNavy

DigitalToColor3

1. Select DigitalToColor3 in the diagram.
2. In the Properties window:
3. Set TrueValue to clBlue

DigitalToColor4

1. Select DigitalToColor4 in the diagram.
2. In the Properties window:
3. Set TrueValue to clBlue

DigitalToColor5

1. Select DigitalToColor5 in the diagram.
2. In the Properties window:
3. Set TrueValue to clGreen

DigitalToColor6

1. Select DigitalToColor6 in the diagram.
2. In the Properties window:
3. Set TrueValue to clMaroon

DigitalToColor7

1. Select DigitalToColor7 in the diagram.
2. In the Properties window:
3. Set TrueValue to clMaroon

DigitalToColor8

1. Select DigitalToColor8 in the diagram.
2. In the Properties window:
3. Set TrueValue to clRed
4. 
   

Summary of DigitalToColor Components

1. Each DigitalToColor component maps the output of a Compare component to a specific color.
2. The TrueValue property defines the color that will be applied to the corresponding polygon when the condition is met.

Note: you can freely experiment with other colors

How It Works

1. The RotaryEncoderSensor1 sends its value to MultiSource1, which distributes the value to all Compare components.
2. Each Compare component checks if the encoder's value meets its condition (e.g., ctBiggerOrEqual with a specific value).
3. If the condition is met, the Compare component outputs a signal to the corresponding DigitalToColor component.
4. The DigitalToColor component sets the Fill Color of the associated polygon on the display.

RotaryEncoderSensor1

1. Connect RotaryEncoderSensor1 pin [Out] to MultiSource1 pin [In].

MultiSource1

1. Connect MultiSource1 pin [Pin 0] to Compare1 pin [In].
2. Connect MultiSource1 pin [Pin 1] to Compare2 pin [In].
3. Connect MultiSource1 pin [Pin 2] to Compare3 pin [In].
4. Connect MultiSource1 pin [Pin 3] to Compare4 pin [In].
5. Connect MultiSource1 pin [Pin 4] to Compare5 pin [In].
6. Connect MultiSource1 pin [Pin 5] to Compare6 pin [In].
7. Connect MultiSource1 pin [Pin 6] to Compare7 pin [In].
8. Connect MultiSource1 pin [Pin 7] to Compare8 pin [In].
9. Connect MultiSource1 pin [Pin 8] to Display1.Elements.Draw Scene1 pin [Clock].

Compare1

1. Connect Compare1 pin [Out] to DigitalToColor1 pin [In].

Compare2

1. Connect Compare2 pin [Out] to DigitalToColor2 pin [In].

Compare3

1. Connect Compare3 pin [Out] to DigitalToColor3 pin [In].

Compare4

1. Connect Compare4 pin [Out] to DigitalToColor4 pin [In].

Compare5

1. Connect Compare5 pin [Out] to DigitalToColor5 pin [In].

Compare6

1. Connect Compare6 pin [Out] to DigitalToColor6 pin [In].

Compare7

1. Connect Compare7 pin [Out] to DigitalToColor7 pin [In].

Compare8

1. Connect Compare8 pin [Out] to DigitalToColor8 pin [In].

DigitalToColor1

1. Connect DigitalToColor1 pin [Out] to Display1.Elements.Draw Polygon1 pin [FillColor].

DigitalToColor2

1. Connect DigitalToColor2 pin [Out] to Display1.Elements.Draw Polygon2 pin [FillColor].

DigitalToColor3

1. Connect DigitalToColor3 pin [Out] to Display1.Elements.Draw Polygon3 pin [FillColor].

DigitalToColor4

1. Connect DigitalToColor4 pin [Out] to Display1.Elements.Draw Polygon4 pin [FillColor].

DigitalToColor5

1. Connect DigitalToColor5 pin [Out] to Display1.Elements.Draw Polygon5 pin [FillColor].

DigitalToColor6

1. Connect DigitalToColor6 pin [Out] to Display1.Elements.Draw Polygon6 pin [FillColor].

DigitalToColor7

1. Connect DigitalToColor7 pin [Out] to Display1.Elements.Draw Polygon7 pin [FillColor].

DigitalToColor8

1. Connect DigitalToColor8 pin [Out] to Display1.Elements.Draw Polygon8 pin [FillColor].

Display1

1. Connect Display1 pin [ChipSelect] to Arduino Digital pin[10]
2. Connect Display1 pin [ResetOutputPin] to Arduino Digital pin[8]
3. Connect Display1 pin [DataCommandOutputPin] to Arduino digital[9]
4. Connect Display1 pin [Control] to Arduino SPI pin [In]

Arduino

1. Connect Arduino Digital pin [2] pin to RotaryEncoderSensor1 pin [Clock].
2. Connect Arduino Digital pin [3] pin to RotaryEncoderSensor1 pin [Direction].

In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.

Congratulations! You have completed your project with Visuino. Also attached is the Visuino project, that I created for this tutorial, you can download it and open it in Visuino: https://www.visuino.eu