im sorry. i dont think i understand For your info. Im a newby @ programming html or bootstrap. I just digged into it this week Maybe im to quick with posting here but im desperate to get results sry. Can you explain what i need to post? Thanks.
-
Koffienl's tablet guide: Fully customizable HTML GUI for Pimatic
-
@countjuh well, the full index.html file would help. Search the index.html for lamp1 and replace all 3 with your own ID.
-
For ‘spots keuken’ you should use
onclick="toggleDevice('spots-keuken')"
(asuming that is the ID of the device in pimatic.
If the device DO switch on and OFF but do not reflect changes in the page, you definitely have wrong ID’s in the HTML code.Like my projects and help? Consider donating electroneum etnjwAKGPqF6omQWRmpp9u2BPyVDG9VuyRQjNJ1S8yfBdfR9qeUQ46kRy8KS2CNqbpNLRrsgmNW6F2TMzxmZgPrh6KctrkrYbm
-
thanks for the help. i have checked the id’s and changed it to what you said. still doesnt work. lights go on and off, but the tile remains clear. not change to dark when clicked. but when i refresh page it works? also a new fault is there. it keeps on displaying parsing devices and the loading screen stays. maybe i just need to read more about html
i get this error in dev mode:
Uncaught TypeError: Cannot read property 'value' of undefined at Object.<anonymous> (pimatic-socket.js?v=1512511798694:146) at Function.each (jquery-1.10.2.js:671) at Socket.<anonymous> (pimatic-socket.js?v=1512511798694:144) at Socket.Emitter.emit (socket.io.js:1335) at Socket.onevent (socket.io.js:879) at Socket.onpacket (socket.io.js:837) at Manager.<anonymous> (socket.io.js:1197) at Manager.Emitter.emit (socket.io.js:1335) at Manager.ondecoded (socket.io.js:395) at Decoder.<anonymous> (socket.io.js:1197)
-
@countjuh full index.html please
-
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta charset=“utf-8”/>
<meta name=“robots” content=“noindex, nofollow”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta name=“apple-mobile-web-app-capable” content=“yes”>
<meta name=“apple-mobile-web-app-status-bar-style” content=“black-translucent”>
<title>Pimatic UI</title>
<link rel=“shortcut icon” href=“favicon.ico”/>
<!–CSS–>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.css”>
<link rel=“stylesheet” type=“text/css” href=“css/site.css”>
<link rel=“stylesheet” type=“text/css” href=“css/animations.css"media=“screen”>
<link rel=“stylesheet” type=“text/css” href=“css/nest.css”>
<!–CUSTOM FONTS–>
<link rel=‘stylesheet’ type=‘text/css’ href=‘https://fonts.googleapis.com/css?family=Lato’>
<link rel=“stylesheet” type=“text/css” href=“https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
<!–JS–>
<script type=“text/javascript” src=“js/jquery-1.10.2.js”></script>
<script type=“text/javascript” src=“js/bootstrap.min.js”></script>
<script type=“text/javascript” src=“js/socket.io.js”></script>
<script type=“text/javascript” >document.write(”<script type=‘text/javascript’ src=‘js/config.js?v=" + Date.now() + "’></script>");</script>
<script type=“text/javascript” >document.write("<script type=‘text/javascript’ src=‘js/include.js?v=" + Date.now() + "’></script>");</script>
<script type=“text/javascript” >document.write("<script type=‘text/javascript’ src=‘js/pimatic-socket.js?v=" + Date.now() + "’></script>");</script>
<script type=“text/javascript” >document.write("<script type=‘text/javascript’ src=‘js/getcal.js?v=" + Date.now() + "’></script>");</script>
<script type=“text/javascript” >document.write("<script type=‘text/javascript’ src=‘js/nest.js?v=" + Date.now() + "’></script>");</script>
<script type=“text/javascript” src=“js/jquery.icalendar.js”></script>
<script type=“text/javascript” src=“js/date/date-nl-NL.js”></script>
<script type=“text/javascript” src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type=“text/javascript” src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
</head>
<body>
<script type=“text/javascript”>
if (config[“showNavbar”] == true)
{
document.write(’<nav class=“navbar navbar-fixed-top navbar-default”>’);
document.write(’<div class=“ccontainer-fluid”>’);
document.write(’<div class=“navbar-header”>’);
document.write(’<button type=“button” class=“navbar-toggle” data-toggle=“collapse” data-target="#myNavbar">’);
document.write(’<span class=“icon-bar”></span>’);
document.write(’<span class=“icon-bar”></span>’);
document.write(’<span class=“icon-bar”></span>’);
document.write(’</button>’);
document.write(’</div>’);
document.write(’<div class=“collapse navbar-collapse” id=“myNavbar”>’);
document.write(’<ul class=“nav nav-pills nav-justified”>’);$.each( tabs, function( key, value ) { if (tabs[key]["disabled"] == undefined || tabs[key]["disabled"] != true) { document.write('<li id="tab-' + tabs[key]["name"] + '"><a onclick="ToggleContent(\'' + tabs[key]["name"] + '\')">' + tabs[key]["name"] + '</a></li>'); } } ) document.write('</ul>'); document.write('</div>'); document.write('</div>'); document.write('</nav>'); } </script> <!-- Modal dialog, containing a login form for the user --> <div id="modal-dialog" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title1">title</h4> </div> <div class="modal-body"> <p id="modal-body-text">question</p> <form role="form" ng-submit> <div class="form-group"> <label for="exampleInputEmail1">Username</label> <input type="text" class="form-control" id="api_username" placeholder="username" autofocus/> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="api_password" placeholder="Password"/> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-ok btn-primary" id="DoFunction">Submit</button> </div> </div> </div> </div> <!-- Loading screen --> <div class="container body-content" id="loading"> <div class="frontti"> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div id="body-message"></div> </div> </div> <div> <div class="panel-body"> <p style="text-align:center;"><img src="images/load.gif"></p> </div> </div> </div> </div> </div> </div> <!-- 'Beneden' page/tab --> <div class="container body-content slideRight" id="Beneden" style="display: none;"> <div class="frontti"> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail tile tile-teal tile-large"> <i class="fa fa-3x fa-thermometer-half"></i> <div class="clearfix"> <h3 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Livingroom</span><span class="pull-right"><span id="id-livingroom"></span><span id="id-livingroom.unit"></span></span></h3> </div> <div class="clearfix"> <h3 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Weather</span><span class="pull-right"><span id="weather"></span><span id="weather.unit"></span></span></h3> </div> <div class="clearfix"> <h3 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Setpoint</span><span class="pull-right"><span id="setpoint"></span><span id="setpoint.unit"></span></span></h3> </div> <div class="clearfix"> <h3 class="tile-text"><span style="clear: both;"></span><span class="pull-left">mode</span><span class="pull-right"><span id="mode"></span></span></h3> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail tile tile-wide uibutton" onclick="toggleDevice ('spots-keuken')" id="spots-keuken"> <i class="fa fa-3x fa-lightbulb-o"></i> <h3 class="tile-text">Spots Keuken</h3> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail tile tile-wide uibutton" onclick="toggleDevice('lamp-bij-tv')" id="lamp-bij-tv"> <i class="fa fa-3x fa-lightbulb-o"></i> <h3 class="tile-text">Lamp bij Tv</h3> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail tile tile-wide uibutton" onclick="toggleDevice('dimmer1')" id="dimmer1"> <i class="fa fa-3x fa-sliders"></i> <h3 class="tile-text">Dimmer 1</h3> <div class="clearfix"> <h4 class="tile-text"><span style="clear: both;"></span><span id="dimmer1.dimlevel"></span><span id="dimmer1.unit"></span></span></h4> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail tile tile-lime tile-wide"> <i class="fa fa-3x fa-clock-o"></i> <div class="clearfix"> <h4 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Timer 1</span><span class="pull-right"><span id="timer1"></span><span id="timer1.status"></span></span></h4> </div> <div class="clearfix"> <h4 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Timer 2</span><span class="pull-right"><span id="timer2"></span><span id="timer2.status"></span></span></h4> </div> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-6"> <div class="thumbnail tile tile-concrete tile-extralarge" id="cal"> <i class="fa fa-3x fa-calendar"></i> <div class="clearfix"> <h5 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Today:</span></h5> </div> <span id="calendar-today"></span> <br> <div class="clearfix"> <h5 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Tommorow:</span></h5> </div> <span id="calendar-tommorow"></span> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail tile tile-concrete tile-large"> <i class="fa fa-3x fa-plug"></i> <div class="clearfix"> <h4 class="tile-text"><span class="pull-left">Current usage</span><span class="pull-right"><span id="current-usage"></span><span id="current-usage.unit"></span></span></h4> </div> <div class="clearfix"> <h4 class="tile-text"><span class="pull-left">Total usage for today</span><span class="pull-right"><span id="daily"></span><span id="daily.unit"></span></span></h4> </div> <div class="clearfix"> <h4 class="tile-text"><span class="pull-left">Phase 1</span><span class="pull-right"><span id="energy.phase1"></span><span id="energy.phase3.unit"></span></span></h4> </div> <div class="clearfix"> <h4 class="tile-text"><span class="pull-left">Phase 2</span><span class="pull-right"><span id="energy.phase2"></span><span id="energy.phase2.unit"></span></span></h4> </div> <div class="clearfix"> <h4 class="tile-text"><span class="pull-left">Phase 3</span><span class="pull-right"><span id="energy.phase3"></span><span id="energy.phase3.unit"></span></span></h4> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail tile tile-concrete tile-large"> <i class="fa fa-3x fa-home"></i> <div class="clearfix"> <h4 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Anybody home</span><span class="pull-right"><span class="circle" id="anybodyhome-general"></span></span></h4> </div> <div class="clearfix"> <h4 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Parent home</span><span class="pull-right"><span class="circle" id="anybodyhome-parent"></span></span></h4> </div> <div class="clearfix"> <h4 class="tile-text"><span style="clear: both;"></span><span class="pull-left">Child home</span><span class="pull-right"><span class="circle" id="anybodyhome-child"></span></span></h4> </div> </div> </div> </div> </div> </div> <!-- 'Child1' page/tab (Child of 'Parent') --> <div class="container body-content slideRight" id="Child1" style="display: none;> <div class="frontti"> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div id="temps"> <h2 class="tile-text"><span>Livingroom </span><span id="id-woonkamer-temperatuur"></span><span id="id-woonkamer-temperatuur.unit"></span></h2> <h4 id="BuitenTemperature"></h4> <h3><span>Setpoint </span><span id="setpoint"></span><span id="setpoint.unit"></span><span id="mode"></span></h3> <table width=100%> <tr> <td width=33% style="text-align:center;"> <span class='fa fa-arrow-up' onclick="ChangeSetpoint(config['SetpointPlus_button'])"></span> </td> <td width=33% style="text-align:center;"> <h4>Change setpoint</h4> </td> <td width=33% style="text-align:center;"> <span class='fa fa-arrow-down' onclick="ChangeSetpoint(config['SetpointMin_button'])"></span> </td> </tr> </table> <button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('heat'])" id="heat">Heat</button> </div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('spots-keuken')" id="spots-keuken">Lamp 1</button> <button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('lamp-bij-tv')" id="lamp-bij-tv">Lamp 2</button> <button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('dummy-dimmert')" id="dummy-dimmert">Dimmer 1 [<span id="dummy-dimmert.dimlevel"></span><span id="dummy-dimmert.unit"></span>]</button> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="well well-sm"><b>Timer 1 </b><span id="timer1"></span><span id="timer1.status"></span></div> <div class="well well-sm"><b>Timer 2 </b><span id="timer2"></span><span id="timer2.status"></span></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="well well-sm">Today:<br><span id="calendar-today"></span></div> <div class="well well-sm">Tommorow:<br><span id="calendar-tommorow"></span></div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="well well-sm"><b>Current usage:</b><span class="pull-right"><span id="current-usage"></span><span id="current-usage.unit"></span></span></div> <div class="well well-sm"><b>Total usage for today:</b><span class="pull-right"><span id="daily"></span><span id="daily.unit"></span></span></div> <div class="well well-sm"><b>Phase 1:</b><span class="pull-right"><span id="energy.phase1"></span><span id="energy.phase1.unit"></span></span></div> <div class="well well-sm"><b>Phase 2:</b><span class="pull-right"><span id="energy.phase2"></span><span id="energy.phase2.unit"></span></span></div> <div class="well well-sm"><b>Phase 3:</b><span class="pull-right"><span id="energy.phase3"></span><span id="energy.phase3.unit"></span></span></div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="well well-sm"><b>Anybody home </b><span class="circle" id="anybodyhome-general"></span></div> <div class="well well-sm"><b>Parent home </b><span class="circle" id="anybodyhome-parent"></span></div> <div class="well well-sm"><b>Child home </b><span class="circle" id="anybodyhome-child"></span></div> </div> </div> </div> </div> </div> <!-- 'Child2' page/tab (child of 'Parent') --> <div class="container body-content slideRight" id="Child2" style="display: none;> <div class="frontti"> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div id="temps"> <h2 class="tile-text"><span>Livingroom </span><span id="id-woonkamer-temperatuur"></span><span id="id-woonkamer-temperatuur.unit"></span></h2> <h2 class="tile-text"><span>Outside </span><span id="outside"></span><span id="outside.unit"></span></h2> <div class="clearfix"> <h3 class="tile-text"><span class="pull-left">Sunrise</span><span class="pull-right"><span id="sunrise.sunrise"></span></span></h3> </div> <div class="clearfix"> <h3 class="tile-text"><span class="pull-left">Sunset</span><span class="pull-right"><span id="sunrise.sunset"></span></span></h3> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('spots-keuken')" id="spots-keuken">Lamp 1</button> <button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('lamp-bij-tv')" id="lamp-bij-tv">Lamp 2</button> <button class="btn btn-default btn-lg fullwidth uibutton" onclick="toggleDevice('dummy-dimmert')" id="dummy-dimmert">Dimmer 1 [<span id="dummy-dimmert.dimlevel"></span><span id="dummy-dimmert.unit"></span>]</button> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="well well-sm"><b>Timer 1 </b><span id="timer1"></span><span id="timer1.status"></span></div> <div class="well well-sm"><b>Timer 2 </b><span id="timer2"></span><span id="timer2.status"></span></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="panel panel-default"> <div class="panel-body"> <div class="well well-sm">Today:<br><span id="calendar-today"></span></div> <div class="well well-sm">Tommorow:<br><span id="calendar-tommorow"></span></div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="well well-sm"><b>Anybody home </b><span class="circle" id="anybodyhome-general"></span></div> <div class="well well-sm"><b>Parent home </b><span class="circle" id="anybodyhome-parent"></span></div> <div class="well well-sm"><b>Child home </b><span class="circle" id="anybodyhome-child"></span></div> </div> </div> </div> </div> </div> <!-- 'Log' page/tab --> <div class="container body-content slideRight" id="Log" style="display: none;"> <audio id="audiotag1" src="max7.wav" preload="auto"></audio> <div id="log-content" style="color:#1ec503"></div> </div> <!-- 'Nest' page/tab --> <div id="Nest" style="display: none;" class="container body-content slideRight"> <div id="ring" class="middle"> <div class="ring-background"></div> <div class="output"> <small></small> <strong id="setpointnest"></strong> <span id="fire" class=""></span> <smaller><span id="roomtemp"></span></smaller> </div> <svg version="1.1" id="ring-lines" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> <line x1="150" y1="3.8" x2="150" y2="33.8"/> <line x1="144.9" y1="3.9" x2="145.9" y2="33.9"/> <line x1="139.8" y1="4.2" x2="141.9" y2="34.1"/> <line x1="134.7" y1="4.6" x2="137.9" y2="34.5"/> <line x1="129.7" y1="5.3" x2="133.8" y2="35"/> <line x1="124.6" y1="6.1" x2="129.8" y2="35.6"/> <line x1="119.6" y1="7" x2="125.8" y2="36.4"/> <line x1="114.6" y1="8.2" x2="121.9" y2="37.3"/> <line x1="109.7" y1="9.5" x2="118" y2="38.3"/> <line x1="104.8" y1="11" x2="114.1" y2="39.5"/> <line x1="100" y1="12.6" x2="110.3" y2="40.8"/> <line x1="95.2" y1="14.5" x2="106.5" y2="42.3"/> <line x1="90.5" y1="16.5" x2="102.8" y2="43.9"/> <line x1="85.9" y1="18.6" x2="99.1" y2="45.6"/> <line x1="81.4" y1="20.9" x2="95.5" y2="47.4"/> <line x1="76.9" y1="23.4" x2="91.9" y2="49.4"/> <line x1="72.5" y1="26" x2="88.4" y2="51.5"/> <line x1="68.3" y1="28.8" x2="85" y2="53.7"/> <line x1="64.1" y1="31.7" x2="81.7" y2="56"/> <line x1="60" y1="34.8" x2="78.5" y2="58.5"/> <line x1="56" y1="38" x2="75.3" y2="61"/> <line x1="52.2" y1="41.4" x2="72.3" y2="63.7"/> <line x1="48.5" y1="44.9" x2="69.3" y2="66.4"/> <line x1="44.9" y1="48.5" x2="66.4" y2="69.3"/> <line x1="41.4" y1="52.2" x2="63.7" y2="72.3"/> <line x1="38" y1="56" x2="61" y2="75.3"/> <line x1="34.8" y1="60" x2="58.5" y2="78.5"/> <line x1="31.7" y1="64.1" x2="56" y2="81.7"/> <line x1="28.8" y1="68.3" x2="53.7" y2="85"/> <line x1="26" y1="72.5" x2="51.5" y2="88.4"/> <line x1="23.4" y1="76.9" x2="49.4" y2="91.9"/> <line x1="20.9" y1="81.4" x2="47.4" y2="95.5"/> <line x1="18.6" y1="85.9" x2="45.6" y2="99.1"/> <line x1="16.5" y1="90.5" x2="43.9" y2="102.8"/> <line x1="14.5" y1="95.2" x2="42.3" y2="106.5"/> <line x1="12.6" y1="100" x2="40.8" y2="110.3"/> <line x1="11" y1="104.8" x2="39.5" y2="114.1"/> <line x1="9.5" y1="109.7" x2="38.3" y2="118"/> <line x1="8.2" y1="114.6" x2="37.3" y2="121.9"/> <line x1="7" y1="119.6" x2="36.4" y2="125.8"/> <line x1="6.1" y1="124.6" x2="35.6" y2="129.8"/> <line x1="5.3" y1="129.7" x2="35" y2="133.8"/> <line x1="4.6" y1="134.7" x2="34.5" y2="137.9"/> <line x1="4.2" y1="139.8" x2="34.1" y2="141.9"/> <line x1="3.9" y1="144.9" x2="33.9" y2="145.9"/> <line x1="3.8" y1="150" x2="33.8" y2="150"/> <line x1="3.9" y1="155.1" x2="33.9" y2="154.1"/> <line x1="4.2" y1="160.2" x2="34.1" y2="158.1"/> <line x1="4.6" y1="165.3" x2="34.5" y2="162.1"/> <line x1="5.3" y1="170.3" x2="35" y2="166.2"/> <line x1="6.1" y1="175.4" x2="35.6" y2="170.2"/> <line x1="7" y1="180.4" x2="36.4" y2="174.2"/> <line x1="8.2" y1="185.4" x2="37.3" y2="178.1"/> <line x1="9.5" y1="190.3" x2="38.3" y2="182"/> <line x1="11" y1="195.2" x2="39.5" y2="185.9"/> <line x1="12.6" y1="200" x2="40.8" y2="189.7"/> <line x1="14.5" y1="204.8" x2="42.3" y2="193.5"/> <line x1="16.5" y1="209.5" x2="43.9" y2="197.2"/> <line x1="18.6" y1="214.1" x2="45.6" y2="200.9"/> <line x1="20.9" y1="218.6" x2="47.4" y2="204.5"/> <line x1="23.4" y1="223.1" x2="49.4" y2="208.1"/> <line x1="26" y1="227.5" x2="51.5" y2="211.6"/> <line x1="28.8" y1="231.7" x2="53.7" y2="215"/> <line x1="31.7" y1="235.9" x2="56" y2="218.3"/> <line x1="34.8" y1="240" x2="58.5" y2="221.5"/> <line x1="38" y1="244" x2="61" y2="224.7"/> <line x1="41.4" y1="247.8" x2="63.7" y2="227.7"/> <line x1="44.9" y1="251.5" x2="66.4" y2="230.7"/> <line x1="48.5" y1="255.1" x2="69.3" y2="233.6"/> <line x1="52.2" y1="258.6" x2="72.3" y2="236.3"/> <line x1="56" y1="262" x2="75.3" y2="239"/> <line x1="60" y1="265.2" x2="78.5" y2="241.5"/> <line x1="64.1" y1="268.3" x2="81.7" y2="244"/> <line x1="68.3" y1="271.2" x2="85" y2="246.3"/> <line x1="72.5" y1="274" x2="88.4" y2="248.5"/> <line x1="76.9" y1="276.6" x2="91.9" y2="250.6"/> <line x1="81.4" y1="279.1" x2="95.5" y2="252.6"/> <line x1="85.9" y1="281.4" x2="99.1" y2="254.4"/> <line x1="90.5" y1="283.5" x2="102.8" y2="256.1"/> <line x1="95.2" y1="285.5" x2="106.5" y2="257.7"/> <line x1="100" y1="287.4" x2="110.3" y2="259.2"/> <line x1="104.8" y1="289" x2="114.1" y2="260.5"/> <line x1="109.7" y1="290.5" x2="118" y2="261.7"/> <line x1="114.6" y1="291.8" x2="121.9" y2="262.7"/> <line x1="119.6" y1="293" x2="125.8" y2="263.6"/> <line x1="124.6" y1="293.9" x2="129.8" y2="264.4"/> <line x1="129.7" y1="294.7" x2="133.8" y2="265"/> <line x1="134.7" y1="295.4" x2="137.9" y2="265.5"/> <line x1="139.8" y1="295.8" x2="141.9" y2="265.9"/> <line x1="144.9" y1="296.1" x2="145.9" y2="266.1"/> <line x1="150" y1="296.2" x2="150" y2="266.2"/> <line x1="155.1" y1="296.1" x2="154.1" y2="266.1"/> <line x1="160.2" y1="295.8" x2="158.1" y2="265.9"/> <line x1="165.3" y1="295.4" x2="162.1" y2="265.5"/> <line x1="170.3" y1="294.7" x2="166.2" y2="265"/> <line x1="175.4" y1="293.9" x2="170.2" y2="264.4"/> <line x1="180.4" y1="293" x2="174.2" y2="263.6"/> <line x1="185.4" y1="291.8" x2="178.1" y2="262.7"/> <line x1="190.3" y1="290.5" x2="182" y2="261.7"/> <line x1="195.2" y1="289" x2="185.9" y2="260.5"/> <line x1="200" y1="287.4" x2="189.7" y2="259.2"/> <line x1="204.8" y1="285.5" x2="193.5" y2="257.7"/> <line x1="209.5" y1="283.5" x2="197.2" y2="256.1"/> <line x1="214.1" y1="281.4" x2="200.9" y2="254.4"/> <line x1="218.6" y1="279.1" x2="204.5" y2="252.6"/> <line x1="223.1" y1="276.6" x2="208.1" y2="250.6"/> <line x1="227.5" y1="274" x2="211.6" y2="248.5"/> <line x1="231.7" y1="271.2" x2="215" y2="246.3"/> <line x1="235.9" y1="268.3" x2="218.3" y2="244"/> <line x1="240" y1="265.2" x2="221.5" y2="241.5"/> <line x1="244" y1="262" x2="224.7" y2="239"/> <line x1="247.8" y1="258.6" x2="227.7" y2="236.3"/> <line x1="251.5" y1="255.1" x2="230.7" y2="233.6"/> <line x1="255.1" y1="251.5" x2="233.6" y2="230.7"/> <line x1="258.6" y1="247.8" x2="236.3" y2="227.7"/> <line x1="262" y1="244" x2="239" y2="224.7"/> <line x1="265.2" y1="240" x2="241.5" y2="221.5"/> <line x1="268.3" y1="235.9" x2="244" y2="218.3"/> <line x1="271.2" y1="231.7" x2="246.3" y2="215"/> <line x1="274" y1="227.5" x2="248.5" y2="211.6"/> <line x1="276.6" y1="223.1" x2="250.6" y2="208.1"/> <line x1="279.1" y1="218.6" x2="252.6" y2="204.5"/> <line x1="281.4" y1="214.1" x2="254.4" y2="200.9"/> <line x1="283.5" y1="209.5" x2="256.1" y2="197.2"/> <line x1="285.5" y1="204.8" x2="257.7" y2="193.5"/> <line x1="287.4" y1="200" x2="259.2" y2="189.7"/> <line x1="289" y1="195.2" x2="260.5" y2="185.9"/> <line x1="290.5" y1="190.3" x2="261.7" y2="182"/> <line x1="291.8" y1="185.4" x2="262.7" y2="178.1"/> <line x1="293" y1="180.4" x2="263.6" y2="174.2"/> <line x1="293.9" y1="175.4" x2="264.4" y2="170.2"/> <line x1="294.7" y1="170.3" x2="265" y2="166.2"/> <line x1="295.4" y1="165.3" x2="265.5" y2="162.1"/> <line x1="295.8" y1="160.2" x2="265.9" y2="158.1"/> <line x1="296.1" y1="155.1" x2="266.1" y2="154.1"/> <line x1="296.2" y1="150" x2="266.2" y2="150"/> <line x1="296.1" y1="144.9" x2="266.1" y2="145.9"/> <line x1="295.8" y1="139.8" x2="265.9" y2="141.9"/> <line x1="295.4" y1="134.7" x2="265.5" y2="137.9"/> <line x1="294.7" y1="129.7" x2="265" y2="133.8"/> <line x1="293.9" y1="124.6" x2="264.4" y2="129.8"/> <line x1="293" y1="119.6" x2="263.6" y2="125.8"/> <line x1="291.8" y1="114.6" x2="262.7" y2="121.9"/> <line x1="290.5" y1="109.7" x2="261.7" y2="118"/> <line x1="289" y1="104.8" x2="260.5" y2="114.1"/> <line x1="287.4" y1="100" x2="259.2" y2="110.3"/> <line x1="285.5" y1="95.2" x2="257.7" y2="106.5"/> <line x1="283.5" y1="90.5" x2="256.1" y2="102.8"/> <line x1="281.4" y1="85.9" x2="254.4" y2="99.1"/> <line x1="279.1" y1="81.4" x2="252.6" y2="95.5"/> <line x1="276.6" y1="76.9" x2="250.6" y2="91.9"/> <line x1="274" y1="72.5" x2="248.5" y2="88.4"/> <line x1="271.2" y1="68.3" x2="246.3" y2="85"/> <line x1="268.3" y1="64.1" x2="244" y2="81.7"/> <line x1="265.2" y1="60" x2="241.5" y2="78.5"/> <line x1="262" y1="56" x2="239" y2="75.3"/> <line x1="258.6" y1="52.2" x2="236.3" y2="72.3"/> <line x1="255.1" y1="48.5" x2="233.6" y2="69.3"/> <line x1="251.5" y1="44.9" x2="230.7" y2="66.4"/> <line x1="247.8" y1="41.4" x2="227.7" y2="63.7"/> <line x1="244" y1="38" x2="224.7" y2="61"/> <line x1="240" y1="34.8" x2="221.5" y2="58.5"/> <line x1="235.9" y1="31.7" x2="218.3" y2="56"/> <line x1="231.7" y1="28.8" x2="215" y2="53.7"/> <line x1="227.5" y1="26" x2="211.6" y2="51.5"/> <line x1="223.1" y1="23.4" x2="208.1" y2="49.4"/> <line x1="218.6" y1="20.9" x2="204.5" y2="47.4"/> <line x1="214.1" y1="18.6" x2="200.9" y2="45.6"/> <line x1="209.5" y1="16.5" x2="197.2" y2="43.9"/> <line x1="204.8" y1="14.5" x2="193.5" y2="42.3"/> <line x1="200" y1="12.6" x2="189.7" y2="40.8"/> <line x1="195.2" y1="11" x2="185.9" y2="39.5"/> <line x1="190.3" y1="9.5" x2="182" y2="38.3"/> <line x1="185.4" y1="8.2" x2="178.1" y2="37.3"/> <line x1="180.4" y1="7" x2="174.2" y2="36.4"/> <line x1="175.4" y1="6.1" x2="170.2" y2="35.6"/> <line x1="170.3" y1="5.3" x2="166.2" y2="35"/> <line x1="165.3" y1="4.6" x2="162.1" y2="34.5"/> <line x1="160.2" y1="4.2" x2="158.1" y2="34.1"/> <line x1="155.1" y1="3.9" x2="154.1" y2="33.9"/> </svg> <svg version="1.1" id="marker" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> <polygon fill points="151.5,43 148.5,43 147.5,3 152.5,3 "/> </svg> </div> <div class="temperature"></div> </div> </body>
</html>
-
@countjuh altough hard to read, it looks okay.
-
hey guys. I found the fault. it was in the pimatic.socket.js. Something with value not defined… i removed the and now it runs without any problems. Also the button ligt up when turning a light on. Thanks again and i will go build further
-
I have played with the Gui and this is the result so far.
Now im struggling with the buttons device. Can you please advice me how to make a buttons device translated in the GUI? Thanks for the help.
This is which i want in for example:
-
This should work
<div class="thumbnail tile tile-medium tile-red uibutton" onclick="PressButton(config['Open])" id="rolluik-fenna">
Follow my domotica project on http://maredana.nl
-
@incmve said in Koffienl's tablet guide: Fully customizable HTML GUI for Pimatic:
<div class=“thumbnail tile tile-medium tile-red uibutton” onclick=“PressButton(config['Open])” id=“rolluik-fenna”>
Thanks for the reply @incmve
I have tried your line. But with no result so far. Maybe i do something wrong?
I have tried to add the follwing line:<button type="button" class="btn btn-default navbar-btn" onclick="PressButton(config['aircooudersaankoelen])" id="aircoouders-control">Cool 21</button>
The result is that the button looses the text and the button doenst react on click.
-
@countjuh you are missing a ’
config['aircooudersaankoelen])" config['aircooudersaankoelen'])"
-
I have tried:
<button type="button" class="btn btn-default" onclick="PressButton(config['aircooudersaankoelen'])" id="aircoouders-control">Cool 21</button>
No results when i press button. strange thing happens.
button then changes to -
Hi guys,
still trying to make this work. Buttonsdevice in gui.
Didnt have any result on the above help.
I can make dummy buttons for each command with rules but i just cant stand the fact that the buttonsdevice should work in gui Hope anyone has a positive result in getting the buttonsdevice in the gui. Thanks for any replies. -
Hi all,
I have the same problem, i want to dim my dimmer in the livingroom, I have create 5 Buttondevice with different dimlevel.
But now i want a button in my html page, but it doesnt work for me,<div class="col-sm-1 col-md-2"> <div class="thumbnail tile tile-wide uibutton" onclick="PressButton(config['25'])" d="dimlevel"> <i class="fa fa-3x fa-sliders"></i> <h3 class="tile-text">25%</h3> <div class="clearfix"> </div> </div> </div>
-
@dvanwerkhoven well, you have a typo…
You have
d="dimlevel"
Should beid="dimlevel"
-
Well, i finally had time to check this issue out. I have seen someone giving an example;
onclick="PressButton(config['Open])" id="rolluik-fenna">
After looking through the pimatic-socket.js file, there is no PressButtom function… could you please clarify why this should work @incmve ?
So, what can we do about it? Well, create the function.
Lets look at the normal function to TOGGLE, found in the /js/pimatic-socket.js file;
function toggleDevice(device) { socket.emit('call', { id: 'executeAction-1', action: 'executeAction', params: { actionString: 'toggle ' + device } }); }
In particulair;
actionString: 'toggle ' + device
This line toggle’s the given id in the index.html.
To use this for a button, simply add this under that function as a new function;
function pressButton(device) { socket.emit('call', { id: 'executeAction-1', action: 'executeAction', params: { actionString: 'press ' + device } }); }
As you can see, the function is “pressButton” and the actionString now does a press event instead of a toggle event.
Now, to the fun (and working) part, this is how you press a button;
<div class="thumbnail tile tile-medium tile-red uibutton" onclick="pressButton('spotjes25')" id="spotjes25">
Both values are the ID for the button, not the device.
In this case; device is spotjes-schakelaar and had 3 buttons, spotjes25 spotjes 50 and spotjes75.Let me know if this works
-
@gleno0h hi thanks, i have create the pressButton in the pimatic.js
And in my html file is used this
<div class=“thumbnail tile tile-wide uibutton” onclick=“pressButton(‘dimlevel’)” id=“dimlevel”>
But my Buttondevice id = dimlevel with the buttons 0, 25, 50, 75 and 100
where in the code can i define which button i use ? -
@gleno0h i have tried the next one, and that works fine !!
<div class=“thumbnail tile tile-wide uibutton” onclick=“pressButton(‘75’)” id=“dimlevel”>
-
@dvanwerkhoven great