Swipe widget detects left, right, up and down swiping motion and executes
associated actions. The widget should be placed on top of the area where the
movement should be detected. It is a group containing a graphical element
"area" which defines the area where the swipe should be detected.
For each of the motions to be detected there must exist several parameters
named "{direction}_{command}={value}" where {direction} is from the set:
left, right, up, down; and {command} is from the set: xthreshold (in percents
of widget width), ythreshold (also percentage), jump (value should be name of
the page to jump to), change (value should be the change to apply, e.g. +2 to
increase by 2, or -1 to decrement) or set (value should be the value to set
to). change and set commands should also be accompanied by paths with the
same name and their values should be variable names to apply the command to.
Additional parameters to add are:
- movethreshold: Percentage of the widget dimensions that define the pointer
movement. Anything below that value will not be considered
a movement. If omitted, 5 will be used.
- presstimeout: Time in milliseconds which will be measured on the pointer
down event. If time elapses without any significant movement
(defined by movethreshold), the pointer down/click event
will be propagated on an element on a lower level than the
swiping area. Similar thing will happen on pointer up event
if there was no significant movement.
HMI:Swipe:movethreshold=3:left_xthreshold=30:left_ythreshold=5:left_jump=Home:up_xthreshold=25:up_ythreshold=5:up_change=+2@up_change=/VAR0
This detects left and right swipe motion. To detect swipe left, movement must
be at least 30% of the widget width to the left and at most 5% of the widget
height up or down. If detected, it will jump to a page named Home. To detect
swipe up, movement must be at most 5% of the widget width left or right, and
at least 25% of the widget height up. If detected, it will increase VAR0 by 2.
shortdesc > Detect swipe motion and react accordingly
propagateMouseDownEvent(simulateUp) {
const elements = document.elementsFromPoint(this.startX, this.startY);
if (elements.length > 1) {
const eventDown = new MouseEvent("pointerdown", {
const eventClick = new MouseEvent("click", {
const eventUp = new MouseEvent("pointerup", {
const cb = document.getElementById(elements[1].id);
cb.dispatchEvent(eventDown);
cb.dispatchEvent(eventClick);
window.setTimeout(() => {
cb.dispatchEvent(eventUp);
window.clearTimeout(this.touchTimer);
svg_root.removeEventListener("pointerup", this.boundOnMouseUp, true);
svg_root.removeEventListener("pointermove", this.boundOnMouseMove, true);
const area = this.element.getBoundingClientRect();
var xDiff = (evt.pageX - this.startX) * 100.0 / area.width;
var yDiff = (evt.pageY - this.startY) * 100.0 / area.height;
if (xDiff < 0 && Math.abs(xDiff) >= this.settings.left.xThreshold && Math.abs(yDiff) < this.settings.left.yThreshold) {
} else if (xDiff > 0 && Math.abs(xDiff) >= this.settings.right.xThreshold && Math.abs(yDiff) < this.settings.right.yThreshold) {
} else if (yDiff < 0 && Math.abs(yDiff) >= this.settings.up.yThreshold && Math.abs(xDiff) < this.settings.up.xThreshold) {
} else if (yDiff > 0 && Math.abs(yDiff) >= this.settings.down.yThreshold && Math.abs(xDiff) < this.settings.down.xThreshold) {
} else if (Math.abs(xDiff) < this.moveThreshold && Math.abs(yDiff) < this.moveThreshold) {
this.propagateMouseDownEvent(true);
for (var a of this.settings[action].actions) {
if (a.action == "jump") {
fading_page_switch(a.target);
} else if (a.action == "change") {
this.change_hmi_value(a.var_idx, a.value);
} else if (a.action == "set") {
this.apply_hmi_value(a.var_idx, a.value);
svg_root.addEventListener("pointerup", this.boundOnMouseUp, true);
svg_root.addEventListener("pointermove", this.boundOnMouseMove, true);
this.touchTimer = window.setTimeout(() => {
const area = this.element.getBBox();
var xDiff = (this.currX - this.startX) * 100.0 / area.width;
var yDiff = (this.currY - this.startY) * 100.0 / area.height;
if (Math.abs(xDiff) < this.moveThreshold && Math.abs(yDiff) < this.moveThreshold) {
svg_root.removeEventListener("pointerup", this.boundOnMouseUp, true);
svg_root.removeEventListener("pointermove", this.boundOnMouseMove, true);
this.propagateMouseDownEvent(false);
| this.boundOnMouseUp = this.onMouseUp.bind(this);
| this.boundOnMouseMove = this.onMouseMove.bind(this);
| this.element.addEventListener("pointerdown", this.onMouseDown.bind(this));
| const dirs = ["left", "right", "up", "down"];
foreach "arg[contains(@value, '=')]" {
const "name", "substring-before(@value, '=')";
const "value", "substring-after(@value, '=')";
const "index" foreach "$paths" if "@assign = $name" value "position()-1";
const "direction", "substring-before($name, '_')";
const "command", "substring-after($name, '_')";
| if ("«$index»".length > 0) {
| pathIndex = Number("«$index»");
| properDir = dirs.findIndex((x) => x == "«$direction»") > -1;
| switch ("«$command»") {
| this.settings["«$direction»"].xThreshold = «$value»;
| this.settings["«$direction»"].yThreshold = «$value»;
| this.settings["«$direction»"].actions.push({
| this.settings["«$direction»"].actions.push({
| this.settings["«$direction»"].actions.push({
| if ("«$name»" == "movethreshold") {
| this.moveThreshold = "«$value»";
| } else if ("«$name»" == "presstimeout") {
| this.pressTimeout = "«$value»";
