MainUI Widget: rain prediction in dynamic polygon

Setup, Configuration and Use Widgets
1

I’m trying to create a widget that displays a graph of the predicted rainfall.
e.g.:

buienradar
buienradar1080×193 24.9 KB

The widget should get its data from multiple forecast items. I figured that I could use multiple polygons next to eachother to create a graph. However, I’m struggeling to use the item’s value as a coordinate of a polygon to make the polygons dynamic.

uid: rain_prediction
tags: []
props:
  parameters:
    - context: item
      label: rain_prediction
      name: rain_prediction_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 23, 2023, 9:04:26 PM
component: oh-repeater
config:
  for: coords
  sourceType: array
  in:
    - x1: =items[props.rain_prediction_item]
  fragment: true
slots:
  default:
    - component: f7-card
      slots:
        default:
          - component: svg
            config:
              height: 100%
              viewBox: 0 0 1920 1080
              width: 100%
            slots:
              default:
                - component: polygon
                  config:
                    points: 0 600, 200 600, 200 1000, 0 1000
                    fill: green
                - component: polygon
                  config:
                    points: 200 800, 400 800, 400 1000, 200 1000
                    fill: red
                - component: polygon
                  config:
                    points: 400 400, 600 400, 600 1000, 400 1000
                    fill: blue
1 Like
2

The value of the points property must be a string representing the comma separated list of number pairs. But, you can use a widget expression that returns a string that you have built with the variable values in it. Here’s what it would look like with a string template:

points: =`0 ${your_variable_here}, 200 ${your_variable_here}, 200 1000, 0 1000`
1 Like