Using swiper to change variable in widget

Setup, Configuration and Use Widgets
,
1

I’m using a great widget by Marcus that can display grafana graphs in a oh-webframe (Grafana chart with time ranges).
I’d like to add a swiper so I can change the charts timerange backwards/forwards in time.

I’ve modified the widget so that it shows different graphs depending on the buttons at the buttom of the widget - when the buttons are pressed a new url is loaded with the corresponding graph that shows a given time period (day, week, month year).

image
image1116×389 25.8 KB

Here is the widget code as it is seen above:

uid: Grafana chart with timeranges v4
tags: []
props:
  parameters:
    - description: Title of the chart
      label: Title
      name: title
      required: false
      type: TEXT
    - description: URL to show in the frame
      label: Source URL
      name: URL
      required: true
      type: TEXT
    - default: from=now-0d%2Fd-1h&to=now-0d%2Fd&viewPanel=3&kiosk;Day,viewPanel=6&kiosk;Week,viewPanel=7&kiosk;Month,viewPanel=8&kiosk;Year
      description: Comma-separated List of options. Example "from=now-6h&to=now;-6h,viewPanel=3&kiosk;Day" for past "6h" and "Today so far". First entry is default.
      label: Time range options
      name: timerange
      required: true
      type: TEXT
    - description: Height of the Frame (empty = default)
      label: Height
      name: height
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 18, 2023, 9:53:36 AM
component: f7-card
config:
  outline: true
  style:
    --f7-card-margin-horizontal: 10px
    --f7-card-margin-vertical: 3px
    --f7-card-padding-horizontal: 10px
    --f7-card-padding-vertical: 100px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    margin-bottom: 10px
    margin-top: 10px
    noShadow: false
  title: =props.title
slots:
  default:
    - component: oh-webframe-card
      config:
        borders: false
        class:
          - display-block
        height: =props.height
        noBorder: false
        noShadow: true
        src: =props.URL.replace('{period}', vars.selectedPeriod || [props.timerange.split(',')[0].split(';')[0]])
    - component: f7-segmented
      config:
        class:
          - padding-bottom-half
        outline: false
        round: false
        style:
          --f7-button-border-radius: 4px
          --f7-button-font-size: 14px
          --f7-button-font-weight: 300
          --f7-button-outline-border-width: 1px
          --f7-button-padding-horizontal: 0px
          --f7-button-padding-vertical: 0px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-text-transform: none
          margin-left: 10px
          margin-right: 10px
      slots:
        default:
          - component: oh-repeater
            config:
              for: size
              fragment: true
              sourceType: range
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: period
                    fragment: true
                    in: =[props.timerange.split(",")[loop.size].split(";")[1]]
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: selectedPeriod
                          actionVariableValue: =props.timerange.split(",")[loop.size].split(";")[0]
                          fill: "=(([props.timerange.split(',')[loop.size].split(';')[0]] == vars.selectedPeriod) || (props.timerange.split(',')[0].split(';')[1] === loop.period) && !vars.selectedPeriod) ? true : false"
                          outline: true
                          round: false
                          style:
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                          text: =loop.period

To change these the base url is the same, the only change is the timerange and panel id which looks like the following:

from=now-0d%2Fd-1h&to=now-0d%2Fd&viewPanel=3&kiosk

The only thing I need to add is a swiper, that when the arrows are pressed increment/decrement the variable highlighted in the quote above “0”
So initially the daily powerconsumption for today is shown, then i press the left arrow and the new url should be

from=now-1d%2Fd-1h&to=now-1d%2Fd&viewPanel=3&kiosk

I’ve read alot on the forums about variables and seen defineVars and =vars.xx in oh-repeaters, but what the right tool to use and how to implement this so they change part of the props.URL I’m really struggling with, especially since what I need to change is itself in part of a {period} variable

I hope someone can help and point me in the right direction.

Cheers

2

You cannot use the swiper component to do this. The functions of the swipers arrow buttons are internal to it only and can’t be repurposed by OH. You can, however, easily add your own buttons with arrows (or whatever text or image you’d like) using the oh-button component.

Variables are the correct way to handle this situation:

and with the oh-button setting the value of a variable is as easy as giving the button the variable action:

For this I would use the js string replaceAll function in the same way you are already using replace for the period. But now you’re replacing every instance of something like {range} in the timerange property with the value of a variable that you can increment and decrement with oh-buttons.