Приборная панель с несколькими приборами
Author
using Engee, GenieFramework, Sockets
const CTS_SIGNAL = UInt8(0x01)
@app begin
@out output_data_circular1 = 0.0
@out output_data_circular2 = 0.0
@out output_data_circular3 = 0.0
@out circular_gauge_string1 = "rotate(0, 21.55, 21.55)"
@out circular_gauge_string2 = "rotate(0, 21.55, 21.55)"
@out circular_gauge_string3 = "rotate(0, 21.55, 21.55)"
@out debug_string = "Запуск"
@private sender_socket = UDPSocket()
@onchange isready begin
@async begin
debug_string = "🟣"
try
udpsock = UDPSocket()
bind(udpsock, ip"127.0.0.1", 5150)
debug_string = "🟠"
sender_socket = UDPSocket()
while true
# Круглый индикатор
debug_string = "⚪"
send(sender_socket, ip"127.0.0.1", 5151, [CTS_SIGNAL])
data = recv(udpsock);
if length(data) == 3 # Размер входного пакета в байтах
output_data_circular1 = ntoh(reinterpret(UInt8, data[1])[1])
output_data_circular2 = ntoh(reinterpret(UInt8, data[2])[1])
output_data_circular3 = ntoh(reinterpret(UInt8, data[3])[1])
output_data_circular1 = min(315.5, max(0.0, output_data_circular1 / 100 * 315.5))
output_data_circular2 = min(315.5, max(0.0, output_data_circular2 / 100 * 315.5))
output_data_circular3 = min(315.5, max(0.0, output_data_circular3 / 100 * 315.5))
circular_gauge_string1 = "rotate($output_data_circular1, 21.55, 21.55)"
circular_gauge_string2 = "rotate($output_data_circular2, 21.55, 21.55)"
circular_gauge_string3 = "rotate($output_data_circular3, 21.55, 21.55)"
debug_string = "🟢"
else
@warn "Получен некорректный пакет размером $(length(data)) байт"
debug_string = "🟡"
end
# Короткая пауза чтобы не нагружать CPU
sleep(0.2)
end
catch e
@error "Ошибка при работе с UDP-сокетом" exception=e
debug_string = "🔴";
finally
close(udpsock)
close(sender_socket)
debug_string = "🟤";
end
end
end
end
function ui()
[
p("Состояние: {{debug_string}}"),
row([
column([
svg([
defs([linearGradient([stop(style="stop-color:#e7e7e7", offset="0"), stop(style="stop-color:#c6c6c6;stop-opacity:0", offset="1")], id="linearGradient4839_1", x1="11.291", x2="42.086", y1="12.927", y2="38.504", gradientTransform="translate(-3.7704 -4.9784)", gradientUnits="userSpaceOnUse"),
linearGradient([stop(style="stop-color:#d9d9d9", offset="0"), stop(style="stop-color:#cacaca;stop-opacity:0", offset="1")], id="linearGradient4911_1", x1="24.954", x2="25.003", y1="29.95", y2="23.192", gradientTransform="translate(-3.7704 -4.9784)", gradientUnits="userSpaceOnUse")]),
circle(cx="21.55", cy="21.55", r="21.3", style="fill:#fff;stop-color:#000000;stroke-width:.3;stroke:#ccc"),
circle(cx="21.55", cy="21.55", r="20.787", style="fill:url(#linearGradient4839_1);stop-color:#000000"),
circle(cx="21.55", cy="21.55", r="18.754", style="fill:#d5d5d5;stop-color:#000000;stroke-width:.1;stroke:#b4b4b4"),
circle(cx="21.55", cy="21.55", r="17.405", style="fill:#f2f2f2;stop-color:#000000"),
path(d="m21.614 5.5443v-1.3006", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m34.257 31.214 1.031.79273", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m27.614 36.269.4893 1.205", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m37.491 22.996 1.2948.12255", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m35.954 14.514 1.1694-.5691", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m30.083 7.9784.69059-1.1021", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m13.241 7.9192-.68282-1.1069", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m7.4033 14.253-1.1589-.59036", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m4.4389 23.087 1.295-.12019", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m8.8571 31.064-1.0403.78053", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m15.574 36.253-.49255 1.2037", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
text([tspan("50", x="19.967312", y="9.1463127", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="19.967312", y="9.1463127", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("40", x="13.337849", y="11.627018", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="13.337849", y="11.627018", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("30", x="8.504755", y="16.673965", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="8.504755", y="16.673965", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("20", x="6.9650078", y="23.388971", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="6.9650078", y="23.388971", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("10", x="9.4457102", y="30.061201", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="9.4457102", y="30.061201", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("0", x="15.690239", y="34.851524", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="15.690239", y="34.851524", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("60", x="26.639545", y="11.498707", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="26.639545", y="11.498707", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("70", x="31.130474", y="16.716736", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="31.130474", y="16.716736", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("80", x="33.269016", y="23.517282", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="33.269016", y="23.517282", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("90", x="30.146748", y="29.847345", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="30.146748", y="29.847345", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("100", x="23.645596", y="34.124424", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="23.645596", y="34.124424", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
path(d="m21.287 24.405-6.1832 13.013 4.5464-13.716z", style="fill:#ffbb00;stop-color:#000000;transition: transform .3s linear", transform! = "circular_gauge_string1"), # Стрелка прибора
circle(cx="21.55", cy="21.55", r="3.6783", style="fill:#fff;stop-color:#000000;stroke-width:.2;stroke:#a2a2a2"),
circle(cx="21.55", cy="21.55", r="3.3607", style="fill:url(#linearGradient4911_1);stop-color:#000000")
], width="150px", height="150px", viewBox="0 0 43 43", style="display: block; margin: 20px auto;"),
p("A1 [0:100]")
], height="200px", width="20%", align="center", style="min-width:170px; margin-top: 40px;"),
column([
svg([
defs([linearGradient([stop(style="stop-color:#e7e7e7", offset="0"), stop(style="stop-color:#c6c6c6;stop-opacity:0", offset="1")], id="linearGradient4839_2", x1="11.291", x2="42.086", y1="12.927", y2="38.504", gradientTransform="translate(-3.7704 -4.9784)", gradientUnits="userSpaceOnUse"),
linearGradient([stop(style="stop-color:#d9d9d9", offset="0"), stop(style="stop-color:#cacaca;stop-opacity:0", offset="1")], id="linearGradient4911_2", x1="24.954", x2="25.003", y1="29.95", y2="23.192", gradientTransform="translate(-3.7704 -4.9784)", gradientUnits="userSpaceOnUse")]),
circle(cx="21.55", cy="21.55", r="21.3", style="fill:#fff;stop-color:#000000;stroke-width:.3;stroke:#ccc"),
circle(cx="21.55", cy="21.55", r="20.787", style="fill:url(#linearGradient4839_2);stop-color:#000000"),
circle(cx="21.55", cy="21.55", r="18.754", style="fill:#d5d5d5;stop-color:#000000;stroke-width:.1;stroke:#b4b4b4"),
circle(cx="21.55", cy="21.55", r="17.405", style="fill:#f2f2f2;stop-color:#000000"),
path(d="m21.614 5.5443v-1.3006", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m34.257 31.214 1.031.79273", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m27.614 36.269.4893 1.205", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m37.491 22.996 1.2948.12255", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m35.954 14.514 1.1694-.5691", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m30.083 7.9784.69059-1.1021", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m13.241 7.9192-.68282-1.1069", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m7.4033 14.253-1.1589-.59036", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m4.4389 23.087 1.295-.12019", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m8.8571 31.064-1.0403.78053", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m15.574 36.253-.49255 1.2037", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
text([tspan("50", x="19.967312", y="9.1463127", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="19.967312", y="9.1463127", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("40", x="13.337849", y="11.627018", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="13.337849", y="11.627018", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("30", x="8.504755", y="16.673965", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="8.504755", y="16.673965", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("20", x="6.9650078", y="23.388971", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="6.9650078", y="23.388971", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("10", x="9.4457102", y="30.061201", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="9.4457102", y="30.061201", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("0", x="15.690239", y="34.851524", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="15.690239", y="34.851524", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("60", x="26.639545", y="11.498707", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="26.639545", y="11.498707", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("70", x="31.130474", y="16.716736", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="31.130474", y="16.716736", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("80", x="33.269016", y="23.517282", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="33.269016", y="23.517282", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("90", x="30.146748", y="29.847345", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="30.146748", y="29.847345", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("100", x="23.645596", y="34.124424", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="23.645596", y="34.124424", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
path(d="m21.287 24.405-6.1832 13.013 4.5464-13.716z", style="fill:#000;stop-color:#000000;transition: transform .3s linear", transform! = "circular_gauge_string2"), # Стрелка прибора
circle(cx="21.55", cy="21.55", r="3.6783", style="fill:#fff;stop-color:#000000;stroke-width:.2;stroke:#a2a2a2"),
circle(cx="21.55", cy="21.55", r="3.3607", style="fill:url(#linearGradient4911_2);stop-color:#000000")
], width="150px", height="150px", viewBox="0 0 43 43", style="display: block; margin: 20px auto;"),
p("A2 [0:100]")
], height="200px", width="20%", align="center", style="min-width:170px; margin-bottom: 40px;"),
column([
svg([
defs([linearGradient([stop(style="stop-color:#e7e7e7", offset="0"), stop(style="stop-color:#c6c6c6;stop-opacity:0", offset="1")], id="linearGradient4839_3", x1="11.291", x2="42.086", y1="12.927", y2="38.504", gradientTransform="translate(-3.7704 -4.9784)", gradientUnits="userSpaceOnUse"),
linearGradient([stop(style="stop-color:#d9d9d9", offset="0"), stop(style="stop-color:#cacaca;stop-opacity:0", offset="1")], id="linearGradient4911_3", x1="24.954", x2="25.003", y1="29.95", y2="23.192", gradientTransform="translate(-3.7704 -4.9784)", gradientUnits="userSpaceOnUse")]),
circle(cx="21.55", cy="21.55", r="21.3", style="fill:#fff;stop-color:#000000;stroke-width:.3;stroke:#ccc"),
circle(cx="21.55", cy="21.55", r="20.787", style="fill:url(#linearGradient4839_3);stop-color:#000000"),
circle(cx="21.55", cy="21.55", r="18.754", style="fill:#d5d5d5;stop-color:#000000;stroke-width:.1;stroke:#b4b4b4"),
circle(cx="21.55", cy="21.55", r="17.405", style="fill:#f2f2f2;stop-color:#000000"),
path(d="m21.614 5.5443v-1.3006", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m34.257 31.214 1.031.79273", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m27.614 36.269.4893 1.205", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m37.491 22.996 1.2948.12255", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m35.954 14.514 1.1694-.5691", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m30.083 7.9784.69059-1.1021", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m13.241 7.9192-.68282-1.1069", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m7.4033 14.253-1.1589-.59036", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m4.4389 23.087 1.295-.12019", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m8.8571 31.064-1.0403.78053", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
path(d="m15.574 36.253-.49255 1.2037", style="fill:none;stop-color:#000000;stroke-width:.41231;stroke:#000"),
text([tspan("50", x="19.967312", y="9.1463127", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="19.967312", y="9.1463127", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("40", x="13.337849", y="11.627018", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="13.337849", y="11.627018", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("30", x="8.504755", y="16.673965", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="8.504755", y="16.673965", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("20", x="6.9650078", y="23.388971", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="6.9650078", y="23.388971", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("10", x="9.4457102", y="30.061201", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="9.4457102", y="30.061201", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("0", x="15.690239", y="34.851524", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="15.690239", y="34.851524", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("60", x="26.639545", y="11.498707", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="26.639545", y="11.498707", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("70", x="31.130474", y="16.716736", style="fill-opaciffbb00ty:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="31.130474", y="16.716736", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("80", x="33.269016", y="23.517282", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="33.269016", y="23.517282", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("90", x="30.146748", y="29.847345", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="30.146748", y="29.847345", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
text([tspan("100", x="23.645596", y="34.124424", style="fill-opacity:1;fill:#333333;font-family:sans-serif;font-size:2.8222px;stroke-width:.4;stroke:none")], x="23.645596", y="34.124424", style="fill-opacity:.88385;fill:#333333;font-family:sans-serif;font-size:2.8222px;line-height:1.4;stop-color:#000000;stroke-width:.4;stroke:#000000"),
path(d="m21.287 24.405-6.1832 13.013 4.5464-13.716z", style="fill:#f00;stop-color:#000000;transition: transform .3s linear", transform! = "circular_gauge_string3"), # Стрелка прибора
circle(cx="21.55", cy="21.55", r="3.6783", style="fill:#fff;stop-color:#000000;stroke-width:.2;stroke:#a2a2a2"),
circle(cx="21.55", cy="21.55", r="3.3607", style="fill:url(#linearGradient4911_3);stop-color:#000000")
], width="150px", height="150px", viewBox="0 0 43 43", style="display: block; margin: 20px auto;"),
p("A3 [0:100]")
], height="200px", width="20%", align="center", style="min-width:170px; margin-top: 40px;")
], width="100%")
]
end
@page("/", ui)