Архитектура визуализации

Используемые Web технологии

Данная система полностью построена на WEB технологии используя в своей основе файлы SVG и CSS.

SVG (Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую.

CSS (Cascading Style Sheets «каскадные таблицы стилей») — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG.

Библиотека элементов в формате SVG

Для создания визуализаций необходимо наполнить библиотеку подготовленными (как подготовить файлы смотри в разделе «Подготовка SVG») элементами в формате SVG. Сами элементы могут быть созданы в любой программе векторной графики, но мы рекомендуем для создания и редактирования элементов SVG использовать инструмент Penpot (входит в платформу 4iot) или облачное приложение Figma.

Подготовка SVG элементов

Для редактирования файла SVG его можно открыть любым текстовым редактором.

Для целей визуализации данных, предусмотрены следующие типы анимаций:

  1. Изменение цвета в зависимости от состояния сигнала, связанного с элементом («normal»-зеленый цвет, «fault»- серый цвет, «overridden» – желтый цвет, «in-alarm» - красный цвет) – применимо ко всем типам сигналов;

  2. Показать-скрыть элемент (либо его часть) в зависимости от значения, связанного сигнала(«True»- показать, «False»-скрыть или наоборот) – применимо для бинарных сигналов;

  3. Вращение элемента (либо его части) в зависимости от значения, связанного сигнала(«True»- вращается, «False»- стоит) – применимо для бинарных сигналов;

  4. Отображение значений (например значение температуры) в зависимости от значения, связанного сигнала – применимо для аналоговых сигналов;

  5. Изменение размера элемента по осям X или Y в зависимости от значения, связанного сигнала – применимо для аналоговых сигналов;

  6. Элемент с мультисостояниями, которые отображаются в зависимости от значения, связанного сигнала – применимо для multistate сигналов;

  7. Мигание элемента (либо его части) например «авария» - применимо для бинарных сигналов;

В одном svg-элементе может быть использовано несколько различных анимаций, каждая из которых связана со своим сигналом. Все анимации построены на изменении свойств элементов с использованием CSS классов и стилей.

Примеры создания простых элементов

Создание бинарного элемента

Создание бинарного элемента, который в зависимости от состояния связанного сигнала показывает надпись ON или OFF:

../_images/on_off_state.png

Исходный код

<svg width="29" height="35" viewBox="0 0 29 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="OFF" d="M1.48757 11.9766C1.48757 9.63281 1.90944 8.02344 2.75319 7.14844C3.41725 6.46094 4.3821 6.11719 5.64772 6.11719C7.49147 6.11719 8.67116 6.875 9.18678 8.39062C9.49147 9.28906 9.64382 10.4844 9.64382 11.9766V21.0703C9.64382 23.2188 9.34303 24.7852 8.74147 25.7695C8.13991 26.7461 7.08522 27.2344 5.57741 27.2344C4.07741 27.2344 3.01882 26.7422 2.40163 25.7578C1.79225 24.7734 1.48757 23.2109 1.48757 21.0703V11.9766ZM7.21803 11.8359C7.21803 10.5156 7.11257 9.58203 6.90163 9.03516C6.69069 8.48047 6.26491 8.20312 5.62428 8.20312C4.98366 8.20312 4.53835 8.48438 4.28835 9.04688C4.03835 9.60938 3.91335 10.5352 3.91335 11.8242V21.0938C3.91335 22.6641 4.02272 23.7344 4.24147 24.3047C4.46022 24.8672 4.90163 25.1484 5.56569 25.1484C6.22975 25.1484 6.67116 24.8633 6.88991 24.293C7.10866 23.7148 7.21803 22.6484 7.21803 21.0938V11.8359ZM12.7727 6.375H18.9837V8.40234H15.1868V14.918H18.7493V16.9688H15.1868V27H12.7727V6.375ZM21.5149 6.375H27.7258V8.40234H23.929V14.918H27.4915V16.9688H23.929V27H21.5149V6.375Z" fill="green"/>
<path id="ON" d="M4.28835 11.9766C4.28835 9.63281 4.71022 8.02344 5.55397 7.14844C6.21803 6.46094 7.18288 6.11719 8.4485 6.11719C10.2923 6.11719 11.4719 6.875 11.9876 8.39062C12.2923 9.28906 12.4446 10.4844 12.4446 11.9766V21.0703C12.4446 23.2188 12.1438 24.7852 11.5423 25.7695C10.9407 26.7461 9.886 27.2344 8.37819 27.2344C6.87819 27.2344 5.8196 26.7422 5.20241 25.7578C4.59303 24.7734 4.28835 23.2109 4.28835 21.0703V11.9766ZM10.0188 11.8359C10.0188 10.5156 9.91335 9.58203 9.70241 9.03516C9.49147 8.48047 9.06569 8.20312 8.42507 8.20312C7.78444 8.20312 7.33913 8.48438 7.08913 9.04688C6.83913 9.60938 6.71413 10.5352 6.71413 11.8242V21.0938C6.71413 22.6641 6.8235 23.7344 7.04225 24.3047C7.261 24.8672 7.70241 25.1484 8.36647 25.1484C9.03053 25.1484 9.47194 24.8633 9.69069 24.293C9.90944 23.7148 10.0188 22.6484 10.0188 21.0938V11.8359ZM21.9485 6.375H24.093V27H22.3118L17.6829 12.8438L17.8235 18.0469V27H15.5852V6.375H17.4133L22.1946 20.4141L21.9485 14.4492V6.375Z" fill="green"/>
</svg>

Адаптированый код

<svg width="29" height="35" viewBox="0 0 29 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="fault inactive" reference="DATA">
<g  class="animation-hide">
<!—Надпись OFF -->
<path id="OFF" d="M1.48757 11.9766C1.48757 9.63281 1.90944 8.02344 2.75319 7.14844C3.41725 6.46094 4.3821 6.11719 5.64772 6.11719C7.49147 6.11719 8.67116 6.875 9.18678 8.39062C9.49147 9.28906 9.64382 10.4844 9.64382 11.9766V21.0703C9.64382 23.2188 9.34303 24.7852 8.74147 25.7695C8.13991 26.7461 7.08522 27.2344 5.57741 27.2344C4.07741 27.2344 3.01882 26.7422 2.40163 25.7578C1.79225 24.7734 1.48757 23.2109 1.48757 21.0703V11.9766ZM7.21803 11.8359C7.21803 10.5156 7.11257 9.58203 6.90163 9.03516C6.69069 8.48047 6.26491 8.20312 5.62428 8.20312C4.98366 8.20312 4.53835 8.48438 4.28835 9.04688C4.03835 9.60938 3.91335 10.5352 3.91335 11.8242V21.0938C3.91335 22.6641 4.02272 23.7344 4.24147 24.3047C4.46022 24.8672 4.90163 25.1484 5.56569 25.1484C6.22975 25.1484 6.67116 24.8633 6.88991 24.293C7.10866 23.7148 7.21803 22.6484 7.21803 21.0938V11.8359ZM12.7727 6.375H18.9837V8.40234H15.1868V14.918H18.7493V16.9688H15.1868V27H12.7727V6.375ZM21.5149 6.375H27.7258V8.40234H23.929V14.918H27.4915V16.9688H23.929V27H21.5149V6.375Z"/>
</g>
<g  class="animation-display">
<!—Надпись ON -->
<path id="ON" d="M4.28835 11.9766C4.28835 9.63281 4.71022 8.02344 5.55397 7.14844C6.21803 6.46094 7.18288 6.11719 8.4485 6.11719C10.2923 6.11719 11.4719 6.875 11.9876 8.39062C12.2923 9.28906 12.4446 10.4844 12.4446 11.9766V21.0703C12.4446 23.2188 12.1438 24.7852 11.5423 25.7695C10.9407 26.7461 9.886 27.2344 8.37819 27.2344C6.87819 27.2344 5.8196 26.7422 5.20241 25.7578C4.59303 24.7734 4.28835 23.2109 4.28835 21.0703V11.9766ZM10.0188 11.8359C10.0188 10.5156 9.91335 9.58203 9.70241 9.03516C9.49147 8.48047 9.06569 8.20312 8.42507 8.20312C7.78444 8.20312 7.33913 8.48438 7.08913 9.04688C6.83913 9.60938 6.71413 10.5352 6.71413 11.8242V21.0938C6.71413 22.6641 6.8235 23.7344 7.04225 24.3047C7.261 24.8672 7.70241 25.1484 8.36647 25.1484C9.03053 25.1484 9.47194 24.8633 9.69069 24.293C9.90944 23.7148 10.0188 22.6484 10.0188 21.0938V11.8359ZM21.9485 6.375H24.093V27H22.3118L17.6829 12.8438L17.8235 18.0469V27H15.5852V6.375H17.4133L22.1946 20.4141L21.9485 14.4492V6.375Z"/>
</g>
</g>
</svg>

Блок CSS кода

/* Стили флагов состояний */

   /* зеленый цвет */
   .normal {
   fill: #4CD964;
   color:#4CD964;
   }
   /* серый цвет */
   .fault {
   fill: #E2E7E9;
   color: #E2E7E9;
   }
   /* красный цвет */
   .in-alarm {
   fill: #FF0000;
   color: #FF0000;
   }
   /* желтый цвет */
   .overridden,
   .out-of-service {
   fill: #FFCC00;
   color: #FFCC00;
   }
/* Скрыть-Показать элемент */
   /* Скрыть */
   .active .animation-hide,
   .inactive .animation-display,
   {
   display: none;
   }

   /* Отобразить */
   .inactive .animation-hide,
   .active .animation-display,
   {
   display: block;
   }

  • Описание изменений, сделанных в исходном коде svg-файла:

    1. Из исходного кода удаляем свойство fill="green", делая элемент бесцветным. Цвет будет подставляться в зависимости от флага состояния (status-flag) связанного сигнала.

    2. Заключаем оба состояния (OFF и ON) в группу с помощью тэга <g> и задаем этой группе class="fault inactive" – это класс для элемента по-умолчанию. "fault" = флаг состояния и inactive = значение связанного сигнала (система изменит эти два класса в зависимости от реального состояния связанного сигнала).

    3. С помощью тэга <g> задаем классы (class) каждой из двух групп (<g>): class для OFF “animation-hide” – в случае если значение, связанного сигнала = "true", эта часть svg-файла будет скрыта (невидима), а если значение, связанного сигнала= inactive, эта часть svg-файла будет отображена (видна); class для ON “animation-display” – в случае если значение, связанного сигнала = "false", эта часть svg-файла будет скрыта(невидима), а если presentValue связанного сигнала= active, эта часть svg-файла будет отображена(видна);

    4. reference="DATA" – это ссылка для связывания с сигналом. Сервер распознает тэг reference и изменяет значения в class="fault inactive" на соответствующие связанному сигналу состояния (fault будет заменен на реальный status-flag, inactive на реальное значение).

Создание текстового элемента

Создание текстового элемента, который отображает текущее аналоговое (числовое) значение связанного элемента:

../_images/analog_bar.png

Исходный код

<svg width="80" height="40" viewBox="0 0 80 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<text x="50%" y="12" text-anchor="middle" fill="green">...</text>
</svg>

Адаптированый код

 <svg width="80" height="40" viewBox="0 0 80 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
      #SENSOR
      {
        font-family: "Antonio-Regular";
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    text-align: center;
      }
  </style>
 <g id="SEN" class="fault" format="%.1f" reference="DATA">
 <text x="50%" y="12" text-anchor="middle">...</text>
 </g>
 </svg>

Блок CSS кода

/* Стили флагов состояний */

   /* зеленый цвет */
   .normal {
   fill: #4CD964;
   color:#4CD964;
   }
   /* серый цвет */
   .fault {
   fill: #E2E7E9;
   color: #E2E7E9;
   }
   /* красный цвет */
   .in-alarm {
   fill: #FF0000;
   color: #FF0000;
   }
   /* желтый цвет */
   .overridden,
   .out-of-service {
   fill: #FFCC00;
   color: #FFCC00;
   }

  • Описание изменений, сделанных в исходном коде svg-файла:

  1. Из исходного кода удаляем свойство fill="green", делая текст бесцветным. Цвет будет подставляться в зависимости от флага состояния(status-flag) связанного сигнала.

  2. Заключаем <text> в группу с помощью тэга <g> и задаем этой группе id="SENSOR", class="fault", format="%.1f", reference="DATA":

    • id="SENSOR" – требуется для задания стиля текста, который будет отображать значение;

    • class="fault" - класс для элемента по-умолчанию (система изменит этот класс в зависимости от реального состояния, связанного сигнала);

    • format="%.1f" - задается формат числа для отображения (в данном случае это чмсло с одним знаком после запятой);

    • reference="DATA" – это ссылка для связывания с сигналом. Система распознает тэг reference и изменяет содержание тэга <text> на значение связанного сигнала.

  3. Спомощью тэга <style> зададим стиль для отображаемого текста.

Создание элемента с мультисостояниями

Создание элемента с мультисостояниями, который в зависимости от значения связанного сигнала, отображает соответствуещее значению состояние:

../_images/multistate.png

Исходный код

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 47C37.1503 47 47 37.1503 47 25C47 12.8497 37.1503 3 25 3C12.8497 3 3 12.8497 3 25C3 37.1503 12.8497 47 25 47Z" fill="#2F3234"/>
<path d="M37.1531 29.4909C38.6929 28.723 40.2326 27.9232 41.7024 27.1554C41.9123 27.0594 42.1573 27.1234 42.2973 27.3154L42.8922 28.3071C43.0322 28.4671 42.9622 28.723 42.7522 28.819L39.3228 30.6426L42.2973 32.2102C42.5072 32.3062 42.5772 32.5622 42.4373 32.7541L41.8074 33.7779C41.7024 33.9378 41.4224 34.0018 41.2125 33.9059L38.2379 32.3382V36.0174C38.2379 36.2413 38.028 36.4013 37.818 36.4013H36.5582C36.3132 36.4013 36.1383 36.2413 36.1383 36.0174C36.1383 34.4497 36.1033 32.8181 36.1033 31.1865L32.3939 29.2669C32.3939 36.7852 33.7237 36.0814 26.6198 32.3382V36.2413C28.1246 37.0411 29.6293 37.9049 31.0641 38.6728C31.2741 38.7687 31.3441 38.9927 31.2391 39.1846L30.6092 40.1764C30.5042 40.3684 30.2242 40.4324 30.0143 40.3364L26.6198 38.5128V41.6161C26.6198 41.84 26.4099 42 26.1999 42H24.9051C24.6601 42 24.4852 41.84 24.4852 41.6161V38.4808L20.9507 40.3364C20.7408 40.4324 20.4958 40.3684 20.3558 40.2084L19.7609 39.2166C19.621 39.0247 19.6909 38.7687 19.9009 38.6728C21.3707 37.9049 22.9454 37.0091 24.4852 36.2093V32.3062C17.2763 36.1133 18.5711 36.8812 18.5711 29.2989L14.8967 31.2505C14.8967 32.8181 14.8617 34.4497 14.8617 35.9854C14.8617 36.2093 14.6868 36.4013 14.4418 36.4013H13.217C12.972 36.4013 12.7621 36.2093 12.7621 35.9854C12.7621 34.8016 12.7621 33.5859 12.7621 32.3702L9.85754 33.9059C9.64757 34.0018 9.40261 33.9378 9.26263 33.7779L8.63273 32.7541C8.52775 32.5622 8.59774 32.3062 8.77271 32.2102L11.7122 30.6746L8.2128 28.819C8.00284 28.723 7.93285 28.4671 8.07282 28.2751L8.70272 27.3154C8.80771 27.1234 9.05267 27.0594 9.26263 27.1554C10.7674 27.9552 12.3421 28.723 13.8819 29.5229L17.5563 27.5713C10.3824 23.7962 10.3824 25.2038 17.5563 21.4287L13.8469 19.4452C12.3071 20.245 10.8024 21.0448 9.29763 21.8446C9.08766 21.9406 8.8427 21.8766 8.70272 21.6846L8.10782 20.6929C7.96784 20.5329 8.03783 20.277 8.2478 20.181C9.40261 19.5731 10.5574 18.9333 11.7122 18.3254L8.77271 16.7898C8.59774 16.6938 8.52775 16.4378 8.63273 16.2459L9.26263 15.2221C9.40261 15.0622 9.64757 14.9982 9.85754 15.0942L12.7621 16.6298V12.9826C12.7621 12.7587 12.972 12.5987 13.182 12.5987H14.4418C14.6868 12.5987 14.8617 12.7587 14.8617 12.9826C14.8617 14.5503 14.8967 16.1499 14.8967 17.7495L18.6061 19.7011C18.6061 12.1508 17.2763 12.8867 24.4852 16.6618V12.7587C22.9454 11.9589 21.4407 11.1271 19.9359 10.3272C19.7259 10.2313 19.6559 10.0073 19.7609 9.81536L20.3908 8.82358C20.4958 8.63163 20.7758 8.56764 20.9857 8.66362C22.1056 9.27148 23.2954 9.87934 24.4852 10.5192V7.38391C24.4852 7.15996 24.6601 7 24.9051 7H26.1999C26.4099 7 26.6198 7.15996 26.6198 7.38391V10.4552C27.7746 9.84735 28.8945 9.27148 30.0493 8.66362C30.2592 8.56764 30.5042 8.63163 30.6442 8.79159L31.2391 9.78336C31.379 9.97532 31.3091 10.2313 31.0991 10.3272C29.6293 11.0951 28.1246 11.9269 26.6198 12.7267V16.5978C33.7937 12.8227 32.4289 12.1508 32.4289 19.7331L36.0683 17.8135C36.0683 16.1819 36.1383 14.5503 36.1383 13.0146C36.1383 12.7907 36.3132 12.5987 36.5582 12.5987H37.783C38.028 12.5987 38.2379 12.7907 38.2379 13.0146C38.2379 14.2303 38.2379 15.4461 38.2379 16.6618L41.2125 15.0942C41.4224 14.9982 41.7024 15.0622 41.8074 15.2221L42.4373 16.2459C42.5772 16.4378 42.5072 16.6938 42.2973 16.7898L39.3228 18.3574C40.4776 18.9653 41.6324 19.5731 42.7872 20.181C42.9972 20.277 43.0672 20.5329 42.9272 20.7249L42.2973 21.6846C42.1923 21.8766 41.9473 21.9406 41.7374 21.8446C40.2326 21.0448 38.7279 20.277 37.1881 19.4771L33.5137 21.4287C40.6176 25.1718 40.6176 23.7642 33.4437 27.5393L37.1531 29.4909ZM19.6909 26.4516L23.4003 24.5L19.6909 22.5484L15.9815 24.5L19.6909 26.4516ZM26.6198 22.8044L30.2942 20.8528V16.9177L26.6198 18.8693V22.8044ZM31.379 22.5484L27.6697 24.5L31.3091 26.4196L35.0185 24.468L31.379 22.5484ZM24.4852 26.1956L20.7058 28.1792V32.0503L24.4852 30.0667V26.1956ZM20.7408 20.8208L24.4852 22.8044V18.9333L20.7408 16.9497V20.8208ZM30.2592 28.1152L26.6198 26.1956V30.0667L30.2592 32.0183V28.1152Z" fill="#4CD964"/>
<path d="M12.6865 17.5312H14.875L17.4326 33H15.7188L15.2793 30.0469H12.4756L12.0713 33H10.3398L12.6865 17.5312ZM12.6777 28.5703H15.0508L13.8291 20.3965H13.8027L12.6777 28.5703ZM23.3389 17.5312H25.1494V29.0273C25.1494 30.4746 24.9209 31.5293 24.4639 32.1914C24.0127 32.8535 23.2275 33.1846 22.1084 33.1846C20.9893 33.1846 20.1982 32.8535 19.7354 32.1914C19.2725 31.5293 19.041 30.4746 19.041 29.0273V17.5312H20.8604V28.9834C20.8604 30.0146 20.9014 30.6328 20.9834 30.8379C21.0713 31.0371 21.1621 31.1953 21.2559 31.3125C21.4199 31.5352 21.7041 31.6465 22.1084 31.6465C22.5127 31.6465 22.8115 31.5234 23.0049 31.2773C23.1982 31.0312 23.3008 30.665 23.3125 30.1787C23.3301 29.6924 23.3389 29.2969 23.3389 28.9922V17.5312ZM26.582 17.5312H31.6885V19.043H30.0977V33H28.2871V19.043H26.582V17.5312ZM33.0332 21.7324C33.0332 19.9746 33.3496 18.7676 33.9824 18.1113C34.4805 17.5957 35.2041 17.3379 36.1533 17.3379C37.5361 17.3379 38.4209 17.9062 38.8076 19.043C39.0361 19.7168 39.1504 20.6133 39.1504 21.7324V28.5527C39.1504 30.1641 38.9248 31.3389 38.4736 32.0771C38.0225 32.8096 37.2314 33.1758 36.1006 33.1758C34.9756 33.1758 34.1816 32.8066 33.7188 32.0684C33.2617 31.3301 33.0332 30.1582 33.0332 28.5527V21.7324ZM37.3311 21.627C37.3311 20.6367 37.252 19.9365 37.0938 19.5264C36.9355 19.1104 36.6162 18.9023 36.1357 18.9023C35.6553 18.9023 35.3213 19.1133 35.1338 19.5352C34.9463 19.957 34.8525 20.6514 34.8525 21.6182V28.5703C34.8525 29.748 34.9346 30.5508 35.0986 30.9785C35.2627 31.4004 35.5938 31.6113 36.0918 31.6113C36.5898 31.6113 36.9209 31.3975 37.085 30.9697C37.249 30.5361 37.3311 29.7363 37.3311 28.5703V21.627Z" fill="#4CD964"/>
<path d="M24.601 32.8739C28.5959 32.8739 31.8485 29.618 31.8485 25.6191C31.8485 21.6201 28.5959 18.3643 24.601 18.3643C20.606 18.3643 17.3535 21.6201 17.3535 25.6191C17.3535 29.618 20.606 32.8739 24.601 32.8739Z" fill="#4CD964"/><path d="M33.0556 26.4024L38.9596 25.5177L33.2323 24.6684L42 20.9525L32.3131 22.0142L37.0151 18.2983L31.6414 20.4216L37.3687 12.8129L29.5202 18.5814L31.7475 12.9899L28.1414 17.5197L29.3081 8.07078L25.3838 16.9889L24.5 11.0789L23.6515 16.8119L19.9394 8L21 17.6967L17.2879 12.9899L19.4091 18.3691L11.8081 12.636L17.5707 20.4924L11.9848 18.2629L16.5101 21.8726L7.07071 20.7048L15.9798 24.633L10.0758 25.5177L15.803 26.367L7 30.0829L16.6869 29.0212L11.9848 32.7371L17.3586 30.6138L11.6313 38.2224L19.4798 32.454L17.2525 38.0455L20.8586 33.5157L19.7273 42.9646L23.6515 34.0465L24.5354 39.9565L25.3838 34.2235L29.096 43L28.0354 33.3033L31.7475 38.0101L29.6263 32.6309L37.2273 38.364L31.4646 30.5076L37.0505 32.7371L32.5253 29.1274L41.9646 30.2952L33.0556 26.4024ZM24.5 33.728C19.9747 33.728 16.298 30.0475 16.298 25.5177C16.298 20.9879 19.9747 17.3074 24.5 17.3074C29.0253 17.3074 32.702 20.9879 32.702 25.5177C32.702 30.0475 29.0253 33.728 24.5 33.728Z" fill="#4CD964"/>
</svg>

Адаптированый код

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="fault multi-state-0 " reference="MODE">
<path d="M25 47C37.1503 47 47 37.1503 47 25C47 12.8497 37.1503 3 25 3C12.8497 3 3 12.8497 3 25C3 37.1503 12.8497 47 25 47Z" fill="#2F3234"/>
<!--cool-->
<g class="array-0">
<path d="M37.1531 29.4909C38.6929 28.723 40.2326 27.9232 41.7024 27.1554C41.9123 27.0594 42.1573 27.1234 42.2973 27.3154L42.8922 28.3071C43.0322 28.4671 42.9622 28.723 42.7522 28.819L39.3228 30.6426L42.2973 32.2102C42.5072 32.3062 42.5772 32.5622 42.4373 32.7541L41.8074 33.7779C41.7024 33.9378 41.4224 34.0018 41.2125 33.9059L38.2379 32.3382V36.0174C38.2379 36.2413 38.028 36.4013 37.818 36.4013H36.5582C36.3132 36.4013 36.1383 36.2413 36.1383 36.0174C36.1383 34.4497 36.1033 32.8181 36.1033 31.1865L32.3939 29.2669C32.3939 36.7852 33.7237 36.0814 26.6198 32.3382V36.2413C28.1246 37.0411 29.6293 37.9049 31.0641 38.6728C31.2741 38.7687 31.3441 38.9927 31.2391 39.1846L30.6092 40.1764C30.5042 40.3684 30.2242 40.4324 30.0143 40.3364L26.6198 38.5128V41.6161C26.6198 41.84 26.4099 42 26.1999 42H24.9051C24.6601 42 24.4852 41.84 24.4852 41.6161V38.4808L20.9507 40.3364C20.7408 40.4324 20.4958 40.3684 20.3558 40.2084L19.7609 39.2166C19.621 39.0247 19.6909 38.7687 19.9009 38.6728C21.3707 37.9049 22.9454 37.0091 24.4852 36.2093V32.3062C17.2763 36.1133 18.5711 36.8812 18.5711 29.2989L14.8967 31.2505C14.8967 32.8181 14.8617 34.4497 14.8617 35.9854C14.8617 36.2093 14.6868 36.4013 14.4418 36.4013H13.217C12.972 36.4013 12.7621 36.2093 12.7621 35.9854C12.7621 34.8016 12.7621 33.5859 12.7621 32.3702L9.85754 33.9059C9.64757 34.0018 9.40261 33.9378 9.26263 33.7779L8.63273 32.7541C8.52775 32.5622 8.59774 32.3062 8.77271 32.2102L11.7122 30.6746L8.2128 28.819C8.00284 28.723 7.93285 28.4671 8.07282 28.2751L8.70272 27.3154C8.80771 27.1234 9.05267 27.0594 9.26263 27.1554C10.7674 27.9552 12.3421 28.723 13.8819 29.5229L17.5563 27.5713C10.3824 23.7962 10.3824 25.2038 17.5563 21.4287L13.8469 19.4452C12.3071 20.245 10.8024 21.0448 9.29763 21.8446C9.08766 21.9406 8.8427 21.8766 8.70272 21.6846L8.10782 20.6929C7.96784 20.5329 8.03783 20.277 8.2478 20.181C9.40261 19.5731 10.5574 18.9333 11.7122 18.3254L8.77271 16.7898C8.59774 16.6938 8.52775 16.4378 8.63273 16.2459L9.26263 15.2221C9.40261 15.0622 9.64757 14.9982 9.85754 15.0942L12.7621 16.6298V12.9826C12.7621 12.7587 12.972 12.5987 13.182 12.5987H14.4418C14.6868 12.5987 14.8617 12.7587 14.8617 12.9826C14.8617 14.5503 14.8967 16.1499 14.8967 17.7495L18.6061 19.7011C18.6061 12.1508 17.2763 12.8867 24.4852 16.6618V12.7587C22.9454 11.9589 21.4407 11.1271 19.9359 10.3272C19.7259 10.2313 19.6559 10.0073 19.7609 9.81536L20.3908 8.82358C20.4958 8.63163 20.7758 8.56764 20.9857 8.66362C22.1056 9.27148 23.2954 9.87934 24.4852 10.5192V7.38391C24.4852 7.15996 24.6601 7 24.9051 7H26.1999C26.4099 7 26.6198 7.15996 26.6198 7.38391V10.4552C27.7746 9.84735 28.8945 9.27148 30.0493 8.66362C30.2592 8.56764 30.5042 8.63163 30.6442 8.79159L31.2391 9.78336C31.379 9.97532 31.3091 10.2313 31.0991 10.3272C29.6293 11.0951 28.1246 11.9269 26.6198 12.7267V16.5978C33.7937 12.8227 32.4289 12.1508 32.4289 19.7331L36.0683 17.8135C36.0683 16.1819 36.1383 14.5503 36.1383 13.0146C36.1383 12.7907 36.3132 12.5987 36.5582 12.5987H37.783C38.028 12.5987 38.2379 12.7907 38.2379 13.0146C38.2379 14.2303 38.2379 15.4461 38.2379 16.6618L41.2125 15.0942C41.4224 14.9982 41.7024 15.0622 41.8074 15.2221L42.4373 16.2459C42.5772 16.4378 42.5072 16.6938 42.2973 16.7898L39.3228 18.3574C40.4776 18.9653 41.6324 19.5731 42.7872 20.181C42.9972 20.277 43.0672 20.5329 42.9272 20.7249L42.2973 21.6846C42.1923 21.8766 41.9473 21.9406 41.7374 21.8446C40.2326 21.0448 38.7279 20.277 37.1881 19.4771L33.5137 21.4287C40.6176 25.1718 40.6176 23.7642 33.4437 27.5393L37.1531 29.4909ZM19.6909 26.4516L23.4003 24.5L19.6909 22.5484L15.9815 24.5L19.6909 26.4516ZM26.6198 22.8044L30.2942 20.8528V16.9177L26.6198 18.8693V22.8044ZM31.379 22.5484L27.6697 24.5L31.3091 26.4196L35.0185 24.468L31.379 22.5484ZM24.4852 26.1956L20.7058 28.1792V32.0503L24.4852 30.0667V26.1956ZM20.7408 20.8208L24.4852 22.8044V18.9333L20.7408 16.9497V20.8208ZM30.2592 28.1152L26.6198 26.1956V30.0667L30.2592 32.0183V28.1152Z" fill="#4CD964"/>
</g>
<!--auto-->
<g class="array-2">
<path d="M12.6865 17.5312H14.875L17.4326 33H15.7188L15.2793 30.0469H12.4756L12.0713 33H10.3398L12.6865 17.5312ZM12.6777 28.5703H15.0508L13.8291 20.3965H13.8027L12.6777 28.5703ZM23.3389 17.5312H25.1494V29.0273C25.1494 30.4746 24.9209 31.5293 24.4639 32.1914C24.0127 32.8535 23.2275 33.1846 22.1084 33.1846C20.9893 33.1846 20.1982 32.8535 19.7354 32.1914C19.2725 31.5293 19.041 30.4746 19.041 29.0273V17.5312H20.8604V28.9834C20.8604 30.0146 20.9014 30.6328 20.9834 30.8379C21.0713 31.0371 21.1621 31.1953 21.2559 31.3125C21.4199 31.5352 21.7041 31.6465 22.1084 31.6465C22.5127 31.6465 22.8115 31.5234 23.0049 31.2773C23.1982 31.0312 23.3008 30.665 23.3125 30.1787C23.3301 29.6924 23.3389 29.2969 23.3389 28.9922V17.5312ZM26.582 17.5312H31.6885V19.043H30.0977V33H28.2871V19.043H26.582V17.5312ZM33.0332 21.7324C33.0332 19.9746 33.3496 18.7676 33.9824 18.1113C34.4805 17.5957 35.2041 17.3379 36.1533 17.3379C37.5361 17.3379 38.4209 17.9062 38.8076 19.043C39.0361 19.7168 39.1504 20.6133 39.1504 21.7324V28.5527C39.1504 30.1641 38.9248 31.3389 38.4736 32.0771C38.0225 32.8096 37.2314 33.1758 36.1006 33.1758C34.9756 33.1758 34.1816 32.8066 33.7188 32.0684C33.2617 31.3301 33.0332 30.1582 33.0332 28.5527V21.7324ZM37.3311 21.627C37.3311 20.6367 37.252 19.9365 37.0938 19.5264C36.9355 19.1104 36.6162 18.9023 36.1357 18.9023C35.6553 18.9023 35.3213 19.1133 35.1338 19.5352C34.9463 19.957 34.8525 20.6514 34.8525 21.6182V28.5703C34.8525 29.748 34.9346 30.5508 35.0986 30.9785C35.2627 31.4004 35.5938 31.6113 36.0918 31.6113C36.5898 31.6113 36.9209 31.3975 37.085 30.9697C37.249 30.5361 37.3311 29.7363 37.3311 28.5703V21.627Z" fill="#4CD964"/>
</g>
<!--heat-->
<g class="array-1">
<path d="M24.601 32.8739C28.5959 32.8739 31.8485 29.618 31.8485 25.6191C31.8485 21.6201 28.5959 18.3643 24.601 18.3643C20.606 18.3643 17.3535 21.6201 17.3535 25.6191C17.3535 29.618 20.606 32.8739 24.601 32.8739Z" fill="#4CD964"/>
<path d="M33.0556 26.4024L38.9596 25.5177L33.2323 24.6684L42 20.9525L32.3131 22.0142L37.0151 18.2983L31.6414 20.4216L37.3687 12.8129L29.5202 18.5814L31.7475 12.9899L28.1414 17.5197L29.3081 8.07078L25.3838 16.9889L24.5 11.0789L23.6515 16.8119L19.9394 8L21 17.6967L17.2879 12.9899L19.4091 18.3691L11.8081 12.636L17.5707 20.4924L11.9848 18.2629L16.5101 21.8726L7.07071 20.7048L15.9798 24.633L10.0758 25.5177L15.803 26.367L7 30.0829L16.6869 29.0212L11.9848 32.7371L17.3586 30.6138L11.6313 38.2224L19.4798 32.454L17.2525 38.0455L20.8586 33.5157L19.7273 42.9646L23.6515 34.0465L24.5354 39.9565L25.3838 34.2235L29.096 43L28.0354 33.3033L31.7475 38.0101L29.6263 32.6309L37.2273 38.364L31.4646 30.5076L37.0505 32.7371L32.5253 29.1274L41.9646 30.2952L33.0556 26.4024ZM24.5 33.728C19.9747 33.728 16.298 30.0475 16.298 25.5177C16.298 20.9879 19.9747 17.3074 24.5 17.3074C29.0253 17.3074 32.702 20.9879 32.702 25.5177C32.702 30.0475 29.0253 33.728 24.5 33.728Z" fill="#4CD964"/>
</g>
</g>
</svg>

Блок CSS кода

/* Стили флагов состояний */

   /* зеленый цвет */
   .normal {
   fill: #4CD964;
   color:#4CD964;
   }
   /* серый цвет */
   .fault {
   fill: #E2E7E9;
   color: #E2E7E9;
   }
   /* красный цвет */
   .in-alarm {
   fill: #FF0000;
   color: #FF0000;
   }
   /* желтый цвет */
   .overridden,
   .out-of-service {
   fill: #FFCC00;
   color: #FFCC00;
   }
/* Скрыть-Отобразить элемент
   /* Скрыть элемент */
   .array-1,
   .array-2,
   .array-3,
   .array-4,
   .array-5,
   .array-6,
   .array-7,
   .array-8,
   .array-9 {
   display: none;
   }

   /* Отобразить элемент */
   .multi-state-1 .array-1,
   .multi-state-2 .array-2,
   .multi-state-3 .array-3,
   .multi-state-4 .array-4,
   .multi-state-5 .array-5,
   .multi-state-6 .array-6,
   .multi-state-7 .array-7,
   .multi-state-8 .array-8,
   .multi-state-9 .array-9 {
   display: block;
   }

  • Описание изменений, сделанных в исходном коде svg-файла:

  1. Из исходного кода удаляем свойство fill=”green”, делая изображения бесцветными. Цвет будет подставляться в зависимости от флага состояния (status-flag) связанного сигнала.

  2. Заключаем весь элемент в группу с помощью тэга <g> и задаем этой группе <g class="fault multi-state-0" reference="MODE"> – это класс для элемента по-умолчанию. fault – флаг состояния, связанного сигнала (система изменит этот класс в зависимости от реального состояния, связанного сигнала), multi-state-0 – значение мультистейт по-умолчанию (0) ( система изменит этот класс в зависимости от реального состояния, связанного сигнала).

  3. С помощью тэга <g> задаем классы (class) каждой из трех групп (<g>): class для «cool» “array-0” – в случае если значение, связанного сигнала= 0, эта часть svg-файла будет отображена (видима), при иных значениях станет скрыта (невидима); class для «heat» “array-1” – в случае если значение, связанного сигнала= 1, эта часть svg-файла будет отображена (видима), при иных значениях станет скрыта (невидима); class для «auto» “array-2” – в случае если значение, связанного сигнала= 2, эта часть svg-файла будет отображена (видима), при иных значениях станет скрыта (невидима);

  4. reference="DATA" – это ссылка для связывания с сигналом. Сервер распознает тэг reference и изменяет значения в class="fault multi-state-0" на соответствующие связанному сигналу состояния (fault будет заменен на реальный status-flag, multi-state-0 на реальный presentValue).

Пример № 4 – создание элемента управления, на основе «Пример № 3» с мультисостояниями, который в зависимости от значения сигнала управления, отправляет комманду на запись значения:

../_images/multistate.png

Адаптированый код Примера № 3

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="fault multi-state-0 " reference="MODE">
<path d="M25 47C37.1503 47 47 37.1503 47 25C47 12.8497 37.1503 3 25 3C12.8497 3 3 12.8497 3 25C3 37.1503 12.8497 47 25 47Z" fill="#2F3234"/>
<!--cool-->
<g class="array-0">
<path d="M37.1531 29.4909C38.6929 28.723 40.2326 27.9232 41.7024 27.1554C41.9123 27.0594 42.1573 27.1234 42.2973 27.3154L42.8922 28.3071C43.0322 28.4671 42.9622 28.723 42.7522 28.819L39.3228 30.6426L42.2973 32.2102C42.5072 32.3062 42.5772 32.5622 42.4373 32.7541L41.8074 33.7779C41.7024 33.9378 41.4224 34.0018 41.2125 33.9059L38.2379 32.3382V36.0174C38.2379 36.2413 38.028 36.4013 37.818 36.4013H36.5582C36.3132 36.4013 36.1383 36.2413 36.1383 36.0174C36.1383 34.4497 36.1033 32.8181 36.1033 31.1865L32.3939 29.2669C32.3939 36.7852 33.7237 36.0814 26.6198 32.3382V36.2413C28.1246 37.0411 29.6293 37.9049 31.0641 38.6728C31.2741 38.7687 31.3441 38.9927 31.2391 39.1846L30.6092 40.1764C30.5042 40.3684 30.2242 40.4324 30.0143 40.3364L26.6198 38.5128V41.6161C26.6198 41.84 26.4099 42 26.1999 42H24.9051C24.6601 42 24.4852 41.84 24.4852 41.6161V38.4808L20.9507 40.3364C20.7408 40.4324 20.4958 40.3684 20.3558 40.2084L19.7609 39.2166C19.621 39.0247 19.6909 38.7687 19.9009 38.6728C21.3707 37.9049 22.9454 37.0091 24.4852 36.2093V32.3062C17.2763 36.1133 18.5711 36.8812 18.5711 29.2989L14.8967 31.2505C14.8967 32.8181 14.8617 34.4497 14.8617 35.9854C14.8617 36.2093 14.6868 36.4013 14.4418 36.4013H13.217C12.972 36.4013 12.7621 36.2093 12.7621 35.9854C12.7621 34.8016 12.7621 33.5859 12.7621 32.3702L9.85754 33.9059C9.64757 34.0018 9.40261 33.9378 9.26263 33.7779L8.63273 32.7541C8.52775 32.5622 8.59774 32.3062 8.77271 32.2102L11.7122 30.6746L8.2128 28.819C8.00284 28.723 7.93285 28.4671 8.07282 28.2751L8.70272 27.3154C8.80771 27.1234 9.05267 27.0594 9.26263 27.1554C10.7674 27.9552 12.3421 28.723 13.8819 29.5229L17.5563 27.5713C10.3824 23.7962 10.3824 25.2038 17.5563 21.4287L13.8469 19.4452C12.3071 20.245 10.8024 21.0448 9.29763 21.8446C9.08766 21.9406 8.8427 21.8766 8.70272 21.6846L8.10782 20.6929C7.96784 20.5329 8.03783 20.277 8.2478 20.181C9.40261 19.5731 10.5574 18.9333 11.7122 18.3254L8.77271 16.7898C8.59774 16.6938 8.52775 16.4378 8.63273 16.2459L9.26263 15.2221C9.40261 15.0622 9.64757 14.9982 9.85754 15.0942L12.7621 16.6298V12.9826C12.7621 12.7587 12.972 12.5987 13.182 12.5987H14.4418C14.6868 12.5987 14.8617 12.7587 14.8617 12.9826C14.8617 14.5503 14.8967 16.1499 14.8967 17.7495L18.6061 19.7011C18.6061 12.1508 17.2763 12.8867 24.4852 16.6618V12.7587C22.9454 11.9589 21.4407 11.1271 19.9359 10.3272C19.7259 10.2313 19.6559 10.0073 19.7609 9.81536L20.3908 8.82358C20.4958 8.63163 20.7758 8.56764 20.9857 8.66362C22.1056 9.27148 23.2954 9.87934 24.4852 10.5192V7.38391C24.4852 7.15996 24.6601 7 24.9051 7H26.1999C26.4099 7 26.6198 7.15996 26.6198 7.38391V10.4552C27.7746 9.84735 28.8945 9.27148 30.0493 8.66362C30.2592 8.56764 30.5042 8.63163 30.6442 8.79159L31.2391 9.78336C31.379 9.97532 31.3091 10.2313 31.0991 10.3272C29.6293 11.0951 28.1246 11.9269 26.6198 12.7267V16.5978C33.7937 12.8227 32.4289 12.1508 32.4289 19.7331L36.0683 17.8135C36.0683 16.1819 36.1383 14.5503 36.1383 13.0146C36.1383 12.7907 36.3132 12.5987 36.5582 12.5987H37.783C38.028 12.5987 38.2379 12.7907 38.2379 13.0146C38.2379 14.2303 38.2379 15.4461 38.2379 16.6618L41.2125 15.0942C41.4224 14.9982 41.7024 15.0622 41.8074 15.2221L42.4373 16.2459C42.5772 16.4378 42.5072 16.6938 42.2973 16.7898L39.3228 18.3574C40.4776 18.9653 41.6324 19.5731 42.7872 20.181C42.9972 20.277 43.0672 20.5329 42.9272 20.7249L42.2973 21.6846C42.1923 21.8766 41.9473 21.9406 41.7374 21.8446C40.2326 21.0448 38.7279 20.277 37.1881 19.4771L33.5137 21.4287C40.6176 25.1718 40.6176 23.7642 33.4437 27.5393L37.1531 29.4909ZM19.6909 26.4516L23.4003 24.5L19.6909 22.5484L15.9815 24.5L19.6909 26.4516ZM26.6198 22.8044L30.2942 20.8528V16.9177L26.6198 18.8693V22.8044ZM31.379 22.5484L27.6697 24.5L31.3091 26.4196L35.0185 24.468L31.379 22.5484ZM24.4852 26.1956L20.7058 28.1792V32.0503L24.4852 30.0667V26.1956ZM20.7408 20.8208L24.4852 22.8044V18.9333L20.7408 16.9497V20.8208ZM30.2592 28.1152L26.6198 26.1956V30.0667L30.2592 32.0183V28.1152Z" fill="#4CD964"/>
</g>
<!--auto-->
<g class="array-2">
<path d="M12.6865 17.5312H14.875L17.4326 33H15.7188L15.2793 30.0469H12.4756L12.0713 33H10.3398L12.6865 17.5312ZM12.6777 28.5703H15.0508L13.8291 20.3965H13.8027L12.6777 28.5703ZM23.3389 17.5312H25.1494V29.0273C25.1494 30.4746 24.9209 31.5293 24.4639 32.1914C24.0127 32.8535 23.2275 33.1846 22.1084 33.1846C20.9893 33.1846 20.1982 32.8535 19.7354 32.1914C19.2725 31.5293 19.041 30.4746 19.041 29.0273V17.5312H20.8604V28.9834C20.8604 30.0146 20.9014 30.6328 20.9834 30.8379C21.0713 31.0371 21.1621 31.1953 21.2559 31.3125C21.4199 31.5352 21.7041 31.6465 22.1084 31.6465C22.5127 31.6465 22.8115 31.5234 23.0049 31.2773C23.1982 31.0312 23.3008 30.665 23.3125 30.1787C23.3301 29.6924 23.3389 29.2969 23.3389 28.9922V17.5312ZM26.582 17.5312H31.6885V19.043H30.0977V33H28.2871V19.043H26.582V17.5312ZM33.0332 21.7324C33.0332 19.9746 33.3496 18.7676 33.9824 18.1113C34.4805 17.5957 35.2041 17.3379 36.1533 17.3379C37.5361 17.3379 38.4209 17.9062 38.8076 19.043C39.0361 19.7168 39.1504 20.6133 39.1504 21.7324V28.5527C39.1504 30.1641 38.9248 31.3389 38.4736 32.0771C38.0225 32.8096 37.2314 33.1758 36.1006 33.1758C34.9756 33.1758 34.1816 32.8066 33.7188 32.0684C33.2617 31.3301 33.0332 30.1582 33.0332 28.5527V21.7324ZM37.3311 21.627C37.3311 20.6367 37.252 19.9365 37.0938 19.5264C36.9355 19.1104 36.6162 18.9023 36.1357 18.9023C35.6553 18.9023 35.3213 19.1133 35.1338 19.5352C34.9463 19.957 34.8525 20.6514 34.8525 21.6182V28.5703C34.8525 29.748 34.9346 30.5508 35.0986 30.9785C35.2627 31.4004 35.5938 31.6113 36.0918 31.6113C36.5898 31.6113 36.9209 31.3975 37.085 30.9697C37.249 30.5361 37.3311 29.7363 37.3311 28.5703V21.627Z" fill="#4CD964"/>
</g>
<!--heat-->
<g class="array-1">
<path d="M24.601 32.8739C28.5959 32.8739 31.8485 29.618 31.8485 25.6191C31.8485 21.6201 28.5959 18.3643 24.601 18.3643C20.606 18.3643 17.3535 21.6201 17.3535 25.6191C17.3535 29.618 20.606 32.8739 24.601 32.8739Z" fill="#4CD964"/>
<path d="M33.0556 26.4024L38.9596 25.5177L33.2323 24.6684L42 20.9525L32.3131 22.0142L37.0151 18.2983L31.6414 20.4216L37.3687 12.8129L29.5202 18.5814L31.7475 12.9899L28.1414 17.5197L29.3081 8.07078L25.3838 16.9889L24.5 11.0789L23.6515 16.8119L19.9394 8L21 17.6967L17.2879 12.9899L19.4091 18.3691L11.8081 12.636L17.5707 20.4924L11.9848 18.2629L16.5101 21.8726L7.07071 20.7048L15.9798 24.633L10.0758 25.5177L15.803 26.367L7 30.0829L16.6869 29.0212L11.9848 32.7371L17.3586 30.6138L11.6313 38.2224L19.4798 32.454L17.2525 38.0455L20.8586 33.5157L19.7273 42.9646L23.6515 34.0465L24.5354 39.9565L25.3838 34.2235L29.096 43L28.0354 33.3033L31.7475 38.0101L29.6263 32.6309L37.2273 38.364L31.4646 30.5076L37.0505 32.7371L32.5253 29.1274L41.9646 30.2952L33.0556 26.4024ZM24.5 33.728C19.9747 33.728 16.298 30.0475 16.298 25.5177C16.298 20.9879 19.9747 17.3074 24.5 17.3074C29.0253 17.3074 32.702 20.9879 32.702 25.5177C32.702 30.0475 29.0253 33.728 24.5 33.728Z" fill="#4CD964"/>
</g>
</g>
</svg>

Преобразованый код

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="click fault" reference="MODE">
<path d="M25 47C37.1503 47 47 37.1503 47 25C47 12.8497 37.1503 3 25 3C12.8497 3 3 12.8497 3 25C3 37.1503 12.8497 47 25 47Z" fill="#2F3234"/>
<!--cool-->
<g class="array-0">
<path d="M37.1531 29.4909C38.6929 28.723 40.2326 27.9232 41.7024 27.1554C41.9123 27.0594 42.1573 27.1234 42.2973 27.3154L42.8922 28.3071C43.0322 28.4671 42.9622 28.723 42.7522 28.819L39.3228 30.6426L42.2973 32.2102C42.5072 32.3062 42.5772 32.5622 42.4373 32.7541L41.8074 33.7779C41.7024 33.9378 41.4224 34.0018 41.2125 33.9059L38.2379 32.3382V36.0174C38.2379 36.2413 38.028 36.4013 37.818 36.4013H36.5582C36.3132 36.4013 36.1383 36.2413 36.1383 36.0174C36.1383 34.4497 36.1033 32.8181 36.1033 31.1865L32.3939 29.2669C32.3939 36.7852 33.7237 36.0814 26.6198 32.3382V36.2413C28.1246 37.0411 29.6293 37.9049 31.0641 38.6728C31.2741 38.7687 31.3441 38.9927 31.2391 39.1846L30.6092 40.1764C30.5042 40.3684 30.2242 40.4324 30.0143 40.3364L26.6198 38.5128V41.6161C26.6198 41.84 26.4099 42 26.1999 42H24.9051C24.6601 42 24.4852 41.84 24.4852 41.6161V38.4808L20.9507 40.3364C20.7408 40.4324 20.4958 40.3684 20.3558 40.2084L19.7609 39.2166C19.621 39.0247 19.6909 38.7687 19.9009 38.6728C21.3707 37.9049 22.9454 37.0091 24.4852 36.2093V32.3062C17.2763 36.1133 18.5711 36.8812 18.5711 29.2989L14.8967 31.2505C14.8967 32.8181 14.8617 34.4497 14.8617 35.9854C14.8617 36.2093 14.6868 36.4013 14.4418 36.4013H13.217C12.972 36.4013 12.7621 36.2093 12.7621 35.9854C12.7621 34.8016 12.7621 33.5859 12.7621 32.3702L9.85754 33.9059C9.64757 34.0018 9.40261 33.9378 9.26263 33.7779L8.63273 32.7541C8.52775 32.5622 8.59774 32.3062 8.77271 32.2102L11.7122 30.6746L8.2128 28.819C8.00284 28.723 7.93285 28.4671 8.07282 28.2751L8.70272 27.3154C8.80771 27.1234 9.05267 27.0594 9.26263 27.1554C10.7674 27.9552 12.3421 28.723 13.8819 29.5229L17.5563 27.5713C10.3824 23.7962 10.3824 25.2038 17.5563 21.4287L13.8469 19.4452C12.3071 20.245 10.8024 21.0448 9.29763 21.8446C9.08766 21.9406 8.8427 21.8766 8.70272 21.6846L8.10782 20.6929C7.96784 20.5329 8.03783 20.277 8.2478 20.181C9.40261 19.5731 10.5574 18.9333 11.7122 18.3254L8.77271 16.7898C8.59774 16.6938 8.52775 16.4378 8.63273 16.2459L9.26263 15.2221C9.40261 15.0622 9.64757 14.9982 9.85754 15.0942L12.7621 16.6298V12.9826C12.7621 12.7587 12.972 12.5987 13.182 12.5987H14.4418C14.6868 12.5987 14.8617 12.7587 14.8617 12.9826C14.8617 14.5503 14.8967 16.1499 14.8967 17.7495L18.6061 19.7011C18.6061 12.1508 17.2763 12.8867 24.4852 16.6618V12.7587C22.9454 11.9589 21.4407 11.1271 19.9359 10.3272C19.7259 10.2313 19.6559 10.0073 19.7609 9.81536L20.3908 8.82358C20.4958 8.63163 20.7758 8.56764 20.9857 8.66362C22.1056 9.27148 23.2954 9.87934 24.4852 10.5192V7.38391C24.4852 7.15996 24.6601 7 24.9051 7H26.1999C26.4099 7 26.6198 7.15996 26.6198 7.38391V10.4552C27.7746 9.84735 28.8945 9.27148 30.0493 8.66362C30.2592 8.56764 30.5042 8.63163 30.6442 8.79159L31.2391 9.78336C31.379 9.97532 31.3091 10.2313 31.0991 10.3272C29.6293 11.0951 28.1246 11.9269 26.6198 12.7267V16.5978C33.7937 12.8227 32.4289 12.1508 32.4289 19.7331L36.0683 17.8135C36.0683 16.1819 36.1383 14.5503 36.1383 13.0146C36.1383 12.7907 36.3132 12.5987 36.5582 12.5987H37.783C38.028 12.5987 38.2379 12.7907 38.2379 13.0146C38.2379 14.2303 38.2379 15.4461 38.2379 16.6618L41.2125 15.0942C41.4224 14.9982 41.7024 15.0622 41.8074 15.2221L42.4373 16.2459C42.5772 16.4378 42.5072 16.6938 42.2973 16.7898L39.3228 18.3574C40.4776 18.9653 41.6324 19.5731 42.7872 20.181C42.9972 20.277 43.0672 20.5329 42.9272 20.7249L42.2973 21.6846C42.1923 21.8766 41.9473 21.9406 41.7374 21.8446C40.2326 21.0448 38.7279 20.277 37.1881 19.4771L33.5137 21.4287C40.6176 25.1718 40.6176 23.7642 33.4437 27.5393L37.1531 29.4909ZM19.6909 26.4516L23.4003 24.5L19.6909 22.5484L15.9815 24.5L19.6909 26.4516ZM26.6198 22.8044L30.2942 20.8528V16.9177L26.6198 18.8693V22.8044ZM31.379 22.5484L27.6697 24.5L31.3091 26.4196L35.0185 24.468L31.379 22.5484ZM24.4852 26.1956L20.7058 28.1792V32.0503L24.4852 30.0667V26.1956ZM20.7408 20.8208L24.4852 22.8044V18.9333L20.7408 16.9497V20.8208ZM30.2592 28.1152L26.6198 26.1956V30.0667L30.2592 32.0183V28.1152Z" fill="#4CD964"/>
</g>
<!--auto-->
<g class="array-2">
<path d="M12.6865 17.5312H14.875L17.4326 33H15.7188L15.2793 30.0469H12.4756L12.0713 33H10.3398L12.6865 17.5312ZM12.6777 28.5703H15.0508L13.8291 20.3965H13.8027L12.6777 28.5703ZM23.3389 17.5312H25.1494V29.0273C25.1494 30.4746 24.9209 31.5293 24.4639 32.1914C24.0127 32.8535 23.2275 33.1846 22.1084 33.1846C20.9893 33.1846 20.1982 32.8535 19.7354 32.1914C19.2725 31.5293 19.041 30.4746 19.041 29.0273V17.5312H20.8604V28.9834C20.8604 30.0146 20.9014 30.6328 20.9834 30.8379C21.0713 31.0371 21.1621 31.1953 21.2559 31.3125C21.4199 31.5352 21.7041 31.6465 22.1084 31.6465C22.5127 31.6465 22.8115 31.5234 23.0049 31.2773C23.1982 31.0312 23.3008 30.665 23.3125 30.1787C23.3301 29.6924 23.3389 29.2969 23.3389 28.9922V17.5312ZM26.582 17.5312H31.6885V19.043H30.0977V33H28.2871V19.043H26.582V17.5312ZM33.0332 21.7324C33.0332 19.9746 33.3496 18.7676 33.9824 18.1113C34.4805 17.5957 35.2041 17.3379 36.1533 17.3379C37.5361 17.3379 38.4209 17.9062 38.8076 19.043C39.0361 19.7168 39.1504 20.6133 39.1504 21.7324V28.5527C39.1504 30.1641 38.9248 31.3389 38.4736 32.0771C38.0225 32.8096 37.2314 33.1758 36.1006 33.1758C34.9756 33.1758 34.1816 32.8066 33.7188 32.0684C33.2617 31.3301 33.0332 30.1582 33.0332 28.5527V21.7324ZM37.3311 21.627C37.3311 20.6367 37.252 19.9365 37.0938 19.5264C36.9355 19.1104 36.6162 18.9023 36.1357 18.9023C35.6553 18.9023 35.3213 19.1133 35.1338 19.5352C34.9463 19.957 34.8525 20.6514 34.8525 21.6182V28.5703C34.8525 29.748 34.9346 30.5508 35.0986 30.9785C35.2627 31.4004 35.5938 31.6113 36.0918 31.6113C36.5898 31.6113 36.9209 31.3975 37.085 30.9697C37.249 30.5361 37.3311 29.7363 37.3311 28.5703V21.627Z" fill="#4CD964"/>
</g>
<!--heat-->
<g class="array-1">
<path d="M24.601 32.8739C28.5959 32.8739 31.8485 29.618 31.8485 25.6191C31.8485 21.6201 28.5959 18.3643 24.601 18.3643C20.606 18.3643 17.3535 21.6201 17.3535 25.6191C17.3535 29.618 20.606 32.8739 24.601 32.8739Z" fill="#4CD964"/>
<path d="M33.0556 26.4024L38.9596 25.5177L33.2323 24.6684L42 20.9525L32.3131 22.0142L37.0151 18.2983L31.6414 20.4216L37.3687 12.8129L29.5202 18.5814L31.7475 12.9899L28.1414 17.5197L29.3081 8.07078L25.3838 16.9889L24.5 11.0789L23.6515 16.8119L19.9394 8L21 17.6967L17.2879 12.9899L19.4091 18.3691L11.8081 12.636L17.5707 20.4924L11.9848 18.2629L16.5101 21.8726L7.07071 20.7048L15.9798 24.633L10.0758 25.5177L15.803 26.367L7 30.0829L16.6869 29.0212L11.9848 32.7371L17.3586 30.6138L11.6313 38.2224L19.4798 32.454L17.2525 38.0455L20.8586 33.5157L19.7273 42.9646L23.6515 34.0465L24.5354 39.9565L25.3838 34.2235L29.096 43L28.0354 33.3033L31.7475 38.0101L29.6263 32.6309L37.2273 38.364L31.4646 30.5076L37.0505 32.7371L32.5253 29.1274L41.9646 30.2952L33.0556 26.4024ZM24.5 33.728C19.9747 33.728 16.298 30.0475 16.298 25.5177C16.298 20.9879 19.9747 17.3074 24.5 17.3074C29.0253 17.3074 32.702 20.9879 32.702 25.5177C32.702 30.0475 29.0253 33.728 24.5 33.728Z" fill="#4CD964"/>
</g>
</g>
</svg>

Блок CSS кода

/* Стили флагов состояний */

   /* зеленый цвет */
   .normal {
   fill: #4CD964;
   color:#4CD964;
   }
   /* серый цвет */
   .fault {
   fill: #E2E7E9;
   color: #E2E7E9;
   }
   /* красный цвет */
   .in-alarm {
   fill: #FF0000;
   color: #FF0000;
   }
   /* желтый цвет */
   .overridden,
   .out-of-service {
   fill: #FFCC00;
   color: #FFCC00;
   }
/* Скрыть-Отобразить элемент
   /* Скрыть элемент */
   .array-1,
   .array-2,
   .array-3,
   .array-4,
   .array-5,
   .array-6,
   .array-7,
   .array-8,
   .array-9 {
   display: none;
   }

   /* Отобразить элемент */
   .multi-state-1 .array-1,
   .multi-state-2 .array-2,
   .multi-state-3 .array-3,
   .multi-state-4 .array-4,
   .multi-state-5 .array-5,
   .multi-state-6 .array-6,
   .multi-state-7 .array-7,
   .multi-state-8 .array-8,
   .multi-state-9 .array-9 {
   display: block;
   }
/* Стили состояния курсора для элементов управления */
   .click:hover {
   cursor: pointer;
   }

  • Описание изменений, сделанных в адаптированном коде svg-файла:

    • Вместо класса "multi-state-0" назначаем класс "click" и превращаем наш элемент в «кнопку» управления мультистейт сигналом.

    Примечание: таким же образом можно из «аналоговых (цифровых)» и «дискретных (бинарных)» элементов создавать элементы управления. Система сама выберет виджет управления, в зависимости от типа связанного сигнала.

Применяемые CSS классы:

/* Стили флагов состояний */

/* задает элементу зеленый цвет */
.normal {
fill: #4CD964;
color:#4CD964;
}
/* задает элементу серый цвет */
.fault {
fill: #E2E7E9;
color: #E2E7E9;
}
/* задает элементу красный цвет */
.in-alarm {
fill: #FF0000;
color: #FF0000;
}
/* задает элементу желтый цвет */
.overridden,
.out-of-service {
fill: #FFCC00;
color: #FFCC00;
}

/* Стили состояния курсора для элементов управления */
.click:hover {
cursor: pointer;
}

/* Маркеры карты */
#mapicon.sensor {
font-family: Antonio;
font-size: 24px;
text-align: center;
}
#mapicon.sensor.normal {
fill: #00FF00;
color:#00FF00;
}

