Webview (Grafana chart) and item selector for timezone not working properly

  • Platform information:
    • Hardware: Raspberry PI 3
    • OS: openhabian 1.4
    • Grafana 5.3.4

I want to display different webviews depending on what time slot i am selecting.
I have four webviews that display the same chart with different times (day, week, month, year):

Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now-1d&to=now"	height=11	visibility=[Proxy_TemperatureGroundFloor_DisplayDay==ON]
Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now%2Fw&to=now"	height=11	visibility=[Proxy_TemperatureGroundFloor_DisplayWeek==ON]
Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now%2FM&to=now"	height=11	visibility=[Proxy_TemperatureGroundFloor_DisplayMonth==ON]
Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now%2Fy&to=now"	height=11	visibility=[Proxy_TemperatureGroundFloor_DisplayYear==ON]

So select the time range, I have a switch item:

Switch item=Proxy_TemperatureGroundFloor_TimeSelection	label="Zeitbereich"	mappings=[0="Tag", 1="Woche", 2="Monat", 3="Jahr"]

and finally a rule that changes the items for visibility:

rule "Display Temperature Ground Floor"
when 
    Item Proxy_TemperatureGroundFloor_TimeSelection received command
then
    switch(receivedCommand)
    {
        case 0:{    //day
            logInfo("Temperature groundfloor", "Day")
            Proxy_TemperatureGroundFloor_DisplayDay.postUpdate(ON)
            Proxy_TemperatureGroundFloor_DisplayWeek.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayMonth.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayYear.postUpdate(OFF)
        }
        case 1:{    //week
            logInfo("Temperature groundfloor", "1")
            Proxy_TemperatureGroundFloor_DisplayDay.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayWeek.postUpdate(ON)
            Proxy_TemperatureGroundFloor_DisplayMonth.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayYear.postUpdate(OFF)
        }
        case 2:{    //month
            logInfo("Temperature groundfloor", "2")
            Proxy_TemperatureGroundFloor_DisplayDay.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayWeek.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayMonth.postUpdate(ON)
            Proxy_TemperatureGroundFloor_DisplayYear.postUpdate(OFF)
        }
        case 3:{    //year
            logInfo("Temperature groundfloor", "3")
            Proxy_TemperatureGroundFloor_DisplayDay.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayWeek.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayMonth.postUpdate(OFF)
            Proxy_TemperatureGroundFloor_DisplayYear.postUpdate(ON)
        }
    }
end

The problem is that I am getting an error from grafana that the time zone is invalid when changing e.g. from day to week:


When I hit F5 in the browser the current chart is working again. But switching to another time zone causes the same error again.

My first idea was that grafana does not like it if several charts are loaded at the same time. (The visibility tag just shows/hides an HTML element)
But if I remove the visibility tag from the items in the sitemap, all graphs are shown without issues.

The URLs in the webview show no difference - iā€™ve doublechecked that with the developer tools from Chromeā€¦

OK: I just realized that is seems to be browser related. Chrome and Edge have the same issue. The Android App is working fine.
So itā€™s not a real OH (or grafana) problem. But did somebody realize something similiar or did somebody run into the same issues (and maybe has a solution for browsers?)

You donā€™t need this rule :wink:

Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now-1d&to=now" height=11 visibility=[Proxy_TemperatureGroundFloor_TimeSelection==0]
Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now%2Fw&to=now" height=11 visibility=[Proxy_TemperatureGroundFloor_TimeSelection==1]
Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now%2FM&to=now" height=11 visibility=[Proxy_TemperatureGroundFloor_TimeSelection==2]
Webview icon=none url="http://openhabianpi:3000/d/ioB0_uWgk/raumtemperatur?orgId=1&panelId=4&theme=light&kiosk&fullscreen&from=now%2Fy&to=now" height=11 visibility=[Proxy_TemperatureGroundFloor_TimeSelection==3]

But this wonā€™t change your problem. Is =now%2Fw&to=now correct?

1 Like

Thanks for the hint with the visibility. Didnā€™t know that :slight_smile:
The URL is correct:

