1. Обязательно представиться на русском языке кириллицей (заполнить поле "Имя").
  2. Фиктивные имена мы не приветствуем. Ивановых и Пупкиных здесь уже достаточно.
  3. Не писать свой вопрос в первую попавшуюся тему - вместо этого создать новую тему.
  4. За поиск, предложение и обсуждение пиратского ПО и средств взлома - бан без предупреждения.
  5. Рекламу и частные объявления "куплю/продам/есть халтура" мы не размещаем ни на каких условиях.
  6. Перед тем как что-то написать - читать здесь и здесь, а студентам - обязательно здесь.
  7. Не надо писать в ЛС администраторам свои технические вопросы. Администраторы форума отлично знают как работает форум, а не все-все контроллеры, о которых тут пишут.

Анимация SVG в MasterSCADA 4D

Ответить

Автор темы
moskvichov
здесь недавно
здесь недавно
Сообщения: 58
Зарегистрирован: 06 июн 2013, 10:07
Имя: Москвичев Вячеслав
Страна: Россия
город/регион: Москва
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Анимация SVG в MasterSCADA 4D

Сообщение moskvichov »

Уважаемые форумчане.

Начал тут смотреть, изучать MasterSCADA 4D, дошел до построения маленького проекта. И вот тут никак не могу понять, и найти информацию в интернете. Может кто из Вас поможет.

Вопрос в анимации SVG объекта. Как ее сделать? Импорт стандартных из библиотеки работает на ура, но хочется своего.

Если можно объясните на пальцах, пусть простой квадрат в SVG, при изменении BOOL параметра в 1 вращается, при 0 останавливается.

Заранее спасибо.
Аватара пользователя

petr2off
эксперт
эксперт
Сообщения: 1602
Зарегистрирован: 06 янв 2016, 19:45
Имя: Петров В.Л.
Страна: Россия
город/регион: Красноярск
Благодарил (а): 69 раз
Поблагодарили: 185 раз

Анимация SVG в MasterSCADA 4D

Сообщение petr2off »

Посмотри в Ютубе. Там ролик обучающий есть.
Примитивный правда, но все основные моменты отражены.

Автор темы
moskvichov
здесь недавно
здесь недавно
Сообщения: 58
Зарегистрирован: 06 июн 2013, 10:07
Имя: Москвичев Вячеслав
Страна: Россия
город/регион: Москва
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Анимация SVG в MasterSCADA 4D

Сообщение moskvichov »

Это тот который со светофором? Так там нет анимации, а другой я что то не нашел.
Аватара пользователя

petr2off
эксперт
эксперт
Сообщения: 1602
Зарегистрирован: 06 янв 2016, 19:45
Имя: Петров В.Л.
Страна: Россия
город/регион: Красноярск
Благодарил (а): 69 раз
Поблагодарили: 185 раз

Анимация SVG в MasterSCADA 4D

Сообщение petr2off »

Проблем с вращение квадрата вообще не вижу.
Есть атрибут у квадрата (как у многих фигур) - Угол поворота.
Написал процедурку вида:
ANG := 360*SIN(T);
T:=T + 0.1;
If T > 12 then T:= 0; END_IF
ANG - выходной параметр. T локальная переменная.
Выход ANG связал с атрибутом и все - квадрат вращается.

Автор темы
moskvichov
здесь недавно
здесь недавно
Сообщения: 58
Зарегистрирован: 06 июн 2013, 10:07
Имя: Москвичев Вячеслав
Страна: Россия
город/регион: Москва
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Анимация SVG в MasterSCADA 4D

Сообщение moskvichov »

petr2off А если это не квадрат будет????

В общем ответила мне тех.поодержка, спасибо им огромное. Делается это приблизительно так:

Рисуем допустим в InkScape квадрат, получаем такой SVG

Код: Выделить всё

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 16.000 16.000" xmlns="http://www.w3.org/2000/svg">
   <rect x="2.000" y="2.000" width="8.000" height="8.000" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width=".47744">
   </rect> 
