Edouard@2753: edouard@2940: Edouard@2798: Edouard@2879: Edouard@2877: Edouard@2790: Edouard@2790: Edouard@2790: HMI_PLC_STATUS Edouard@2790: Edouard@2790: Edouard@2790: HMI_CURRENT_PAGE Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2791: Edouard@2790: Edouard@2791: Edouard@2790: Edouard@2791: Edouard@2791: edouard@2890: edouard@2890: / edouard@2890: edouard@2890: edouard@2890: / edouard@2890: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: / Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: edouard@2886: edouard@2886: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: Edouard@2793: Edouard@2793: Edouard@2793: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: Edouard@2869: Edouard@2913: Edouard@2913: Edouard@2913: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: edouard@2886: Edouard@2885: edouard@2894: edouard@2894: edouard@2894: edouard@2894: edouard@2894: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: =" Edouard@2877: Edouard@2877: " Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: edouard@2940: edouard@2940: Edouard@2877: Raw HMI tree Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Indexed HMI tree Edouard@2877: Edouard@2877: edouard@2886: edouard@2886: edouard@2886: Parsed Widgets edouard@2886: edouard@2886: edouard@2886: Edouard@2877: Edouard@2877: edouard@2939: edouard@2940: Edouard@2877: ID, x, y, w, h Edouard@2877: Edouard@2879: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2887: Edouard@2887: Edouard@2913: Edouard@2913: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2887: Edouard@2877: Home Edouard@2877: Edouard@2877: Edouard@2877: No Home page defined! Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: No page defined! Edouard@2877: Edouard@2877: edouard@2886: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2913: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2913: Edouard@2877: Edouard@2888: Edouard@2888: Edouard@2888: Edouard@2877: edouard@2886: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2877: Edouard@2877: " Edouard@2877: Edouard@2877: ": { Edouard@2877: Edouard@2877: widget: hmi_widgets[" Edouard@2877: Edouard@2877: "], Edouard@2877: Edouard@2877: bbox: [ Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: ], Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Page id=" Edouard@2877: Edouard@2877: " : No match for path " Edouard@2877: Edouard@2877: " in HMI tree Edouard@2877: Edouard@2877: Edouard@2877: page_index: Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: relative_widgets: [ Edouard@2877: Edouard@2877: Edouard@2877: hmi_widgets[" Edouard@2877: Edouard@2877: "] Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: ], Edouard@2877: Edouard@2877: absolute_widgets: [ Edouard@2877: Edouard@2901: Edouard@2877: hmi_widgets[" Edouard@2877: Edouard@2877: "] Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: ], Edouard@2877: Edouard@2903: jumps: [ Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: hmi_widgets[" Edouard@2903: Edouard@2903: "] Edouard@2903: Edouard@2903: , Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: ], Edouard@2903: Edouard@2877: required_detachables: { Edouard@2877: Edouard@2877: Edouard@2877: " Edouard@2877: Edouard@2877: ": detachable_elements[" Edouard@2877: Edouard@2877: "] Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: } Edouard@2877: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2877: } Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2901: edouard@2939: edouard@2940: Edouard@2888: DETACHABLES: Edouard@2888: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2888: In Foreach: Edouard@2888: Edouard@2888: Edouard@2888: Edouard@2888: Edouard@2888: Edouard@2888: Edouard@2888: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: none Edouard@2877: Edouard@2877: Edouard@2877: 100vh Edouard@2877: Edouard@2877: Edouard@2877: 100vw Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: ViewBox settings other than X=0, Y=0 and Scale=1 are not supported Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: All units must be set to "px" in Inkscape's document properties Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: href Edouard@2877: Edouard@2877: Edouard@2877: width Edouard@2877: Edouard@2877: Edouard@2877: height Edouard@2877: Edouard@2877: Edouard@2877: x Edouard@2877: Edouard@2877: Edouard@2877: y Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: _ Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: edouard@2939: edouard@2940: edouard@2904: Unlinked : edouard@2904: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: edouard@2940: edouard@2940: edouard@2940: var hmi_widgets = { edouard@2940: edouard@2940: edouard@2940: } edouard@2940: edouard@2940: Edouard@2881: edouard@2886: Edouard@2881: Edouard@2881: " Edouard@2881: Edouard@2881: ": { Edouard@2881: Edouard@2881: type: " Edouard@2881: Edouard@2881: ", Edouard@2881: Edouard@2881: args: [ Edouard@2881: Edouard@2881: Edouard@2881: " Edouard@2881: Edouard@2798: " Edouard@2797: Edouard@2797: , Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2881: ], Edouard@2881: edouard@2889: offset: 0, edouard@2889: Edouard@2881: indexes: [ Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Widget Edouard@2881: Edouard@2881: id=" Edouard@2881: Edouard@2881: " : No match for path " Edouard@2881: Edouard@2881: " in HMI tree Edouard@2881: Edouard@2881: Edouard@2881: edouard@2890: Edouard@2881: Edouard@2893: /* Edouard@2893: Edouard@2893: */ Edouard@2881: Edouard@2881: , Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: edouard@2847: Edouard@2881: ], Edouard@2881: Edouard@2881: element: id(" Edouard@2881: Edouard@2881: "), Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: edouard@2889: edouard@2889: edouard@2889: Edouard@2881: } Edouard@2881: Edouard@2881: , Edouard@2881: Edouard@2881: Edouard@2793: Edouard@2792: edouard@2889: edouard@2889: sub: subscribe, edouard@2889: edouard@2889: unsub: unsubscribe, edouard@2889: Edouard@2897: apply_cache: widget_apply_cache, Edouard@2897: edouard@2889: edouard@2889: Edouard@2808: Edouard@2808: Edouard@2808: edouard@2920: Edouard@2800: Edouard@2834: Edouard@2808: Edouard@2807: edouard@2920: Edouard@2836: edouard@2920: Edouard@2836: edouard@2920: Edouard@2836: Edouard@2836: widget must have a Edouard@2836: Edouard@2836: element Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2852: Edouard@2807: edouard@2847: _elt: id(" edouard@2920: Edouard@2836: "), Edouard@2836: edouard@2920: edouard@2920: edouard@2920: edouard@2920: _sub: { edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: widget must have a edouard@2920: edouard@2920: / edouard@2920: edouard@2920: element edouard@2920: edouard@2920: edouard@2920: /* missing edouard@2920: edouard@2920: / edouard@2920: edouard@2920: element */ edouard@2920: edouard@2920: edouard@2920: edouard@2920: " edouard@2920: edouard@2920: ": id(" edouard@2920: edouard@2920: ") edouard@2920: edouard@2920: , edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: edouard@2920: }, edouard@2920: edouard@2920: Edouard@2836: Edouard@2836: Edouard@2807: Edouard@2808: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2902: Edouard@2902: Edouard@2902: on_click: function(evt) { Edouard@2902: Edouard@2902: if(jump_history.length > 1){ Edouard@2902: Edouard@2902: jump_history.pop(); Edouard@2902: Edouard@2902: let [page_name, index] = jump_history.pop(); Edouard@2902: Edouard@2902: switch_page(page_name, index); Edouard@2902: Edouard@2902: } Edouard@2902: Edouard@2902: }, Edouard@2902: Edouard@2902: init: function() { Edouard@2902: Edouard@2902: this.element.setAttribute("onclick", "hmi_widgets[' Edouard@2902: Edouard@2902: '].on_click(evt)"); Edouard@2902: Edouard@2902: }, Edouard@2902: Edouard@2902: edouard@2883: edouard@2883: edouard@2883: frequency: 5, edouard@2883: edouard@2883: dispatch: function(value) { edouard@2883: edouard@2883: edouard@2883: edouard@2883: this.element.textContent = String(value); edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: Display widget as a group not implemented edouard@2883: edouard@2883: edouard@2883: edouard@2883: }, edouard@2883: edouard@2883: Edouard@2922: Edouard@2922: Edouard@2922: Edouard@2922: Edouard@2922: edouard@2926: text box button Edouard@2922: Edouard@2922: Edouard@2922: dispatch: function(value) { Edouard@2922: edouard@2924: if(!this.opened) this.set_selection(value); Edouard@2922: Edouard@2922: }, Edouard@2922: Edouard@2922: init: function() { Edouard@2922: edouard@2926: this.button_elt.setAttribute("onclick", "hmi_widgets[' Edouard@2922: edouard@2926: '].on_button_click()"); Edouard@2922: Edouard@2936: // Save original size of rectangle edouard@2923: edouard@2923: this.box_bbox = this.box_elt.getBBox() edouard@2923: Edouard@2936: Edouard@2936: Edouard@2936: // Compute margins Edouard@2936: Edouard@2936: text_bbox = this.text_elt.getBBox() Edouard@2936: Edouard@2936: lmargin = text_bbox.x - this.box_bbox.x; Edouard@2936: Edouard@2936: tmargin = text_bbox.y - this.box_bbox.y; edouard@2923: edouard@2926: this.margins = [lmargin, tmargin].map(x => Math.max(x,0)); edouard@2923: Edouard@2936: Edouard@2936: Edouard@2936: // It is assumed that list content conforms to Array interface. edouard@2931: edouard@2931: this.content = [ edouard@2931: edouard@2931: edouard@2931: " edouard@2931: edouard@2931: ", edouard@2931: edouard@2931: edouard@2931: ]; edouard@2923: Edouard@2936: Edouard@2936: Edouard@2936: // Index of first visible element in the menu, when opened Edouard@2936: edouard@2924: this.menu_offset = 0; edouard@2923: Edouard@2936: Edouard@2936: Edouard@2936: // How mutch to lift the menu vertically so that it does not cross bottom border Edouard@2936: edouard@2923: this.lift = 0; edouard@2923: Edouard@2936: Edouard@2936: Edouard@2936: // Event handlers cannot be object method ('this' is unknown) Edouard@2936: Edouard@2936: // as a workaround, handler given to addEventListener is bound in advance. Edouard@2936: Edouard@2936: this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this); Edouard@2936: Edouard@2936: Edouard@2936: edouard@2924: this.opened = false; edouard@2924: Edouard@2936: }, Edouard@2936: Edouard@2936: // Called when a menu entry is clicked edouard@2924: edouard@2924: on_selection_click: function(selection) { edouard@2924: edouard@2926: this.close(); edouard@2926: edouard@2930: let orig = this.indexes[0]; edouard@2930: edouard@2930: let idx = this.offset ? orig - this.offset : orig; edouard@2930: edouard@2930: apply_hmi_value(idx, selection); edouard@2924: edouard@2923: }, Edouard@2922: edouard@2926: on_button_click: function() { edouard@2926: edouard@2926: this.open(); edouard@2926: edouard@2926: }, edouard@2926: Edouard@2936: on_backward_click: function(){ Edouard@2936: Edouard@2936: this.scroll(false); edouard@2926: edouard@2926: }, edouard@2926: edouard@2926: on_forward_click:function(){ edouard@2926: Edouard@2936: this.scroll(true); edouard@2926: edouard@2926: }, edouard@2926: edouard@2926: set_selection: function(value) { edouard@2926: edouard@2934: let display_str; edouard@2934: edouard@2934: if(value >= 0 && value < this.content.length){ edouard@2934: Edouard@2936: // if valid selection resolve content Edouard@2936: edouard@2934: display_str = this.content[value]; edouard@2934: edouard@2934: this.last_selection = value; edouard@2934: edouard@2934: } else { edouard@2934: Edouard@2936: // otherwise show problem Edouard@2936: edouard@2934: display_str = "?"+String(value)+"?"; edouard@2934: edouard@2934: } edouard@2934: Edouard@2936: // It is assumed that first span always stays, Edouard@2936: Edouard@2936: // and contains selection when menu is closed Edouard@2936: edouard@2934: this.text_elt.firstElementChild.textContent = display_str; edouard@2926: edouard@2926: }, edouard@2926: edouard@2926: grow_text: function(up_to) { edouard@2926: edouard@2926: let count = 1; edouard@2926: edouard@2926: let txt = this.text_elt; edouard@2926: edouard@2926: let first = txt.firstElementChild; edouard@2926: Edouard@2936: // Real world (pixels) boundaries of current page Edouard@2936: edouard@2926: let bounds = svg_root.getBoundingClientRect(); edouard@2926: edouard@2926: this.lift = 0; edouard@2926: edouard@2926: while(count < up_to) { edouard@2926: edouard@2926: let next = first.cloneNode(); edouard@2926: Edouard@2936: // relative line by line text flow instead of absolute y coordinate Edouard@2936: edouard@2926: next.removeAttribute("y"); edouard@2926: edouard@2926: next.setAttribute("dy", "1.1em"); edouard@2926: Edouard@2936: // default content to allow computing text element bbox Edouard@2936: edouard@2926: next.textContent = "..."; edouard@2926: Edouard@2936: // append new span to text element Edouard@2936: edouard@2926: txt.appendChild(next); edouard@2926: Edouard@2936: // now check if text extended by one row fits to page Edouard@2936: Edouard@2936: // FIXME : exclude margins to be more accurate on box size Edouard@2936: edouard@2926: let rect = txt.getBoundingClientRect(); edouard@2926: edouard@2926: if(rect.bottom > bounds.bottom){ edouard@2926: Edouard@2936: // in case of overflow at the bottom, lift up one row Edouard@2936: edouard@2926: let backup = first.getAttribute("dy"); edouard@2926: Edouard@2936: // apply lift asr a dy added too first span (y attrib stays) Edouard@2936: edouard@2926: first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em"); edouard@2926: edouard@2926: rect = txt.getBoundingClientRect(); edouard@2926: edouard@2926: if(rect.top > bounds.top){ edouard@2926: edouard@2926: this.lift += 1; edouard@2926: edouard@2926: } else { edouard@2926: Edouard@2936: // if it goes over the top, then backtrack Edouard@2936: Edouard@2936: // restore dy attribute on first span Edouard@2936: edouard@2926: if(backup) edouard@2926: edouard@2926: first.setAttribute("dy", backup); edouard@2926: edouard@2926: else edouard@2926: edouard@2926: first.removeAttribute("dy"); edouard@2926: Edouard@2936: // remove unwanted child Edouard@2936: edouard@2926: txt.removeChild(next); edouard@2926: edouard@2926: return count; edouard@2926: edouard@2926: } edouard@2926: edouard@2926: } edouard@2926: edouard@2926: count++; edouard@2924: edouard@2924: } edouard@2924: edouard@2924: return count; edouard@2924: edouard@2924: }, edouard@2924: edouard@2933: close_on_click_elsewhere: function(e) { edouard@2930: Edouard@2936: // inhibit events not targetting spans (menu items) edouard@2930: edouard@2933: if(e.target.parentNode !== this.text_elt){ edouard@2930: edouard@2930: e.stopPropagation(); edouard@2930: Edouard@2936: // close menu in case click is outside box Edouard@2936: edouard@2933: if(e.target !== this.box_elt) edouard@2933: edouard@2933: this.close(); edouard@2933: edouard@2933: } edouard@2933: edouard@2930: }, edouard@2930: edouard@2924: close: function(){ edouard@2924: Edouard@2936: // Stop hogging all click events Edouard@2936: Edouard@2936: svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true); Edouard@2936: Edouard@2936: // Restore position and sixe of widget elements edouard@2932: edouard@2924: this.reset_text(); edouard@2924: edouard@2924: this.reset_box(); edouard@2924: Edouard@2936: // Put the button back in place Edouard@2936: edouard@2926: this.element.appendChild(this.button_elt); edouard@2926: Edouard@2936: // Mark as closed (to allow dispatch) Edouard@2936: edouard@2932: this.opened = false; edouard@2932: Edouard@2936: // Dispatch last cached value Edouard@2936: edouard@2930: this.apply_cache(); edouard@2930: edouard@2924: }, edouard@2924: Edouard@2936: // Set text content when content is smaller than menu (no scrolling) Edouard@2936: edouard@2924: set_complete_text: function(){ edouard@2924: edouard@2924: let spans = this.text_elt.children; edouard@2924: edouard@2924: let c = 0; edouard@2924: edouard@2924: for(let item of this.content){ edouard@2924: edouard@2924: let span=spans[c]; edouard@2924: edouard@2924: span.textContent = item; edouard@2924: edouard@2924: span.setAttribute("onclick", "hmi_widgets[' edouard@2924: edouard@2924: '].on_selection_click("+c+")"); edouard@2924: edouard@2924: c++; edouard@2924: edouard@2924: } edouard@2924: edouard@2924: }, edouard@2924: Edouard@2936: // Move partial view : Edouard@2936: Edouard@2936: // false : upward, lower value Edouard@2936: Edouard@2936: // true : downward, higher value Edouard@2936: Edouard@2936: scroll: function(forward){ edouard@2925: edouard@2925: let contentlength = this.content.length; edouard@2925: edouard@2925: let spans = this.text_elt.children; edouard@2925: edouard@2925: let spanslength = spans.length; edouard@2925: Edouard@2936: // reduce accounted menu size according to jumps Edouard@2936: edouard@2925: if(this.menu_offset != 0) spanslength--; edouard@2925: edouard@2925: if(this.menu_offset < contentlength - 1) spanslength--; edouard@2925: edouard@2925: if(forward){ edouard@2925: edouard@2925: this.menu_offset = Math.min( edouard@2925: edouard@2925: contentlength - spans.length + 1, edouard@2925: edouard@2925: this.menu_offset + spanslength); edouard@2925: edouard@2925: }else{ edouard@2925: edouard@2925: this.menu_offset = Math.max( edouard@2925: edouard@2925: 0, edouard@2925: edouard@2925: this.menu_offset - spanslength); edouard@2925: edouard@2925: } edouard@2925: edouard@2925: console.log(this.menu_offset); edouard@2925: edouard@2925: this.set_partial_text(); edouard@2925: edouard@2925: }, edouard@2925: Edouard@2936: // Setup partial view text content Edouard@2936: Edouard@2936: // with jumps at first and last entry when appropriate Edouard@2936: edouard@2924: set_partial_text: function(){ edouard@2924: edouard@2924: let spans = this.text_elt.children; edouard@2924: edouard@2925: let contentlength = this.content.length; edouard@2925: edouard@2925: let spanslength = spans.length; edouard@2924: edouard@2924: let i = this.menu_offset, c = 0; edouard@2924: edouard@2925: while(c < spanslength){ edouard@2925: edouard@2925: let span=spans[c]; edouard@2924: Edouard@2936: // backward jump only present if not exactly at start Edouard@2936: edouard@2924: if(c == 0 && i != 0){ edouard@2924: edouard@2925: span.textContent = "↑ ↑ ↑"; edouard@2925: edouard@2925: span.setAttribute("onclick", "hmi_widgets[' edouard@2925: edouard@2925: '].on_backward_click()"); edouard@2925: Edouard@2936: // presence of forward jump when not right at the end Edouard@2936: edouard@2925: }else if(c == spanslength-1 && i < contentlength - 1){ edouard@2925: edouard@2925: span.textContent = "↓ ↓ ↓"; edouard@2925: edouard@2925: span.setAttribute("onclick", "hmi_widgets[' edouard@2925: edouard@2925: '].on_forward_click()"); edouard@2925: Edouard@2936: // otherwise normal content Edouard@2936: edouard@2925: }else{ edouard@2924: edouard@2924: span.textContent = this.content[i]; edouard@2924: edouard@2924: span.setAttribute("onclick", "hmi_widgets[' edouard@2924: edouard@2924: '].on_selection_click("+i+")"); edouard@2924: edouard@2924: i++; edouard@2924: edouard@2924: } edouard@2924: edouard@2924: c++; edouard@2924: edouard@2924: } edouard@2923: edouard@2923: }, edouard@2923: edouard@2923: open: function(){ edouard@2923: edouard@2924: let length = this.content.length; edouard@2924: Edouard@2936: // systematically reset text, to strip eventual whitespace spans Edouard@2936: edouard@2924: this.reset_text(); edouard@2924: Edouard@2936: // grow as much as needed or possible Edouard@2936: edouard@2924: let slots = this.grow_text(length); edouard@2924: Edouard@2936: // Depending on final size Edouard@2936: edouard@2924: if(slots == length) { edouard@2924: Edouard@2936: // show all at once Edouard@2936: edouard@2924: this.set_complete_text(); edouard@2923: edouard@2923: } else { edouard@2923: Edouard@2936: // eventualy align menu to current selection, compensating for lift edouard@2934: edouard@2934: let offset = this.last_selection - this.lift; edouard@2934: edouard@2934: if(offset > 0) edouard@2934: edouard@2934: this.menu_offset = Math.min(offset + 1, length - slots + 1); edouard@2934: edouard@2934: else edouard@2934: edouard@2934: this.menu_offset = 0; edouard@2934: Edouard@2936: // show surrounding values Edouard@2936: edouard@2924: this.set_partial_text(); edouard@2923: edouard@2923: } edouard@2923: Edouard@2936: // Now that text size is known, we can set the box around it Edouard@2936: edouard@2924: this.adjust_box_to_text(); edouard@2924: Edouard@2936: // Take button out until menu closed Edouard@2936: edouard@2926: this.element.removeChild(this.button_elt); edouard@2926: Edouard@2936: // Rise widget to top by moving it to last position among siblings Edouard@2936: edouard@2930: this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element)); edouard@2930: edouard@2930: // disable interaction with background edouard@2930: Edouard@2936: svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true); Edouard@2936: Edouard@2936: // mark as open edouard@2924: edouard@2924: this.opened = true; edouard@2924: edouard@2924: }, edouard@2924: Edouard@2936: // Put text element in normalized state Edouard@2936: edouard@2924: reset_text: function(){ edouard@2923: edouard@2923: let txt = this.text_elt; edouard@2923: edouard@2924: let first = txt.firstElementChild; edouard@2924: Edouard@2936: // remove attribute eventually added to first text line while opening Edouard@2936: edouard@2924: first.removeAttribute("onclick"); edouard@2924: edouard@2924: first.removeAttribute("dy"); edouard@2924: Edouard@2936: // keep only the first line of text Edouard@2936: edouard@2923: for(let span of Array.from(txt.children).slice(1)){ edouard@2923: edouard@2923: txt.removeChild(span) edouard@2923: edouard@2923: } edouard@2923: edouard@2923: }, edouard@2923: Edouard@2936: // Put rectangle element in saved original state Edouard@2936: edouard@2924: reset_box: function(){ edouard@2924: edouard@2924: let m = this.box_bbox; edouard@2924: edouard@2924: let b = this.box_elt; edouard@2924: edouard@2924: b.x.baseVal.value = m.x; edouard@2924: edouard@2924: b.y.baseVal.value = m.y; edouard@2924: edouard@2924: b.width.baseVal.value = m.width; edouard@2924: edouard@2924: b.height.baseVal.value = m.height; edouard@2924: edouard@2924: }, edouard@2924: Edouard@2936: // Use margin and text size to compute box size Edouard@2936: edouard@2924: adjust_box_to_text: function(){ edouard@2923: edouard@2926: let [lmargin, tmargin] = this.margins; edouard@2923: edouard@2923: let m = this.text_elt.getBBox(); edouard@2923: edouard@2924: let b = this.box_elt; edouard@2924: edouard@2924: b.x.baseVal.value = m.x - lmargin; edouard@2924: edouard@2924: b.y.baseVal.value = m.y - tmargin; edouard@2924: edouard@2926: b.width.baseVal.value = 2 * lmargin + m.width; edouard@2926: edouard@2926: b.height.baseVal.value = 2 * tmargin + m.height; Edouard@2922: Edouard@2922: }, Edouard@2922: Edouard@2922: edouard@2892: edouard@2892: edouard@2892: edouard@2894: edouard@2894: edouard@2894: edouard@2894: edouard@2894: edouard@2894: edouard@2894: Edouard@2893: index_pool: [ Edouard@2893: edouard@2894: edouard@2894: edouard@2894: edouard@2894: edouard@2894: , edouard@2894: edouard@2894: edouard@2894: edouard@2894: Edouard@2893: ], Edouard@2893: edouard@2896: init: function() { Edouard@2893: Edouard@2893: Edouard@2893: edouard@2896: edouard@2896: edouard@2896: edouard@2896: id(" Edouard@2893: edouard@2896: ").setAttribute("onclick", "hmi_widgets[' edouard@2896: edouard@2896: '].on_click(' edouard@2896: edouard@2896: ', evt)"); Edouard@2893: Edouard@2893: edouard@2896: Edouard@2893: Edouard@2895: this.items = [ Edouard@2893: Edouard@2893: Edouard@2893: Edouard@2893: Edouard@2893: Edouard@2893: edouard@2894: edouard@2894: Edouard@2895: [ /* item=" Edouard@2893: edouard@2894: " path=" edouard@2894: edouard@2894: " */ edouard@2892: Edouard@2893: Edouard@2893: Edouard@2893: Missing item labeled Edouard@2893: Edouard@2893: in ForEach widget Edouard@2893: Edouard@2893: Edouard@2893: Edouard@2893: edouard@2894: edouard@2894: edouard@2894: Widget id=" edouard@2894: edouard@2894: " label=" edouard@2894: edouard@2894: " is having wrong path. Accroding to ForEach widget ancestor id=" edouard@2894: edouard@2896: ", path should be descendant of " edouard@2894: edouard@2896: ". edouard@2894: edouard@2894: Edouard@2895: hmi_widgets[" edouard@2892: edouard@2892: "] edouard@2892: edouard@2892: , edouard@2892: edouard@2892: edouard@2892: edouard@2892: Edouard@2895: ] edouard@2892: edouard@2892: , edouard@2892: edouard@2892: edouard@2892: edouard@2892: Edouard@2895: ] Edouard@2895: Edouard@2895: }, Edouard@2895: Edouard@2895: item_offset: 0, edouard@2892: Edouard@2897: on_click: foreach_onclick, Edouard@2897: edouard@2892: edouard@2892: Edouard@2897: sub: foreach_subscribe, Edouard@2897: Edouard@2897: unsub: foreach_unsubscribe, Edouard@2897: Edouard@2897: apply_cache: foreach_apply_cache, edouard@2892: edouard@2892: Edouard@2800: Edouard@2801: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: value Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2861: Edouard@2836: Edouard@2861: edouard@2851: frequency: 5, Edouard@2836: Edouard@2836: Edouard@2913: last_val: undefined, Edouard@2913: edouard@2851: dispatch: function(value) { Edouard@2801: Edouard@2913: this.last_val = value; Edouard@2913: Edouard@2861: edouard@2851: this.value_elt.textContent = String(value); Edouard@2836: Edouard@2836: edouard@2851: }, Edouard@2801: Edouard@2801: edouard@2851: init: function() { Edouard@2801: Edouard@2801: edouard@2851: id(" Edouard@2801: Edouard@2913: ").setAttribute("onclick", "hmi_widgets[' Edouard@2913: Edouard@2913: '].on_edit_click()"); Edouard@2801: Edouard@2801: Edouard@2829: edouard@2851: id(" Edouard@2801: Edouard@2913: ").setAttribute("onclick", "hmi_widgets[' Edouard@2913: Edouard@2913: '].on_op_click(' Edouard@2829: Edouard@2913: ')"); Edouard@2801: Edouard@2801: edouard@2851: }, Edouard@2801: Edouard@2913: on_op_click: function(opstr) { Edouard@2913: edouard@2930: let orig = this.indexes[0]; edouard@2930: edouard@2930: let idx = this.offset ? orig - this.offset : orig; edouard@2930: edouard@2930: let new_val = change_hmi_value(idx, opstr); Edouard@2913: Edouard@2913: }, Edouard@2913: Edouard@2913: on_edit_click: function(opstr) { Edouard@2913: Edouard@2913: edit_value(" Edouard@2913: Edouard@2913: ", " Edouard@2913: Edouard@2917: ", this, this.last_val); Edouard@2913: Edouard@2913: }, Edouard@2913: Edouard@2913: edit_callback: function(new_val) { Edouard@2913: edouard@2930: let orig = this.indexes[0]; edouard@2930: edouard@2930: let idx = this.offset ? orig - this.offset : orig; edouard@2930: edouard@2930: apply_hmi_value(idx, new_val); Edouard@2913: Edouard@2913: }, Edouard@2913: Edouard@2801: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: active inactive Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: disabled Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: edouard@2883: edouard@2883: Edouard@2906: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: active: false, Edouard@2906: Edouard@2906: Edouard@2906: disabled: false, Edouard@2906: Edouard@2906: frequency: 2, Edouard@2906: Edouard@2906: dispatch: function(value) { Edouard@2906: Edouard@2906: this.disabled = !Number(value); Edouard@2906: Edouard@2906: this.update(); Edouard@2906: Edouard@2906: }, Edouard@2906: Edouard@2906: Edouard@2906: update: function(){ Edouard@2906: Edouard@2906: Edouard@2906: if(this.disabled) { Edouard@2906: Edouard@2906: /* show disabled */ Edouard@2906: Edouard@2906: this.disabled_elt.setAttribute("style", this.active_elt_style); Edouard@2906: Edouard@2906: /* hide inactive */ Edouard@2906: Edouard@2906: this.inactive_elt.setAttribute("style", "display:none"); Edouard@2906: Edouard@2906: /* hide active */ Edouard@2906: Edouard@2906: this.active_elt.setAttribute("style", "display:none"); Edouard@2906: Edouard@2906: } else { Edouard@2906: Edouard@2906: /* hide disabled */ Edouard@2906: Edouard@2906: this.disabled_elt.setAttribute("style", "display:none"); Edouard@2906: Edouard@2906: Edouard@2906: if(this.active) { Edouard@2906: Edouard@2906: /* show active */ Edouard@2906: Edouard@2906: this.active_elt.setAttribute("style", this.active_elt_style); Edouard@2906: Edouard@2906: /* hide inactive */ Edouard@2906: Edouard@2906: this.inactive_elt.setAttribute("style", "display:none"); Edouard@2906: Edouard@2906: } else { Edouard@2906: Edouard@2906: /* show inactive */ Edouard@2906: Edouard@2906: this.inactive_elt.setAttribute("style", this.inactive_elt_style); Edouard@2906: Edouard@2906: /* hide active */ Edouard@2906: Edouard@2906: this.active_elt.setAttribute("style", "display:none"); Edouard@2906: Edouard@2906: } Edouard@2906: Edouard@2906: Edouard@2906: } Edouard@2906: Edouard@2906: Edouard@2906: }, Edouard@2906: Edouard@2906: edouard@2883: on_click: function(evt) { edouard@2883: Edouard@2898: const index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined; Edouard@2898: Edouard@2902: const name = this.args[0]; Edouard@2902: Edouard@2902: switch_page(name, index); edouard@2883: edouard@2883: }, edouard@2883: Edouard@2906: Edouard@2903: notify_page_change: function(page_name, index){ Edouard@2903: Edouard@2903: const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined; Edouard@2903: Edouard@2903: const ref_name = this.args[0]; Edouard@2903: Edouard@2906: this.active =((ref_name == undefined || ref_name == page_name) && index == ref_index); Edouard@2906: Edouard@2906: this.update(); Edouard@2903: Edouard@2903: }, Edouard@2903: Edouard@2903: edouard@2883: init: function() { edouard@2883: edouard@2883: this.element.setAttribute("onclick", "hmi_widgets[' edouard@2883: edouard@2883: '].on_click(evt)"); edouard@2883: Edouard@2906: Edouard@2903: this.active_elt_style = this.active_elt.getAttribute("style"); Edouard@2903: Edouard@2903: this.inactive_elt_style = this.inactive_elt.getAttribute("style"); Edouard@2903: Edouard@2903: Edouard@2906: Edouard@2906: this.disabled_elt_style = this.disabled_elt.getAttribute("style"); Edouard@2906: Edouard@2906: edouard@2883: }, edouard@2883: edouard@2883: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: sub: subscribe, Edouard@2906: Edouard@2906: unsub: unsubscribe, Edouard@2906: Edouard@2906: apply_cache: widget_apply_cache, Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: sub: function(){}, Edouard@2906: Edouard@2906: unsub: function(){}, Edouard@2906: Edouard@2906: apply_cache: function(){}, Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2906: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Jump id=" Edouard@2901: Edouard@2901: " to page " Edouard@2901: Edouard@2901: " with incompatible path " Edouard@2901: Edouard@2901: (must be same class as " Edouard@2901: Edouard@2901: ") Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2901: Edouard@2913: Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: Esc Enter BackSpace Keys Info Value Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: edouard@2920: Sign Space NumDot Edouard@2917: Edouard@2917: Edouard@2917: edouard@2920: edouard@2920: edouard@2920: edouard@2920: CapsLock Shift edouard@2920: edouard@2920: edouard@2920: edouard@2920: Edouard@2913: init: function() { Edouard@2913: Edouard@2917: Edouard@2917: id(" Edouard@2917: Edouard@2917: ").setAttribute("onclick", "hmi_widgets[' Edouard@2917: Edouard@2917: '].on_key_click(' Edouard@2917: Edouard@2917: ')"); Edouard@2917: Edouard@2917: edouard@2920: Edouard@2917: if(this. Edouard@2917: Edouard@2917: _elt) Edouard@2917: Edouard@2917: this. Edouard@2917: Edouard@2917: _elt.setAttribute("onclick", "hmi_widgets[' Edouard@2917: Edouard@2917: '].on_ Edouard@2917: Edouard@2917: _click()"); Edouard@2917: Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: on_key_click: function(symbols) { Edouard@2917: Edouard@2917: var syms = symbols.split(" "); Edouard@2917: edouard@2919: this.shift |= this.caps; edouard@2919: edouard@2919: this.editstr += syms[this.shift?syms.length-1:0]; Edouard@2917: Edouard@2917: this.shift = false; Edouard@2917: Edouard@2917: this.update(); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: on_Esc_click: function() { Edouard@2917: Edouard@2917: end_modal.call(this); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: on_Enter_click: function() { Edouard@2917: Edouard@2917: end_modal.call(this); Edouard@2917: Edouard@2917: callback_obj = this.result_callback_obj; Edouard@2917: Edouard@2917: callback_obj.edit_callback(this.editstr); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: on_BackSpace_click: function() { Edouard@2917: Edouard@2917: this.editstr = this.editstr.slice(0,this.editstr.length-1); Edouard@2917: Edouard@2917: this.update(); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: on_Sign_click: function() { Edouard@2917: Edouard@2917: if(this.editstr[0] == "-") Edouard@2917: Edouard@2917: this.editstr = this.editstr.slice(1,this.editstr.length); Edouard@2917: Edouard@2917: else Edouard@2917: Edouard@2917: this.editstr = "-" + this.editstr; Edouard@2917: edouard@2920: this.update(); Edouard@2917: Edouard@2917: }, Edouard@2917: edouard@2920: on_NumDot_click: function() { edouard@2920: edouard@2920: if(this.editstr.indexOf(".") == "-1"){ edouard@2920: edouard@2920: this.editstr += "."; edouard@2920: edouard@2920: this.update(); edouard@2920: edouard@2920: } edouard@2920: edouard@2920: }, edouard@2920: Edouard@2917: on_Space_click: function() { Edouard@2917: Edouard@2917: this.editstr += " "; Edouard@2917: edouard@2920: this.update(); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: caps: false, Edouard@2917: edouard@2920: _caps: undefined, edouard@2920: Edouard@2917: on_CapsLock_click: function() { Edouard@2917: Edouard@2917: this.caps = !this.caps; Edouard@2917: edouard@2920: this.update(); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: shift: false, Edouard@2917: edouard@2920: _shift: undefined, edouard@2920: Edouard@2917: on_Shift_click: function() { Edouard@2917: edouard@2920: this.shift = !this.shift; edouard@2920: edouard@2920: this.caps = false; edouard@2920: edouard@2920: this.update(); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: Edouard@2917: coordinates: [ Edouard@2917: Edouard@2917: , Edouard@2917: Edouard@2917: ], Edouard@2917: Edouard@2917: editstr: "", Edouard@2917: edouard@2920: _editstr: undefined, edouard@2920: Edouard@2917: result_callback_obj: undefined, Edouard@2917: Edouard@2917: start_edit: function(info, valuetype, callback_obj, initial) { Edouard@2917: Edouard@2917: show_modal.call(this); Edouard@2917: Edouard@2917: this.editstr = initial; Edouard@2917: Edouard@2917: this.result_callback_obj = callback_obj; Edouard@2917: Edouard@2917: this.Info_elt.textContent = info; Edouard@2917: Edouard@2917: this.shift = false; Edouard@2917: Edouard@2917: this.caps = false; Edouard@2917: Edouard@2917: this.update(); Edouard@2917: Edouard@2917: }, Edouard@2917: Edouard@2917: update: function() { Edouard@2917: edouard@2920: if(this.editstr != this._editstr){ edouard@2920: edouard@2920: this._editstr = this.editstr; edouard@2920: edouard@2920: this.Value_elt.textContent = this.editstr; edouard@2920: edouard@2920: } edouard@2920: edouard@2920: if(this.shift != this._shift){ edouard@2920: edouard@2920: this._shift = this.shift; edouard@2920: edouard@2920: (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub); edouard@2920: edouard@2920: } edouard@2920: edouard@2920: if(this.caps != this._caps){ edouard@2920: edouard@2920: this._caps = this.caps; edouard@2920: edouard@2920: (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub); edouard@2920: edouard@2920: } Edouard@2917: Edouard@2913: }, Edouard@2913: Edouard@2913: edouard@2883: edouard@2883: edouard@2883: frequency: 10, edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: needle range edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: value min max edouard@2883: edouard@2883: edouard@2883: edouard@2883: dispatch: function(value) { edouard@2883: edouard@2883: if(this.value_elt) edouard@2883: edouard@2883: this.value_elt.textContent = String(value); edouard@2883: edouard@2883: let [min,max,totallength] = this.range; edouard@2883: edouard@2883: let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); edouard@2883: edouard@2883: let tip = this.range_elt.getPointAtLength(length); edouard@2883: edouard@2883: this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y); edouard@2883: edouard@2883: }, edouard@2883: edouard@2883: origin: undefined, edouard@2883: edouard@2883: range: undefined, edouard@2883: edouard@2883: init: function() { edouard@2883: edouard@2883: let min = this.min_elt ? edouard@2883: edouard@2883: Number(this.min_elt.textContent) : edouard@2883: edouard@2883: this.args.length >= 1 ? this.args[0] : 0; edouard@2883: edouard@2883: let max = this.max_elt ? edouard@2883: edouard@2883: Number(this.max_elt.textContent) : edouard@2883: edouard@2883: this.args.length >= 2 ? this.args[1] : 100; edouard@2883: edouard@2883: this.range = [min, max, this.range_elt.getTotalLength()] edouard@2883: edouard@2883: this.origin = this.needle_elt.getPointAtLength(0); edouard@2883: edouard@2883: }, Edouard@2800: Edouard@2797: Edouard@2839: Edouard@2839: edouard@2851: frequency: 5, edouard@2851: edouard@2851: dispatch: function(value) { edouard@2851: edouard@2851: for(let choice of this.choices){ edouard@2851: edouard@2851: if(value != choice.value){ edouard@2851: edouard@2851: choice.elt.setAttribute("style", "display:none"); edouard@2851: edouard@2851: } else { edouard@2851: edouard@2851: choice.elt.setAttribute("style", choice.style); edouard@2851: edouard@2851: } Edouard@2839: Edouard@2839: } Edouard@2839: edouard@2851: }, edouard@2851: edouard@2851: init: function() { edouard@2851: edouard@2851: // Hello Switch edouard@2851: edouard@2851: }, edouard@2851: edouard@2851: choices: [ Edouard@2839: Edouard@2907: Edouard@2839: Edouard@2839: edouard@2851: { edouard@2851: edouard@2851: elt:id(" Edouard@2839: Edouard@2839: "), Edouard@2839: edouard@2851: style:" Edouard@2839: Edouard@2839: ", Edouard@2839: edouard@2851: value: Edouard@2839: Edouard@2839: Edouard@2839: edouard@2851: } Edouard@2839: Edouard@2839: , Edouard@2839: Edouard@2839: Edouard@2839: Edouard@2839: edouard@2851: ], Edouard@2801: Edouard@2801: edouard@2938: edouard@2938: edouard@2938: edouard@2938: id = idstr => document.getElementById(idstr); edouard@2938: edouard@2938: edouard@2938: edouard@2940: edouard@2938: var hmi_hash = [ edouard@2938: edouard@2938: ]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: var heartbeat_index = edouard@2938: edouard@2938: ; edouard@2938: edouard@2938: edouard@2938: edouard@2938: var hmitree_types = [ edouard@2938: edouard@2938: edouard@2938: /* edouard@2938: edouard@2938: edouard@2938: edouard@2938: */ " edouard@2938: edouard@2938: " edouard@2938: edouard@2938: , edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: ] edouard@2938: edouard@2938: edouard@2938: edouard@2938: var detachable_elements = { edouard@2938: edouard@2938: edouard@2938: " edouard@2938: edouard@2938: ":[id(" edouard@2938: edouard@2938: "), id(" edouard@2938: edouard@2938: ")] edouard@2938: edouard@2938: , edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: var page_desc = { edouard@2938: edouard@2938: edouard@2938: } edouard@2938: edouard@2938: var keypads = { edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: " edouard@2938: edouard@2938: ":[" edouard@2938: edouard@2938: ", edouard@2938: edouard@2938: , edouard@2938: edouard@2938: ], edouard@2938: edouard@2938: edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: var default_page = " edouard@2938: edouard@2938: "; edouard@2938: edouard@2938: var svg_root = id(" edouard@2938: edouard@2938: "); edouard@2938: edouard@2938: // svghmi.js edouard@2938: edouard@2938: edouard@2938: edouard@2938: var cache = hmitree_types.map(_ignored => undefined); edouard@2938: edouard@2938: var updates = {}; edouard@2938: edouard@2938: var need_cache_apply = []; edouard@2938: edouard@2938: var jumps_need_update = false; edouard@2938: edouard@2938: var jump_history = [[default_page, undefined]]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function dispatch_value_to_widget(widget, index, value, oldval) { edouard@2938: edouard@2938: try { edouard@2938: edouard@2938: let idx = widget.offset ? index - widget.offset : index; edouard@2938: edouard@2938: let idxidx = widget.indexes.indexOf(idx); edouard@2938: edouard@2938: let d = widget.dispatch; edouard@2938: edouard@2938: if(typeof(d) == "function" && idxidx == 0){ edouard@2938: edouard@2938: d.call(widget, value, oldval); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: else if(typeof(d) == "object" && d.length >= idxidx){ edouard@2938: edouard@2938: d[idxidx].call(widget, value, oldval); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: /* else dispatch_0, ..., dispatch_n ? */ edouard@2938: edouard@2938: /*else { edouard@2938: edouard@2938: throw new Error("Dunno how to dispatch to widget at index = " + index); edouard@2938: edouard@2938: }*/ edouard@2938: edouard@2938: } catch(err) { edouard@2938: edouard@2938: console.log(err); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function dispatch_value(index, value) { edouard@2938: edouard@2938: let widgets = subscribers[index]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: let oldval = cache[index]; edouard@2938: edouard@2938: cache[index] = value; edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(widgets.size > 0) { edouard@2938: edouard@2938: for(let widget of widgets){ edouard@2938: edouard@2938: dispatch_value_to_widget(widget, index, value, oldval); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function init_widgets() { edouard@2938: edouard@2938: Object.keys(hmi_widgets).forEach(function(id) { edouard@2938: edouard@2938: let widget = hmi_widgets[id]; edouard@2938: edouard@2938: let init = widget.init; edouard@2938: edouard@2938: if(typeof(init) == "function"){ edouard@2938: edouard@2938: try { edouard@2938: edouard@2938: init.call(widget); edouard@2938: edouard@2938: } catch(err) { edouard@2938: edouard@2938: console.log(err); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }); edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: // Open WebSocket to relative "/ws" address edouard@2938: edouard@2938: var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')); edouard@2938: edouard@2938: ws.binaryType = 'arraybuffer'; edouard@2938: edouard@2938: edouard@2938: edouard@2938: const dvgetters = { edouard@2938: edouard@2938: INT: (dv,offset) => [dv.getInt16(offset, true), 2], edouard@2938: edouard@2938: BOOL: (dv,offset) => [dv.getInt8(offset, true), 1], edouard@2938: edouard@2938: NODE: (dv,offset) => [dv.getInt8(offset, true), 1], edouard@2938: edouard@2938: STRING: (dv, offset) => { edouard@2938: edouard@2938: size = dv.getInt8(offset); edouard@2938: edouard@2938: return [ edouard@2938: edouard@2938: String.fromCharCode.apply(null, new Uint8Array( edouard@2938: edouard@2938: dv.buffer, /* original buffer */ edouard@2938: edouard@2938: offset + 1, /* string starts after size*/ edouard@2938: edouard@2938: size /* size of string */ edouard@2938: edouard@2938: )), size + 1]; /* total increment */ edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: // Apply updates recieved through ws.onmessage to subscribed widgets edouard@2938: edouard@2938: function apply_updates() { edouard@2938: edouard@2938: for(let index in updates){ edouard@2938: edouard@2938: // serving as a key, index becomes a string edouard@2938: edouard@2938: // -> pass Number(index) instead edouard@2938: edouard@2938: dispatch_value(Number(index), updates[index]); edouard@2938: edouard@2938: delete updates[index]; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: // Called on requestAnimationFrame, modifies DOM edouard@2938: edouard@2938: var requestAnimationFrameID = null; edouard@2938: edouard@2938: function animate() { edouard@2938: edouard@2938: // Do the page swith if any one pending edouard@2938: edouard@2938: if(current_subscribed_page != current_visible_page){ edouard@2938: edouard@2938: switch_visible_page(current_subscribed_page); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: while(widget = need_cache_apply.pop()){ edouard@2938: edouard@2938: widget.apply_cache(); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(jumps_need_update) update_jumps(); edouard@2938: edouard@2938: edouard@2938: edouard@2938: apply_updates(); edouard@2938: edouard@2938: requestAnimationFrameID = null; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function requestHMIAnimation() { edouard@2938: edouard@2938: if(requestAnimationFrameID == null){ edouard@2938: edouard@2938: requestAnimationFrameID = window.requestAnimationFrame(animate); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: // Message reception handler edouard@2938: edouard@2938: // Hash is verified and HMI values updates resulting from binary parsing edouard@2938: edouard@2938: // are stored until browser can compute next frame, DOM is left untouched edouard@2938: edouard@2938: ws.onmessage = function (evt) { edouard@2938: edouard@2938: edouard@2938: edouard@2938: let data = evt.data; edouard@2938: edouard@2938: let dv = new DataView(data); edouard@2938: edouard@2938: let i = 0; edouard@2938: edouard@2938: try { edouard@2938: edouard@2938: for(let hash_int of hmi_hash) { edouard@2938: edouard@2938: if(hash_int != dv.getUint8(i)){ edouard@2938: edouard@2938: throw new Error("Hash doesn't match"); edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: i++; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: while(i < data.byteLength){ edouard@2938: edouard@2938: let index = dv.getUint32(i, true); edouard@2938: edouard@2938: i += 4; edouard@2938: edouard@2938: let iectype = hmitree_types[index]; edouard@2938: edouard@2938: if(iectype != undefined){ edouard@2938: edouard@2938: let dvgetter = dvgetters[iectype]; edouard@2938: edouard@2938: let [value, bytesize] = dvgetter(dv,i); edouard@2938: edouard@2938: updates[index] = value; edouard@2938: edouard@2938: i += bytesize; edouard@2938: edouard@2938: } else { edouard@2938: edouard@2938: throw new Error("Unknown index "+index); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: // register for rendering on next frame, since there are updates edouard@2938: edouard@2938: requestHMIAnimation(); edouard@2938: edouard@2938: } catch(err) { edouard@2938: edouard@2938: // 1003 is for "Unsupported Data" edouard@2938: edouard@2938: // ws.close(1003, err.message); edouard@2938: edouard@2938: edouard@2938: edouard@2938: // TODO : remove debug alert ? edouard@2938: edouard@2938: alert("Error : "+err.message+"\nHMI will be reloaded."); edouard@2938: edouard@2938: edouard@2938: edouard@2938: // force reload ignoring cache edouard@2938: edouard@2938: location.reload(true); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: function send_blob(data) { edouard@2938: edouard@2938: if(data.length > 0) { edouard@2938: edouard@2938: ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data))); edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: const typedarray_types = { edouard@2938: edouard@2938: INT: (number) => new Int16Array([number]), edouard@2938: edouard@2938: BOOL: (truth) => new Int16Array([truth]), edouard@2938: edouard@2938: NODE: (truth) => new Int16Array([truth]), edouard@2938: edouard@2938: STRING: (str) => { edouard@2938: edouard@2938: // beremiz default string max size is 128 edouard@2938: edouard@2938: str = str.slice(0,128); edouard@2938: edouard@2938: binary = new Uint8Array(str.length + 1); edouard@2938: edouard@2938: binary[0] = str.length; edouard@2938: edouard@2938: for(var i = 0; i < str.length; i++){ edouard@2938: edouard@2938: binary[i+1] = str.charCodeAt(i); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: return binary; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: /* TODO */ edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function send_reset() { edouard@2938: edouard@2938: send_blob(new Uint8Array([1])); /* reset = 1 */ edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: // subscription state, as it should be in hmi server edouard@2938: edouard@2938: // hmitree indexed array of integers edouard@2938: edouard@2938: var subscriptions = hmitree_types.map(_ignored => 0); edouard@2938: edouard@2938: edouard@2938: edouard@2938: // subscription state as needed by widget now edouard@2938: edouard@2938: // hmitree indexed array of Sets of widgets objects edouard@2938: edouard@2938: var subscribers = hmitree_types.map(_ignored => new Set()); edouard@2938: edouard@2938: edouard@2938: edouard@2938: // artificially subscribe the watchdog widget to "/heartbeat" hmi variable edouard@2938: edouard@2938: // Since dispatch directly calls change_hmi_value, edouard@2938: edouard@2938: // PLC will periodically send variable at given frequency edouard@2938: edouard@2938: subscribers[heartbeat_index].add({ edouard@2938: edouard@2938: /* type: "Watchdog", */ edouard@2938: edouard@2938: frequency: 1, edouard@2938: edouard@2938: indexes: [heartbeat_index], edouard@2938: edouard@2938: dispatch: function(value) { edouard@2938: edouard@2938: change_hmi_value(heartbeat_index, "+1"); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }); edouard@2938: edouard@2938: edouard@2938: edouard@2938: function update_subscriptions() { edouard@2938: edouard@2938: let delta = []; edouard@2938: edouard@2938: for(let index = 0; index < subscribers.length; index++){ edouard@2938: edouard@2938: let widgets = subscribers[index]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: // periods are in ms edouard@2938: edouard@2938: let previous_period = subscriptions[index]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: // subscribing with a zero period is unsubscribing edouard@2938: edouard@2938: let new_period = 0; edouard@2938: edouard@2938: if(widgets.size > 0) { edouard@2938: edouard@2938: let maxfreq = 0; edouard@2938: edouard@2938: for(let widget of widgets) edouard@2938: edouard@2938: if(maxfreq < widget.frequency) edouard@2938: edouard@2938: maxfreq = widget.frequency; edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(maxfreq != 0) edouard@2938: edouard@2938: new_period = 1000/maxfreq; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(previous_period != new_period) { edouard@2938: edouard@2938: subscriptions[index] = new_period; edouard@2938: edouard@2938: delta.push( edouard@2938: edouard@2938: new Uint8Array([2]), /* subscribe = 2 */ edouard@2938: edouard@2938: new Uint32Array([index]), edouard@2938: edouard@2938: new Uint16Array([new_period])); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: send_blob(delta); edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function send_hmi_value(index, value) { edouard@2938: edouard@2938: let iectype = hmitree_types[index]; edouard@2938: edouard@2938: let tobinary = typedarray_types[iectype]; edouard@2938: edouard@2938: send_blob([ edouard@2938: edouard@2938: new Uint8Array([0]), /* setval = 0 */ edouard@2938: edouard@2938: new Uint32Array([index]), edouard@2938: edouard@2938: tobinary(value)]); edouard@2938: edouard@2938: edouard@2938: edouard@2938: // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf edouard@2938: edouard@2938: // cache[index] = value; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function apply_hmi_value(index, new_val) { edouard@2938: edouard@2938: let old_val = cache[index] edouard@2938: edouard@2938: if(new_val != undefined && old_val != new_val) edouard@2938: edouard@2938: send_hmi_value(index, new_val); edouard@2938: edouard@2938: return new_val; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function change_hmi_value(index, opstr) { edouard@2938: edouard@2938: let op = opstr[0]; edouard@2938: edouard@2938: let given_val = opstr.slice(1); edouard@2938: edouard@2938: let old_val = cache[index] edouard@2938: edouard@2938: let new_val; edouard@2938: edouard@2938: switch(op){ edouard@2938: edouard@2938: case "=": edouard@2938: edouard@2938: eval("new_val"+opstr); edouard@2938: edouard@2938: break; edouard@2938: edouard@2938: case "+": edouard@2938: edouard@2938: case "-": edouard@2938: edouard@2938: case "*": edouard@2938: edouard@2938: case "/": edouard@2938: edouard@2938: if(old_val != undefined) edouard@2938: edouard@2938: new_val = eval("old_val"+opstr); edouard@2938: edouard@2938: break; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: if(new_val != undefined && old_val != new_val) edouard@2938: edouard@2938: send_hmi_value(index, new_val); edouard@2938: edouard@2938: return new_val; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: var current_visible_page; edouard@2938: edouard@2938: var current_subscribed_page; edouard@2938: edouard@2938: var current_page_index; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function prepare_svg() { edouard@2938: edouard@2938: for(let eltid in detachable_elements){ edouard@2938: edouard@2938: let [element,parent] = detachable_elements[eltid]; edouard@2938: edouard@2938: parent.removeChild(element); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function switch_page(page_name, page_index) { edouard@2938: edouard@2938: if(current_subscribed_page != current_visible_page){ edouard@2938: edouard@2938: /* page switch already going */ edouard@2938: edouard@2938: /* TODO LOG ERROR */ edouard@2938: edouard@2938: return false; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(page_name == undefined) edouard@2938: edouard@2938: page_name = current_subscribed_page; edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: let old_desc = page_desc[current_subscribed_page]; edouard@2938: edouard@2938: let new_desc = page_desc[page_name]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(new_desc == undefined){ edouard@2938: edouard@2938: /* TODO LOG ERROR */ edouard@2938: edouard@2938: return false; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(page_index == undefined){ edouard@2938: edouard@2938: page_index = new_desc.page_index; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(old_desc){ edouard@2938: edouard@2938: old_desc.absolute_widgets.map(w=>w.unsub()); edouard@2938: edouard@2938: old_desc.relative_widgets.map(w=>w.unsub()); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: new_desc.absolute_widgets.map(w=>w.sub()); edouard@2938: edouard@2938: var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; edouard@2938: edouard@2938: new_desc.relative_widgets.map(w=>w.sub(new_offset)); edouard@2938: edouard@2938: edouard@2938: edouard@2938: update_subscriptions(); edouard@2938: edouard@2938: edouard@2938: edouard@2938: current_subscribed_page = page_name; edouard@2938: edouard@2938: current_page_index = page_index; edouard@2938: edouard@2938: edouard@2938: edouard@2938: jumps_need_update = true; edouard@2938: edouard@2938: edouard@2938: edouard@2938: requestHMIAnimation(); edouard@2938: edouard@2938: edouard@2938: edouard@2938: jump_history.push([page_name, page_index]); edouard@2938: edouard@2938: if(jump_history.length > 42) edouard@2938: edouard@2938: jump_history.shift(); edouard@2938: edouard@2938: edouard@2938: edouard@2938: return true; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function* chain(a,b){ edouard@2938: edouard@2938: yield* a; edouard@2938: edouard@2938: yield* b; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function unsubscribe(){ edouard@2938: edouard@2938: /* remove subsribers */ edouard@2938: edouard@2938: for(let index of this.indexes){ edouard@2938: edouard@2938: let idx = index + this.offset; edouard@2938: edouard@2938: subscribers[idx].delete(this); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: this.offset = 0; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function subscribe(new_offset=0){ edouard@2938: edouard@2938: /* set the offset because relative */ edouard@2938: edouard@2938: this.offset = new_offset; edouard@2938: edouard@2938: /* add this's subsribers */ edouard@2938: edouard@2938: for(let index of this.indexes){ edouard@2938: edouard@2938: subscribers[index + new_offset].add(this); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: need_cache_apply.push(this); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function foreach_unsubscribe(){ edouard@2938: edouard@2938: for(let item of this.items){ edouard@2938: edouard@2938: for(let widget of item) { edouard@2938: edouard@2938: unsubscribe.call(widget); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: this.offset = 0; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function foreach_widgets_do(new_offset, todo){ edouard@2938: edouard@2938: this.offset = new_offset; edouard@2938: edouard@2938: for(let i = 0; i < this.items.length; i++) { edouard@2938: edouard@2938: let item = this.items[i]; edouard@2938: edouard@2938: let orig_item_index = this.index_pool[i]; edouard@2938: edouard@2938: let item_index = this.index_pool[i+this.item_offset]; edouard@2938: edouard@2938: let item_index_offset = item_index - orig_item_index; edouard@2938: edouard@2938: for(let widget of item) { edouard@2938: edouard@2938: todo.call(widget, new_offset + item_index_offset); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function foreach_subscribe(new_offset=0){ edouard@2938: edouard@2938: foreach_widgets_do.call(this, new_offset, subscribe); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function widget_apply_cache() { edouard@2938: edouard@2938: for(let index of this.indexes){ edouard@2938: edouard@2938: /* dispatch current cache in newly opened page widgets */ edouard@2938: edouard@2938: let realindex = index+this.offset; edouard@2938: edouard@2938: let cached_val = cache[realindex]; edouard@2938: edouard@2938: if(cached_val != undefined) edouard@2938: edouard@2938: dispatch_value_to_widget(this, realindex, cached_val, cached_val); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function foreach_apply_cache() { edouard@2938: edouard@2938: foreach_widgets_do.call(this, this.offset, widget_apply_cache); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: function foreach_onclick(opstr, evt) { edouard@2938: edouard@2938: new_item_offset = eval(String(this.item_offset)+opstr) edouard@2938: edouard@2938: if(new_item_offset + this.items.length > this.index_pool.length) { edouard@2938: edouard@2938: if(this.item_offset + this.items.length == this.index_pool.length) edouard@2938: edouard@2938: new_item_offset = 0; edouard@2938: edouard@2938: else edouard@2938: edouard@2938: new_item_offset = this.index_pool.length - this.items.length; edouard@2938: edouard@2938: } else if(new_item_offset < 0) { edouard@2938: edouard@2938: if(this.item_offset == 0) edouard@2938: edouard@2938: new_item_offset = this.index_pool.length - this.items.length; edouard@2938: edouard@2938: else edouard@2938: edouard@2938: new_item_offset = 0; edouard@2938: edouard@2938: } edouard@2938: edouard@2938: this.item_offset = new_item_offset; edouard@2938: edouard@2938: off = this.offset; edouard@2938: edouard@2938: foreach_unsubscribe.call(this); edouard@2938: edouard@2938: foreach_subscribe.call(this,off); edouard@2938: edouard@2938: update_subscriptions(); edouard@2938: edouard@2938: need_cache_apply.push(this); edouard@2938: edouard@2938: jumps_need_update = true; edouard@2938: edouard@2938: requestHMIAnimation(); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: function switch_visible_page(page_name) { edouard@2938: edouard@2938: edouard@2938: edouard@2938: let old_desc = page_desc[current_visible_page]; edouard@2938: edouard@2938: let new_desc = page_desc[page_name]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: if(old_desc){ edouard@2938: edouard@2938: for(let eltid in old_desc.required_detachables){ edouard@2938: edouard@2938: if(!(eltid in new_desc.required_detachables)){ edouard@2938: edouard@2938: let [element, parent] = old_desc.required_detachables[eltid]; edouard@2938: edouard@2938: parent.removeChild(element); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: for(let eltid in new_desc.required_detachables){ edouard@2938: edouard@2938: if(!(eltid in old_desc.required_detachables)){ edouard@2938: edouard@2938: let [element, parent] = new_desc.required_detachables[eltid]; edouard@2938: edouard@2938: parent.appendChild(element); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: }else{ edouard@2938: edouard@2938: for(let eltid in new_desc.required_detachables){ edouard@2938: edouard@2938: let [element, parent] = new_desc.required_detachables[eltid]; edouard@2938: edouard@2938: parent.appendChild(element); edouard@2938: edouard@2938: } edouard@2938: edouard@2938: } edouard@2938: edouard@2938: edouard@2938: edouard@2938: svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); edouard@2938: edouard@2938: current_visible_page = page_name; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function update_jumps() { edouard@2938: edouard@2938: page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index)); edouard@2938: edouard@2938: jumps_need_update = false; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: edouard@2938: // Once connection established edouard@2938: edouard@2938: ws.onopen = function (evt) { edouard@2938: edouard@2938: init_widgets(); edouard@2938: edouard@2938: send_reset(); edouard@2938: edouard@2938: // show main page edouard@2938: edouard@2938: prepare_svg(); edouard@2938: edouard@2938: switch_page(default_page); edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: ws.onclose = function (evt) { edouard@2938: edouard@2938: // TODO : add visible notification while waiting for reload edouard@2938: edouard@2938: console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s."); edouard@2938: edouard@2938: // TODO : re-enable auto reload when not in debug edouard@2938: edouard@2938: //window.setTimeout(() => location.reload(true), 10000); edouard@2938: edouard@2938: alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+"."); edouard@2938: edouard@2938: edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: var xmlns = "http://www.w3.org/2000/svg"; edouard@2938: edouard@2938: var edit_callback; edouard@2938: edouard@2938: function edit_value(path, valuetype, callback, initial) { edouard@2938: edouard@2938: edouard@2938: edouard@2938: let [keypadid, xcoord, ycoord] = keypads[valuetype]; edouard@2938: edouard@2938: console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypadid); edouard@2938: edouard@2938: edit_callback = callback; edouard@2938: edouard@2938: let widget = hmi_widgets[keypadid]; edouard@2938: edouard@2938: widget.start_edit(path, valuetype, callback, initial); edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: var current_modal; /* TODO stack ?*/ edouard@2938: edouard@2938: edouard@2938: edouard@2938: function show_modal() { edouard@2938: edouard@2938: let [element, parent] = detachable_elements[this.element.id]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: tmpgrp = document.createElementNS(xmlns,"g"); edouard@2938: edouard@2938: tmpgrpattr = document.createAttribute("transform"); edouard@2938: edouard@2938: edouard@2938: edouard@2938: let [xcoord,ycoord] = this.coordinates; edouard@2938: edouard@2938: let [xdest,ydest] = page_desc[current_visible_page].bbox; edouard@2938: edouard@2938: tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")"; edouard@2938: edouard@2938: tmpgrp.setAttributeNode(tmpgrpattr); edouard@2938: edouard@2938: edouard@2938: edouard@2938: tmpgrp.appendChild(element); edouard@2938: edouard@2938: parent.appendChild(tmpgrp); edouard@2938: edouard@2938: edouard@2938: edouard@2938: current_modal = [this.element.id, tmpgrp]; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function end_modal() { edouard@2938: edouard@2938: let [eltid, tmpgrp] = current_modal; edouard@2938: edouard@2938: let [element, parent] = detachable_elements[this.element.id]; edouard@2938: edouard@2938: edouard@2938: edouard@2938: parent.removeChild(tmpgrp); edouard@2938: edouard@2938: edouard@2938: edouard@2938: current_modal = undefined; edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: edouard@2938: edouard@2938: function widget_active_activable(eltsub) { edouard@2938: edouard@2938: if(eltsub.inactive_style === undefined) edouard@2938: edouard@2938: eltsub.inactive_style = eltsub.inactive.getAttribute("style"); edouard@2938: edouard@2938: eltsub.inactive.setAttribute("style", "display:none"); edouard@2938: edouard@2938: if(eltsub.active_style !== undefined) edouard@2938: edouard@2938: eltsub.active.setAttribute("style", eltsub.active_style); edouard@2938: edouard@2938: console.log("active", eltsub); edouard@2938: edouard@2938: }; edouard@2938: edouard@2938: function widget_inactive_activable(eltsub) { edouard@2938: edouard@2938: if(eltsub.active_style === undefined) edouard@2938: edouard@2938: eltsub.active_style = eltsub.active.getAttribute("style"); edouard@2938: edouard@2938: eltsub.active.setAttribute("style", "display:none"); edouard@2938: edouard@2938: if(eltsub.inactive_style !== undefined) edouard@2938: edouard@2938: eltsub.inactive.setAttribute("style", eltsub.inactive_style); edouard@2938: edouard@2938: console.log("inactive", eltsub); edouard@2938: edouard@2938: }; edouard@2938: edouard@2940: edouard@2904: edouard@2883: edouard@2883: edouard@2883: Made with SVGHMI. https://beremiz.org edouard@2883: edouard@2940: edouard@2940: edouard@2940: edouard@2940: : edouard@2940: edouard@2940: edouard@2940: edouard@2940: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: Edouard@2753: