Simple Volume Indicator - GC9A01 Display Using Visuino

by RonFrtek in Circuits > Arduino

137 Views, 2 Favorites, 0 Comments

Simple Volume Indicator - GC9A01 Display Using Visuino

Simple Volume Indicator - GC9A01 Display Using Visuino

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

Watch the video!

What You Will Need

gca.jpg
ArduinoR4.png
breadboard.png
jumper-wires.jpg
AD267-2.jpg
VisuinoAdvrtisemenPortentaC33-small.png
  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


The Circuit

2024-12-07_12-22-44.jpg
  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, and Select the Arduino UNO Board Type

select-board-uno.jpg
Visuino-Select-Board-UNO.jpg

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

In Visuino Add Components

2024-12-07_12-29-19.jpg
2024-12-07_12-32-11.jpg
2024-12-07_12-33-24.jpg
2024-12-07_12-35-10.jpg
  1. Add "GC9A01" component
  2. Add "Rotary Encoder Sensor" component
  3. Add "Integer Multi Source" component
  4. Add "Integer To Text" component

In Visuino Set Components

2024-12-07_12-31-37.jpg
2024-12-07_12-39-09.jpg
2024-12-07_12-40-27.jpg
2024-12-07_12-41-26.jpg
2024-12-07_12-41-42.jpg
2024-12-07_12-49-50.jpg
2024-12-07_12-52-49.jpg
2024-12-07_12-53-57.jpg
2024-12-07_12-54-18.jpg
  1. Select "RotaryEncoderSensor1" and in the properties window set "Max" > "Roll Over" to False and "Max" > "Value" to 360
  2. Select "RotaryEncoderSensor1" and in the properties window set "Min" > "Roll Over" to False and "Min" > "Value" to 0
  3. Select "MultiSource1" and in the properties window set "Output pins" to 7


  1. Double click on the "Display1" and in the "Elements" window drag "Draw Angled Line" to the left side and in the properties window set "Color" to aclWhite, "X" to 120, "Y" to 120, "Begin" to 51, "End" to 100, select "Angle" and click on the pin icon and select "Float SinkPin"
  2. Drag another "Draw Angled Line" to the left side and in the properties window set "Color" to aclBlack, "X" to 120, "Y" to 120, "Begin" to 51, "End" to 100, select "Angle" and click on the pin icon and select "Float SinkPin"
  3. Drag "Draw Ellipse" to the left side and in the properties window set "Height" to 100, "Width" to 100, "Fill Color" to aclBlue, "Color" to aclBlack, "X" to 70, "Y" to 70
  4. Drag "Text Field" to the left side and in the properties window set "Size" to 2, "Fill Color" to aclBlue, "Color" to aclWhite, "X" to 100, "Y" to 90
  5. For Text Field elements in the properties select "Elements", click on the 3 dot button and in the "Elements" window drag "Font" to the left side and in the properties window set "Font" to Adafruit\FreeSansBold18pt7b or any other font
  6. Close all the windows



In Visuino Connect Components

2024-12-07_12-28-33.jpg
2024-12-07_13-07-14.jpg
GCAVolume.png
  1. Connect Arduino digital pin [3] to "RotaryEncoderSensor1" pin [Direction]
  2. Connect Arduino digital pin [2] to "RotaryEncoderSensor1" pin [Clock]
  3. Connect "RotaryEncoderSensor1" pin [Out] to "MultiSource1" pin [In]
  4. Connect "MultiSource1" pin [0] to "Display1" > "Draw Ellipse1" pin [Clock]
  5. Connect "MultiSource1" pin [1] to "Display1" > "Draw Angled Line2" pin [Clock]
  6. Connect "MultiSource1" pin [2] to "Display1" > "Draw Angled Line1" pin [Angle]
  7. Connect "MultiSource1" pin [3] to "Display1" > "Draw Angled Line2" pin [Angle]
  8. Connect "MultiSource1" pin [4] to "Display1" > "Draw Angled Line1" pin [Clock]
  9. Connect "MultiSource1" pin [5] to "IntegerToText1" pin [In]
  10. Connect "IntegerToText1" pin [Out] to "Display1" > "TextField1" pin [In]
  11. Connect "MultiSource1" pin [6] to "Display1" > "TextField1" pin [Clock]


  1. Connect "Display1" pin [Chip Select] to Arduino digital pin [10]
  2. Connect "Display1" pin [Data Command] to Arduino digital pin [9]
  3. Connect "Display1" pin [Reset] to Arduino digital pin [8]
  4. Connect "Display1" Control pin [SPI] to Arduino SPI pin [In]



Generate, Compile, and Upload the Arduino Code

Visuino-Compile-UNO.jpg

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.

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