Найти тему

Trace Mode 7. Графический Объект своими руками. "Круговая диаграмма".

#SCADA #TRACEMODE #АСУ #АСУТП

Список авторских статей о Trace Mode 7.

Trace Mode 6 был Графический Элемент "Круговая Диаграмма"

TRace Mode 6. Круговая диаграмма на три сектора.
TRace Mode 6. Круговая диаграмма на три сектора.

Обсуждать зачем можно использовать данный элемент мы не будем. Остановимся на факте - в Trace Mode 7 его нет.

Но, как мы все знаем, "... если очень хочется, то можно" его собрать самостоятельно. Что мы и сделаем.

Первое. Если любой разрабатываемый самостоятельно графических элемент планируется использовать многократно, то рекомендуется разрабатывать его как Графический Объект.

Ресурсы. Графические Объекты.
Ресурсы. Графические Объекты.

Второе. Графический Объект можно редактировать только в Ресурсах.

Третье. Графический Объект можно размещать только на шаблонах экранов (и там же перемещать).

Переходим к практике. Создадим круговую диаграмму на три сектора.

Создаем ГО в Ресурсы - Графические Объекты - Группа ГО (см. скриншот выше).

Создаем "2 умножить на <количество секторов> минус 1" аргументов ГО. В нашем случае 2 * 3 - 1 = 5.

-3

Создаем три слоя. Я их назвал по цвету секторов

-4

Слои располагаются снизу вверх, т.е. "желтый" поверх всех остальных.

Выбираем показывать только "серый" (флажок "показывать" у всех убираем, кроме "серого").

Размещаем ГЭ "Эллипс" необходимого размера. Создаваемый нами ГО будет именно такого размера.

Для удобства, располагаем его в верхнем левом углу. В настройках "Сектор" привязываем аргумент "сектор1".

-5

Переходим на второй слой (убираем флажок "серый" и ставим на "зеленый"). Так же располагаем второй ГЭ Эллипс с "Цвет заливки = Зеленый", "Сектор = сектор2", располагаем так же в верхнем левом углу.

Теперь самое важное. Если "серый" сектор рисуется от некоторого положения (формально, из центра горизонтальная линия вправо и сектор растет против часовой стрелки), то все последующие сектора должны начинаться там, где завершился предыдущий сектор. Это позволит занимать именно полный круг.

-6

По этому, у "зеленого" (и всех последующих) эллипсов переходим в свойство динамической трансформации и задаем "Вращение=смещение2"

-7

Теперь, необходимо установить "точку вращения". В этом нам поможет ГЭ Контур, размерами равными половине размеров Эллипса (в нашем примере Эллипс 248х248, то Контур 134х134), и расположим его так же в верхнем левом углу (если он "под" эллипсом, то выделяем эллипс и "опускаем его ниже" ).

-8

"Точка вращения" должна быть расположена точно в нижнем правом углу Контура.

Теперь Контур, через свойства, переносим в слой "желтый". Далее уже в слоях переходим в "желтый" (ставим флажок на "желтый" и убираем на "зеленый").

Создаем очередной Эллипс. Настраиваем его аналогично "зеленому" Эллипсу (смещение3, сектор3 и зеленый).

Теперь можно удалить Контур. В итоге, у Вас три слоя. В каждом слое по одному Эллипсу разного цвета.

Теперь логика. Необходимо рассчитать значение, а которое необходимо повернуть сектора относительно друг друга, что бы был полный эллипс.

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

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

-10

Добавляем на шаблон экрана наш Графический Объект, привязываем его аргументы к аргументам шаблона экрана. Аргументы канала вызова шаблона экрана привязываем к аргументам канала вызова шаблона программы. Готово.

Как масштабировать данный пример на большее число секторов? На уровне графики добавляем новые эллипсы (можно без слоев, достаточна ловкость рук), новые аргументы в ГО и расширяем программу.

В подписи есть ссылка на тему со скачиваемыми примерами ,включая рассмотренный сегодня.

Используя немного творческого подхода, можно своими руками сделать все!

Успехов в освоении Программы и применении полученного опыта! 👽

.

.

Сайт Разработчика

Скачать БЕСПЛАТНО и официально

Форум Trace Mode 7

Дзен-склад со скачиваемыми примерами