</svg>
Теперь немного его поправим:
1. Сделаем 2 квадрата, один в остановленном вид, другой вращается
2. Сгруппируем все, указав для вращающегося display=none.
3. Добавим стиль

В итоге получил вот что:

Код: Выделить всё

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 16.000 16.000" xmlns="http://www.w3.org/2000/svg">
 	<style type="text/css">
    <![CDATA[    
  	#rectangle.Start #rect_stoped{display:none;}
	#rectangle.Start #rect_started{display:inline;}
     ]]>
  	</style>
  <g id="rectangle">
  <g  id="rect_stoped" display="inline">
   <rect x="2.000" y="2.000" width="8.000" height="8.000" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width=".47744">
   </rect>   
  </g>
  
  <g  id="rect_started" display="none">
   <rect x="2.000" y="2.000" width="8.000" height="8.000" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width=".47744">
    <animateTransform attributeName="transform" type="rotate"  from="0 6 6" to="360 6 6" dur="5s" repeatDur="indefinite"/>
   </rect> 
  </g> 
  </g>  
</svg>
Теперь как это все запихнуть в Masterscada4D

Создаем файл с таким же именем как и SVG только XML(у меня drawing.svg и drawing.xml) содержимое:

Код: Выделить всё

<?xml version="1.0"?>
<SvgDef xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" CreateCommonAvary="false">
  <ParameterDefs>
    <ParameterDef Name="Rotation" DisplayName="Вращение" Type="STRING" ParamType="Attribute" ItemId="rectangle" Path="class">
      <Value DisplayName="Выкл">Stop</Value>
      <Value DisplayName="Вкл">Start</Value>
    </ParameterDef>
  </ParameterDefs>
</SvgDef>
Ну и все, теперь импортируем его в Masterscada соответственно при импорте появляется окошко в котором уже можно выбирать:

Имя параметра: Вращение
Id элемента SVG: rectangle
Атрибут элемента: class

Вот и все теперь вставляем его куда надо а на появившееся свойство Вращение кидаем параметр. Как то так.

Автор темы
moskvichov
здесь недавно
здесь недавно
Сообщения: 58
Зарегистрирован: 06 июн 2013, 10:07
Имя: Москвичев Вячеслав
Страна: Россия
город/регион: Москва
Благодарил (а): 3 раза
Поблагодарили: 1 раз

Анимация SVG в MasterSCADA 4D

Сообщение moskvichov »

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

Код: Выделить всё

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
  <![CDATA[ 
	#rectangle {
		width:40px;
		height:40px;
    }
    #rectangle.Start{
       -webkit-animation: shakeY 2s infinite linear;
    }
	@keyframes shakeY {
		from,
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		   }
 
		10%,
		30%,
		50%,
		70%,
		90% {
			-webkit-transform: translate3d(0, -10px, 0);
			transform: translate3d(0, -10px, 0);
			}
 
		20%,
		40%,
		60%,
		80% {
			-webkit-transform: translate3d(0, 10px, 0);
			transform: translate3d(0, 10px, 0);
    }
	}
    ]]>
  </style>
  <g id="rectangle">
	<rect x="10" y="10" width="40" height="40" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
  </g>
</svg>
Сама прыгалка shakeY найдена на просторах интернета, немного поправим XMLку:

Код: Выделить всё

<?xml version="1.0"?>
<SvgDef xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" CreateCommonAvary="false">
  <ParameterDefs>
    <ParameterDef Name="Jump" DisplayName="Прыгать" Type="STRING" ParamType="Attribute" ItemId="rectangle" Path="class">
      <Value DisplayName="Выкл">Stop</Value>
      <Value DisplayName="Вкл">Start</Value>
    </ParameterDef>
  </ParameterDefs>
</SvgDef>

Ну и далее все как обычно Новое окно, Импорт SVG, вставляем куда нужно, привязываем параметр. И вуаля.
Ответить

Вернуться в «MasterScada»