Jump to content

Создание пользовательских элементов

From Центр документации - ТМИУС КП


Описание

Основой примитивов HMI ПО ТМИУС является SVG графика, что позволяет масштабировать изображение без потери качества. Возможно использование PNG файлов.

SVG расшифровывается как scalable vector graphics, «масштабируемая векторная графика».

Отладка

В браузере Chrome есть средство отладки DevTools.

DevTools можно открыть так - контекстное меню страницы / Просмотреть код.

С помощью DevTools понятно и удобно отлаживать tmRW.js

Обновления страницы редактора схем в браузере достаточно для применения изменений в tmRW.js

В опциях DevTools не забыть включить пункт Disable cache (while DevTools is open).

После обновления версии tm_server плагины сохранятся.

Рисование элементов

В качестве редактора рекомендуется использовать Inkscape

При создании нового элемента следует использовать понятный пользователю масштаб. Например, при создании квадратных элементов можно использовать следующие параметры документа.

Frontpage

  • Ширина - 200
  • Высота - 200
  • Маштаб - 1

Viewbox

  • Ширина - 200
  • Высота - 200

Наборы элементов

Для создания нового набора элементов следует создать новую папку в \html\plugins\client\, например, tmRW

В папку поместить файлы

tmRW.js
tmRW_RU.json

В файл \html\plugins\client\plinit.js прописать новый набор элементов

Содержимое файла plinit.js

'use strict'
function tm_plugins_fns()
{
var fns = [
 'plugins/client/els/els.js'
,'plugins/client/tmElectr2/tmElectr2.js'
,'plugins/client/tmRW/tmRW.js'
];
return fns;
}

Содержимое файла tmRW.js

