Converting HTML layout to PNG image

Below is an alternative to showing the Weather HTML layout used in the Weather 1.x binding as a PNG image for use in a sitemap versus the need show as a Webview . The primary need for this is to be able see a weather map both locally and remotely when outside your home and to NOT open up port 8080 to the outside world.

This works on Ubuntu Server 16, thus may or may not work under Habian and Windows users would need a different approach as well. But if you are on Ubuntu or similar, the below is what was done.

Note, I am using the Wunderground binding for my primary weather temps, and also the Weather 1.x binding also configured with a Wunderground API key for the map.

With some google searching, I found a way to convert html to png and came across http://phantomjs.org/ which has a good, easy way to convert the weather to an image. This program phantomjs appears it may also be useful for many things including making your own custom colorwheel, but that’s probably beyond my skill level at this point.

The basic steps I followed for Ubuntu Server 16 are as follows.

  1. I used these instructions to Install Phantomjs
    https://www.vultr.com/docs/how-to-install-phantomjs-on-ubuntu-16-04

  2. Created a basic script and placed it in /etc/openhab2/scripts called weather.js

var page = require('webpage').create();
page.open('http://YOURIPADDRESS:8080/weather?locationId=home&layout=example&iconset=colorful', function() {
page.evaluate(function() {
  document.body.bgColor = 'white';
});
page.render('/etc/openhab2/html/images/weather.png');
  phantom.exit();
});

You can see the above will place the image in your ‘html/images’ directory. And you can run the script manually like such:

phantomjs /etc/openhab2/scripts/weather.js
  1. With use of the Exec binding installed and the ExecuteCommand line in a rule. The below rule will update the image every 30 minutes.
rule "Create Weather Map Every 30 minutes"
when
    Time cron "0 /30 * * * ?" or
    System started
then
  //Create Image of the Weather for SiteMap
  var cmd = 'phantomjs@@/etc/openhab2/scripts/weather.js'
	executeCommandLine(cmd) 
end
  1. And then finally in my sitemap I reference the image and can see it both locally and when outside the home
Image url="http://YOURIPADDRESS:8080/static/images/weather.png"
2 Likes

Thanks!

I think the instructions should work on openHABian, assuming they ship ARM binaries in their repo. If not I found this repo:

This site has Windows and Mac binaries:

http://phantomjs.org/download.html

Excellent writeup. Thanks for posting!

I get the message that phantomjs is not executable on my Raspberry Pi 3 (OpenHABian installation).
Can you comment how to install to get it working on OpenHABian?
Regards, Hans

Someone else also compiled a version for the raspberry:

Haven’t tried it myself though

Used this here (https://www.bitpi.co/2015/02/10/installing-phantomjs-on-the-raspberry-pi/) and it worked flawlessly. Thank You!