自定义状态页：修订间差异

来自Domoticz
无编辑摘要
 
（未显示同一用户的5个中间版本）
第1行： 第1行：
= 创建自定义状态页面 =
= 创建自定义状态页面 =


www目录中有一个名为'frontpage_example.html'的示例文件，该文件像你展示如何创建一个自己的状态页面<br>
www/views目录中有一个名为'frontpage_example.html'的示例文件，该文件像你展示如何创建一个自己的状态页面<br>
这个例子是为iPad设计的，来自BiWired (希望你不要介意，否则请告诉我，我会改掉)<br>
这个例子是为iPad设计的，来自BiWired (希望你不要介意，否则请告诉我，我会改掉)<br>
Domoticz从1.1534版开始拥有此特性从，请保持使用最新版Domoticz。<br>
Domoticz从1.1534版开始拥有此特性从，请保持使用最新版Domoticz。<br>
第23行： 第23行：
如果你想在外部访问此页面，推荐使用VPN连接到你家里的网络。
如果你想在外部访问此页面，推荐使用VPN连接到你家里的网络。


官方默认的页面有一些问题，可能会无法正常运行，这里提供我的例子，你可以在此基础上做修改：
这里提供我的例子，你可以在此基础上做修改：
[[File:frontpage.jpg|right]]
<syntaxhighlight lang="html4strict" line='line'>
<syntaxhighlight lang="html4strict" line='line'>
<!DOCTYPE html>
<!DOCTYPE html>
第29行： 第30行：
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<title>MyWeatherView</title>  
<title>Domoticz</title>  
<link href='http://fonts.googleapis.com/css?family=Orbitron:700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Orbitron:700" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.12.0/jquery.min.js"></script>
<style>
<style type="text/css">
div#cnt {
div#cnt {
width: 990px;
    width: 990px;
     margin: 0 auto;
     margin: 0 auto;
     text-align: center;
     text-align: center;
}
}
a, a:visited { text-decoration: none; color: #336699; }
a, a:visited { text-decoration: none; color: #336699; }
a:hover { text-decoration: none; color: #003366; }
a:hover { text-decoration: none; color: #003366; }
#frame {
#frame {
float: left;
float: left;
第47行： 第46行：
padding: 0px 2px 0px 2px;
padding: 0px 2px 0px 2px;
}
}
#label_lg {
#label_lg {
font-family: arial;
font-family: arial;
第57行： 第55行：
line-height: 10px;
line-height: 10px;
}
}
#itemp {
#itemp {
font-family: Orbitron, serif;
font-family: Orbitron, serif;
第70行： 第67行：
margin: 0px ;
margin: 0px ;
}
}
#oFloor, #purifier, #uv, #ihum, #astat, #astatw, #otemp, #crte,
#oFloor, #purifier, #uv, #ihum, #astat, #astatw, #otemp, #crte,
#uv, #rain, #ohum, #ocld, #wtxt, #ctime, #brLight, #ctemp, #lrLight,  
#uv, #rain, #ohum, #ocld, #wtxt, #ctime, #brLight, #ctemp, #lrLight,  
第85行： 第81行：
color: #999;
color: #999;
}
}
#ctime, #brLight, #lrLight, #waterHeater, #eHeating, #tmpc, #crte, #whWatt, #uv,  
#ctime, #brLight, #lrLight, #waterHeater, #eHeating, #tmpc, #crte, #whWatt, #uv,  
#rain, #ohum, #ocld, #wtxt, #otemp, #wind, #astat, #awatt,  
#rain, #ohum, #ocld, #wtxt, #otemp, #wind, #astat, #awatt,  
第93行： 第88行：
color: #999;
color: #999;
}
}
#hWatt, #cpuUsage, #crte, #wind {  
#hWatt, #cpuUsage, #crte, #wind {  
width: 184px;  
width: 184px;  
}
}
#wtxt {  
#wtxt {  
width: 560px;  
width: 560px;  
第104行： 第97行：
color: darkorange;
color: darkorange;
}
}
#al {  
#al {  
margin-left: -35px;  
margin-left: -35px;  
第110行： 第102行：
width: 1050px;height: 570px;
width: 1050px;height: 570px;
}
}
</style>
</style>
</head>
</head>
第136行： 第127行：
</div>
</div>
</div>
</div>
<div>
<div>
<div id="frame">
<div id="frame">
第159行： 第149行：
</div>
</div>
</div>
</div>
<div>
<div>
<div id="frame">
<div id="frame">
第182行： 第171行：
</div>
</div>
</div>
</div>
<div>
<div>
<div id="frame">
<div id="frame">
第205行： 第193行：
</div>
</div>
</div>
</div>
<div>
<div>
<div id="frame">
<div id="frame">
第220行： 第207行：
</div>
</div>
</div>
</div>
</div>
</div>
<div id="all"></div><br>
<div id="all"></div><br>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
<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() {
$(document).ready(function() {
    $.roomplan=0;
    $.domoticzurl="http://192.168.2.227:8080";
$.PageArray = [
$.PageArray = [
         //格式: idx, value, label, comment
         //格式: idx, value, label, comment
第249行： 第269行：
['14','Data','space','HardDriver'] //硬盘占用
['14','Data','space','HardDriver'] //硬盘占用
];
];
    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);
    }
     RefreshData();
     RefreshData();
});   
});   
</script>
</script>
</body>
</body>
</html>
</html>
第297行： 第278行：
==展示==
==展示==
<gallery>
<gallery>
File:Frontpage.jpg|https://github.com/gerard33/frontpage
File:Frontpage-new.png|[https://github.com/gerard33/frontpage Frontpage-gerard33]
File:Monitor.jpg|https://github.com/vil1driver/monitor
File:Frontpage-Monitor.jpg|[https://github.com/vil1driver/monitor monitor-vil1driver]
File:FlatZ device.png|https://github.com/galadril/FlatZ-Frontpage
File:Frontpage-FlatZ.jpg|[https://github.com/galadril/FlatZ-Frontpage FlatZ-Frontpage-vil1driver]
File: ?.jpg |https://github.com/wez3/domoboard
File:Frontpage-wez3.png|[https://github.com/wez3/domoboard domoboard-wez3]
</gallery>
</gallery>


2017年3月9日 (四) 19:40的最新版本

创建自定义状态页面

www/views目录中有一个名为'frontpage_example.html'的示例文件，该文件像你展示如何创建一个自己的状态页面
这个例子是为iPad设计的，来自BiWired (希望你不要介意，否则请告诉我，我会改掉)
Domoticz从1.1534版开始拥有此特性从，请保持使用最新版Domoticz。
你可以看看这个论坛，里面有很多特别棒的例子: http://domoticz.com/forum/viewforum.php?f=8

制作

状态页想要获取设备的状态，需要设备所在房间平面图的房间序号。 你需要为此布局创建一个房间，并将所有要显示在此页面上的设备放在此房间中。
但是你也可以直接使用0号，其中包含您的Domoticz中安装的所有设备。如果Domoticz中设备数量过多，使用0号房间可能会导致Domoticz运行缓慢。

复制一个frontpage_example.html文件并重命名，比如frontpage.html
更改底部的$.roomplan以及$.domoticzurl 你还需要自定义页面内容，并且修改$.PageArray'
idx是Domoticz里设备的编号Idx
value是你要显示的JSON标签。比如一个开关会有"Status": "Off"，如果你想显示Off，就要输入Status。
label是描述信息的HTML标签的id
comment可以是任何字符，用来描述设备名字

具体的设备信息可以在这里找到http://127.0.0.1:8080/json.htm?type=devices&plan=0。返回的信息是JSON格式，你可以通过这个网页格式化JSON来增强其可读性：http://jsonviewer.stack.hu/

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

这里提供我的例子，你可以在此基础上做修改： 

<!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>

展示

取自“https://www.domoticz.cn/wiki/index.php?title=自定义状态页&oldid=99”