Variables in oh-context with formula are not calculated when page loaded first time

[SiggiFR (Siegmar Immel)]

Hello. Has anybody used variables im Widget component oh-context, which contains a formula?
I use 2 variables to calc multiple used expressions in sub components in an Widget.This Widget is included in a page. When i First time call / Start this widget (I show it in the sidebar), the variables are empty (I assume null).
My oh-context:

- component: oh-context
  config:
    variables:
      lcFaktorBreite: =(Math.trunc(Math.log10(Math.max(1,
        Math.abs(items['gPiP_Solaranlage_Gesamtleistung'].numericState)))))

When I for debugging purpose show the value of this variable in a label component, at first call after starting my browser I see nothing, After switching to another page and selecting this page again, I see a 1.

For me it looks like an error, but want exclude own errors first.Thanks, Siggi.

runtimeInfo:
version: 4.2.1
buildString: Release Build

[JustinG]

Context variables definitely are calculated initially on page load. I cannot replicate what you are describing (I am on a recent snapshot, but I don’t think there have been any updates to the context since 4.2.1).

It may well be something about exactly where in a page you have your widget. Can you either show the whole widget and page yaml configurations, or create a minimal example that shows the problem so I can test it out?

[SiggiFR (Siegmar Immel)]

I will reduce my widget and then provide it here. Complete version is to large …

By the was, it looks so, that also with a change of the state of my item the variable is not recalculated. I’m currently in the development process.

[SiggiFR (Siegmar Immel)]

Hello Justin, find below my widget. I only deleted all other elements form my widget and kept the structure.
When I start my browser (Firefox or Edge), this is what I see. There should be two “1” at Green arrows, first is output of direct calculated sign of above number, second should be via variable.

This is what I see when I select one another page and then select “variables test” again:

My Widget:

uid: SI_error_with_variables
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Oct 27, 2024, 6:56:09 AM
component: f7-card
config:
  style:
    heightX: 560px
    height: 100%
    max-width: 500px
    width: 100%
    padding: 0px
    margin: 0px
    text-align: center
    align-content: top
    border-radiusX: 1.5em
    --f7-card-bg-color: rgba(100, 150, 200, 0.3)
    --f7-card-header-padding-vertical: 10px
    --f7-card-header-padding-horizontal: 3px
    --f7-card-content-padding-vertical: 13px
    --f7-card-content-padding-horizontal: 3px
    --f7-theme-color: black
  stylesheet: |
    .verbindungszelle {
      position: relative;
      z-index: 0;
      width: 20%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
    }
    .wertefeld {
      background-color: rgba(255, 255, 255, 0.2);
      z-index: 100;
    }
    .wertefeld-senkrecht {
      position: absolute;
      top: 30%;
      left: -10%;
      width: 120%;
    }
    .wertefeld-waagrecht {
    }
