beremiz

SVGHMI: Jump widget: switch to class based declaraion, and add some TODO comments to prepare for jump to relative page being selected through a DropDown widget.
svghmi
2021-01-05, Edouard Tisserant
ee0704cc6dc8
Parents 70b728fff3c9
Children 6c39d718e8cb079419e7228d
SVGHMI: Jump widget: switch to class based declaraion, and add some TODO comments to prepare for jump to relative page being selected through a DropDown widget.
3 files changed, 67 insertions(+), 73 deletions(-)
  • +0 -3
    svghmi/detachable_pages.ysl2
  • +2 -1
    svghmi/widget_dropdown.ysl2
  • +65 -69
    svghmi/widget_jump.ysl2
    • --- a/svghmi/detachable_pages.ysl2 Mon Jan 04 13:57:11 2021 +0100
    +++ b/svghmi/detachable_pages.ysl2 Tue Jan 05 01:23:45 2021 +0100
    @@ -150,9 +150,6 @@
    | ],
    | jumps: [
    foreach "$parsed_widgets/widget[@id = $all_page_widgets/@id and @type='Jump']" {
    - const "_id","@id";
    - const "opts" call "jump_widget_activity" with "hmi_element", "$hmi_elements[@id=$_id]";
    - if "string-length($opts)>0"
    | hmi_widgets["«@id»"]`if "position()!=last()" > ,`
    }
    | ],
    --- a/svghmi/widget_dropdown.ysl2 Mon Jan 04 13:57:11 2021 +0100
    +++ b/svghmi/widget_dropdown.ysl2 Tue Jan 05 01:23:45 2021 +0100
    @@ -335,9 +335,10 @@
    template "widget[@type='DropDown']", mode="widget_defs" {
    param "hmi_element";
    labels("text box button highlight");
    + // It is assumed that list content conforms to Array interface.
    ||
    - // It is assumed that list content conforms to Array interface.
    content: [
    + /* TODO : Support HMI:List */
    ``foreach "arg" | "«@value»",
    ],
    --- a/svghmi/widget_jump.ysl2 Mon Jan 04 13:57:11 2021 +0100
    +++ b/svghmi/widget_jump.ysl2 Tue Jan 05 01:23:45 2021 +0100
    @@ -1,88 +1,83 @@
    // widget_jump.ysl2
    -function "jump_widget_activity" {
    - param "hmi_element";
    - optional_labels("active inactive");
    -}
    +template "widget[@type='Jump']", mode="widget_class"{
    +||
    + class JumpWidget extends Widget{
    +
    + activable = false;
    + active = false;
    + disabled = false;
    + frequency = 2;
    +
    + update_activity() {
    + if(this.active) {
    + /* show active */
    + this.active_elt.setAttribute("style", this.active_elt_style);
    + /* hide inactive */
    + this.inactive_elt.setAttribute("style", "display:none");
    + } else {
    + /* show inactive */
    + this.inactive_elt.setAttribute("style", this.inactive_elt_style);
    + /* hide active */
    + this.active_elt.setAttribute("style", "display:none");
    + }
    + }
    -function "jump_widget_disability" {
    - param "hmi_element";
    - optional_labels("disabled");
    + make_on_click() {
    + let that = this;
    + const name = this.args[0];
    + return function(evt){
    + /* TODO: suport path pointing to local variable whom value
    + would be an HMI_TREE index to jump to a relative page */
    + const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
    + switch_page(name, index);
    + }
    + }
    +
    + notify_page_change(page_name, index) {
    + if(this.activable) {
    + const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
    + const ref_name = this.args[0];
    + this.active = ((ref_name == undefined || ref_name == page_name) && index == ref_index);
    + this.update_activity();
    + }
    + }
    +
    + dispatch(value) {
    + this.disabled = !Number(value);
    + if(this.disabled) {
    + /* show disabled */
    + this.disabled_elt.setAttribute("style", this.disabled_elt_style);
    + /* hide inactive */
    + this.inactive_elt.setAttribute("style", "display:none");
    + /* hide active */
    + this.active_elt.setAttribute("style", "display:none");
    + } else {
    + /* hide disabled */
    + this.disabled_elt.setAttribute("style", "display:none");
    + this.update_activity();
    + }
    + }
    + }
    +||
    }
    template "widget[@type='Jump']", mode="widget_defs" {
    param "hmi_element";
    - const "activity" call "jump_widget_activity" with "hmi_element", "$hmi_element";
    + const "activity" optional_labels("active inactive");
    const "have_activity","string-length($activity)>0";
    value "$activity";
    - const "disability" call "jump_widget_disability" with "hmi_element", "$hmi_element";
    +
    + const "disability" optional_labels("disabled");
    const "have_disability","$have_activity and string-length($disability)>0";
    value "$disability";
    - if "$have_activity" {
    - | active: false,
    - if "$have_disability" {
    - | disabled: false,
    - | frequency: 2,
    - | dispatch: function(value) {
    - | this.disabled = !Number(value);
    - | this.update();
    - | },
    - }
    - | update: function(){
    - if "$have_disability" {
    - | if(this.disabled) {
    - | /* show disabled */
    - | this.disabled_elt.setAttribute("style", this.active_elt_style);
    - | /* hide inactive */
    - | this.inactive_elt.setAttribute("style", "display:none");
    - | /* hide active */
    - | this.active_elt.setAttribute("style", "display:none");
    - | } else {
    - | /* hide disabled */
    - | this.disabled_elt.setAttribute("style", "display:none");
    - }
    - | if(this.active) {
    - | /* show active */
    - | this.active_elt.setAttribute("style", this.active_elt_style);
    - | /* hide inactive */
    - | this.inactive_elt.setAttribute("style", "display:none");
    - | } else {
    - | /* show inactive */
    - | this.inactive_elt.setAttribute("style", this.inactive_elt_style);
    - | /* hide active */
    - | this.active_elt.setAttribute("style", "display:none");
    - | }
    - if "$have_disability" {
    - | }
    - }
    - | },
    - }
    - if "$have_activity" {
    - | notify_page_change: function(page_name, index){
    - | const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
    - | const ref_name = this.args[0];
    - | this.active =((ref_name == undefined || ref_name == page_name) && index == ref_index);
    - | this.update();
    - | },
    - }
    - | make_on_click(){
    - | let that = this;
    - | const name = this.args[0];
    - | return function(evt){
    - | const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
    - | switch_page(name, index);
    - | }
    - | },
    +
    | init: function() {
    - /* registering event this way does not "click" through svg:use
    - | this.element.onclick = evt => switch_page(this.args[0]);
    - event must be registered by adding attribute to element instead
    - TODO : generalize mouse event handling by global event capture + getElementsAtPoint()
    - */
    | this.element.onclick = this.make_on_click();
    if "$have_activity" {
    | this.active_elt_style = this.active_elt.getAttribute("style");
    | this.inactive_elt_style = this.inactive_elt.getAttribute("style");
    + | this.activable = true;
    }
    choose {
    when "$have_disability" {
    @@ -99,6 +94,7 @@
    param "page_desc";
    /* check that given path is compatible with page's reference path */
    if "path" {
    + /* TODO: suport local variable containing an HMI_TREE index to jump to a relative page */
    /* when no page name provided, check for same page */
    const "target_page_name" choose {
    when "arg" value "arg[1]/@value";