Gruenbeck water-softener widget

[syntacrsc (Ralph Schnarkowski)]

Hello openHab community.
I just successfully integrated my water softener into openHab. Now I’m trying to create a widget to basically reproduce the look and feel of the smartphone app in openHab.

Since I’m a very novice widget developer I’m reaching out here for help and inspiration.

My setup:
Grünbeck softliQ:SD21 water-softener
The device sends its data to a cloud-server, the servers API is connected to an iobroker which sends the data to my MQTT server.
openHab receives the data via MQTT binding.

Here’s what I’ve got so far:

Here’s the widget code (I’m sure its terrible):

uid: Gruenbeck10
tags: []
props:
  parameters:
    - context: item
      label: Item Wasserhärte-Rohwasser
      name: itemRawWater
      required: true
      type: TEXT
    - context: item
      label: Item Wasserhärte-Weichwasser
      name: itemSoftWater
      required: true
      type: TEXT
    - context: item
      label: Item Wasserverbrauch 3 Tage
      name: itemWater3
      required: true
      type: TEXT
    - context: item
      label: Item nächste Regeneration
      name: itemNextRegen
      required: true
      type: TEXT
    - context: item
      label: Item Restkapa 1
      name: itemResCapa1
      required: true
      type: TEXT
    - context: item
      label: Item Salz-Verbrauch 3 Tage
      name: itemSalt3
      required: true
      type: TEXT
    - context: item
      label: Item Salz-Reichweite
      name: itemSaltRange
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jul 9, 2024, 7:42:07 AM
component: f7-card
config:
  title: Grünbeck SoftliQ:SD21
  footer: Messwerte
  style:
    color: black
    background: url(/static/sd21.png)
    background-size: cover
    background-position: center
    height: 650px
    width: 450px
slots:
  content:
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 0
                width: 450px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: left
                            margin-top: 0
                            width: 225px
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: green
                                  font-size: 14px
                                  margin-top: 0px
                                  margin-left: 0px
                                  text-align: center
                                  width: 60px
                                text: =items[props.itemRawWater].state
                                visible: true
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-top: -0px
                            width: 225px
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-top: -0px
                                  margin-left: 0px
                                  text-align: left
                                  width: 60px
                                text: =items[props.itemSoftWater].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 100px
                width: 450px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: left
                            margin-top: 00px
                            width: 225px
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: left
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-top: 00px
                            margin-left: 0px
                            width: 225px
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-top: -0px
                                  margin-left: 30px
                                  text-align: center
                                  width: 225px
                                text: =items[props.itemWater3].displayState || items[props.itemWater3].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 125px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                      margin-left: 60px
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-top: 0px
                            margin-left: 0px
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-top: -0px
                                  margin-left: 0px
                                  text-align: center
                                  width: 100%
                                text: =items[props.itemResCapa1].displayState || items[props.itemResCapa1].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 95px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                      margin-left: 60px
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-top: 0px
                            margin-left: 0px
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-top: -0px
                                  margin-left: 0px
                                  text-align: center
                                  width: 100%
                                text: =items[props.itemNextRegen].displayState ||
                                  items[props.itemNextRegen].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 95px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                      margin-left: 60px
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-top: 0px
                            margin-left: 0px
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-top: -0px
                                  margin-left: 0px
                                  text-align: center
                                  width: 100%
                                text: =items[props.itemSalt3].displayState || items[props.itemSalt3].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 125px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                      margin-left: 60px
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-top: 0px
                            margin-left: 0px
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-top: -0px
                                  margin-left: 0px
                                  text-align: center
                                  width: 100%
                                text: =items[props.itemSaltRange].state

The manufactures app looks like this:

So what’s missing is a visualization of the 3 day history for water and salt usage.
This data comes in as two separate items but I was not able to parse the JSON data stream into something usable. The data looks like this:

salt history:
[{“date”:“2024-07-08”,“value”:0},{“date”:“2024-07-07”,“value”:1420},{“date”:“2024-07-06”,“value”:0}]

water history:
[{“date”:“2024-07-08”,“value”:153},{“date”:“2024-07-07”,“value”:1409},{“date”:“2024-07-06”,“value”:207}]

