SAYMON документация

Skip to end of metadata
Go to start of metadata

Если хочется переопределить цвета состояний объектов и связей, добавить заливку, мигание и прочие интересные вещи.

Обязательные шаги

В любом случае нужно сделать следующие шаги:

  1. Создать, если его еще нет, файл /usr/local/saymon/saymon.local/css/saymon.local.css

    touch /usr/local/saymon/saymon.local/css/saymon.local.css

  2. Открыть его в любимом текстовом редакторе и вставить код из примеров ниже.

Пример переопределения цветов стандартных состояний объектов

Изменение цвета объекта и других соответствующих элементов

/* State 1 - Объект создан - Object created */

/* Изменение цвета объекта и других соответствующих элементов */
/* Change object color and other corresponding elements */
.state-1 {
box-shadow: 2px 5px 10px rgba(190, 190, 190, 0.5);
border-left: 5px solid #646166;
}

.state-bg-1 {
background-color: #646166;
}

.view-screen-element ul li.state-1 {
border-left: 5px solid #646166;
}

.view-screen-element ul li .badge.state-1 {
background-color: #646166;
}

Изменение цвета объекта и его фона (сплошная заливка)

/* State 4 - Объект перегружен - Overload */
/* Изменение цвета объекта и его фона (сплошная заливка) */
/* Change object color and its background (make it solid) */
.state-4 {
background-color: rgba(255, 122, 0, 0.46);
box-shadow: 2px 5px 10px rgba(253, 118, 7, 0.5);
border-left: 5px solid #FD7607;
}

.state-bg-4 {
background-color: #FD7607;
}

.view-screen-element ul li.state-4 {
border-left: 5px solid #FD7607;
}

.view-screen-element ul li .badge.state-4 {
background-color: #FD7607;
}

Изменение цвета объекта и мигающий фон

/* State 5 - Объект в аварии - Alarm / Critical */
/* Изменение цвета объекта и мигающий фон */
/* Change object color and blinking background */
.state-5 {
background-color: rgba(243, 0, 0, 0.56);
box-shadow: 2px 5px 10px rgba(255, 0, 0, 0.5);
border-left: 5px solid #FF0000;
}

.state-bg-5 {
background-color: #FF0000;
}

.view-screen-element ul li.state-5 {
border-left: 5px solid #FF0000;
}

.view-screen-element ul li .badge.state-5 {
background-color: #FF0000;
}

.view-screen-element div.state-5 {
animation: blink-state-5 2s linear infinite;
-webkit-animation: blink-state-5 2s linear infinite;
}
@keyframes blink-state-5 {
25% {
background-color: white;
}
}
@-webkit-keyframes blink-state-5 {
25% {
background-color: white;
}
}

Изменение фона объекта (сплошная заливка)

/* State 7 - Нет данных по объекту - No data */
/* Изменение фона объекта (сплошная заливка) */
/* Change object background (make it solid) */
.state-7 {
background-color: rgba(250, 190, 40, 0.6);
}

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

/* State 1 - Связь создана - Link created */

/* Изменение цвета коннектора */
/* Change connector color */
.link-state-1 circle {
fill: #646166;
}

/* Изменение цвета связи */
/* Change link color */
.link-state-1 path {
stroke: #646166;
}

Пример определения цветов нестандартных пользовательских состояний

/* State 1001 - Предупреждение - Notice */

/* Объект - Object */
.state-1001 {
-moz-box-shadow: 2px 5px 10px rgba(90, 175, 245, 1); /* Цвет тени объекта */
-webkit-box-shadow: 2px 5px 10px rgba(90, 175, 245, 1); /* Цвет тени объекта */
box-shadow: 2px 5px 10px rgba(90, 175, 245, 1); /* Цвет тени объекта */
border-left: 5px solid rgba(90, 175, 245, 1); /* Основной цвет объекта */
}

.state-bg-1001 {
background-color: rgba(90, 175, 245, 1); /* Цвет фона объекта */
}

.state-bg-light-1001 {
background-color: rgba(90, 175, 245, 1); /* Оттенок цвета */
}

.view-screen-element ul li.state-1001 { /* Цвет вложенного в родителя объекта */
border-left: 5px solid rgba(90, 175, 245, 1);
}

.badge.state-1001 { /* Цвет бэджа с количеством вложенных в родителя объектов при нехватке места */
background-color: rgba(90, 175, 245, 1);
}

/* State 1001 - Предупреждение - Notice */
/* Связь - Link */
.link-state-1001 circle { /* Цвет коннекторов связи */
fill: rgba(90, 175, 245, 1);
}

.link-state-1001 path { /* Цвет связи */
stroke: rgba(90, 175, 245, 1);
}

/* State 1002 - На ремонте - Maintenance */
/* Объект - Object */
.state-1002 {
-moz-box-shadow: 2px 5px 10px rgba(119, 211, 191, 1); /* Цвет тени объекта */
-webkit-box-shadow: 2px 5px 10px rgba(119, 211, 191, 1); /* Цвет тени объекта */
box-shadow: 2px 5px 10px rgba(119, 211, 191, 1); /* Цвет тени объекта */
border-left: 5px solid rgba(119, 211, 191, 1); /* Основной цвет объекта */
}

.state-bg-1002 {
background-color: rgba(119, 211, 191, 1); /* Цвет фона объекта */
}

.state-bg-light-1002 {
background-color: rgba(119, 211, 191, 1); /* Оттенок цвета */
}

.view-screen-element ul li.state-1002 { /* Цвет вложенного в родителя объекта */
border-left: 5px solid rgba(119, 211, 191, 1);
}

.badge.state-1002 { /* Цвет бэджа с количеством вложенных в родителя объектов при нехватке места */
background-color: rgba(119, 211, 191, 1);
}

/* State 1002 - На ремонте - Maintenance */
/* Связь - Link */
.link-state-1002 circle { /* Цвет коннекторов связи */
fill: rgba(119, 211, 191, 1);
}

.link-state-1002 path { /* Цвет связи */
stroke: rgba(119, 211, 191, 1);
}

Пример изменения толщины связей для некоторых состояний

/* State 4 - Связь перегружена - Overload */
.link-state-4 path {
stroke-width: 10px;
}

/* State 5 - Связь в аварии - Alarm / Critical */
.link-state-5 path {
stroke-width: 10px;
}

/* State 7 - Нет данных по связи - No data */
.link-state-7 path {
stroke-width: 10px;
}

Готовый css-файл

saymon.local.css

Связанные статьи