html
(custom)
<link rel="stylesheet" href="/css/ui-kit.css">
<div class="uk-container">
<div class="ui uk-row mb-16">
<div class="ui uk-row">
<span class="ui header uppercase">Климат</span>
<i class="majordomo icon medium right-floated"></i>
</div>
<div class="ui divider"></div>
<div class="ui uk-row">
<span class="ui header">%ThisComputer.timeNow%</span>
<span class="ui header right-floated">%ThisComputer.Date%</span>
</div>
</div>
<div class="ui-thermostat" style="width: 100%; text-align: center;">
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="thermostat">
<text id="ROOM_TEMP" fill="#3D3E3F" xml:space="preserve" style="white-space: pre" font-family="Roboto Condensed" font-size="64" font-weight="bold" letter-spacing="0em"><tspan x="86.4375" y="179.375">%Livingroom.requiredTemperature%°C</tspan></text>
<path id="E15" data-temp="15" onclick="tempClick(this);" d="M43.934 256.066C33.9208 246.053 25.376 234.672 18.554 222.263L57.9878 200.584C62.7632 209.271 68.7446 217.237 75.7538 224.246L43.934 256.066Z" fill="#72BC4C"/>
<path id="E16" data-temp="16" onclick="tempClick(this);" d="M16.349 218.099C9.92018 205.481 5.31038 192.017 2.65692 178.107L46.8598 169.675C48.7173 179.412 51.9441 188.837 56.4443 197.669L16.349 218.099Z" fill="#72BC4C"/>
<path id="E17" data-temp="17" onclick="tempClick(this);" d="M1.84675 173.465C-0.368481 159.479 -0.592019 145.249 1.18279 131.2L45.828 136.84C44.5856 146.674 44.7421 156.635 46.2927 166.426L1.84675 173.465Z" fill="#72BC4C"/>
<path id="E18" data-temp="18" onclick="tempClick(this);" d="M1.84675 126.535C4.06198 112.548 8.24658 98.9461 14.2759 86.1331L54.9932 105.293C50.7726 114.262 47.8434 123.784 46.2927 133.574L1.84675 126.535Z" fill="#72BC4C"/>
<path id="E19" data-temp="19" onclick="tempClick(this);" d="M16.349 81.9014C22.7779 69.2841 30.961 57.6407 40.6547 47.3179L73.4583 78.1225C66.6727 85.3485 60.9445 93.4989 56.4443 102.331L16.349 81.9014Z" fill="#72BC4C"/>
<path id="E20" data-temp="20" onclick="tempClick(this);" d="M43.934 43.934C53.9471 33.9208 65.3278 25.376 77.7369 18.554L99.4158 57.9878C90.7294 62.7632 82.763 68.7446 75.7538 75.7538L43.934 43.934Z" fill="#72BC4C"/>
<path id="E21" data-temp="21" onclick="tempClick(this);" d="M81.9014 16.349C94.5187 9.92018 107.983 5.31038 121.893 2.65691L130.325 46.8598C120.588 48.7173 111.163 51.9441 102.331 56.4443L81.9014 16.349Z" fill="#72BC4C"/>
<path id="E22" data-temp="22" onclick="tempClick(this);" d="M126.535 1.84675C140.521 -0.368482 154.751 -0.592019 168.8 1.1828L163.16 45.828C153.326 44.5856 143.365 44.7421 133.574 46.2927L126.535 1.84675Z" fill="#D9D9D9"/>
<path id="E23" data-temp="23" onclick="tempClick(this);" d="M173.465 1.84675C187.452 4.06198 201.054 8.24659 213.867 14.276L194.707 54.9932C185.738 50.7726 176.216 47.8434 166.426 46.2927L173.465 1.84675Z" fill="#D9D9D9"/>
<path id="E24" data-temp="24" onclick="tempClick(this);" d="M218.099 16.349C230.716 22.7779 242.359 30.961 252.682 40.6547L221.877 73.4583C214.652 66.6727 206.501 60.9445 197.669 56.4443L218.099 16.349Z" fill="#D9D9D9"/>
<path id="E25" data-temp="25" onclick="tempClick(this);" d="M256.066 43.934C266.079 53.9471 274.624 65.3278 281.446 77.7369L242.012 99.4159C237.237 90.7294 231.255 82.763 224.246 75.7538L256.066 43.934Z" fill="#D9D9D9"/>
<path id="E26" data-temp="26" onclick="tempClick(this);" d="M283.651 81.9014C290.08 94.5188 294.69 107.983 297.343 121.893L253.14 130.325C251.283 120.588 248.056 111.163 243.556 102.331L283.651 81.9014Z" fill="#D9D9D9"/>
<path id="E27" data-temp="27" onclick="tempClick(this);" d="M298.153 126.535C300.368 140.521 300.592 154.751 298.817 168.8L254.172 163.16C255.414 153.326 255.258 143.365 253.707 133.574L298.153 126.535Z" fill="#D9D9D9"/>
<path id="E28" data-temp="28" onclick="tempClick(this);" d="M298.153 173.465C295.938 187.452 291.753 201.054 285.724 213.867L245.007 194.707C249.227 185.738 252.157 176.216 253.707 166.426L298.153 173.465Z" fill="#D9D9D9"/>
<path id="E29" data-temp="29" onclick="tempClick(this);" d="M283.651 218.099C277.222 230.716 269.039 242.359 259.345 252.682L226.542 221.877C233.327 214.652 239.056 206.501 243.556 197.669L283.651 218.099Z" fill="#D9D9D9"/>
<text id="ROOM_TEXT" data-room="Livingroom" fill="#3D3E3F" xml:space="preserve" style="white-space: pre" font-family="Roboto Condensed" font-size="20" font-weight="500" letter-spacing="0em" x="150" y="103" text-anchor="middle">ГОСТИНАЯ</text>
</g>
</svg>
</div>
<div class="ui labeled uk-button mb-16" onclick="roomClick(this);" data-room="Livingroom" data-room-temp="%Livingroom.requiredTemperature%">
<div class="uk-button">ГОСТИНАЯ</div>
<div class="label" data-room-temp="%Livingroom.Temperature%">%Livingroom.Temperature%°C</div>
<div class="ui uk-reddot" data-room="Livingroom" ></div>
</div>
<div class="ui labeled disabled uk-button mb-16">
<div class="uk-button">ДЕТСКАЯ МИШИ</div>
<div class="label">--°C</div>
</div>
<div class="ui labeled uk-button mb-16" onclick="roomClick(this);" data-room="Gostevaya" data-room-temp="%Gostevaya.requiredTemperature%">
<div class="uk-button">ГОСТЕВАЯ</div>
<div class="label" data-room-temp="%Gostevaya.Temperature%">%Gostevaya.Temperature%°C</div>
<div class="ui uk-reddot" data-room="Gostevaya" ></div>
</div>
<div class="ui labeled disabled uk-button mb-16">
<div class="uk-button">ДЕТСКАЯ УЛЬЯНЫ</div>
<div class="label" data-room-temp="%Ulyanaroom.Temperature%">%Ulyanaroom.Temperature%°C</div>
</div>
<div class="ui labeled uk-button mb-16" onclick="roomClick(this);" data-room="Hall" data-room-temp="%Hall.requiredTemperature%">
<div class="uk-button">ПРИХОЖАЯ</div>
<div class="label" data-room-temp="%Hall.Temperature%">%Hall.Temperature%°C</div>
<div class="ui uk-reddot" data-room="Hall" ></div>
</div>
<div class="ui labeled disabled uk-button mb-16">
<div class="uk-button">СПАЛЬНЯ</div>
<div class="label">--°C</div>
</div>
<div class="ui labeled disabled uk-button mb-16">
<div class="uk-button">ГАРДЕРОБ</div>
<div class="label">--°C</div>
</div>
<div class="ui labeled disabled uk-button mb-16">
<div class="uk-button">ВАННАЯ<br />2 ЭТАЖ</div>
<div class="label">--°C</div>
</div>
<div class="ui uk-row">
<div class="ui divider"></div>
<div class="ui uk-row bottom-menu">
<a href="/menu/205.html"><i class="user icon medium"></i></a>
<a href="/menu/206.html"><i class="thermometer icon medium"></i></a>
<a href="/menu/208.html"><i class="camera icon medium"></i></a>
<a href="/menu/212.html"><i class="chart-donut icon medium"></i></a>
<a href="/menu/227.html"><i class="home-3-alt icon medium"></i></a>
</div>
</div>
</div>
<script type="text/javascript">
function roomClick(room) {
$('#ROOM_TEXT').html($(room).children('div.uk-button').text());
$('#ROOM_TEXT').attr('data-room', $(room).attr('data-room'));
$('#thermostat').children('path').attr('fill', '#D9D9D9');
$('#ROOM_TEMP > tspan').html($(room).attr('data-room-temp')+'°C');
$('#thermostat > path:lt('+($(room).attr('data-room-temp')-14)+')').attr('fill', '#72BC4C');
}
function tempClick(path) {
$('#ROOM_TEMP > tspan').html($(path).attr('data-temp')+'°C');
$('#thermostat').children('path').attr('fill', '#D9D9D9');
$('#thermostat > path:lt('+($(path).attr('data-temp')-14)+')').attr('fill', '#72BC4C');
ajaxSetGlobal($('#ROOM_TEXT').attr('data-room')+'.requiredTemperature', $(path).attr('data-temp'));
callMethod($('#ROOM_TEXT').attr('data-room')+'.onTemperatureChange', 'NEW_VALUE='+
$('.ui.labeled.uk-button[data-room="'+$('#ROOM_TEXT').attr('data-room')+'"] > div.label').attr('data-room-temp'));
}
$('.ui.labeled.uk-button[data-room="Livingroom"]').click();
if (%Livingroom.heatingStatus% == 1) { $('.ui.uk-reddot[data-room="Livingroom"]').show(); } else { $('.ui.uk-reddot[data-room="Livingroom"]').hide(); }
if (%Gostevaya.heatingStatus% == 1) { $('.ui.uk-reddot[data-room="Gostevaya"]').show(); } else { $('.ui.uk-reddot[data-room="Gostevaya"]').hide(); }
if (%Hall.heatingStatus% == 1) { $('.ui.uk-reddot[data-room="Hall"]').show(); } else { $('.ui.uk-reddot[data-room="Hall"]').hide(); }
</script>