edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: Edouard@3410: edouard@3414: Edouard@3410: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: Edouard@3410: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3414: edouard@3414: Edouard@3410: Edouard@3410: Edouard@3410: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: Widget id: edouard@3235: edouard@3235: label: edouard@3235: edouard@3235: has wrong syntax of path section edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: PAGE_LOCAL edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: HMI_LOCAL edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: Widget id: edouard@3235: edouard@3235: label: edouard@3235: edouard@3235: path section edouard@3235: edouard@3235: use min and max on non mumeric value edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: Edouard@3264: Edouard@3264: Edouard@3264: Edouard@3264: Edouard@3264: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: : edouard@3235: edouard@3235: edouard@3235: edouard@3235: @ edouard@3235: edouard@3235: edouard@3235: , edouard@3235: edouard@3235: , edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: HMI: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3235: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: AnimateRotation - DEPRECATED, do not use. edouard@3241: edouard@3241: Doesn't follow WYSIWYG principle, and forces user to add animateTransform tag in SVG (using inkscape XML editor for exemple) edouard@3241: edouard@3241: edouard@3241: edouard@3241: AnimateRotation - DEPRECATED edouard@3241: edouard@3241: edouard@3241: speed edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Back widget brings focus back to previous page in history when clicked. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Jump to previous page edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Button widget takes one boolean variable path, and reflect current true edouard@3241: edouard@3241: or false value by showing "active" or "inactive" labeled element edouard@3241: edouard@3241: respectively. Pressing and releasing button changes variable to true and edouard@3241: edouard@3241: false respectively. Potential inconsistency caused by quick consecutive edouard@3241: edouard@3241: presses on the button is mitigated by using a state machine that wait for edouard@3241: edouard@3241: previous state change to be reflected on variable before applying next one. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Push button reflecting consistently given boolean variable edouard@3241: edouard@3241: edouard@3241: Boolean variable edouard@3241: edouard@3241: edouard@3414: edouard@3414: edouard@3414: frequency = 5; edouard@3414: edouard@3414: display = "inactive"; edouard@3414: edouard@3414: state = "init"; edouard@3414: edouard@3414: dispatch(value) { edouard@3414: edouard@3414: edouard@3414: } edouard@3414: edouard@3414: onmouseup(evt) { edouard@3414: edouard@3414: svg_root.removeEventListener("pointerup", this.bound_onmouseup, true); edouard@3414: edouard@3414: edouard@3414: edouard@3414: edouard@3414: } edouard@3414: edouard@3414: onmousedown(evt) { edouard@3414: edouard@3414: svg_root.addEventListener("pointerup", this.bound_onmouseup, true); edouard@3414: edouard@3414: edouard@3414: edouard@3414: edouard@3414: } edouard@3414: edouard@3414: edouard@3414: animate(){ edouard@3414: edouard@3414: if (this.active_elt && this.inactive_elt) { edouard@3414: edouard@3414: edouard@3414: if(this.display == " edouard@3414: edouard@3414: ") edouard@3414: edouard@3414: this. edouard@3414: edouard@3414: _elt.style.display = ""; edouard@3414: edouard@3414: else edouard@3414: edouard@3414: this. edouard@3414: edouard@3414: _elt.style.display = "none"; edouard@3414: edouard@3414: edouard@3414: } edouard@3414: edouard@3414: } edouard@3414: edouard@3414: init() { edouard@3414: edouard@3414: this.bound_onmouseup = this.onmouseup.bind(this); edouard@3414: edouard@3414: this.element.addEventListener("pointerdown", this.onmousedown.bind(this)); edouard@3414: edouard@3414: } edouard@3414: edouard@3414: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: CircularBar widget changes the end angle of a "path" labeled arc according edouard@3241: edouard@3241: to value of the single accepted variable. edouard@3241: edouard@3241: edouard@3241: edouard@3241: If "min" a "max" labeled texts are provided, then they are used as edouard@3241: edouard@3241: respective minimum and maximum value. Otherwise, value is expected to be edouard@3241: edouard@3241: in between 0 and 100. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Change end angle of Inkscape's arc edouard@3241: edouard@3362: edouard@3362: minimum value edouard@3362: edouard@3362: edouard@3362: maximum value edouard@3362: edouard@3241: edouard@3241: Value to display edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: CircularSlider - DEPRECATED, to be replaced by PathSlider edouard@3241: edouard@3241: This widget moves "handle" labeled group along "range" labeled edouard@3241: edouard@3241: arc, according to value of the single accepted variable. edouard@3241: edouard@3241: edouard@3241: edouard@3241: If "min" a "max" labeled texts are provided, or if first and second edouard@3241: edouard@3241: argument are given, then they are used as respective minimum and maximum edouard@3241: edouard@3241: value. Otherwise, value is expected to be in between 0 and 100. edouard@3241: edouard@3241: edouard@3241: edouard@3241: If "value" labeled text is found, then its content is replaced by value. edouard@3241: edouard@3241: During drag, "setpoint" labeled group is moved to position defined by user edouard@3241: edouard@3241: while "handle" reflects current value from variable. edouard@3241: edouard@3241: edouard@3241: edouard@3241: CircularSlider - DEPRECATED edouard@3241: edouard@3241: edouard@3241: minimum value edouard@3241: edouard@3241: edouard@3241: maximum value edouard@3241: edouard@3241: edouard@3241: Value to display edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: CustomHtml widget allows insertion of HTML code in a svg:foreignObject. edouard@3241: edouard@3241: Widget content is replaced by foreignObject. HTML code is obtained from edouard@3241: edouard@3241: "code" labeled text content. HTML insert position and size is given with edouard@3241: edouard@3241: "container" labeled element. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Custom HTML insert edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: If Display widget is a svg:text element, then text content is replaced by edouard@3241: edouard@3241: value of given variables, space separated. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Otherwise, if Display widget is a group containing a svg:text element edouard@3241: edouard@3241: labelled "format", then text content is replaced by printf-like formated edouard@3241: edouard@3241: string. In other words, if "format" labeled text is "%d %s %f", then 3 edouard@3241: edouard@3241: variables paths are expected : HMI_IN, HMI_STRING and HMI_REAL. edouard@3241: edouard@3241: edouard@3241: edouard@3241: In case Display widget is a svg::text element, it is also possible to give edouard@3241: edouard@3241: format string as first argument. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Printf-like formated text display edouard@3241: edouard@3241: edouard@3241: printf-like format string when not given as svg:text edouard@3241: edouard@3241: edouard@3241: variables to be displayed edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: DropDown widget let user select an entry in a list of texts, given as edouard@3241: edouard@3241: arguments. Single variable path is index of selection. edouard@3241: edouard@3241: edouard@3241: edouard@3355: It needs "text" (svg:text or svg:use referring to svg:text), edouard@3355: edouard@3355: "box" (svg:rect), "button" (svg:*), and "highlight" (svg:rect) edouard@3355: edouard@3355: labeled elements. edouard@3241: edouard@3241: edouard@3241: edouard@3241: When user clicks on "button", "text" is duplicated to display enties in the edouard@3241: edouard@3241: limit of available space in page, and "box" is extended to contain all edouard@3241: edouard@3241: texts. "highlight" is moved over pre-selected entry. edouard@3241: edouard@3241: edouard@3241: edouard@3355: When only one argument is given and argment contains "#langs" then list of edouard@3355: edouard@3355: texts is automatically set to the human-readable list of supported edouard@3355: edouard@3355: languages by this HMI. edouard@3355: edouard@3355: edouard@3355: edouard@3355: If "text" labeled element is of type svg:use and refers to a svg:text edouard@3355: edouard@3355: element part of a TextList widget, no argument is expected. In that case edouard@3355: edouard@3355: list of texts is set to TextList content. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Let user select text entry in a drop-down menu edouard@3241: edouard@3241: edouard@3241: drop-down menu entries edouard@3241: edouard@3241: edouard@3241: selection index edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: ForEach widget is used to span a small set of widget over a larger set of edouard@3241: edouard@3241: repeated HMI_NODEs. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Idea is somewhat similar to relative page, but it all happens inside the edouard@3241: edouard@3241: ForEach widget, no page involved. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Together with relative Jump widgets it can be used to build a menu to reach edouard@3241: edouard@3241: relative pages covering many identical HMI_NODES siblings. edouard@3241: edouard@3241: edouard@3241: edouard@3241: ForEach widget takes a HMI_CLASS name as argument and a HMI_NODE path as edouard@3241: edouard@3241: variable. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Direct sub-elements can be either groups of widget to be spanned, labeled edouard@3241: edouard@3241: "ClassName:offset", or buttons to control the spanning, labeled edouard@3241: edouard@3241: "ClassName:+/-number". edouard@3241: edouard@3241: edouard@3241: edouard@3241: span widgets over a set of repeated HMI_NODEs edouard@3241: edouard@3241: edouard@3241: HMI_CLASS name edouard@3241: edouard@3241: edouard@3241: where to find HMI_NODEs whose HMI_CLASS is class_name edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Input widget takes one variable path, and displays current value in edouard@3241: edouard@3241: optional "value" labeled sub-element. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Click on optional "edit" labeled element opens keypad to edit value. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Operation on current value is performed when click on sub-elements with edouard@3241: edouard@3241: label starting with '=', '+' or '-' sign. Value after sign is used as edouard@3241: edouard@3241: operand. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Input field with predefined operation buttons edouard@3241: edouard@3241: edouard@3241: optional printf-like format edouard@3241: edouard@3241: edouard@3241: single variable to edit edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Send given variables as POST to http URL argument, spread returned JSON in edouard@3241: edouard@3241: SVG sub-elements of "data" labeled element. edouard@3241: edouard@3241: edouard@3241: Edouard@3387: Documentation to be written. see svghmi exemple. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Http POST variables, spread JSON back edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: single variable to edit edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Jump widget brings focus to a different page. Mandatory single argument edouard@3241: edouard@3241: gives name of the page. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Optional single path is used as new reference when jumping to a relative edouard@3241: edouard@3241: page, it must point to a HMI_NODE. edouard@3241: edouard@3241: edouard@3241: edouard@3241: "active"+"inactive" labeled elements can be provided and reflect current edouard@3241: edouard@3241: page being shown. edouard@3241: edouard@3241: edouard@3241: edouard@3241: "disabled" labeled element, if provided, is shown instead of "active" or edouard@3241: edouard@3241: "inactive" widget when pointed HMI_NODE is null. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Jump to given page edouard@3241: edouard@3241: edouard@3241: name of page to jump to edouard@3241: edouard@3241: edouard@3241: reference for relative jump edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Keypad - to be written edouard@3241: edouard@3241: edouard@3241: edouard@3241: Keypad edouard@3241: edouard@3241: edouard@3241: keypad can input those types edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3355: edouard@3355: List widget is a svg:group, list items are labeled elements edouard@3355: edouard@3355: in that group. edouard@3355: edouard@3355: edouard@3355: edouard@3355: To use a List, clone (svg:use) one of the items inside the widget that edouard@3355: edouard@3355: expects a List. edouard@3355: edouard@3355: edouard@3355: edouard@3355: Positions of items are relative to each other, and they must all be in the edouard@3355: edouard@3355: same place. In order to make editing easier it is therefore recommanded to edouard@3355: edouard@3355: make stacked clones of svg elements spread nearby the list. edouard@3355: edouard@3355: edouard@3355: edouard@3355: A named list of named graphical elements edouard@3355: edouard@3355: edouard@3241: Edouard@3387: Edouard@3387: Edouard@3387: Edouard@3387: Edouard@3387: Edouard@3387: ListSwitch widget displays one item of an HMI:List depending on value of Edouard@3387: Edouard@3387: given variable. Main element of the widget must be a clone of the list or Edouard@3387: Edouard@3387: of an item of that list. Edouard@3387: Edouard@3387: Edouard@3387: Edouard@3387: Given variable's current value is compared to list items Edouard@3387: Edouard@3387: label. For exemple if given variable type Edouard@3387: Edouard@3387: is HMI_INT and value is 1, then item with label '1' will be displayed. Edouard@3387: Edouard@3387: If matching variable of type HMI_STRING, then no quotes are needed. Edouard@3387: Edouard@3387: For exemple, 'hello' match HMI_STRING 'hello'. Edouard@3387: Edouard@3387: Edouard@3387: Edouard@3387: Displays item of an HMI:List whose label matches value. Edouard@3387: Edouard@3387: Edouard@3387: value to compare to labels Edouard@3387: Edouard@3387: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Meter widget moves the end of "needle" labeled path along "range" labeled edouard@3241: edouard@3241: path, according to value of the single accepted variable. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Needle is reduced to a single segment. If "min" a "max" labeled texts edouard@3241: edouard@3241: are provided, or if first and second argument are given, then they are used edouard@3241: edouard@3241: as respective minimum and maximum value. Otherwise, value is expected to be edouard@3241: edouard@3241: in between 0 and 100. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Moves "needle" along "range" edouard@3241: edouard@3241: edouard@3241: minimum value edouard@3241: edouard@3241: edouard@3241: maximum value edouard@3241: edouard@3241: edouard@3241: Value to display edouard@3241: edouard@3241: edouard@3358: edouard@3358: edouard@3358: edouard@3358: edouard@3358: edouard@3358: PathSlider - edouard@3358: edouard@3358: edouard@3358: edouard@3358: Slide an SVG element along a path by dragging it edouard@3358: edouard@3358: edouard@3358: value edouard@3358: edouard@3358: edouard@3358: min edouard@3358: edouard@3358: edouard@3358: max edouard@3358: edouard@3358: edouard@3358: minimum value edouard@3358: edouard@3358: edouard@3358: maximum value edouard@3358: edouard@3358: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3358: ScrollBar - svg:rect based scrollbar edouard@3241: edouard@3241: edouard@3241: edouard@3241: ScrollBar edouard@3241: edouard@3241: edouard@3241: value edouard@3241: edouard@3241: edouard@3241: range edouard@3241: edouard@3241: edouard@3241: visible edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Slider - DEPRECATED - use ScrollBar or PathSlider instead edouard@3241: edouard@3241: edouard@3241: edouard@3241: Slider - DEPRECATED - use ScrollBar instead edouard@3241: edouard@3241: edouard@3241: value edouard@3241: edouard@3241: edouard@3241: range edouard@3241: edouard@3241: edouard@3241: visible edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Switch widget hides all subelements whose label do not match given edouard@3241: edouard@3241: variable current value representation. For exemple if given variable type edouard@3241: edouard@3241: is HMI_INT and value is 1, then elements with label '1' will be displayed. edouard@3241: edouard@3241: Label can have comments, so '1#some comment' would also match. If matching edouard@3241: edouard@3241: variable of type HMI_STRING, then double quotes must be used. For exemple, edouard@3241: edouard@3241: '"hello"' or '"hello"#another comment' match HMI_STRING 'hello'. edouard@3241: edouard@3241: edouard@3241: Edouard@3387: Show elements whose label matches value. edouard@3241: edouard@3241: edouard@3241: value to compare to labels edouard@3241: edouard@3241: edouard@3355: edouard@3355: edouard@3355: edouard@3355: edouard@3355: edouard@3355: TextList widget is a svg:group, list items are labeled elements edouard@3355: edouard@3355: in that group. edouard@3355: edouard@3355: edouard@3355: edouard@3355: To use a TextList, clone (svg:use) one of the items inside the widget edouard@3355: edouard@3355: that expects a TextList. edouard@3355: edouard@3355: edouard@3355: edouard@3355: In this list, (translated) text content is what matters. Nevertheless edouard@3355: edouard@3355: text style of the cloned item will be applied in client widget. edouard@3355: edouard@3355: edouard@3355: edouard@3355: A named list of ordered texts edouard@3355: edouard@3355: edouard@3355: edouard@3355: edouard@3355: edouard@3355: edouard@3355: edouard@3355: edouard@3355: TextStyleList widget is a svg:group, list items are labeled elements edouard@3355: edouard@3355: in that group. edouard@3355: edouard@3355: edouard@3355: edouard@3355: To use a TextStyleList, clone (svg:use) one of the items inside the widget edouard@3355: edouard@3355: that expects a TextStyleList. edouard@3355: edouard@3355: edouard@3355: edouard@3355: In this list, only style matters. Text content is ignored. edouard@3355: edouard@3355: edouard@3355: edouard@3355: A named list of named texts edouard@3355: edouard@3355: edouard@3355: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: Button widget takes one boolean variable path, and reflect current true edouard@3241: edouard@3241: or false value by showing "active" or "inactive" labeled element edouard@3241: edouard@3241: respectively. Clicking or touching button toggles variable. edouard@3241: edouard@3241: edouard@3241: edouard@3241: Toggle button reflecting given boolean variable edouard@3241: edouard@3241: edouard@3241: Boolean variable edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3235: edouard@3241: edouard@3241: edouard@3241: edouard@3241: edouard@3235: edouard@3241: edouard@3235: edouard@3235: edouard@3235: