another really simple example howto making your own user interface

xCite86

Hello Guys.

First i have to say i’m not a web-developer, but it works anyway - somehow

i have written a really simple coded php file for displaying some variables on my wall-mounted tablet. it will be refreshing every 2 seconds and works really good with Android Fullscreen Browser

Bild Text

if you want to use them too, get the php-code and put them into the pimatic-mobile-frontend -> public folder

cd /home/pi/pimatic-app/node_modules/pimatic-mobile-frontend/public

sudo nano tabgui.php

insert

<?php
ini_set('display_errors', 'Off');
error_reporting(0);
$page = $_SERVER['PHP_SELF'];
$sec = "2";
header("Refresh: $sec; url=$page");

############ <URL Pimatic-API> ############
    $url = 'http://<pimatic-user>:<pimatic-password>@<pi-ip>/api/variables';

    $curl = curl_init();
    $headers = array();
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_HEADER, 0);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_TIMEOUT, 30);
    $json = curl_exec($curl);
    curl_close($curl);

$data = json_decode($json);

############ <Variable-ID> ############
$u2 = $data->variables[9]->value;
$bus1 = $data->variables[10]->value;
$bus2 = $data->variables[11]->value;
$time = $data->variables[0]->value;
$wetter1 = $data->variables[13]->value;
$wetter2 = $data->variables[14]->value;
$wetter3 = $data->variables[15]->value;


########## <HTML-Part> ##########
echo "<head>";
echo "<body style='background-color:black'>";
echo "<body text='GhostWhite'>";
echo "<basefont face='verdana'>";
echo "<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0' />";
echo "</head>";

echo "<center>";
echo "<font size='7' face='verdana'><b>HomeControl</b><br></font>";
echo "<font size='3' face='verdana'><i>TabGUI<br></i></font>";

echo "<hr>";
echo "<p>";
echo "<br>";

echo "<font size='6' face='verdana'>";

echo "Uhrzeit";
echo "<br>";
echo "<font size='5' face='verdana'><i>";
echo "$time";
echo "</i><br></font>";
echo "<p>";
echo "U2 Seestadt";
echo "<br>";
echo "<font size='5' face='verdana'><i>";
echo "$u2";
echo "</i><br></font>";
echo "<p>";

echo "84A Seestadt";
echo "<br>";
echo "<font size='5' face='verdana'><i>";
echo "$bus1";
echo "</i><br></font>";
echo "<p>";

echo "84A Aspernstraße";
echo "<br>";
echo "<font size='5' face='verdana'><i>";
echo "$bus2";
echo "</i><br></font>";
echo "<p>";

echo "Wetter";
echo "<br>";
echo "<font size='5' face='verdana'><i>";
echo "aktuell $wetter1 °C, $wetter2, $wetter3";
echo "</i><br></font>";

echo "<p>";
echo "<br>";

echo "<hr>";
echo "</font>";


?>

Edit the url-line and add your pimatic-user, password and IP
get your variable-id you want to show with
curl http://<pimatic-user>:<pimatic-password>@<pi-ip>/api/variables

as example:

Bild Text

Edit the “Variable-ID”-part according to your curl’ed values you want to show.

Feel free to customize the HTML-Part.

if you has finished editing, the site can be reached at http://<pimatic-url>/tabgui.php

leader21

very nice! thx for sharing

xCite86

Code Update

added some more information about windows-state and weather information:

<?php
ini_set('display_errors', 'Off');
error_reporting(0);    //max. aufgedreht
$page = $_SERVER['PHP_SELF'];
$sec = "2";
header("Refresh: $sec; url=$page");

    $url = 'http://
ini_set('display_errors', 'Off');
error_reporting(0);
$page = $_SERVER['PHP_SELF'];
$sec = "2";
header("Refresh: $sec; url=$page");

############ <URL Pimatic-API> ############
    $url = 'http://<pimatic-user>:<pimatic-password>@<pi-ip>/api/variables';

    $curl = curl_init();
    $headers = array();
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_HEADER, 0);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_TIMEOUT, 30);
    $json = curl_exec($curl);
    curl_close($curl);

$data = json_decode($json);

## <Variablen JSON aus Realtimefile>
$u2 = $data->variables[9]->value;         ## u2_info.realtime_u2
$bus1 = $data->variables[10]->value;      ## 84A_info_1.realtime_84a_1
$bus2 = $data->variables[11]->value;      ## 84A_info_2.realtime_84a_2
$time = $data->variables[0]->value;       ## time.time
$wetter1 = $data->variables[12]->value;   ## outsidetemp.temperature
$wetter2 = $data->variables[13]->value;   ## outsidetemp.humidity
$wetter3 = $data->variables[14]->value;   ## weather_max_temperature_today
$wetter4 = $data->variables[15]->value;   ## weather_max_temperature_tomorrow
$wetter5 = $data->variables[16]->value;   ## weather_min_temperature_today
$wetter6 = $data->variables[17]->value;   ## weather_min_temperature_tomorrow
$wetter7 = $data->variables[18]->value;   ## weather_longtext
$wetter8 = $data->variables[19]->value;   ## weather_longtext_today
$wetter9 = $data->variables[20]->value;   ## weather_longtext_tomorrow
$wettericon1 = $data->variables[21]->value;   ## weather_icon
$wettericon2 = $data->variables[22]->value;   ## weather_icon_today
$wettericon3 = $data->variables[23]->value;   ## weather_icon_tomorrow
$workroom_window = $data->variables[82]->value;   ## MySensors_Contact_Workroom.contact
$sleeproom_window = $data->variables[84]->value;   ## MySensors_Contact_Sleeproom.contact
$childroom_window = $data->variables[86]->value;   ## MySensors_Contact_Childroom.contact
$balcondoor_window = $data->variables[88]->value;   ## MySensors_Contact_Childroom.contact
$state = "1";