I’d appreciate if any of you has an idea as to how to transform this salt and water history data into a widget illustration in a way, shape or form close to the manufacturers app shown above.

Of course all additional advices/ideas/suggestsions/comments are also very welcome!

Kind regards,
Ralph…

P.S.:
In case any of you have a solution as to how to display water hardness in unit °dH instead of mol, I’d be very interested in that solution as well!
for more detail on that issue, see: Problem with unit °dH for item of type Number:AmountOfSubstance

[rlkoshak (Rich Koshak)]

@syntacrsc

In case any of you have a solution as to how to display water hardness in unit °dH instead of mol, I’d be very interested in that solution as well!

That’s going to require a bug fix in the code so file an issue on openhab-core.

@syntacrsc

I’d appreciate if any of you has an idea as to how to transform this salt and water history data into a widget illustration in a way, shape or form close to the manufacturers app shown above.

If you are just looking for a table, you can use the the oh-repeater widget to loop through and parse out the JSON. The reference for the widget is oh-repeater - Repeater | openHAB and A couple of simple oh-repeater examples shows a comple of simple examples of using repeater and Json Array and OH-Repeater shows an example using JSON in specific.

[syntacrsc (Ralph Schnarkowski)]

Hi Rich.

Thanks a lot for pointing me into the right direction!

I’v adjusted my widget and addef a JS transformation to the item containing the JSON data with the salt and water history.

Here’s the result (in case anyone is interested):

widget code:

uid: Gruenbeck10
tags: []
props:
  parameters:
    - context: item
      label: Item Wasserhärte-Rohwasser
      name: itemRawWater
      required: true
      type: TEXT
    - context: item
      label: Item Wasserhärte-Weichwasser
      name: itemSoftWater
      required: true
      type: TEXT
    - context: item
      label: Item Wasserverbrauch 3 Tage
      name: itemWater3
      required: true
      type: TEXT
    - context: item
      label: Item nächste Regeneration
      name: itemNextRegen
      required: true
      type: TEXT
    - context: item
      label: Item Restkapa 1
      name: itemResCapa1
      required: true
      type: TEXT
    - context: item
      label: Item Salz-Verbrauch 3 Tage
      name: itemSalt3
      required: true
      type: TEXT
    - context: item
      label: Item Salz-Reichweite
      name: itemSaltRange
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jul 11, 2024, 2:07:21 PM
component: f7-card
config:
  footer: Messwerte
  style:
    background: url(/static/sd21.png)
    background-position: center
    background-size: cover
    color: black
    height: 650px
    width: 450px
  title: Grünbeck SoftliQ:SD21
