Koffienl's tablet guide: Fully customizable HTML GUI for Pimatic

koffienl

After framing your tablet (https://forum.pimatic.org/topic/3311/koffienl-s-tablet-guide-frame-for-wall-mounted-tablet) and controlling it with Pimatic (https://forum.pimatic.org/topic/3312/koffienl-s-tablet-guide-control-tablet-with-pimatic) it is time to run a Fully customizable HTML GUI for Pimatic on the tablet.

It all started with @kitsunen who created a very nice HTML GUI for Pimatic (thanks!). It looked awesome but wasn’t very userfriendly. A lot of hardcoded stuff in the files.
I adopted his base code and started building my own version. Now, 9 months later it has evolved in a GUI that is easily customizable with little knowledge of HTML. Almost every type of device is upported: thermostat, switches, contact/presence, dimmers, variables, timers even simple support for a ICS calendar file.
You can put several different pages on the website and switch through them with a tabbed menu.
Buildin is a nest-clone page to control your Pimatic/thermostat like a Nest.

Few days ago I published the code on github: https://github.com/koffienl/PimaticGUI and started writing a wiki : https://github.com/koffienl/PimaticGUI/wiki

Installation is easy : download the folder PimaticGUI and put on your favorite webserver. Make first changes in the js/config.js and launch the website in your tablet.
I advise you do view the website with Chrome and make a webapp (settings -> Add shortcut to homescreen) so it looks like a fullscreen app.

Please make sure to read the wiki before posting any issues. If your issue is not answered in the wiki don’t hesitate to report in this topic.

Gleno0h

Looks awesome. Thanks for the tutorials.

countjuh

@koffienl

Thanks for sharing. I have managed to get it online. Below my first try. I have tried to google for the uibuttons. With no result. My status of the button doesnt change over on and off. Can you tell me how? Thanks
0_1512417329283_06778291-8d5b-40e4-a6a2-23b1bd915ad5-image.png

koffienl

Your number one stop for such issues : use devloper mode in your browser (most browsers : F12) and look for console messages or errors.
Can you post the HTML code for on the buttons ?

countjuh

@koffienl

<div class="col-sm-3">
						<div class="thumbnail tile tile-wide tile-blue 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 class="thumbnail tile tile-wide tile-blue 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>

Gleno0h

@countjuh you forgot to replace all 3 instances of lamp1? Posting a small snipped wont help to find the issue.

countjuh

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.

Gleno0h

@countjuh well, the full index.html file would help. Search the index.html for lamp1 and replace all 3 with your own ID.

koffienl

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.

countjuh

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)

Gleno0h

@countjuh full index.html please

countjuh

<!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">&times;</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>

Gleno0h

@countjuh altough hard to read, it looks okay.

countjuh

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

countjuh

I have played with the Gui and this is the result so far.
0_1512848721743_a41e767d-231e-4457-bc26-770137781e14-image.png

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:
0_1512848795917_cac679f6-2171-4f73-bcde-b911177b80c8-image.png

incmve

This should work

<div class="thumbnail tile tile-medium tile-red uibutton" onclick="PressButton(config['Open])" id="rolluik-fenna">

countjuh

@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?
0_1513108385814_316d3ebd-2be3-4978-8f24-6387254200f7-image.png
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.
0_1513108735062_a1a09051-32a0-4a22-b8c0-8355f30a02e0-image.png

Gleno0h

@countjuh you are missing a ’

config['aircooudersaankoelen])"
config['aircooudersaankoelen'])"

countjuh

@gleno0h

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 0_1513185551613_195fc8a3-7ece-482d-bf2b-370a8e5aae77-image.png

countjuh

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.