Example Code for Arduino-Widget Display

Hardware Preparation

• DFRduino UNO R3 (SKU: DFR0216) ×1
• Gravity: I2C&UART Color Display Module (SKU: DFR0997) ×1
• PH2.0-4P cable ×1
• USB cable ×1

Software Preparation

• Download Arduino IDE: Click here to download Arduino IDE
• Download Arduino library: Click here to download DFRobot_LcdDisplay library.
• For Arduino IDE V1.8.19 (or earlier), install the library manually: How to Add a Library？

Wiring Diagram

1. I2C Communication Mode:
   
   Pin Connection Description

   • Display: + Pin --- (Connect to) --- Controller: 5V
   • Display: - Pin --- (Connect to) --- Controller: GND
   • Display: C Pin --- (Connect to) --- Controller: SCL
   • Display: D Pin --- (Connect to) --- Controller: SDA

2. UART Communication Mode:
   
   Pin Connection Description

   • Display: + Pin --- (Connect to) --- Controller: 5V
   • Display: - Pin --- (Connect to) --- Controller: GND
   • Display: R Pin --- (Connect to) --- Controller: 5/TX
   • Display: T Pin --- (Connect to) --- Controller: 4/RX

Sample Code

1. Bar Function Description

• The progress bar control allows users to create the control first, and then set the value of the progress bar to be displayed.
• The control can also be modified in terms of position, size, and color. It can also be deleted.

Sample Code

Init I2C LCD to create blue bar, update value randomly in loop.

	#include "DFRobot_LcdDisplay.h"
	DFRobot_Lcd_IIC lcd(&Wire, /*I2CAddr*/ 0x2c);

	uint8_t barId;

	void setup(void) {
	  lcd.begin();
	  lcd.cleanScreen();
	  delay(200);
	  lcd.setBackgroundColor(WHITE);
	  barId = lcd.creatBar(120, 10, /*width=*/50, /*height=*/200, BLUE);
	  delay(2000);
	  lcd.updateBar(barId, 120, 10, 20, 200, BLUE);
	  delay(2000);
	}

	void loop(void) {
	  lcd.setBarValue(barId, random(100));
	  delay(1000);
	}

Result

2. Slider Function Description

• The slider control allows users to create the control first, and then set the value of the slider to be displayed.

• The control can also be modified in terms of position, size, and color. It can also be deleted.

  Sample Code

  Init I2C LCD to create blue slider, change to green and update value randomly in loop.

#include "DFRobot_LcdDisplay.h"
DFRobot_Lcd_IIC lcd(&Wire, /*I2CAddr*/ 0x2c);

uint8_t SliderId;

void setup(void) {
  lcd.begin();
  lcd.cleanScreen();
  delay(200);
  lcd.setBackgroundColor(WHITE);
  SliderId = lcd.creatSlider(20, 120, 200, 30, BLUE);
  delay(2000);
  lcd.updateSlider(SliderId, 50, 120, 200, 30, GREEN);
  delay(2000);
}

void loop(void) {
  lcd.setSliderValue(SliderId, random(100));
  delay(1000);
}

Result

3. Compass Function Description

• The compass control allows users to create the control first, and then set the value of the compass pointer to be displayed.

• The control can also be modified in terms of position and size, and it can be deleted.

  Sample Code

  Init I2C LCD to create compass, update it and set scale randomly in loop.

#include "DFRobot_LcdDisplay.h"
DFRobot_Lcd_IIC lcd(&Wire, /*I2CAddr*/ 0x2c);

uint8_t compassId;
void setup(void){
lcd.begin();
lcd.cleanScreen();
delay(200);
lcd.setBackgroundColor(WHITE);
compassId = lcd.creatCompass(0, 0, 150);
delay(2000);
lcd.updateCompass(compassId, 30, 0, 256);
delay(2000);
}

void loop(void)
{
lcd.setCompassScale(compassId,random(3600));//Accuracy is set to 3600
delay(1000);
}

Result

4. Gauge Function Description

• The gauge control allows users to create the control first, and then set the value of the gauge to be displayed.

