Daily thermostat Widget from JSON

1

Hi everyone,

i have a problem with configuration of new widget.

image
image791×861 37.1 KB

This widget bring data from item that contain hour/temperature.
The format of item is:
{“00”: 18, “01”: 18, “02”: 17, “03”: 17, “04”: 17, “05”: 16, “06”: 19, “07”: 20, “08”: 21, “09”: 22, “10”: 22, “11”: 22, “12”: 22, “13”: 21, “14”: 20, “15”: 20, “16”: 20, “17”: 21, “18”: 22, “19”: 21, “20”: 20, “21”: 19, “22”: 18, “23”: 18}

The code of widget is:

uid: widget_thermostat_schedule
tags: []
props:
  parameters:
    - context: item
      description: "Inserisci l'Item JSON (es: TermostatoCucina)"
      label: Item JSON della stanza
      name: roomItem
      required: true
      type: TEXT
timestamp: Nov 18, 2024, 7:55:27 PM
component: f7-card
config:
  title: Programmazione Termostato
  class:
    - padding
slots:
  default:
    # REPEATER per creare gli slider orari
    - component: oh-repeater
      config:
        sourceType: range
        for: hour
        rangeStart: 0
        rangeStop: 23
      slots:
        default:
          - component: f7-row
            slots:
              default:
                # Label per l'ora (es. 08:00)
                - component: Label
                  config:
                    text: =`${('0' + loop.hour).slice(-2)}:00`

                # Slider per impostare la temperatura
                - component: oh-slider
                  config:
                    label: Temperatura
                    min: 15
                    max: 25
                    step: 1
                    scale: true
                    scaleSteps: 10
                    scaleSubSteps: 1

                    # Valore iniziale: leggiamo dalla mappa interna
                    value: >
                      (() => {
                        try {
                          const hourKey = ('0' + loop.hour).slice(-2);
                          console.log("Valore corrente per ora", hourKey, ":", thermostatState[hourKey]);
                          return thermostatState[hourKey] !== undefined ? thermostatState[hourKey] : 15;
                        } catch (error) {
                          console.error("Errore durante la lettura dello stato:", error);
                          return 15;
                        }
                      })()

                    # Aggiorna la mappa interna
                    onChange: >
                      (event) => {
                        try {
                          const hourKey = ('0' + loop.hour).slice(-2);
                          thermostatState[hourKey] = event.detail.value; // Aggiorna la mappa
                          console.log("Nuovo stato per", hourKey, ":", thermostatState);
                        } catch (error) {
                          console.error("Errore durante l'aggiornamento:", error);
                        }
                      }

    # PULSANTE per salvare il JSON
    - component: f7-button
      config:
        text: "Salva Programmazione"
        onClick: >
          () => {
            try {
              const jsonString = JSON.stringify(thermostatState);
              console.log("JSON inviato:", jsonString);
              items[props.roomItem].sendCommand(jsonString);
            } catch (error) {
              console.error("Errore durante l'invio del JSON:", error);
            }
          }

But sliders not work, they are always on “15” value and the props is configure correctly.

Can you help me?

2

The sliders are always at 15 because that is the minimum value that you have set and the minimum becomes the default value when no other value is provided.

Your attempt to provide a value fails because you are trying to use full javascript scripting which is not what is provided by the widget expressions (your Label text is an excellent example of a widget expression all the other js scripts are not.

I suggest you read through the several doc pages on advanced widget creation:

But especially, you should read through the information on expressions. You will find a brief description of the limitations of the expression system as well as a link to the expression library (jse-eval) for more details here:

The good news is that you can do everything you are trying to do within the widget system, and possibly even more easily. You will need to use the oh version of all these components (see top link), but when you do, you will find that the oh actions will let you modify the values of particular keys in an object and send values to the items.

For details and examples on actions see here:

Note: You may see that you are, in fact, getting basic responses from the functions in your event handlers. Those scripts are being passed through OH back to the f7 library which does allow for js scripts in those handler properties. However, because those are just passed through they have no access to the OH context which allows for all the interaction with important aspects such as the items object. You will never be able to use those to set an OH item unless you want to try and decode the entire minified OH ui js interface and find the correct series of frontend functions to invoke directly. This is the entire reason why the OH actions exist.