svghmi/widget_dropdown.ysl2
author Edouard Tisserant
Thu, 09 Apr 2020 09:52:34 +0200
branchsvghmi
changeset 2922 ddce4ebdf010
child 2923 5ec1c07ce582
permissions -rw-r--r--
SVGHMI: intermediate commit while working on dropdown widget.

Here is the plan :
HMI:DropDown : svg:g of svg:rect + svg:text
rect is extended to match content size, and if content size exceed page size, user can scroll
HMI:List : either HMI:List:ListName as svg:text, one tspan per list entry
or HMI:List:ListName:Foreach:HMI_CLASS:SUB/PATH/TO/VALUE@/ROOT/PATH as empty svg:g
2922
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     1
// widget_dropdown.ysl2
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     2
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     3
template "widget[@type='DropDown']", mode="widget_defs" {
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     4
    param "hmi_element";
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     5
    labels("text box");
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     6
    |     dispatch: function(value) {
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     7
        /* TODO : get selection text by index */
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     8
    |         this.text_elt.textContent = String(value);
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
     9
    |     },
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    10
    |     init: function() {
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    11
    |         this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click()");
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    12
    |     },
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    13
    const "box_elt","$hmi_element/*[@inkscape:label='box'][1]";
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    14
    const "g", "$geometry[@Id = $box_elt/@id]";
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    15
    |     original_box: [«$g/@x», «$g/@y», «$g/@w», «$g/@h»],
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    16
    |     on_click: function() {
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    17
    |         let [x,y,w,h] = page_desc[current_visible_page].bbox;
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    18
    |         let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    19
    |         let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    20
    |         let l = DOMMatrix.fromMatrix(this.box_elt.getScreenCTM());
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    21
    |         console.log(p, k.transformPoint(p), l.transformPoint(p));
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    22
    |     },
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    23
}
ddce4ebdf010 SVGHMI: intermediate commit while working on dropdown widget.
Edouard Tisserant
parents:
diff changeset
    24