ТермоСтолб
(custom)
<svg width="200px" height="140px">
<!-- столб -->
<defs>
<linearGradient id="element352Gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop id="element352g1c1" offset="0%" stop-color=rgb(0%,0%,100%) />
<stop id="element352g1c2"offset="100%" stop-color=rgb(100%,0%,0%) />
</linearGradient>
</defs>
<polyline points="11 20, 11.001 120" stroke="url(#element352Gradient1)" stroke-width="20px" fill="none" stroke-linecap="round"/>
<!-- т/в верх -->
<text id="element352t1" x="30" y="30" fill="black" stroke="none" font-size="14px">0°C</text>
<text x="30" y="50" fill="black" stroke="none" font-size="14px">%hs_steamroom.status%%</text>
<!-- т/в низ -->
<text id="element352t2" x="30" y="95" fill="black" stroke="none" font-size="14px">0°C</text>
<text x="30" y="115" fill="black" stroke="none" font-size="14px">%hs_steamroom2.status%%</text>
<!-- стрела верх -->
<g transform="translate(90, 25)">
<path id="e_352_arrow1" d="M0,-6 l-4,12 l4,-3 l4,3 z" fill="#231F20" display="none"/>
</g>
<g transform="translate(90, 90)">
<path id="e_352_arrow2" d="M0,-6 l-4,12 l4,-3 l4,3 z" fill="#231F20" display="none"/>
</g>
</svg>
<script type="application/javascript">
// Стрелки направления изменения температуры
var r=%ts_steamroom.direction%;
if (r == 0) { d='none'; } else { d='block'; }
if (r == 1) r=0;
if (r == -1) r=180;
document.getElementById('e_352_arrow1').setAttribute('transform', 'rotate(' + r + ')');
document.getElementById('e_352_arrow1').setAttribute('display', d);
var r=%ts_steamroom2.direction%;
if (r == 0) { d='none'; } else { d='block'; }
if (r == 1) r=0;
if (r == -1) r=180;
document.getElementById('e_352_arrow2').setAttribute('transform', 'rotate(' + r + ')');
document.getElementById('e_352_arrow2').setAttribute('display', d);
// градиент столба
var a=0; var b=0;
a=%ts_steamroom.status%;
document.getElementById('element352t1').innerHTML=a+"°C";
a=Math.min(a,100);
a=Math.max(a,30);
a=Math.round(255/(100-30)*(a-30));
b=255-a;
document.getElementById('element352g1c1').setAttribute('stop-color', "rgb("+a+",0,"+b+")");
a=%ts_steamroom2.status%;
document.getElementById('element352t2').innerHTML=a+"°C";
a=Math.min(a,100);
a=Math.max(a,30);
a=Math.round(255/(100-30)*(a-30));
b=255-a;
document.getElementById('element352g1c2').setAttribute('stop-color', "rgb("+a+",0,"+b+")");
</script>