[Dashticz]多段开关改为按钮组样式

[DT27]

Dashticz项目地址：https://github.com/robgeerts/dashticz_v2

========================
2017年7月19日19:52更新
此特性已提交到github，Beta版已集成。
========================

Dashticz默认多段开关显示为下拉列表，操作不方便。
此帖介绍将其改为按钮组的方法。
效果：

屏幕快照 2017-07-17 17.44.22.jpg (17.84 KiB) 查看 29850 次

操作步骤：
一、将下拉框替换为按钮组
在Dashticz/js/main.js文件中搜索

代码： 全选

html+='<select onchange="slideDevice

大约在12xx行，找到下列代码

代码： 全选

										html+='<select onchange="slideDevice('+device['idx']+',this.value);">';
										html+='<option value="">'+lang.select+'</option>';
										for(a in names){
											var s='';
											if((a*10)==parseFloat(device['Level'])) s = 'selected';
											html+='<option value="'+(a*10)+'" '+s+'>'+names[a]+'</option>';
										}
										html+='</select>';

将这部分代码删掉或者注释掉，改为

代码： 全选

										/**
										 * 多段开关按钮
										 */
										html+='<div class="btn-group" data-toggle="buttons">';
										for(a in names) {
											var s = '';
											if ((a * 10) == parseFloat(device['Level'])) s = 'active';
											html+='<label class="btn btn-default '+s+'" onclick="slideDevice('+device['idx']+',$(this).children(\'input\').val());">';
											html += '<input type="radio" name="options" autocomplete="off" value="'+(a*10)+'" checked>'+names[a];
											html+='</label>';
										}
										html+='</div>';

二、更改显示样式
由于默认开关模块及按钮都太小，所以需要修改样式。
模块大小修改，在Dashticz/custom/CONFIG.js文件中增加以下配置代码来加宽多段开关模块的宽度

代码： 全选

/*
 多段开关按钮
 */
var blocks = {}
blocks[12] = {}
blocks[12]['width'] = 8;

其中的12是多段开关设备的IDX，8是模块宽度，dashticz中将宽度分为12份，默认开关宽度4。

然后更改按钮显示样式，在Dashticz/custom/custom.css文件中增加以下样式代码

代码： 全选

/*
多段开关按钮
 */
.btn-group .btn{
    font-size: 12px;
    font-weight: 400;
    padding:2px 6px;
    margin-right: 2px;
}
.btn-group .btn.active{
    font-weight:700;
}

完成！

[blindlight]

QQ截图20170717183812.jpg (6.33 KiB) 查看 29846 次

搞定

[DT27]

QQ截图20170717183812.jpg
搞定

提交到Github了，beta版。
另外中文也修复了，稳定版

[blindlight]

QQ截图20170717183812.jpg
搞定

提交到Github了，beta版。
另外中文也修复了，稳定版

我那还是半成品 风向什么的都没翻呢

[DT27]

QQ截图20170717183812.jpg
搞定

提交到Github了，beta版。
另外中文也修复了，稳定版

我那还是半成品 风向什么的都没翻呢

暂时也用不到，以后再完善，主要是把js里中文的bug修复了。

[showphi]

有没有群晖版的插件啊，大神

[DT27]

有没有群晖版的插件啊，大神

Dashticz不是插件，只是一堆html、js、css，直接将整个Dashticz文件夹放到domoticz/www目录里就可以了，访问时直接 domoticz访问地址/dashticz_v2/

[showphi]

明白了，只是改了下UI，谢谢

[binai]

有没有群晖版的插件啊，大神

Dashticz不是插件，只是一堆html、js、css，直接将整个Dashticz文件夹放到domoticz/www目录里就可以了，访问时直接 domoticz访问地址/dashticz_v2/

dashticz_v2 这个怎么配置，把 dashticz_v2 这个目录放在 www 后，访问时就只有一个时间显示。

[Admin]

有没有群晖版的插件啊，大神

Dashticz不是插件，只是一堆html、js、css，直接将整个Dashticz文件夹放到domoticz/www目录里就可以了，访问时直接 domoticz访问地址/dashticz_v2/

dashticz_v2 这个怎么配置，把 dashticz_v2 这个目录放在 www 后，访问时就只有一个时间显示。

代码： 全选

cd domoticz/www/dashticz_v2/custom/
cp CONFIG_DEFAULT.js CONFIG.js

然后编辑CONFIG.js
官方说明：http://www.domoticz.com/wiki/Dashticz_V2_-_Installation

[kqwkn]

谢谢大神，已经搞定！效果不错

QQ截图20170803011436.png (10.38 KiB) 查看 29650 次