Domoticz自定义页面设置方法
Domoticz的网页显示适合管理，不适合展示数据内容，自定义显示方式十分有必要。Domoticz本身是可以自定义页面的，https://www.domoticz.cn/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E7%8A%B6%E6%80%81%E9%A1%B5就讲了如何设置自定义页面的方法，但说得不清不楚，在试验成功的基础上，总结下自定义页面的做法。
首先找一个喜欢的自定义页面，把页面html代码拷贝出来，比如下面这个：
<!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>修改html当中的一些参数：
首先修改房间号:设置了多个房间的下面改为对应的编号，跨多个房间的数据要显示的，选择0
$.roomplan=0;其次改domoticz地址，在内网部署的话，一般是
$.domoticzurl="http://192.168.1.XXX:8080"; 然后观察图片
中各个数据显示块的内容，把对应位置的名称改为自己想要展示的数据名称
<div id="label_lg">室内湿度 (%)</div>数据命名行中的id记清楚，然后到$.PageArray中修改或加入对应的JSON格式数据
['19','Temp','itemp','woonkamer'], //卧室温度第一个单引号内是domoticz中相关硬件设备的idx，第二个单引号内是对应硬件设备反馈JSON数据中要显示哪个栏目的内容，第三个单引号内是对应数据命名行中的id,第四个单引号内是描述，可以不用管它。每个要显示的数据栏需要有这么一行数据。
其中容易出问题的是第二个单引号的填写内容，如果错误或没有对应栏目，数据处会显示？？。用http://192.168.1.XXX:8080/json.htm?type=devices&plan=0来看所有设备的状态数据，找到对应idx设备的数据，在{}之间的json数据中找到要展示的栏目，把栏目名称填进去。对传感器而言，温度一般是Temp,湿度一般是Humidity，气压一般是Barometer，其他自己定义的传感器如果没有具体的栏目可以填写Data。开关状态显示填Status。
这个html文件修改调试好后，比如叫a.html,把它移动到/home/pi/domoticz/www/views目录下，这样在浏览器中输入网址http://192.168.1.XXX:8080/views/a.html就可以在浏览器中显示自定义页面内容了。我调整过的页面如下：
可以设置开机自动显示，在终端界面中输入指令：
cd /home/pi/.config/
mkdir autostart
cd /autostart
sudo nano my.desktop输入如下指令：
[Desktop Entry]
Type=Application
Exec=chromium-browser --disable-popup-blocking --no-first-run --disable-desktop-notifications --kiosk "http://192.168.1.XXX:8080/views/a.html"重启生效。因为是全屏模式，遮蔽了菜单界面等，如要退出按Alt+F4。
