1. Create a gauge widget

① Create a gauge widget

② Gauge widget ID

2. Widget properties


ID: gauge_9b8f is the unique ID number of the gauge widget

X, Y: its coordinate position in the display area

Width, Height: the size of a gauge widget

Alignment (in order):left alignment, horizontal center alignment, right alignment, top alignment, vertical center alignment, bottom alignment


  • Parent widget: set the parent object, and the gauge widget is its child object

  • opacity: the opacity level of the background of a gauge

  • Needle color: the needle color in a gauge widget

  • Rotation axis color: the rotation axis color in a gauge widget

  • Background color: the background color of a gauge

  • Normal color: the color of the normal value area of a gauge

  • Critical color: the color of the critical value area of a gauge

  • Start value: the start value of a gauge widget (usually 0)

  • End value: the end value of a gauge widget (usually 100)

  • Critical value: a warning will be triggered beyond this value

  • Default value: the value that the needle initially points to

3. Blockly—Gauge

3.1 Set gauge value

  • Choose UI objects: choose a gauge widget ID created in Layout-Designer

Value: the value that the gauge needle points to

Example: bind gauge control id: gauge_9b8f, set value: 20

Click “{} code” to view the code:

① Blockly init


③ Gauge widget ID

④ Default value of the gauge widget

⑤ Set a value for the gauge

4. Implement a gauge example with Blockly (ssd201)

Example description: the Gauge’s needle swings from 0 to 100 on average within 5 seconds after booting.

UI design

Create a gauge widget

Blockly design


5. Download and analyze the source code of the project

  • Zip files

  • qm_ui_entry.c analysis

Relevant variable declaration

① Entry function
② Create objects
③ Create widgets

Blockly logic implementation

Create the gauge widget and set its style

文档更新时间: 2021-08-09 17:13   作者:plj