• The control can also be modified in terms of position, size, start and end scale, base color, and pointer color. It can also be deleted.

  Sample Code

  Init I2C LCD to create a gauge, change color and update value randomly in loop.

#include "DFRobot_LcdDisplay.h"
DFRobot_Lcd_IIC lcd(&Wire, /*I2CAddr*/ 0x2c);

uint8_t gaugeId;
void setup(void){
lcd.begin();
lcd.cleanScreen();
delay(200);
lcd.setBackgroundColor(WHITE);
gaugeId = lcd.creatGauge(0, 0, 200, 0, 100, BLACK, YELLOW);
delay(2000);
lcd.updateGauge(gaugeId, 30, 0, 230, 0, 100, BLACK, GREEN);
delay(2000);
}

void loop(void)
{
lcd.setGaugeValue(gaugeId,random(100));
delay(1000);
}

Result

5. Line Meter Function Description

• The line meter control allows users to create the control first, and then set the value of the line meter to be displayed.

• The control can also be modified in terms of position, size, start and end scale, base color, and pointer color. It can also be deleted.

  Sample Code

  Init I2C LCD with yellow-black line meter, change to green and update value randomly in loop.

#include "DFRobot_LcdDisplay.h"
DFRobot_Lcd_IIC lcd(&Wire, /*I2CAddr*/ 0x2c);

uint8_t lineMeterId;
void setup(void){
lcd.begin();
lcd.cleanScreen();
delay(200);
lcd.setBackgroundColor(WHITE);
lineMeterId = lcd.creatLineMeter(0, 0, 200, 0, 100, BLACK, YELLOW);
delay(2000);
lcd.updateLineMeter(lineMeterId, 30, 0, 230, 0, 100, BLACK, GREEN);
delay(2000);
}

void loop(void)
{
lcd.setMeterValue(lineMeterId,random(100));
delay(1000);
}

Result

6. Chart Function Description

• Step 1: The chart control allows users to create the control first, set the text to be displayed on the x-axis and y-axis, set the background color of the chart, and set the chart style (there are 3 styles: 1-line shadow chart, 2-bar chart, 3-line shadow chart).

• Step 2: Then create the color of the chart data series.

• Step 3: Add data to the chart data series. The key elements include: data name, data group name, and number of points to be displayed.

  The number of displayed data points should be set according to the screen size, because the space for displaying the x-axis content is limited)

  The chart color and style can be modified. The color of the chart data series can also be modified. The chart can also be deleted.

  Sample Code

  Create red line chart on I2C LCD, recolor and update all points randomly in loop.

#include "DFRobot_LcdDisplay.h"
DFRobot_Lcd_IIC lcd(&Wire, /*I2CAddr*/ 0x2c);

uint8_t chartId;
uint8_t id1;
uint16_t point1[6] = {random(100),random(100),random(100),random(100),random(100),random(100)};
void setup(void){
lcd.begin();
lcd.cleanScreen();
delay(500);
lcd.setBackgroundColor(WHITE);

// Create a chart, set the background color to white, and set the mode to line chart mode
chartId = lcd.creatChart("Jan\nFeb\nMar\nApr\nMay\nJun", "100\n80\n60\n40\n20\n0", 0xFFFFFF, 1);
id1 = lcd.creatChartSeries(chartId, /*color*/RED);  // Create a red data series on this chart
lcd.addChartSeriesData(chartId, id1, point1, 6);   // Add 6 data points to the data series
delay(2000);
lcd.updateChartSeries(chartId, id1, 0x0000FF); // Update the color of the data series
lcd.updateChart(chartId, 0x00FF00, 2); // Update the color of the chart grid and background
}

void loop(void){
lcd.updateChartPoint(chartId, id1, 0, random(100));
lcd.updateChartPoint(chartId, id1, 1, random(100));
lcd.updateChartPoint(chartId, id1, 2, random(100));
lcd.updateChartPoint(chartId, id1, 3, random(100));
lcd.updateChartPoint(chartId, id1, 4, random(100));
lcd.updateChartPoint(chartId, id1, 5, random(100));
lcd.updateChartPoint(chartId, id1, 6, random(100));
delay(2000);
}

Result