slots:
  content:
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 0
                width: 450px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: left
                            margin-top: 0
                            width: 225px
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-left: 0px
                                  margin-top: 0px
                                  text-align: center
                                  width: 60px
                                text: =items[props.itemRawWater].state
                                visible: true
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-top: -0px
                            width: 225px
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-left: 0px
                                  margin-top: -0px
                                  text-align: left
                                  width: 60px
                                text: =items[props.itemSoftWater].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 90px
                width: 450px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: left
                            margin-top: 00px
                            width: 225px
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: left
                            display: flex
                            flex-direction: row
                            height: 00px
                            justify-content: center
                            margin-left: -25px
                            margin-top: 00px
                            width: 225px
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: rItem
                                fragment: true
                                sourceType: array
                                in: =JSON.parse(@@props.itemWater3)
                              slots:
                                default:
                                  - component: f7-col
                                    config:
                                      style:
                                        align-items: center
                                        display: flex
                                        flex-direction: column
                                  - component: f7-block
                                    config:
                                      style:
                                        align-items: left
                                        display: flex
                                        flex-direction: column
                                        height: 80px
                                        justify-content: center
                                        margin-left: 00px
                                        margin-top: 00px
                                        width: 50px
                                    slots:
                                      default:
                                        - component: f7-row
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  style:
                                                    color: black
                                                    font-size: 14px
                                                    margin-left: 0px
                                                    margin-top: -0px
                                                    text-align: center
                                                    width: 100%
                                                  text: =loop.rItem.date
                                        - component: f7-row
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  style:
                                                    color: black
                                                    font-size: 14px
                                                    margin-left: 0px
                                                    margin-top: -0px
                                                    text-align: center
                                                    width: 100%
                                                  text: =loop.rItem.value + "l"
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 135px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      margin-left: 60px
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-left: 0px
                            margin-top: 0px
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-left: 0px
                                  margin-top: -0px
                                  text-align: center
                                  width: 100%
                                text: =items[props.itemResCapa1].displayState || items[props.itemResCapa1].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 95px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      margin-left: 60px
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-left: 0px
                            margin-top: 0px
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-left: 0px
                                  margin-top: -0px
                                  text-align: center
                                  width: 100%
                                text: =items[props.itemNextRegen].displayState ||
                                  items[props.itemNextRegen].state
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 125px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      margin-left: 60px
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-left: 0px
                            margin-top: 0px
                            width: 120%
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: rItem
                                fragment: true
                                sourceType: array
                                in: =JSON.parse(@@props.itemSalt3)
                              slots:
                                default:
                                  - component: f7-col
                                    config:
                                      style:
                                        align-items: center
                                        display: flex
                                        flex-direction: column
                                  - component: f7-block
                                    config:
                                      style:
                                        align-items: left
                                        display: flex
                                        flex-direction: column
                                        height: 80px
                                        justify-content: center
                                        margin-left: 00px
                                        margin-top: 00px
                                        width: 50px
                                    slots:
                                      default:
                                        - component: f7-row
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  style:
                                                    color: black
                                                    font-size: 14px
                                                    margin-left: 0px
                                                    margin-top: -0px
                                                    text-align: center
                                                    width: 100%
                                                  text: =loop.rItem.date
                                        - component: f7-row
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  style:
                                                    color: black
                                                    font-size: 14px
                                                    margin-left: 0px
                                                    margin-top: -0px
                                                    text-align: center
                                                    width: 100%
                                                  text: =loop.rItem.value + "g"
    - component: f7-row
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: row
                height: 0px
                justify-content: center
                margin-top: 95px
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 50px
                            justify-content: center
                            margin-top: 0px
                            width: 50%
                        slots: {}
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      margin-left: 60px
                      width: 50%
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: row
                            height: 0px
                            justify-content: center
                            margin-left: 0px
                            margin-top: 0px
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 14px
                                  margin-left: 0px
                                  margin-top: -0px
                                  text-align: center
                                  width: 100%
                                text: =items[props.itemSaltRange].state

Thing file:

Bridge mqtt:broker:MQTTMosquittoBridge "MQTT Mosquitto Bridge"
[ 
	host="10.0.0.10", 
	secure=false,
	port="1883", 
	username="xxxxxx", 
	password="xxxxxx" 
] 
{	
//Grünbeck SoftliQ:SD21:
	Thing topic gruenbeckSoftliqSd21		"Grünbeck SoftliQ:SD21 Wasserenthärter"
	{
		Channels:
			Type string: nextRegeneration	"nächster Regenerationszyklus"		[stateTopic="gruenbeck/0/softliQ/D/BS50066140/nextRegeneration"]
			Type number: rawWater		 	"Wasserhärte Rohwasser"				[stateTopic="gruenbeck/0/softliQ/D/BS50066140/rawWater"]
			Type number: softWater		 	"Wasserhärte Weichwasser"			[stateTopic="gruenbeck/0/softliQ/D/BS50066140/softWater"]
			Type string: salt3raw			"Salzverbrauch 3 Tage"				[stateTopic="gruenbeck/0/softliQ/D/BS50066140/salt"]
			Type string: salt3rawTt			"Salzverbrauch 3 Tage"				[stateTopic="gruenbeck/0/softliQ/D/BS50066140/salt", transformationPattern="JS:JsonDateToTt.js"]
			Type string: water3raw 			"Wasserverbrauch 3 Tage"			[stateTopic="gruenbeck/0/softliQ/D/BS50066140/water"]
			Type string: water3rawTt		"Wasserverbrauch 3 Tage"			[stateTopic="gruenbeck/0/softliQ/D/BS50066140/water", transformationPattern="JS:JsonDateToTt.js"]
			Type number: mhardsoftw 		"Weichwasser Härtegrad"				[stateTopic="gruenbeck/0/softliQ/D/BS50066140/Stream/mhardsoftw"]
			Type number: mrescapa1			"Soft water Exchanger 1 [m³]"		[stateTopic="gruenbeck/0/softliQ/D/BS50066140/Stream/mrescapa1"]
			Type number: mresidcap1			"Residual capacity 1 [%]" 			[stateTopic="gruenbeck/0/softliQ/D/BS50066140/Stream/mresidcap1"]
			Type number: msaltrange			"Tage bis Salz aufgebraucht"		[stateTopic="gruenbeck/0/softliQ/D/BS50066140/Stream/msaltrange"]
	}
} 

