// widget_animaterotation.ysl2

widget_desc("AnimateRotation") {

longdesc

||

AnimateRotation widget animates rotation of an SVG element. Widget is a group with label

HMI:AnimateRotation:optional_args

Element to rotate is a part of that group labeled "animate".

Optional element of that group is a graphic whose label is one of: "center:top_left", "center:top_right",

"center:bottom_left", "center:bottom_right" or "center:center". Label indicates which point of that element

will be used as a center of rotation for "animate" element. If omitted, "animate" element's center will be used.

Optional arguments are:

- duration=value: duration of a single loop in ms (if omitted, 2000 is set)

- iterations=value: number of loops to be performed (if omitted, infinite number is set)

- frame_rate=value: number of animation frames per second (if omitted, 10 will be used)

The higher the frame rate, the higher CPU usage will be.

||

shortdesc > Rotation animation

}

widget_class("AnimateRotation")

||

duration = 2000;

iterations = "infinite";

center_x = null;

center_y = null;

frame_rate = 10;

||

widget_defs("AnimateRotation") {

| init() {

const "widget_type", "@type";

const "widget_id", "@id";

| const widget_pos = this.element.getBBox();

| this.center_x = widget_pos.x + widget_pos.width / 2;

| this.center_y = widget_pos.y + widget_pos.height / 2;

foreach "arg[contains(@value, '=')]" {

const "name", "substring-before(@value, '=')";

const "value", "substring-after(@value, '=')";

| this.«$name» = «$value»;

}

const "center_element", "$hmi_element/*[starts-with(@inkscape:label, 'center:')]";

if "count($center_element) = 1" {

| var el = id("«$center_element/@id»");

const "lab", "substring-after($center_element/@inkscape:label, 'center:')";

| var el_label = "«$lab»";

| const el_pos = el.getBBox();

| switch (el_label) {

| case "top_left":

| this.center_x = el_pos.x;

| this.center_y = el_pos.y;

| break;

| case "top_right":

| this.center_x = el_pos.x + el_pos.width;

| this.center_y = el_pos.y;

| break;

| case "bottom_left":

| this.center_x = el_pos.x;

| this.center_y = el_pos.y + el_pos.height;

| break;

| case "bottom_right":

| this.center_x = el_pos.x + el_pos.width;

| this.center_y = el_pos.y + el_pos.height;

| break;

| case "center":

| this.center_x = el_pos.x + el_pos.width / 2;

| this.center_y = el_pos.y + el_pos.height / 2;

| break;

| }

| this.element.removeChild(el);

}

if "count($center_element) > 1" {

const "errmsg" > «$widget_type» widget (id=«$widget_id») has more than one center element

error > «$errmsg»

}

const "animate_element", "$hmi_element/*[@inkscape:label = 'animate']";

if "count($animate_element) != 1" {

const "errmsg" > «$widget_type» widget (id=«$widget_id») must have exactly one animate element

error > «$errmsg»

}

| var anim_el = id("«$animate_element/@id»");

| anim_el.style.transformOrigin = vsprintf("%.2fpx %.2fpx", [this.center_x, this.center_y]);

| anim_el.style.animation = vsprintf("animateRotation %.3fs steps(%s) %s", [this.duration / 1000.0, this.frame_rate, this.iterations]);

| }

}

emit "cssdefs:animaterotation" {

||

@keyframes animateRotation {

100% { transform: rotate(360deg); }

}

||

}