Volume Indicator - GC9A01 Display Using Visuino

2025-06-03 | By Ron Cutts

License: General Public License Displays Encoder Music / Sound Boards Sound SPI Arduino

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

Watch the video!

Step 1: What You Will Need

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 sensor/modules, then you might need a board with larger memory, like Arduino UNO R4 WiFi

Step 2: The Circuit

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]

Step 3: Start Visuino, and Select the Arduino UNO Board Type

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 in Picture 2

Step 4: In Visuino Add Components

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 5: In Visuino Set the Display

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

Step 6: In Visuino Set Components

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

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.

Step 7: In Visuino Connect Components

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] to RotaryEncoderSensor1 pin [Clock].

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

Step 8: Generate, Compile, and Upload the Arduino Code

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.

Step 9: Play

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

Download Visuino file: Volume-Control-GC9A01-encoder-Volume-Graphical-Color.visuino

Related Content

What is the I2S Communication Protocol?

By Maker.io Staff

How to Read and Use Encoders

By Zach Hipps

Easily Design Beautiful User Interfaces for Embedded Projects with Squareline Studio

By Maker.io Staff

USB Rotary Media Dial

By Adafruit Industries

Arduino Bar graph Stereo VU meter on VFD display GP1287

By Mirko Pavleski

Retro look Analog style VU meter on VFD display with Arduino Nano

By Mirko Pavleski

Audio Frequency Separator

By Kaleb Kohlhase

I made a rotation input device using parts of a broken mouse

By M5Stack

Go Fishing with Rotary Encoders

By Adafruit Industries

Setup a Graphic equalizer display using ESP8266-12, MSGEQ7 and WS2812

By Amir Avni