Dynamic HTML content

Setup, Configuration and Use Items & Sitemaps
1

Hi all

I would like to create a HTML-File with dynamic content from the Openhab-Items. I’ve been looking around in the Forum but I not found the correct solution, whatever I tried, gave me a 404 Error.

I would like to create a HTML-File, that shows me the details of the next sun or moon eclipse, depending on the next event.

I have this Items-File:

    DateTime         Astro_Sunrise       "Sonnenaufgang [%1$tH:%1$tM]"               <sunrise>    { channel="astro:sun:home:rise#start" }
    DateTime         Astro_Sunset       "Sonnenuntergang [%1$tH:%1$tM]"             <sunset>       { channel="astro:sun:home:set#start" }
    DateTime         Astro_Midday       "Mittag [%1$tH:%1$tM]"             <sun>       { channel="astro:sun:home:noon#start" }
    DateTime         Astro_Night       "Nacht [%1$tH:%1$tM]"             <moon>       { channel="astro:sun:home:night#start" }
    String Astro_Sternzeichen "Sternzeichen [%s]" { channel="astro:sun:home:zodiac#sign" }
    String Astro_Jahreszeit "Jahreszeit [%s]" { channel="astro:sun:home:season#name" }
    DateTime         Astro_TotalEclipse       "Nächste totale Sonnenfinsternis [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"             <moon>       { channel="astro:sun:home:eclipse#total" }
    DateTime         Astro_PartialEclipse       "Nächste Partiale Sonnenfinsternis [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"             <moon>       { channel="astro:sun:home:eclipse#partial" }
    DateTime         Astro_RingEclipse       "Nächste ringförmige Sonnenfinsternis [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"             <moon>       { channel="astro:sun:home:eclipse#ring" }
    String Astro_Sunphase "Sonnenphase [%s]" { channel="astro:sun:home:phase#name" }

    DateTime         Astro_Moonrise       "Mondaufgang [%1$tH:%1$tM]"               <moon>    { channel="astro:moon:home:rise#start" }
    DateTime         Astro_Moonset       "Monduntergang [%1$tH:%1$tM]"             <moon>       { channel="astro:moon:home:set#start" }
    String Astro_Moonphase "Mondphase [%s]" <moon> { channel="astro:moon:home:phase#name" }
    DateTime         Astro_Nextfullmoon       "Nächster Vollmond [%1$td.%1$tm.]"             <moon>       { channel="astro:moon:home:phase#full" }
    DateTime         Astro_TotalMoonEclipse       "Nächste totale Mondfinsternis [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"             <moon>       { channel="astro:moon:home:eclipse#total" }
    DateTime         Astro_PartialMoonEclipse       "Nächste Partiale Mondfinsternis [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"             <moon>       { channel="astro:moon:home:eclipse#partial" }

As for start I wanted to show the zodiac sign in a html-File called astro.html:

<!DOCTYPE html>
<html>
   <head>
   </head>

   <body id="astro-body">
	  <img src="/static/${Astro_Sternzeichen}.jpg">
   </body>
</html>

I am using an apt-get installation of openhab 2.4.

Can anybody help me, where I need to put this HTML-File? And if the link for the image is correct?

Thanks for any help

2

There is a html folder in the OpenHAB configuration folder. put your webpage there

3

You cannot access Items directly like that in HTML files. You will need to make a call to the rest API from your HTML and parts the json to get the item’s state. The syntax you are getting to use I think only works for HABpanel widgets and perhaps the Weather 1 binding. It is not genetically supported in arbitrary static HTML files.

4

Thanks for your inputs.

I’ve solved it like this. I installed PHP to the Apache-Server.

The Doc-Root of the Apache-Server points to /etc/openhab2/html, where is a folder “apache2” in which I have put a php-File, that get’s the values through Rest-API from openhab.

The PHP-File under location /etc/openhab2/html/apache2/wetter:

<?php
$auth = base64_encode("[Nginx-User]:[Nginx-PW]");
$context = stream_context_create([
"http" => [
    "header" => "Authorization: Basic $auth"
]
]);
$temp = file_get_contents("https://[public-IP]:[Port]/rest/items/weather_CurrentTemperature/state", false, $context );
$humid = file_get_contents("https://[public-IP]:[Port]/rest/items/weather_CurrentHumidity/state", false, $context );


?>
</html>

In Nginx, I’ve forwarded the location /apache2 to the Apache-Port and added the location /rest for make the rest-API password protected:

    location /apache2 {
            proxy_pass http://[Internal-IP]:[Apache-Port];
            proxy_buffering off;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            auth_basic $realm;
            auth_basic_user_file $pwfile;
    }
    location /rest {
            proxy_pass http://localhost:[Openhab-Port]/rest;
            proxy_buffering off;
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            auth_basic $realm;
            auth_basic_user_file $pwfile;
    }

Now in sitemap I can display the PHP-File like this:

Webview item=testWebsite label=“” icon=“none” url=“https://[public-IP]:[Port]/apache2/wetter/” height=6

It’s a bit of work, but now when I have the surrounding, I can use it for anything. Just create a new folder under /html/apache2 and put another php-file.

weather