Gitorious


	1		<html>
	2		<head>
	3		<title>digitalStrom - Demo - Apartment Hierarchie</title>
	4		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	5		<script src="js/model.js" language="JavaScript" type="text/javascript"></script>
	6		<link rel="stylesheet" type="text/css" href="main.css"/>
	7		<script type="text/javascript" language="JavaScript">
	8
	9		function loadApartmentStructure() {
	10		var list = new Element('ul');
	11		$("structureContainer").appendChild(list);
	12
	13		apartment = new Apartment();
	14		apartment.fetch();
	15
	16		apartment.zones.each(
	17		function (zone) {
	18		if (zone.id == 0) {
	19		return;
	20		}
	21		var item = new Element('li');
	22		list.appendChild(item);
	23		item.appendChild(new Element('p', {'title' : zone.id}).update(zone.name));
	24		var devicelist = new Element('ul');
	25		item.appendChild(devicelist);
	26
	27		zone.devices.each(
	28		function (device) {
	29		if (device.id == 0) {
	30		return;
	31		}
	32		devicelist.appendChild(new Element('li', {'title' : device.dsid}).update(device.name));
	33		}
	34		);
	35		}
	36		);
	37		}
	38
	39		function doOnload() {
	40		loadApartmentStructure();
	41		}
	42
	43		</script>
	44		</head>
	45		<body onload="doOnload()">
	46		<h1>digitalStrom - Demo - Apartment Hierarchie</h1>
	47		<div class="container" id="structureContainer" />
	48		</body>
	49		</html>


	1		<html>
	2		<head>
	3		<title>digitalStrom - Demo - Power Bar</title>
	4		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	5		<script src="js/model.js" language="JavaScript" type="text/javascript"></script>
	6		<link rel="stylesheet" type="text/css" href="main.css"/>
	7		<script type="text/javascript" language="JavaScript">
	8
	9		var MAXMILLIWATT = 150000;
	10
	11		function createPowerBar() {
	12		var p = Apartment.getPowerConsumption()
	13		var bar = "".times(Math.round(p 100.0 / MAXMILLIWATT));
	14		$("powerContainer").update(bar + " " + (p / 1000.0) + "W" );
	15		}
	16
	17		function doOnload() {
	18		new PeriodicalExecuter(createPowerBar, 1);
	19		createPowerBar();
	20		}
	21
	22		</script>
	23		</head>
	24		<body onload="doOnload()">
	25		<h1>digitalStrom - Demo - Power Bar</h1>
	26		<div class="container" id="powerContainer" />
	27		</body>
	28		</html>


	1		<html>
	2		<head>
	3		<title>digitalStrom - Demo - Zone brighter/darker</title>
	4		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	5		<script src="js/model.js" language="JavaScript" type="text/javascript"></script>
	6		<link rel="stylesheet" type="text/css" href="main.css"/>
	7		<script type="text/javascript" language="JavaScript">
	8
	9		function switchZone(_state) {
	10		if (_state) {
	11		console.log("enable");
	12		new HEvent('brighter', '.zone(4)').raise();
	13		} else {
	14		console.log("disable");
	15		new HEvent('darker', '.zone(4)').raise();
	16		}
	17		}
	18
	19		</script>
	20		</head>
	21		<body>
	22		<h1>digitalStrom - Demo - Zone on/off Switch</h1>
	23		<div class="container">
	24		<a href="javascript:switchZone(true)">Heller</a>
	25		<a href="javascript:switchZone(false)">Dunkler</a>
	26		</div>
	27		</body>
	28		</html>


	1		<html>
	2		<head>
	3		<title>digitalStrom - Demo - Zone on/off Switch</title>
	4		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	5		<script src="js/model.js" language="JavaScript" type="text/javascript"></script>
	6		<link rel="stylesheet" type="text/css" href="main.css"/>
	7		<script type="text/javascript" language="JavaScript">
	8
	9		function switchZone(_zone, _state) {
	10		if (_state) {
	11		console.log("enable");
	12		new Zone(_zone).turnOn(1);
	13		} else {
	14		console.log("disable");
	15		new Zone(_zone).turnOff(1);
	16		}
	17		}
	18
	19		</script>
	20		</head>
	21		<body>
	22		<h1>digitalStrom - Demo - Zone on/off Switch</h1>
	23		<div class="container">
	24		<a href="javascript:switchZone('4', true)">Ein</a>
	25		<a href="javascript:switchZone('4', false)">Aus</a>
	26		</div>
	27		</body>
	28		</html>


	1		<html>
	2		<head>
	3		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	4		<title>digitalStrom - Demo - Zone on/off Switch</title>
	5		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	6		<script src="js/model.js" language="JavaScript" type="text/javascript"></script>
	7		<link rel="stylesheet" type="text/css" href="main.css"/>
	8		<script type="text/javascript" language="JavaScript">
	9
	10		function switchZone(_state) {
	11		if (_state) {
	12		console.log("enable");
	13		new HEvent('turnOn', '.zone(4)').raise();
	14		} else {
	15		console.log("disable");
	16		new HEvent('turnOff', '.zone(4)').raise();
	17		}
	18		}
	19
	20		</script>
	21		</head>
	22		<body>
	23		<h1>digitalStrom - Demo - Zone on/off Switch</h1>
	24		<div class="container">
	25		<a href="javascript:switchZone(true)">Ein</a>
	26		<a href="javascript:switchZone(false)">Aus</a>
	27		</div>
	28		</body>
	29		</html>


	1		<html>
	2		<head>
	3		<title>Add Event - digitalStrom - Server</title>
	4		<script src="prototype.js" language="JavaScript" type="text/javascript"></script>
	5		<script type="text/javascript" language="JavaScript">
	6
	7		function turnOn(devid) {
	8		new Ajax.Request('/json/turnon',
	9		{
	10		method:'get',
	11		parameters: {device: devid},
	12		onComplete: function(transport, json) {
	13		doUpdate();
	14		}
	15		}
	16		);
	17		}
	18
	19		function turnOff(devid) {
	20		new Ajax.Request('/json/turnoff',
	21		{
	22		method:'get',
	23		parameters: {device: devid},
	24		onComplete: function(transport, json) {
	25		doUpdate();
	26		}
	27		}
	28		);
	29		}
	30
	31		function update(devices) {
	32		$('numDevs').innerHTML = devices.length;
	33		var devslist = "<ul>";
	34		for(i = 0; i < devices.length; i++) {
	35		var dev = devices[i];
	36		devslist += "<li>" + dev.name;
	37		if(dev.on) {
	38		devslist += "  On";
	39		} else {
	40		devslist += "  Off";
	41		}
	42		devslist += ' <a href="#" onclick="turnOn(' + dev.id + ')">Turn On</a>';
	43		devslist += ' <a href="#" onclick="turnOff(' + dev.id + ')">Turn Off</a>';
	44		devslist += "</li>";
	45
	46		}
	47		devslist += "</ul>";
	48		$('devList').innerHTML = devslist;
	49		}
	50
	51		function doUpdate() {
	52		new Ajax.Request(
	53		'/json/getdevices',
	54		{ method:'get',
	55		onComplete: function(transport, json) {
	56		update(transport.responseJSON.devices);
	57		}
	58		}
	59		);
	60		}
	61
	62		//doUpdate();
	63		</script>
	64		</head>
	65		<body>
	66		<form action="/addevent" method="post" accept-charset="utf-8">
	67		<input type="text" name="file" /><br/>
	68		<input type="text" name="schedule" /><br/>
	69		<input type="submit" />
	70		</form>
	71		</body>
	72		</html>


	1		body {
	2		font-family: Arial, Helvetica, sans-serif;
	3		background-color: #EAEAEA;
	4		padding: 10px;
	5		color: #666666;
	6		}
	7		#main {
	8		width: 995px;
	9		margin: auto;
	10		background-image: url(../images/main-background.png);
	11		}
	12		#header {
	13		height: 107px;
	14		margin: 0;
	15		background-image: url(../images/header.png);
	16		background-repeat: no-repeat;
	17		text-indent: -1000px;
	18		}
	19		#navigation {
	20		position: relative;
	21		border-top: 1px solid #CCCCCC;
	22		height: 39px;
	23		margin: 0 4px;
	24		background-image: url(../images/navigation-background.png);
	25		}
	26
	27		#navigation ul li {
	28		cursor: pointer;
	29		}
	30
	31		#viewMode {
	32		position: absolute;
	33		margin: 0;
	34		padding: 0;
	35		top: 6px;
	36		left: 10px;
	37		width: 90px;
	38		height: 26px;
	39		background-image: url(../images/view-mode-3d.png);
	40		color: transparent;
	41		font-size: 11px;
	42		}
	43		#threeD {
	44		position: absolute;
	45		left: 19px;
	46		top: 7px;
	47		}
	48		#map {
	49		position: absolute;
	50		left: 51px;
	51		top: 7px;
	52		}
	53
	54		#buildingSection {
	55		position: absolute;
	56		left: 130px;
	57		height: 100%;
	58		margin: 0;
	59		padding: 0;
	60		font-weight: bold;
	61		color: #9f9f9f;
	62		}
	63		#buildingSection li {
	64		float: left;
	65		padding: 0 15px;
	66		height: 100%;
	67		display: block;
	68		line-height: 39px;
	69		}
	70		#buildingSection li.selected {
	71		border-left: 1px solid #cccccc;
	72		border-right: 1px solid #cccccc;
	73		color: #666666;
	74		background-image: url(../images/navigation-background-selected.png);
	75		}
	76		#content {
	77		margin: 0 4px;
	78		}
	79		#building {
	80		float: left;
	81		height: 520px;
	82		width: 482px;
	83		margin: 0;
	84		padding: 5px;
	85		}
	86		#selectionArea {
	87		position:relative;
	88		margin: 70px auto 0 auto;
	89		width: 400px;
	90		}
	91		img {
	92		position: absolute;
	93		top: 0;
	94		left: 0;
	95		border: none;
	96		}
	97		area {
	98		cursor: pointer;
	99		}
	100		#firstFloorHover {
	101		visibility: hidden;
	102		}
	103		#charts {
	104		height: 520px;
	105		width: 482px;
	106		margin: 0 0 0 492px;
	107		padding: 5px;
	108		}
	109		#charts h2 {
	110		margin: auto;
	111		display:block;
	112		width: 450px;
	113		font-size: medium;
	114		vertical-align: middle;
	115		line-height: 49px;
	116		height: 49px;
	117		}
	118		#graphSelectionIcon {
	119		display: block;
	120		height: 49px;
	121		width: 53px;
	122		float: left;
	123		margin-right: 5px;
	124		background-image: url(../images/room-green.png);
	125		}
	126		#graphSelectionTitle {
	127		font-weight: normal;
	128		}
	129
	130		#graphSelector {
	131		width: 426px;
	132		height: 25px;
	133		display: block;
	134		font-size: 11px;
	135		font-weight: normal;
	136		text-align: bottom;
	137		vertical-align: bottom;
	138		margin: 0 auto;
	139		padding: 0;
	140		color: #868686;
	141		}
	142		#graphSelector li {
	143		display: block;
	144		float: left;
	145		cursor: pointer;
	146		width: 68px;
	147		height: 20px;
	148		line-height: 20px;
	149		text-align: center;
	150		list-style-type: none;
	151		margin: 0;
	152		margin-top: 4px;
	153		padding: 0;
	154		display: inline-block;
	155		vertical-align: middle;
	156		border: 1px solid #cccccc;
	157		border-bottom: none;
	158		background-image: url(../images/graph-selector-background.png);
	159
	160		}
	161		#graphSelector li.selected {
	162		height: 24px;
	163		line-height: 24px;
	164		margin: 0;
	165		color: black;
	166		background-image: url(../images/graph-selector-background-selected.png);
	167		}
	168		#graph {
	169		position: relative;
	170		margin: auto;
	171		width: 450px;
	172		height: 300px;
	173		background-image: url(../images/chart-background.png);
	174		}
	175		#curve {
	176		position: relative;
	177		top: 0;
	178		left: 0;
	179		width: 450px;
	180		height: 270px;
	181		background-image: url(../images/graph-background.png);
	182		}
	183		canvas {
	184		position: absolute;
	185		top: 0;
	186		left: 0;
	187		}
	188		.tickLabel {
	189		font-size: 10px;
	190		}
	191		#showRawXML {
	192		width: 120px;
	193		height: 100px;
	194		background-image: url(../images/show-xml.png);
	195		margin-left: 16px;
	196		margin-top: 2px;
	197		cursor: pointer;
	198		}
	199		#queueHeader {
	200		height: 36px;
	201		background-image: url(../images/queue-header.png);
	202		}
	203		#toggleQueue {
	204		font-size: small;
	205		float: left;
	206		margin-top: 10px;
	207		margin-left: 10px;
	208		font-weight: bold;
	209		cursor: pointer;
	210		padding-left: 21px;
	211		line-height: 20px;
	212		background-image: url(../images/button-open.png);
	213		background-repeat: no-repeat;
	214		}
	215		#queue {
	216		background-color: #f0f0f0;
	217		height: 95px;
	218		overflow: auto;
	219		display: none;
	220		}
	221		#queueContainer {
	222		width: 10px;
	223		}
	224		.xmlFragment {
	225		display: inline-block;
	226		width: 102px;
	227		padding: 0 10px 0 10px;
	228		height: 72px;
	229		font-size: x-small;
	230		overflow: hidden;
	231		background-image: url(../images/telegram-background.png);
	232		}
	233		.xmlFragment pre {
	234		width: 102px;
	235		height: 55px;
	236		margin: 7px 0 0 0;
	237		overflow: hidden;
	238		}
	239		#queueFooter {
	240		position: relative;
	241		height: 36px;
	242		background-image: url(../images/queue-footer.png);
	243		}
	244		#queueFooter p {
	245		margin: 0px;
	246		font-size: small;
	247		}
	248		#queueTitle {
	249		float: left;
	250		line-height: 36px;
	251		font-weight: bold;
	252		padding-left: 10px;
	253		}
	254		#queueStatus {
	255		font-weight: normal;
	256		}
	257		#connectionStatus {
	258		position: absolute;
	259		top: 0;
	260		right: 5px;
	261		height: 30px;
	262		width: 130px;
	263		font-weight: bold;
	264		}
	265
	266		#connectionStatusText {
	267		background-image: url(../images/button-connected.png);
	268		background-repeat: no-repeat;
	269		padding-left: 21px;
	270		cursor: pointer;
	271		}
	272		/*
	273		#connectionStatusIndicator {
	274		display: inline-block;
	275		width: 10px;
	276		height: 10px;
	277		}
	278		*/
	279		#footer {
	280		height: 12px;
	281		background-image: url(../images/footer.png);
	282		}
	283
	284		#scrollbar_container {
	285		position:relative;
	286		width:500px;
	287		}
	288
	289		#scrollbar_track {
	290		position:absolute;
	291		top:0;
	292		right:0;
	293		height:100%;
	294		width:10px;
	295		background-color:transparent;
	296		cursor:move;
	297		}
	298
	299		#scrollbar_handle {
	300		width:10px;
	301		background-color:#5c92e7;
	302		cursor:move;
	303		-moz-border-radius: 5px;
	304		-webkit-border-radius: 5px;
	305		opacity:0.9;
	306		-moz-opacity:0.9;
	307		}
	308
	309		#scrollbar_content {
	310		overflow:hidden;
	311		width:485px;
	312		height:250px;
	313		}
	314
	315		#rawDataOverlay {
	316		position: fixed;
	317		display: none;
	318		width: 100%;
	319		height: 100%;
	320		top: 0px;
	321		left: 0px;
	322		background-color: black;
	323		}
	324
	325		#rawDataOverlayBox {
	326		display: none;
	327		padding: 15px;
	328		width: 696px;
	329		height: 436px;
	330		position: absolute;
	331		left: 50%;
	332		top: 50px;
	333		margin-left: -348px;
	334		background-image: url(../images/overlay-box.png);
	335		}
	336
	337		#xml {
	338		overflow: auto;
	339		height: 390px;
	340		overflow: auto;
	341		border: 1px solid #cccccc;
	342		color: #5c5e51;
	343		background-color: #f9ffdd;
	344		padding: 0 10px;
	345		}
	346
	347		#hideXML {
	348		font-size: small;
	349		font-weight: bold;
	350		margin-bottom: 10px;
	351		cursor: pointer;
	352		padding-left: 21px;
	353		line-height: 20px;
	354		background-image: url(../images/button-close.png);
	355		background-repeat: no-repeat;
	356		width: 65px;
	357		}
	358
	359		#series li {
	360		cursor: pointer;
	361		}


	1		<html>
	2		<head>
	3		<title>digitalStrom - Server</title>
	4		<script type="text/javascript" language="JavaScript">
	5		function onModelLoaded() {
	6		}
	7		</script>
	8		<script src="../js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	9		<script src="../js/model.js" language="JavaScript" type="text/javascript"></script>
	10		<link rel="stylesheet" type="text/css" href="../main.css"/>
	11		<script type="text/javascript" language="JavaScript">
	12
	13		function ApartmentRenderer(into) {
	14		var self = this;
	15		self.apartment = new Apartment();
	16		self.apartment.fetch();
	17
	18		this.render = function() {
	19		var zonelist = "<ul>"
	20		self.apartment.zones.each(
	21		function(zone) {
	22		if(zone.id == 0) {
	23		devTotal = zone.devices.length;
	24		return;
	25		}
	26		zonelist += "<li>" + zone.name + ' [<a href="#" onclick="clearZone(\'' + zone.id + '\')">Clear Zone</a>]';
	27		}
	28		);
	29		zonelist += "</ul>";
	30		$(into).innerHTML = zonelist;
	31		}
	32		}
	33
	34		function SystemRenderer(into) {
	35		var self = this;
	36		self.system = new System();
	37
	38		this.render = function() {
	39		$(into).innerHTML = self.system.version();
	40		}
	41		}
	42
	43		var apt = null;
	44		var sysinfo = null;
	45
	46
	47		function clearZone(_zoneID) {
	48		DSS.sendSyncRequest("debug/resetZone", {zoneID: _zoneID});
	49		}
	50
	51		function doOnload() {
	52		apt = new ApartmentRenderer("bla");
	53		apt.render();
	54
	55		sysinfo = new SystemRenderer("sysinfo");
	56		sysinfo.render();
	57		}
	58		</script>
	59		</head>
	60		<body onload="doOnload()">
	61		<h1>Welcome to the dSS!</h1>
	62		<div class="container">
	63		<div class="item"><a href="browse/">Browse properties</a></div>
	64		<div class="item">Connected devices: <span id="numDevs">(...loading...)</span></div>
	65		</div>
	66		<div class="container">
	67		<div id="bla">(loading...)</div>
	68		</div>
	69		<div class="container" id="sysinfo">dss</div>
	70		</body>
	71		</html>


	1		<html>
	2		<head>
	3		<title>digitalStrom - Server</title>
	4		<script type="text/javascript" language="JavaScript">
	5		function onModelLoaded() {
	6		}
	7		</script>
	8		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	9		<script src="js/switch.js" language="JavaScript" type="text/javascript"></script>
	10		<script src="js/model.js" language="JavaScript" type="text/javascript"></script>
	11		<link rel="stylesheet" type="text/css" href="main.css"/>
	12		<script type="text/javascript" language="JavaScript">
	13
	14		function ApartmentRenderer(into) {
	15		var self = this;
	16		self.apartment = new Apartment();
	17		self.apartment.fetch();
	18
	19		this.render = function() {
	20		var iSwitch = 0;
	21		var switchIDs = [];
	22		var devNum = 0;
	23		var devTotal = 0;
	24
	25		var zonelist = "<ul>"
	26		self.apartment.zones.each(
	27		function(zone) {
	28		if(zone.id == 0) {
	29		devTotal = zone.devices.length;
	30		return;
	31		}
	32		if(zone.name == "") {
	33		zone.name = "Zone " + zone.id;
	34		}
	35		zonelist += "<li>" + zone.name + ' [<a href="#" onclick="turnOnZone(\'' + zone.id + '\')">Turn On</a>';
	36		zonelist += ' \| <a href="#" onclick="turnOffZone(\'' + zone.id + '\')">Turn Off</a>]</li><ul>';
	37		zone.devices.each(function(device) {
	38		if(device.isPresent) {
	39		zonelist += '<li><p title="fid:' + device.fid + ' circuitID: ' + device.circuitID + ' busID: ' + device.busID + '">' + device.name;
	40		devNum++;
	41		if(!device.isSwitch()) {
	42		if(device.isOn()) {
	43		zonelist += ' <span id="state_' + device.dsid + '"><b>On</b></span> ';
	44		} else {
	45		zonelist += ' <span id="state_' + device.dsid + '"><b>Off</b></span> ';
	46		}
	47		zonelist += '[<a href="#" onclick="turnOn(\'' + device.dsid + '\')">Turn On</a>';
	48		zonelist += ' \| <a href="#" onclick="turnOff(\'' + device.dsid + '\')">Turn Off</a>] ' + device.dsid;
	49		} else {
	50		zonelist += '<div id="switch_' + device.dsid + '"/>';
	51		switchIDs[switchIDs.length] = { id: device.dsid, zoneID: zone.id };
	52		}
	53
	54		zonelist += "</p></li>";
	55		}
	56		});
	57		zonelist += "</ul>";
	58		}
	59		);
	60		zonelist += "</ul>";
	61		$(into).innerHTML = zonelist;
	62
	63
	64		switchIDs.each(function(switchID) {
	65		var sw = new Switch('switch_' + switchID.id, switchID.id, switchID.zoneID, 1 );
	66		});
	67		var hiddenDevs = devTotal - devNum;
	68		if(hiddenDevs > 0) {
	69		$('numDevs').innerHTML = devTotal + ' (' + hiddenDevs + ' hidden)';
	70		} else {
	71		$('numDevs').innerHTML = devTotal;
	72		}
	73		}
	74		}
	75
	76		function SystemRenderer(into) {
	77		var self = this;
	78		self.system = new System();
	79
	80		this.render = function() {
	81		$(into).innerHTML = self.system.version();
	82		}
	83		}
	84
	85		var apt = null;
	86		var sysinfo = null;
	87
	88
	89		function turnOn(devid) {
	90		var dev = new Device(devid);
	91		dev.turnOn();
	92		setTimeout(function() { updateDevice(devid); }, 100);
	93		}
	94
	95		function turnOff(devid) {
	96		var dev = new Device(devid);
	97		dev.turnOff();
	98		setTimeout(function() { updateDevice(devid); }, 100);
	99		}
	100
	101		function turnOnZone(zoneid) {
	102		var zone = new Zone(zoneid);
	103		zone.turnOn();
	104		setTimeout(function() { updateZone(zoneid); }, 100);
	105		}
	106
	107		function turnOffZone(zoneid) {
	108		var zone = new Zone(zoneid);
	109		zone.turnOff();
	110		setTimeout(function() { updateZone(zoneid); }, 100);
	111		}
	112
	113		function update(_setSpec) {
	114		var set = new Set(_setSpec);
	115		var devs = set.getDevices();
	116		devs.each(function(device) {
	117		if(device.isPresent) {
	118		var htmlString;
	119		if(device.on) {
	120		htmlString = '<b>On</b>';
	121		} else {
	122		htmlString = '<b>Off</b>';
	123		}
	124		$('state_' + device.id).innerHTML = htmlString;
	125		}
	126		});
	127		}
	128
	129		function updateZone(zoneid) {
	130		update(".zone(" + zoneid + ")");
	131		}
	132
	133		function updateDevice(dsid) {
	134		update(".dsid(" + dsid + ")");
	135		}
	136
	137		function doOnload() {
	138		apt = new ApartmentRenderer("bla");
	139		apt.render();
	140
	141		sysinfo = new SystemRenderer("sysinfo");
	142		sysinfo.render();
	143		}
	144		</script>
	145		</head>
	146		<body onload="doOnload()">
	147		<h1>Welcome to the dSS!</h1>
	148		<div class="container">
	149		<div class="item"><a href="browse/">Browse properties</a></div>
	150		<div class="item">Connected devices: <span id="numDevs">(...loading...)</span></div>
	151		</div>
	152		<div class="container">
	153		<div id="bla">(loading...)</div>
	154		</div>
	155		<div class="container" id="sysinfo">dss</div>
	156		</body>
	157		</html>

