Quick Menu

Создание мнемосхем.

Рисование SVG мнемосхем, в том числе и 3D стиле, выполняется в Inkscape (inkscape.org). В Inkscape нет поддержки анимации.

Далее в MnemoBinder выполняется:

  • создание анимаций,
  • задание привязок переменных,
  • тестирование мнемосхемы заданием переменных,
  • загрузка мнемосхемы в контроллер.

Анимация.

Выполяняется с помощью элементов animate и animateTransform из стандарта SVG. Описание элемента animate: Все об SVG анимации(habr.com) https://habr.com/ru/articles/450924/

Привязки переменных.

Привязки переменных выполняются путем добавления к родительскому элементу следующих bind элементов:

bind_text_di

Используется для отражения значения дискретной переменной в родительском элементе SVG типа <text>, <tspan> или <textPath>.

  • var_name - имя переменной

bind_di

Используется для изменения атрибута или свойства CSS родительского элемента, с помощью дискретной переменной.

  • attribute_name - имя атрибута или свойства CSS. Если = textContent,  то установка свойства textContent родительского элемента. (По умолчанию "display")
  • is_style - если true, то это свойство CSS, иначе - имя атрибута.
  • var_name - имя переменной
  • on_value - значение атрибута или свойства CSS  при var = 1
  • off_value - значение атрибута или свойства CSS  при var = 0

bind_animate_di

Используется для включения и выключения анимации - родительского элемента <animate> или <animateTransform>, с помощью дискретной переменной. При var = 1, анимация включается, а при var = 0 - выключается.

  • var_name - имя переменной
  • reverse = true - при var = 1, анимация выключается, а при var = 0 включается (по умолчанию false).
  • repeat_count - если задано, то значение копируется в атрибут repeatCount родительского элемента animate.

bind_text_ai

Используется для отражения значения аналоговой переменной в родительском элементе SVG типа <text>, <tspan> или <textPath>.

  • var_name - имя переменной
  • decimal_places - количество знаков после запятой

bind_range_ai

Используется для изменения атрибута или свойства CSS родительского элемента, с помощью аналоговой переменной с преобразованием.

  • attribute_name - имя атрибута или свойства CSS. Если = textContent,  то установка свойства textContent родительского элемента.
  • is_style - если true, то это свойство CSS, иначе - имя атрибута.
  • var_name - имя переменной
  • var_min_value - преобразование работает, если все числа 
  • var_max_value
  • attribute_min_value
  • attribute_max_value

bind_do

При клике по родительскому элементу, происходит отправка измененного с 0 до 1 или наоборот значения указанной дискретной переменной.

  • var_name - имя переменной
  • confirm - если true, то перед отправкой появиться диалог, запрашивающий подтверждение.

bind_ao

При клике по родительскому элементу, появляется диалог, для ввода нового значения аналоговой переменной, и после подтверждения, отправка измененного значения.

  • var_name - имя переменной
  • min_value - минимальное значение отправляемой переменной, если задано.
  • max_value - максимальное значение отправляемой переменной, если задано.

bind_system_name

Используется для отображения имени системы (напрмер П1), в родительском элементе <text>, <tspan> или <textPath>.

Примеры использования.

Примеры определяются в редакторе мнемосхем, а здесь для удобства приведены в формате SVG.

text + tspan + bind_text_di.

bind_text_di: Отображение переменной "ПУСК_IO" в элементе tspan.

<text id="text3082-6" style="line-height:0%;font-family:FreeSans;fill:#000000" x="66.497719" y="919.35449">
    <tspan style="font-size:15.2345px;line-height:1.25" y="919.35449" x="66.497719" id="tspan3084-7" sodipodi:role="line">0
        <bind_text_di var_name="ПУСК_IO"></bind_text_di>
    </tspan>
</text>

text + tspan + bind_di.

bind_di: установка свойства textContent родительского элемента 'tspan' значением переменной "НЗ_Сигнал_пожар".

<text id="text1068" style="line-height:0%;font-family:FreeSans;fill:#000000;-inkscape-font-specification:'FreeSans, Normal';font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:12px;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill-opacity:1;" x="112.46062" y="896.01996">
    <tspan sodipodi:role="line" id="tspan1067" style="">0
        <bind_di attribute_name="textContent" is_style="false" var_name="НЗ_Сигнал_пожар" on_value="1" off_value="0"></bind_di>
    </tspan>
</text>

polygon + bind_di.

bind_di: Если ВЕНТИЛЯТОР = 0, то polygon не виден, иначе виден.

<polygon points="821.55,207.69 825.62,208.1 832.14,207.69 837.83,206.06 843.26,203.21 848.41,199.01 852.89,193.04 856.42,184.08 872.02,184.08 872.02,148 823.86,148 818.03,149.36 812.74,151.66 808.26,154.51 803.24,159.53 799.98,165.09 797.54,171.47 797,179.07 797.54,185.03 799.44,190.6 802.56,195.34 805.95,199.41 810.29,202.94 816.81,206.2 " style="display:none;fill:url(#id9562679948331902)" id="polygon181">
  <bind_di attribute_name="display" is_style="true" off_value="none" on_value="" var_name="ВЕНТИЛЯТОР"></bind_di>