If I have the error and just reload the browser page, the chart will be displayed without issuesā€¦
I will have a closer look this night (when the kids are asleep and I can be at the computer for more than 5mins without being interrupted :wink: )

Damnit - it even fails if i put the same URL for all four webview elementsā€¦
I think i give up.
But anyhow. Thanks for reading and helping :wink:

Have you tried with the browser in debug mode (F12)? That way you can see what is being sent.

Hello,
I would like to do the same think like @Sascha_Billian.

For this I use as basic the example code from @Udo_Hartmann:

I get the same error like @Sascha_Billian: " error parsing query: invalid duration"

For the url-time range I use the grafana doc: https://grafana.com/docs/grafana/latest/reference/timerange/

My sitemap:

Frame{
                Switch item=room1_chartSwitch
                    label="Select"
                    icon="sofa"
                    mappings=[1="12h",
                              2="24h",
                              3="day view"]
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now/d&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="3"]    //00-now-view,         
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now-24h&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="2"]    //24h-view,         
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now-12h&to=now&panelId=2"  height=18 visibility=[room1_chartSwitch=="1"]    //12h-view,         
            }

Does anyone have any idea where the problem could be?
Thank you in advance!

Hello,
has anybody an idea? :thinking:

Thatā€™s what i would try. To be honest, I am not in the desparate need to have those charts so I didnā€™t investigate more.
I think if you see in the debug log whatā€™s been sent by the browser you can check the grafana community if this is known.

Good luck :wink:

Try replacing now/d with now%2Fd

Same for this one: try replacing now-24h with now%2D24h

@Sascha_Billian:
Thank you for your input.
Yes, I have just tried it but stangely I donā€™t get any messagesā€¦
Does your webview grafana chart now it works?

@noppes123:
Thank you for your input.
I tried to change my 3 view (12h, 24h, day view) with the same link and use

but it doesnā€™t workā€¦uff
I get allways the error: ā€œerror parsing query: invalid durationā€. Only when I press the ā€œday viewā€ it works, at the other views I get the error even I have the the same link.
The same thing when I use this instruction of grafana: https://grafana.com/docs/grafana/latest/reference/timerange/#time-units

Frame{
                Switch item=room1_chartSwitch
                    label="Select"
                    icon="sofa"
                    mappings=[1="12h",
                              2="24h",
                              3="day view"]
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2Fd&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="3"]    
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2Fd&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="2"]    
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2Fd&to=now&panelId=2"  height=18 visibility=[room1_chartSwitch=="1"]    
            }

It is possible that I have to do some settings in grafana?

Like i wrote above. I donā€™t use different time scales. And didnā€™t investigate further.
For me, charts are just a wow-Effect for people when I show them my home automation setup. But apart from that I am not using them hence i donā€™t put too much effort in it. Sorry i canā€™t help further.

This suggests that it may not be a Grafana issue, but some BasicUI limitation (or bug). Does clearing the Browser cache when switching to another view makes any difference?

@noppes123:
Thank your for your support!
The cleaning of the browser cache doesā€™t have success:-/

My sitemap doesnā€™t work with google chrome, too:
When I open the sitemap link with gogle chrome I get the following messages (debug mode -console-F12):

Blocked autofocusing on a form control in a cross-origin subframe.
VM1429 vendors~app.eā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.
VM1432 vendors~app.eā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.
VM1431 vendors~app.eā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.
VM1430 vendors~app.eā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.
jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.
jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.
jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.
jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.
2

tti-polyfill.js:3 GET http://IP-ADRESS:3000/api/datasources/proxy/1/query?db=openhab_db&q=SEā€¦e%20%3E%3D%20now()%20-%2024h%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

The ā€œday viewā€ of grafana chart on the sitemap is displayed correctly. When I change the button to 12h or 24h it doesnā€™t happen nothing. Only I get on the grafana chart the message ā€œerror parsing query: invalid durationā€. In the debug modus (F12) I donā€™t get messages.

Can you try the Webview statements outside a frame? Just to see what happens.

BTW, what other browser did you use, besides Chrome?

@noppes123:
Thank you for your helpfulness and patience.
As browser I tried it with chrome, firefox and microsoft edge.