Binary files differ


	1		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	2		<html>
	3		<head>
	4		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
	5		<link rel="stylesheet" type="text/css" href="js/lib/extjs/resources/css/ext-all.css" />
	6		<link rel="stylesheet" type="text/css" href="js/lib/extjs/resources/css/ds_gui.css" />
	7		<!-- ExtJS libraries -->
	8		<script type="text/javascript" src="js/lib/extjs/adapter/ext/ext-base-debug.js"></script>
	9		<script type="text/javascript" src="js/lib/extjs/ext-all-debug.js"></script>
	10		<script type="text/javascript" src="js/lib/jsgettext/Gettext.js"></script>
	11		<script type="text/javascript" src="js/lib/LC_MESSAGES/de_DE.json"></script>
	12
	13		<script type="text/javascript" src="js/dss-overview-page.js"></script>
	14
	15		<title>digitalSTROM Server Overview</title>
	16		</head>
	17		<body>
	18		<div id="start">loading ...</div>
	19		</body>
	20		</html>


	1		/**
	2		* JavaScript Metering Visualisation (creator Matias E. Fernandez @ futureLAB)
	3		*
	4		* This script uses jQuery ( http://www.jquery.com/ )
	5		* along with flot ( http://code.google.com/p/flot/ )
	6		*
	7		*/
	8		var resolution = "seconds";
	9		var DSGraph = Class.create({
	10		initialize: function(adSMID) {
	11		this.dSMID = adSMID;
	12		this.timer = undefined;
	13		this.plot = undefined;
	14		this.updatePlot = true;
	15		this.requestID = 1;
	16		this.currentResolution = "seconds";
	17		this.reloadInterval = 2000;
	18		this.baseURL = "metering/";
	19		this.plotOptions = {
	20		lines: { show: true, lineWidth: 3 },
	21		grid: { hoverable: false, clickable: false, borderWidth: 0 },
	22		yaxis: {
	23		labelWidth: 40,
	24		min: 0,
	25		max: 100000,
	26		tickFormatter: this.valueFormatterWatt
	27		},
	28		xaxis: {
	29		mode: "time",
	30		minTickSize: [1, "minute"],
	31		tickFormatter: this.timeTickFormatter
	32		}
	33		};
	34		this.resolutions = {
	35		five_minutes: "seconds",
	36		one_hour: "10seconds",
	37		one_day: "5minutely",
	38		one_week: "halfhourly",
	39		one_month: "2hourly",
	40		one_year: "daily"
	41		};
	42		},
	43
	44		xml2Str: function(xmlNode) {
	45		try {
	46		// Gecko-based browsers, Safari, Opera.
	47		return (new XMLSerializer()).serializeToString(xmlNode);
	48		} catch (e) {
	49		try {
	50		// Internet Explorer.
	51		return xmlNode.xml;
	52		} catch (ee) {
	53		//Other browsers without XML Serializer
	54		alert('XMLSerializer not supported');
	55		}
	56		}
	57		return false;
	58		},
	59
	60		timeTickFormatter: function(val, axis) {
	61		var d = new Date(val);
	62		var tick = "";
	63		switch(resolution) {
	64		case "seconds":
	65		case "10seconds":
	66		case "5minutely":
	67		tick = tick + ((d.getUTCHours() < 8) ? ( "0" + (d.getUTCHours()+2) ) : (d.getUTCHours()+2) );
	68		tick = tick + ":";
	69		tick = tick + ((d.getUTCMinutes() < 10) ? ( "0" + d.getUTCMinutes() ) : d.getUTCMinutes() );
	70		tick = tick + ":";
	71		tick = tick + ((d.getUTCSeconds() < 10) ? ( "0" + d.getUTCSeconds() ) : d.getUTCSeconds() );
	72		break;
	73		default:
	74		tick = d.getUTCFullYear();
	75		tick = tick + "-";
	76		tick = tick + ((d.getUTCMonth() < 10 ) ? ("0" + d.getUTCMonth() ) : d.getUTCMonth() );
	77		tick = tick + "-";
	78		tick = tick + ((d.getUTCDate() < 10) ? ("0" + d.getUTCDate() ) : d.getUTCDate() );
	79		}
	80		return tick;
	81		},
	82
	83		valueFormatterWatt: function(val, axis) {
	84		// val is in mW
	85		return (val/1000).toFixed(axis.tickDecimals) + " W";
	86		},
	87
	88		parseXML: function(xml) {
	89		var values = jQuery(xml).find('value[timestamp]').get();
	90		var rawData = [];
	91		for(var i = 0; i < values.length; i++) {
	92		var dateAttribute = values[i].getAttribute('timestamp');
	93		var d_date = dateAttribute.slice(0, dateAttribute.indexOf(' ')).split('-');
	94		var d_time = dateAttribute.slice(dateAttribute.indexOf(' ')+1).split(':');
	95		var date = Date.UTC(d_date[0],d_date[1],d_date[2],d_time[0],d_time[1],d_time[2]);
	96		var value = parseFloat( jQuery(values[i]).children("value").text() );
	97		rawData.push([date, value]);
	98		}
	99		rawData.pop();
	100		return rawData;
	101		},
	102
	103		reloadPlot: function() {
	104		var currentDate = new Date();
	105		var self = this;
	106		this.requestID += 1;
	107		var requestID = this.requestID;
	108		jQuery.ajax({
	109		type: "GET",
	110		url: self.baseURL + self.dSMID + "_consumption_" + self.currentResolution + ".xml?date=" + currentDate.getTime(),
	111		dataType: "xml",
	112		success: function(xml) {
	113		var xmlString = self.xml2Str(xml).replace(/</ig, "<").replace(/>/ig, ">");
	114		jQuery('#xml').html('<pre>' + xmlString + '</pre>');
	115
	116		var rawData = self.parseXML(xml);
	117		self.redrawPlot(rawData);
	118		self.updateConsumptionIndicator(rawData);
	119		if(self.updatePlot && (requestID == self.requestID)) {
	120		self.timer = setTimeout(function() {
	121		self.reloadPlot(); }, self.reloadInterval);
	122		}
	123		},
	124		error: function(XMLHttpRequest, textStatus, errorThrown) {
	125		alert("could not load device data: " + textStatus + "\n" + XMLHttpRequest.responseText);
	126		self.toggleUpdates();
	127		}
	128		});
	129		},
	130
	131		updateConsumptionIndicator: function(rawData) {
	132		var lastVal = rawData[rawData.length-1];
	133		if(lastVal !== undefined) {
	134		lastVal = lastVal[1];
	135		if(this.dSMID == "metering") {
	136		if(lastVal > 70000*6) {
	137		jQuery("#graphSelectionIcon").css({backgroundImage: "url(images/house-red.png)"});
	138		} else if(lastVal > 30000*6) {
	139		jQuery("#graphSelectionIcon").css({backgroundImage: "url(images/house-yellow.png)"});
	140		} else {
	141		jQuery("#graphSelectionIcon").css({backgroundImage: "url(images/house-green.png)"});
	142		}
	143		} else {
	144		if(lastVal > 70000) {
	145		jQuery("#graphSelectionIcon").css({backgroundImage: "url(images/room-red.png)"});
	146		} else if(lastVal > 30000) {
	147		jQuery("#graphSelectionIcon").css({backgroundImage: "url(images/room-yellow.png)"});
	148		} else {
	149		jQuery("#graphSelectionIcon").css({backgroundImage: "url(images/room-green.png)"});
	150		}
	151		}
	152
	153		}
	154		},
	155
	156		setResolution: function(aResolution) {
	157		this.currentResolution = this.resolutions[aResolution];
	158		resolution = this.currentResolution;
	159		if(this.updatePlot) {
	160		clearTimeout(this.timer);
	161		}
	162		this.reloadPlot();
	163		},
	164
	165		setDSM: function(adSMID) {
	166		this.dSMID = adSMID;
	167		if(this.dSMID == "metering") {
	168		this.plotOptions.yaxis.max = 6*100000;
	169		this.plot = jQuery.plot( jQuery("#curve"), [], this.plotOptions );
	170		} else {
	171		this.plotOptions.yaxis.max = 100000;
	172		this.plot = jQuery.plot( jQuery("#curve"), [], this.plotOptions );
	173		}
	174		if(this.updatePlot) {
	175		clearTimeout(this.timer);
	176		}
	177		this.reloadPlot();
	178		},
	179
	180		toggleUpdates: function() {
	181		if(this.updatePlot) {
	182		clearTimeout(this.timer);
	183		jQuery("#updatePlot").attr("checked", "");
	184		this.updatePlot = false;
	185		} else {
	186		this.updatePlot = true;
	187		jQuery("#updatePlot").attr("checked", "checked");
	188		this.reloadPlot();
	189		}
	190		},
	191
	192		initPlots: function() {
	193		this.plot = jQuery.plot( jQuery("#curve"), [], this.plotOptions );
	194		},
	195
	196		redrawPlot: function(data) {
	197		this.plot.setData([{data: data, color: "white"}]);
	198		this.plot.setupGrid();
	199		this.plot.draw();
	200		},
	201
	202		start: function() {
	203		this.initPlots();
	204		this.reloadPlot();
	205		},
	206
	207		stop: function() {
	208		this.updatePlot = false;
	209		clearTimeout(this.timer);
	210		}
	211		});


	1		var DSMainMeterReport = Class.create({
	2		initialize: function() {
	3		this.receiverTimer = undefined;
	4		this.senderTimer = undefined;
	5		this.connection = false;
	6		this.sendData = true;
	7		this.receiveInterval = 5000;
	8		this.sendInterval = 200;
	9		this.connenctionStatusID = "#connectionStatusText"
	10		this.connectionButtonID = "#connectionButton";
	11		this.clearButtonID = "#clearQueueButton";
	12		this.lastReceived = 0;
	13		this.sending = false;
	14		},
	15
	16		xml2Str: function(xmlNode) {
	17		try {
	18		// Gecko-based browsers, Safari, Opera.
	19		return (new XMLSerializer()).serializeToString(xmlNode);
	20		}
	21		catch (e) {
	22		try {
	23		// Internet Explorer.
	24		return xmlNode.xml;
	25		}
	26		catch (e) {
	27		//Other browsers without XML Serializer
	28		alert('XMLSerializer not supported');
	29		}
	30		}
	31		return false;
	32		},
	33
	34
	35		startSender: function() {
	36		if(this.connection) {
	37		var self = this;
	38		this.senderTimer = setTimeout(function() {
	39		self.sendValue();
	40		}, this.sendInterval);
	41		}
	42		},
	43
	44		stopSender: function() {
	45		clearTimeout(this.senderTimer);
	46		},
	47
	48		updateQueueLength: function() {
	49		var length = jQuery(".xmlFragment").length + (this.sending ? -1 : 0);
	50		jQuery("#queueLength").text(length >= 0 ? length : 0);
	51		},
	52
	53		sendValue: function() {
	54		var value = jQuery("#queueContainer > div:last");
	55		var self = this;
	56		if(value.length > 0) {
	57		this.sending = true;
	58		value.fadeTo(300, 0, function() {
	59		self.updateQueueLength();
	60		self.sending = false;
	61		jQuery(this).remove();
	62		var width = jQuery("#queueContainer").width() - 122;
	63		jQuery("#queueContainer").width(width);
	64		self.startSender();
	65		});
	66		} else {
	67		this.startSender();
	68		}
	69		},
	70
	71		value2html: function(value) {
	72		var xmlString = this.xml2Str(value.xml).replace(/>[\n\t\s]*<(?!\/value)/ig, ">\n\t<")
	73		.replace(/>[\n\t\s]*<(?=\/value)/ig, ">\n<")
	74		.replace(/</ig, "<")
	75		.replace(/>/ig, ">");;
	76		return ("<div class=\"xmlFragment\" id=" + value.time + "><pre>" + xmlString + "</pre></div>");
	77		},
	78
	79		loadNewValues: function(values) {
	80		var self = this;
	81		jQuery(values).each(function() {
	82		jQuery("#queueContainer").append(self.value2html(this));
	83		var width = jQuery("#queueContainer").width() + 122;
	84		jQuery("#queueContainer").width(width);
	85		});
	86		this.updateQueueLength();
	87		},
	88
	89		attribute2Time: function(attribute) {
	90		var d_date = attribute.slice(0, attribute.indexOf(' ')).split('-');
	91		var d_time = attribute.slice(attribute.indexOf(' ')+1).split(':');
	92		return (Date.UTC(d_date[0],d_date[1],d_date[2],d_time[0],d_time[1],d_time[2]) * 1);
	93		},
	94
	95		parseXML: function(xml) {
	96		var data = [];
	97		var self = this;
	98		jQuery(xml).find('values > value').each(function() {
	99		data.push({
	100		time: self.attribute2Time(this.getAttribute('timestamp')),
	101		value: jQuery(this).find('> value').text() * 1,
	102		xml: this
	103		})
	104		});
	105		return data;
	106		},
	107
	108		fetchXML: function(dismiss) {
	109		var currentDate = new Date();
	110		var self = this;
	111		jQuery.ajax({
	112		type: "GET",
	113		url: "metering/metering_consumption_seconds.xml?date=" + currentDate.getTime(),
	114		dataType: "xml",
	115		success: function(xml) {
	116		var values = self.parseXML(xml);
	117		var newValues = [];
	118		jQuery(values).each(function() {
	119		if(this.time > self.lastReceived) {
	120		self.lastReceived = this.time;
	121		newValues.push(this);
	122		}
	123		});
	124		if(dismiss) {
	125
	126		}
	127		// ignore the last element, because it is likely that the value changes
	128		newValues.pop();
	129		if(newValues.length > 0) {
	130		lastReceived = jQuery(newValues).get(newValues.length - 1).time
	131		if(!dismiss) {
	132		self.loadNewValues(newValues);
	133		}
	134		}
	135		setTimeout(function() {
	136		self.fetchXML(false);
	137		}, self.receiveInterval);
	138		}
	139		});
	140		},
	141
	142		toggleConnection: function() {
	143		if(this.connection == true) {
	144		connection = false;
	145		this.jQuery(this.connectionButtonID).val("Connect");
	146		jQuery(this.connenctionStatusID).text("disconnected");
	147		jQuery(this.connenctionStatusID).animate({
	148		color: "red"
	149		}, 500);
	150		this.stopSender();
	151		} else {
	152		this.connection = true;
	153		jQuery(this.connectionButtonID).val("Disconnect");
	154		jQuery(this.connenctionStatusID).text("connected");
	155		jQuery(this.connenctionStatusID).animate({
	156		color: "green"
	157		}, 500);
	158		this.sendValue();
	159		}
	160		},
	161
	162		stop: function() {
	163		this.connection = false;
	164		this.stopSender();
	165		},
	166
	167		restart: function() {
	168		this.connection = true;
	169		this.sendValue();
	170		},
	171
	172		start: function() {
	173		this.fetchXML(true);
	174		this.restart();
	175		}
	176		});


	1		var DSButton = Class.create({
	2		initialize: function(aButtonNumber, aSwitch) {
	3		this.buttonNumber = aButtonNumber;
	4		this.parentSwitch = aSwitch;
	5		this.id = "switch_" + this.parentSwitch.ID + "_button_" + this.buttonNumber;
	6
	7		var self = this;
	8		var button = jQuery("#" + this.id);
	9		button.mousedown(function() {
	10		self.parentSwitch.mouseDown(self.buttonNumber);
	11		}).mouseout(function() {
	12		self.parentSwitch.mouseUp(self.buttonNumber);
	13		}).mouseup(function() {
	14		self.parentSwitch.mouseOut(self.buttonNumber);
	15		});
	16		},
	17
	18		setColor: function(color) {
	19		jQuery("#" + this.id).css({ backgroundColor: color });
	20		}
	21		});
	22
	23		var DSSwitch = Class.create({
	24		initialize: function(targetID, ID, zoneID, groupID) {
	25		this.buttons = [];
	26		this.ID = ID;
	27		this.groupID = 1;
	28		this.zoneID = zoneID;
	29		this.timer = undefined;
	30		this.touch = false;
	31		jQuery('#switch_' + this.ID).append(this.createTable());
	32		this.generateButtons(9);
	33		},
	34
	35		generateButtons: function(numButtons) {
	36		for(var iButton = 0; iButton < numButtons; iButton++) {
	37		this.buttons[iButton] = new DSButton(iButton+1, this);
	38		}
	39		},
	40
	41		mouseDown: function(buttonNumber) {
	42		console.log(buttonNumber + " went down");
	43		var self = this;
	44		this.timer = setTimeout(function() {
	45		self.sendTouch(buttonNumber);
	46		}, 400);
	47		},
	48
	49		mouseUp: function(buttonNumber) {
	50		console.log(buttonNumber + " went up");
	51		if(this.timer) {
	52		console.log("timer is set");
	53		clearTimeout(this.timer);
	54		if(this.touch == true) {
	55		console.log("touch is true");
	56		this.touch = false;
	57		this.sendTouchEnd(buttonNumber);
	58		} else {
	59		this.sendKlick(buttonNumber);
	60		}
	61		}
	62		},
	63
	64		mouseOut: function(buttonNumber) {
	65		this.mouseUp(buttonNumber);
	66		},
	67
	68		sendKlick: function(buttonNumber) {
	69		console.log("klick: " + buttonNumber);
	70		},
	71
	72		sendTouch: function(buttonNumber) {
	73		console.log("touch: " + buttonNumber);
	74		this.touch = true;
	75		var self = this;
	76		var request = new Ajax.Request(
	77		'/json/sim/switch/pressed',
	78		{
	79		method:'get',
	80		parameters: {
	81		buttonnr: buttonNumber,
	82		zoneID: this.zoneID,
	83		groupID: this.groupID
	84		}
	85		}
	86		);
	87		this.timer = setTimeout(function() {
	88		self.sendTouch(buttonNumber);
	89		}, 200);
	90		},
	91
	92		sendTouchEnd: function(buttonNumber) {
	93		console.log("touch end: " + buttonNumber);
	94		},
	95
	96		setPreviousGroup: function() {
	97		var prevGroupID = this.groupID - 1;
	98		this.setGroup( (prevGroupID < 1) ? 9 : prevGroupID );
	99		},
	100
	101		setNextGroup: function() {
	102		var nextGroupID = this.groupID + 1;
	103		this.setGroup( (nextGroupID > 9) ? 1 : nextGroupID );
	104		},
	105
	106		setGroup: function(aGroupID) {
	107		this.groupID = aGroupID;
	108
	109		var newColor;
	110		switch(this.groupID) {
	111		case 1:
	112		newColor = "#FFFF00"; /* yellow */
	113		break;
	114		case 2:
	115		newColor = "#AAAAAA"; /* gray */
	116		break;
	117		case 3:
	118		newColor = "#0000FF"; /* blue */
	119		break;
	120		case 4:
	121		newColor = "#00FFFF"; /* cyan */
	122		break;
	123		case 5:
	124		newColor = "#FF0000"; /* red */
	125		break;
	126		case 6:
	127		newColor = "#FF00FF"; /* magenta */
	128		break;
	129		case 7:
	130		newColor = "#00FF00"; /* green */
	131		break;
	132		case 8:
	133		newColor = "#000000"; /* black */
	134		break;
	135		case 9:
	136		newColor = "#FFFFFF"; /* white */
	137		break;
	138		default:
	139		newColor = "#ff6600"; // orange is for unknown / broadcast groups
	140		}
	141		this.buttons[4].setColor(newColor);
	142		},
	143
	144		reportTouch: function(buttonID) {
	145		var request = new Ajax.Request(
	146		'/json/sim/switch/pressed',
	147		{
	148		method:'get',
	149		parameters: {
	150		buttonnr: buttonID,
	151		zoneID: this.zoneID,
	152		groupID: this.groupID
	153		}
	154		}
	155		);
	156		if(buttonID == 1) {
	157		self.setGroup(1); // light
	158		} else if(buttonID == 3) {
	159		self.setGroup(3); // climate
	160		} else if(buttonID == 7) {
	161		var nextGroup = (self.groupID - 1);
	162		if(nextGroup === 0) {
	163		nextGroup = 9;
	164		}
	165		self.setGroup(nextGroup);
	166		} else if(buttonID == 9) {
	167		var nextGroup = (self.groupID + 1);
	168		if(nextGroup == 10) {
	169		nextGroup = 1;
	170		}
	171		self.setGroup(nextGroup);
	172		}
	173		},
	174
	175		createTable: function() {
	176		console.log("creating table");
	177		var self = this;
	178		function createTableRow(startIdx, numCol, widths, height) {
	179		var result = '<tr>';
	180		for(var iCol = 0; iCol < numCol; iCol++) {
	181		var btnIdx = startIdx + iCol;
	182		result += "<td id=\"switch_" + self.ID + "_button_" + (startIdx + iCol) + "\" class=\"switchButton switchButton" + (startIdx + iCol) + "\"\/>";
	183		}
	184		result += '</tr>';
	185		return result;
	186		};
	187
	188		var result = '<table>';
	189		result += createTableRow(1, 3, [20, 70, 20], 20);
	190		result += createTableRow(4, 3, [20, 70, 20], 70);
	191		result += createTableRow(7, 3, [20, 70, 20], 20);
	192		result += '</table>';
	193		return result;
	194		}
	195		});


	1		Ext.DataView.DragSelector = function(cfg){
	2		cfg = cfg \|\| {};
	3		var view, proxy, tracker;
	4		var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
	5		var dragSafe = cfg.dragSafe === true;
	6
	7		this.init = function(dataView){
	8		view = dataView;
	9		view.on('render', onRender);
	10		};
	11
	12		function fillRegions(){
	13		rs = [];
	14		view.all.each(function(el){
	15		rs[rs.length] = el.getRegion();
	16		});
	17		bodyRegion = view.el.getRegion();
	18		}
	19		function cancelClick(){
	20		return false;
	21		}
	22
	23		function onStart(e){
	24		//view.on('containerclick', cancelClick, view, {single:true});
	25
	26		if(!proxy){
	27		proxy = view.el.createChild({cls:'x-view-selector'});
	28		} else {
	29		proxy.setDisplayed('block');
	30		}
	31		fillRegions();
	32		view.clearSelections();
	33		}
	34
	35		function onDrag(e){
	36		var startXY = tracker.startXY;
	37		var xy = tracker.getXY();
	38		var x = Math.min(startXY[0], xy[0]);
	39		var y = Math.min(startXY[1], xy[1]);
	40		var w = Math.abs(startXY[0] - xy[0]);
	41		var h = Math.abs(startXY[1] - xy[1]);
	42		dragRegion.left = x;
	43		dragRegion.top = y;
	44		dragRegion.right = x+w;
	45		dragRegion.bottom = y+h;
	46		dragRegion.constrainTo(bodyRegion);
	47		proxy.setRegion(dragRegion);
	48		for(var i = 0, len = rs.length; i < len; i++){
	49		var r = rs[i], sel = dragRegion.intersect(r);
	50		if(sel && !r.selected){
	51		r.selected = true;
	52		view.select(i, true);
	53		} else if(!sel && r.selected) {
	54		r.selected = false;
	55		view.deselect(i);
	56		}
	57		}
	58		}
	59
	60		function onEnd(e){
	61		if (!Ext.isIE) {
	62		view.un('containerclick', cancelClick, view);
	63		}
	64		if(proxy){
	65		proxy.setDisplayed(false);
	66		}
	67		}
	68
	69		function onRender(view){
	70		tracker = new Ext.dd.DragTracker();//{preventDefault: true});
	71		tracker.on({
	72		'dragstart': {
	73		fn: onStart,
	74		scope: this
	75		},
	76		'drag': {
	77		fn: onDrag,
	78		scope: this
	79		},
	80		'dragend': {
	81		fn: onEnd,
	82		scope:this
	83		}
	84		});
	85		tracker.initEl(view.el);
	86		}
	87		};


	1		var height = 300;
	2		var initialized = false;
	3
	4		function start() {
	5		if(!initialized) {
	6		$('graph').jg = new jsGraphics($('graph'));
	7		initialized = true;
	8		}
	9		var dummy = new Date();
	10		fetchXML('metering_xml', 'metering/metering.xml?time=' + dummy);
	11		initGraph('graph' , 'metering/0000000000000000ffc00010_consumption_seconds.xml?time=' + dummy);
	12		initGraph('graph2' , 'metering/metering.xml?time=' + dummy);
	13		setTimeout('start()', 5000);
	14		}
	15
	16		function fetchXML(drawWhere, url) {
	17		new Ajax.Request(url, {
	18		method: 'get',
	19		onSuccess: function(transport) {
	20		var xmlString = transport.responseText;
	21		var re = new RegExp('<', "g");
	22		xmlString = xmlString.replace(re, '<');
	23		re = new RegExp('>', "g");
	24		xmlString = xmlString.replace(re, '>');
	25		$(drawWhere).innerHTML = '<pre>' + xmlString + '</pre>';
	26		}
	27		});
	28		}
	29
	30		function initGraph(drawWhere, url) {
	31		new Ajax.Request(url, {
	32		method: 'get',
	33		onSuccess: function(transport) {
	34		var domObj = transport.responseXML;
	35		var children = domObj.childNodes;
	36		var valuesElement = children[1].childNodes[3];
	37		var values = valuesElement.childNodes;
	38
	39
	40		var xPoints = new Array();
	41		var yPoints = new Array();
	42		var xPosition = 0;
	43		for (var j = 0 ; j < values.length; j++ ) {
	44		var theValueElement = values[j];
	45		if(theValueElement.nodeName == 'value') {
	46		for(var k = 0; k < theValueElement.childNodes.length; k++) {
	47		if(theValueElement.childNodes[k].nodeName == 'value') {
	48		xPoints.push(xPosition * 1);
	49		xPosition++;
	50		yPoints.push(height - (theValueElement.childNodes[k].textContent * 0.01));
	51		}
	52		}
	53		}
	54		}
	55		//console.log('will draw to ' + drawWhere);
	56		// var jg = //$(drawWhere).jg;
	57		$(drawWhere).innerHTML = '';
	58
	59		var jg = new jsGraphics($(drawWhere));
	60		jg.clear();
	61		jg.setColor("#ff0000");
	62		//console.log('will draw : ' + xPoints + ' y : ' + yPoints);
	63		jg.drawPolyline(xPoints,yPoints);
	64		jg.paint();
	65		}
	66		});
	67		}
	68
	69


	1		/**
	2		* JavaScript Metering Visualisation (creator Matias E. Fernandez @ futureLAB)
	3		*
	4		* This script uses jQuery ( http://www.jquery.com/ )
	5		* along with flot ( http://code.google.com/p/flot/ )
	6		*
	7		*/
	8
	9		jQuery.noConflict();
	10
	11		var devicePlot, devicePlotTimer, meteringPlot, meteringPlotTimer;
	12		var updateDevicePlot = false, updateMeteringPlot = false;
	13		var reloadInterval = 1000;
	14
	15		var plotOptions = {
	16		lines: { show: true },
	17		points: { show: false },
	18		grid: { hoverable: false, clickable: false },
	19		color: "blue",
	20		yaxis: {
	21		labelWidth: 65,
	22		min: 0,
	23		tickFormatter: valueFormatterWatt
	24		},
	25		xaxis: {
	26		mode: "time",
	27		minTickSize: [1, "minute"],
	28		tickFormatter: timeTickFormatter
	29		}
	30		};
	31
	32		function timeTickFormatter(val, axis) {
	33		var d = new Date(val);
	34		var tick = "";
	35		tick = d.getUTCFullYear();
	36		tick = tick + "-";
	37		tick = tick + ((d.getUTCMonth() < 10 ) ? ("0" + d.getUTCMonth() ) : d.getUTCMonth() );
	38		tick = tick + "-";
	39		tick = tick + ((d.getUTCDate() < 10) ? ("0" + d.getUTCDate() ) : d.getUTCDate() );
	40		tick = tick + "<br />";
	41		tick = tick + ((d.getUTCHours() < 10) ? ( "0" + d.getUTCHours() ) : d.getUTCHours() );
	42		tick = tick + ":";
	43		tick = tick + ((d.getUTCMinutes() < 10) ? ( "0" + d.getUTCMinutes() ) : d.getUTCMinutes() );
	44		tick = tick + ":";
	45		tick = tick + ((d.getUTCSeconds() < 10) ? ( "0" + d.getUTCSeconds() ) : d.getUTCSeconds() );
	46		return tick;
	47		}
	48
	49		function valueFormatterWatt(val, axis) {
	50		// val is in mW
	51		return (val/1000).toFixed(axis.tickDecimals) + " W";
	52		}
	53
	54
	55		function xml2Str(xmlNode) {
	56		try {
	57		// Gecko-based browsers, Safari, Opera.
	58		return (new XMLSerializer()).serializeToString(xmlNode);
	59		} catch (e) {
	60		try {
	61		// Internet Explorer.
	62		return xmlNode.xml;
	63		} catch (e) {
	64		//Other browsers without XML Serializer
	65		alert('XMLSerializer not supported');
	66		}
	67		}
	68		return false;
	69		}
	70
	71		function parseXML(xml) {
	72		var values = jQuery(xml).find('values').get(0);
	73		values = jQuery(values).find('> value').get();
	74		var rawData = new Array();
	75		var start = values.length - 100;
	76		start = (start < 0) ? 0 : start;
	77		for(var i = start; i < values.length; i++) {
	78		var dateAttribute = values[i].getAttribute('timestamp');
	79		var d_date = dateAttribute.slice(0, dateAttribute.indexOf(' ')).split('-');
	80		var d_time = dateAttribute.slice(dateAttribute.indexOf(' ')+1).split(':');
	81		var date = Date.UTC(d_date[0],d_date[1],d_date[2],d_time[0],d_time[1],d_time[2]) * 1;
	82		var value = jQuery(values[i]).find('> value').text() * 1;
	83		rawData.push([date, value]);
	84		}
	85		return rawData;
	86		}
	87
	88		function reloadDevicePlot() {
	89		var currentDate = new Date();
	90		jQuery.ajax({
	91		type: "GET",
	92		url: "metering/0000000000000000ffc00010_consumption_seconds.xml?date=" + currentDate.getTime(),
	93		dataType: "xml",
	94		success: function(xml) {
	95		var xmlString = xml2Str(xml).replace(/</ig, "<").replace(/>/ig, ">");
	96		jQuery('#deviceXML').html('<pre>' + xmlString + '</pre>');
	97		var rawData = parseXML(xml);
	98		redrawPlot(devicePlot, rawData);
	99		if(updateDevicePlot) {
	100		devicePlotTimer = setTimeout("reloadDevicePlot()", reloadInterval);
	101		}
	102		},
	103		error: function(XMLHttpRequest, textStatus, errorThrown) {
	104		alert("could not load device data: " + textStatus + "\n" + XMLHttpRequest.responseText);
	105		toggleDevicePlotUpdates();
	106		}
	107		});
	108		}
	109
	110		function toggleDevicePlotUpdates() {
	111		if(updateDevicePlot) {
	112		clearTimeout(devicePlotTimer);
	113		jQuery("#updateDevicePlot").attr("checked", "");
	114		updateDevicePlot = false;
	115		} else {
	116		updateDevicePlot = true;
	117		jQuery("#updateDevicePlot").attr("checked", "checked");
	118		reloadDevicePlot();
	119		}
	120		}
	121
	122		function reloadMeteringPlot() {
	123		var currentDate = new Date();
	124		jQuery.ajax({
	125		type: "GET",
	126		url: "metering/metering.xml?date=" + currentDate.getTime(),
	127		dataType: "xml",
	128		success: function(xml) {
	129		var xmlString = xml2Str(xml).replace(/</ig, "<").replace(/>/ig, ">");
	130		jQuery('#meteringXML').html('<pre>' + xmlString + '</pre>');
	131		var rawData = parseXML(xml);
	132		redrawPlot(meteringPlot, rawData);
	133		if(updateMeteringPlot) {
	134		meteringPlotTimer = setTimeout("reloadMeteringPlot()", reloadInterval);
	135		}
	136		},
	137		error: function(XMLHttpRequest, textStatus, errorThrown) {
	138		alert("could not load metering data: " + textStatus + "\n" + XMLHttpRequest.responseText);
	139		toggleMeteringPlotUpdates();
	140		}
	141		});
	142		}
	143
	144		function toggleMeteringPlotUpdates() {
	145		if(updateMeteringPlot) {
	146		clearTimeout(meteringPlotTimer);
	147		jQuery("#updateMeteringPlot").attr("checked", "");
	148		updateMeteringPlot = false;
	149		} else {
	150		updateMeteringPlot = true;
	151		jQuery("#updateMeteringPlot").attr("checked", "checked");
	152		reloadMeteringPlot();
	153		}
	154		}
	155
	156		function initPlots() {
	157		devicePlot = jQuery.plot( jQuery("#devicePlot"), [], plotOptions );
	158		meteringPlot = jQuery.plot( jQuery("#meteringPlot"), [], plotOptions );
	159		}
	160
	161		function redrawPlot(plot, data) {
	162		plot.setData([{data: data, color: "blue"}]);
	163		plot.setupGrid();
	164		plot.draw();
	165		}
	166
	167		jQuery(document).ready(function() {
	168		initPlots();
	169
	170		jQuery("#updateMeteringPlot").click(function () {
	171		toggleMeteringPlotUpdates();
	172		});
	173		jQuery("#updateDevicePlot").click(function () {
	174		toggleDevicePlotUpdates();
	175		});
	176
	177		toggleDevicePlotUpdates();
	178		toggleMeteringPlotUpdates();
	179		});


	1		var resolutions = ["five_minutes", "one_hour", "one_day", "one_week", "one_month", "one_year"];
	2
	3		var buildingMode = false;
	4
	5		function registerHandlers() {
	6		for(var i = 1; i <= 6; i++) {
	7		(function () {
	8		var roomNumber = i;
	9		jQuery("#room" + roomNumber).hover(function() {
	10		jQuery("#firstFloorHover").attr("src", "views/room_" + roomNumber + ".png").css( {visibility: "visible"});
	11		}, function() {
	12		jQuery("#firstFloorHover").css({visibility: "hidden"});
	13		});
	14		})();
	15
	16		(function () {
	17		var roomNumber = i;
	18		jQuery("#room" + roomNumber).click(function() {
	19		jQuery("#firstFloorSelection").attr("src", "views/room_" + roomNumber + ".png");
	20		jQuery("#firstFloorSelectionMap").attr("src", "views/room_" + roomNumber + "_map.png");
	21		graph.setDSM(dSMIDs[roomNumber-1]);
	22		jQuery("#graphSelectionTitle").text(roomNames[roomNumber - 1]);
	23		});
	24		})();
	25		(function () {
	26		var roomNumber = i;
	27		jQuery("#room" + roomNumber + "map").hover(function() {
	28		jQuery("#firstFloorHoverMap").attr("src", "views/room_" + roomNumber + "_map.png").css( {visibility: "visible"});
	29		}, function() {
	30		jQuery("#firstFloorHoverMap").css({visibility: "hidden"});
	31		});
	32		})();
	33
	34		(function () {
	35		var roomNumber = i;
	36		jQuery("#room" + roomNumber + "map").click(function() {
	37		jQuery("#firstFloorSelection").attr("src", "views/room_" + roomNumber + ".png");
	38		jQuery("#firstFloorSelectionMap").attr("src", "views/room_" + roomNumber + "_map.png");
	39		graph.setDSM(dSMIDs[roomNumber-1]);
	40		jQuery("#graphSelectionTitle").text(roomNames[roomNumber - 1]);
	41		});
	42		})();
	43		}
	44		jQuery(resolutions).each(function() {
	45		jQuery("#" + this).click(function() {
	46		jQuery("#graphSelector li.selected").removeClass("selected");
	47		jQuery(this).addClass("selected");
	48		if(jQuery(this).data("hovering") == true) {
	49		jQuery(this).data("hovering", false);
	50		}
	51		graph.setResolution(jQuery(this).attr("id"));
	52		});
	53		var hovering;
	54		jQuery("#" + this).hover(function() {
	55		if(jQuery(this).hasClass("selected")) {
	56		jQuery(this).data("hovering", false);
	57		} else {
	58		jQuery(this).addClass("selected");
	59		jQuery(this).data("hovering", true);
	60		}
	61		}, function() {
	62		if(jQuery(this).data("hovering") == true) {
	63		jQuery(this).removeClass("selected");
	64		jQuery(this).data("hovering", false);
	65		}
	66		})
	67		});
	68		jQuery("#threeD").click(function() {
	69		if(!buildingMode) {
	70		jQuery("#viewMode").css({backgroundImage: "url(images/view-mode-3d.png)"});
	71		jQuery("#firstFloor_3d").css({display: "block"});
	72		jQuery("#firstFloor_map").css({display: "none"});
	73		}
	74		});
	75		jQuery("#map").click(function() {
	76		if(!buildingMode) {
	77		jQuery("#viewMode").css({backgroundImage: "url(images/view-mode-map.png)"});
	78		jQuery("#firstFloor_3d").css({display: "none"});
	79		jQuery("#firstFloor_map").css({display: "block"});
	80		}
	81		});
	82		jQuery("#toggleQueue").data("queueOpen", false).click(function() {
	83		toggleMainMeterQueue();
	84		});
	85		jQuery("#connectionStatusText").data("connected", true).click(function() {
	86		toggleConnection();
	87		});
	88
	89		jQuery("#entireBuilding").click(function() {
	90		jQuery("#entireBuilding").addClass("selected");
	91		jQuery("#groundFloor").removeClass("selected");
	92		graph.setDSM("metering");
	93		jQuery("#graphSelectionTitle").text("Ganze Wohnung");
	94		jQuery("#allFloors").css({display: "block"});
	95		jQuery("#firstFloor_map, #firstFloor_3d").css({display: "none"});
	96		buildingMode = true;
	97		});
	98		jQuery("#groundFloor").click(function() {
	99		jQuery("#groundFloor").addClass("selected");
	100		jQuery("#entireBuilding").removeClass("selected");
	101		graph.setDSM(dSMIDs[0]);
	102		jQuery("#firstFloorSelection").attr("src", "views/room_1.png");
	103		jQuery("#firstFloorSelectionMap").attr("src", "views/room_1_map.png");
	104		jQuery("#viewMode").css({backgroundImage: "url(images/view-mode-3d.png)"});
	105		jQuery("#firstFloor_3d").css({display: "block"});
	106		jQuery("#firstFloor_map").css({display: "none"});
	107		jQuery("#graphSelectionTitle").text(roomNames[0]);
	108		jQuery("#allFloors, #firstFloor_map").css({display: "none"});
	109		jQuery("#firstFloor_3d").css({display: "block"});
	110		buildingMode = false;
	111		});
	112		//var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
	113		}
	114
	115		function setConsumptionOverlayForRoom(roomNumber, state) {
	116		jQuery("#consumptionOverlay" + roomNumber).attr("src", "views/room_" + roomNumber + "_" + state + ".png");
	117		jQuery("#consumptionOverlay" + roomNumber + "map").attr("src", "views/room_" + roomNumber + "_map_" + state + ".png");
	118		}
	119
	120		function toggleMainMeterQueue() {
	121		var button = jQuery("#toggleQueue");
	122		if(button.data("queueOpen")) {
	123		button.data("queueOpen", false).css({backgroundImage: "url(images/button-open.png)"});
	124		jQuery("#queue").slideUp(500);
	125		} else {
	126		button.data("queueOpen", true).css({backgroundImage: "url(images/button-close.png)"});
	127		jQuery("#queue").slideDown(500);
	128		}
	129		}
	130
	131		function toggleConnection() {
	132		var button = jQuery("#connectionStatusText");
	133		if(button.data("connected")) {
	134		console.log("disconnecting");
	135		button.data("connected", false).text("disconnected").css({backgroundImage: "url(images/button-disconnected.png)"});
	136		reporter.stop();
	137		} else {
	138		button.data("connected", true).text("connected").css({backgroundImage: "url(images/button-connected.png)"});
	139		reporter.restart();
	140		}
	141		}
	142
	143		function updatePowerConsumptionOverlays() {
	144		for(var i = 0; i < dSMIDs.length; i++) {
	145		updatePowerConsumptionOverlay(i);
	146		}
	147		setTimeout(function() {updatePowerConsumptionOverlays();}, 5000);
	148		}
	149
	150		function updatePowerConsumptionOverlay(roomNumber) {
	151		jQuery.ajax({
	152		type: "GET",
	153		url: "/json/circuit/getConsumption?id=" + dSMIDs[roomNumber],
	154		dataType: "json",
	155		success: function(data) {
	156		if(data.ok) {
	157		if(data.result.consumption > 70000) {
	158		setConsumptionOverlayForRoom((roomNumber + 1), "red");
	159		} else if(data.result.consumption > 30000) {
	160		setConsumptionOverlayForRoom((roomNumber + 1), "yellow");
	161		} else {
	162		setConsumptionOverlayForRoom((roomNumber + 1), "green");
	163		}
	164		}
	165		}
	166		});
	167		}


	1		/**
	2		* JavaScript Metering Report Visualisation (creator Matias E. Fernandez @ futureLAB)
	3		*
	4		* This script uses jQuery ( http://www.jquery.com/ )
	5		*
	6		*/
	7
	8		jQuery.noConflict();
	9
	10		var receiverTimer, senderTimer;
	11		var connection = false;
	12		var sendData = true;
	13		var receiveInterval = 1000, sendInterval = 200;
	14		var connenctionStatusID = "#connectionStatus"
	15		var connectionButtonID = "#connectionButton";
	16		var clearButtonID = "#clearQueueButton";
	17		var lastReceived = 0;
	18		var sending = false;
	19
	20		function xml2Str(xmlNode) {
	21		try {
	22		// Gecko-based browsers, Safari, Opera.
	23		return (new XMLSerializer()).serializeToString(xmlNode);
	24		}
	25		catch (e) {
	26		try {
	27		// Internet Explorer.
	28		return xmlNode.xml;
	29		}
	30		catch (e) {
	31		//Other browsers without XML Serializer
	32		alert('XMLSerializer not supported');
	33		}
	34		}
	35		return false;
	36		}
	37
	38
	39		function startSender() {
	40		if(connection) {
	41		senderTimer = setTimeout(function() {
	42		sendValue();
	43		}, sendInterval);
	44		}
	45		}
	46
	47		function stopSender() {
	48		clearTimeout(senderTimer);
	49		}
	50
	51		function updateQueueLength() {
	52		var length = jQuery("#receivedData > li").length + (sending ? -1 : 0);
	53		jQuery("#queueLength").text(length >= 0 ? length : 0);
	54		}
	55
	56		function sendValue() {
	57		var value = jQuery("#receivedData > li:first");
	58		if(value.length > 0) {
	59		sending = true;
	60		value.fadeTo(300, 0, function() {
	61		updateQueueLength();
	62		sending = false;
	63		jQuery(this).remove();
	64		startSender();
	65		});
	66		} else {
	67		startSender();
	68		}
	69		}
	70
	71		function value2html(value) {
	72		var xmlString = xml2Str(value.xml).replace(/>[\n\t\s]*<(?!\/value)/ig, ">\n\t<")
	73		.replace(/>[\n\t\s]*<(?=\/value)/ig, ">\n<")
	74		.replace(/</ig, "<")
	75		.replace(/>/ig, ">");;
	76		return ("<li id=" + value.time + "><pre>" + xmlString + "</pre></li>");
	77		}
	78
	79		function loadNewValues(values) {
	80		jQuery(values).each(function() {
	81		jQuery("#receivedData").append(value2html(this));
	82		});
	83		updateQueueLength();
	84		}
	85
	86		function attribute2Time(attribute) {
	87		var d_date = attribute.slice(0, attribute.indexOf(' ')).split('-');
	88		var d_time = attribute.slice(attribute.indexOf(' ')+1).split(':');
	89		return (Date.UTC(d_date[0],d_date[1],d_date[2],d_time[0],d_time[1],d_time[2]) * 1);
	90		}
	91
	92		function parseXML(xml) {
	93		var data = [];
	94		jQuery(xml).find('values > value').each(function() {
	95		data.push({
	96		time: attribute2Time(this.getAttribute('timestamp')),
	97		value: jQuery(this).find('> value').text() * 1,
	98		xml: this
	99		})
	100		});
	101		return data;
	102		}
	103
	104		function fetchXML(dismiss) {
	105		var currentDate = new Date();
	106		jQuery.ajax({
	107		type: "GET",
	108		url: "metering/metering.xml?date=" + currentDate.getTime(),
	109		dataType: "xml",
	110		success: function(xml) {
	111		var values = parseXML(xml);
	112		var newValues = [];
	113		jQuery(values).each(function() {
	114		if(this.time > lastReceived) {
	115		lastReceived = this.time;
	116		newValues.push(this);
	117		}
	118		});
	119		if(dismiss) {
	120
	121		}
	122		// ignore the last element, because it is likely that the value changes
	123		newValues.pop();
	124		lastReceived = jQuery(newValues).get(newValues.length - 1).time
	125		if(!dismiss) {
	126		loadNewValues(newValues);
	127		}
	128		setTimeout(function() {
	129		fetchXML(false);
	130		}, 3000);
	131		}
	132		});
	133		}
	134
	135		function toggleConnection() {
	136		if(connection == true) {
	137		connection = false;
	138		jQuery(connectionButtonID).val("Connect");
	139		jQuery(connenctionStatusID).text("disconnected");
	140		jQuery(connenctionStatusID).animate({
	141		color: "red"
	142		}, 500);
	143		stopSender();
	144		} else {
	145		connection = true;
	146		jQuery(connectionButtonID).val("Disconnect");
	147		jQuery(connenctionStatusID).text("connected");
	148		jQuery(connenctionStatusID).animate({
	149		color: "green"
	150		}, 500);
	151		sendValue();
	152		}
	153		}
	154
	155		function init() {
	156		toggleConnection();
	157		fetchXML(true);
	158		jQuery(connectionButtonID).click( function() {
	159		toggleConnection();
	160		});
	161		jQuery(clearButtonID).click( function() {
	162		jQuery("#receivedData > li").remove();
	163		updateQueueLength();
	164		})
	165		}
	166
	167		jQuery(document).ready(function() {
	168		init();
	169		});


	1		/*
	2		Copyright (c) 2009 digitalSTROM.org, Zurich, Switzerland
	3		Copyright (c) 2009 futureLAB AG, Winterthur, Switzerland
	4
	5		This file is part of digitalSTROM Server.
	6
	7		digitalSTROM Server is free software: you can redistribute it and/or modify
	8		it under the terms of the GNU General Public License as published by
	9		the Free Software Foundation, either version 3 of the License, or
	10		(at your option) any later version.
	11
	12		digitalSTROM Server is distributed in the hope that it will be useful,
	13		but WITHOUT ANY WARRANTY; without even the implied warranty of
	14		MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	15		GNU General Public License for more details.
	16
	17		You should have received a copy of the GNU General Public License
	18		along with digitalSTROM Server. If not, see <http://www.gnu.org/licenses/>.
	19
	20		*/
	21
	22		var DSS = Class.create({
	23		});
	24
	25		DSS.token = undefined,
	26		DSS.endpoint = "/json/",
	27
	28		DSS.sendSyncRequest = function(_uri, _parameter) {
	29		var responseObj;
	30		var req = new Ajax.Request(this.endpoint + _uri,
	31		{
	32		method: 'get',
	33		parameters: _parameter,
	34		asynchronous: false,
	35		onComplete: function(transport, json) {
	36		responseObj = transport.responseJSON;
	37		}
	38		});
	39		return responseObj;
	40		};
	41
	42		DSS.sendRequest = function(_uri, _parameter) {
	43		var request = new Ajax.Request(DSS.endpoint + _uri,
	44		{
	45		method: 'get',
	46		parameters: _parameter
	47		});
	48		};
	49		//});
	50
	51		function hasKey(_obj, _key) {
	52		return (typeof(_obj[_key]) != "undefined");
	53		}
	54
	55		var Group = Class.create({
	56		initialize: function(_name, _id) {
	57		this.name = _name;
	58		this.id = _id;
	59		}
	60		}); // Group
	61
	62		var System = Class.create({
	63		sendSyncRequest: function(_functionName, _parameter) {
	64		return DSS.sendSyncRequest("system/" + _functionName, _parameter);
	65		},
	66
	67		version: function() {
	68		var respObj = this.sendSyncRequest("version", {});
	69		return respObj.message;
	70		}
	71		}); // System
	72
	73		var Apartment = Class.create({
	74		initialize: function() {
	75		this.zones = [];
	76		},
	77
	78		fetch: function() {
	79		var self = this;
	80		var response = self.sendSyncRequest("getStructure", {});
	81		self.zones = [];
	82		response.result.apartment.zones.each(function(zone) {
	83		var zoneObj = new Zone(zone.id, zone.name);
	84		self.zones.push(zoneObj);
	85		zone.devices.each(function(device) {
	86		var deviceObj = new Device(device.id, device.name);
	87		deviceObj.fid = device.functionID;
	88		deviceObj.busID = device.busID;
	89		deviceObj.circuitID = device.circuitID;
	90		zoneObj.devices.push(deviceObj);
	91		deviceObj.on = device.on;
	92		deviceObj.hasSwitch = device.isSwitch;
	93		deviceObj.isPresent = device.isPresent;
	94		});
	95		});
	96		},
	97
	98		sendRequest: function(_functionName, _parameter) {
	99		DSS.sendRequest("apartment/" + _functionName, _parameter);
	100		},
	101
	102		sendSyncRequest: function(_functionName, _parameter) {
	103		return DSS.sendSyncRequest("apartment/" + _functionName, _parameter);
	104		},
	105
	106		getParameterForDeviceCall: function(_group) {
	107		var parameter = {};
	108		if(Object.isNumber(_group)) {
	109		parameter['groupID'] = _group;
	110		} else if(Object.isString(_group)) {
	111		parameter['groupName'] = _group;
	112		} else if(!Object.isUndefined(_group) && _group !== null) {
	113		if(hasKey(_group, 'name')) {
	114		parameter['groupName'] = _group['name'];
	115		} else if(hasKey(_group, 'id')) {
	116		parameter['groupID'] = _group['id'];
	117		}
	118		}
	119		return parameter;
	120		},
	121
	122		turnOn: function(_group) {
	123		this.sendRequest("turnOn", this.getParameterForDeviceCall(_group));
	124		},
	125
	126		turnOff: function(_group) {
	127		this.sendRequest("turnOff", this.getParameterForDeviceCall(_group));
	128		},
	129
	130		callScene: function(_sceneNumber, _group) {
	131		var parameter = this.getParameterForDeviceCall(_group);
	132		parameter['sceneNumber'] = _sceneNumber;
	133		this.sendRequest("callScene", parameter);
	134		},
	135
	136		saveScene: function(_sceneNumber, _group) {
	137		var parameter = this.getParameterForDeviceCall(_group);
	138		parameter['sceneNumber'] = _sceneNumber;
	139		this.sendRequest("saveScene", parameter);
	140		},
	141
	142		undoScene: function(_sceneNumber, _group) {
	143		var parameter = this.getParameterForDeviceCall(_group);
	144		parameter['sceneNumber'] = _sceneNumber;
	145		this.sendRequest("undoScene", parameter);
	146		},
	147		increaseValue: function(_group) {
	148		var parameter = this.getParameterForDeviceCall(_group);
	149		this.sendRequest("increaseValue", parameter);
	150		},
	151		decreaseValue: function(_group) {
	152		var parameter = this.getParameterForDeviceCall(_group);
	153		this.sendRequest("decreaseValue", parameter);
	154		},
	155
	156		enable: function(_group) {
	157		var parameter = this.getParameterForDeviceCall(_group);
	158		this.sendRequest("enable", parameter);
	159		},
	160
	161		disable: function(_group) {
	162		var parameter = this.getParameterForDeviceCall(_group);
	163		this.sendRequest("disable", parameter);
	164		},
	165
	166		startDim: function(_up, _group) {
	167		var parameter = this.getParameterForDeviceCall(_group);
	168		if(Object.isUndefined(_up) \|\| _up === true) {
	169		parameter.up = true;
	170		}
	171		this.sendRequest("startDim", parameter);
	172		},
	173
	174		endDim: function(_group) {
	175		var parameter = this.getParameterForDeviceCall(_group);
	176		this.sendRequest("endDim", parameter);
	177		},
	178
	179		getPowerConsumption: function(_group) {
	180		var parameter = this.getParameterForDeviceCall(_group);
	181		var respObj = this.sendSyncRequest("getConsumption", parameter);
	182		return respObj.consumption;
	183		},
	184
	185		getCircuits: function() {
	186		var respObj = this.sendSyncRequest("getCircuits", {});
	187		return respObj.result.circuits;
	188		}
	189		}); // Apartment
	190
	191
	192		var Zone = Class.create({
	193		initialize: function(_id, _name) {
	194		this.id = _id;
	195		this.name = _name;
	196		this.devices = [];
	197		},
	198
	199		sendRequest: function(_functionName, _parameter) {
	200		DSS.sendRequest("zone/" + _functionName, _parameter);
	201		},
	202
	203		sendSyncRequest: function(_functionName, _parameter) {
	204		return DSS.sendSyncRequest("zone/" + _functionName, _parameter);
	205		},
	206
	207		getParameterForDeviceCall: function(_group) {
	208		var parameter = {};
	209		parameter['id'] = this.id;
	210		if(Object.isNumber(_group)) {
	211		parameter['groupID'] = _group;
	212		} else if(Object.isString(_group)) {
	213		parameter['groupName'] = _group;
	214		} else if(!Object.isUndefined(_group) && _group !== null) {
	215		if(hasKey(_group, 'name')) {
	216		parameter['groupName'] = _group['name'];
	217		} else if(hasKey(_group, 'id')) {
	218		parameter['groupID'] = _group['id'];
	219		}
	220		}
	221		return parameter;
	222		},
	223
	224		turnOn: function(_group) {
	225		this.sendRequest("turnOn", this.getParameterForDeviceCall(_group));
	226		},
	227
	228		turnOff: function(_group) {
	229		this.sendRequest("turnOff", this.getParameterForDeviceCall(_group));
	230		},
	231
	232		callScene: function(_sceneNumber, _group) {
	233		var parameter = this.getParameterForDeviceCall(_group);
	234		parameter['sceneNumber'] = _sceneNumber;
	235		this.sendRequest("callScene", parameter);
	236		},
	237
	238		saveScene: function(_sceneNumber, _group) {
	239		var parameter = this.getParameterForDeviceCall(_group);
	240		parameter['sceneNumber'] = _sceneNumber;
	241		this.sendRequest("saveScene", parameter);
	242		},
	243
	244		undoScene: function(_sceneNumber, _group) {
	245		var parameter = this.getParameterForDeviceCall(_group);
	246		parameter['sceneNumber'] = _sceneNumber;
	247		this.sendRequest("undoScene", parameter);
	248		},
	249
	250		increaseValue: function(_group) {
	251		var parameter = this.getParameterForDeviceCall(_group);
	252		this.sendRequest("increaseValue", parameter);
	253		},
	254
	255		decreaseValue: function(_group) {
	256		var parameter = this.getParameterForDeviceCall(_group);
	257		this.sendRequest("decreaseValue", parameter);
	258		},
	259
	260		enable: function(_group) {
	261		var parameter = this.getParameterForDeviceCall(_group);
	262		this.sendRequest("enable", parameter);
	263		},
	264
	265		disable: function(_group) {
	266		var parameter = this.getParameterForDeviceCall(_group);
	267		this.sendRequest("disable", parameter);
	268		},
	269
	270		startDim: function(_up, _group) {
	271		var parameter = this.getParameterForDeviceCall(_group);
	272		if(isUndefined(_up) \|\| _up === false) {
	273		parameter['up'] = true;
	274		}
	275		this.sendRequest("startDim", parameter);
	276		},
	277
	278		endDim: function(_group) {
	279		var parameter = this.getParameterForDeviceCall(_group);
	280		this.sendRequest("endDim", parameter);
	281		},
	282
	283		getPowerConsumption: function(_group) {
	284		var parameter = this.getParameterForDeviceCall(_group);
	285		var respObj = this.sendSyncRequest("getConsumption", parameter);
	286		return respObj.consumption;
	287		},
	288
	289		sendEvent: function(_name) {
	290		var event = new HEvent(_name, '.zone(' + this.id + ')').raise();
	291		},
	292
	293		sendButtonPress: function(_buttonNumber, _group) {
	294		var parameter = this.getParameterForDeviceCall(_group);
	295		parameter['zoneID'] = this.id;
	296		parameter['buttonnr'] = _buttonNumber;
	297		DSS.sendRequest("sim/switch/pressed", parameter);
	298		}
	299		}); // Zone
	300
	301		var Device = Class.create({
	302		initialize: function(_dsid, _name) {
	303		this.dsid = _dsid;
	304		this.name = _name;
	305		this.on = false;
	306		this.hasSwitch = false;
	307		},
	308
	309		isSwitch: function() {
	310		return this.hasSwitch;
	311		},
	312
	313		isOn: function() {
	314		return this.on;
	315		},
	316
	317		sendRequest: function(_functionName, _parameter) {
	318		DSS.sendRequest("device/" + _functionName, _parameter);
	319		},
	320
	321		sendSyncRequest: function(_functionName, _parameter) {
	322		return DSS.sendSyncRequest("device/" + _functionName, _parameter);
	323		},
	324
	325		getParameterForDeviceCall: function() {
	326		var parameter = {};
	327		parameter['dsid'] = this.dsid;
	328		return parameter;
	329		},
	330
	331		turnOn: function() {
	332		this.sendRequest("turnOn", this.getParameterForDeviceCall());
	333		},
	334
	335		turnOff: function() {
	336		this.sendRequest("turnOff", this.getParameterForDeviceCall());
	337		},
	338
	339		callScene: function(_sceneNumber) {
	340		var parameter = this.getParameterForDeviceCall();
	341		parameter['sceneNumber'] = _sceneNumber;
	342		this.sendRequest("callScene", parameter);
	343		},
	344
	345		saveScene: function(_sceneNumber) {
	346		var parameter = this.getParameterForDeviceCall();
	347		parameter['sceneNumber'] = _sceneNumber;
	348		this.sendRequest("saveScene", parameter);
	349		},
	350
	351		undoScene: function(_sceneNumber) {
	352		var parameter = this.getParameterForDeviceCall();
	353		parameter['sceneNumber'] = _sceneNumber;
	354		this.sendRequest("undoScene", parameter);
	355		},
	356
	357		increaseValue: function() {
	358		var parameter = this.getParameterForDeviceCall();
	359		this.sendRequest("increaseValue", parameter);
	360		},
	361
	362		decreaseValue: function() {
	363		var parameter = this.getParameterForDeviceCall();
	364		this.sendRequest("decreaseValue", parameter);
	365		},
	366
	367		enable: function() {
	368		var parameter = this.getParameterForDeviceCall();
	369		this.sendRequest("enable", parameter);
	370		},
	371
	372		disable: function() {
	373		var parameter = this.getParameterForDeviceCall();
	374		this.sendRequest("disable", parameter);
	375		},
	376
	377		startDim: function(_up) {
	378		var parameter = this.getParameterForDeviceCall();
	379		if(!isUndefined(_up) && _up !== false) {
	380		parameter['up'] = true;
	381		}
	382		this.sendRequest("startDim", parameter);
	383		},
	384
	385		endDim: function() {
	386		var parameter = this.getParameterForDeviceCall();
	387		this.sendRequest("endDim", parameter);
	388		},
	389
	390		getPowerConsumption: function() {
	391		var parameter = this.getParameterForDeviceCall();
	392		var respObj = this.sendSyncRequest("getConsumption", parameter);
	393		return respObj.consumption;
	394		},
	395
	396		sendEvent: function(_name) {
	397		var event = new HEvent(_name, '.dsid(' + this.dsid + ')').raise();
	398		},
	399
	400		getGroups: function() {
	401		var parameter = this.getParameterForDeviceCall();
	402		var respObj = this.sendSyncRequest("getGroups", parameter);
	403		return respObj.groups;
	404		},
	405
	406		refresh: function() {
	407		var parameter = this.getParameterForDeviceCall();
	408		var respObj = this.sendSyncRequest("getState", parameter);
	409		if(respObj.ok) {
	410		this.on = respObj.result.isOn;
	411		return true;
	412		}
	413		return false;
	414		}
	415
	416
	417		}); // Device
	418
	419		var HEvent = Class.create({
	420		initialize: function(_name, _location, _context) {
	421		this.name = _name;
	422		this.location = _location;
	423		this.context = _context;
	424		},
	425
	426		sendRequest: function(_functionName, _parameter) {
	427		DSS.sendRequest("event/" + _functionName, _parameter);
	428		},
	429
	430		sendSyncRequest: function(_functionName, _parameter) {
	431		return DSS.sendSyncRequest("event/" + _functionName, _parameter);
	432		},
	433
	434		raise: function() {
	435		var parameter = {};
	436		parameter['name'] = this.name;
	437		if(!Object.isUndefined(this.location)) {
	438		parameter['location'] = this.location;
	439		}
	440		if(!Object.isUndefined(this.context)) {
	441		parameter['location'] = this.context;
	442		}
	443		this.sendRequest('raise', parameter);
	444		}
	445		}); // HEvent
	446
	447		var Set = Class.create({
	448		initialize: function(_self) {
	449		this.self = _self;
	450		},
	451
	452		sendRequest: function(_functionName, _parameter) {
	453		DSS.sendRequest("set/" + _functionName, _parameter);
	454		},
	455
	456		sendSyncRequest: function(_functionName, _parameter) {
	457		return DSS.sendSyncRequest("set/" + _functionName, _parameter);
	458		},
	459
	460		getParameterForSetCall: function() {
	461		var parameter = {};
	462		parameter['self'] = this.self;
	463		return parameter;
	464		},
	465
	466		turnOn: function() {
	467		this.sendRequest("turnOn", this.getParameterForSetCall());
	468		},
	469
	470		turnOff: function() {
	471		this.sendRequest("turnOff", this.getParameterForSetCall());
	472		},
	473
	474		callScene: function(_sceneNumber) {
	475		var parameter = this.getParameterForSetCall();
	476		parameter['sceneNumber'] = _sceneNumber;
	477		this.sendRequest("callScene", parameter);
	478		},
	479
	480		saveScene: function(_sceneNumber) {
	481		var parameter = this.getParameterForSetCall();
	482		parameter['sceneNumber'] = _sceneNumber;
	483		this.sendRequest("saveScene", parameter);
	484		},
	485
	486		undoScene: function(_sceneNumber) {
	487		var parameter = this.getParameterForSetCall();
	488		parameter['sceneNumber'] = _sceneNumber;
	489		this.sendRequest("undoScene", parameter);
	490		},
	491
	492		increaseValue: function() {
	493		var parameter = this.getParameterForSetCall();
	494		this.sendRequest("increaseValue", parameter);
	495		},
	496
	497		decreaseValue: function() {
	498		var parameter = this.getParameterForSetCall();
	499		this.sendRequest("decreaseValue", parameter);
	500		},
	501
	502		enable: function() {
	503		var parameter = this.getParameterForSetCall();
	504		this.sendRequest("enable", parameter);
	505		},
	506
	507		disable: function() {
	508		var parameter = this.getParameterForSetCall();
	509		this.sendRequest("disable", parameter);
	510		},
	511
	512		startDim: function(_up) {
	513		var parameter = this.getParameterForSetCall();
	514		if(!isUndefined(_up) && _up !== false) {
	515		parameter['up'] = true;
	516		}
	517		this.sendRequest("startDim", parameter);
	518		},
	519
	520		endDim: function() {
	521		var parameter = this.getParameterForSetCall();
	522		this.sendRequest("endDim", parameter);
	523		},
	524
	525		getPowerConsumption: function() {
	526		var parameter = this.getParameterForSetCall();
	527		var respObj = this.sendSyncRequest("getConsumption", parameter);
	528		return respObj.consumption;
	529		},
	530
	531		getGroups: function() {
	532		var parameter = this.getParameterForSetCall();
	533		var respObj = this.sendSyncRequest("getGroups", parameter);
	534		return respObj.groups;
	535		},
	536
	537		refresh: function() {
	538		var parameter = this.getParameterForSetCall();
	539		var respObj = this.sendSyncRequest("getState", parameter);
	540		if(respObj.ok) {
	541		this.on = respObj.result.isOn;
	542		return true;
	543		}
	544		return false;
	545		},
	546
	547		byZone: function(_zoneID) {
	548		var parameter = this.getParameterForSetCall();
	549		parameter['zoneID'] = _zoneID;
	550		var respObj = this.sendSyncRequest("getState", parameter);
	551		if(respObj.ok) {
	552		return new Set(respObj.result.self);
	553		}
	554		return undefined;
	555		},
	556
	557		getDevices: function() {
	558		var respObj = this.sendSyncRequest("getDevices", this.getParameterForSetCall());
	559		if(respObj.ok) {
	560		return respObj.result;
	561		}
	562		return undefined;
	563		}
	564
	565		}); // Set
	566
	567
	568		if(hasKey(this, 'onModelLoaded') && !Object.isUndefined(onModelLoaded) && Object.isFunction(onModelLoaded)) {
	569		onModelLoaded();
	570		}


	1		Ext.onReady(function(){
	2		// create a record for a device
	3		var deviceRecord = Ext.data.Record.create([
	4		{name:"name"},
	5		{name:"id"},
	6		{name:"on"},
	7		{name:"circuit"},
	8		{name:"modulator"},
	9		{name:"zone"}
	10		]);
	11
	12		// a json reader to read the device data
	13		var deviceReader = new Ext.data.JsonReader(
	14		{
	15		root:"devices"
	16		},
	17		deviceRecord
	18		);
	19
	20		var deviceFields = [
	21		{name: 'name'},
	22		{name: 'id'},
	23		{name: 'on'},
	24		{name: 'circuit'},
	25		{name: 'modulator'},
	26		{name: 'zone'}
	27		];
	28
	29		// create the data store
	30		var deviceStore = new Ext.data.Store({
	31		fields : deviceFields,
	32		reader : deviceReader
	33		});
	34
	35		var deviceCols = [
	36		{id: 'id', header: "id", width: 50, sortable: true, dataIndex: 'id'},
	37		{id: 'name', header: "name", width: 50, sortable: true, dataIndex: 'name', editable: true, editor: new Ext.form.TextField()},
	38		{header: "on", width: 50, sortable: true, dataIndex: 'on'},
	39		{header: "circuit", width: 50, sortable: true, dataIndex: 'circuit'},
	40		{header: "modulator", width: 50, sortable: true, dataIndex: 'modulator'},
	41		{header: "zone", width: 50, sortable: true, dataIndex: 'zone'},
	42		];
	43
	44		var editor = new Ext.ux.grid.RowEditor({
	45		saveText: 'Update'
	46		});
	47
	48		editor.on('afteredit', function() {
	49		console.log('a device has been edited');
	50		deviceStore.commitChanges();
	51		filterDevices();
	52		});
	53
	54		var deviceGrid = new Ext.grid.GridPanel({
	55		store : deviceStore,
	56		columns : deviceCols,
	57		ddGroup : "theGroup",
	58		enableDragDrop : true,
	59		stripeRows : true,
	60		autoExpandColumn : 'id',
	61		width : 500,
	62		region : 'center',
	63		title : 'Devices',
	64		plugins : [editor]
	65		});
	66
	67		deviceGrid.on('rowcontextmenu', function() {
	68		console.log('rowcontextmenu');
	69		});
	70
	71		var zoneRecord = Ext.data.Record.create([
	72		{name:"name"},
	73		{name:"id"}
	74		]);
	75
	76		var zoneReader = new Ext.data.JsonReader(
	77		{
	78		root: "zones"
	79		},
	80		zoneRecord
	81		);
	82
	83		var zoneFields = [
	84		{name: 'name'},
	85		{id: 'id'}
	86		];
	87
	88		var zoneStore = new Ext.data.Store({
	89		fields : zoneFields,
	90		reader : zoneReader//,
	91		//data: zoneData
	92		});
	93
	94		var zoneTemplate = new Ext.XTemplate(
	95		'<tpl for=".">',
	96		'<div class="zone-wrap {css}" id="{id}">',
	97		'<span>{name}</span>',
	98		'</div>',
	99		'</tpl>',
	100		'<div class="x-clear"></div>'
	101		);
	102
	103		var zoneView = new Ext.DataView({
	104		store: zoneStore,
	105		tpl: zoneTemplate,
	106		autoHeight:true,
	107		multiSelect: true,
	108		overClass:'x-view-over',
	109		itemSelector:'div.zone-wrap',
	110		emptyText: 'No Rooms to display',
	111		plugins: [
	112		new Ext.DataView.DragSelector()
	113		],
	114		listeners: {
	115		selectionchange: {
	116		fn: function(dv,nodes){
	117		var l = nodes.length;
	118		var s = l != 1 ? 's' : '';
	119		zonePanel.setTitle("Zones (" + l + ' zone' + s + ' selected)');
	120		filterDevices();
	121		}
	122		},
	123		containerclick: {
	124		fn: function() {
	125		console.log('container click');
	126		}
	127		},
	128		click: {
	129		fn: function() {
	130		console.log('click event');
	131		}
	132		}
	133		}
	134		});
	135
	136		zoneView.on('contextmenu', function() {
	137		// e.stopEvent();
	138		console.log("context");
	139		// e.preventDefault();
	140		}
	141		);
	142
	143		function filterDevices() {
	144		var selectedZones = zoneView.getSelectedRecords();
	145		if(selectedZones.length === 0) {
	146		deviceStore.clearFilter();
	147		return
	148		}
	149		deviceStore.filterBy(function(record) {
	150		for(var i = 0; i < selectedZones.length; i++) {
	151		if(record.data.zone == selectedZones[i].data.id) {
	152		return true;
	153		}
	154		}
	155		return false;
	156		});
	157		}
	158
	159		var reloadAction = new Ext.Action({
	160		text: 'Reload',
	161		handler: function(){
	162		loadData();
	163		},
	164		iconCls: 'reloadAction'
	165		});
	166
	167		var createZoneAction = new Ext.Action({
	168		text: "New Zone",
	169		handler: function() {
	170		Ext.Msg.prompt('Create new zone', 'Name for new Zone:', function(btn, text){
	171		if (btn == 'ok'){
	172		for(var i = 0; i <= zoneStore.data.length; i++) {
	173		if(zoneStore.findExact('id', i) === -1) {
	174
	175		Ext.Ajax.request({
	176		url: '/json/structure/addZone',
	177		disableCaching: true,
	178		method: "GET",
	179		params: { zoneID: i },
	180		success: function(result, request) {
	181		try {
	182		var jsonData = Ext.util.JSON.decode(result.responseText);
	183		if(jsonData.ok) {
	184
	185
	186
	187		Ext.Ajax.request({
	188		url: '/json/zone/setName',
	189		disableCaching: true,
	190		method: "GET",
	191		params: { id: i,
	192		newName: text},
	193		success: function(result, request) {
	194		try {
	195		var jsonData = Ext.util.JSON.decode(result.responseText);
	196		if(jsonData.ok) {
	197
	198
	199		var newZone = new zoneStore.recordType({id: i, name: text}, i);
	200		zoneStore.insert(i, newZone);
	201
	202
	203
	204		}
	205		}
	206		catch (err) {
	207		Ext.MessageBox.alert('Error', 'Could not create Zone');
	208		}
	209		},
	210		failure: function(result, request) {
	211		Ext.MessageBox.alert('Error', 'Could not create Zone');
	212		},
	213		});
	214
	215
	216		}
	217		}
	218		catch (err) {
	219		Ext.MessageBox.alert('Error', 'Could not create Zone');
	220		}
	221		},
	222		failure: function(result, request) {
	223		Ext.MessageBox.alert('Error', 'Could not create Zone');
	224		},
	225		});
	226		return;
	227		}
	228		}
	229		}
	230		});
	231		},
	232		iconCls: 'newZoneAction'
	233		});
	234
	235		var zonePanel = new Ext.Panel({
	236		id:'images-view',
	237		//frame:true,
	238		width:200,
	239		//autoHeight:true,
	240		region: "west",
	241		//layout:'fit',
	242		title:'Zones',
	243		items: zoneView,
	244		tbar: ['->', createZoneAction, reloadAction]
	245		});
	246		zoneView.on('selectionchange', function() {
	247		//filterDevices();
	248		return;
	249		});
	250
	251		zoneView.on('render', function() {
	252		zoneView.dropZone = new Ext.dd.DropZone(zoneView.getEl(), {
	253		ddGroup : "theGroup",
	254		getTargetFromEvent: function(e) {
	255		return e.getTarget(zoneView.itemSelector);
	256		},
	257		onNodeEnter : function(target, dd, e, data){
	258		Ext.fly(target).addClass('my-row-highlight-class');
	259		},
	260		onNodeOut : function(target, dd, e, data){
	261		Ext.fly(target).removeClass('my-row-highlight-class');
	262		},
	263		onNodeOver : function(target, dd, e, data){
	264		return Ext.dd.DropZone.prototype.dropAllowed;
	265		},
	266		onNodeDrop : function(target, dd, e, data){
	267		var record = zoneView.getRecord(target);
	268		Ext.each(data.selections, function(device) {
	269		var currentDevice = device;
	270		Ext.Ajax.request({
	271		url: '/json/structure/zoneAddDevice',
	272		disableCaching: true,
	273		method: "GET",
	274		params: { devid: currentDevice.data.id,
	275		zone: record.data.id
	276		},
	277		success: function(result, request) {
	278		try {
	279		var jsonData = Ext.util.JSON.decode(result.responseText);
	280		if(jsonData.ok) {
	281		currentDevice.set("zone", record.data.id);
	282		deviceStore.commitChanges();
	283		filterDevices();
	284		}
	285		}
	286		catch (err) {
	287		Ext.MessageBox.alert('Error', 'Could not move device "' + device.data.dsid + '"');
	288		}
	289		},
	290		failure: function(result, request) {
	291		Ext.MessageBox.alert('Error', 'Could not move device "' + device.data.dsid + '"');
	292		},
	293		});
	294		});
	295		return true;
	296		}
	297		});
	298		});
	299
	300
	301		//Simple 'border layout' panel to house both grids
	302		var displayPanel = new Ext.Panel({
	303		width: 800,
	304		height: 700,
	305		layout: 'border',
	306		renderTo: 'panel',
	307		items: [
	308		deviceGrid,
	309		zonePanel
	310		]}
	311		);
	312
	313		var allDevices = [];
	314
	315		function processStructure(structure) {
	316		var devices = [], zones = [];
	317		Ext.each(structure.apartment.zones, function(zone) {
	318		if(zone.id === 0) { // Skip zone 0
	319		Ext.each(zone.devices, function(device) {
	320		devices.push(device);
	321		});
	322		}
	323		zones.push({
	324		id: zone.id,
	325		name: zone.id === 0 ? 'Uncategorized' : zone.name
	326		});
	327		Ext.each(zone.devices, function(device) {
	328		for(var i = 0; i < devices.length; i++) {
	329		if(devices[i].id == device.id) {
	330		devices[i].zone = zone.id;
	331		}
	332		}
	333		});
	334		});
	335		zoneStore.loadData({zones: zones});
	336		allDevices = devices;
	337		}
	338
	339		function processCircuits(circuits) {
	340		Ext.each(allDevices, function(device) {
	341		var circuitID = device.circuitID;
	342		for( var i = 0; i < circuits.length; i++) {
	343		if(circuits[i].busid == circuitID) {
	344		device.circuit = circuits[i].name;
	345		device.modulator = circuits[i].dsid;
	346		}
	347		}
	348		});
	349		deviceStore.loadData({devices: allDevices});
	350		if(zoneStore.getCount() > 1) {
	351		zoneView.select(1);
	352		} else {
	353		zoneView.select(0);
	354		}
	355		}
	356
	357		function loadStructure() {
	358		Ext.Ajax.request({
	359		url: '/json/apartment/getStructure',
	360		disableCaching: true,
	361		method: "GET",
	362		success: function(result, request) {
	363		try {
	364		var jsonData = Ext.util.JSON.decode(result.responseText);
	365		processStructure(jsonData);
	366		}
	367		catch (err) {
	368		Ext.MessageBox.alert('AJAX Error', 'Error processing server response: "' + err + '"');
	369		}
	370		},
	371		failure: function(result, request) {
	372		Ext.MessageBox.alert('AJAX Error', 'Could not load "' + request.url + '"');
	373		},
	374		});
	375		}
	376
	377		function loadCircuits() {
	378		Ext.Ajax.request({
	379		url: '/json/apartment/getCircuits',
	380		disableCaching: true,
	381		method: "GET",
	382		success: function(result, request) {
	383		try {
	384		var jsonData = Ext.util.JSON.decode(result.responseText);
	385		processCircuits(jsonData.result.circuits);
	386		}
	387		catch (err) {
	388		Ext.MessageBox.alert('AJAX Error', 'Error processing server response: "' + err + '"');
	389		}
	390		},
	391		failure: function(result, request) {
	392		Ext.MessageBox.alert('AJAX Error', 'Could not load "' + request.url + '"');
	393		},
	394		});
	395		}
	396
	397		function loadData() {
	398		loadStructure();
	399		loadCircuits();
	400		}
	401
	402		loadData();
	403		});


	1		/*
	2		Copyright (c) 2009 digitalSTROM.org, Zurich, Switzerland
	3		Copyright (c) 2009 futureLAB AG, Winterthur, Switzerland
	4
	5		This file is part of digitalSTROM Server.
	6
	7		digitalSTROM Server is free software: you can redistribute it and/or modify
	8		it under the terms of the GNU General Public License as published by
	9		the Free Software Foundation, either version 3 of the License, or
	10		(at your option) any later version.
	11
	12		digitalSTROM Server is distributed in the hope that it will be useful,
	13		but WITHOUT ANY WARRANTY; without even the implied warranty of
	14		MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	15		GNU General Public License for more details.
	16
	17		You should have received a copy of the GNU General Public License
	18		along with digitalSTROM Server. If not, see <http://www.gnu.org/licenses/>.
	19
	20		*/
	21
	22		var buttons = [];
	23
	24		function Button(switchID, buttonID, parentSwitch) {
	25		var self = this;
	26		this.switchID = switchID;
	27		this.buttonID = buttonID;
	28		this.parentSwitch = parentSwitch;
	29		this.timeoutID = 0;
	30		this.buttonStrID = "switch_" + switchID + "_button_" + buttonID;
	31
	32		this.sentTouch = false;
	33		this.gotDown = false;
	34
	35		this.down = function() {
	36		self.timeoutID = setTimeout(
	37		function() {
	38		self.sendTouch();
	39		}, 500);
	40		self.gotDown = true;
	41		};
	42
	43		this.sendTouch = function() {
	44		if(self.gotDown === true) {
	45		//log('touch');
	46		self.reportAction('touch');
	47		self.sentTouch = true;
	48		}
	49		};
	50
	51		this.up = function() {
	52		if(self.gotDown === true) {
	53		if(self.sentTouch === true) {
	54		//log('touch end');
	55		self.reportAction('touchend');
	56		} else {
	57		clearTimeout(self.timeoutID);
	58		//log('click');
	59		self.parentSwitch.onClick(self.buttonID);
	60		}
	61		}
	62		self.gotDown = false;
	63		self.sentTouch = false;
	64		self.timeoutID = 0;
	65		};
	66		}
	67
	68		function Switch(intoID, switchID, zoneID, groupID) {
	69		var self = this;
	70		this.buttons = [];
	71		this.switchID = switchID;
	72
	73		this.groupID = groupID;
	74		this.zoneID = zoneID;
	75
	76		this.generateButtons = function(numButtons) {
	77		for(var iButton = 0; iButton < numButtons; iButton++) {
	78		self.buttons[iButton] = new Button(switchID, iButton+1, self);
	79		}
	80		};
	81
	82		this.generateButtons(9);
	83		var buttonIDTemplate = 'switch_' + switchID + '_button_';
	84
	85		function generateTable() {
	86		function doRow(startIdx, numCol, widths, height) {
	87		var result = '<tr>';
	88		for(var iCol = 0; iCol < numCol; iCol++) {
	89		var btnIdx = startIdx + iCol;
	90		result += '<td style="background-color: #ffffff" width="' + widths[iCol] + '" height="' + height + 'px" id="' + buttonIDTemplate + btnIdx + '"/>';
	91		}
	92		result += '</tr>';
	93		return result;
	94		}
	95		var result = '<table>';
	96		result += doRow(1, 3, [20, 70, 20], 20);
	97		result += doRow(4, 3, [20, 70, 20], 70);
	98		result += doRow(7, 3, [20, 70, 20], 20);
	99		result += '</table>';
	100		return result;
	101		}
	102
	103		$(intoID).innerHTML = generateTable();
	104
	105		function wireUp(buttonNr, buttonObj) {
	106		var elemName = buttonIDTemplate + buttonNr;
	107		var elem = $(elemName);
	108		elem.onmouseup =
	109		function() {
	110		buttonObj.up();
	111		};
	112		elem.onmousedown =
	113		function() {
	114		buttonObj.down();
	115		};
	116		elem.onmouseout =
	117		function() {
	118		buttonObj.up();
	119		};
	120		}
	121
	122		for(var iBtn = 0; iBtn < 9; iBtn++) {
	123		wireUp(iBtn+1, self.buttons[iBtn]);
	124		}
	125
	126		this.setGroup = function(_groupID) {
	127		self.groupID = _groupID;
	128		var newColor = "#ff6600"; // orange is for unknown / broadcast groups
	129		if(_groupID == 1 /* yellow */) {
	130		newColor = "#FFFF00";
	131		} else if(_groupID == 2 /* gray */) {
	132		newColor = "#AAAAAA";
	133		} else if(_groupID == 3 /* blue */) {
	134		newColor = "#0000FF";
	135		} else if(_groupID == 4 /* cyan */) {
	136		newColor = "#00FFFF";
	137		} else if(_groupID == 5 /* red */) {
	138		newColor = "#FF0000";
	139		} else if(_groupID == 6 /* magenta */) {
	140		newColor = "#FF00FF";
	141		} else if(_groupID == 7 /* green */) {
	142		newColor = "#00FF00";
	143		} else if(_groupID == 8 /* black */) {
	144		newColor = "#000000";
	145		} else if(_groupID == 9 /* white */) {
	146		newColor = "#FFFFFF";
	147		}
	148		$(buttonIDTemplate + '5').style.backgroundColor = newColor;
	149		};
	150
	151		this.onClick = function(_buttonNr) {
	152		var request = new Ajax.Request(
	153		'/json/sim/switch/pressed',
	154		{ method:'get',
	155		parameters:
	156		{
	157		buttonnr: _buttonNr,
	158		zoneID: self.zoneID,
	159		groupID: self.groupID
	160		}
	161		}
	162		);
	163		if(_buttonNr == 1) {
	164		self.setGroup(1); // light
	165		} else if(_buttonNr == 3) {
	166		self.setGroup(3); // climate
	167		} else if(_buttonNr == 7) {
	168		var nextGroup = (self.groupID - 1);
	169		if(nextGroup === 0) {
	170		nextGroup = 9;
	171		}
	172		self.setGroup(nextGroup);
	173		} else if(_buttonNr == 9) {
	174		var nextGroup = (self.groupID + 1);
	175		if(nextGroup == 10) {
	176		nextGroup = 1;
	177		}
	178		self.setGroup(nextGroup);
	179		}
	180		};
	181
	182		self.setGroup(1);
	183		}


	1		/* This notice must be untouched at all times.
	2
	3		wz_jsgraphics.js v. 3.05
	4		The latest version is available at
	5		http://www.walterzorn.com
	6		or http://www.devira.com
	7		or http://www.walterzorn.de
	8
	9		Copyright (c) 2002-2009 Walter Zorn. All rights reserved.
	10		Created 3. 11. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
	11		Last modified: 2. 2. 2009
	12
	13		Performance optimizations for Internet Explorer
	14		by Thomas Frank and John Holdsworth.
	15		fillPolygon method implemented by Matthieu Haller.
	16
	17		High Performance JavaScript Graphics Library.
	18		Provides methods
	19		- to draw lines, rectangles, ellipses, polygons
	20		with specifiable line thickness,
	21		- to fill rectangles, polygons, ellipses and arcs
	22		- to draw text.
	23		NOTE: Operations, functions and branching have rather been optimized
	24		to efficiency and speed than to shortness of source code.
	25
	26		LICENSE: LGPL
	27
	28		This library is free software; you can redistribute it and/or
	29		modify it under the terms of the GNU Lesser General Public
	30		License (LGPL) as published by the Free Software Foundation; either
	31		version 2.1 of the License, or (at your option) any later version.
	32
	33		This library is distributed in the hope that it will be useful,
	34		but WITHOUT ANY WARRANTY; without even the implied warranty of
	35		MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
	36		Lesser General Public License for more details.
	37
	38		You should have received a copy of the GNU Lesser General Public
	39		License along with this library; if not, write to the Free Software
	40		Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA,
	41		or see http://www.gnu.org/copyleft/lesser.html
	42		*/
	43
	44
	45		var jg_ok, jg_ie, jg_fast, jg_dom, jg_moz;
	46
	47
	48		function _chkDHTM(wnd, x, i)
	49		// Under XUL, owner of 'document' must be specified explicitly
	50		{
	51		x = wnd.document.body \|\| null;
	52		jg_ie = x && typeof x.insertAdjacentHTML != "undefined" && wnd.document.createElement;
	53		jg_dom = (x && !jg_ie &&
	54		typeof x.appendChild != "undefined" &&
	55		typeof wnd.document.createRange != "undefined" &&
	56		typeof (i = wnd.document.createRange()).setStartBefore != "undefined" &&
	57		typeof i.createContextualFragment != "undefined");
	58		jg_fast = jg_ie && wnd.document.all && !wnd.opera;
	59		jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined";
	60		jg_ok = !!(jg_ie \|\| jg_dom);
	61		}
	62
	63		function _pntCnvDom()
	64		{
	65		var x = this.wnd.document.createRange();
	66		x.setStartBefore(this.cnv);
	67		x = x.createContextualFragment(jg_fast? this._htmRpc() : this.htm);
	68		if(this.cnv) this.cnv.appendChild(x);
	69		this.htm = "";
	70		}
	71
	72		function _pntCnvIe()
	73		{
	74		if(this.cnv) this.cnv.insertAdjacentHTML("BeforeEnd", jg_fast? this._htmRpc() : this.htm);
	75		this.htm = "";
	76		}
	77
	78		function _pntDoc()
	79		{
	80		this.wnd.document.write(jg_fast? this._htmRpc() : this.htm);
	81		this.htm = '';
	82		}
	83
	84		function _pntN()
	85		{
	86		;
	87		}
	88
	89		function _mkDiv(x, y, w, h)
	90		{
	91		this.htm += '<div style="position:absolute;'+
	92		'left:' + x + 'px;'+
	93		'top:' + y + 'px;'+
	94		'width:' + w + 'px;'+
	95		'height:' + h + 'px;'+
	96		'clip:rect(0,'+w+'px,'+h+'px,0);'+
	97		'background-color:' + this.color +
	98		(!jg_moz? ';overflow:hidden' : '')+
	99		';"><\/div>';
	100		}
	101
	102		function _mkDivIe(x, y, w, h)
	103		{
	104		this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
	105		}
	106
	107		function _mkDivPrt(x, y, w, h)
	108		{
	109		this.htm += '<div style="position:absolute;'+
	110		'border-left:' + w + 'px solid ' + this.color + ';'+
	111		'left:' + x + 'px;'+
	112		'top:' + y + 'px;'+
	113		'width:0px;'+
	114		'height:' + h + 'px;'+
	115		'clip:rect(0,'+w+'px,'+h+'px,0);'+
	116		'background-color:' + this.color +
	117		(!jg_moz? ';overflow:hidden' : '')+
	118		';"><\/div>';
	119		}
	120
	121		var _regex = /%%([^;]+);([^;]+);([^;]+);([^;]+);([^;]+);/g;
	122		function _htmRpc()
	123		{
	124		return this.htm.replace(
	125		_regex,
	126		'<div style="overflow:hidden;position:absolute;background-color:'+
	127		'$1;left:$2px;top:$3px;width:$4px;height:$5px"></div>\n');
	128		}
	129
	130		function _htmPrtRpc()
	131		{
	132		return this.htm.replace(
	133		_regex,
	134		'<div style="overflow:hidden;position:absolute;background-color:'+
	135		'$1;left:$2px;top:$3px;width:$4px;height:$5px;border-left:$4px solid $1"></div>\n');
	136		}
	137
	138		function _mkLin(x1, y1, x2, y2)
	139		{
	140		if(x1 > x2)
	141		{
	142		var _x2 = x2;
	143		var _y2 = y2;
	144		x2 = x1;
	145		y2 = y1;
	146		x1 = _x2;
	147		y1 = _y2;
	148		}
	149		var dx = x2-x1, dy = Math.abs(y2-y1),
	150		x = x1, y = y1,
	151		yIncr = (y1 > y2)? -1 : 1;
	152
	153		if(dx >= dy)
	154		{
	155		var pr = dy<<1,
	156		pru = pr - (dx<<1),
	157		p = pr-dx,
	158		ox = x;
	159		while(dx > 0)
	160		{--dx;
	161		++x;
	162		if(p > 0)
	163		{
	164		this._mkDiv(ox, y, x-ox, 1);
	165		y += yIncr;
	166		p += pru;
	167		ox = x;
	168		}
	169		else p += pr;
	170		}
	171		this._mkDiv(ox, y, x2-ox+1, 1);
	172		}
	173
	174		else
	175		{
	176		var pr = dx<<1,
	177		pru = pr - (dy<<1),
	178		p = pr-dy,
	179		oy = y;
	180		if(y2 <= y1)
	181		{
	182		while(dy > 0)
	183		{--dy;
	184		if(p > 0)
	185		{
	186		this._mkDiv(x++, y, 1, oy-y+1);
	187		y += yIncr;
	188		p += pru;
	189		oy = y;
	190		}
	191		else
	192		{
	193		y += yIncr;
	194		p += pr;
	195		}
	196		}
	197		this._mkDiv(x2, y2, 1, oy-y2+1);
	198		}
	199		else
	200		{
	201		while(dy > 0)
	202		{--dy;
	203		y += yIncr;
	204		if(p > 0)
	205		{
	206		this._mkDiv(x++, oy, 1, y-oy);
	207		p += pru;
	208		oy = y;
	209		}
	210		else p += pr;
	211		}
	212		this._mkDiv(x2, oy, 1, y2-oy+1);
	213		}
	214		}
	215		}
	216
	217		function _mkLin2D(x1, y1, x2, y2)
	218		{
	219		if(x1 > x2)
	220		{
	221		var _x2 = x2;
	222		var _y2 = y2;
	223		x2 = x1;
	224		y2 = y1;
	225		x1 = _x2;
	226		y1 = _y2;
	227		}
	228		var dx = x2-x1, dy = Math.abs(y2-y1),
	229		x = x1, y = y1,
	230		yIncr = (y1 > y2)? -1 : 1;
	231
	232		var s = this.stroke;
	233		if(dx >= dy)
	234		{
	235		if(dx > 0 && s-3 > 0)
	236		{
	237		var _s = (sdxMath.sqrt(1+dydy/(dxdx))-dx-(s>>1)*dy) / dx;
	238		_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
	239		}
	240		else var _s = s;
	241		var ad = Math.ceil(s/2);
	242
	243		var pr = dy<<1,
	244		pru = pr - (dx<<1),
	245		p = pr-dx,
	246		ox = x;
	247		while(dx > 0)
	248		{--dx;
	249		++x;
	250		if(p > 0)
	251		{
	252		this._mkDiv(ox, y, x-ox+ad, _s);
	253		y += yIncr;
	254		p += pru;
	255		ox = x;
	256		}
	257		else p += pr;
	258		}
	259		this._mkDiv(ox, y, x2-ox+ad+1, _s);
	260		}
	261
	262		else
	263		{
	264		if(s-3 > 0)
	265		{
	266		var _s = (sdyMath.sqrt(1+dxdx/(dydy))-(s>>1)*dx-dy) / dy;
	267		_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
	268		}
	269		else var _s = s;
	270		var ad = Math.round(s/2);
	271
	272		var pr = dx<<1,
	273		pru = pr - (dy<<1),
	274		p = pr-dy,
	275		oy = y;
	276		if(y2 <= y1)
	277		{
	278		++ad;
	279		while(dy > 0)
	280		{--dy;
	281		if(p > 0)
	282		{
	283		this._mkDiv(x++, y, _s, oy-y+ad);
	284		y += yIncr;
	285		p += pru;
	286		oy = y;
	287		}
	288		else
	289		{
	290		y += yIncr;
	291		p += pr;
	292		}
	293		}
	294		this._mkDiv(x2, y2, _s, oy-y2+ad);
	295		}
	296		else
	297		{
	298		while(dy > 0)
	299		{--dy;
	300		y += yIncr;
	301		if(p > 0)
	302		{
	303		this._mkDiv(x++, oy, _s, y-oy+ad);
	304		p += pru;
	305		oy = y;
	306		}
	307		else p += pr;
	308		}
	309		this._mkDiv(x2, oy, _s, y2-oy+ad+1);
	310		}
	311		}
	312		}
	313
	314		function _mkLinDott(x1, y1, x2, y2)
	315		{
	316		if(x1 > x2)
	317		{
	318		var _x2 = x2;
	319		var _y2 = y2;
	320		x2 = x1;
	321		y2 = y1;
	322		x1 = _x2;
	323		y1 = _y2;
	324		}
	325		var dx = x2-x1, dy = Math.abs(y2-y1),
	326		x = x1, y = y1,
	327		yIncr = (y1 > y2)? -1 : 1,
	328		drw = true;
	329		if(dx >= dy)
	330		{
	331		var pr = dy<<1,
	332		pru = pr - (dx<<1),
	333		p = pr-dx;
	334		while(dx > 0)
	335		{--dx;
	336		if(drw) this._mkDiv(x, y, 1, 1);
	337		drw = !drw;
	338		if(p > 0)
	339		{
	340		y += yIncr;
	341		p += pru;
	342		}
	343		else p += pr;
	344		++x;
	345		}
	346		}
	347		else
	348		{
	349		var pr = dx<<1,
	350		pru = pr - (dy<<1),
	351		p = pr-dy;
	352		while(dy > 0)
	353		{--dy;
	354		if(drw) this._mkDiv(x, y, 1, 1);
	355		drw = !drw;
	356		y += yIncr;
	357		if(p > 0)
	358		{
	359		++x;
	360		p += pru;
	361		}
	362		else p += pr;
	363		}
	364		}
	365		if(drw) this._mkDiv(x, y, 1, 1);
	366		}
	367
	368		function _mkOv(left, top, width, height)
	369		{
	370		var a = (++width)>>1, b = (++height)>>1,
	371		wod = width&1, hod = height&1,
	372		cx = left+a, cy = top+b,
	373		x = 0, y = b,
	374		ox = 0, oy = b,
	375		aa2 = (aa)<<1, aa4 = aa2<<1, bb2 = (bb)<<1, bb4 = bb2<<1,
	376		st = (aa2>>1)*(1-(b<<1)) + bb2,
	377		tt = (bb2>>1) - aa2*((b<<1)-1),
	378		w, h;
	379		while(y > 0)
	380		{
	381		if(st < 0)
	382		{
	383		st += bb2*((x<<1)+3);
	384		tt += bb4*(++x);
	385		}
	386		else if(tt < 0)
	387		{
	388		st += bb2((x<<1)+3) - aa4(y-1);
	389		tt += bb4(++x) - aa2(((y--)<<1)-3);
	390		w = x-ox;
	391		h = oy-y;
	392		if((w&2) && (h&2))
	393		{
	394		this._mkOvQds(cx, cy, x-2, y+2, 1, 1, wod, hod);
	395		this._mkOvQds(cx, cy, x-1, y+1, 1, 1, wod, hod);
	396		}
	397		else this._mkOvQds(cx, cy, x-1, oy, w, h, wod, hod);
	398		ox = x;
	399		oy = y;
	400		}
	401		else
	402		{
	403		tt -= aa2*((y<<1)-3);
	404		st -= aa4*(--y);
	405		}
	406		}
	407		w = a-ox+1;
	408		h = (oy<<1)+hod;
	409		y = cy-oy;
	410		this._mkDiv(cx-a, y, w, h);
	411		this._mkDiv(cx+ox+wod-1, y, w, h);
	412		}
	413
	414		function _mkOv2D(left, top, width, height)
	415		{
	416		var s = this.stroke;
	417		width += s+1;
	418		height += s+1;
	419		var a = width>>1, b = height>>1,
	420		wod = width&1, hod = height&1,
	421		cx = left+a, cy = top+b,
	422		x = 0, y = b,
	423		aa2 = (aa)<<1, aa4 = aa2<<1, bb2 = (bb)<<1, bb4 = bb2<<1,
	424		st = (aa2>>1)*(1-(b<<1)) + bb2,
	425		tt = (bb2>>1) - aa2*((b<<1)-1);
	426
	427		if(s-4 < 0 && (!(s-2) \|\| width-51 > 0 && height-51 > 0))
	428		{
	429		var ox = 0, oy = b,
	430		w, h,
	431		pxw;
	432		while(y > 0)
	433		{
	434		if(st < 0)
	435		{
	436		st += bb2*((x<<1)+3);
	437		tt += bb4*(++x);
	438		}
	439		else if(tt < 0)
	440		{
	441		st += bb2((x<<1)+3) - aa4(y-1);
	442		tt += bb4(++x) - aa2(((y--)<<1)-3);
	443		w = x-ox;
	444		h = oy-y;
	445
	446		if(w-1)
	447		{
	448		pxw = w+1+(s&1);
	449		h = s;
	450		}
	451		else if(h-1)
	452		{
	453		pxw = s;
	454		h += 1+(s&1);
	455		}
	456		else pxw = h = s;
	457		this._mkOvQds(cx, cy, x-1, oy, pxw, h, wod, hod);
	458		ox = x;
	459		oy = y;
	460		}
	461		else
	462		{
	463		tt -= aa2*((y<<1)-3);
	464		st -= aa4*(--y);
	465		}
	466		}
	467		this._mkDiv(cx-a, cy-oy, s, (oy<<1)+hod);
	468		this._mkDiv(cx+a+wod-s, cy-oy, s, (oy<<1)+hod);
	469		}
	470
	471		else
	472		{
	473		var _a = (width-(s<<1))>>1,
	474		_b = (height-(s<<1))>>1,
	475		_x = 0, _y = _b,
	476		_aa2 = (_a_a)<<1, _aa4 = _aa2<<1, _bb2 = (_b_b)<<1, _bb4 = _bb2<<1,
	477		_st = (_aa2>>1)*(1-(_b<<1)) + _bb2,
	478		_tt = (_bb2>>1) - _aa2*((_b<<1)-1),
	479
	480		pxl = new Array(),
	481		pxt = new Array(),
	482		_pxb = new Array();
	483		pxl[0] = 0;
	484		pxt[0] = b;
	485		_pxb[0] = _b-1;
	486		while(y > 0)
	487		{
	488		if(st < 0)
	489		{
	490		pxl[pxl.length] = x;
	491		pxt[pxt.length] = y;
	492		st += bb2*((x<<1)+3);
	493		tt += bb4*(++x);
	494		}
	495		else if(tt < 0)
	496		{
	497		pxl[pxl.length] = x;
	498		st += bb2((x<<1)+3) - aa4(y-1);
	499		tt += bb4(++x) - aa2(((y--)<<1)-3);
	500		pxt[pxt.length] = y;
	501		}
	502		else
	503		{
	504		tt -= aa2*((y<<1)-3);
	505		st -= aa4*(--y);
	506		}
	507
	508		if(_y > 0)
	509		{
	510		if(_st < 0)
	511		{
	512		_st += _bb2*((_x<<1)+3);
	513		_tt += _bb4*(++_x);
	514		_pxb[_pxb.length] = _y-1;
	515		}
	516		else if(_tt < 0)
	517		{
	518		_st += _bb2((_x<<1)+3) - _aa4(_y-1);
	519		_tt += _bb4(++_x) - _aa2(((_y--)<<1)-3);
	520		_pxb[_pxb.length] = _y-1;
	521		}
	522		else
	523		{
	524		_tt -= _aa2*((_y<<1)-3);
	525		_st -= _aa4*(--_y);
	526		_pxb[_pxb.length-1]--;
	527		}
	528		}
	529		}
	530
	531		var ox = -wod, oy = b,
	532		_oy = _pxb[0],
	533		l = pxl.length,
	534		w, h;
	535		for(var i = 0; i < l; i++)
	536		{
	537		if(typeof _pxb[i] != "undefined")
	538		{
	539		if(_pxb[i] < _oy \|\| pxt[i] < oy)
	540		{
	541		x = pxl[i];
	542		this._mkOvQds(cx, cy, x, oy, x-ox, oy-_oy, wod, hod);
	543		ox = x;
	544		oy = pxt[i];
	545		_oy = _pxb[i];
	546		}
	547		}
	548		else
	549		{
	550		x = pxl[i];
	551		this._mkDiv(cx-x, cy-oy, 1, (oy<<1)+hod);
	552		this._mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
	553		ox = x;
	554		oy = pxt[i];
	555		}
	556		}
	557		this._mkDiv(cx-a, cy-oy, 1, (oy<<1)+hod);
	558		this._mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
	559		}
	560		}
	561
	562		function _mkOvDott(left, top, width, height)
	563		{
	564		var a = (++width)>>1, b = (++height)>>1,
	565		wod = width&1, hod = height&1, hodu = hod^1,
	566		cx = left+a, cy = top+b,
	567		x = 0, y = b,
	568		aa2 = (aa)<<1, aa4 = aa2<<1, bb2 = (bb)<<1, bb4 = bb2<<1,
	569		st = (aa2>>1)*(1-(b<<1)) + bb2,
	570		tt = (bb2>>1) - aa2*((b<<1)-1),
	571		drw = true;
	572		while(y > 0)
	573		{
	574		if(st < 0)
	575		{
	576		st += bb2*((x<<1)+3);
	577		tt += bb4*(++x);
	578		}
	579		else if(tt < 0)
	580		{
	581		st += bb2((x<<1)+3) - aa4(y-1);
	582		tt += bb4(++x) - aa2(((y--)<<1)-3);
	583		}
	584		else
	585		{
	586		tt -= aa2*((y<<1)-3);
	587		st -= aa4*(--y);
	588		}
	589		if(drw && y >= hodu) this._mkOvQds(cx, cy, x, y, 1, 1, wod, hod);
	590		drw = !drw;
	591		}
	592		}
	593
	594		function _mkRect(x, y, w, h)
	595		{
	596		var s = this.stroke;
	597		this._mkDiv(x, y, w, s);
	598		this._mkDiv(x+w, y, s, h);
	599		this._mkDiv(x, y+h, w+s, s);
	600		this._mkDiv(x, y+s, s, h-s);
	601		}
	602
	603		function _mkRectDott(x, y, w, h)
	604		{
	605		this.drawLine(x, y, x+w, y);
	606		this.drawLine(x+w, y, x+w, y+h);
	607		this.drawLine(x, y+h, x+w, y+h);
	608		this.drawLine(x, y, x, y+h);
	609		}
	610
	611		function jsgFont()
	612		{
	613		this.PLAIN = 'font-weight:normal;';
	614		this.BOLD = 'font-weight:bold;';
	615		this.ITALIC = 'font-style:italic;';
	616		this.ITALIC_BOLD = this.ITALIC + this.BOLD;
	617		this.BOLD_ITALIC = this.ITALIC_BOLD;
	618		}
	619		var Font = new jsgFont();
	620
	621		function jsgStroke()
	622		{
	623		this.DOTTED = -1;
	624		}
	625		var Stroke = new jsgStroke();
	626
	627		function jsGraphics(cnv, wnd)
	628		{
	629		this.setColor = function(x)
	630		{
	631		this.color = x.toLowerCase();
	632		};
	633
	634		this.setStroke = function(x)
	635		{
	636		this.stroke = x;
	637		if(!(x+1))
	638		{
	639		this.drawLine = _mkLinDott;
	640		this._mkOv = _mkOvDott;
	641		this.drawRect = _mkRectDott;
	642		}
	643		else if(x-1 > 0)
	644		{
	645		this.drawLine = _mkLin2D;
	646		this._mkOv = _mkOv2D;
	647		this.drawRect = _mkRect;
	648		}
	649		else
	650		{
	651		this.drawLine = _mkLin;
	652		this._mkOv = _mkOv;
	653		this.drawRect = _mkRect;
	654		}
	655		};
	656
	657		this.setPrintable = function(arg)
	658		{
	659		this.printable = arg;
	660		if(jg_fast)
	661		{
	662		this._mkDiv = _mkDivIe;
	663		this._htmRpc = arg? _htmPrtRpc : _htmRpc;
	664		}
	665		else this._mkDiv = arg? _mkDivPrt : _mkDiv;
	666		};
	667
	668		this.setFont = function(fam, sz, sty)
	669		{
	670		this.ftFam = fam;
	671		this.ftSz = sz;
	672		this.ftSty = sty \|\| Font.PLAIN;
	673		};
	674
	675		this.drawPolyline = this.drawPolyLine = function(x, y)
	676		{
	677		for (var i=x.length - 1; i;)
	678		{--i;
	679		this.drawLine(x[i], y[i], x[i+1], y[i+1]);
	680		}
	681		};
	682
	683		this.fillRect = function(x, y, w, h)
	684		{
	685		this._mkDiv(x, y, w, h);
	686		};
	687
	688		this.drawPolygon = function(x, y)
	689		{
	690		this.drawPolyline(x, y);
	691		this.drawLine(x[x.length-1], y[x.length-1], x[0], y[0]);
	692		};
	693
	694		this.drawEllipse = this.drawOval = function(x, y, w, h)
	695		{
	696		this._mkOv(x, y, w, h);
	697		};
	698
	699		this.fillEllipse = this.fillOval = function(left, top, w, h)
	700		{
	701		var a = w>>1, b = h>>1,
	702		wod = w&1, hod = h&1,
	703		cx = left+a, cy = top+b,
	704		x = 0, y = b, oy = b,
	705		aa2 = (aa)<<1, aa4 = aa2<<1, bb2 = (bb)<<1, bb4 = bb2<<1,
	706		st = (aa2>>1)*(1-(b<<1)) + bb2,
	707		tt = (bb2>>1) - aa2*((b<<1)-1),
	708		xl, dw, dh;
	709		if(w) while(y > 0)
	710		{
	711		if(st < 0)
	712		{
	713		st += bb2*((x<<1)+3);
	714		tt += bb4*(++x);
	715		}
	716		else if(tt < 0)
	717		{
	718		st += bb2((x<<1)+3) - aa4(y-1);
	719		xl = cx-x;
	720		dw = (x<<1)+wod;
	721		tt += bb4(++x) - aa2(((y--)<<1)-3);
	722		dh = oy-y;
	723		this._mkDiv(xl, cy-oy, dw, dh);
	724		this._mkDiv(xl, cy+y+hod, dw, dh);
	725		oy = y;
	726		}
	727		else
	728		{
	729		tt -= aa2*((y<<1)-3);
	730		st -= aa4*(--y);
	731		}
	732		}
	733		this._mkDiv(cx-a, cy-oy, w, (oy<<1)+hod);
	734		};
	735
	736		this.fillArc = function(iL, iT, iW, iH, fAngA, fAngZ)
	737		{
	738		var a = iW>>1, b = iH>>1,
	739		iOdds = (iW&1) \| ((iH&1) << 16),
	740		cx = iL+a, cy = iT+b,
	741		x = 0, y = b, ox = x, oy = y,
	742		aa2 = (aa)<<1, aa4 = aa2<<1, bb2 = (bb)<<1, bb4 = bb2<<1,
	743		st = (aa2>>1)*(1-(b<<1)) + bb2,
	744		tt = (bb2>>1) - aa2*((b<<1)-1),
	745		// Vars for radial boundary lines
	746		xEndA, yEndA, xEndZ, yEndZ,
	747		iSects = (1 << (Math.floor((fAngA %= 360.0)/180.0) << 3))
	748		\| (2 << (Math.floor((fAngZ %= 360.0)/180.0) << 3))
	749		\| ((fAngA >= fAngZ) << 16),
	750		aBndA = new Array(b+1), aBndZ = new Array(b+1);
	751
	752		// Set up radial boundary lines
	753		fAngA *= Math.PI/180.0;
	754		fAngZ *= Math.PI/180.0;
	755		xEndA = cx+Math.round(a*Math.cos(fAngA));
	756		yEndA = cy+Math.round(-b*Math.sin(fAngA));
	757		_mkLinVirt(aBndA, cx, cy, xEndA, yEndA);
	758		xEndZ = cx+Math.round(a*Math.cos(fAngZ));
	759		yEndZ = cy+Math.round(-b*Math.sin(fAngZ));
	760		_mkLinVirt(aBndZ, cx, cy, xEndZ, yEndZ);
	761
	762		while(y > 0)
	763		{
	764		if(st < 0) // Advance x
	765		{
	766		st += bb2*((x<<1)+3);
	767		tt += bb4*(++x);
	768		}
	769		else if(tt < 0) // Advance x and y
	770		{
	771		st += bb2((x<<1)+3) - aa4(y-1);
	772		ox = x;
	773		tt += bb4(++x) - aa2(((y--)<<1)-3);
	774		this._mkArcDiv(ox, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);
	775		oy = y;
	776		}
	777		else // Advance y
	778		{
	779		tt -= aa2*((y<<1)-3);
	780		st -= aa4*(--y);
	781		if(y && (aBndA[y] != aBndA[y-1] \|\| aBndZ[y] != aBndZ[y-1]))
	782		{
	783		this._mkArcDiv(x, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);
	784		ox = x;
	785		oy = y;
	786		}
	787		}
	788		}
	789		this._mkArcDiv(x, 0, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);
	790		if(iOdds >> 16) // Odd height
	791		{
	792		if(iSects >> 16) // Start-angle > end-angle
	793		{
	794		var xl = (yEndA <= cy \|\| yEndZ > cy)? (cx - x) : cx;
	795		this._mkDiv(xl, cy, x + cx - xl + (iOdds & 0xffff), 1);
	796		}
	797		else if((iSects & 0x01) && yEndZ > cy)
	798		this._mkDiv(cx - x, cy, x, 1);
	799		}
	800		};
	801
	802		/* fillPolygon method, implemented by Matthieu Haller.
	803		This javascript function is an adaptation of the gdImageFilledPolygon for Walter Zorn lib.
	804		C source of GD 1.8.4 found at http://www.boutell.com/gd/
	805
	806		THANKS to Kirsten Schulz for the polygon fixes!
	807
	808		The intersection finding technique of this code could be improved
	809		by remembering the previous intertersection, and by using the slope.
	810		That could help to adjust intersections to produce a nice
	811		interior_extrema. */
	812		this.fillPolygon = function(array_x, array_y)
	813		{
	814		var i;
	815		var y;
	816		var miny, maxy;
	817		var x1, y1;
	818		var x2, y2;
	819		var ind1, ind2;
	820		var ints;
	821
	822		var n = array_x.length;
	823		if(!n) return;
	824
	825		miny = array_y[0];
	826		maxy = array_y[0];
	827		for(i = 1; i < n; i++)
	828		{
	829		if(array_y[i] < miny)
	830		miny = array_y[i];
	831
	832		if(array_y[i] > maxy)
	833		maxy = array_y[i];
	834		}
	835		for(y = miny; y <= maxy; y++)
	836		{
	837		var polyInts = new Array();
	838		ints = 0;
	839		for(i = 0; i < n; i++)
	840		{
	841		if(!i)
	842		{
	843		ind1 = n-1;
	844		ind2 = 0;
	845		}
	846		else
	847		{
	848		ind1 = i-1;
	849		ind2 = i;
	850		}
	851		y1 = array_y[ind1];
	852		y2 = array_y[ind2];
	853		if(y1 < y2)
	854		{
	855		x1 = array_x[ind1];
	856		x2 = array_x[ind2];
	857		}
	858		else if(y1 > y2)
	859		{
	860		y2 = array_y[ind1];
	861		y1 = array_y[ind2];
	862		x2 = array_x[ind1];
	863		x1 = array_x[ind2];
	864		}
	865		else continue;
	866
	867		// Modified 11. 2. 2004 Walter Zorn
	868		if((y >= y1) && (y < y2))
	869		polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);
	870
	871		else if((y == maxy) && (y > y1) && (y <= y2))
	872		polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);
	873		}
	874		polyInts.sort(_CompInt);
	875		for(i = 0; i < ints; i+=2)
	876		this._mkDiv(polyInts[i], y, polyInts[i+1]-polyInts[i]+1, 1);
	877		}
	878		};
	879
	880		this.drawString = function(txt, x, y)
	881		{
	882		this.htm += '<div style="position:absolute;white-space:nowrap;'+
	883		'left:' + x + 'px;'+
	884		'top:' + y + 'px;'+
	885		'font-family:' + this.ftFam + ';'+
	886		'font-size:' + this.ftSz + ';'+
	887		'color:' + this.color + ';' + this.ftSty + '">'+
	888		txt +
	889		'<\/div>';
	890		};
	891
	892		/* drawStringRect() added by Rick Blommers.
	893		Allows to specify the size of the text rectangle and to align the
	894		text both horizontally (e.g. right) and vertically within that rectangle */
	895		this.drawStringRect = function(txt, x, y, width, halign)
	896		{
	897		this.htm += '<div style="position:absolute;overflow:hidden;'+
	898		'left:' + x + 'px;'+
	899		'top:' + y + 'px;'+
	900		'width:'+width +'px;'+
	901		'text-align:'+halign+';'+
	902		'font-family:' + this.ftFam + ';'+
	903		'font-size:' + this.ftSz + ';'+
	904		'color:' + this.color + ';' + this.ftSty + '">'+
	905		txt +
	906		'<\/div>';
	907		};
	908
	909		this.drawImage = function(imgSrc, x, y, w, h, a)
	910		{
	911		this.htm += '<div style="position:absolute;'+
	912		'left:' + x + 'px;'+
	913		'top:' + y + 'px;'+
	914		// w (width) and h (height) arguments are now optional.
	915		// Added by Mahmut Keygubatli, 14.1.2008
	916		(w? ('width:' + w + 'px;') : '') +
	917		(h? ('height:' + h + 'px;'):'')+'">'+
	918		'<img src="' + imgSrc +'"'+ (w ? (' width="' + w + '"'):'')+ (h ? (' height="' + h + '"'):'') + (a? (' '+a) : '') + '>'+
	919		'<\/div>';
	920		};
	921
	922		this.clear = function()
	923		{
	924		this.htm = "";
	925		if(this.cnv) this.cnv.innerHTML = "";
	926		};
	927
	928		this._mkOvQds = function(cx, cy, x, y, w, h, wod, hod)
	929		{
	930		var xl = cx - x, xr = cx + x + wod - w, yt = cy - y, yb = cy + y + hod - h;
	931		if(xr > xl+w)
	932		{
	933		this._mkDiv(xr, yt, w, h);
	934		this._mkDiv(xr, yb, w, h);
	935		}
	936		else
	937		w = xr - xl + w;
	938		this._mkDiv(xl, yt, w, h);
	939		this._mkDiv(xl, yb, w, h);
	940		};
	941
	942		this._mkArcDiv = function(x, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects)
	943		{
	944		var xrDef = cx + x + (iOdds & 0xffff), y2, h = oy - y, xl, xr, w;
	945
	946		if(!h) h = 1;
	947		x = cx - x;
	948
	949		if(iSects & 0xff0000) // Start-angle > end-angle
	950		{
	951		y2 = cy - y - h;
	952		if(iSects & 0x00ff)
	953		{
	954		if(iSects & 0x02)
	955		{
	956		xl = Math.max(x, aBndZ[y]);
	957		w = xrDef - xl;
	958		if(w > 0) this._mkDiv(xl, y2, w, h);
	959		}
	960		if(iSects & 0x01)
	961		{
	962		xr = Math.min(xrDef, aBndA[y]);
	963		w = xr - x;
	964		if(w > 0) this._mkDiv(x, y2, w, h);
	965		}
	966		}
	967		else
	968		this._mkDiv(x, y2, xrDef - x, h);
	969		y2 = cy + y + (iOdds >> 16);
	970		if(iSects & 0xff00)
	971		{
	972		if(iSects & 0x0100)
	973		{
	974		xl = Math.max(x, aBndA[y]);
	975		w = xrDef - xl;
	976		if(w > 0) this._mkDiv(xl, y2, w, h);
	977		}
	978		if(iSects & 0x0200)
	979		{
	980		xr = Math.min(xrDef, aBndZ[y]);
	981		w = xr - x;
	982		if(w > 0) this._mkDiv(x, y2, w, h);
	983		}
	984		}
	985		else
	986		this._mkDiv(x, y2, xrDef - x, h);
	987		}
	988		else
	989		{
	990		if(iSects & 0x00ff)
	991		{
	992		if(iSects & 0x02)
	993		xl = Math.max(x, aBndZ[y]);
	994		else
	995		xl = x;
	996		if(iSects & 0x01)
	997		xr = Math.min(xrDef, aBndA[y]);
	998		else
	999		xr = xrDef;
	1000		y2 = cy - y - h;
	1001		w = xr - xl;
	1002		if(w > 0) this._mkDiv(xl, y2, w, h);
	1003		}
	1004		if(iSects & 0xff00)
	1005		{
	1006		if(iSects & 0x0100)
	1007		xl = Math.max(x, aBndA[y]);
	1008		else
	1009		xl = x;
	1010		if(iSects & 0x0200)
	1011		xr = Math.min(xrDef, aBndZ[y]);
	1012		else
	1013		xr = xrDef;
	1014		y2 = cy + y + (iOdds >> 16);
	1015		w = xr - xl;
	1016		if(w > 0) this._mkDiv(xl, y2, w, h);
	1017		}
	1018		}
	1019		};
	1020
	1021		this.setStroke(1);
	1022		this.setFont("verdana,geneva,helvetica,sans-serif", "12px", Font.PLAIN);
	1023		this.color = "#000000";
	1024		this.htm = "";
	1025		this.wnd = wnd \|\| window;
	1026
	1027		if(!jg_ok) _chkDHTM(this.wnd);
	1028		if(jg_ok)
	1029		{
	1030		if(cnv)
	1031		{
	1032		if(typeof(cnv) == "string")
	1033		this.cont = document.all? (this.wnd.document.all[cnv] \|\| null)
	1034		: document.getElementById? (this.wnd.document.getElementById(cnv) \|\| null)
	1035		: null;
	1036		else if(cnv == window.document)
	1037		this.cont = document.getElementsByTagName("body")[0];
	1038		// If cnv is a direct reference to a canvas DOM node
	1039		// (option suggested by Andreas Luleich)
	1040		else this.cont = cnv;
	1041		// Create new canvas inside container DIV. Thus the drawing and clearing
	1042		// methods won't interfere with the container's inner html.
	1043		// Solution suggested by Vladimir.
	1044		this.cnv = this.wnd.document.createElement("div");
	1045		this.cnv.style.fontSize=0;
	1046		this.cont.appendChild(this.cnv);
	1047		this.paint = jg_dom? _pntCnvDom : _pntCnvIe;
	1048		}
	1049		else
	1050		this.paint = _pntDoc;
	1051		}
	1052		else
	1053		this.paint = _pntN;
	1054
	1055		this.setPrintable(false);
	1056		}
	1057
	1058		function _mkLinVirt(aLin, x1, y1, x2, y2)
	1059		{
	1060		var dx = Math.abs(x2-x1), dy = Math.abs(y2-y1),
	1061		x = x1, y = y1,
	1062		xIncr = (x1 > x2)? -1 : 1,
	1063		yIncr = (y1 > y2)? -1 : 1,
	1064		p,
	1065		i = 0;
	1066		if(dx >= dy)
	1067		{
	1068		var pr = dy<<1,
	1069		pru = pr - (dx<<1);
	1070		p = pr-dx;
	1071		while(dx > 0)
	1072		{--dx;
	1073		if(p > 0) // Increment y
	1074		{
	1075		aLin[i++] = x;
	1076		y += yIncr;
	1077		p += pru;
	1078		}
	1079		else p += pr;
	1080		x += xIncr;
	1081		}
	1082		}
	1083		else
	1084		{
	1085		var pr = dx<<1,
	1086		pru = pr - (dy<<1);
	1087		p = pr-dy;
	1088		while(dy > 0)
	1089		{--dy;
	1090		y += yIncr;
	1091		aLin[i++] = x;
	1092		if(p > 0) // Increment x
	1093		{
	1094		x += xIncr;
	1095		p += pru;
	1096		}
	1097		else p += pr;
	1098		}
	1099		}
	1100		for(var len = aLin.length, i = len-i; i;)
	1101		aLin[len-(i--)] = x;
	1102		};
	1103
	1104		function _CompInt(x, y)
	1105		{
	1106		return(x - y);
	1107		}
	1108


	1		body , td{
	2		font-family : Helvetica;
	3		background-color:#CCCCCC;
	4		font-size:8pt;
	5		}
	6
	7		h1 {
	8		font-size: 15pt;
	9		}
	10
	11		h2 {
	12		font-size:12pt;
	13		}
	14
	15
	16		.container {
	17		border:1px solid #888888;
	18		padding:10px;
	19		background-color:#DDDDDD;
	20		margin:10px;
	21		}
	22
	23		td {
	24		background-color:#DDDDDD;
	25		}
	26
	27		.fl {
	28		float:left;
	29		margin-top:10px;
	30		margin-right:10px;
	31		}
	32
	33		.fl2 {
	34		float:left;
	35		margin-top:10px;
	36		margin-right:10px;
	37		}
	38
	39		.fl3 {
	40		float:right;
	41		margin-top:10px;
	42		margin-right:10px;
	43		height:650px;
	44		}
	45		.item {
	46		padding:5px;
	47		}
	48
	49		th {
	50		font-size:10pt;
	51		text-align:left;
	52		}


	1		<html>
	2		<head>
	3		<title>digitalStrom - Meter</title>
	4		<script type="text/javascript" language="JavaScript">
	5		function onModelLoaded() {
	6		}
	7		</script>
	8		<script src="prototype.js" language="JavaScript" type="text/javascript"></script>
	9		<script src="model.js" language="JavaScript" type="text/javascript"></script>
	10		<script src="switch.js" language="JavaScript" type="text/javascript"></script>
	11		<link rel="stylesheet" type="text/css" href="main.css"/>
	12		<script type="text/javascript" language="JavaScript">
	13
	14		var i = 0;
	15
	16		function doUpdate() {
	17
	18		// $('bla').innerHTML = 'Consumption:<p><object data="metering/0000000000000000ffc00010_consumption_5minutely.xml" type="image/svg+xml" width="400" height="300"><embed src="metering/0000000000000000ffc00010_consumption_5minutely.xml" type="image/svg+xml" width="400" height="300" /></object>';
	19		// $('bla2').innerHTML = 'Energy:<p><object data="metering/0000000000000000ffc00010_consumption_5minutely.xml" type="image/svg+xml" width="400" height="300"><embed src="metering/0000000000000000ffc00010_consumption_5minutely.xml" type="image/svg+xml" width="400" height="300" /></object>';
	20		//<img src="metering/0000000000000000ffc00010_consumption_5minutely.xml" ></img>';
	21		// call ourself
	22		//setTimeout('doUpdate()', 1000);
	23		}
	24
	25		</script>
	26		</head>
	27		<body onload="doUpdate()">
	28		<h1>dSS based Smart-Meter</h1>
	29		<div class="container fl2">
	30		<div id="bla">(loading...)</div>
	31		<div id="bla2">(loading...)</div>
	32		</div>
	33		<div class="container fl3">
	34		<div id="bla3">
	35		Meter-XML:<pre>
	36		<?xml version="1.0"?>
	37		<metering version="1">
	38		�<config>
	39		��<from_dsid>AABBCCDDEEFF</from_dsid>
	40		��<comment>Meter im Keller</comment>
	41		��<unit>kWh</unit>
	42		��<generated_at>02022009T105321Z</generated_at>
	43		��<latest_cost_info>02022009T105321Z</latest_cost_info>
	44		�</config>
	45		�<values resolution="3600" max_values="400">
	46		��<value timestamp="02022009T105321Z">
	47		<min>123456</min>
	48		<max>123456</max>
	49		<avg>123456</avg>
	50		</value>
	51		��<value timestamp="02022009T115321Z">
	52		...
	53		</value>
	54		</values>
	55		</metering>
	56		</pre>
	57		</div>
	58		</div>
	59		</div>
	60		</body>
	61		</html>


	1		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	2		<html xmlns="http://www.w3.org/1999/xhtml">
	3		<head>
	4		<title>test</title>
	5		<script type="text/javascript" src="js/graph.js"></script>
	6		<script type="text/javascript" src="js/wz_jsgraphics.js"></script>
	7		<script type="text/javascript" src="js/lib/prototype/prototype.js"></script>
	8		<script type="text/javascript">
	9		function doStart() {
	10		start();
	11		}
	12		</script>
	13		</head>
	14		<body onload="doStart()">
	15		<div id="graph" style="position:absolute;left:50px;top:50px;width:400px;height:300px;border:1px solid gray;">
	16		</div>
	17		<div id="graph2" style="position:absolute;left:50px;top:400px;width:400px;height:300px;border:1px solid gray;">
	18		</div>
	19		<div id="metering_xml" style="position:absolute;left:500px;top:50px;width:500px;border:1px solid gray;">
	20		</div>
	21		</body>
	22		</html>


	1		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	2		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	3		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	4		<head>
	5		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	6		<script type="text/javascript" src="js/lib/jquery/jquery.min.js"></script>
	7		<script type="text/javascript" src="js/lib/prototype/prototype.js"></script>
	8		<!-- [if IE]>
	9		<script type="text/javascript" src="js/lib/flot/excanvas.min.js"></script>
	10		<![endif] -->
	11		<script type="text/javascript" src="js/lib/flot/jquery.flot.min.js"></script>
	12		<script type="text/javascript" src="js/DSGraph.js"></script>
	13		<script type="text/javascript" src="js/DSMainMeterReport.js"></script>
	14		<script type="text/javascript" src="js/model.js"></script>
	15		<link rel="stylesheet" href="css/meteringDemoStyle.css" type="text/css"/>
	16		<script type="text/javascript">
	17		var graph;
	18		var reporter;
	19		jQuery(document).ready(function() {
	20
	21		var apart = new Apartment();
	22		apart.fetch();
	23		var circuits = apart.getCircuits();
	24
	25		jQuery("#series").append("<li id=\"meter\">Main Meter<\/li>");
	26		jQuery("h2").css({fontSize: "x-large"});
	27		jQuery("#series").css({fontSize: "medium"});
	28		jQuery("#meter").click(function() {
	29		jQuery("#series li").css({color: "#666666"});
	30		jQuery(this).css({color: "red"});
	31		graph.setDSM("metering");
	32		});
	33
	34		jQuery(circuits).each(function() {
	35		var id = this.dsid;
	36		if(this.name !== "") {
	37		jQuery("#series").append("<li id=" + id + ">" + this.name + "<\/li>");
	38		} else {
	39		jQuery("#series").append("<li id=" + id + ">" + id + "<\/li>");
	40		}
	41		jQuery("#" + id).click(function() {
	42		jQuery("#series li").css({color: "#666666"});
	43		jQuery(this).css({color: "red"});
	44		graph.setDSM(id);
	45		});
	46		});
	47
	48		jQuery("#graphSelector > li").each(function() {
	49		jQuery(this).click(function() {
	50		jQuery("#graphSelector li.selected").removeClass("selected");
	51		jQuery(this).addClass("selected");
	52		if(jQuery(this).data("hovering") == true) {
	53		jQuery(this).data("hovering", false);
	54		}
	55		graph.setResolution(jQuery(this).attr("id"));
	56		});
	57		jQuery(this).hover(function() {
	58		if(jQuery(this).hasClass("selected")) {
	59		jQuery(this).data("hovering", false);
	60		} else {
	61		jQuery(this).addClass("selected");
	62		jQuery(this).data("hovering", true);
	63		}
	64		}, function() {
	65		if(jQuery(this).data("hovering") == true) {
	66		jQuery(this).removeClass("selected");
	67		jQuery(this).data("hovering", false);
	68		}
	69		})
	70		});
	71
	72		graph = new DSGraph(circuits[0].dsid);
	73		jQuery("#" + circuits[0].dsid).css({color: "red"});
	74		graph.start();
	75
	76		jQuery("#showRawXML").click(function() {
	77		jQuery("#rawDataOverlay").css({
	78		display: "block",
	79		opacity: 0.0
	80		}).animate({
	81		opacity: 0.8
	82		}, 1000, null, null);
	83		jQuery("#rawDataOverlayBox").fadeIn(1000);
	84		});
	85		jQuery("#hideXML").click(function() {
	86		jQuery("#rawDataOverlayBox").fadeOut(1000);
	87		jQuery("#rawDataOverlay").animate({
	88		opacity: 0.0
	89		}, 1000, null, function() {
	90		jQuery(this).css({display: "none"});
	91		});
	92		});
	93		});
	94
	95		// registerHandlers();
	96		// updatePowerConsumptionOverlays();
	97		// graph = new DSGraph("0000000000000000ffc00011");
	98		// graph.start();
	99		// reporter = new DSMainMeterReport();
	100		// reporter.start();
	101
	102		// });
	103
	104		</script>
	105		<title>aizo Metering Charts powered by futureLAB</title>
	106		</head>
	107		<body>
	108		<div id="main">
	109		<h1 id="header">aizo Metering Charts powered by futureLAB</h1>
	110		<div id="navigation">
	111		</div>
	112		<div id="content">
	113		<div id="building">
	114		<h2>Messreihe</h2>
	115		<ul id="series">
	116		</ul>
	117		</div>
	118		<div id="charts">
	119		<h2>Verbrauch</h2>
	120		<ul id="graphSelector">
	121		<li id="five_minutes" class="selected">letzte 5 Min.</li>
	122		<li id="one_hour">letzte Std.</li>
	123		<li id="one_day">letzter Tag</li>
	124		<li id="one_week">letzte Woche</li>
	125		<li id="one_month">letzter Monat</li>
	126		<li id="one_year">letztes Jahr</li>
	127		</ul>
	128		<div id="graph">
	129		<div id="curve"></div>
	130		</div>
	131		<div id="showRawXML"></div>
	132		</div>
	133		</div>
	134		<div id="footer">
	135		</div>
	136		</div>
	137		<div id="rawDataOverlay"></div>
	138		<div id="rawDataOverlayBox">
	139		<div id="hideXML">Hide XML</div>
	140		<div id="xml"></div>
	141		</div>
	142		</body>
	143		</html>


	1		<?xml version="1.0" encoding="utf-8"?>
	2		<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
	3		<xsl:output method="xml" indent="yes" media-type="image/svg"/>
	4		<xsl:template match="/values">
	5		<svg width="400px" height="250px" xmlns="http://www.w3.org/2000/svg">
	6		<g id="bar" transform="translate(0,250)">
	7		<polyline style="fill:white;stroke:red;stroke-width:1">
	8		<xsl:attribute name="points">
	9		<xsl:for-each select="value">
	10		<xsl:if test="not(position() = 1)"><xsl:text> </xsl:text></xsl:if>
	11		<!--<xsl:variable name="val" select="@value"/>-->
	12		<xsl:value-of select="concat(position() * 1, ',', -@value div 500)"/>
	13		</xsl:for-each>
	14		</xsl:attribute>
	15		</polyline>
	16		</g>
	17		</svg>
	18		</xsl:template>
	19		</xsl:transform>


	1		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	2		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	3		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	4		<head>
	5		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	6		<script type="text/javascript" src="js/lib/jquery/jquery.min.js"</script>
	7		<script type="text/javascript" src="js/lib/prototype/prototype.js"></script>
	8		<!-- [if IE]>
	9		<script type="text/javascript" src="js/lib/flot/excanvas.min.js"></script>
	10		<![endif] -->
	11		<script type="text/javascript" src="js/lib/flot/jquery.flot.min.js"></script>
	12		<script type="text/javascript" src="js/meteringDemo.js"></script>
	13		<script type="text/javascript" src="js/DSGraph.js"></script>
	14		<script type="text/javascript" src="js/DSMainMeterReport.js"></script>
	15		<link rel="stylesheet" href="css/meteringDemoStyle.css" type="text/css"/>
	16		<script type="text/javascript">
	17		var graph;
	18		var reporter;
	19		var dSMIDs = [
	20		"3504175fe0000000ffc00011",
	21		"3504175fe0000000ffc00012",
	22		"3504175fe0000000ffc00013",
	23		"3504175fe0000000ffc00014",
	24		"3504175fe0000000ffc00015",
	25		"3504175fe0000000ffc00016"
	26		];
	27		var roomNames = [
	28		"Arbeitszimmer",
	29		"Esszimmer",
	30		"Gang",
	31		"Wohnzimmer",
	32		"Schlafzimmer",
	33		"Bad"
	34		];
	35		jQuery(document).ready(function() {
	36		jQuery(".consumptionOverlay").css({opacity: 0.3});
	37		jQuery(".hoverOverlay").css({opacity: 0.2});
	38		registerHandlers();
	39		updatePowerConsumptionOverlays();
	40		graph = new DSGraph(dSMIDs[0]);
	41		graph.start();
	42		reporter = new DSMainMeterReport();
	43		reporter.start();
	44		jQuery("#showRawXML").click(function() {
	45		jQuery("#rawDataOverlay").css({
	46		display: "block",
	47		opacity: 0.0
	48		}).animate({
	49		opacity: 0.8
	50		}, 1000, null, null);
	51		jQuery("#rawDataOverlayBox").fadeIn(1000);
	52		});
	53		jQuery("#hideXML").click(function() {
	54		jQuery("#rawDataOverlayBox").fadeOut(1000);
	55		jQuery("#rawDataOverlay").animate({
	56		opacity: 0.0
	57		}, 1000, null, function() {
	58		jQuery(this).css({display: "none"});
	59		});
	60		});
	61		});
	62
	63		</script>
	64		<title>aizo Metering Charts powered by futureLAB</title>
	65		</head>
	66		<body>
	67		<div id="main">
	68		<h1 id="header">aizo Metering Charts powered by futureLAB</h1>
	69		<div id="navigation">
	70		<ul id="viewMode">
	71		<li id="threeD">3D</li>
	72		<li id="map">Pläne</li>
	73		</ul>
	74		<ul id="buildingSection">
	75		<li id="entireBuilding">Gebäude</li>
	76		<li id="groundFloor" class="selected">Erdgeschoss</li>
	77		</ul>
	78		</div>
	79		<div id="content">
	80		<div id="building">
	81		<div id="selectionArea">
	82		<div id="allFloors" style="display: none;">
	83		<img id="allfloorsConsumption" src="views/building.png" style="height: 309px;"/>
	84		</div>
	85		<div id="firstFloor">
	86		<div id="firstFloor_3d" style="position: absolute;">
	87		<img src="views/first_floor.jpg" usemap="#firstFloorMap"/>
	88		<img id="firstFloorSelection" src="views/room_1.jpg" usemap="#firstFloorMap"/>
	89		<img id="firstFloorHover" class="hoverOverlay" src="views/room_2.jpg" usemap="#firstFloorMap"/>
	90		<img id="consumptionOverlay1" class="consumptionOverlay" src="views/room_1_green.png" usemap="#firstFloorMap"/>
	91		<img id="consumptionOverlay2" class="consumptionOverlay" src="views/room_2_green.png" usemap="#firstFloorMap"/>
	92		<img id="consumptionOverlay3" class="consumptionOverlay" src="views/room_3_green.png" usemap="#firstFloorMap"/>
	93		<img id="consumptionOverlay4" class="consumptionOverlay" src="views/room_4_green.png" usemap="#firstFloorMap"/>
	94		<img id="consumptionOverlay5" class="consumptionOverlay" src="views/room_5_green.png" usemap="#firstFloorMap"/>
	95		<img id="consumptionOverlay6" class="consumptionOverlay" src="views/room_6_green.png" usemap="#firstFloorMap"/>
	96		<map name="firstFloorMap">
	97		<area id="room1" shape="poly" coords="182,7,109,51,178,84,247,32" nohref="nohref" title="Arbeitszimmer" alt="Arbeitszimmer" />
	98		<area id="room2" shape="poly" coords="105,53,15,108,86,151,174,86" nohref="nohref" title="Esszimmer" alt="Esszimmer" />
	99		<area id="room3" shape="poly" coords="251,34,91,154,138,183,291,50" nohref="nohref" title="Gang" alt="Gang" />
	100		<area id="room4" shape="poly" coords="296,51,230,108,324,153,383,85" nohref="nohref" title="Wohnzimmer" alt="Wohnzimmer" />
	101		<area id="room5" shape="poly" coords="226,111,182,150,283,204,323,157" nohref="nohref" title="Schlafzimmer" alt="Schlafzimmer" />
	102		<area id="room6" shape="poly" coords="177,153,141,185,246,249,278,208" nohref="nohref" title="Bad" alt="Bad" />
	103		</map>
	104		</div>
	105		<div id="firstFloor_map" style="position: absolute; display: none;">
	106		<img src="views/first_floor_map.png" usemap="#firstFloorMapMap"/>
	107		<img id="firstFloorSelectionMap" src="views/room_1_map.png" usemap="#firstFloorMapMap"/>
	108		<img id="firstFloorHoverMap" class="hoverOverlay" src="views/room_1_map.png" usemap="#firstFloorMapMap"/>
	109		<img id="consumptionOverlay1map" class="consumptionOverlay" src="views/room_1_map_green.png" usemap="#firstFloorMapMap"/>
	110		<img id="consumptionOverlay2map" class="consumptionOverlay" src="views/room_2_map_green.png" usemap="#firstFloorMapMap"/>
	111		<img id="consumptionOverlay3map" class="consumptionOverlay" src="views/room_3_map_green.png" usemap="#firstFloorMapMap"/>
	112		<img id="consumptionOverlay4map" class="consumptionOverlay" src="views/room_4_map_green.png" usemap="#firstFloorMapMap"/>
	113		<img id="consumptionOverlay5map" class="consumptionOverlay" src="views/room_5_map_green.png" usemap="#firstFloorMapMap"/>
	114		<img id="consumptionOverlay6map" class="consumptionOverlay" src="views/room_6_map_green.png" usemap="#firstFloorMapMap"/>
	115		<map name="firstFloorMapMap">
	116		<area id="room1map" shape="poly" coords="49,11,49,154,160,154,159,10" nohref="nohref" title="Arbeitszimmer" alt="Arbeitszimmer" />
	117		<area id="room2map" shape="poly" coords="49,159,49,293,160,293,159,159" nohref="nohref" title="Esszimmer" alt="Esszimmer" />
	118		<area id="room3map" shape="poly" coords="164,11,165,293,225,293,225,11" nohref="nohref" title="Gang" alt="Gang" />
	119		<area id="room4map" shape="poly" coords="230,11,230,154,344,154,344,11" nohref="nohref" title="Wohnzimmer" alt="Wohnzimmer" />
	120		<area id="room5map" shape="poly" coords="230,159,230,236,344,236,344,159" nohref="nohref" title="Schlafzimmer" alt="Schlafzimmer" />
	121		<area id="room6map" shape="poly" coords="230,240,230,293,344,293,344,240" nohref="nohref" title="Bad" alt="Bad" />
	122		</map>
	123		</div>
	124		</div>
	125		</div>
	126		</div>
	127		<div id="charts">
	128		<h2 id="graphSelection"><div id="graphSelectionIcon"></div>Stromverbrauch: <span id="graphSelectionTitle">Arbeitszimmer</span></h2>
	129		<ul id="graphSelector">
	130		<li id="five_minutes" class="selected">letzte 5 Min.</li>
	131		<li id="one_hour">letzte Std.</li>
	132		<li id="one_day">letzter Tag</li>
	133		<li id="one_week">letzte Woche</li>
	134		<li id="one_month">letzter Monat</li>
	135		<li id="one_year">letztes Jahr</li>
	136		</ul>
	137		<div id="graph">
	138		<div id="curve"></div>
	139		</div>
	140		<div id="showRawXML"></div>
	141		</div>
	142		<div id="queueHeader">
	143		<div id="toggleQueue">Main Meter Queue</div>
	144		</div>
	145		<div id="queue">
	146		<div id="queueContainer">
	147
	148		</div>
	149		</div>
	150		<div id="queueFooter">
	151		<p id="queueTitle"><span>Incoming Metering Information: </span><span id="queueStatus"><span id="queueLength">0</span> Packets are currently in the queue</span></p>
	152		<p id="connectionStatus">
	153		Connection Status:<br/>
	154		<span id="connectionStatusText">connected</span>
	155		</p>
	156		</div>
	157		</div>
	158		<div id="footer">
	159		</div>
	160		</div>
	161		<div id="rawDataOverlay"></div>
	162		<div id="rawDataOverlayBox">
	163		<div id="hideXML">Hide XML</div>
	164		<div id="xml"></div>
	165		</div>
	166		</body>
	167		</html>


	1		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	2		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	3		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	4		<head>
	5		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	6		<title>digitalSTROM Metering powered by futureLAB</title>
	7		<script type="text/javascript" src="js/lib/jquery/jquery.js"</script>
	8		<script type="text/javascript" src="js/lib/jquery.color/jquery.color.js"></script>
	9		<script type="text/javascript" src="js/metering_report.js"></script>
	10		<style type="text/css">
	11		body {
	12		font-family: sans-serif;
	13		margin: 50px;
	14		}
	15		ul {
	16		list-style-type: none;
	17		margin: 0px;
	18		padding: 0px;
	19		}
	20		li {
	21		margin: 0px;
	22		padding-bottom: 5px;
	23		}
	24		pre {
	25		margin: 0px;
	26		padding: 10px;
	27		border: 1px solid gray;
	28		}
	29		#connectionStatus {
	30		color: green;
	31		font-weight: bold;
	32		}
	33		input {
	34		display: inline;
	35		}
	36		</style>
	37		</head>
	38		<body>
	39		<h1>digitalSTROM Metering powered by futureLAB</h1>
	40		<div>
	41		<h2>Incoming Metering Information</h2>
	42		<p><span id="queueLength"></span> Packets are currently in the queue
	43		<input type="submit" id="clearQueueButton" name="clearQueueButton" value="Dismiss Queue"/>
	44		connection Status: <span id="connectionStatus">connected</span>
	45		<input type="submit" id="connectionButton" name="connectionButton" value="Disconnect"/></p>
	46		<ul id="receivedData">
	47		<li>
	48		</li>
	49		</ul>
	50		</div>
	51		</body>
	52		</html>


	1		<html>
	2		<head>
	3		<title>digitalStrom - Server</title>
	4		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	5		<link rel="stylesheet" type="text/css" href="main.css"/>
	6		<script type="text/javascript" language="JavaScript">
	7
	8		function log(str) {
	9		var logDiv = $('log');
	10		logDiv.innerHTML += str + '<br/>';
	11		}
	12
	13		function SendPanel(container) {
	14		var self = this;
	15		this.container = $(container);
	16
	17		this.setup = function() {
	18		var html = '<form id="send_form"><table id="send_table">';
	19		function addLine(first, second) {
	20		html += '<tr><td width="100px">' + first + '</td><td>' + second + '</td></tr>';
	21		}
	22
	23		addLine('Destination', '<input id="destination" type="text" value="0"/>');
	24		addLine('Broadcast', '<input id="broadcast" type="checkbox" value="0"/>');
	25		addLine('Counter', '<input id="counter" type="text" value="0"/>');
	26		addLine('Command', '<input id="command" type="text" value="0x09"/>');
	27		addLine('Length', '<input id="length" type="text" value = "0"/>');
	28		[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].each(function(val) {
	29		addLine('Payload byte ' + val, '<input id="payload_' + val + '" value="0x00" />');
	30		});
	31
	32		html += '</table><a id="submit" href="#">send</a></form>';
	33		self.container.innerHTML = html;
	34		$('submit').onclick = function() {
	35		self.send();
	36		}
	37		}
	38		this.send = function() {
	39		new Ajax.Request(
	40		'/json/debug/sendFrame',
	41		{ method:'get',
	42		parameters:
	43		{
	44		destination: $F('destination'),
	45		broadcast: $('broadcast').checked,
	46		counter: $F('counter'),
	47		command: $F('command'),
	48		length: $F('length'),
	49		payload_1: $F('payload_1'),
	50		payload_2: $F('payload_2'),
	51		payload_3: $F('payload_3'),
	52		payload_4: $F('payload_4'),
	53		payload_5: $F('payload_5'),
	54		payload_6: $F('payload_6'),
	55		payload_7: $F('payload_7'),
	56		payload_8: $F('payload_8'),
	57		payload_9: $F('payload_9'),
	58		payload_10: $F('payload_10'),
	59		payload_11: $F('payload_11'),
	60		payload_12: $F('payload_12'),
	61		payload_13: $F('payload_13'),
	62		payload_14: $F('payload_14'),
	63		payload_15: $F('payload_15'),
	64		payload_16: $F('payload_16')
	65		},
	66
	67		onComplete: function(transport, json) {
	68		log('sent');
	69		}
	70		}
	71		);
	72		}
	73
	74		this.setup();
	75		}
	76
	77		function doOnLoad() {
	78		new SendPanel("send_panel");
	79		}
	80
	81		</script>
	82		</head>
	83		<body onload="doOnLoad()">
	84		<h1>Packet dispatcher</h1>
	85		<div id="send_panel">
	86		</div>
	87		Log: <div id="log">Log</div>
	88		</body>
	89		</html>


	1		<html>
	2		<head>
	3		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	4		<title>digitalStrom Setup</title>
	5
	6		<link rel="stylesheet" type="text/css" href="js/lib/extjs/resources/css/ext-all.css" />
	7		<link rel="stylesheet" type="text/css" href="js/lib/extjs/resources/css/ds_gui.css" />
	8		<link href="favicon.png" rel="shortcut icon"/>
	9
	10		<!-- ExtJS libraries -->
	11		<script type="text/javascript" src="js/lib/extjs/adapter/ext/ext-base-debug.js"></script>
	12		<script type="text/javascript" src="js/lib/extjs/ext-all-debug.js"></script>
	13		<script type="text/javascript" src="js/lib/jsgettext/Gettext.js"></script>
	14		<script type="text/javascript" src="js/lib/LC_MESSAGES/de_DE.json"></script>
	15
	16		<script type="text/javascript" src="js/dss-setup-interface.js"></script>
	17		<style>
	18		.zone-wrap{
	19		margin: 4px;
	20		padding: 5px;
	21		cursor: default;
	22		}
	23
	24		.x-view-over{
	25		border:1px solid #dddddd;
	26		background: #efefef url(./resources/images/default/grid/row-over.gif) repeat-x left top;
	27		padding: 4px;
	28		}
	29		.x-view-selected {
	30		background: #e9ffee url(./selected.gif) repeat-x right bottom;
	31		border:1px solid #77DD88;
	32		padding: 4px;
	33		}
	34
	35		.x-panel-body{
	36		background: white;
	37		font: 14px Arial, Helvetica, sans-serif;
	38		}
	39
	40		.x-grid3-hd-row td, .x-grid3-row td, .x-grid3-summary-row td {
	41		font-size: 14px;
	42		}
	43
	44		.reloadAction {
	45		background-image: url(images/refresh.gif) !important;
	46		}
	47
	48		.newZoneAction {
	49		background-image: url(images/add_zone.gif) !important;
	50		}
	51
	52		.editZoneAction {
	53		background-image: url(images/edit.gif) !important;
	54		}
	55
	56		.sortZoneAction {
	57		background-image: url(images/sort.gif) !important;
	58		}
	59
	60		.editDeviceToolbarIcon {
	61		background-image: url(images/edit.gif) !important;
	62		}
	63
	64		.pingDeviceToolbarIcon {
	65		background-image: url(/images/application_osx_terminal.png) !important;
	66		}
	67
	68		.removeDeviceToolbarIcon {
	69		background-image: url(/images/delete.png) !important;
	70		}
	71
	72		.copyToClipboardToolbarIcon {
	73		background-image: url(/images/copy.gif) !important;
	74		}
	75
	76		.nonPresentDevice table {
	77		color: #999999;
	78		}
	79
	80		.isOn
	81		{
	82		background:url(/images/on.png) center no-repeat !important;
	83		cursor: pointer;
	84		}
	85
	86		.isOff
	87		{
	88		background:url(/images/off.png) center no-repeat !important;
	89		cursor: pointer;
	90		}
	91
	92		.isLocked
	93		{
	94		background:url(/images/lock.png) center no-repeat !important;
	95		cursor: pointer;
	96		}
	97
	98		.isUnlocked
	99		{
	100		background:url(/images/lock_open.png) center no-repeat !important;
	101		cursor: pointer;
	102		}
	103
	104		.lockDisabled
	105		{
	106		background:url(/images/lock_grey.png) center no-repeat !important;
	107		}
	108
	109		.isDisabled
	110		{
	111		background:url(/images/noff.png) center no-repeat !important;
	112		}
	113
	114		.blink
	115		{
	116		background:url(/images/blink.png) center no-repeat !important;
	117		cursor: pointer;
	118		}
	119
	120		.blinkActive
	121		{
	122		background:url(/images/blink_active.png) center no-repeat !important;
	123		}
	124
	125		.functionLight
	126		{
	127		background:url(/images/brick_yellow.png) center no-repeat !important;
	128		cursor: pointer;
	129		}
	130
	131		.functionLightDisabled
	132		{
	133		background:url(/images/brick_yellow.png) center no-repeat !important;
	134		}
	135
	136		.functionLightIcon
	137		{
	138		background-image:url(/images/brick_yellow.png) !important;
	139		}
	140
	141		.functionShadow
	142		{
	143		background:url(/images/brick_grey.png) center no-repeat !important;
	144		cursor: pointer;
	145		}
	146
	147		.functionShadowDisabled
	148		{
	149		background:url(/images/brick_grey.png) center no-repeat !important;
	150		}
	151
	152		.functionShadowIcon
	153		{
	154		background-image:url(/images/brick_grey.png) !important;
	155		}
	156
	157		.functionClimate
	158		{
	159		background:url(/images/brick_blue.png) center no-repeat !important;
	160		}
	161
	162		.functionAudio
	163		{
	164		background:url(/images/brick_cyan.png) center no-repeat !important;
	165		}
	166
	167		.functionVideo
	168		{
	169		background:url(/images/brick_magenta.png) center no-repeat !important;
	170		}
	171
	172		.functionSecurity
	173		{
	174		background:url(/images/brick_red.png) center no-repeat !important;
	175		}
	176
	177		.functionAccess
	178		{
	179		background:url(/images/brick_green.png) center no-repeat !important;
	180		}
	181
	182		.functionJoker
	183		{
	184		background:url(/images/brick_darkgrey.png) center no-repeat !important;
	185		}
	186
	187		.lightbulbOn
	188		{
	189		background:url(/images/lightbulb.png) center no-repeat !important;
	190		}
	191
	192		.lightbulbOff
	193		{
	194		background:url(/images/lightbulb_off.png) center no-repeat !important;
	195		}
	196
	197
	198		</style>
	199		</head>
	200		<body>
	201		<div id="start">loading ...</div>
	202		</body>
	203		</html>


	1		<html>
	2		<head>
	3		<title>digitalStrom - Server</title>
	4		<link rel="stylesheet" type="text/css" href="main.css"/>
	5		<link rel="stylesheet" type="text/css" href="lists.css"/>
	6		<script src="js/lib/prototype/prototype.js" language="JavaScript" type="text/javascript"></script>
	7		<script src="js/switch.js" language="JavaScript" type="text/javascript"></script>
	8		<style type="text/css">
	9		/*margin and padding on body element
	10		can introduce errors in determining
	11		element position and are not recommended;
	12		we turn them off as a foundation for YUI
	13		CSS treatments. */
	14		body {
	15		margin:0;
	16		padding:0;
	17		}
	18
	19		ul.drag {
	20		border: 1px solid gray;
	21		width: 200px;
	22		list-style: none;
	23		margin:0;
	24		padding:0;
	25		/*
	26		The bottom padding provides the cushion that makes the empty
	27		list targetable. Alternatively, we could leave the padding
	28		off by default, adding it when we detect that the list is empty.
	29		*/
	30		padding-bottom:20px;
	31		}
	32
	33		ul.drag li {
	34		margin: 1px;
	35		cursor: move;
	36		zoom: 1;
	37		}
	38
	39
	40		</style>
	41
	42		<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
	43		<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
	44		<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
	45
	46
	47		<script type="text/javascript" language="JavaScript">
	48
	49		function StructureModifier(containerForOthers, containerForUnassigned) {
	50		var self = this;
	51
	52		this.devNum = 0;
	53		this.devices = [];
	54		this.zones = [];
	55		this.devLists = [];
	56		this.fetchApartment = function() {
	57		new Ajax.Request('/json/apartment/getStructure',
	58		{
	59		method:'get',
	60		onComplete: function(transport, json) {
	61		self.doUpdate(transport.responseJSON.apartment.zones);
	62		}
	63		}
	64		);
	65		new Ajax.Request('/json/apartment/getDevices',
	66		{
	67		method:'get',
	68		parameters: { unassigned: true },
	69		onComplete: function(transport, json) {
	70		self.updateUnassigned(transport.responseJSON.devices);
	71		}
	72		}
	73		);
	74		};
	75
	76		this.updateUnassigned = function(devs) {
	77		var devids = [];
	78		var devicetodevid = [];
	79		var devlist = '<h3>Unassigned</h3><ul class="drag" id="unassigned_devs_list">';
	80		devs.each(
	81		function(device) {
	82		var devid = 'device_' + device.id;
	83		devids[devids.length] = devid;
	84		devicetodevid[devid] = device;
	85		devlist += '<li id="' + devid + '">';
	86		if(device.name.length != 0) {
	87		devlist += device.name;
	88		} else {
	89		devlist += "(no name) " + device.id;
	90		device.name = "(no name) " + device.id;
	91		}
	92		self.devNum++;
	93		devlist += "</li>";
	94		}
	95		);
	96		devlist += "</ul>";
	97		$(containerForUnassigned).innerHTML = devlist;
	98
	99		new YAHOO.util.DDTarget('unassigned_devs_list');
	100
	101		devids.each(
	102		function(did) {
	103		$(did).originalZone = 0;
	104		$(did).device = devicetodevid[did];
	105		new YAHOO.example.DDList(did);
	106		}
	107		);
	108
	109		self.devLists[self.devLists.length] = {id: 'unassigned_devs_list', number: 0};
	110
	111		$('numDevs').innerHTML = self.devNum;
	112		}
	113
	114		this.doUpdate = function(zones) {
	115		var zoneids = [];
	116		var devids = [];
	117		var devtozone = [];
	118		var devidtodevice = [];
	119		self.zones = zones;
	120
	121		var zonelist = '';//"<ul>"
	122		zones.each(
	123		function(zone) {
	124		if(zone.id == 0) {
	125		return;
	126		}
	127		var rid = 'zone_' + zone.id;
	128		zoneids[zoneids.length] = rid;
	129		zonelist += '<h3>' + zone.name + '</h3><ul class="drag" id="' + rid + '">';
	130		self.devLists[self.devLists.length] = {id: rid, number: zone.id};
	131		zone.devices.each(function(device) {
	132		var devid = 'device_' + device.id;
	133		devids[devids.length] = devid;
	134		devtozone[devid] = zone.id;
	135		devidtodevice[devid] = device;
	136		zonelist += '<li id="' + devid + '">';
	137		if(device.name.length != 0) {
	138		zonelist += device.name;
	139		} else {
	140		zonelist += "(no name) " + device.id;
	141		device.name = "(no name) " + device.id;
	142		}
	143		self.devNum++;
	144		zonelist += "</li>";
	145		});
	146		zonelist += "</ul>";
	147		}
	148		);
	149		zonelist += "";
	150		$(containerForOthers).innerHTML = zonelist;
	151
	152		zoneids.each(
	153		function(rid) {
	154		new YAHOO.util.DDTarget(rid);
	155		}
	156		);
	157
	158		devids.each(
	159		function(did) {
	160		$(did).originalZone = devtozone[did];
	161		$(did).device = devidtodevice[did];
	162		new YAHOO.example.DDList(did);
	163		}
	164		);
	165
	166		$('numDevs').innerHTML = self.devNum;
	167		}
	168
	169		self.fetchApartment();
	170		}
	171
	172		var mod = null;
	173
	174		function doOnload() {
	175		mod = new StructureModifier("other_zones", "unassigned_zones");
	176		}
	177
	178		(function() {
	179
	180		var Dom = YAHOO.util.Dom;
	181		var Event = YAHOO.util.Event;
	182		var DDM = YAHOO.util.DragDropMgr;
	183
	184		//////////////////////////////////////////////////////////////////////////////
	185		// example app
	186		//////////////////////////////////////////////////////////////////////////////
	187		YAHOO.example.DDApp = {
	188		init: function() {
	189		Event.on("saveButton", "click", this.doSave);
	190		Event.on("addZoneButton", "click", this.doAddZone);
	191		},
	192
	193
	194		moveDeviceToZone: function(device, targetZone) {
	195		new Ajax.Request('/json/structure/zoneAddDevice',
	196		{
	197		method:'get',
	198		parameters:
	199		{
	200		devid: device.id,
	201		zone: targetZone
	202		},
	203		onComplete: function(transport, json) {
	204		}
	205		}
	206		);
	207		},
	208
	209		doAddZone: function() {
	210		new Ajax.Request('/json/structure/addZone',
	211		{
	212		method:'get',
	213		parameters:
	214		{
	215		zoneID: $F('zoneID'),
	216		modulatorID: $F('modulatorID')
	217		},
	218		onComplete: function(transport, json) {
	219		}
	220		}
	221		);
	222		},
	223
	224		doSave: function() {
	225		var parseList = function(ul, number) {
	226		var items = ul.getElementsByTagName("li");
	227		var out = "Zone " + number + ":\n";
	228		for (i=0;i<items.length;i=i+1) {
	229		var li = items[i];
	230		if(li.originalZone != number) {
	231		out += li.device.name + " changed from zone " + li.originalZone + " to zone " + number + "\n";
	232		YAHOO.example.DDApp.moveDeviceToZone(li.device, number);
	233		}
	234		}
	235		return out + "\n";
	236		};
	237
	238
	239		var str = "";
	240		mod.devLists.each( function(pair) {
	241		str += parseList($(pair.id), pair.number);
	242		}
	243		);
	244		//alert(str);
	245
	246		}
	247		};
	248
	249		//////////////////////////////////////////////////////////////////////////////
	250		// custom drag and drop implementation
	251		//////////////////////////////////////////////////////////////////////////////
	252
	253		YAHOO.example.DDList = function(id, sGroup, config) {
	254
	255		YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
	256
	257		this.logger = this.logger \|\| YAHOO;
	258		var el = this.getDragEl();
	259		Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
	260
	261		this.goingUp = false;
	262		this.lastY = 0;
	263		};
	264
	265		YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
	266
	267		startDrag: function(x, y) {
	268		this.logger.log(this.id + " startDrag");
	269
	270		// make the proxy look like the source element
	271		var dragEl = this.getDragEl();
	272		var clickEl = this.getEl();
	273		Dom.setStyle(clickEl, "visibility", "hidden");
	274
	275		dragEl.innerHTML = clickEl.innerHTML;
	276
	277		Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
	278		Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
	279		Dom.setStyle(dragEl, "border", "2px solid gray");
	280		},
	281
	282		endDrag: function(e) {
	283
	284		var srcEl = this.getEl();
	285		var proxy = this.getDragEl();
	286
	287		// Show the proxy element and animate it to the src element's location
	288		Dom.setStyle(proxy, "visibility", "");
	289		var a = new YAHOO.util.Motion(
	290		proxy, {
	291		points: {
	292		to: Dom.getXY(srcEl)
	293		}
	294		},
	295		0.2,
	296		YAHOO.util.Easing.easeOut
	297		)
	298		var proxyid = proxy.id;
	299		var thisid = this.id;
	300
	301		// Hide the proxy and show the source element when finished with the animation
	302		a.onComplete.subscribe(function() {
	303		Dom.setStyle(proxyid, "visibility", "hidden");
	304		Dom.setStyle(thisid, "visibility", "");
	305		});
	306		a.animate();
	307		},
	308
	309		onDragDrop: function(e, id) {
	310
	311		// If there is one drop interaction, the li was dropped either on the list,
	312		// or it was dropped on the current location of the source element.
	313		if (DDM.interactionInfo.drop.length === 1) {
	314
	315		// The position of the cursor at the time of the drop (YAHOO.util.Point)
	316		var pt = DDM.interactionInfo.point;
	317
	318		// The region occupied by the source element at the time of the drop
	319		var region = DDM.interactionInfo.sourceRegion;
	320
	321		// Check to see if we are over the source element's location. We will
	322		// append to the bottom of the list once we are sure it was a drop in
	323		// the negative space (the area of the list without any list items)
	324		if (!region.intersect(pt)) {
	325		var destEl = Dom.get(id);
	326		var destDD = DDM.getDDById(id);
	327		destEl.appendChild(this.getEl());
	328		destDD.isEmpty = false;
	329		DDM.refreshCache();
	330		}
	331
	332		}
	333		},
	334
	335		onDrag: function(e) {
	336
	337		// Keep track of the direction of the drag for use during onDragOver
	338		var y = Event.getPageY(e);
	339
	340		if (y < this.lastY) {
	341		this.goingUp = true;
	342		} else if (y > this.lastY) {
	343		this.goingUp = false;
	344		}
	345
	346		this.lastY = y;
	347		},
	348
	349		onDragOver: function(e, id) {
	350
	351		var srcEl = this.getEl();
	352		var destEl = Dom.get(id);
	353
	354		// We are only concerned with list items, we ignore the dragover
	355		// notifications for the list.
	356		if (destEl.nodeName.toLowerCase() == "li") {
	357		var orig_p = srcEl.parentNode;
	358		var p = destEl.parentNode;
	359
	360		if (this.goingUp) {
	361		p.insertBefore(srcEl, destEl); // insert above
	362		} else {
	363		p.insertBefore(srcEl, destEl.nextSibling); // insert below
	364		}
	365
	366		DDM.refreshCache();
	367		}
	368		}
	369		});
	370
	371		Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
	372
	373		})();
	374
	375		</script>
	376		</head>
	377		<body onload="doOnload()">
	378		<h1>Welcome to the dSS!</h1>
	379		<div class="container">
	380		<div class="item"><a href="config">Config</a></div>
	381		<div class="item">Connected devices: <span id="numDevs">(...loading...)</span></div>
	382		</div>
	383		<div class="container">
	384		<input type="button" id="saveButton" value="Save..." />
	385		<input type="button" id="addZoneButton" value="Add Zone..." />
	386		ZoneID: <input type="text" id="zoneID" value="3" />
	387		Modulator Bus-ID:
	388		<input type="text" id="modulatorID" value="0" />
	389		</div>
	390		<div class="container fl">
	391		<div id="unassigned_zones">(loading...)</div>
	392		</div>
	393		<div class="container fl">
	394		<div id="other_zones">(loading...)</div>
	395		</div>
	396
	397		</body>
	398		</html>


	1		<?xml version="1.0" encoding="utf-8"?>
	2		<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
	3		<xsl:template match="/values">
	4		<svg width="600px" height="250px" xmlns="http://www.w3.org/2000/svg">
	5		<g id="bar" transform="translate(0,50)">
	6		<polyline style="fill:white;stroke:red;stroke-width:2">
	7		<xsl:attribute name="points">
	8		<xsl:for-each select="value">
	9		<xsl:if test="not(position() = 1)"><xsl:text> </xsl:text></xsl:if>
	10		<!--<xsl:variable name="val" select="@value"/>-->
	11		<xsl:value-of select="concat(position() * 20, ',', @value*2)"/>
	12		</xsl:for-each>
	13		</xsl:attribute>
	14		</polyline>
	15		</g>
	16		</svg>
	17		</xsl:template>
	18		</xsl:transform>

Binary files differ

Commit 54889afdf4237be2f936930cc1dd46e7ace3df33

Gitorious