HabDroid not showing a webview

(Jürgen Baginski) #1

I’m trying to show a webview on HabDroid, but it isn’t shown. I only get a white screen area.
Intended is the display of a Grafana Dashboard.


Frame label="Chart" {
            Webview url="http://MyServer:3000/dashboard-solo/db/MyDashboard?from=now-24h&to=now&panelId=1" height=20

It is shown using BasicUI or ClassicUI on Firefox.

(Niko Izsak) #2

+1 , have the exact same issue.
used this guide(InfluxDB+Grafana persistence and graphing)
to configure grafana integration , it’s working perfectly in classic ui but get only white frame in habdroid (android and iOS)

(-) #3

I have it working in HabDroid by using Image instead of Webview, e.g:

Image refresh=60000 url="" visibility=[Chart_Period==0]

If you do want to use Webview, you can get it to work by creating a wrapper html file which just loads the grafana image, and place this in the conf/html folder. Your Webview should then point to this html wrapper file.

(Niko Izsak) #4

Hi @smar
I have it configured in a html wrapper , just like in this example:

works perfectly in a browser , but not in habdroid.

(-) #5

Hi @Niko_Izsak

Not sure what else to suggest. I have just literally just tried out both with an Image in sitemap and with an Image in a html wrapper page. Both work fine in my HABdroid (but only whilst in in my internal network - as have an nginx reverse proxy with https + authentication for external access, I haven’t tried to get this to work with my grafana charts yet).

BTW, I’m running on OH2 and my grafana/influxdb is running on a separate virtual machine.

(Niko Izsak) #6

The call just times out , Grafana takes too long to render the image.
I am using RPi 3 , so i guess its not strong enough.

there was an issue raised to increase the timeout .

(Wouter Born) #7

I ran in the same issue with my RPi 3. After debugging it a bit it seems you need PhantomJS installed on the RPi 3 to get rendered images. A solution is provided by fg2it in the InfluxDB+Grafana topic. I haven’t tried the solution myself yet.

The GitHub page for the PhantomJS packages is: https://github.com/fg2it/phantomjs-on-raspberry

In my case sudo cat /var/log/grafana/grafana.log showed following:

t=2016-12-17T18:34:02+0100 lvl=eror msg="Failed to render to png" logger=context userId=0 orgId=1 uname= error="PhantomRenderer::renderToPng timeout (>30s)"

After searching on the error message the following Grafana issue tells the root cause may be the missing PhantomJS:

(Fg2it) #8

This is working fine for me (but I access Grafana directly) but it surely takes some time (a few seconds). The issue you are pointing at is likely to be guilty, but it is not related to grafana. The change should be done in the proxy (it is now, since the issue is closed)

Yes, you are right. But, phantomjs is shipped with Grafana (.deb and tar.gz) in official releases (not working on pi) and in my .deb and .tar.gz. So, if you are using these, you should not have this problem.

So, how did you install Grafana ? I saw some notes on building Grafana for raspberry pi that lead to changes in the build process ending up to a missing PhantomJs binary.

By the way, if you used a .deb package, you should have phantomjs located in /usr/share/grafana/vendor/phantomjs/phantomjs (not on path by default). So you should have something like

$ /usr/share/grafana/vendor/phantomjs/phantomjs -v

(Wouter Born) #9

Thanks for the info @fg2it. I’ve installed it by adding your debian repostory:

$ cat /etc/apt/sources.list.d/grafana-fg2it.list 
deb https://dl.bintray.com/fg2it/deb jessie main

Also I get the 2.1.1 output when I run /usr/share/grafana/vendor/phantomjs/phantomjs -v. So it seems the library is installed on my Pi.

I think in my case it may have to do with the Apache reverse proxy. The Grafana logs also tell what call it is doing, but I doubt that it is listening on that URL:

t=2016-12-18T13:31:41+0100 lvl=info msg="PhantomRenderer::renderToPng url [http://localhost/grafana/dashboard-solo/db/climate?panelId=2&from=1481977822934&to=1482064222934&width=100&height=100]"

(Fg2it) #10

On which port does Grafana is expected to listen in your configuration ? By default it is 3000 and I would expect to see localhost:3000/ in the url not simply localhost/.
Did you try to access grafana directly, without your reverse proxy ? If you can do that, you could easily confirm that the problem is with your reverse proxy configuration.

(Wouter Born) #11

After removing the reverse proxy the image does get rendered fine at my Pi. So I have to figure out how to get the reverse proxy fixed.

I use a configuration that looks a lot like discussed in:

The main difference is that I also have Let’s encrypt, Basic Auth and HTTPS configured. Thanks for helping out though! :slight_smile:

(Wouter Born) #12

After trying a lot of configuration options, I did get rendering panels with HTTPS, basic auth and the reverse proxy working.

What helped was checking the Apache access log. It shows you what calls PhantomJS is trying to make on your server and what IP/username it is using. PhantomJS is added to the user agent string of the calls it makes. PhantomJS is used as a headless browser by Grafana to make a screenshot of the panel. :slight_smile:

I now use the following root_url in /etc/grafana.ini:

root_url = %(protocol)s://%(domain)s/grafana/

When using the default protocol/domain this makes PhantomJS call http://localhost:80/grafana/

The VirtualHost for port 80 in my Apache configuration uses the following Location options:

<Location "/grafana">
    AuthType Basic
    AuthName "Authentication"
    AuthUserFile "/etc/grafana/.htpasswd"
    Require valid-user
    Require ip ::1

    ProxyPass        http://localhost:3000 retry=0 timeout=3600
    ProxyPassReverse http://localhost:3000

This excludes ::1 (localhost, where PhantomJS is running) from the basic auth.

(Jürgen Baginski) #13

I’m still having that problem. Actually I’m trying to display a webview with weather data (weather binding). Basic and Classic UI show the webview but HabDroid not!