JS-transformation JsonDateToTt.js to transform (and re-sort) JSON for salt and water history:

(function(s){
    //Erwarteter Input:
    //[{"date":"2024-07-10","value":185},{"date":"2024-07-09","value":296},{"date":"2024-07-08","value":153}]
    //Zu erwartender Output:
    //[{"date":"Mo","value":153},{"date":"Di","value":296},{"date":"Mi","value":185}]

    const weekday = ["So","Mo","Di","Mi","Do","Fr","Sa"];

    var myArray = JSON.parse(s);

    //Reihenfolge umkehren:
    var firstArray = myArray[0];
    myArray[0] = myArray[2];
    myArray[2] = firstArray;
 
    //Datümer in Tages-Kürzel übersetzen:    
    var d = new Date(myArray[0].date);
    var day = weekday[d.getDay()];            
    myArray[0].date = myArray[0].date.replace(myArray[0].date, day);
            
    d = new Date(myArray[1].date);
    day = weekday[d.getDay()];        
    myArray[1].date = myArray[1].date.replace(myArray[1].date, day);
        
    d = new Date(myArray[2].date);
    day = weekday[d.getDay()];        
    myArray[2].date = myArray[2].date.replace(myArray[2].date, day);
    
    //Neues JSON aus Array-Inhalten bilden:
    s = JSON.stringify(myArray);

    return s;
})(input)

[syntacrsc (Ralph Schnarkowski)]

Next challenge is to have bars instead of values for water and salt history.

Can anybody point me to information on how to add bars (with heights relative to the values of each day) to the widget?

Somewhat like this (circled in red):

Any help is highly appreciated (again)…

Thanks and kind regards,
Ralph…

[syntacrsc (Ralph Schnarkowski)]

@rlkoshak

That’s going to require a bug fix in the code so file an issue on openhab-core.

Hi Rich.
As suggested I’ve created an issue for this on openhab-core.
https://github.com/openhab/openhab-core/issues/4307

[JustinG]

@syntacrsc

Can anybody point me to information on how to add bars (with heights relative to the values of each day) to the widget?

There’s a discussion and some examples here:

Tank component

Well… it doesn’t exist. Neither in Openhab nor in Framework 7 A tank is a visual representation of a container containing a fluid. It could be used for a rainwater tank or more commonly for the ink levels in printer cartridges or tanks (e.g. Epson). I have seen some widgets that use F7 progressbars for this. I even made one: [Epson 1] This looks nice, but it is not a correct representation of the real world: the ink leaks if the tanks are horizontal. With some CSS learning, I ma…

[syntacrsc (Ralph Schnarkowski)]

@Tank component

Well… it doesn’t exist. Neither in Openhab nor in Framework 7 roll_eyes A tank is a visual representation of a container containing a fluid. It could be used for a rainwater tank or more commonly for the ink levels in printer cartridges or tanks (e.g. Epson). I have seen some widgets that use F7 progressbars for this. I even made one: [Epson 1] This looks nice, but it is not a correct representation of the real world: the ink leaks if the tanks are horizontal. With some CSS learning, I m…

Thanks a lot - I will take a look at this, it looks promising!