Frontpage & api

[trixwood]

I have been thinking a lot about connecting devices through api's (like, rest socket,protocols, http... etc) especially with the iKettle 2.0, denon,... And what I am really missing, in the end. What no other app has, is a call to the app like json, retrieving javascript css and html of the sensor.

Such that you can incorporate in quickly in your own frontpage....

I'm missing an api call to get sensor widget... which you can add in your own html, webserver whatever code. And I mean without decoding json and that sort of stuff... just like... you can call:

Code: Select all

<div sensor="PresOut"><script="javascript:domoticz.pressure("PresOut","PRESSURE")">

Code: Select all

<div sensor="PresOut"><script="javascript:domoticz.pressure_idx("PresOut",120")>

(i am not fluent in html, javascript,,... but you get the drift.... you can just tag divs load the javascript... and it works... just displaying the sensor like in the domoticz homepage (with your own style sheet)

and the javascript takes cares of updating the sensor and displaying it in the right right style (box or something which you then can override if you wish... maybe the css should be optional)

That also would make frontpage development, a piece of cake...

It's just an idea... If it's already possible without to much hassle please tell.


If this is possible then (and implemented easy for users), domoticz will be the go to software, to build your own smart home controller. Now I have the choice between hacking the frontpage myself... use openhab (which uses there style or options and their how to coonfigure hardware is terrible). or just stick with domoticz default page... would be nice to have a easy option to build your own frontpage, even for beginners... like just add this javascript... and you can begin adding sensors...

i just want to have a page...

Code: Select all

<css src="domoticz.css">
<script src="domoticz.js">
<div id="sensorID"></div>

[/code]

and it displayed the sensor & update's it, just like on the domoticz frontpage, and you can override the css if you want.... (html format prob wrong..)

Code: Select all

<css src="http://ip:port/widget/domoticz.css">
<script src="http://ip:port/widget/domoticz.js">
<div id="room-Upstairs"></div>

which displayes all rooms...

or frontpafe

Code: Select all

<css src="my_own_style_domoticz.css">
<script src="http://username:password@ip:port/widget/domoticz.js">
<div id="floorplan-Downstairs"></div>

automatically and updated and responsive.

[Egregius]

It's really not that hard to decode the json. The whole Domoticz web ui is build on it.
I also use it in several pages. I create roomplans and add only the devices I need on that page. That way I keep the call small and fast.
If you really want to combine several things the best way to go is to create your own pages.
Once you have the basics it's really not so difficult.
As you may know already I do it all in PHP.
One of the benefits of PHP is that you can create and call functions multiple times.
As example a part of my floorplan:

Code: Select all

Dimmer('tobi',70,435,135);
Dimmer('zithoek',70,110,105);
Dimmer('eettafel',70,110,245);
Dimmer('kamer',70,545,345);
Dimmer('alex',70,560,135);
Schakelaar('kristal','Light',52,8,147);
Schakelaar('tvled','Light',52,8,88);
Schakelaar('bureel','Light',52,8,206);
Schakelaar('inkom','Light',52,51,349);
Schakelaar('keuken','Light',52,157,390);

So, once the functions are there it's nothing more than call them and pass some stuff. In my functions it's like this:
Dimmer('switchname',size,top,left);

Of course, as you start coding you can add everything you want, exactly the way you want it. Add a live feed of one or more camera's, the status of Kodi, Volume and source of a AV receiver. Everything that has a api...

[Evelen]

can you post the complete code of a example like this?

Also i 100% agree with OP.
should also inclide (optional) images for states ect

[Egregius]

My code? Check my signature

[Evelen]

How can you code a site to make it as plane and easy as this?:

Uten navn.png (49.12 KiB) Viewed 2143 times

[Egregius]

Start with something like this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Domoticz switches</title></head><body>
<?php error_reporting(E_ALL);ini_set("display_errors","on");
$domoticzurl="http://192.168.0.10:8084/";
$plan=3;

$ctx=stream_context_create(array('http'=>array('timeout'=>4)));
if(isset($_POST['Schakel']))if(Schakel($_POST['Schakel'])=='ERROR')echo '<div>ERROR</div>';
function Schakel($idx){global $domoticzurl,$ctx;$reply=json_decode(file_get_contents($domoticzurl.'json.htm?type=command&param=switchlight&idx='.$idx.'&switchcmd=Toggle',true,$ctx),true);if($reply['status']=='OK')$reply='OK';else $reply='ERROR';return $reply;}
$domoticz=json_decode(file_get_contents($domoticzurl.'json.htm?type=devices&used=true&plan='.$plan,true,$ctx),true);
if($domoticz){
    echo '<table>';
    foreach($domoticz['result'] as $dom) {
        isset($dom['Type'])?$Type=$dom['Type']:$Type='None';
        isset($dom['SwitchType'])?$SwitchType=$dom['SwitchType']:$SwitchType='None';
        isset($dom['SubType'])?$SubType=$dom['SubType']:$SubType='None';
        if($Type=='Temp'){
            echo '<tr><td>'.$dom['Name'].'</td><td>'.$dom['Temp'].'</td><tr>';
        }elseif($Type=='Temp + Humidity + Baro'){
            echo '<tr><td>'.$dom['Name'].'</td><td>'.$dom['Temp'].'</td><tr>';
        }else{
            echo '<tr>
            <td>'.$dom['Name'].'</td>
            <td>
                <form method="POST">
                    <input type="hidden" name="Schakel" value="'.$dom['idx'].'"/>
                    <input type="submit" value="'.$dom['Data'].'"/></td><tr>
                </form>
            </td>';
        }
        
    }
    echo '</table>';
    unset($domoticz,$dom);
} else echo '<a href="">Geen verbinding met Domoticz</a>';    
?>
<script type="text/javascript">
function toggle_visibility(id){var e=document.getElementById(id);if(e.style.display=='inherit') e.style.display='none';else e.style.display='inherit';}
setTimeout('window.location.href=window.location.href;',4950);
function navigator_Go(url) {window.location.assign(url);}
</script>
</body></html>

Add the desired devices to a roomplan and adjust $domoticzurl and $plan as needed.

This is a simple page like this, order of devices is the order in the roomplan. Switch command is 'toggle'.

[Evelen]

hmmm. can't get this to work, also, where should i put IDX numbers?

[Egregius]

Extension must be php and hosted on a php enabled webserver.

[Evelen]

It works

now, I can see this is a script that automatic include all devices in a roomplan (og all in domoticz if "0")

Is it in any way posible to build this so I (preferably without floorplans) can values and buttons/links in my own layout?

Like:
The temperature of the bath is now <IDX/type for device> degrees, and in the kitchen <IDX/type for device> degrees.
Light Status (click to change): Bathrooms: <IDX/type for device> Kitchen: <IDX/type for device>

Also If i could name the status-names myself (not just "on" and "off") that will be good (If i want it in my language eks. "På" / "Av"

i can HTML in a basic level, but not php

[Egregius]

I assumed you wanted the simpliest way..
Then I suggest you look at my Floorplan code at http://www.domoticz.com/forum/viewtopic.php?f=8&t=7551
With that code all statusses are stored in PHP variables like $Sdevicename ($S for switches, $D for dimmers, $T for thermometers,...)
Then you can freely use them where and how you want.
About the roomplan: if you call the status of all devices and you have lot's of them it takes way more time to retrieve them.
If you only retrieve the 10 switches you need it'll take like 15msec, if you retrieve 100 devices it'll take more than 100msec.