Merge pull request #455 from arduino/karlsoderby/iotc-widget-article

[MKC-600] IoTC Widget/dashboard article

Author: karlsoderby

content/arduino-cloud/01.getting-started/02.technical-reference/images/widget-messenger.png

@@ -641,293 +641,15 @@ The full editor allows for more control over the code and its libraries and prov
 ***Please note: the status of the connection to the Network and Arduino IoT Cloud may be checked by opening the Serial Monitor after uploading a sketch. If the `while(!Serial);` loop is included in the `setup()` function, the code would not execute before opening the Serial Monitor.***
 
 
-## Dashboards
+## Dashboards & Widgets
 
 Dashboards are **visual user interfaces** for interacting with your boards over the cloud, which can be customized with different setups depending on the project's needs.
 
 One or more **Things** can be added to a **Dashboard**, with all or some of their variables. The dashboards can be accessed by navigating to the **“Dashboards”** page at the top menu of the Arduino IoT Cloud interface, where a list of the **existing Dashboards** and an option to **create a new Dashboard** are available.
 
 ![Create widgets from a Thing](./images/create-widget-from-thing.png)
 
-### Widgets 
-
-On the Dashboard **widgets can be added individually** and linked to variables, and variables can be assigned to widgets **automatically by adding a Thing**.
-
-Additionally, the widgets can be **resized and rearranged** on the dashboard using the **"Arrange widgets"** icon. All widgets available are shown in the images below.
-
-![The Arduino IoT Cloud widgets](./images/cloud-widgets.png)
-
-Widgets are visual representations of variables. You can for example choose to have a **Gauge Widget** for a variable storing temperature readings, or a **Chart Widget** for monitoring energy consumption. Depending on the variable's permission, the Widget looks different:
-
-- Read Only cannot be interacted with (e.g. charts)
-- Read & Write can be interacted with (e.g. sliders, steppers)
-
-### Sharing Dashboards
-
-It is possible to share your live dashboards with external people. To do so, please refer to the guide in the link below:
-
-- [Sharing Dashboards in the Arduino IoT Cloud](/cloud/iot-cloud/tutorials/sharing-dashboards)
-
-
-### Downloading Historical Data
-
-You can download the historical data of one or multiple variables. This can be done directly in the dashboard interface, by clicking the information sign at the top right corner, and clicking on download data.
-
-![Downloading historical data](images/download-historical-data.png)
-
-Here you can do the following:
-
-- Search for specific variables
-- Select a period of time
-- Select one (or all) variables
-
-Once you have selected the variables you want data from, click on the **"Select Data Source"** button and then on the **"Get Data"** button. An email will be sent to you with a log file.
-
-### List of Widgets
-
-Below you will find a list of available widgets, and examples on how they are linked to a variable used in a sketch.
-
-#### Switch
-
-![The Switch Widget](./images/widget-switch.png)
-
-The switch widget is great for simply turning something ON or OFF.
-
-Can be linked with a **boolean** variable.
-
-An example of how it is used in a sketch:
-
-```arduino
-if(switchVariable == true){
-    digitalWrite(ledPin, HIGH);
-}
-
-else{
-    digitalWrite(ledPin, LOW);
-}
-```
-
-#### Push Button
-
-![Push Button Widget](images/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);
-}
-```
-
-#### Slider
-
-![Slider Widget](images/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
-analogWrite(ledPin, sliderVariable);
-```
-
-#### Stepper
-
-![Stepper Widget](images/widget-stepper.png)
-
-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
-if(stepperVariable == 10){
-    activateThisFunction();    
-}
-
-//activate another function
-else if(stepperVariable == 11){
-    activateAnotherFunction();
-}
-
-//or simply print out the updated value
-Serial.println(stepperVariable);
-```
-
-#### Messenger
-
-![Messenger Widget](images/widget-messenger.png)
-
-The messenger widget can be used to send and receive strings through the messenger window.
-
-Can be linked with a **String** variable.
-
-An example of how it is used in a sketch:
-
-```arduino
-stringVariable = "This is a string";
-```
-
-#### Color
-
-![Color Widget](images/widget-color.png)
-
-The color widget is great for selecting an exact color for an RGB light.
-
-Can be linked with a **Color** variable.
-
-An example of how it is used in a sketch:
-
-```arduino
-uint8_t r, g, b;
-rgbVariable.getValue().getRGB(r, g, b);
-```
-
-#### Dimmed Light
-
-![Dimmed Light Widget](images/widget-dimmed-light.png)
-
-The dimmed light widget is great for changing the intensity of a light, and to be able to turn it ON and OFF as well.
-
-Can be linked with a **Dimmed Light** variable.
-
-An example of how it is used in a sketch:
-
-```arduino
-  //retrieve and map brightness value from cloud
-  uint8_t brightness = map(dimmedVariable.getBrightness(), 0, 100, 0, 255);
-
-  //then check if switch is on/off 
-  if (dimmedVariable.getSwitch()) {
-    analogWrite(6, brightness); //write brightness value to pin 6    
-  }
-  else{
-    analogWrite(6, LOW); //turn off lamp completely
-  }
-```
-
-#### Colored light
-
-![Colored Light Widget](images/widget-color-light.png)
-
-The colored light widget is designed to set the color for a lamp, and can turn it ON and OFF as well.
-
-Can be linked with a **Colored Light** variable.
-
-An example of how it is used in a sketch:
-
-```arduino
-uint8_t r, g, b;
-rgbVariable.getValue().getRGB(r, g, b);
-```
-
-#### Value
-
-![Value Widget](images/widget-value.png)
-
-The value widget is a simple one. It only reads, or writes values without any additional functionalities.
-
-Can be linked with many different variables.
-
-An example of how it is used in a sketch:
-
-```arduino
-valueVariable = analogRead(A0);
-```
-
-#### Status
-
-![Status Widget](images/widget-status.png)
-
-The status widget is great for checking the state of something: green is positive, red is negative!
-
-Can be linked to a **boolean** variable.
-
-An example of how it is used in a sketch:
-
-```arduino
-statusVariable = true;
-//or
-statusVariable = false;
-```
-
-#### Gauge
-
-![Gauge Widget](images/widget-gauge.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.
-
-Can be linked with multiple variables, including **integers & floats.**
-
-An example of how it is used in a sketch:
-
-```arduino
-gaugeVariable = analogRead(A0);
-```
-
-#### Percentage
-
-![Percentage Widget](images/widget-percentage.png)
-
-Much like the gauge widget, the percentage widget displays percentage in a more visual way.
-
-Can be linked with multiple variables, including **integers & floats.**
-
-An example of how it is used in a sketch:
-
-```arduino
-percentageVariable = analogRead(A0);
-```
-
-#### LED
-
-![LED Widget](images/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
-ledVariable = true;
-//or
-ledVariable = false;
-```
-
-#### Map
-
-![Map Widget](images/widget-map.png)
-
-The map widget is a tool for keeping track on 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
-locationVariable = Location(51.5074, 0.1278);
-```
-
-#### Chart
-
-![Chart Widget](images/widget-chart.png)
-
-The chart widget is great for data analytics. It is used to track real time data, as well as tracking 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
-locationChart = analogRead(A0);
-```
+***You can read more about [Dashboards & Widgets]().***
 
 ## Recommended Code Practices