Define constants / load values to use in widget

Hi!
I want to use a number ob values (coordinates) in my widget because I want to draw predefined polygons over a background image.

I would need an advice whats the best way to do that? I have not managed to define the vars in the widget directly. Another option seems to be to go over Items that are initialized at OpenHab startup.

The coordinates do not change, but I need to reuse them several times inside the widget. What is the best way to do that?

Thanks!
Christoph

Depending on how you plan to draw the polygons, item values are most likely the simplest way to go. Using items as global variables shouldn’t really be the fallback plan, it should be the default plan unless there’s some significant reason not to. That’s really what items are.

The second-best approach is probably to use an oh-repeater. You can manually define a 1-element array of an object that contains all your values and then wrap the entire widget code in that repeater. Because it’s only one element it will only draw one iteration of your widget but the loop variable of the repeater will contain your values.

- component: oh-repeater
  config:
    for: coords
    sourceType: array
    in:
      - x1: 1
        y1: 2
        x2: 2
        y2: 3
    fragment: true
  slots:
    default:
      - component: Label
        config:
          text: =`Point 1 (${loop.coords.x1},${loop.coords.y1})`
      - component: Label
        config:
          text: =`Point 2 (${loop.coords.x2},${loop.coords.y2})`

Thanks very much!
Ich tried to get it to work in my widget, but it seems not to recognize the array values in the “points” parameter:

uid: anwesenheit_nach_sektor
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 12, 2023, 1:02:58 PM
component: oh-repeater
config:
  for: coords
  sourceType: array
  in:
    - x1: 500
      y1: 500
  fragment: true
slots:
  default:
  - component: f7-card
    config:
      style:
        background-image: url('/static/images/elt.jpg')
        background-size: contain
        background-repeat: no-repeat
        background-position: center
        width: 100%
        height: 100%
        display: flex
        align-items: center
        justify-content: center
        overflow: hidden
        opacity: 1   
    slots:
      default:
        - component: svg
          config:
            height: 100%
            viewBox: 0 0 1920 1080
            width: 100%
          slots:
            default:
              - component: polygon
                config:
                  points: ${loop.coords.x1}, ${loop.coords.y1} 100,100 1920,1080
                  fill: red
                  fill-opacity: 0.6
                  visible: =items.Test_item.state == "ON"

I think the problem is the syntax here:

points: ${loop.coords.x1}, ${loop.coords.y1} 100,100 1920,1080

Do you have an Idea?

You are correct. You cannot use variables except in an expression. That means 1) it has to start with an = and 2) the expression syntax has to be correct. The example I showed used the javascript string template syntax (only available as of 3.4)

`text ${variable} more text`

So, you want something like:

points: =`${loop.coords.x1}, ${loop.coords.y1} 100,100 1920,1080`

But you could use basic string concatenation as well if you’re on an earlier version of OH.

"text" + variable + "text"