自定义状态页：修订间差异
无编辑摘要 |
无编辑摘要 |
||
| （未显示同一用户的2个中间版本） | |||
| 第23行： | 第23行： | ||
如果你想在外部访问此页面，推荐使用VPN连接到你家里的网络。 | 如果你想在外部访问此页面，推荐使用VPN连接到你家里的网络。 | ||
这里提供我的例子，你可以在此基础上做修改： | |||
[[File:frontpage.jpg|right]] | [[File:frontpage.jpg|right]] | ||
<syntaxhighlight lang="html4strict" line='line'> | <syntaxhighlight lang="html4strict" line='line'> | ||
| 第35行： | 第35行： | ||
<style type="text/css"> | <style type="text/css"> | ||
div#cnt { | div#cnt { | ||
width: 990px; | |||
margin: 0 auto; | margin: 0 auto; | ||
text-align: center; | text-align: center; | ||
| 第41行： | 第41行： | ||
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; | ||
| 第279行： | 第278行： | ||
==展示== | ==展示== | ||
<gallery> | <gallery> | ||
File: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 | File:Frontpage-FlatZ.jpg|[https://github.com/galadril/FlatZ-Frontpage FlatZ-Frontpage-vil1driver] | ||
File: | 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>
