SVGHMI: allow multiple variables and formatting in Display widget. Formatting is printf style and given as first argument. If no formating is given as widget argument, space separated. svghmi
authorEdouard Tisserant <edouard.tisserant@gmail.com>
Thu, 06 Aug 2020 15:01:01 +0200
branchsvghmi
changeset 3008 dabad70db1bf
parent 3007 360300a8b995
child 3017 15e2df3e5610
child 3018 22b969b409b0
SVGHMI: allow multiple variables and formatting in Display widget. Formatting is printf style and given as first argument. If no formating is given as widget argument, space separated.
svghmi/gen_index_xhtml.xslt
svghmi/widget_display.ysl2
tests/svghmi/svghmi_0@svghmi/svghmi.svg
--- a/svghmi/gen_index_xhtml.xslt	Thu Aug 06 14:59:04 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Thu Aug 06 15:01:01 2020 +0200
@@ -569,8 +569,8 @@
     <xsl:text>
 </xsl:text>
   </xsl:template>
-  <declarations:page-desc/>
-  <xsl:template match="declarations:page-desc">
+  <definitions:page-desc/>
+  <xsl:template match="definitions:page-desc">
     <xsl:text>
 </xsl:text>
     <xsl:text>/* </xsl:text>
@@ -1096,8 +1096,8 @@
     <xsl:text>
 </xsl:text>
   </xsl:template>
-  <preamble:hmi-classes/>
-  <xsl:template match="preamble:hmi-classes">
+  <declarations:hmi-classes/>
+  <xsl:template match="declarations:hmi-classes">
     <xsl:text>
 </xsl:text>
     <xsl:text>/* </xsl:text>
@@ -1125,8 +1125,8 @@
   </xsl:template>
   <xsl:variable name="excluded_types" select="str:split('Page Lang')"/>
   <xsl:variable name="excluded_ids" select="$parsed_widgets/widget[not(@type = $excluded_types)]/@id"/>
-  <preamble:hmi-elements/>
-  <xsl:template match="preamble:hmi-elements">
+  <declarations:hmi-elements/>
+  <xsl:template match="declarations:hmi-elements">
     <xsl:text>
 </xsl:text>
     <xsl:text>/* </xsl:text>
@@ -1426,9 +1426,13 @@
 </xsl:text>
     <xsl:text>    frequency = 5;
 </xsl:text>
-    <xsl:text>    dispatch(value) {
-</xsl:text>
-    <xsl:text>        this.element.textContent = String(value);
+    <xsl:text>    dispatch(value, oldval, index) {
+</xsl:text>
+    <xsl:text>        this.fields[index] = value;    
+</xsl:text>
+    <xsl:text>        console.log(value, index);
+</xsl:text>
+    <xsl:text>        this.element.textContent = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
@@ -1444,6 +1448,487 @@
         <xsl:text>" is not a svg::text element</xsl:text>
       </xsl:message>
     </xsl:if>
+    <xsl:text>    fields: [],
+</xsl:text>
+  </xsl:template>
+  <preamble:display/>
+  <xsl:template match="preamble:display">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* https://github.com/alexei/sprintf.js/blob/master/src/sprintf.js */
+</xsl:text>
+    <xsl:text>/* global window, exports, define */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>!function() {
+</xsl:text>
+    <xsl:text>    'use strict'
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    var re = {
+</xsl:text>
+    <xsl:text>        not_string: /[^s]/,
+</xsl:text>
+    <xsl:text>        not_bool: /[^t]/,
+</xsl:text>
+    <xsl:text>        not_type: /[^T]/,
+</xsl:text>
+    <xsl:text>        not_primitive: /[^v]/,
+</xsl:text>
+    <xsl:text>        number: /[diefg]/,
+</xsl:text>
+    <xsl:text>        numeric_arg: /[bcdiefguxX]/,
+</xsl:text>
+    <xsl:text>        json: /[j]/,
+</xsl:text>
+    <xsl:text>        not_json: /[^j]/,
+</xsl:text>
+    <xsl:text>        text: /^[^%]+/,
+</xsl:text>
+    <xsl:text>        modulo: /^%{2}/,
+</xsl:text>
+    <xsl:text>        placeholder: /^%(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,
+</xsl:text>
+    <xsl:text>        key: /^([a-z_][a-z_\d]*)/i,
+</xsl:text>
+    <xsl:text>        key_access: /^\.([a-z_][a-z_\d]*)/i,
+</xsl:text>
+    <xsl:text>        index_access: /^\[(\d+)\]/,
+</xsl:text>
+    <xsl:text>        sign: /^[+-]/
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function sprintf(key) {
+</xsl:text>
+    <xsl:text>        // </xsl:text>
+    <arguments/>
+    <xsl:text> is not an array, but should be fine for this call
+</xsl:text>
+    <xsl:text>        return sprintf_format(sprintf_parse(key), arguments)
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function vsprintf(fmt, argv) {
+</xsl:text>
+    <xsl:text>        return sprintf.apply(null, [fmt].concat(argv || []))
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function sprintf_format(parse_tree, argv) {
+</xsl:text>
+    <xsl:text>        var cursor = 1, tree_length = parse_tree.length, arg, output = '', i, k, ph, pad, pad_character, pad_length, is_positive, sign
+</xsl:text>
+    <xsl:text>        for (i = 0; i &lt; tree_length; i++) {
+</xsl:text>
+    <xsl:text>            if (typeof parse_tree[i] === 'string') {
+</xsl:text>
+    <xsl:text>                output += parse_tree[i]
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if (typeof parse_tree[i] === 'object') {
+</xsl:text>
+    <xsl:text>                ph = parse_tree[i] // convenience purposes only
+</xsl:text>
+    <xsl:text>                if (ph.keys) { // keyword argument
+</xsl:text>
+    <xsl:text>                    arg = argv[cursor]
+</xsl:text>
+    <xsl:text>                    for (k = 0; k &lt; ph.keys.length; k++) {
+</xsl:text>
+    <xsl:text>                        if (arg == undefined) {
+</xsl:text>
+    <xsl:text>                            throw new Error(sprintf('[sprintf] Cannot access property "%s" of undefined value "%s"', ph.keys[k], ph.keys[k-1]))
+</xsl:text>
+    <xsl:text>                        }
+</xsl:text>
+    <xsl:text>                        arg = arg[ph.keys[k]]
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else if (ph.param_no) { // positional argument (explicit)
+</xsl:text>
+    <xsl:text>                    arg = argv[ph.param_no]
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else { // positional argument (implicit)
+</xsl:text>
+    <xsl:text>                    arg = argv[cursor++]
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if (re.not_type.test(ph.type) &amp;&amp; re.not_primitive.test(ph.type) &amp;&amp; arg instanceof Function) {
+</xsl:text>
+    <xsl:text>                    arg = arg()
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if (re.numeric_arg.test(ph.type) &amp;&amp; (typeof arg !== 'number' &amp;&amp; isNaN(arg))) {
+</xsl:text>
+    <xsl:text>                    throw new TypeError(sprintf('[sprintf] expecting number but found %T', arg))
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if (re.number.test(ph.type)) {
+</xsl:text>
+    <xsl:text>                    is_positive = arg &gt;= 0
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                switch (ph.type) {
+</xsl:text>
+    <xsl:text>                    case 'b':
+</xsl:text>
+    <xsl:text>                        arg = parseInt(arg, 10).toString(2)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'c':
+</xsl:text>
+    <xsl:text>                        arg = String.fromCharCode(parseInt(arg, 10))
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'd':
+</xsl:text>
+    <xsl:text>                    case 'i':
+</xsl:text>
+    <xsl:text>                        arg = parseInt(arg, 10)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'j':
+</xsl:text>
+    <xsl:text>                        arg = JSON.stringify(arg, null, ph.width ? parseInt(ph.width) : 0)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'e':
+</xsl:text>
+    <xsl:text>                        arg = ph.precision ? parseFloat(arg).toExponential(ph.precision) : parseFloat(arg).toExponential()
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'f':
+</xsl:text>
+    <xsl:text>                        arg = ph.precision ? parseFloat(arg).toFixed(ph.precision) : parseFloat(arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'g':
+</xsl:text>
+    <xsl:text>                        arg = ph.precision ? String(Number(arg.toPrecision(ph.precision))) : parseFloat(arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'o':
+</xsl:text>
+    <xsl:text>                        arg = (parseInt(arg, 10) &gt;&gt;&gt; 0).toString(8)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 's':
+</xsl:text>
+    <xsl:text>                        arg = String(arg)
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 't':
+</xsl:text>
+    <xsl:text>                        arg = String(!!arg)
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'T':
+</xsl:text>
+    <xsl:text>                        arg = Object.prototype.toString.call(arg).slice(8, -1).toLowerCase()
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'u':
+</xsl:text>
+    <xsl:text>                        arg = parseInt(arg, 10) &gt;&gt;&gt; 0
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'v':
+</xsl:text>
+    <xsl:text>                        arg = arg.valueOf()
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'x':
+</xsl:text>
+    <xsl:text>                        arg = (parseInt(arg, 10) &gt;&gt;&gt; 0).toString(16)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'X':
+</xsl:text>
+    <xsl:text>                        arg = (parseInt(arg, 10) &gt;&gt;&gt; 0).toString(16).toUpperCase()
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                if (re.json.test(ph.type)) {
+</xsl:text>
+    <xsl:text>                    output += arg
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else {
+</xsl:text>
+    <xsl:text>                    if (re.number.test(ph.type) &amp;&amp; (!is_positive || ph.sign)) {
+</xsl:text>
+    <xsl:text>                        sign = is_positive ? '+' : '-'
+</xsl:text>
+    <xsl:text>                        arg = arg.toString().replace(re.sign, '')
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    else {
+</xsl:text>
+    <xsl:text>                        sign = ''
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    pad_character = ph.pad_char ? ph.pad_char === '0' ? '0' : ph.pad_char.charAt(1) : ' '
+</xsl:text>
+    <xsl:text>                    pad_length = ph.width - (sign + arg).length
+</xsl:text>
+    <xsl:text>                    pad = ph.width ? (pad_length &gt; 0 ? pad_character.repeat(pad_length) : '') : ''
+</xsl:text>
+    <xsl:text>                    output += ph.align ? sign + arg + pad : (pad_character === '0' ? sign + pad + arg : pad + sign + arg)
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        return output
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    var sprintf_cache = Object.create(null)
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function sprintf_parse(fmt) {
+</xsl:text>
+    <xsl:text>        if (sprintf_cache[fmt]) {
+</xsl:text>
+    <xsl:text>            return sprintf_cache[fmt]
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        var _fmt = fmt, match, parse_tree = [], arg_names = 0
+</xsl:text>
+    <xsl:text>        while (_fmt) {
+</xsl:text>
+    <xsl:text>            if ((match = re.text.exec(_fmt)) !== null) {
+</xsl:text>
+    <xsl:text>                parse_tree.push(match[0])
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if ((match = re.modulo.exec(_fmt)) !== null) {
+</xsl:text>
+    <xsl:text>                parse_tree.push('%')
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if ((match = re.placeholder.exec(_fmt)) !== null) {
+</xsl:text>
+    <xsl:text>                if (match[2]) {
+</xsl:text>
+    <xsl:text>                    arg_names |= 1
+</xsl:text>
+    <xsl:text>                    var field_list = [], replacement_field = match[2], field_match = []
+</xsl:text>
+    <xsl:text>                    if ((field_match = re.key.exec(replacement_field)) !== null) {
+</xsl:text>
+    <xsl:text>                        field_list.push(field_match[1])
+</xsl:text>
+    <xsl:text>                        while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
+</xsl:text>
+    <xsl:text>                            if ((field_match = re.key_access.exec(replacement_field)) !== null) {
+</xsl:text>
+    <xsl:text>                                field_list.push(field_match[1])
+</xsl:text>
+    <xsl:text>                            }
+</xsl:text>
+    <xsl:text>                            else if ((field_match = re.index_access.exec(replacement_field)) !== null) {
+</xsl:text>
+    <xsl:text>                                field_list.push(field_match[1])
+</xsl:text>
+    <xsl:text>                            }
+</xsl:text>
+    <xsl:text>                            else {
+</xsl:text>
+    <xsl:text>                                throw new SyntaxError('[sprintf] failed to parse named argument key')
+</xsl:text>
+    <xsl:text>                            }
+</xsl:text>
+    <xsl:text>                        }
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    else {
+</xsl:text>
+    <xsl:text>                        throw new SyntaxError('[sprintf] failed to parse named argument key')
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    match[2] = field_list
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else {
+</xsl:text>
+    <xsl:text>                    arg_names |= 2
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                if (arg_names === 3) {
+</xsl:text>
+    <xsl:text>                    throw new Error('[sprintf] mixing positional and named placeholders is not (yet) supported')
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                parse_tree.push(
+</xsl:text>
+    <xsl:text>                    {
+</xsl:text>
+    <xsl:text>                        placeholder: match[0],
+</xsl:text>
+    <xsl:text>                        param_no:    match[1],
+</xsl:text>
+    <xsl:text>                        keys:        match[2],
+</xsl:text>
+    <xsl:text>                        sign:        match[3],
+</xsl:text>
+    <xsl:text>                        pad_char:    match[4],
+</xsl:text>
+    <xsl:text>                        align:       match[5],
+</xsl:text>
+    <xsl:text>                        width:       match[6],
+</xsl:text>
+    <xsl:text>                        precision:   match[7],
+</xsl:text>
+    <xsl:text>                        type:        match[8]
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                )
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else {
+</xsl:text>
+    <xsl:text>                throw new SyntaxError('[sprintf] unexpected placeholder')
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            _fmt = _fmt.substring(match[0].length)
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        return sprintf_cache[fmt] = parse_tree
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    /**
+</xsl:text>
+    <xsl:text>     * export to either browser or node.js
+</xsl:text>
+    <xsl:text>     */
+</xsl:text>
+    <xsl:text>    /* eslint-disable quote-props */
+</xsl:text>
+    <xsl:text>    if (typeof exports !== 'undefined') {
+</xsl:text>
+    <xsl:text>        exports['sprintf'] = sprintf
+</xsl:text>
+    <xsl:text>        exports['vsprintf'] = vsprintf
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    if (typeof window !== 'undefined') {
+</xsl:text>
+    <xsl:text>        window['sprintf'] = sprintf
+</xsl:text>
+    <xsl:text>        window['vsprintf'] = vsprintf
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if (typeof define === 'function' &amp;&amp; define['amd']) {
+</xsl:text>
+    <xsl:text>            define(function() {
+</xsl:text>
+    <xsl:text>                return {
+</xsl:text>
+    <xsl:text>                    'sprintf': sprintf,
+</xsl:text>
+    <xsl:text>                    'vsprintf': vsprintf
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            })
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    /* eslint-enable quote-props */
+</xsl:text>
+    <xsl:text>}(); // eslint-disable-line    
+</xsl:text>
+    <xsl:text>
+</xsl:text>
   </xsl:template>
   <xsl:template mode="widget_defs" match="widget[@type='DropDown']">
     <xsl:param name="hmi_element"/>
--- a/svghmi/widget_display.ysl2	Thu Aug 06 14:59:04 2020 +0200
+++ b/svghmi/widget_display.ysl2	Thu Aug 06 15:01:01 2020 +0200
@@ -5,8 +5,10 @@
     ||
     class DisplayWidget extends Widget{
         frequency = 5;
-        dispatch(value) {
-            this.element.textContent = String(value);
+        dispatch(value, oldval, index) {
+            this.fields[index] = value;    
+            console.log(value, index);
+            this.element.textContent = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
         }
     }
     ||
@@ -15,4 +17,242 @@
     param "hmi_element";
     if "$hmi_element[not(self::svg:text)]"
         error > Display Widget id="«$hmi_element/@id»" is not a svg::text element
+
+    |     fields: [],
 }
+
+emit "preamble:display"
+||
+/* https://github.com/alexei/sprintf.js/blob/master/src/sprintf.js */
+/* global window, exports, define */
+
+!function() {
+    'use strict'
+
+    var re = {
+        not_string: /[^s]/,
+        not_bool: /[^t]/,
+        not_type: /[^T]/,
+        not_primitive: /[^v]/,
+        number: /[diefg]/,
+        numeric_arg: /[bcdiefguxX]/,
+        json: /[j]/,
+        not_json: /[^j]/,
+        text: /^[^\x25]+/,
+        modulo: /^\x25{2}/,
+        placeholder: /^\x25(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,
+        key: /^([a-z_][a-z_\d]*)/i,
+        key_access: /^\.([a-z_][a-z_\d]*)/i,
+        index_access: /^\[(\d+)\]/,
+        sign: /^[+-]/
+    }
+
+    function sprintf(key) {
+        // `arguments` is not an array, but should be fine for this call
+        return sprintf_format(sprintf_parse(key), arguments)
+    }
+
+    function vsprintf(fmt, argv) {
+        return sprintf.apply(null, [fmt].concat(argv || []))
+    }
+
+    function sprintf_format(parse_tree, argv) {
+        var cursor = 1, tree_length = parse_tree.length, arg, output = '', i, k, ph, pad, pad_character, pad_length, is_positive, sign
+        for (i = 0; i < tree_length; i++) {
+            if (typeof parse_tree[i] === 'string') {
+                output += parse_tree[i]
+            }
+            else if (typeof parse_tree[i] === 'object') {
+                ph = parse_tree[i] // convenience purposes only
+                if (ph.keys) { // keyword argument
+                    arg = argv[cursor]
+                    for (k = 0; k < ph.keys.length; k++) {
+                        if (arg == undefined) {
+                            throw new Error(sprintf('[sprintf] Cannot access property "%s" of undefined value "%s"', ph.keys[k], ph.keys[k-1]))
+                        }
+                        arg = arg[ph.keys[k]]
+                    }
+                }
+                else if (ph.param_no) { // positional argument (explicit)
+                    arg = argv[ph.param_no]
+                }
+                else { // positional argument (implicit)
+                    arg = argv[cursor++]
+                }
+
+                if (re.not_type.test(ph.type) && re.not_primitive.test(ph.type) && arg instanceof Function) {
+                    arg = arg()
+                }
+
+                if (re.numeric_arg.test(ph.type) && (typeof arg !== 'number' && isNaN(arg))) {
+                    throw new TypeError(sprintf('[sprintf] expecting number but found %T', arg))
+                }
+
+                if (re.number.test(ph.type)) {
+                    is_positive = arg >= 0
+                }
+
+                switch (ph.type) {
+                    case 'b':
+                        arg = parseInt(arg, 10).toString(2)
+                        break
+                    case 'c':
+                        arg = String.fromCharCode(parseInt(arg, 10))
+                        break
+                    case 'd':
+                    case 'i':
+                        arg = parseInt(arg, 10)
+                        break
+                    case 'j':
+                        arg = JSON.stringify(arg, null, ph.width ? parseInt(ph.width) : 0)
+                        break
+                    case 'e':
+                        arg = ph.precision ? parseFloat(arg).toExponential(ph.precision) : parseFloat(arg).toExponential()
+                        break
+                    case 'f':
+                        arg = ph.precision ? parseFloat(arg).toFixed(ph.precision) : parseFloat(arg)
+                        break
+                    case 'g':
+                        arg = ph.precision ? String(Number(arg.toPrecision(ph.precision))) : parseFloat(arg)
+                        break
+                    case 'o':
+                        arg = (parseInt(arg, 10) >>> 0).toString(8)
+                        break
+                    case 's':
+                        arg = String(arg)
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 't':
+                        arg = String(!!arg)
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 'T':
+                        arg = Object.prototype.toString.call(arg).slice(8, -1).toLowerCase()
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 'u':
+                        arg = parseInt(arg, 10) >>> 0
+                        break
+                    case 'v':
+                        arg = arg.valueOf()
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 'x':
+                        arg = (parseInt(arg, 10) >>> 0).toString(16)
+                        break
+                    case 'X':
+                        arg = (parseInt(arg, 10) >>> 0).toString(16).toUpperCase()
+                        break
+                }
+                if (re.json.test(ph.type)) {
+                    output += arg
+                }
+                else {
+                    if (re.number.test(ph.type) && (!is_positive || ph.sign)) {
+                        sign = is_positive ? '+' : '-'
+                        arg = arg.toString().replace(re.sign, '')
+                    }
+                    else {
+                        sign = ''
+                    }
+                    pad_character = ph.pad_char ? ph.pad_char === '0' ? '0' : ph.pad_char.charAt(1) : ' '
+                    pad_length = ph.width - (sign + arg).length
+                    pad = ph.width ? (pad_length > 0 ? pad_character.repeat(pad_length) : '') : ''
+                    output += ph.align ? sign + arg + pad : (pad_character === '0' ? sign + pad + arg : pad + sign + arg)
+                }
+            }
+        }
+        return output
+    }
+
+    var sprintf_cache = Object.create(null)
+
+    function sprintf_parse(fmt) {
+        if (sprintf_cache[fmt]) {
+            return sprintf_cache[fmt]
+        }
+
+        var _fmt = fmt, match, parse_tree = [], arg_names = 0
+        while (_fmt) {
+            if ((match = re.text.exec(_fmt)) !== null) {
+                parse_tree.push(match[0])
+            }
+            else if ((match = re.modulo.exec(_fmt)) !== null) {
+                parse_tree.push('%')
+            }
+            else if ((match = re.placeholder.exec(_fmt)) !== null) {
+                if (match[2]) {
+                    arg_names |= 1
+                    var field_list = [], replacement_field = match[2], field_match = []
+                    if ((field_match = re.key.exec(replacement_field)) !== null) {
+                        field_list.push(field_match[1])
+                        while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
+                            if ((field_match = re.key_access.exec(replacement_field)) !== null) {
+                                field_list.push(field_match[1])
+                            }
+                            else if ((field_match = re.index_access.exec(replacement_field)) !== null) {
+                                field_list.push(field_match[1])
+                            }
+                            else {
+                                throw new SyntaxError('[sprintf] failed to parse named argument key')
+                            }
+                        }
+                    }
+                    else {
+                        throw new SyntaxError('[sprintf] failed to parse named argument key')
+                    }
+                    match[2] = field_list
+                }
+                else {
+                    arg_names |= 2
+                }
+                if (arg_names === 3) {
+                    throw new Error('[sprintf] mixing positional and named placeholders is not (yet) supported')
+                }
+
+                parse_tree.push(
+                    {
+                        placeholder: match[0],
+                        param_no:    match[1],
+                        keys:        match[2],
+                        sign:        match[3],
+                        pad_char:    match[4],
+                        align:       match[5],
+                        width:       match[6],
+                        precision:   match[7],
+                        type:        match[8]
+                    }
+                )
+            }
+            else {
+                throw new SyntaxError('[sprintf] unexpected placeholder')
+            }
+            _fmt = _fmt.substring(match[0].length)
+        }
+        return sprintf_cache[fmt] = parse_tree
+    }
+
+    /**
+     * export to either browser or node.js
+     */
+    /* eslint-disable quote-props */
+    if (typeof exports !== 'undefined') {
+        exports['sprintf'] = sprintf
+        exports['vsprintf'] = vsprintf
+    }
+    if (typeof window !== 'undefined') {
+        window['sprintf'] = sprintf
+        window['vsprintf'] = vsprintf
+
+        if (typeof define === 'function' && define['amd']) {
+            define(function() {
+                return {
+                    'sprintf': sprintf,
+                    'vsprintf': vsprintf
+                }
+            })
+        }
+    }
+    /* eslint-enable quote-props */
+}(); // eslint-disable-line    
+||
--- a/tests/svghmi/svghmi_0@svghmi/svghmi.svg	Thu Aug 06 14:59:04 2020 +0200
+++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg	Thu Aug 06 15:01:01 2020 +0200
@@ -167,16 +167,16 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:document-units="px"
-     inkscape:current-layer="g6077"
+     inkscape:current-layer="hmi0"
      showgrid="false"
      units="px"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="1970.3359"
-     inkscape:cy="368.15797"
+     inkscape:zoom="0.7071068"
+     inkscape:cx="543.82641"
+     inkscape:cy="218.7845"
      inkscape:window-width="2419"
      inkscape:window-height="1266"
-     inkscape:window-x="1197"
-     inkscape:window-y="563"
+     inkscape:window-x="1405"
+     inkscape:window-y="37"
      inkscape:window-maximized="0"
      showguides="true"
      inkscape:guide-bbox="true" />
@@ -4200,4 +4200,28 @@
            sodipodi:role="line">-1</tspan></text>
     </g>
   </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:59.01374435px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#82ff77;fill-opacity:1;stroke:none;stroke-width:0.3688359px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="729.9715"
+     y="539.24927"
+     id="text995-6"
+     inkscape:label="HMI:Display:Ploc %d (%d) grmbl !@/PUMP0/PRESSURE@/PUMP0/SLOTH"><tspan
+       sodipodi:role="line"
+       id="tspan993-3"
+       x="729.9715"
+       y="539.24927"
+       style="text-align:center;text-anchor:middle;fill:#82ff77;fill-opacity:1;stroke-width:0.3688359px">8888</tspan></text>
+  <text
+     id="text831-1"
+     y="477.76758"
+     x="621.62634"
+     style="font-style:normal;font-weight:normal;font-size:25.4761734px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"
+     inkscape:label="actual_label"><tspan
+       y="477.76758"
+       x="621.62634"
+       id="tspan829-7"
+       sodipodi:role="line"
+       style="stroke-width:0.63690436px">Multiple variables</tspan></text>
 </svg>