Dynamic content in Web Frame Card?

Hello

First of all, sorry for my bad English.
I have several smartplugs flashed with Tasmota. I want to set the timers using OH3. My idea is to use a web frame card, to browse the URL that leads to the tasmota timers configuration page. e.g. 192.168.165.152/tm?. It works without any problems.
The goal, however, is to display different URLs (smartplugs) in the web frame card, at the push of a button.

There are several list cards above the webframe card.
Every ListItem is a smart plug.
The action to perform when the element is clicked, is External URL
Is it possible to define the web frame card as target for the “External URL”?
Oor is there another idea to realize that?

Thanks very much
Thomas

You don’t want to use the URL action here. To the best of my knowledge there’s just no mechanism for specifying which frame to target with the link.

There is, however, a simple solution. Use the variable action. Give each of the list items the action to set a variable of whatever name you want (for example tasmotaUrl) to the timer page you want to control::
image
Note: you will have to select advanced options at the top of the config dialog to see the Variable and Variable Value properties.

Then all you have to do is set the source URL on the web frame to that variable using the vars object:
image

Hello
Thanks for the tip. That sounds plausible, but the webframe card remains empty when I click on a button. I suspect that the variable is set, but the content of the webframe card is not updated. Even if I reload the page (F5), nothing changes. In an additional (temporary) label item (title: =vars.tasmotimerurl) the variable is not displayed either!?
Do you have any other suggestions?

config:
  label: Tasmota Timer
  layoutType: responsive
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: Nachttischlampe
                              listButton: true
                              action: variable
                              actionVariable: tasmotimerurl
                              actionVariableValue: =items.Gosund1121Nachtlicht_IPAdresse+"/tm?"
                              icon: f7:timer
                            slots: null
                          - component: oh-list-item
                            config:
                              title: Nachtlicht
                              listButton: true
                              action: variable
                              actionVariable: tasmotimerurl
                              actionVariableValue: 192.168.178.192/tm?
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: Kessel
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: Heizung Haus
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: Heizung Küche
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: Warmwasser
                              listButton: true
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: Gosund 1
                              action: url
                              actionUrl: http://192.168.178.192/tm?
                              listButton: true
                          - component: oh-label-item
                            config:
                              title: fafdsfds
                              action: variable
                              actionVariable: tasmotimerurl
                              actionVariableValue: 192.168.178.166/tm?
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: Gartenlicht
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: Teichpumpe
                              listButton: true
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        label: =vars.tasmotimerurl
                      slots: null
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-webframe-card
                      config:
                        src: =vars.tasmotimerurl
                        outline: true
                        borders: false
                        height: 800
masonry: null
grid: []

Best regards

I see a couple of issues that are probably at work here:

actionVariableValue: =items.Gosund1121Nachtlicht_IPAdresse+"/tm?"

Here the call to the items dict returns an object, not the string with the state. You need to use items.Gosund1121Nachtlicht_IPAdresse.state to get that info.

Also, note that in my example the url (even though it is a i.p. address) still starts with the http://. If you do not include that then OH will interpret the url as relative and not absolute. So the webframe card is trying to access some url like http://localhost/page/Tasmota_Timer/192.168.178.192/tm? which quite plainly doesn’t exist. If you would rather keep the simple ip addresses in all the list item widgets, that’s fine, but then you would have to make sure to apply the http:// prefix in the web card source instead:

src: ="http://"+vars.tasmotimerurl

Hello
I have tried different variations. None of them works!?
…items.Gosund1121Nachtlicht_IPAdresse.stat… is the IP of the smartplug (e.g. 192.168.178.122) =string

component: oh-list-card
config: {}
slots:
  default:
    - component: oh-list-item
      config:
        title: Nachttischlampe
        listButton: true
        action: variable
        actionVariable: tasmotimerurl
        actionVariableValue: ="http://"+items.Gosund1121Nachtlicht_IPAdresse.stat+"/tm?"
        icon: f7:timer
      slots: null
    - component: oh-list-item
      config:
        title: Nachtlicht
        listButton: true
        action: variable
        actionVariable: tasmotimerurl
        actionVariableValue: http://192.168.178.192/tm?
      slots: null

strange!
it works in one (!) constellation
I am on the page
click rigth/top “edit”
click right/bottom “run mode”
click right top “save” (once or twice)
the webframe card shows the URL!!
But only (!) after these steps!
When I call up the page again, the card is empty again.

This is how it works, but only under the above conditions

