使用圓形進(jìn)度條的電位器的值

描述

介紹

經(jīng)過一段時(shí)間的分析，我在這里繼續(xù)用另一種方式來表示電位器的模擬值，這次我想體驗(yàn)一個(gè)3.5“TFT LCD，我喜歡它的尺寸和可以表示的各種顏色。它是一個(gè)組件值得一些項(xiàng)目擁有。當(dāng)然，這個(gè)文檔也是關(guān)于模擬值的傳奇的一部分。

圖表

要開發(fā)這個(gè)項(xiàng)目，不需要復(fù)雜的連接或圖表，因?yàn)殡娢黄鞅仨氝B接到引腳 A0，然后按照圖像參考將屏幕安裝在 Arduino UNO 上。

?

圖片來自 LCDwiki

?

另一個(gè)重要的細(xì)節(jié)：必要的庫是LCDWIKI_GUI.h和LCDWIKI_KBV，我喜歡這些庫的地方在于易于設(shè)計(jì)引人注目的元素、文本和背景。

代碼的系統(tǒng)

我們包括必要的圖形庫以使用屏幕并表示必要的形式。

#include  //Core graphics library
#include  //Hardware-specific library

接下來我們?yōu)楦髯缘膸鞓?gòu)建屏幕。

LCDWIKI_KBV my_lcd(ILI9486,A3,A2,A1,A0,A4);

我們定義要使用的顏色。

#define  BLACK   0x0000
#define RED     0xF800
#define GREY 0x2104 // Dark grey 16 bit colour
#define GREEN 0x07E0
#define WHITE 0xFFFF
#define BLUE 0x001F
// Meter colour schemes
#define RED2RED 0
#define GREEN2GREEN 1
#define BLUE2BLUE 2
#define BLUE2RED 3
#define GREEN2RED 4
#define RED2GREEN 5

我們設(shè)置變量來控制時(shí)間并存儲(chǔ)模擬讀數(shù)的值。

uint32_t runTime = -99999; // time for next update
int reading = 0; // Value to be displayed

現(xiàn)在，在下面幾行設(shè)置代碼中，我們分別初始化屏幕、設(shè)置深色背景和設(shè)置屏幕旋轉(zhuǎn)方向。

void setup() {
  my_lcd.Init_LCD();
  my_lcd.Fill_Screen(0x0);
  my_lcd.Set_Rotation(1);
}

ringMeter 函數(shù)是代碼的核心，內(nèi)部應(yīng)用數(shù)學(xué)公式創(chuàng)建各種三角形，兩個(gè)頂點(diǎn)在內(nèi)弧上，另一個(gè)頂點(diǎn)在外弧上，然后生成一個(gè)倒三角形。各種三角形的生成允許構(gòu)建圓形條并逐漸將顏色應(yīng)用于它。然后生成居中文本的表示，為此考慮了它所具有的圖形數(shù)量。