Now i create a new sitemap without a frame:

sitemap home label="grafana chart" {
       
 Switch item=room1_chartSwitch
     label="Select"
         icon="sofa"
             mappings=[1="12h",
                       2="24h",
                       3="day view"]
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2Fd&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="3"]    
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2D24h&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="2"]    
                Webview icon="none"
                url="http://IP-ADRESS:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2D12h&to=now&panelId=2"  height=18 visibility=[room1_chartSwitch=="1"]   
}

The result:
The grafana chart is displayed correctly.
I dontā€™ get the message " error parsing query: invalid duration".
When I press the buttons (12h, 24h, day view) nothing happens :-/
In the debug modus of gogle chrome I get the messages:

6

Blocked autofocusing on a form control in a cross-origin subframe.

VM387 vendors~app.eeā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM402 vendors~app.eeā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM413 vendors~app.eeā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

2

tti-polyfill.js:3 GET http://IP-ADRESS:3000/api/datasources/proxy/1/query?db=openhab_db&q=SEā€¦e%20>%3D%20now()%20-%2024h%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

I donā€™t know where is the problem:-(

Even after a refresh?

Somehow the browser believes that you are switching to another protocol:host:port combination, thatā€™s where these ā€˜cross-originā€™ messages comes from.
Since you masked the actual addresses used I cannot see if all used and logged addresses are the same (BTW, I assume these are private IP addresses - like 10.x.y.z or 192.168.x.y - so no harm in sharing them :smiley:).

Hello @noppes123:
Thank you for your input.
When I select in the sitemap with the button (12h, 24h, day view) a view and then I press the refresh button F5 it works. Just the first smal successā€¦

oh, sorry:

sitemap home label="grafana chart" {
               
 Switch item=room1_chartSwitch
     label="Select"
         icon="sofa"
             mappings=[1="12h",
                       2="24h",
                       3="day view"]
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2Fd&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="3"]   
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now%2D24h&to=now&panelId=2" height=18  visibility=[room1_chartSwitch=="2"]    
                Webview icon="none"
                url="http://192.168.178.38:3000/d-solo/BO_TuAgRz/room1?orgId=1&from=now-12h&to=now&panelId=2"  height=18 visibility=[room1_chartSwitch=="1"]    
}   

This are the debug modus messages with google chrome:

Blocked autofocusing on a form control in a cross-origin subframe.

VM1484 vendors~app.eā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM1495 vendors~app.eā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

VM1514 vendors~app.eā€¦17bb0c79cf513.js:84 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

jquery.js:6164 Blocked autofocusing on a form control in a cross-origin subframe.

tti-polyfill.js:3 GET http://192.168.178.38:3000/api/datasources/proxy/1/query?db=openhab_db&q=SEā€¦e%20>%3D%201582758000000ms%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

tti-polyfill.js:3 GET http://192.168.178.38:3000/api/datasources/proxy/1/query?db=openhab_db&q=SEā€¦e%20>%3D%20now()%20-%2024h%20GROUP%20BY%20time(1y)%20fill(null)&epoch=ms 400 (Bad Request)

Can you share the details on how exactly you defined the Grafana panel?

@noppes123:
Strangely that it works, when i press the refresh button F5.
I donā€™t know what do you exactly meanā€¦
The grafana *.ini file modification: Openhab2+Grafana HABdroid Webview

sudo nano /etc/grafana/grafana.ini
#################################### Users ####################################
[users]
# disable user signup / registration
allow_sign_up = false

...
#################################### Anonymous Auth ##########################
[auth.anonymous]
# enable anonymous access
enabled = true

...
#################################### Basic Auth ##########################
[auth.basic]
enabled = false


[security]
allow_embedding=true

Do you think that in my grafana *.ini file is something wrong?
In the grafana website I click on the chart ->share->embed->copy the large part of the html code and insert it in my sitemap.
I used the instruction: https://www.youtube.com/watch?v=T0GnfHt8aLg

It might (wild guess) be related to authentication - try disabling it in grafana.ini, if it is enabled now.
But I meant the actual graph panel definition; are there other sources involved, external rendering, or ā€¦