</polygon>

circle + bind_di.

bind_di: Если НАСОС = 0, то заливка circle серая "#808080", иначе светло зеленая "#00FF00".

  <circle cx="348.37" cy="397.56" r="12.62" fill="#404040" id="circle206">
    <bind_di attribute_name="fill" is_style="false" off_value="#808080" on_value="#00FF00" var_name="НАСОС"></bind_di>
  </circle>

polygon + bind_di + animate + bind_animate_di.

bind_di: Если АВАРИЯ_ПРОГРЕВА = 0, то заливка полигона серая "#808080", иначе красная "#FF0000".

animate: Определяет для полигона анимацию: изменяет прозрачность от 0 до 1 и обратно с периодом 1 секунда.

bind_animate_di: Включение и выключение анимации по переменой АВАРИЯ_ПРОГРЕВА.

<polygon points="378,208 388,198 388,148 378,148 " style="fill:#808080;stroke:#000000" id="polygon139">
    <bind_di attribute_name="fill" is_style="true" off_value="#808080" on_value="#FF0000" var_name="АВАРИЯ_ПРОГРЕВА"></bind_di>
    <animate attributeName="opacity" calcMode="discrete" dur="1" repeatCount="" values="0;1">
        <bind_animate_di repeat_count="indefinite" reverse="false" var_name="АВАРИЯ_ПРОГРЕВА"></bind_animate_di>
    </animate>
</polygon>

text + bind_text_ai.

bind_text_ai: Отображение переменной "Т_притока" в элементе text.

<text x="433.46997" y="20.32" style="font-size:15px;text-anchor:end;fill:#0000ff" id="text192">##.#
    <bind_text_ai decimal_places="1" var_name="Т_притока"></bind_text_ai>
</text>

text + tspan + bind_text_ai.

bind_text_ai: Отображение переменной "Уставка_Т_притока" в элементе tspan.

<text id="text_setpoint" x="170.12976" y="1030.9465" style="font-size:15px;font-family:'Liberation Serif', 'Times New Roman', 'Times CY', serif;text-anchor:middle;fill:#0000ff;stroke-linejoin:bevel">
    <tspan x="170.12976" y="1030.9465" id="tspan329">50
        <bind_text_ai decimal_places="1" var_name="Уставка_Т_притока"></bind_text_ai>
    </tspan>
</text>

rect + bind_range_ai.

bind_range_ai: 2 элемента bind_range_ai изменяют одновременно y и height у элемента rect по значению переменной "Т_обр_воды". rect растет вверх при увеличении "Т_обр_воды". Менять надо y, так как ось y в SVG направлена вниз.

<rect id="TheBar" x="348" y="148" width="30" height="60" style="fill:#ff0000">
    <bind_range_ai attribute_max_value="60" attribute_min_value="0" attribute_name="height" is_style="false" var_max_value="100" var_min_value="0" var_name="Т_обр_воды"></bind_range_ai>
    <bind_range_ai attribute_max_value="148" attribute_min_value="208" attribute_name="y" is_style="false" var_max_value="100" var_min_value="0" var_name="Т_обр_воды"></bind_range_ai>
</rect>

g + bind_do.

bind_do: При клике по элементу g, происходит отправка измененного с 0 до 1 или наоборот значения дискретной переменной "Зима_принудительно".

<g>
    <rect x="129.14" y="990.16998" width="81.911003" height="53.644001" rx="0.37996" ry="0.40041" stroke-width="2.9185"> </rect>
    <bind_do confirm="true" var_name="Зима_принудительно"></bind_do>
</g>

g + bind_ao.

bind_ao: При клике по элементу g, появляется диалог, для ввода нового значения аналоговой переменной "Уставка_Т_притока", и после подтверждения, отправка измененного значения.

    <g>
      <rect transform="translate(0,875.2)" x="127.56" y="113.39" width="85.039001" height="56.693001" rx="2" ry="2" style="fill:#26c5d9;stroke:url(#linearGradient2-2);stroke-width:2" id="rect327"></rect>
      <text x="139.93703" y="1002.7559" style="font-size:15px;font-family:'Liberation Serif', 'Times New Roman', 'Times CY', serif;fill:#000000;stroke-linejoin:bevel" id="text327"><tspan x="139.93703" y="1002.7559" id="tspan327">Уставка Т</tspan></text>
      <bind_ao max_value="30" min_value="18" var_name="Уставка_Т_притока"></bind_ao>
    </g>

text + tspan + bind_system_name.

bind_system_name: Используется для отображения имени системы (напрмер П1), в родительском элементе .

<text x="235.94978" y="19.821777" xml:space="preserve" id="text137">
    <tspan x="235.94978" y="19.821777" id="tspan137">sysName
        <bind_system_name></bind_system_name>
    </tspan>
</text>