From b918c50908924332ea06ef2b5c16031638f4f4ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?BenjaminDanneg=C3=A5rd?= Date: Thu, 2 Oct 2025 19:45:41 +0200 Subject: [PATCH] Sorted widgets alphabeticaly --- .../03.dashboard-widgets/dashboard-widgets.md | 346 +++++++++--------- 1 file changed, 173 insertions(+), 173 deletions(-) diff --git a/content/arduino-cloud/03.cloud-interface/03.dashboard-widgets/dashboard-widgets.md b/content/arduino-cloud/03.cloud-interface/03.dashboard-widgets/dashboard-widgets.md index 95626e0352..a243696e0b 100644 --- a/content/arduino-cloud/03.cloud-interface/03.dashboard-widgets/dashboard-widgets.md +++ b/content/arduino-cloud/03.cloud-interface/03.dashboard-widgets/dashboard-widgets.md @@ -78,126 +78,75 @@ Data which is streamed to a widget is also available for download. The data rete Below you will find a list of available widgets and examples on how they are linked to a variable used in a sketch. -### Switch +### Advanced Chart -![The Switch Widget](./assets/widget-switch.png) +![Advanced Chart Widget](assets/widget-advanced-chart.gif) -The switch widget is great for simply turning something ON or OFF. +The advanced chart widget allows you to track up to **5 variables simultaneously**. This widget also includes an additional configuration interface that appears while editing the widget. -Can be linked with a **boolean** variable. +![Widget Configuration](assets/widget-advanced-chart-2.png) -An example of how it is used in a sketch: +An example of how it is used in code: ```arduino -if(switchVariable == true){ - digitalWrite(ledPin, HIGH); -} - -else{ - digitalWrite(ledPin, LOW); -} +variable_1 = analogRead(A1) +variable_2 = analogRead(A2) +variable_3 = analogRead(A3) +variable_4 = analogRead(A4) +variable_5 = analogRead(A5) ``` -### Push Button - -![Push Button Widget](assets/widget-pushbutton.png) - -The push button widget is a virtual version of a push button. While pushed down, something is activated, and when released, it is de-activated. - -Can be linked with a **boolean** variable. - -An example of how it is used in a sketch: - -```arduino -while(pushbuttonVariable == true){ - counter++ - delay(10); -} -``` +***Check out the [Advanced Chart](/arduino-cloud/features/advanced-chart) guide for more information.*** -### Slider +### Advanced Map -![Slider Widget](assets/widget-slider.png) +![Advanced Map Widget](assets/widget-advanced-map.png) -The slider widget can be used to adjust a value range. Great for changing the intensity of light, or the speed of a motor. +The advanced map widget allows you to track the location of your cloud-connected device. Using GPS within your project allows the advanced map widget to track where the linked thing has been. This widget not only shows the live location of your device but also lets you specify a time frame to view its location history and the track it produced. -Can be linked with multiple variables, including **integers & floats.** +It can be linked with the **Location** variable. When the location updates the new location will be added to the advanced map widget and a path between the locations will be marked. The path and icon on the map can be customized in the widget settings. An example of how it is used in a sketch: ```arduino -analogWrite(ledPin, sliderVariable); +//Location(Latitude, Longitude); +locationVariable = Location(51.5074, 0.1278); ``` -### Stepper - -![Stepper Widget](assets/widget-stepper.png) +### Chart -Similar to the slider, the stepper widget increases or decreases a variable by increments of 1. It can be used to switch between different modes. +![Chart Widget](assets/widget-chart.png) -Can be linked with multiple variables, including **integers & floats.** +The chart widget is great for data analytics. It's used to track real-time data, and track historical data. This widget can for example be used to track temperature changes, energy consumption and other sensor values. A chart widget can only be linked to one variable at a time. An example of how it is used in a sketch: ```arduino -if(stepperVariable == 10){ - activateThisFunction(); -} - -//activate another function -else if(stepperVariable == 11){ - activateAnotherFunction(); -} - -//or simply print out the updated value -Serial.println(stepperVariable); -``` - -### Time Picker - -![Time Picker Widget](assets/time-picker.png) - -The time picker widget is used to represent and set a time and/or a date. - -Can be linked with a **CloudTime** variable. - -An example of how it is used in a sketch: - -``` -CloudTimeVariable = ArduinoCloud.getLocalTime(); +variable = analogRead(A0); ``` -In this example, the variable named `CloudTimeVariable` is populated with `ArduinoCloud.getLocalTime()` which returns the Unix time stamp (in seconds) of the local time zone. - -### Messenger +### Color -![Messenger Widget](assets/widget-messenger.png) +![Color Widget](assets/widget-color.png) -The messenger widget can be used to send and receive strings through the messenger window. +The color widget is great for selecting an exact color for an RGB light. -Can be linked with a **String** variable. +Can be linked with a **Color** variable. An example of how it is used in a sketch: ```arduino -stringVariable = "This is a string"; -``` - -It is possible to clear the messenger widget window directly from the sketch, by using: - -```arduino -stringVariable = PropertyActions::CLEAR; +uint8_t r, g, b; +rgbVariable.getValue().getRGB(r, g, b); ``` -***For ArduinoIoTCloud library versions below `1.7`, you can use `stringVariable = "\x1b";` to clear the widget window.*** - -### Color +### Colored light -![Color Widget](assets/widget-color.png) +![Colored Light Widget](assets/widget-color-light.png) -The color widget is great for selecting an exact color for an RGB light. +The colored light widget is designed to set the color of a lamp and turn it ON or OFF. -Can be linked with a **Color** variable. +Can be linked with a **Colored Light** variable. An example of how it is used in a sketch: @@ -229,65 +178,86 @@ An example of how it is used in a sketch: } ``` -### Colored light +### Gauge -![Colored Light Widget](assets/widget-color-light.png) +![Gauge Widget](assets/widget-gauge.png) -The colored light widget is designed to set the color of a lamp and turn it ON or OFF. +The gauge widget is the go-to for any measurements that fit in a half circle. A great widget for building organized, professional dashboards. -Can be linked with a **Colored Light** variable. +Can be linked with multiple variables, including **integers & floats.** An example of how it is used in a sketch: ```arduino -uint8_t r, g, b; -rgbVariable.getValue().getRGB(r, g, b); +gaugeVariable = analogRead(A0); ``` -### Value +### Image -![Value Widget](assets/widget-value.png) +![Image widget](assets/widget-image.png) -The value widget is a simple one. It only reads or writes values without any additional functionalities. +Use the image widget to put a JPG, PNG or WEBP image on your dashboard! If you instead want to use an image URL, then chose the URL option under image source. Keep in mind the URL needs to be a HTTPS URL and not a HTTP URL. It is also possible to use local addresses. If you are using the URL option you can add a refresh frequency to the image widget, enabling the widget to function as a video or moving image. The image will then update The image can be made to fill the widget frame or to fit within the widget frame. A grey background can be added to the widget to help with visibility issues for PNGs with transparent backgrounds. -Can be linked with many different variables. +### LED + +![LED Widget](assets/widget-led.png) + +The LED widget is a virtual LED that can signal the status of something. Can either be set to ON or OFF. + +Can be linked with a **boolean** variable. An example of how it is used in a sketch: ```arduino -valueVariable = analogRead(A0); +ledVariable = true; +//or +ledVariable = false; ``` -### Status +### Link -![Status Widget](assets/widget-status.png) +![Link Widget](assets/link-widget.png) -The status widget is great for checking the state of something: green is true, red is false! The look of the widget can also be customized more. If the "Custom style" is turned on in the widget settings the colors can be changed. If the "Icons" option is chosen the icons can also be changed. +The Link widget lets you put a link on your dashboard! The icon, color and label can be fully customized to your liking. The correct URL format for this widget is for example "`https://arduino.cc`". If the you get the error "Invalid URL format", please try adding "https://" to the start of your URL. -Can be linked to a **boolean** variable. +![Link Widget options](assets/link-widget-options.png) + +### Map + +![Map Widget](assets/widget-map.png) + +The map widget is a tool for keeping track of the location of your projects. This is a great tool for any project involving GPS, or to get an overview of where your Thing, or multiple Things are operating. + +Can be linked with the **Location** variable. An example of how it is used in a sketch: ```arduino -statusVariable = true; -//or -statusVariable = false; +locationVariable = Location(51.5074, 0.1278); ``` -### Gauge +### Messenger -![Gauge Widget](assets/widget-gauge.png) +![Messenger Widget](assets/widget-messenger.png) -The gauge widget is the go-to for any measurements that fit in a half circle. A great widget for building organized, professional dashboards. +The messenger widget can be used to send and receive strings through the messenger window. -Can be linked with multiple variables, including **integers & floats.** +Can be linked with a **String** variable. An example of how it is used in a sketch: ```arduino -gaugeVariable = analogRead(A0); +stringVariable = "This is a string"; +``` + +It is possible to clear the messenger widget window directly from the sketch, by using: + +```arduino +stringVariable = PropertyActions::CLEAR; ``` +***For ArduinoIoTCloud library versions below `1.7`, you can use `stringVariable = "\x1b";` to clear the widget window.*** + ### Percentage ![Percentage Widget](assets/widget-percentage-1.png) @@ -306,135 +276,153 @@ An example of how it is used in a sketch: percentageVariable = analogRead(A0); ``` -### LED +### Push Button -![LED Widget](assets/widget-led.png) +![Push Button Widget](assets/widget-pushbutton.png) -The LED widget is a virtual LED that can signal the status of something. Can either be set to ON or OFF. +The push button widget is a virtual version of a push button. While pushed down, something is activated, and when released, it is de-activated. Can be linked with a **boolean** variable. An example of how it is used in a sketch: ```arduino -ledVariable = true; -//or -ledVariable = false; +while(pushbuttonVariable == true){ + counter++ + delay(10); +} ``` -### Link +### Scheduler -![Link Widget](assets/link-widget.png) +![Scheduler Widget](assets/widget-scheduler.png) -The Link widget lets you put a link on your dashboard! The icon, color and label can be fully customized to your liking. The correct URL format for this widget is for example "`https://arduino.cc`". If the you get the error "Invalid URL format", please try adding "https://" to the start of your URL. +The Scheduler Widget allows you to schedule a job in the future. With this widget, you can schedule: +- A job to activate at a specific hour, minute and second. +- A job to execute only on specific days. +- A job that should last for X amount of seconds, minutes or hours. -![Link Widget options](assets/link-widget-options.png) +In a sketch, use the `x.isActive()` boolean to check whether a state is active. -### Map +Example: -![Map Widget](assets/widget-map.png) +```arduino +if(scheduleVariable.isActive){} +``` -The map widget is a tool for keeping track of the location of your projects. This is a great tool for any project involving GPS, or to get an overview of where your Thing, or multiple Things are operating. -Can be linked with the **Location** variable. +***Check out the [Scheduler](/arduino-cloud/features/cloud-scheduler) guide for more information.*** + +### Slider + +![Slider Widget](assets/widget-slider.png) + +The slider widget can be used to adjust a value range. Great for changing the intensity of light, or the speed of a motor. + +Can be linked with multiple variables, including **integers & floats.** An example of how it is used in a sketch: ```arduino -locationVariable = Location(51.5074, 0.1278); +analogWrite(ledPin, sliderVariable); ``` -### Advanced Map +### Status -![Advanced Map Widget](assets/widget-advanced-map.png) +![Status Widget](assets/widget-status.png) -The advanced map widget allows you to track the location of your cloud-connected device. Using GPS within your project allows the advanced map widget to track where the linked thing has been. This widget not only shows the live location of your device but also lets you specify a time frame to view its location history and the track it produced. +The status widget is great for checking the state of something: green is true, red is false! The look of the widget can also be customized more. If the "Custom style" is turned on in the widget settings the colors can be changed. If the "Icons" option is chosen the icons can also be changed. -It can be linked with the **Location** variable. When the location updates the new location will be added to the advanced map widget and a path between the locations will be marked. The path and icon on the map can be customized in the widget settings. +Can be linked to a **boolean** variable. An example of how it is used in a sketch: ```arduino -//Location(Latitude, Longitude); -locationVariable = Location(51.5074, 0.1278); +statusVariable = true; +//or +statusVariable = false; ``` -### Chart +### Stepper -![Chart Widget](assets/widget-chart.png) +![Stepper Widget](assets/widget-stepper.png) -The chart widget is great for data analytics. It's used to track real-time data, and track historical data. This widget can for example be used to track temperature changes, energy consumption and other sensor values. A chart widget can only be linked to one variable at a time. +Similar to the slider, the stepper widget increases or decreases a variable by increments of 1. It can be used to switch between different modes. + +Can be linked with multiple variables, including **integers & floats.** An example of how it is used in a sketch: ```arduino -variable = analogRead(A0); -``` - -### Advanced Chart +if(stepperVariable == 10){ + activateThisFunction(); +} -![Advanced Chart Widget](assets/widget-advanced-chart.gif) +//activate another function +else if(stepperVariable == 11){ + activateAnotherFunction(); +} -The advanced chart widget allows you to track up to **5 variables simultaneously**. This widget also includes an additional configuration interface that appears while editing the widget. +//or simply print out the updated value +Serial.println(stepperVariable); +``` -![Widget Configuration](assets/widget-advanced-chart-2.png) +### Sticky Note -An example of how it is used in code: +![Sticky Note](assets/widget-sticky-note.png) -```arduino -variable_1 = analogRead(A1) -variable_2 = analogRead(A2) -variable_3 = analogRead(A3) -variable_4 = analogRead(A4) -variable_5 = analogRead(A5) -``` +The sticky note widget can be used to write important notes or to categorize your widgets. -***Check out the [Advanced Chart](/arduino-cloud/features/advanced-chart) guide for more information.*** +The sticky note can **not** be linked with a variable and is designed to keep notes only while using a dashboard. It does support the use of markdown so that you can create titles, links, code blocks etc. -### Scheduler +### Switch -![Scheduler Widget](assets/widget-scheduler.png) +![The Switch Widget](./assets/widget-switch.png) -The Scheduler Widget allows you to schedule a job in the future. With this widget, you can schedule: -- A job to activate at a specific hour, minute and second. -- A job to execute only on specific days. -- A job that should last for X amount of seconds, minutes or hours. +The switch widget is great for simply turning something ON or OFF. -In a sketch, use the `x.isActive()` boolean to check whether a state is active. +Can be linked with a **boolean** variable. -Example: +An example of how it is used in a sketch: ```arduino -if(scheduleVariable.isActive){} +if(switchVariable == true){ + digitalWrite(ledPin, HIGH); +} + +else{ + digitalWrite(ledPin, LOW); +} ``` +### Time Picker -***Check out the [Scheduler](/arduino-cloud/features/cloud-scheduler) guide for more information.*** +![Time Picker Widget](assets/time-picker.png) -### Sticky Note +The time picker widget is used to represent and set a time and/or a date. -![Sticky Note](assets/widget-sticky-note.png) +Can be linked with a **CloudTime** variable. -The sticky note widget can be used to write important notes or to categorize your widgets. +An example of how it is used in a sketch: -The sticky note can **not** be linked with a variable and is designed to keep notes only while using a dashboard. It does support the use of markdown so that you can create titles, links, code blocks etc. +``` +CloudTimeVariable = ArduinoCloud.getLocalTime(); +``` -### Value Selector +In this example, the variable named `CloudTimeVariable` is populated with `ArduinoCloud.getLocalTime()` which returns the Unix time stamp (in seconds) of the local time zone. -![Value Selector](assets/widget-value-picker.png) +### Value -The value selector widget can be used to switch between predetermined values through available buttons. Supported variable types are `int` and `String`. +![Value Widget](assets/widget-value.png) -Example: +The value widget is a simple one. It only reads or writes values without any additional functionalities. -```arduino -if(valueSelector == 0){ - //if value matches, execute code -} +Can be linked with many different variables. -if(valueSelector == "string"){ - //if string matches, execute code -} +An example of how it is used in a sketch: + +```arduino +valueVariable = analogRead(A0); ``` ### Value Dropdown @@ -455,8 +443,20 @@ if(valueDropDown == "string"){ } ``` -### Image +### Value Selector -![Image widget](assets/widget-image.png) +![Value Selector](assets/widget-value-picker.png) -Use the image widget to put a JPG, PNG or WEBP image on your dashboard! If you instead want to use an image URL, then chose the URL option under image source. Keep in mind the URL needs to be a HTTPS URL and not a HTTP URL. It is also possible to use local addresses. If you are using the URL option you can add a refresh frequency to the image widget, enabling the widget to function as a video or moving image. The image will then update The image can be made to fill the widget frame or to fit within the widget frame. A grey background can be added to the widget to help with visibility issues for PNGs with transparent backgrounds. \ No newline at end of file +The value selector widget can be used to switch between predetermined values through available buttons. Supported variable types are `int` and `String`. + +Example: + +```arduino +if(valueSelector == 0){ + //if value matches, execute code +} + +if(valueSelector == "string"){ + //if string matches, execute code +} +```