slots:
  content:
    - component: f7-block
      config:
        style:
          font-size: 15px
          font-weight: bold
          white-space: nowrap
      slots:
        default:
          - component: f7-row
            config:
              comment: 5. Zeile  <<<<<<<
              noGap: true
              style:
                width: 100%
                max-height: 70px
                align-items: center
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - verbindungszelle
                      - verbindungszelle-waagrecht
                  slots:
                    default:
                      - component: oh-context
                        config:
                          variables:
                            lcFaktorBreite: =(Math.trunc(Math.log10(Math.max(1,
                              Math.abs(items['StromzahlerMQTTAnbindung_AktuelleLeistung'].numericState)))))
                            lcFlussrichtung: =(Math.sign(items['StromzahlerMQTTAnbindung_AktuelleLeistung'].numericState))
                        slots:
                          default:
                            - component: f7-block
                              config:
                                style:
                                  margin: 0
                                  padding: 0
                              slots:
                                default:
                                  - component: oh-link
                                    config:
                                      iconColor: red
                                      iconF7: arrow_right
                                      iconSize: 20px
                                      class:
                                        - wertefeld
                                      text: =Math.trunc(#'StromzahlerMQTTAnbindung_AktuelleLeistung')
                            - component: f7-block
                              config:
                                style:
                                  margin: 0
                                  padding: 0
                              slots:
                                default:
                                  - component: oh-link
                                    config:
                                      iconColor: green
                                      iconF7: arrow_left
                                      iconSize: 20px
                                      class:
                                        - wertefeld
                                      text: =(Math.sign(items['StromzahlerMQTTAnbindung_AktuelleLeistung'].numericState))
                                  - component: oh-link
                                    config:
                                      iconColor: green
                                      iconF7: arrow_left
                                      iconSize: 20px
                                      class:
                                        - wertefeld
                                      text: =vars.lcFlussrichtung

Starting row 95 you have to change the item name to any number item (mine is a power item).
When I’m working in Widget Editor, all is visible. But when including widget in a page … load error …
Thanks for checking this! Siggi

[SiggiFR (Siegmar Immel)]

Interesting. I changed Formula of variable to

                            lcFlussrichtung: =Math.sign(-12000)

and the -1 is visible with start of page !?!?

[Oliver2 (Oliver)]

@SiggiFR

items['StromzahlerMQTTAnbindung_AktuelleLeistung'].numericState

numericState is available in rules. In widgets you need to use

Number.parseFloat(items['StromzahlerMQTTAnbindung_AktuelleLeistung')

or parseInt()

[SiggiFR (Siegmar Immel)]

Hello Oliver,
I changed the formula for the variable as you mentioned, but no change … Still empty when starting first time the page.

Also, if the way I used should not work, why is it working with second opening of the page?

[Oliver2 (Oliver)]

copypaste error. It needs to be

Number.parseFloat(items['StromzahlerMQTTAnbindung_AktuelleLeistung'].state)

or simpler:

Number.parseFloat(@@'StromzahlerMQTTAnbindung_AktuelleLeistung')

[JustinG]

@Oliver2

@SiggiFR

items['StromzahlerMQTTAnbindung_AktuelleLeistung'].numericState

numericState is available in rules. In widgets you need to use

That used to be true, but in more recent updates, the state values available in the widgets have been expanded. If you put =items.Some_Numer_Item in the developer side-bar widget tester, you’ll see that numericState can now be a viable option. For example:

{ "state": "100.0", "displayState": "100", "numericState": 100, "type": "Decimal" }

Numeric Quantity items will even add the unit as a return value.

@SiggiFR

find below my widget. I only deleted all other elements form my widget and kept the structure.

Thanks. With this I can replicate your issue, so it’s not jsut your system doing something strange.

@SiggiFR

Interesting. I changed Formula of variable to

                            lcFlussrichtung: =Math.sign(-12000)

and the -1 is visible with start of page !?!?

Ok, that is very weird. I’m not sure what’s going on here. I’ll poke around for a little while and see what I can find out.

Edit: I see what’s going on now. The variables are being calculated, but in the initial calculation, for some reason, the items object isn’t being properly injected, or the expression is waiting for the return from the call to get the item state.

For now, this is a bug. I’ll see if I can put together a quick fix, or at least file an issue.

[JustinG]

FYI:

Item states not tracked at context variable and constant evaluation

[SiggiFR (Siegmar Immel)]

Many thanks Justin.

I’m not 100% sure, but would it be possible for you to change afterwards the item value and check if the variable will also be changed. I had the case one time, that the value changed to a negative value and then normally the color should have changed from green to red (in my fully Widget). But it did not change … So it could be that not only with first page call something is not triggered, it can also be with following changes.

[JustinG]

That would be the correct behavior for a context variable, in my opinion. What you set in the context definition is just a default value for the variable. All other changes to the variable’s value after the initialization should then come from within the context of the widget, not from outside factors. If you want a value to change each time an item changes, that’s more appropriate as a function.

• Constants - evaluated on widget build, cannot change
• Variables - evaluated on widget build, values only changed by component variable actions
• Functions - evaluated on every call and re-evaluated when dependent values change

So a context such as:

component: oh-context
config:
  functions:
    blinking: =(x) => (items.ProblemLight.state == 'ON')?("It's on!"):("It's off!")

When called further down the widget:

- component: f7-card
  config:
    title: =fn.blinking()

will change the card title every time the item state changes.

[SiggiFR (Siegmar Immel)]

Thank you. I will try to update the documentation of oh-context with this information