/* Скрыть элемент */
.active .animation-hide,
.inactive .animation-display,
.array-1,
.array-2,
.array-3,
.array-4,
.array-5,
.array-6,
.array-7,
.array-8,
.array-9 {
display: none;
}

/* Отобразить элемент */
.inactive .animation-hide,
.active .animation-display,
.multi-state-1 .array-1,
.multi-state-2 .array-2,
.multi-state-3 .array-3,
.multi-state-4 .array-4,
.multi-state-5 .array-5,
.multi-state-6 .array-6,
.multi-state-7 .array-7,
.multi-state-8 .array-8,
.multi-state-9 .array-9 {
display: block;
}

/* Неактивные предупреждения для значения "false" */
.inactive .animation-fail {
display: none;
}

/* Мигания предупреждений для значения "true" */
.active .animation-fail {
display: block;
-webkit-animation: showhide .8s infinite; /* Safari 4+ */
-moz-animation: showhide .8s infinite; /* Fx 5+ */
-o-animation: showhide .8s infinite; /* Opera 12+ */
animation: showhide .8s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes showhide {
25% { opacity: 0; }
75% { opacity: 1; }
}
@-moz-keyframes showhide {
25% { opacity: 0; }
75% { opacity: 1; }
}
@-o-keyframes showhide {
25% { opacity: 0; }
75% { opacity: 1; }
}
@keyframes showhide {
25% { opacity: 0; }
75% { opacity: 1; }
}

/* Вращения по часовой стрелки. */
.active .animation-spin {
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(359deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}

/* Вращения против часовой стрелки. */
.active .animation-revspin {
-webkit-animation-name: counterspin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: counterspin;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: counterspin;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: counterspin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes counterspin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(-359deg); }
}
@-moz-keyframes counterspin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(-359deg); }
}
@-webkit-keyframes counterspin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
@keyframes counterspin {
from { transform: rotate(0deg); }
to { transform: rotate(-359deg); }
}

/* Центры вращения вентиляторов, крыльчаток и пр. */
.animation-revspin,
.animation-spin {
-webkit-transform-origin: 151px 170px;
-moz-transform-origin: 151px 170px;
-ms-transform-origin: 151px 170px;
transform-origin: 151px 170px;
}

/* Псевдокласс для отображения элемента FAULT   в эл.снабжение */
.active .normal .qf,
.active .in-alarm .qf,
.inactive .normal .qf,
.inactive .in-alarm .qf
{
display: none;
}
.active .fault .qf,
.inactive .fault .qf,
.fault .qf
{
 display: block;
}