Skip to main content

Tutorial: Visualizing Wind Directions with a Gauge

Configure the Gauge widget to act as a compass that follows wind direction in real time.

Gauge compass

info

You need a Homey capability or variable that reports wind direction in degrees. The KNMI app (Dutch) and Netatmo wind gauge are examples.

Ensure each flow card is linked to the previous card so the flow runs in order.

1. Trigger on wind direction changes​

Create a flow that fires whenever the wind direction value changes.

2. Convert degrees to text​

Add the HomeyScript card Execute code with argument and return Text tag. Pass the wind direction (in degrees) from step 1 as the argument and use the script below to convert it into a human-readable string.

// args[0] holds the wind direction in degrees
let deg = args[0];

// Normalize input to 0-360
deg = ((deg % 360) + 360) % 360;

let direction;

if ((deg > 337.5 && deg <= 360) || (deg >= 0 && deg <= 22.5)) {
  direction = 'North';
} else if (deg > 22.5 && deg <= 67.5) {
  direction = 'Northeast';
} else if (deg > 67.5 && deg <= 112.5) {
  direction = 'East';
} else if (deg > 112.5 && deg <= 157.5) {
  direction = 'Southeast';
} else if (deg > 157.5 && deg <= 202.5) {
  direction = 'South';
} else if (deg > 202.5 && deg <= 247.5) {
  direction = 'Southwest';
} else if (deg > 247.5 && deg <= 292.5) {
  direction = 'West';
} else if (deg > 292.5 && deg <= 337.5) {
  direction = 'Northwest';
} else {
  direction = 'Unknown';
}

return direction;

3. Set the range and wind direction​

Use the DataVista range action card to define the datasource.

DataVista
[Range] Set range identifier from Min to Max with value Value (unit unit is placed position). Overwrite value with label Label.
i
Set a range that can be used in DataVista widgets.
  1. Pick an identifier such as Wind gauge.
  2. Set the minimum and maximum to 0 and 360.
  3. Choose the numeric token from step 1 as the Value.
  4. Set the unit to ° and place it after the value.
  5. Overwrite the label with the text token produced in step 2.

4. (Optional) Configure the visualization​

Use the DataVista gauge configuration action card if you want to customize colors.

DataVista
[Gauge configuration] Set axes color to color1 at value value, color2 at value, color3 value value, color4 at value, color5 at value for configuration id identifier
i
Set configuration that can be used in Advanced Gauge widgets.
  1. Create an identifier such as Visualization for wind gauge.
  2. Configure your preferred color stops (for example, blue at position 0).

5. Add the widget to the dashboard​

Follow the Gauge widget setup to add an Advanced Gauge. Select the datasource from step 3 and (if created) the configuration from step 4.