## <Anzeigetext>
echo "<head>";
echo "<body style='background-color:black'>";
echo "<body text='GhostWhite'>";
echo "<basefont face='verdana'>";
echo "<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0' />";
echo "</head>";
echo "<center>";
############################################
echo "<font size='7' face='verdana'><b>HomeControl</b><br></font>";
############ Window-State#############
echo "<table style='width: 100%;' border='0'>";
echo "<tbody>";
echo "<tr>";
echo "<td>";
if ($workroom_window == $state) ## Wenn 1 dann close else open
{
echo "<img src='close.jpg' alt='close' style='width:30px;height:28px;'>";
}
else
{
echo "<img src='open.jpg' alt='open' style='width:30px;height:28px;'>";
}
echo "</td>";
echo "<td>";
echo "<center><img src='unknown.jpg' alt='unknown' style='width:30px;height:28px;'></center>";
echo "</td>";
echo "<td>";
if ($balcondoor_window == $state) ## Wenn gleich 1 dann close else open
{
echo "<center><img src='close.jpg' alt='close' style='width:30px;height:28px;'></center>";
}
else
{
echo "<center><img src='open.jpg' alt='open' style='width:30px;height:28px;'></center>";
}
echo "</td>";
echo "<td>";
if ($childroom_window == $state) ## Wenn 1 dann close else open
{
echo "<img align='right' src='close.jpg' alt='close' style='width:30px;height:28px;'>";
}
else
{
echo "<img align='right' src='open.jpg' alt='open' style='width:30px;height:28px;'>";
}
echo "</td>";
echo "<td>";
if ($sleeproom_window == $state) ## Wenn 1 dann close else open
{
echo "<img align='right' src='close.jpg' alt='close' style='width:30px;height:28px;'>";
}
else
{
echo "<img align='right' src='open.jpg' alt='open' style='width:30px;height:28px;'>";
}
echo "</td>";
echo "</tr>";
echo "</tbody>";
echo "</table>";
############################################

echo "<hr>";
echo "<p>";

echo "<font size='7' face='verdana'>";

echo "Uhrzeit";
echo "<br>";
echo "<font size='6' face='verdana'><i>";
echo "$time";
echo "</i><br></font>";
echo "<p>";

echo "U2 Seestadt";
echo "<br>";
echo "<font size='6' face='verdana'><i>";
echo "$u2";
echo "</i><br></font>";
echo "<p>";

echo "84A Seestadt";
echo "<br>";
echo "<font size='6' face='verdana'><i>";
echo "$bus1";
echo "</i><br></font>";
echo "<p>";

echo "84A Aspernstraße";
echo "<br>";
echo "<font size='6' face='verdana'><i>";
echo "$bus2";
echo "</i><br></font>";
echo "<p>";

echo "Wetter";
echo "<br>";
echo "<font size='6' face='verdana'><i>";

echo "<table border='0' style='border-collapse:collapse;border:0px solid #FFCC00;width:420'>";
echo "	<tr>";
echo "          <th><font size='4' face='verdana'>aktuell</th>";
echo "		<td><font size='4' face='verdana'>$wetter1 °C  </td>";
echo "		<td><font size='4' face='verdana'>$wetter2 %  </td>";
echo "		<td><font size='4' face='verdana'>$wetter7  </td>";
echo "		<td><img src='$wettericon1' style='width:23px;height:23px;'></td>";
echo "	</tr>";
echo "	<tr>";
echo "          <th><font size='4' face='verdana'>heute  </th>";
echo "		<td><font size='4' face='verdana'>min $wetter5 °C  </td>";
echo "		<td><font size='4' face='verdana'>max $wetter3 °C  </td>";
echo "		<td><font size='4' face='verdana'>$wetter8  </td>";
echo "		<td><img src='$wettericon2' style='width:23px;height:23px;'></td>";
echo "	</tr>";
echo "	<tr>";
echo "          <th><font size='4' face='verdana'>morgen  </th>";
echo "		<td><font size='4' face='verdana'>min $wetter6 °C  </td>";
echo "		<td><font size='4' face='verdana'>max $wetter4 °C  </td>";
echo "		<td><font size='4' face='verdana'>$wetter9  </td>";
echo "		<td><img src='$wettericon3' style='width:23px;height:23px;'></td>";
echo "	</tr>";
echo "</table>";
echo "</i><br></font>";
echo "<hr>";
echo "</font>";

?>

and how they looks like now:

Bild Text