int ringMeter(int value, int vmin, int vmax, int x, int y, int r, byte scheme){
  // Minimum value of r is about 52 before value text intrudes on ring
  // drawing the text first is an option
  x += r; y += r;   // Calculate coords of centre of ring
  int w = r / 4;    // Width of outer ring is 1/4 of radius
  int angle = 150;  // Half the sweep angle of meter (300 degrees)
  int text_colour = 0; // To hold the text colour
  int v = map(value, vmin, vmax, -angle, angle); // Map the value to an angle v
  byte seg = 5; // Segments are 5 degrees wide = 60 segments for 300 degrees
  byte inc = 5; // Draw segments every 5 degrees, increase to 10 for segmented ring
  // Draw colour blocks every inc degrees

  for (int i = -angle; i < angle; i += inc) {
    // Choose colour from scheme
    int colour = 0;
    switch (scheme) {
      case 0: colour = RED; break; // Fixed colour
      case 1: colour = GREEN; break; // Fixed colour
      case 2: colour = BLUE; break; // Fixed colour
      case 3: colour = rainbow(map(i, -angle, angle, 0, 127)); break; // Full spectrum blue to red
      case 4: colour = rainbow(map(i, -angle, angle, 63, 127)); break; // Green to red (high temperature etc)
      case 5: colour = rainbow(map(i, -angle, angle, 127, 63)); break; // Red to green (low battery etc)
      default: colour = BLUE; break; // Fixed colour
    }
    
    // Calculate pair of coordinates for segment start
    float sx = cos((i - 90) * 0.0174532925);
    float sy = sin((i - 90) * 0.0174532925);
    uint16_t x0 = sx * (r - w) + x;
    uint16_t y0 = sy * (r - w) + y;
    uint16_t x1 = sx * r + x;
    uint16_t y1 = sy * r + y;

    // Calculate pair of coordinates for segment end
    float sx2 = cos((i + seg - 90) * 0.0174532925);
    float sy2 = sin((i + seg - 90) * 0.0174532925);
    int x2 = sx2 * (r - w) + x;
    int y2 = sy2 * (r - w) + y;
    int x3 = sx2 * r + x;
    int y3 = sy2 * r + y;
    if (i < v) { // Fill in coloured segments with 2 triangles
      my_lcd.Set_Draw_color(colour);
      my_lcd.Fill_Triangle(x0, y0, x1, y1, x2, y2);
      my_lcd.Fill_Triangle(x1, y1, x2, y2, x3, y3);
      text_colour = colour; // Save the last colour drawn
    }
    else // Fill in blank segments
    {
      my_lcd.Set_Draw_color(GREY);
      my_lcd.Fill_Triangle(x0, y0, x1, y1, x2, y2);
      my_lcd.Fill_Triangle(x1, y1, x2, y2, x3, y3);
    }
  }

  // Convert value to a string
  char buf[10];
  byte len = 4; if (value > 999) len = 5;
  dtostrf(value, len, 0, buf);
  my_lcd.Set_Draw_color(0, 0,0);
  my_lcd.Fill_Rectangle(x-60, y-15, x+60, y+20);
  
  // Set the text colour to default
  my_lcd.Set_Text_colour(WHITE);
  my_lcd.Set_Text_Back_colour(BLACK);
  my_lcd.Set_Text_Size(5);
  if (value>999){
    my_lcd.Print_String(String(value), x-60, y-15);
  } else if (value>99 && value<1000){
    my_lcd.Print_String(String(value), x-45, y-15);
  } else if (value>9 && value<100){
    my_lcd.Print_String(String(value), x-30, y-15);
  } else {
    my_lcd.Print_String(String(value), x-15, y-15);
  }
  return x + r;
}

彩虹功能允許您設(shè)置用于圓形條的顏色變化。

unsigned int rainbow(byte value){
  // Value is expected to be in range 0-127
  // The value is converted to a spectrum colour from 0 = blue through to 127 = red
  byte red = 0; // Red is the top 5 bits of a 16 bit colour value
  byte green = 0;// Green is the middle 6 bits
  byte blue = 0; // Blue is the bottom 5 bits
  byte quadrant = value / 32;
  if (quadrant == 0) {
    blue = 31;
    green = 2 * (value % 32);
    red = 0;
  }
  if (quadrant == 1) {
    blue = 31 - (value % 32);
    green = 63;
    red = 0;
  }
  if (quadrant == 2) {
    blue = 0;
    green = 63;
    red = value % 32;
  }
  if (quadrant == 3) {
    blue = 0;
    green = 63 - 2 * (value % 32);
    red = 31;
  }
  return (red << 11) + (green << 5) + blue;
}

在循環(huán)期間，您需要從電位器讀取模擬信號，然后調(diào)用 ringmeter 函數(shù)進(jìn)行繪圖。

void loop() {
  if (millis() - runTime >= 100L) {
    runTime = millis();
    // Set the position, gap between meters, and inner radius of the meters
    int gap = 4, radius = 120, xpos = my_lcd.Get_Display_Width()/2-radius, ypos = my_lcd.Get_Display_Height()/2-radius;
    int value = analogRead(A5); // read of potentiometer value
    xpos = gap + ringMeter(value, 0, 1020, xpos, ypos, radius, GREEN2RED); // Draw analogue meter
  }
}

結(jié)論

所有與用戶交互的項(xiàng)目都允許欣賞與代碼的各種交互，尤其是這個(gè)項(xiàng)目讓我探索了 TFT 屏幕的使用、它的顏色甚至基本的圖形元素。3.5 英寸的屏幕非常漂亮且易于使用，一旦您從制造商那里獲得了技術(shù)信息，您仍然可以分享您使用此屏幕的體驗(yàn)。