/*
Плагин клиента.
Пользовательские элементы схем в папке html/plugins/client/tmRW

*/
(()=>{ 'use strict'
//---import------------------------------------------------
const {APP} = window
const {tmSCH} = APP
const {
  schELSETsAdd//добавить множества элементов
, schELTPsAdd //добавить элементы
, schColorTabAdd //добавить таблицу цветов
} = tmSCH

//---implementation-----------------------------------------------
// добавить множество элементов
const ELSETs = {}
const tmRW = "tmRW"
ELSETs[tmRW] = { nm: 'Железная дорога элементы', hint:'Железная дорога элементы' }
schELSETsAdd( ELSETs )

const ELTPs = {}//Элементы

//KTP из SVG файла
ELTPs.tmRW_KTP = {
    set:tmRW //множество элементов, в которое добавить
  , nm:'KTP'// имя компонента - отображается в редакторе
  , hint:'KTP'// описание компонента - отображается в редакторе
  , pars:{ // параметры компонента - отображаются в редакторе
//      c:'u'  // Цвет
//   , u:'u0' // Напряжение
      s:1    // Масштаб
    , w:1    // Толщина
    , m:''   // положение на экране
    , ns:1   // Нормальное положение
//    , tos:10 // Таймаут переключения
//    , sy:''  // Телеуправление - сигнал
//    , ss:''  // Положение - сигнал
//   , su:''  // Обесточен - сигнал
//   , sz:''  // Заземлен - сигнал
//   , se:''  // Разблокирован - сигнал
    }
  // изображение состояния отключен
  , of: [{ type:'image', src:'plugins/client/tmRW/KTP.svg', x:0, y:0, width:20, height:20}]
  // изображение состояния включен
  , on: [{ type:'image', src:'plugins/client/tmRW/KTP.svg', x:0, y:0, width:20, height:20}]
}

ELTPs.tmRW_KTP = {
    set:tmRW //множество элементов, в которое добавить
  , nm:'KTP'// имя компонента - отображается в редакторе
  , hint:'KTP'// описание компонента - отображается в редакторе
  , pars:{ // параметры компонента - отображаются в редакторе
//      c:'u'  // Цвет
//   , u:'u0' // Напряжение
      s:1    // Масштаб
    , w:1    // Толщина
    , m:''   // положение на экране
    , ns:1   // Нормальное положение
//    , tos:10 // Таймаут переключения
//    , sy:''  // Телеуправление - сигнал
//    , ss:''  // Положение - сигнал
//   , su:''  // Обесточен - сигнал
//   , sz:''  // Заземлен - сигнал
//   , se:''  // Разблокирован - сигнал
    }
  // изображение состояния отключен
  , of: [{ type:'image', src:'plugins/client/tmRW/KTP.svg', x:0, y:0, width:20, height:20}]
  // изображение состояния включен
  , on: [{ type:'image', src:'plugins/client/tmRW/KTP.svg', x:0, y:0, width:20, height:20}]
}

//KTP моторный из вектора
ELTPs.tmRW_KTP_Vector = {
    set:tmRW //множество элементов, в которое добавить
  , nm:'KTP_Vector'// имя компонента - отображается в редакторе
  , hint:'KTP_Vector'// описание компонента - отображается в редакторе
  , pars:{ // параметры компонента - отображаются в редакторе
      c:'u'  // Цвет
 //  , u:'u0' // Напряжение
    ,  s:1    // Масштаб
    , w:1    // Толщина
    , m:''   // положение на экране
    , ns:1   // Нормальное положение
//    , tos:10 // Таймаут переключения
//    , sy:''  // Телеуправление - сигнал
    , ss:''  // Положение - сигнал
//   , su:''  // Обесточен - сигнал
//   , sz:''  // Заземлен - сигнал
//   , se:''  // Разблокирован - сигнал
    }
  // изображение состояния отключен
  , of: [
			{ type:'rect', x:-10, y:0, width:20, height: 20, 'fill-opacity':0},
			{ type:'path', path:'M -10,0 L 0,20 L 10,0 Z', stroke:'black', fill:'black'}
			
			
		]
  // изображение состояния включен
  , on: [
			{ type:'rect', x:-10, y:0, width:20, height: 20, 'fill-opacity':1},
			{ type:'path', path:'M -10,0 L 0,20 L 10,0 Z', stroke:'black', fill:'black'}
			
		
		]
}


//ЛР моторный из SVG файла
ELTPs.tmRW_LR_Motor = {
    set:tmRW //множество элементов, в которое добавить
  , nm:'LR_Motor'// имя компонента - отображается в редакторе
  , hint:'LR_Motor'// описание компонента - отображается в редакторе
  , pars:{ // параметры компонента - отображаются в редакторе
//      c:'u'  // Цвет
//   , u:'u0' // Напряжение
      s:1    // Масштаб
    , w:1    // Толщина
    , m:''   // положение на экране
    , ns:1   // Нормальное положение
//    , tos:10 // Таймаут переключения
    , sy:''  // Телеуправление - сигнал
    , ss:''  // Положение - сигнал
//   , su:''  // Обесточен - сигнал
//   , sz:''  // Заземлен - сигнал
//   , se:''  // Разблокирован - сигнал
    }
  // изображение состояния отключен
  , of: [{ type:'image', src:'plugins/client/tmRW/LR_motor_off.svg', x:0, y:0, width:20, height:20}]
  // изображение состояния включен
  , on: [{ type:'image', src:'plugins/client/tmRW/LR_motor_on.svg', x:0, y:0, width:20, height:20}]
}


schELTPsAdd( ELTPs )

//------------------------------------------------------------------------------------------------------
//Пример пользовательских цветов
//Повторяет таблицу цветов АСУ ТП ПС, кроме цвета фона

const colorTab1 = { nm: 'colorTab1', ln: 'Color table example (do not use)'
  , tab : {
  'fn' : 'rgb(180,180,180)'//Фон
, 'b' : 'rgb(0,0,0)' // точка присоединения ошиновки к сборным шинам
, 'z' : 'rgb(180,250,150)'//205,255,155)'//Заземлено
, 'u0' : 'rgb(255,255,255)'//обесточено//#000000'
, 'u1' : 'rgb(190,190,190)'//
, 'u6' : 'rgb(200,150,100)'//'#339964'
, 'u10' : 'rgb(100,0,100)'//'#333499'
, 'u20' : 'rgb(130,100,50)'//'#aa00aa'
, 'u35' : 'rgb(130,100,50)'//'#aa00aa'
, 'u110' : 'rgb(0,180,200)'//'#ff5555'
, 'u150' : 'rgb(170,150,0)'
, 'u220' : 'rgb(200,200,0)'
, 'u330' : 'rgb(0,140,0)'
, 'u400' : 'rgb(240,150,30)'
, 'u500' : 'rgb(165,15,10)'
, 'u750' : 'rgb(0,0,200)'
, 'u800' : 'rgb(0,0,200)'
, 'u1150' : 'rgb(205,138,255)'
, 'g' : 'rgb(230,70,230)'//Генераторное напряжение всех классов
// технологическое оборудование
, 'm' : 'rgb(220,200,40)' //Маслосистема
, 'o' : 'rgb(0,130,250)' //Воздушная сеть
, 'f' : 'rgb(0,150,0)' //Пожарная и технологическая сеть
//Цветовое отображение телеизмерений
, 'ti' : 'rgb(0,255,0)' //Активная нагрузка, реактивная нагрузка, ток, напряжение
, 'tu' : 'rgb(200,220,170)' //Напряжение на 1 уровне ПТК ГЦУС МЭС
, 'tt' : 'rgb(255,190,0)' //Дата, время, температура, частота тока
, 'tr' : 'rgb(220,150,145)' //Генерация
, 'tp' : 'rgb(150,175,205)' //Перетоки по сечениям
, 'ta' : 'rgb(255,0,0)' //Авария
, 'tw' : 'rgb(255,255,0)' //Перегруз
, 'tn' : 'rgb(255,255,255)' //Недостоверная информация
, 'td' : 'rgb(255,192,0)' //Дипетчерские имена
, 'sel' : 'rgb(255,255,255)' // select
, 'btn' : 'rgb(0,0,0)' // кнопка рамка
, 'btnb' : 'rgb(150,150,150)' // кнопка фон
, 'btnf' : 'rgb(0,0,0)' // кнопка текст
, 'rpn' : 'rgb(0,0,0)' //РПН //colorRPN
, 'onc' : 'rgb(255,0,0)' //Фон включено
, 'ofc' : 'rgb(80,80,80)' //Фон отключено
, 'oncf' : 'rgb(255,255,255)' //Текст включено
, 'ofcf' : 'rgb(100,100,100)' //Текст отключено
, 'emzok' : 'rgb(0,255,0)' //Неблокирует
, 'emzno' : 'rgb(255,0,0)' //Блокирует
, 'fnobj' : 'rgb(222,222,240)' //Фон объекта//@schIMG
, 'noack' : 'rgb(255,255,0)' //не квитирован//@ACKsch
//, '' : 'rgb(,,)' //
} 
}
schColorTabAdd(colorTab1)

// добавление файла els.json с переводом (на русский)
_LOC.locAdd({ pr:'loc', pf:'els', objs:{ colorTab1, ELSETs, ELTPs } })

})()

Содержимое файла tmRW_RU.json

{
  "ELSETs":{
  "tmRW":{ "nm":"Железная дорога элементы", "hint":"Железная дорога элементы"}
}
, "ELTPs":{
  "tmRW_KTP":{ "nm":"KTP", "hint":"КТП, ТП, СТП, ОМП"}
  "tmRW_KTP_Vector":{ "nm":"KTP_Vector", "hint":"КТП, ТП, СТП, ОМП"}
  "tmRW_LR_Motor":{ "nm":"LR_Motor", "hint":"ЛР моторный привод"}
}
, "colorTab1": {"ln":"Пример плагина таблицы цветов (не использовать)"}
}
Retrieved from "https://wiki.cea-energo.ru/w/index.php?title=Hmi_creation_custom_elements&oldid=1956"