Stupid beginner's question #2

[Tom-Bom-badil]

Heya,

loving this graph card, thanks for all the work David.

A new problem here at my end: For a while, I was working with some fixed values in the fn: section of a plotly graph, just to figure out how everything works, and to fiddle around:

                    fn: |
                      $fn ({ vars, state }) => {
                        
                        const x = []; 
                        const y = [];
                        
                        let af1= -10;
                        let tagbetrieb_rk1 = 1;
                        let tag_soll = 19;
                        let nacht_soll = 19;
                        let niveau = -1;
                        let steigung = 0.2;
                        let vorlauf_min = 20;
                        let vorlauf_max = 37;
                        
                        let AT = -20;
                        let lauf=0;

                        if (tagbetrieb_rk1)
                          SOLL = tag_soll;
                        else
                          SOLL = nacht_soll;
                        while (AT < 25) {
                          x[lauf] = AT;
                          y[lauf] =
                            24 + niveau + 2 * steigung * (SOLL - 20) -
                            (0.1 + 0.9 * steigung) * (1.5 * (AT - 20) + 0.01 * Math.pow(AT - 20, 2));
                          if (y[lauf] < vorlauf_min) y[lauf] = vorlauf_min;
                          if (y[lauf] > vorlauf_max) y[lauf] = vorlauf_max;
                          lauf += 1;
                          AT += 1;
                         }
                        vars.x = x;
                        vars.y = y;
                      };
                    x: $fn ({ vars }) => vars.x
                    y: $fn ({ vars }) => vars.y

So far, so good. Successfully figured out the future look-and-feel of this particular graph, which is one of 4 (the other 3 are rather complex) on the same HA page.

Now it's time to replace all those fixed let variable=fixed_value; lines with real-time values from HA. E.g. the af1 variable is supposed to be read from 'sensor.aussen': Something like let af1={{ HA.sensor.aussen }}.

My question is: How do I pass a HA sensor value into this?

Sorry if this question is kinda stupid - tried several approaches, all failed. Guess try-and-error won't bring me any further.

Thanks,
/tom

[dbuezas]

You do that with the entity: sensor.xyz property.
Cheers!

[Tom-Bom-badil]

Thanks the instant response, David, much appreciated! :) Figured it out - #362 helped A LOT.

_ --> push in 'internal' entities by using fn:, pick it up within, work with it_

Having a dynamic heating curve with controller values through Modbus now. Works like a charm (knocking on wood).

Cheers and thanks again,
/tom

[Tom-Bom-badil]

Just one more of those questions: I have a tap action set on 3 different buttons that switches a 'dummy' entity to state 1 or 2 or 3 (depending on which button is clicked). Based on that dummy entity, the same plot with different parameters is presented (see bottom left plot). All parameters are passed through internal entities (fn: $ex vars.whatever = ys.at(-1)) for heating curve calculation via a fn:.

So far, so good - working as intended.

HOWEVER - it seems, the passing of parameters and re-calculation are done instantly, while the graph refresh only happens after one of the involved entities is changed (it is not sufficient that only the dummy entity changes; I even tried to define the dummy twice, both as internal AND non-internal; no success).

See video, watch Y scale compared to the min/max temperatures in the text bottom right of the graph after the click - click happens at 00:10, both text annotations top left / bottom right change instantly, plot refresh happens at 00:25, so 15s later - sometimes it takes minutes).

Is there a way to externally trigger / force the refresh of the plotly graph when that 'dummy' entity changes, or a tap action is done?

plot.mp4

Thanks,
/tom

[dbuezas]

Try removing internal: true, maybe there's a big with that

[Tom-Bom-badil]

Nope - also happens to 'plain' entities which are non-internal. After reworking the marker (diamond) in the video above, it is now instantly setting when the value for the current outside temperature is changed through the developer tools. Before I had to wait till next refresh, similar to waiting for the plot:

entities:
  - entity: ''
    name: Aktuell
    mode: markers
    marker:
      color: grey
      size: 15
      line:
        color: black
        width: 3
      symbol: diamond
    x:
      - |-
        [[[
          /* replaces: '$ex hass.states['sensor.trovis_fuhler_aussen_1_af1'].state' */
          return states['sensor.trovis_fuhler_aussen_1_af1'].state;
        ]]]
    'y':
      - |-
        [[[
          /* replaces: '$ex hass.states['sensor.trovis_fuhler_vorlauf_1_vf1'].state' */
          return states['sensor.trovis_fuhler_vorlauf_1_vf1'].state;
        ]]]

Weird. That's for sure not nice nor elegant code, but it's working.

/tom

[dbuezas]

well, that is some templating engine, right?
I think you found a bug. auto updates seem to not be working well anymore :(.

Btw, try this!
https://dbuezas.github.io/lovelace-plotly-graph-card

finally autocomplete in plotly card yaml!

[Tom-Bom-badil]

Will do and report back, David, thanks - but for today I will call it a day.
Have a great rest of the weekend!

/tom

[Tom-Bom-badil]

well, that is some templating engine, right?

As #462 is also related to this, and we were fiddling around together for days, just a quick explanation: [[[ your-custom-JS ]]] is not a templating engine. It is offered by the very popular custom:button-card and just a different way to implement JS Code. Let's say it's just another way to write $ex: your-custom-js.

The problem in #462 was that the 'outer' custom:button-card I built that entire white device upon (scroll up to the video) and all 'inner' ones as well (where one of them contained the plotly graph with the heating curve) were completely replaced by a simple picture-elements card. Convenient, but that one doesn't support JS at all - you loose the possibility of [[[ ]]] JS, which becomes plain text now. And plotly for sure doesn't like a looong plain text as x: and y: values. ;)

/tom