odinvolk
<<<
Back
Шаблон класса / Class Template Димер
Шаблон класса для димера на svg нарисовано по мотивам форума.
При установке заменяет стандартный шаблон Простых устройств Димер
 |
Шаблон класса для димера на svg нарисовано по мотивам форума.
Код вставить в Панель управления/classes/SDevices/SControllers/SDimmers/Шаблон отображения.
Для изменения размера корректируем (width="279" height="215")
<?xml version="1.0" encoding="UTF-8"?>
<svg id="%.object_title%%.linkedRoom%" version="1.1" viewBox="0 0 279 215" width="279" height="215" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="fon%.object_id%" width="279" height="205" rx="8.3" ry="8.3" fill="#f6f8f7" stroke='%.alive|"red;#f6f8f7;"%' stroke-width='%.alive|"2;0.1;"%'/>
<g id="button25%.object_id%" onclick="dimmerSet%.object_id%(25);" >
<circle id="batt25%.object_id%" cx="105" cy="45" r="23" fill="#7e8492" opacity=".9" stroke="#5a5d60" stroke-width="2"/>
<text id="t25%.object_id%" x="106" y="51" fill="#fff" font-family="FreeSans" font-size="14px" font-weight="600" stroke-width="1px" text-anchor="middle">25%</text>
<circle id="mask25%.object_id%" cx="105" cy="45" r="23" fill="#e3dcd5" fill-opacity=".3" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="button50%.object_id%" onclick="dimmerSet%.object_id%(50);" >
<circle id="batt50%.object_id%" cx="105" cy="115" r="23" fill="#7e8492" fill-rule="evenodd" opacity=".9" stroke="#5a5d60" stroke-width="2"/>
<text id="t50%.object_id%" x="92" y="121" fill="#fff" font-family="FreeSans" font-size="14px" font-weight="600">50%</text>
<circle id="mask50%.object_id%" cx="105" cy="115" r="23" fill="#e3dcd5" fill-opacity=".3" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="button75%.object_id%" onclick="dimmerSet%.object_id%(75);" >
<circle id="batt75%.object_id%" cx="175" cy="115" r="23" fill="#7e8492" opacity=".9" stroke="#5a5d60" stroke-width="2"/>
<text id="t75%.object_id%" x="162" y="121" fill="#fff" font-family="FreeSans" font-size="14px" font-weight="600" stroke-width="1px">75%</text>
<circle id="mask75%.object_id%" cx="175" cy="115" r="23" fill="#e3dcd5" fill-opacity=".3" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="button100%.object_id%" onclick="dimmerSet%.object_id%(100);" >
<circle id="batt100%.object_id%" cx="175" cy="45" r="23" fill="#7e8492" opacity=".9" stroke="#5a5d60" stroke-width="2"/>
<text id="t100%.object_id%" x="177" y="51" fill="#fff" font-family="FreeSans" font-size="14px" font-weight="600" text-anchor="middle">100%</text>
<circle id="mask100%.object_id%" cx="175" cy="45" r="23" fill="#e3dcd5" fill-opacity=".2" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="buttonred%.object_id%" onclick="dimmerSet%.object_id%(0);" >
<circle id="buttonred%.object_id%" cx="140" cy="80" r="20" fill="#f95951" opacity=".9" stroke="#9b2d3b" stroke-width="2"/>
<text id="t25-3%.object_id%" x="140" y="86" fill="#fff" font-family="FreeSans" font-size="14px" font-weight="600" text-anchor="middle">0%</text>
<circle id="maskbuttonred%.object_id%" cx="140" cy="80" r="20" fill="#e3dcd5" fill-opacity=".2" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<path id="maskabright%.object_id%" d="m63.9 38.9v69.9c0 20.7-15.7 29.6-29.6 29.6s-29.6-8.91-29.6-29.6v-69.9c0-20.7 15.7-29.6 29.6-29.6s29.6 8.85 29.6 29.6z" fill="#383c47" stroke-width="1"/>
<g id="battupbr%.object_id%" onclick="return dimmerChange%.object_id%('+');" >
<circle id="battup%.object_id%" cx="34" cy="39" r="23" fill="#dbdcdd" opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<path id="b%.object_id%" d="m19 35.8c-1.09 1.45 0.176 1.51 2.12-0.241 4.7-4 8.99-6.37 13.6-6.37 5.14 6.2e-5 8.43 1.88 13.2 6.37 1.6 1.62 3.1 1.9 1.92 1.6e-5 -7.87-10-12.1-15.4-15.1-15.4-3.63 0.0078-7.4 5.42-15.7 15.6z" fill="#303037"/>
<path id="brightFigur%.object_id%" d="m39.4 43.6a5.06 5.06 0 0 1 -5.06 5.06 5.06 5.06 0 0 1 -5.06 -5.06 5.06 5.06 0 0 1 5.06 -5.06 5.06 5.06 0 0 1 5.06 5.06m1.32 0.0012a6.39 6.39 0 0 1 -6.39 6.39 6.39 6.39 0 0 1 -6.39 -6.39 6.39 6.39 0 0 1 6.39 -6.39 6.39 6.39 0 0 1 6.39 6.39m2.91 5.64h-1.87v-1.87h1.87zm-3.55 3.35h-1.87v-1.87h1.87zm6.87-8.05h-3.89v-1.87h3.89zm-3.3-6.59h-1.87v1.87h1.87zm-3.55-3.35h-1.87v1.87h1.87zm-15 14.6h1.87v-1.87h-1.87zm3.55 3.35h1.87v-1.87h-1.87zm4.81 3.89v-3.89h1.87v3.89zm-11.7-11.9h3.89v-1.87h-3.89zm3.3-6.59h1.87v1.87h-1.87zm3.55-3.35h1.87v1.87h-1.87zm4.81-3.89v3.89h1.87v-3.89z" fill-rule="evenodd" opacity=".9" stroke-width="1"/>
<circle id="maskbrightup%.object_id%" cx="34" cy="39" r="23" fill="#e3dcd5" fill-opacity=".3" onmouseout=" this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="battdownbr%.object_id%" onclick="return dimmerChange%.object_id%('-');" >
<circle id="battdown%.object_id%" cx="34" cy="109" r="23" fill="#dbdcdd" opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<path id="as%.object_id%" d="m18.8 112c-1.09-1.45 0.176-1.51 2.12 0.241 4.7 4 8.99 6.37 13.6 6.37 5.14-8e-5 8.43-1.88 13.2-6.37 1.6-1.62 3.1-1.9 1.92 0-7.87 10-12.1 15.4-15.1 15.4-3.63-8e-3 -7.4-5.42-15.7-15.6z" fill="#303037"/>
<path id="brightFigur%.object_id%" d="m39.3 104a5.06 5.06 0 0 0 -5.06 -5.06 5.06 5.06 0 0 0 -5.06 5.06 5.06 5.06 0 0 0 5.06 5.06 5.06 5.06 0 0 0 5.06 -5.06m1.32-1e-3a6.39 6.39 0 0 0 -6.39 -6.39 6.39 6.39 0 0 0 -6.39 6.39 6.39 6.39 0 0 0 6.39 6.39 6.39 6.39 0 0 0 6.39 -6.39m2.91-5.64h-1.87v1.87h1.87zm-3.55-3.35h-1.87v1.87h1.87zm6.87 8.05h-3.89v1.87h3.89zm-3.3 6.59h-1.87v-1.87h1.87zm-3.55 3.35h-1.87v-1.87h1.87zm-15-14.6h1.87v1.87h-1.87zm3.55-3.35h1.87v1.87h-1.87zm4.81-3.89v3.89h1.87v-3.89zm-11.7 11.9h3.89v1.87h-3.89zm3.3 6.59h1.87v-1.87h-1.87zm3.55 3.35h1.87v-1.87h-1.87zm4.81 3.89v-3.89h1.87v3.89z" opacity=".9" stroke-width="1" fill-rule="evenodd"/>
<circle id="maskbrightdown%.object_id%" cx="34" cy="109" r="23" fill="#e3dcd5" fill-opacity=".3" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<text id="texttitle%.object_id%" x="139" y="14" fill="#ff0000" font-family="FreeSans" font-size="14px" font-weight="600" stroke-width="1px" text-anchor="middle">%.object_description%</text>
<text id="dimmer%.object_id%_level" x="34" y="80" fill="#ff0000" font-family="FreeSans" font-size="14px" font-weight="600" stroke-width="1px" text-anchor="middle">%.level%</text>
<path id="maskatime%.object_id%" d="m274 38.9v69.9c0 20.7-15.7 29.6-29.6 29.6s-29.6-8.91-29.6-29.6v-69.9c0-20.7 15.7-29.6 29.6-29.6s29.6 8.85 29.6 29.6z" fill="#383c47" stroke-width="1"/>
<g id="buttonupt%.object_id%" onClick='callMethod("%.object_title%.timeplus");'>
<circle id="battupt%.object_id%" cx="245" cy="39" r="23" fill="#dbdcdd" opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<path id="b-6%.object_id%" d="m229 36.2c-1.09 1.45 0.176 1.51 2.12-0.241 4.7-4 8.99-6.37 13.6-6.37 5.14 6.2e-5 8.43 1.88 13.2 6.37 1.6 1.62 3.1 1.9 1.92 1.6e-5 -7.87-10-12.1-15.4-15.1-15.4-3.63 0.0078-7.4 5.42-15.7 15.6z" fill="#303037"/>
<path id="timerup%.object_id%" d="m235 44 2.72-0.0167m14.8 0.0333 2.72-0.0167m-10-7.41-0.0167-2.72m-0.0978 20.3-0.0167-2.72m-4.79-10.9 4.81 4.21 6.11-5.77m4.03 5.04a10.1 10.1 0 0 1 -10.1 10.1 10.1 10.1 0 0 1 -10.1 -10.1 10.1 10.1 0 0 1 10.1 -10.1 10.1 10.1 0 0 1 10.1 10.1z" fill="none" stroke="#000" stroke-linecap="round"/>
<circle id="masktimerup%.object_id%" cx="245" cy="39" r="23" fill="#e3dcd5" fill-opacity=".3" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<text id="texttimer%.object_id%" x="245" y="79" fill="#f00000" font-family="FreeSans" font-size="14px" font-weight="600" stroke-width="1px" text-anchor="middle">%.timer%</text>
<g id="buttondownt%.object_id%" onClick='callMethod("%.object_title%.timeminus");'>
<circle id="battdownt%.object_id%" cx="245" cy="109" r="23" fill="#dbdcdd" opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<path id="as-9%.object_id%" d="m229 112c-1.09-1.45 0.176-1.51 2.12 0.241 4.7 4 8.99 6.37 13.6 6.37 5.14-7e-5 8.43-1.88 13.2-6.37 1.6-1.62 3.1-1.9 1.92 0-7.87 10-12.1 15.4-15.1 15.4-3.63-8e-3 -7.4-5.42-15.7-15.6z" fill="#303037"/>
<path id="timerdown%.object_id%" d="m235 104 2.72-0.0167m14.8 0.0333 2.72-0.0167m-10-7.41-0.0167-2.72m-0.0978 20.3-0.0167-2.72m-4.79-10.9 4.81 4.21 6.11-5.77m4.03 5.04a10.1 10.1 0 0 1 -10.1 10.1 10.1 10.1 0 0 1 -10.1 -10.1 10.1 10.1 0 0 1 10.1 -10.1 10.1 10.1 0 0 1 10.1 10.1z" fill="none" stroke="#000" stroke-linecap="round"/>
<circle id="masktimerdown%.object_id%" cx="245" cy="109" r="23" fill="#e3dcd5" fill-opacity=".3" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="buttonMemory%.object_id%" onClick='callMethod("%.object_title%.switch");'>
<circle id="battMemory%.object_id%" cx="35" cy="173" r="23" fill='%.status|"#dbdcdd;#a7ff52;"%' opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<text id="tMemory%.object_id%" x="33" y="179" fill="#fff" font-family="FreeSans" font-size="14px" font-weight="500" stroke-width="1px" text-anchor="middle">%.saved_level%м</text>
<circle id="maskbattMemory%.object_id%" cx="35" cy="173" r="24" fill="#e3dcd5" fill-opacity=".2" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="buttonL%.object_id%" onclick='setGlobal("Dimmer03.level",56);'>
<circle id="battL%.object_id%" cx="105" cy="173" r="23" fill="#dbdcdd" opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<text id="tL%.object_id%" x="104" y="178" fill="#fff" font-family="FreeSans" font-size="18px" font-weight="500" stroke-width="1px" text-anchor="middle">Л</text>
<circle id="maskbattL%.object_id%" cx="105" cy="173" r="24" fill="#e3dcd5" fill-opacity=".2" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="buttonGradient%.object_id%" onclick='callMethod(%.object_title%.dimUpDown");'>
<circle id="battGradient%.object_id%" cx="175" cy="173" r="23" fill="#dbdcdd" opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<text id="tGradient%.object_id%" x="175" y="178" fill="#fff" font-family="FreeSans" font-size="18px" font-weight="500" stroke-width="1" text-anchor="middle">%.gradient%</text>
<circle id="maskbattGradient%.object_id%" cx="175" cy="173" r="24" fill="#e3dcd5" fill-opacity=".2" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
<g id="buttonCNT%.object_id%" onclick='callMethod(%.object_title%.pwmCnt");'>
<circle id="batt75-3-6%.object_id%" cx="245" cy="173" r="23" fill="#dbdcdd" opacity=".9" stroke="#9e9ea9" stroke-width="2"/>
<text id="tCNT%.object_id%" x="245" y="178" fill="#fff" font-family="FreeSans" font-size="14px" font-weight="500" stroke-width="1px" text-anchor="middle">%.cnt%</text>
<circle id="maskbattCNT%.object_id%" cx="245" cy="173" r="24" fill="#e3dcd5" fill-opacity=".3" onmouseout="this.style['stroke-width'] = 0;" onmouseover="this.style.stroke = '#5a5d60'; this.style['stroke-width'] = 4;"/>
</g>
</svg>
<script type="text/javascript">
var dimmer%.object_id%Level=%.level%;
var dimmer%.object_id%Step=%.step%;
var dimmer%.object_id%Timer=%.timer%;
function sendNewLevel%.object_id%() {0
setGlobal("%.object_title%.level",dimmer%.object_id%Level);
}
function dimmerSet%.object_id%(val) {
dimmer%.object_id%Level=val;
$('#dimmer%.object_id%_level').html(dimmer%.object_id%Level);
sendNewLevel%.object_id%();
}
function dimmerChange%.object_id%(d) {
if (d=='+') {
dimmer%.object_id%Level+=dimmer%.object_id%Step;
if (dimmer%.object_id%Level>100) {
dimmer%.object_id%Level=100;
}
} else {
dimmer%.object_id%Level-=dimmer%.object_id%Step;
if (dimmer%.object_id%Level<0) {
dimmer%.object_id%Level=0;
}
}
$('#dimmer%.object_id%_level').html(dimmer%.object_id%Level);
clearTimeout(dimmer%.object_id%Timer);
dimmer%.object_id%Timer=setTimeout('sendNewLevel%.object_id%()',1000);
return false;
}
</script>дальше вставляем в меню или на сцену в виде (object) Связанный объект (Dimmer01...00)
See also:
2018-03-24 Шаблон класса / Class Template Термостат
