Smart dials for round displays
to show multiple measures on a multicolor dial with a pointer hand
Devices & Components
1
Arduino MKR WiFi 1010
1
Round TFT display 1.28"
Hardware & Tools
1
Soldering kit
Software & Tools
Arduino IDE
Project description
Code
Round display DIALS example by Flavio Stella 2023
js
1```cpp 2// Round display DIALS example by Flavio Stella 18/02/2023 3 4#include <Wire.h> 5#include "SPI.h" 6#include "Math.h" 7 8#include "Adafruit_GFX.h" 9#include "Adafruit_GC9A01A.h" 10 11#define TFT_DC 6 12#define TFT_CS 7 13 14// Color definitions HEX DEC R G B 15// GC9A01A_BLACK 0x0000 0 0, 0, 0 16// GC9A01A_NAVY 0x000F 15 0, 0,123 17// GC9A01A_DARKGREEN 0x03E0 992 0, 125, 0 18// GC9A01A_DARKCYAN 0x03EF 1007 0, 125,123 19// GC9A01A_MAROON 0x7800 30720 123, 0, 0 20// GC9A01A_PURPLE 0x780F 30735 123, 0,123 21// GC9A01A_OLIVE 0x7BE0 31712 123,125, 0 22// GC9A01A_LIGHTGREY 0xC618 50712 198,195,198 23// GC9A01A_DARKGREY 0x7BEF 31727 123,125,123 24// GC9A01A_BLUE 0x001F 31 0, 0, 255 25// GC9A01A_GREEN 0x07E0 2016 0, 255, 0 26// GC9A01A_CYAN 0x07FF 2047 0, 255, 255 27// GC9A01A_RED 0xF800 63488 255, 0, 0 28// GC9A01A_MAGENTA 0xF81F 63519 255, 0, 255 29// GC9A01A_YELLOW 0xFFE0 65504 255,255, 0 30// GC9A01A_WHITE 0xFFFF 65535 255,255,255 31// GC9A01A_ORANGE 0xFD20 64800 255,165, 0 32// GC9A01A_GREENYELLOW 0xAFE5 45029 173,255, 41 33// GC9A01A_PINK 0xFC18 64536 255,130,198 34 35Adafruit_GC9A01A tft(TFT_CS, TFT_DC); 36 37int display_full_r = 120; //120 is the radius for a 240x240 display 38int display_dial_r = 105; 39int display_text_r = 90; 40 41// ARRAY that contains the parameters to draw the 3 triangles that construct the dials 42// orientation of each dial is relative to its rotation 43// with an operational rot = 2 the first raw ANG1 and the COL1 will appear as the "low" (i.e. red 63488 on top!) 44// ANG1 ANG2 ANG3 COL1 COL2 COL3 ROTATION 45int triangles_par[3][6] = { { 36, 15, 10, 31, 992, 63488}, // 0 - dial on the right 46 { 27, 10, 10, 64800, 45029, 2047}, // 1 - dial at the bottom 47 { 36, 25, 10, 63488, 992, 31}, }; // 2 - dial on the left 48 49// for the pointer hand example 50int k = 0; 51int kmax = 70; // -35 +35 52 53int triang_vertex_1_x = 0; 54int triang_vertex_1_y = 0; 55int triang_vertex_2_x = 0; 56int triang_vertex_2_y = 0; 57int triang_vertex_3_x = 0; 58int triang_vertex_3_y = 0; 59float tr1_ang = 0; 60float tr2_ang = 0; 61float tr3_ang = 0; 62float tr1_val_ang = 0; 63float arrow_width = 0.1; 64 65void setup() { 66 Serial.begin(115200); 67 delay(1000); 68 Serial.println("GC9A01A Test!"); 69 70 tft.begin(); 71 tft.fillScreen(GC9A01A_BLACK); 72 73 draw_dial3 (); //inizialize the screen with the 3 dials 74 delay(1000); 75 76 tft.setRotation(2); 77} 78 79void loop(void) { 80 //example of a single triangle pointer on the left dial 81 k = (k+1)%kmax; 82 83 tr1_val_ang = radians(k-(int(kmax/2))); // POINTER HAND replace number with variable proportional to actual value of temp/hum 84 85 triang_vertex_1_x = display_full_r - int(cos(tr1_val_ang)*display_dial_r); 86 triang_vertex_1_y = display_full_r - int(sin(tr1_val_ang)*display_dial_r); 87 triang_vertex_2_x = display_full_r - int(cos(tr1_val_ang-arrow_width)*display_text_r); 88 triang_vertex_2_y = display_full_r - int(sin(tr1_val_ang-arrow_width)*display_text_r); 89 triang_vertex_3_x = display_full_r - int(cos(tr1_val_ang+arrow_width)*display_text_r); 90 triang_vertex_3_y = display_full_r - int(sin(tr1_val_ang+arrow_width)*display_text_r); 91 92 93 tft.fillTriangle(triang_vertex_1_x, triang_vertex_1_y, triang_vertex_2_x, triang_vertex_2_y, triang_vertex_3_x, triang_vertex_3_y, GC9A01A_YELLOW); 94 delay(100); 95 //cancels previous draw to make the continuous animation... memory of previous value needed in real life application 96 tft.fillTriangle(triang_vertex_1_x, triang_vertex_1_y, triang_vertex_2_x, triang_vertex_2_y, triang_vertex_3_x, triang_vertex_3_y, GC9A01A_BLACK); 97 98} 99 100void draw_dial3 () { // draws 3 filled triangles and then cancel the central area leaving filled arcs ready 101 for (int i = 0; i <= 2; i++) { 102 tft.setRotation(i); 103 triang_vertex_2_y = display_full_r - int(tan(float(radians(triangles_par[i][0])))*display_full_r); // vertex on ANG1 (above x-axis minus sign) 104 triang_vertex_3_y = display_full_r - int(tan(float(radians(triangles_par[i][1])))*display_full_r); // vertex on ANG2 (above x-axis minus sign) 105 tft.fillTriangle(display_full_r, display_full_r, 0, triang_vertex_2_y, 0, triang_vertex_3_y, triangles_par[i][3]); 106 107 triang_vertex_2_y = display_full_r - int(tan(float(radians(triangles_par[i][1])))*display_full_r); // vertex on ANG2 (above x-axis minus sign) 108 triang_vertex_3_y = display_full_r + int(tan(float(radians(triangles_par[i][2])))*display_full_r); // vertex on ANG3 (below x-axis plus sign) 109 tft.fillTriangle(display_full_r, display_full_r, 0, triang_vertex_2_y, 0, triang_vertex_3_y, triangles_par[i][4]); 110 111 triang_vertex_2_y = display_full_r + int(tan(float(radians(triangles_par[i][2])))*display_full_r); // vertex on ANG3 (below x-axis plus sign) 112 triang_vertex_3_y = display_full_r + int(tan(float(radians(triangles_par[i][0])))*display_full_r); // vertex on ANG1 (below x-axis plus sign) 113 tft.fillTriangle(display_full_r, display_full_r, 0, triang_vertex_2_y, 0, triang_vertex_3_y, triangles_par[i][5]); 114 } 115 tft.fillCircle(display_full_r, display_full_r, display_dial_r, GC9A01A_BLACK); 116} 117 118 119// BKP void draw_dial3 () { // draws 3 filled triangles and then cancel the central area leaving filled arcs ready 120 121// for (int i = 0; i <= 2; i++) { 122// tft.setRotation(i); 123// triang_vertex_2_y = display_full_r - int(tan(float(radians(triangles_par[i][0])))*display_full_r); 124// triang_vertex_3_y = display_full_r - int(tan(float(radians(triangles_par[i][1])))*display_full_r); 125// // triang_vertex_2_y = display_full_r - int(tan(tr1_ang)*display_full_r); 126// // triang_vertex_3_y = display_full_r - int(tan(tr2_ang)*display_full_r); 127// tft.fillTriangle(display_full_r, display_full_r, triang_vertex_2_x, 0, 0, triang_vertex_3_y, triangles_par[i][3]); 128 129// // triang_vertex_2_y = display_full_r - int(tan(float(radians(triangles_par[i][1])))*display_full_r); 130// // triang_vertex_3_y = display_full_r + int(tan(float(radians(triangles_par[i][2])))*display_full_r); 131// // // triang_vertex_2_y = display_full_r - int(tan(tr2_ang)*display_full_r); 132// // // triang_vertex_3_y = display_full_r + int(tan(tr3_ang)*display_full_r); 133// // tft.fillTriangle(display_full_r, display_full_r, 0, triang_vertex_2_y, 0, triang_vertex_3_y, triangles_par[i][4]); 134// // // tft.fillTriangle(display_full_r, display_full_r, 0, triang_vertex_2_y, 0, triang_vertex_3_y, tft.color565(0, 225, 125)); // RGB colors 135 136// // triang_vertex_2_y = display_full_r + int(tan(float(radians(triangles_par[i][2])))*display_full_r); 137// // triang_vertex_3_y = display_full_r + int(tan(float(radians(triangles_par[i][0])))*display_full_r); 138// // // triang_vertex_2_y = display_full_r + int(tan(tr3_ang)*display_full_r); 139// // // triang_vertex_3_y = display_full_r + int(tan(tr1_ang)*display_full_r); 140// // tft.fillTriangle(display_full_r, display_full_r, 0, triang_vertex_2_y, 0, triang_vertex_3_y, triangles_par[i][5]); 141// } 142// // tft.fillCircle(display_full_r, display_full_r, display_dial_r, GC9A01A_BLACK); 143 144// } 145```
Comments
Only logged in users can leave comments