component: oh-list-card
config: {}
slots:
  default:
    - component: oh-list-item
      config:
        title: Nachttischlampe
        listButton: true
        action: variable
        actionVariable: tasmotimerurl
        actionVariableValue: =("http://" + items.Gosund1121Nachtlicht_IPAdresse.state + "/tm?")
        icon: f7:timer
    - component: oh-list-item
      config:
        title: Nachtlicht
        listButton: true
        action: variable
        actionVariable: tasmotimerurl
        actionVariableValue: =("http://" +
          items.Gosund1127Nachttischlampe_Gosund1127IPAdresse.state + "/tm?")

The behaviour is the same with Firefox, Edge, Chrome
In normal operation, nothing happens when I click on the buttons.
The URL is also not displayed in the provisional LabelCard.

With this configuration, it is expected that the URL will be blank when first loading the page. The variable vars.tasmotimerrul has not been set yet so it is null and the webframe is not showing anything. One of the easiest ways to handle this just to make the setting of the url source a little smarter by first checking if the variable is null or not.

src: '=(vars.tasmotimerurl == "null") ? {set some url for a default value} : vars.tasmotimerurl'

The expression checks tasmotimerurl if it’s null then it selects the first option after the ? which you would set to be whatever source you want the webcard to show first. If tasmotimerurl is not null that is, if something else has given it a value then it selects the second option which is just to use whatever that value is.

Can you post the entire page code?

Good morning :slight_smile:

I have tried a few things…

I had to adjust your code a bit to make it work

src: "= vars.tasmotimerurl == NULL ? 'http://192.168.178.192' : 'vars.tasmotimerurl' "

instead of your suggestion

src: '=(vars.tasmotimerurl == "null") ? {set some url for a default value} : vars.tasmotimerurl'

Now an initial page is displayed.

I have reduced the size of the page so that I can try it out better:
This is the complete Code

config:
  label: Tasmota Timer
  layoutType: responsive
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: Nachttischlampe
                              listButton: true
                              action: variable
                              actionVariable: tasmotimerurl
                              actionVariableValue: =("http://" + items.Gosund1121Nachtlicht_IPAdresse.state +
                                "/tm?")
                              icon: f7:timer
                          - component: oh-list-item
                            config:
                              title: Nachtlicht
                              listButton: true
                              action: variable
                              actionVariable: tasmotimerurl
                              actionVariableValue: =("http://" +
                                items.Gosund1127Nachttischlampe_Gosund1127IPAdresse.state
                                + "/tm?")
                              icon: f7:timer
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        label: =vars.tasmotimerurl
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-webframe-card
                      config:
                        src: "= vars.tasmotimerurl == NULL ? 'http://192.168.178.192' :
                          'vars.tasmotimerurl' "
                        outline: true
                        borders: false
                        height: 800
                      slots: null
masonry: null
grid: []

But the fundamental problem remains. The buttons do not work in regular operation. The content of the webframe card does not change.

But the fundamental problem remains. The buttons do not work in regular operation. The content of the webframe card does not change.
And a new problem has arisen. When I use the combination: Edit - run mode - save (several times), the whole OH window is displayed in the webframe card ???

The core of the problem must lie in the setting of the variable and not in the webframe card. Even in this minimal setup, the variable is not displayed in the LabelCard.

config:
  label: Test
  sidebar: true
  layoutType: responsive
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: Test
                              action: variable
                              actionVariable: testbutton
                              actionVariableValue: Testclick
                              listButton: true
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        label: =vars.testbutton
masonry: null
grid: []

That’s strange. I don’t have an explanation for that.

OK, that helps. I had missed that the webframe was at such a different level than the buttons, sorry. The problem here is that in the pages there seems to be some relationship between the levels of the components and the scope of the variables that they can access. Fortunately, there’s a very simple solution. We can define variables in the page config section to give them “global” scope that let every component have access to them. So all you need to do is:

config:
  label: Tasmota Timer
  layoutType: responsive
  sidebar: true
  defineVars:
    tasmotimerurl: "http://192.168.178.192"

This defines the variable as a page level variable and sets a default value for it. Because it now has a default value (i.e., we don’t have to check for null) we can also return the webframe source to the more simple form:

src: = vars.tasmotimerurl

Thank you very much!
That was the solution.

One more question: Is it possible to define another variable per listItem? I would like to display in a labelcard the name of the item I just clicked.

I don’t believe so, unfortunately. You could still achieve the functionality with only a single variable action, but it would be a little more complex. For something like that I would set the variable to both of the required values separated by a comma variable=item label,ip address. That way you can use the string split method to access either the part before the string vars.variable.split(',')[0] or the part after the string vars.variable.split(',')[1].

Thank you very much.
I will try it out when I get a chance.
I am first glad that it now works.

How can you make the src url of a web frame card being the URL stored in a String item?

The UI docs cover all the basics of constructing expressions including item states:

Thanks!