beremiz

SVGHMI: More infrastructure for editing values with a keypad.
svghmi
2020-04-02, Edouard Tisserant
211d6a185e31
Parents 1a1caf71b1cc
Children d320367eb2ad
SVGHMI: More infrastructure for editing values with a keypad.
6 files changed, 51 insertions(+), 8 deletions(-)
  • +5 -2
    svghmi/detachable_pages.ysl2
  • +10 -0
    svghmi/gen_index_xhtml.ysl2
  • +3 -1
    svghmi/hmi_tree.ysl2
  • +17 -0
    svghmi/svghmi.js
  • +14 -5
    svghmi/widget_input.ysl2
  • +2 -0
    svghmi/widget_keypad.ysl2
    • --- a/svghmi/detachable_pages.ysl2 Thu Apr 02 09:38:53 2020 +0200
    +++ b/svghmi/detachable_pages.ysl2 Thu Apr 02 14:03:38 2020 +0200
    @@ -7,6 +7,9 @@
    const "hmi_pages_descs", "$parsed_widgets/widget[@type = 'Page']";
    const "hmi_pages", "$hmi_elements[@id = $hmi_pages_descs/@id]";
    +const "keypads_descs", "$parsed_widgets/widget[@type = 'Keypad']";
    +const "keypads", "$hmi_elements[@id = $keypads_descs/@id]";
    +
    const "default_page" choose {
    when "count($hmi_pages) > 1" {
    choose {
    @@ -58,7 +61,7 @@
    const "required_elements",
    """//svg:defs/descendant-or-self::svg:*
    - | func:required_elements($hmi_pages)/ancestor-or-self::svg:*""";
    + | func:required_elements($hmi_pages | $keypads)/ancestor-or-self::svg:*""";
    const "discardable_elements", "//svg:*[not(@id = $required_elements/@id)]";
    @@ -88,7 +91,7 @@
    }
    // Avoid nested detachables
    -const "_detachable_elements", "func:detachable_elements($hmi_pages)";
    +const "_detachable_elements", "func:detachable_elements($hmi_pages | $keypads)";
    const "detachable_elements", "$_detachable_elements[not(ancestor::*/@id = $_detachable_elements/@id)]";
    const "forEach_widgets_ids", "$parsed_widgets/widget[@type = 'ForEach']/@id";
    --- a/svghmi/gen_index_xhtml.ysl2 Thu Apr 02 09:38:53 2020 +0200
    +++ b/svghmi/gen_index_xhtml.ysl2 Thu Apr 02 14:03:38 2020 +0200
    @@ -109,6 +109,16 @@
    apply "$hmi_pages", mode="page_desc";
    | }
    + | var keypads = {
    + foreach "$keypads_descs"{
    + const "keypad_id","@id";
    + foreach "arg"{
    + | "«@value»":"«$keypad_id»",
    + }
    + }
    + | }
    +
    +
    |
    | var default_page = "«$default_page»";
    | var svg_root = id("«/svg:svg/@id»");
    --- a/svghmi/hmi_tree.ysl2 Thu Apr 02 09:38:53 2020 +0200
    +++ b/svghmi/hmi_tree.ysl2 Thu Apr 02 14:03:38 2020 +0200
    @@ -93,8 +93,10 @@
    attrib "value" > «.»
    const "path", ".";
    const "item", "$indexed_hmitree/*[@hmipath = $path]";
    - if "count($item) = 1"
    + if "count($item) = 1" {
    attrib "index" > «$item/@index»
    + attrib "type" > «local-name($item)»
    + }
    }
    }
    }
    --- a/svghmi/svghmi.js Thu Apr 02 09:38:53 2020 +0200
    +++ b/svghmi/svghmi.js Thu Apr 02 14:03:38 2020 +0200
    @@ -239,6 +239,13 @@
    cache[index] = value;
    };
    +function apply_hmi_value(index, new_val) {
    + let old_val = cache[index]
    + if(new_val != undefined && old_val != new_val)
    + send_hmi_value(index, new_val);
    + return new_val;
    +}
    +
    function change_hmi_value(index, opstr) {
    let op = opstr[0];
    let given_val = opstr.slice(1);
    @@ -460,3 +467,13 @@
    alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+".");
    };
    +
    +var edit_callback;
    +function edit_value(path, valuetype, callback, initial) {
    +
    + keypad = keypads[valuetype];
    + console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypad);
    + edit_callback = callback;
    +
    +};
    +
    --- a/svghmi/widget_input.ysl2 Thu Apr 02 09:38:53 2020 +0200
    +++ b/svghmi/widget_input.ysl2 Thu Apr 02 14:03:38 2020 +0200
    @@ -9,9 +9,9 @@
    value "$value_elt";
    if "$have_value"
    | frequency: 5,
    -
    + | last_val: undefined,
    | dispatch: function(value) {
    -
    + | this.last_val = value;
    if "$have_value"
    | this.value_elt.textContent = String(value);
    @@ -19,9 +19,7 @@
    const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";
    | init: function() {
    if "$edit_elt_id" {
    - | id("«$edit_elt_id»").addEventListener(
    - | "click",
    - | evt => alert('XXX TODO : Edit value'));
    + | id("«$edit_elt_id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_edit_click()");
    }
    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
    | id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_op_click('«func:escape_quotes(@inkscape:label)»')");
    @@ -34,4 +32,15 @@
    /* TODO gray out value until refreshed */
    }
    | },
    + | on_edit_click: function(opstr) {
    + | edit_value("«path/@value»", "«path/@type»", this.edit_callback, this.last_val);
    + | },
    +
    + | edit_callback: function(new_val) {
    + | apply_hmi_value(this.indexes[0], opstr);
    + if "$have_value"{
    + | this.value_elt.textContent = String(new_val);
    + /* TODO gray out value until refreshed */
    + }
    + | },
    }
    --- a/svghmi/widget_keypad.ysl2 Thu Apr 02 09:38:53 2020 +0200
    +++ b/svghmi/widget_keypad.ysl2 Thu Apr 02 14:03:38 2020 +0200
    @@ -1,4 +1,6 @@
    // widget_keypad.ysl2
    template "widget[@type='Keypad']", mode="widget_defs" {
    + | init: function() {
    + | },
    }