查看“自定义状态页”的源代码

= 创建自定义状态页面 =

www/views目录中有一个名为'frontpage_example.html'的示例文件，该文件像你展示如何创建一个自己的状态页面<br>
这个例子是为iPad设计的，来自BiWired (希望你不要介意，否则请告诉我，我会改掉)<br>
Domoticz从1.1534版开始拥有此特性从，请保持使用最新版Domoticz。<br>
你可以看看这个论坛，里面有很多特别棒的例子: http://domoticz.com/forum/viewforum.php?f=8
<br>
== 制作 ==
状态页想要获取设备的状态，需要设备所在房间平面图的房间序号。
你需要为此布局创建一个房间，并将所有要显示在此页面上的设备放在此房间中。<br>
但是你也可以直接使用0号，其中包含您的Domoticz中安装的所有设备。如果Domoticz中设备数量过多，使用0号房间可能会导致Domoticz运行缓慢。<br><br>
复制一个frontpage_example.html文件并重命名，比如frontpage.html<br>
更改底部的'''$.roomplan'''以及'''$.domoticzurl'''
你还需要自定义页面内容，并且修改''$.PageArray'''<br>
'''idx'''是Domoticz里设备的编号Idx<br> 
'''value'''是你要显示的JSON标签。比如一个开关会有<code>"Status": "Off"</code>，如果你想显示Off，就要输入Status。<br>
'''label'''是描述信息的HTML标签的id<br>
'''comment'''可以是任何字符，用来描述设备名字<br>
<br>
具体的设备信息可以在这里找到<code><nowiki>http://127.0.0.1:8080/json.htm?type=devices&plan=0</nowiki></code>。返回的信息是JSON格式，你可以通过这个网页格式化JSON来增强其可读性：http://jsonviewer.stack.hu/ <br>

在这个页面查看网页具体效果：http://127.0.0.1:8080/views/frontpage.html <br>
如果你想在外部访问此页面，推荐使用VPN连接到你家里的网络。

官方默认的页面有一些问题，可能会无法正常运行，这里提供我的例子，你可以在此基础上做修改：
[[File:frontpage.jpg|right]]
<syntaxhighlight lang="html4strict" line='line'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Domoticz</title> 
<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css">
<script src="https://cdn.staticfile.org/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div#cnt {
	width: 990px;
    margin: 0 auto;
    text-align: center;
}
a, a:visited { text-decoration: none; color: #336699; }
a:hover { text-decoration: none; color: #003366; }

#frame {
	float: left;
	margin: 0px;
	padding: 0px 2px 0px 2px;
}
#label_lg {
	font-family: arial;
	font-weight: normal;
	color: #999;
	font-size: 17px;
	margin-top: -20px;
	height: 25px;
	line-height: 10px;
}
#itemp {
	font-family: Orbitron, serif;
	font-weight: bold;
	width: 570px;
	padding: 5px;
	border: 1px solid #666;
	height: 217px;	
	line-height: 210px; 
	font-size: 180px;	
	color: darkorange;
	margin: 0px ;
}
#oFloor, #purifier, #uv, #ihum, #astat, #astatw, #otemp, #crte,
#uv, #rain, #ohum, #ocld, #wtxt, #ctime, #brLight, #ctemp, #lrLight, 
#waterHeater, #eHeating, #tmpc, #crte, #whWatt, #wind, #hWatt, 
#cpuTemp, #ram, #space, #cpuUsage {
	font-family: Orbitron, serif;
	font-weight: bold;
	width: 162px;
	padding: 10px;
	border: 1px solid #666;
	height: 90px;
	line-height: 75px; 		
	font-size: 90px;
	color: #999;
}
#ctime, #brLight, #lrLight, #waterHeater, #eHeating, #tmpc, #crte, #whWatt, #uv, 
#rain, #ohum, #ocld, #wtxt, #otemp, #wind, #astat, #awatt, 
#astatw, #hWatt, #cpuUsage, #cpuTemp, #ram, #space {
	height: 65px;
	line-height: 55px;
	color: #999;
}
#hWatt, #cpuUsage, #crte, #wind { 
	width: 184px; 
}
#wtxt { 
	width: 560px; 
	font-size: 40px;
	line-height: 55px;
	color: darkorange;
}
#al { 
	margin-left: -35px; 
	margin-top: 55px; 
	width: 1050px;height: 570px;	
}
</style>
</head>
<div id="images"></div>
<body bgcolor="#000">
<div id="cnt">
<div style="margin-bottom:5px;">
<div>
<div>
<div id="frame">
	<div id="ihum" style="color:lightblue;font-size:50px;">--</div>
	<div id="label_lg">室内湿度 (%)</div>
	<div id="purifier" style="font-size:35px;">--</div>
	<div id="label_lg">空气净化器</div>
</div>
<div id="frame">
	<div id="itemp">--</div>
	<div id="label_lg" style="font-size:25px;margin-top:-30px;">卧室温度 (º<span class="degsign">C</span>)</div>
</div>
<div id="frame">
	<div id="oFloor" style="color:teal;font-size:50px;">--</div>
	<div id="label_lg">一楼温度 (º<span class="degsign">C</span>)</div>
	<div id="ctemp" style="color:#6666FF;font-size:50px;">--</div>
	<div id="label_lg">地下室温度 (º<span class="degsign">C</span>)</div>
</div>
</div>
<div>
<div id="frame">
	<div id="brLight" style="font-size:40px;">--</div>
	<div id="label_lg">卧室灯</div>
</div>
<div id="frame">
	<div id="lrLight" style="font-size:40px;">--</div>
	<div id="label_lg">客厅灯</div>
</div>
<div id="frame">
	<div id="eHeating" style="font-size:40px;">--</div>
	<div id="label_lg">电暖气</div>
</div>
<div id="frame">
	<div id="hWatt" style="font-size:40px;">--</div>
	<div id="label_lg">电暖气功率</div>
</div>
<div id="frame">
	<div id="waterHeater" style="font-size:40px;">--</div>
	<div id="label_lg">热水器</div>
</div>
</div>
<div>
<div id="frame">
	<div id="space" style="font-size:40px;;color:#3333cc;">--</div>
	<div id="label_lg">硬盘占用</div>
</div>
<div id="frame">
	<div id="ram" style="font-size:40px;color:#009933;">--</div>
	<div id="label_lg">内存占用</div>
</div>
<div id="frame">
	<div id="cpuUsage" style="font-size:40px;color:#ff3333;">--</div>
	<div id="label_lg">CPU使用率</div>
</div>
<div id="frame">
	<div id="cpuTemp" style="font-size:40px;color:#ff3333;">--</div>
	<div id="label_lg">CPU温度 (º<span class="degsign">C</span>)</div>
</div>
<div id="frame">
	<div id="whWatt" style="font-size:40px;color:#ff3333;">--</div>
	<div id="label_lg">热水器功率</div>
</div>
</div>
<div>
<div id="frame">
	<div id="rain" style="font-size:40px;">--</div>
	<div id="label_lg">日降雨量 (MM)</div>
</div>
<div id="frame">
	<div id="uv" style="font-size:40px;color:#C34A2C;">--</div>
	<div id="label_lg">紫外线指数 (UVI)</div>
</div>
<div id="frame">
	<div id="wind" style="font-size:40px;">--</div>
	<div id="label_lg">风速 (<span class="windsign">km/h</span>)</div>
</div>
<div id="frame">
	<div id="otemp" style="font-size:40px;color:darkorange;">--</div>
	<div id="label_lg">户外温度 (º<span class="degsign">C</span>)</div>
</div>
<div id="frame">
	<div id="ohum" style="font-size:40px;color:teal;">--</div>
	<div id="label_lg">户外湿度 (%)</div>
</div>
</div>
<div>
<div id="frame">
	<div id="astat" style="font-size:40px;">--</div>
	<div id="label_lg">净化器功率</div>
</div>
<div id="frame">
	<div id="wtxt">--</div>
	<div id="label_lg">天气</div>
</div>
<div id="frame">
	<div id="astatw" style="font-size:40px;">--</div>
	<div id="label_lg">气压 (hPa)</div>
</div>
</div>
</div>
<div id="all"></div><br>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$.roomplan=0;
$.domoticzurl="http://127.0.0.1:8080";
function RefreshData(){
    clearInterval($.refreshTimer);
    var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
    $.getJSON(jurl,
        {
            format: "json"
        },
        function(data) {
            if (typeof data.result != 'undefined') {
                if (typeof data.WindSign != 'undefined') {
                    $('.windsign').html(data.WindSign);
                }
                if (typeof data.TempSign != 'undefined') {
                    $('.degsign').html(data.TempSign);
                }
                $.each(data.result, function(i,item){
                    for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
                        if( $.PageArray[ii][0] === item.idx ) {
                            var vtype=$.PageArray[ii][1];
                            var vlabel=$.PageArray[ii][2];
                            var vdata=item[vtype];
                            if (typeof vdata == 'undefined') {
                                vdata="??";
                            }
                            else {
                                vdata=new String(vdata).split(" ",1)[0];
                            }
                            $('#'+vlabel).html(vdata);
                        }
                    }
                });
            }
        });
    $.refreshTimer = setInterval(RefreshData, 10000);
}
$(document).ready(function() {
	$.PageArray = [
        //格式: idx, value, label, comment
		['19','Temp','itemp','woonkamer'],		//卧室温度
		['0','Humidity','ihum','woonkamer'],	//室内湿度
		['4','Barometer','astatw','woonkamer'],	//气压
		['9','ForecastStr','wtxt','woonkamer'],	//天气
		['4','Temp','otemp','buiten'],			//户外温度
		['17','Humidity','ohum','buiten'],		//户外湿度
		['0','Temp','oFloor','room setpoint'],	//一楼温度
		['15','Data','cpuTemp','cputemp'],		//CPU温度
		['16','Data','cpuUsage','cpuusage'],	//CPU占用
		['7','Rain','rain','rain'],				//降雨量
		['12','Data','ram','ram'],				//内存占用
		['6','UVI','uv','uv'],					//紫外线
		['8','Data','wind','wind'],				//风速
		['2','Status','brLight','light'],		//卧室灯
        ['3','Status','lrLight','light'],		//客厅灯
		['14','Data','space','HardDriver']		//硬盘占用
	];
    RefreshData();
});  
</script>
</body>
</html>
</syntaxhighlight>

==展示==
<gallery>
File:Frontpage-new.png|[https://github.com/gerard33/frontpage Frontpage-gerard33]
File:Frontpage-Monitor.jpg|[https://github.com/vil1driver/monitor monitor-vil1driver]
File:Frontpage-FlatZ.jpg|[https://github.com/galadril/FlatZ-Frontpage FlatZ-Frontpage-vil1driver]
File:Frontpage-wez3.png|[https://github.com/wez3/domoboard domoboard-wez3]
</gallery>


[[Category:Domoticz]]
[[Category:手册]]
[[Category:设置]]
[[Category:皮肤]]