# HabDroid not showing a webview

**URL:** <https://community.openhab.org/t/habdroid-not-showing-a-webview/15797>\
**Category:** Android App\
**Created:** [October 26, 2016, 7:24pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797 "2016-10-26T19:24:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![opus](https://community.openhab.org/user_avatar/community.openhab.org/opus/32/55801_2.png) [@opus](https://community.openhab.org/u/opus)\
**Post date:** [October 26, 2016, 7:24pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/1 "2016-10-26T19:24:44Z")

</div>

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.

Sitemap:

```
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.

---

<div class="post-metadata">

**Author:** ![Niko\_Izsak](https://community.openhab.org/letter_avatar_proxy/v4/letter/n/aeb1de/32.png) [@Niko\_Izsak](https://community.openhab.org/u/Niko_Izsak)\
**Post date:** [November 6, 2016, 10:51am UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/2 "2016-11-06T10:51:09Z")

</div>

+1 , have the exact same issue.  
used this guide([InfluxDB+Grafana persistence and graphing](https://community.openhab.org/t/influxdb-grafana-persistence-and-graphing/13761))  
to configure grafana integration , it’s working perfectly in classic ui but get only white frame in habdroid (android and iOS)

---

<div class="post-metadata">

**Author:** ![smar](https://community.openhab.org/user_avatar/community.openhab.org/smar/32/36574_2.png) [@smar](https://community.openhab.org/u/smar)\
**Post date:** [November 6, 2016, 11:35am UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/3 "2016-11-06T11:35:20Z")

</div>

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

`Image refresh=60000 url="http://172.16.2.8:3000/render/dashboard-solo/db/openhab?editorTab=Legend&panelId=3&theme=light&width=800&height=350&from=now-48h&to=now" 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.

---

<div class="post-metadata">

**Author:** ![Niko\_Izsak](https://community.openhab.org/letter_avatar_proxy/v4/letter/n/aeb1de/32.png) [@Niko\_Izsak](https://community.openhab.org/u/Niko_Izsak)\
**Post date:** [November 10, 2016, 5:49pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/4 "2016-11-10T17:49:16Z")

</div>

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

> [@InfluxDB+Grafana persistence and graphing](https://community.openhab.org/t/influxdb-grafana-persistence-and-graphing/13761/69):
>
> I’ve just got this up and running and have encountered the same issue as you @vespaman I don’t have a reverse proxy set up, but am running openHABian fwiw. I have triple checked my login settings match those set out in the guide, but still no image actually loads. As a workaround (a better option @ThomDietrich?) i’ve set up a few html pages with iframes to the graphs. And not only does it work, it loads pretty quickly on my Pi3 and has some of the interactive elemnts of the original grafana gr…

works perfectly in a browser , but not in habdroid.

---

<div class="post-metadata">

**Author:** ![smar](https://community.openhab.org/user_avatar/community.openhab.org/smar/32/36574_2.png) [@smar](https://community.openhab.org/u/smar)\
**Post date:** [November 10, 2016, 5:54pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/5 "2016-11-10T17:54:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Niko\_Izsak](https://community.openhab.org/letter_avatar_proxy/v4/letter/n/aeb1de/32.png) [@Niko\_Izsak](https://community.openhab.org/u/Niko_Izsak)\
**Post date:** [November 11, 2016, 3:42pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/6 "2016-11-11T15:42:40Z")

</div>

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 .  
[https://github.com/eclipse/smarthome/issues/2434](https://github.com/eclipse/smarthome/issues/2434)

---

<div class="post-metadata">

**Author:** ![wborn](https://community.openhab.org/user_avatar/community.openhab.org/wborn/32/55946_2.png) [@wborn](https://community.openhab.org/u/wborn)\
**Post date:** [December 18, 2016, 10:50am UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/7 "2016-12-18T10:50:43Z")

</div>

@Niko_Izsak  
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](https://community.openhab.org/t/influxdb-grafana-persistence-and-graphing/13761/56). I haven’t tried the solution myself yet.

The GitHub page for the PhantomJS packages is: [GitHub - fg2it/phantomjs-on-raspberry: Phantomjs for raspberry pi (armv6/armv7) and aarch64/arm64 · GitHub](https://github.com/fg2it/phantomjs-on-raspberry)

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

```auto
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:

> <https://github.com/grafana/grafana/issues/2662>
>
> I'm attempting to use the \`Direct link rendered image\` link on the Share Panel i…n Grafana.
> 
> When I click this however, I get:
> 
> \<img width="594" alt="screenshot 2015-09-03 15 02 14" src="https://cloud.githubusercontent.com/assets/243499/9650937/0b911b58-524d-11e5-9278-829858de9d51.png"\>
> 
> (Server side error :( - Failed to render to png).
> 
> In the shell session where I'm running Grafana, I see:
> 
> \`\`\`
> 2015/09/03 15:00:37 \[I\] PhantomRenderer::renderToPng url https://localhost:3000/dashboard-solo/db/new-dashboard?panelId=1&fullscreen&from=1439761214361&to=1439761699278&width=1000&height=500
> 2015/09/03 15:00:37 \[render.go:40 RenderToPng()\] \[E\] Failed to render to png: fork/exec /Users/victorhooi/code/gocode/src/github.com/grafana/grafana/vendor/phantomjs/phantomjs: exec format error
> 2015/09/03 15:00:37 \[I\] Completed /render/dashboard-solo/db/new-dashboard 500 Internal Server Error in 10.398804ms
> 2015/09/03 15:02:10 \[I\] PhantomRenderer::renderToPng url https://localhost:3000/dashboard-solo/db/new-dashboard?panelId=1&fullscreen&from=1439761214361&to=1439761699278&width=1000&h
> eight=500
> 2015/09/03 15:02:10 \[render.go:40 RenderToPng()\] \[E\] Failed to render to png: fork/exec /Users/victorhooi/code/gocode/src/github.com/grafana/grafana/vendor/phantomjs/phantomjs: exec
> format error
> 2015/09/03 15:02:10 \[I\] Completed /render/dashboard-solo/db/new-dashboard 500 Internal Server Error in 6.730725ms
> \`\`\`
> 
> Is there some additional setup that needs to be done to get PNG rendering working out of the box?

---

<div class="post-metadata">

**Author:** ![fg2it](https://community.openhab.org/letter_avatar_proxy/v4/letter/f/e495f1/32.png) [@fg2it](https://community.openhab.org/u/fg2it)\
**Post date:** [December 18, 2016, 12:22pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/8 "2016-12-18T12:22:26Z")

</div>

> [@Niko\_Izsak](#):
>
> 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.

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)

> [@wborn](#):
>
> After debugging it a bit it seems you need PhantomJS installed on the RPi 3 to get rendered images

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

```auto
$ /usr/share/grafana/vendor/phantomjs/phantomjs -v
2.1.1

```

---

<div class="post-metadata">

**Author:** ![wborn](https://community.openhab.org/user_avatar/community.openhab.org/wborn/32/55946_2.png) [@wborn](https://community.openhab.org/u/wborn)\
**Post date:** [December 18, 2016, 12:36pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/9 "2016-12-18T12:36:30Z")

</div>

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

```auto
$ 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:

```auto
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]"

```

---

<div class="post-metadata">

**Author:** ![fg2it](https://community.openhab.org/letter_avatar_proxy/v4/letter/f/e495f1/32.png) [@fg2it](https://community.openhab.org/u/fg2it)\
**Post date:** [December 18, 2016, 1:26pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/10 "2016-12-18T13:26:58Z")

</div>

@wborn  
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.

---

<div class="post-metadata">

**Author:** ![wborn](https://community.openhab.org/user_avatar/community.openhab.org/wborn/32/55946_2.png) [@wborn](https://community.openhab.org/u/wborn)\
**Post date:** [December 18, 2016, 8:03pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/11 "2016-12-18T20:03:19Z")

</div>

@fg2it  
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:

> <https://github.com/grafana/grafana/issues/2051>
>
> I'm using grafana 2.1.0-pre1 configured to run behind an apache 2.4 reverse prox…y on path /grafana. This setup is working fairly well, but I cannot render panel images any more. Could this be a bug in the PhantomJS renderer? Let me know if you need more info in order to debug this issue.
> 
> Rendered image:
> !\[grafana\](https://cloud.githubusercontent.com/assets/1133994/7783885/b0150e56-0152-11e5-966b-702d226974f7.png)
> 
> Grafana log:
> 
> \`\`\`
> 2015/05/23 13:42:56 \[I\] PhantomRenderer::renderToPng url http://localhost:3000/grafana/dashboard-solo/db/atmeteo?theme=light&panelId=9&fullscreen&from=now-7d&to=now&width=1000&height=500
> 2015/05/23 13:42:56 \[I\] Completed /grafana/dashboard-solo/db/atmeteo 404 Not Found in 3.578544ms
> 2015/05/23 13:42:56 \[I\] Completed /grafana/css/grafana.light.min.7c1031ee.css 404 Not Found in 2.605139ms
> 2015/05/23 13:42:56 \[I\] Completed /grafana/app/app.ea54b179.js 404 Not Found in 5.543212ms
> \`\`\`
> 
> Grafana config:
> 
> \`\`\`
> \[server\]
> root\_url = %(protocol)s://%(domain)s:%(http\_port)s/grafana/
> \`\`\`
> 
> Apache reverse proxy configuration:
> 
> \`\`\`
> RewriteRule ^/grafana$ grafana/ \[R\]                                             
> ProxyPass /grafana/ http://localhost:3000/                                      
> ProxyPassReverse /grafana/ http://localhost:3000/
> \`\`\`

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

---

<div class="post-metadata">

**Author:** ![wborn](https://community.openhab.org/user_avatar/community.openhab.org/wborn/32/55946_2.png) [@wborn](https://community.openhab.org/u/wborn)\
**Post date:** [December 19, 2016, 11:44am UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/12 "2016-12-19T11:44:29Z")

</div>

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. 🙂

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
</Location>

```

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

---

<div class="post-metadata">

**Author:** ![opus](https://community.openhab.org/user_avatar/community.openhab.org/opus/32/55801_2.png) [@opus](https://community.openhab.org/u/opus)\
**Post date:** [January 8, 2017, 7:16pm UTC](https://community.openhab.org/t/habdroid-not-showing-a-webview/15797/13 "2017-01-08T19:16:31Z")

</div>

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!
