Edouard@2753: edouard@2904: 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@2904: 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@2904: 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@2904: edouard@2904: 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@2904: edouard@2904: 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@2904: edouard@2904: edouard@2904: Unlinked : edouard@2904: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: 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@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@2913: let new_val = change_hmi_value(this.indexes[0], opstr); Edouard@2913: Edouard@2913: Edouard@2913: this.value_elt.textContent = String(new_val); Edouard@2913: 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@2917: apply_hmi_value(this.indexes[0], new_val); Edouard@2913: Edouard@2913: Edouard@2913: this.value_elt.textContent = String(new_val); Edouard@2913: 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@2904: edouard@2904: edouard@2904: edouard@2904: : edouard@2904: edouard@2904: edouard@2904: edouard@2904: edouard@2883: edouard@2883: edouard@2883: Made with SVGHMI. https://beremiz.org edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: id = idstr => document.getElementById(idstr); edouard@2883: edouard@2883: edouard@2883: edouard@2883: var hmi_hash = [ edouard@2883: edouard@2883: ]; edouard@2883: edouard@2883: var hmi_widgets = { edouard@2883: edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: var heartbeat_index = edouard@2883: edouard@2883: ; edouard@2883: edouard@2883: edouard@2883: edouard@2883: var hmitree_types = [ edouard@2883: edouard@2883: edouard@2883: /* edouard@2883: edouard@2883: edouard@2883: edouard@2883: */ " edouard@2883: edouard@2883: " edouard@2883: edouard@2883: , edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: ] edouard@2883: edouard@2883: edouard@2883: edouard@2883: var detachable_elements = { edouard@2883: edouard@2883: edouard@2883: " edouard@2883: edouard@2883: ":[id(" edouard@2883: edouard@2883: "), id(" edouard@2883: edouard@2883: ")] edouard@2883: edouard@2883: , edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: var page_desc = { edouard@2883: edouard@2883: edouard@2883: } edouard@2883: Edouard@2913: var keypads = { Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2913: " Edouard@2913: Edouard@2913: ":[" Edouard@2913: Edouard@2913: ", Edouard@2913: Edouard@2913: , Edouard@2913: Edouard@2913: ], Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2913: } Edouard@2913: edouard@2883: edouard@2883: edouard@2883: var default_page = " edouard@2883: edouard@2883: "; edouard@2883: edouard@2883: var svg_root = id(" edouard@2883: edouard@2883: "); edouard@2883: edouard@2883: // svghmi.js edouard@2883: edouard@2883: edouard@2883: edouard@2883: var cache = hmitree_types.map(_ignored => undefined); edouard@2883: edouard@2883: var updates = {}; edouard@2883: Edouard@2897: var need_cache_apply = []; Edouard@2897: Edouard@2903: var jumps_need_update = false; Edouard@2903: Edouard@2902: var jump_history = [[default_page, undefined]]; Edouard@2902: edouard@2883: edouard@2883: edouard@2883: function dispatch_value_to_widget(widget, index, value, oldval) { edouard@2883: edouard@2883: try { edouard@2883: edouard@2883: let idx = widget.offset ? index - widget.offset : index; edouard@2883: edouard@2883: let idxidx = widget.indexes.indexOf(idx); edouard@2883: edouard@2883: let d = widget.dispatch; edouard@2883: edouard@2883: if(typeof(d) == "function" && idxidx == 0){ edouard@2883: edouard@2883: d.call(widget, value, oldval); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: else if(typeof(d) == "object" && d.length >= idxidx){ edouard@2883: edouard@2883: d[idxidx].call(widget, value, oldval); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: /* else dispatch_0, ..., dispatch_n ? */ edouard@2883: edouard@2883: /*else { edouard@2883: edouard@2883: throw new Error("Dunno how to dispatch to widget at index = " + index); edouard@2883: edouard@2883: }*/ edouard@2883: edouard@2883: } catch(err) { edouard@2883: edouard@2883: console.log(err); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: function dispatch_value(index, value) { edouard@2883: edouard@2883: let widgets = subscribers[index]; edouard@2883: edouard@2883: edouard@2883: edouard@2883: let oldval = cache[index]; edouard@2883: edouard@2883: cache[index] = value; edouard@2883: edouard@2883: edouard@2883: edouard@2883: if(widgets.size > 0) { edouard@2883: edouard@2883: for(let widget of widgets){ edouard@2883: edouard@2883: dispatch_value_to_widget(widget, index, value, oldval); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: } edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: function init_widgets() { edouard@2883: edouard@2883: Object.keys(hmi_widgets).forEach(function(id) { edouard@2883: edouard@2883: let widget = hmi_widgets[id]; edouard@2883: edouard@2883: let init = widget.init; edouard@2883: edouard@2883: if(typeof(init) == "function"){ edouard@2883: edouard@2883: try { edouard@2883: edouard@2883: init.call(widget); edouard@2883: edouard@2883: } catch(err) { edouard@2883: edouard@2883: console.log(err); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: } edouard@2883: edouard@2883: }); edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: // Open WebSocket to relative "/ws" address edouard@2883: edouard@2883: var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')); edouard@2883: edouard@2883: ws.binaryType = 'arraybuffer'; edouard@2883: edouard@2883: edouard@2883: edouard@2883: const dvgetters = { edouard@2883: edouard@2883: INT: (dv,offset) => [dv.getInt16(offset, true), 2], edouard@2883: edouard@2883: BOOL: (dv,offset) => [dv.getInt8(offset, true), 1], edouard@2883: edouard@2890: NODE: (dv,offset) => [dv.getInt8(offset, true), 1], edouard@2890: edouard@2883: STRING: (dv, offset) => { edouard@2883: edouard@2883: size = dv.getInt8(offset); edouard@2883: edouard@2883: return [ edouard@2883: edouard@2883: String.fromCharCode.apply(null, new Uint8Array( edouard@2883: edouard@2883: dv.buffer, /* original buffer */ edouard@2883: edouard@2883: offset + 1, /* string starts after size*/ edouard@2883: edouard@2883: size /* size of string */ edouard@2883: edouard@2883: )), size + 1]; /* total increment */ edouard@2883: edouard@2883: } edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: // Apply updates recieved through ws.onmessage to subscribed widgets edouard@2883: edouard@2883: function apply_updates() { edouard@2883: edouard@2883: for(let index in updates){ edouard@2883: edouard@2883: // serving as a key, index becomes a string edouard@2883: edouard@2883: // -> pass Number(index) instead edouard@2883: edouard@2883: dispatch_value(Number(index), updates[index]); edouard@2883: edouard@2883: delete updates[index]; edouard@2883: edouard@2883: } edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: // Called on requestAnimationFrame, modifies DOM edouard@2883: edouard@2883: var requestAnimationFrameID = null; edouard@2883: edouard@2883: function animate() { edouard@2883: edouard@2883: // Do the page swith if any one pending edouard@2883: edouard@2883: if(current_subscribed_page != current_visible_page){ edouard@2883: edouard@2883: switch_visible_page(current_subscribed_page); edouard@2883: edouard@2883: } edouard@2883: Edouard@2895: Edouard@2895: Edouard@2897: while(widget = need_cache_apply.pop()){ Edouard@2897: Edouard@2897: widget.apply_cache(); Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: Edouard@2895: Edouard@2903: if(jumps_need_update) update_jumps(); Edouard@2903: Edouard@2903: Edouard@2903: edouard@2883: apply_updates(); edouard@2883: edouard@2883: requestAnimationFrameID = null; edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: function requestHMIAnimation() { edouard@2883: edouard@2883: if(requestAnimationFrameID == null){ edouard@2883: edouard@2883: requestAnimationFrameID = window.requestAnimationFrame(animate); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: // Message reception handler edouard@2883: edouard@2883: // Hash is verified and HMI values updates resulting from binary parsing edouard@2883: edouard@2883: // are stored until browser can compute next frame, DOM is left untouched edouard@2883: edouard@2883: ws.onmessage = function (evt) { edouard@2883: edouard@2883: edouard@2883: edouard@2883: let data = evt.data; edouard@2883: edouard@2883: let dv = new DataView(data); edouard@2883: edouard@2883: let i = 0; edouard@2883: edouard@2883: try { edouard@2883: edouard@2883: for(let hash_int of hmi_hash) { edouard@2883: edouard@2883: if(hash_int != dv.getUint8(i)){ edouard@2883: edouard@2883: throw new Error("Hash doesn't match"); edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: i++; edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: while(i < data.byteLength){ edouard@2883: edouard@2883: let index = dv.getUint32(i, true); edouard@2883: edouard@2883: i += 4; edouard@2883: edouard@2883: let iectype = hmitree_types[index]; edouard@2883: edouard@2883: if(iectype != undefined){ edouard@2883: edouard@2883: let dvgetter = dvgetters[iectype]; edouard@2883: edouard@2883: let [value, bytesize] = dvgetter(dv,i); edouard@2883: edouard@2883: updates[index] = value; edouard@2883: edouard@2883: i += bytesize; edouard@2883: edouard@2883: } else { edouard@2883: edouard@2883: throw new Error("Unknown index "+index); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: // register for rendering on next frame, since there are updates edouard@2883: edouard@2883: requestHMIAnimation(); edouard@2883: edouard@2883: } catch(err) { edouard@2883: edouard@2883: // 1003 is for "Unsupported Data" edouard@2883: edouard@2883: // ws.close(1003, err.message); edouard@2883: edouard@2883: edouard@2883: edouard@2883: // TODO : remove debug alert ? edouard@2883: edouard@2883: alert("Error : "+err.message+"\nHMI will be reloaded."); edouard@2883: edouard@2883: edouard@2883: edouard@2883: // force reload ignoring cache edouard@2883: edouard@2883: location.reload(true); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: edouard@2883: function send_blob(data) { edouard@2883: edouard@2883: if(data.length > 0) { edouard@2883: edouard@2883: ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data))); edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: const typedarray_types = { edouard@2883: edouard@2883: INT: (number) => new Int16Array([number]), edouard@2883: edouard@2883: BOOL: (truth) => new Int16Array([truth]), edouard@2883: edouard@2890: NODE: (truth) => new Int16Array([truth]), edouard@2890: edouard@2883: STRING: (str) => { edouard@2883: edouard@2883: // beremiz default string max size is 128 edouard@2883: edouard@2883: str = str.slice(0,128); edouard@2883: edouard@2883: binary = new Uint8Array(str.length + 1); edouard@2883: edouard@2883: binary[0] = str.length; edouard@2883: edouard@2883: for(var i = 0; i < str.length; i++){ edouard@2883: edouard@2883: binary[i+1] = str.charCodeAt(i); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: return binary; edouard@2883: edouard@2883: } edouard@2883: edouard@2883: /* TODO */ edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: function send_reset() { edouard@2883: edouard@2883: send_blob(new Uint8Array([1])); /* reset = 1 */ edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: // subscription state, as it should be in hmi server edouard@2883: edouard@2883: // hmitree indexed array of integers edouard@2883: edouard@2883: var subscriptions = hmitree_types.map(_ignored => 0); edouard@2883: edouard@2883: edouard@2883: edouard@2883: // subscription state as needed by widget now edouard@2883: edouard@2883: // hmitree indexed array of Sets of widgets objects edouard@2883: edouard@2883: var subscribers = hmitree_types.map(_ignored => new Set()); edouard@2883: edouard@2883: edouard@2883: edouard@2883: // artificially subscribe the watchdog widget to "/heartbeat" hmi variable edouard@2883: edouard@2883: // Since dispatch directly calls change_hmi_value, edouard@2883: edouard@2883: // PLC will periodically send variable at given frequency edouard@2883: edouard@2883: subscribers[heartbeat_index].add({ edouard@2883: edouard@2883: /* type: "Watchdog", */ edouard@2883: edouard@2883: frequency: 1, edouard@2883: edouard@2883: indexes: [heartbeat_index], edouard@2883: edouard@2883: dispatch: function(value) { edouard@2883: edouard@2883: change_hmi_value(heartbeat_index, "+1"); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: }); edouard@2883: edouard@2883: edouard@2883: edouard@2883: function update_subscriptions() { edouard@2883: edouard@2883: let delta = []; edouard@2883: edouard@2883: for(let index = 0; index < subscribers.length; index++){ edouard@2883: edouard@2883: let widgets = subscribers[index]; edouard@2883: edouard@2883: edouard@2883: edouard@2883: // periods are in ms edouard@2883: edouard@2883: let previous_period = subscriptions[index]; edouard@2883: edouard@2883: edouard@2883: edouard@2883: // subscribing with a zero period is unsubscribing edouard@2883: edouard@2883: let new_period = 0; edouard@2883: edouard@2883: if(widgets.size > 0) { edouard@2883: edouard@2883: let maxfreq = 0; edouard@2883: edouard@2883: for(let widget of widgets) edouard@2883: edouard@2883: if(maxfreq < widget.frequency) edouard@2883: edouard@2883: maxfreq = widget.frequency; edouard@2883: edouard@2883: edouard@2883: edouard@2883: if(maxfreq != 0) edouard@2883: edouard@2883: new_period = 1000/maxfreq; edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: if(previous_period != new_period) { edouard@2883: edouard@2883: subscriptions[index] = new_period; edouard@2883: edouard@2883: delta.push( edouard@2883: edouard@2883: new Uint8Array([2]), /* subscribe = 2 */ edouard@2883: edouard@2883: new Uint32Array([index]), edouard@2883: edouard@2883: new Uint16Array([new_period])); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: } edouard@2883: edouard@2883: send_blob(delta); edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: function send_hmi_value(index, value) { edouard@2883: edouard@2883: let iectype = hmitree_types[index]; edouard@2883: edouard@2883: let tobinary = typedarray_types[iectype]; edouard@2883: edouard@2883: send_blob([ edouard@2883: edouard@2883: new Uint8Array([0]), /* setval = 0 */ edouard@2883: edouard@2883: new Uint32Array([index]), edouard@2883: edouard@2883: tobinary(value)]); edouard@2883: edouard@2883: edouard@2883: edouard@2883: cache[index] = value; edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: Edouard@2913: function apply_hmi_value(index, new_val) { Edouard@2913: Edouard@2913: let old_val = cache[index] Edouard@2913: Edouard@2913: if(new_val != undefined && old_val != new_val) Edouard@2913: Edouard@2913: send_hmi_value(index, new_val); Edouard@2913: Edouard@2913: return new_val; Edouard@2913: Edouard@2913: } Edouard@2913: Edouard@2913: Edouard@2913: edouard@2883: function change_hmi_value(index, opstr) { edouard@2883: edouard@2883: let op = opstr[0]; edouard@2883: edouard@2883: let given_val = opstr.slice(1); edouard@2883: edouard@2883: let old_val = cache[index] edouard@2883: edouard@2883: let new_val; edouard@2883: edouard@2883: switch(op){ edouard@2883: edouard@2883: case "=": edouard@2883: edouard@2883: eval("new_val"+opstr); edouard@2883: edouard@2883: break; edouard@2883: edouard@2883: case "+": edouard@2883: edouard@2883: case "-": edouard@2883: edouard@2883: case "*": edouard@2883: edouard@2883: case "/": edouard@2883: edouard@2883: if(old_val != undefined) edouard@2883: edouard@2883: new_val = eval("old_val"+opstr); edouard@2883: edouard@2883: break; edouard@2883: edouard@2883: } edouard@2883: edouard@2883: if(new_val != undefined && old_val != new_val) edouard@2883: edouard@2883: send_hmi_value(index, new_val); edouard@2883: edouard@2883: return new_val; edouard@2883: edouard@2883: } edouard@2883: edouard@2883: edouard@2883: edouard@2883: var current_visible_page; edouard@2883: edouard@2883: var current_subscribed_page; edouard@2883: Edouard@2903: var current_page_index; Edouard@2903: edouard@2883: edouard@2883: edouard@2883: function prepare_svg() { edouard@2883: edouard@2883: for(let eltid in detachable_elements){ edouard@2883: edouard@2883: let [element,parent] = detachable_elements[eltid]; edouard@2883: edouard@2883: parent.removeChild(element); edouard@2883: edouard@2883: } edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: edouard@2883: function switch_page(page_name, page_index) { edouard@2883: edouard@2883: if(current_subscribed_page != current_visible_page){ edouard@2883: edouard@2883: /* page switch already going */ edouard@2883: edouard@2883: /* TODO LOG ERROR */ edouard@2883: Edouard@2902: return false; edouard@2883: Edouard@2895: } Edouard@2895: Edouard@2895: Edouard@2895: Edouard@2895: if(page_name == undefined) Edouard@2895: Edouard@2895: page_name = current_subscribed_page; Edouard@2895: Edouard@2895: Edouard@2895: Edouard@2903: Edouard@2903: Edouard@2903: let old_desc = page_desc[current_subscribed_page]; Edouard@2903: Edouard@2903: let new_desc = page_desc[page_name]; Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: if(new_desc == undefined){ Edouard@2903: Edouard@2903: /* TODO LOG ERROR */ Edouard@2903: Edouard@2903: return false; Edouard@2903: Edouard@2903: } Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: if(page_index == undefined){ Edouard@2903: Edouard@2903: page_index = new_desc.page_index; Edouard@2903: Edouard@2903: } Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: if(old_desc){ Edouard@2903: Edouard@2903: old_desc.absolute_widgets.map(w=>w.unsub()); Edouard@2903: Edouard@2903: old_desc.relative_widgets.map(w=>w.unsub()); Edouard@2903: Edouard@2903: } Edouard@2903: Edouard@2903: new_desc.absolute_widgets.map(w=>w.sub()); Edouard@2903: Edouard@2903: var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; Edouard@2903: Edouard@2903: new_desc.relative_widgets.map(w=>w.sub(new_offset)); Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: update_subscriptions(); Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: current_subscribed_page = page_name; Edouard@2903: Edouard@2903: current_page_index = page_index; Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: jumps_need_update = true; Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: requestHMIAnimation(); Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: jump_history.push([page_name, page_index]); Edouard@2903: Edouard@2906: if(jump_history.length > 42) Edouard@2905: Edouard@2905: jump_history.shift(); Edouard@2905: Edouard@2903: Edouard@2903: Edouard@2903: return true; Edouard@2895: Edouard@2895: }; Edouard@2895: Edouard@2895: Edouard@2895: Edouard@2895: function* chain(a,b){ Edouard@2895: Edouard@2895: yield* a; Edouard@2895: Edouard@2895: yield* b; Edouard@2895: Edouard@2895: }; Edouard@2895: Edouard@2895: Edouard@2895: Edouard@2895: function unsubscribe(){ Edouard@2895: Edouard@2895: /* remove subsribers */ Edouard@2895: Edouard@2895: for(let index of this.indexes){ Edouard@2895: Edouard@2895: let idx = index + this.offset; Edouard@2895: Edouard@2895: subscribers[idx].delete(this); Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2895: this.offset = 0; Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2895: Edouard@2895: Edouard@2895: function subscribe(new_offset=0){ Edouard@2895: Edouard@2895: /* set the offset because relative */ Edouard@2895: Edouard@2895: this.offset = new_offset; Edouard@2895: Edouard@2895: /* add this's subsribers */ Edouard@2895: Edouard@2895: for(let index of this.indexes){ Edouard@2895: Edouard@2895: subscribers[index + new_offset].add(this); Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2897: need_cache_apply.push(this); Edouard@2897: Edouard@2895: } Edouard@2895: Edouard@2895: Edouard@2895: edouard@2896: function foreach_unsubscribe(){ Edouard@2895: Edouard@2895: for(let item of this.items){ Edouard@2895: Edouard@2895: for(let widget of item) { Edouard@2895: Edouard@2895: unsubscribe.call(widget); Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2897: this.offset = 0; Edouard@2897: Edouard@2895: } Edouard@2895: Edouard@2895: Edouard@2895: Edouard@2897: function foreach_widgets_do(new_offset, todo){ Edouard@2897: Edouard@2897: this.offset = new_offset; Edouard@2897: Edouard@2897: for(let i = 0; i < this.items.length; i++) { Edouard@2897: Edouard@2897: let item = this.items[i]; Edouard@2897: Edouard@2897: let orig_item_index = this.index_pool[i]; Edouard@2897: Edouard@2897: let item_index = this.index_pool[i+this.item_offset]; Edouard@2897: Edouard@2897: let item_index_offset = item_index - orig_item_index; Edouard@2897: Edouard@2897: for(let widget of item) { Edouard@2897: Edouard@2897: todo.call(widget, new_offset + item_index_offset); Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: Edouard@2897: edouard@2896: function foreach_subscribe(new_offset=0){ Edouard@2895: Edouard@2897: foreach_widgets_do.call(this, new_offset, subscribe); Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: Edouard@2897: Edouard@2897: function widget_apply_cache() { Edouard@2897: Edouard@2897: for(let index of this.indexes){ Edouard@2897: Edouard@2897: /* dispatch current cache in newly opened page widgets */ Edouard@2897: Edouard@2897: let realindex = index+this.offset; Edouard@2897: Edouard@2897: let cached_val = cache[realindex]; Edouard@2897: Edouard@2897: if(cached_val != undefined) Edouard@2897: Edouard@2897: dispatch_value_to_widget(this, realindex, cached_val, cached_val); Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: Edouard@2897: Edouard@2897: function foreach_apply_cache() { Edouard@2897: Edouard@2897: foreach_widgets_do.call(this, this.offset, widget_apply_cache); Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: Edouard@2897: Edouard@2897: function foreach_onclick(opstr, evt) { Edouard@2897: Edouard@2897: new_item_offset = eval(String(this.item_offset)+opstr) Edouard@2897: Edouard@2897: if(new_item_offset + this.items.length > this.index_pool.length) { Edouard@2897: Edouard@2899: if(this.item_offset + this.items.length == this.index_pool.length) Edouard@2899: Edouard@2899: new_item_offset = 0; Edouard@2899: Edouard@2899: else Edouard@2899: Edouard@2899: new_item_offset = this.index_pool.length - this.items.length; Edouard@2897: Edouard@2897: } else if(new_item_offset < 0) { Edouard@2897: Edouard@2899: if(this.item_offset == 0) Edouard@2899: Edouard@2899: new_item_offset = this.index_pool.length - this.items.length; Edouard@2899: Edouard@2899: else Edouard@2899: Edouard@2899: new_item_offset = 0; Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: this.item_offset = new_item_offset; Edouard@2897: Edouard@2897: off = this.offset; Edouard@2897: Edouard@2897: foreach_unsubscribe.call(this); Edouard@2897: Edouard@2897: foreach_subscribe.call(this,off); Edouard@2897: Edouard@2897: update_subscriptions(); Edouard@2897: Edouard@2897: need_cache_apply.push(this); Edouard@2897: Edouard@2903: jumps_need_update = true; Edouard@2903: Edouard@2897: requestHMIAnimation(); Edouard@2897: Edouard@2897: } Edouard@2897: Edouard@2897: Edouard@2897: Edouard@2903: Edouard@2903: Edouard@2903: function switch_visible_page(page_name) { Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: let old_desc = page_desc[current_visible_page]; Edouard@2897: Edouard@2897: let new_desc = page_desc[page_name]; Edouard@2897: Edouard@2897: Edouard@2897: Edouard@2897: if(old_desc){ Edouard@2897: Edouard@2897: for(let eltid in old_desc.required_detachables){ Edouard@2897: Edouard@2897: if(!(eltid in new_desc.required_detachables)){ Edouard@2897: Edouard@2897: let [element, parent] = old_desc.required_detachables[eltid]; Edouard@2897: Edouard@2897: parent.removeChild(element); Edouard@2897: Edouard@2897: } Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2897: for(let eltid in new_desc.required_detachables){ Edouard@2897: Edouard@2897: if(!(eltid in old_desc.required_detachables)){ Edouard@2897: Edouard@2897: let [element, parent] = new_desc.required_detachables[eltid]; Edouard@2897: Edouard@2897: parent.appendChild(element); Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2897: }else{ Edouard@2897: Edouard@2895: for(let eltid in new_desc.required_detachables){ Edouard@2895: Edouard@2897: let [element, parent] = new_desc.required_detachables[eltid]; Edouard@2897: Edouard@2897: parent.appendChild(element); Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2895: } Edouard@2895: Edouard@2895: Edouard@2895: Edouard@2895: svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); Edouard@2895: Edouard@2895: current_visible_page = page_name; edouard@2883: edouard@2883: }; edouard@2883: Edouard@2895: Edouard@2895: Edouard@2903: function update_jumps() { Edouard@2903: Edouard@2903: page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index)); Edouard@2903: Edouard@2903: jumps_need_update = false; Edouard@2903: Edouard@2903: }; Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2903: Edouard@2895: // Once connection established Edouard@2895: Edouard@2895: ws.onopen = function (evt) { Edouard@2895: Edouard@2895: init_widgets(); Edouard@2895: Edouard@2895: send_reset(); Edouard@2895: Edouard@2895: // show main page Edouard@2895: Edouard@2895: prepare_svg(); Edouard@2895: Edouard@2895: switch_page(default_page); edouard@2883: edouard@2883: }; edouard@2883: edouard@2883: edouard@2883: Edouard@2895: ws.onclose = function (evt) { Edouard@2895: Edouard@2895: // TODO : add visible notification while waiting for reload Edouard@2895: Edouard@2895: console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s."); Edouard@2895: Edouard@2895: // TODO : re-enable auto reload when not in debug Edouard@2895: Edouard@2895: //window.setTimeout(() => location.reload(true), 10000); Edouard@2895: Edouard@2895: alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+"."); Edouard@2895: Edouard@2895: edouard@2883: edouard@2883: }; edouard@2883: Edouard@2913: Edouard@2913: Edouard@2917: var xmlns = "http://www.w3.org/2000/svg"; Edouard@2917: Edouard@2913: var edit_callback; Edouard@2913: Edouard@2913: function edit_value(path, valuetype, callback, initial) { Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2913: let [keypadid, xcoord, ycoord] = keypads[valuetype]; Edouard@2913: Edouard@2913: console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypadid); Edouard@2913: Edouard@2913: edit_callback = callback; Edouard@2913: Edouard@2917: let widget = hmi_widgets[keypadid]; Edouard@2917: Edouard@2917: widget.start_edit(path, valuetype, callback, initial); Edouard@2917: Edouard@2917: }; Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: var current_modal; /* TODO stack ?*/ Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: function show_modal() { Edouard@2917: Edouard@2917: let [element, parent] = detachable_elements[this.element.id]; Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: tmpgrp = document.createElementNS(xmlns,"g"); Edouard@2913: Edouard@2913: tmpgrpattr = document.createAttribute("transform"); Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2917: let [xcoord,ycoord] = this.coordinates; Edouard@2917: Edouard@2913: let [xdest,ydest] = page_desc[current_visible_page].bbox; Edouard@2913: Edouard@2913: tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")"; Edouard@2913: Edouard@2913: tmpgrp.setAttributeNode(tmpgrpattr); Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2913: tmpgrp.appendChild(element); Edouard@2913: Edouard@2913: parent.appendChild(tmpgrp); Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2917: current_modal = [this.element.id, tmpgrp]; Edouard@2917: Edouard@2913: }; Edouard@2913: Edouard@2913: Edouard@2913: Edouard@2917: function end_modal() { Edouard@2917: Edouard@2917: let [eltid, tmpgrp] = current_modal; Edouard@2917: Edouard@2917: let [element, parent] = detachable_elements[this.element.id]; Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: parent.removeChild(tmpgrp); Edouard@2917: Edouard@2917: Edouard@2917: Edouard@2917: current_modal = undefined; Edouard@2917: Edouard@2917: }; Edouard@2917: edouard@2920: edouard@2920: edouard@2920: function widget_active_activable(eltsub) { edouard@2920: edouard@2920: if(eltsub.inactive_style === undefined) edouard@2920: edouard@2920: eltsub.inactive_style = eltsub.inactive.getAttribute("style"); edouard@2920: edouard@2920: eltsub.inactive.setAttribute("style", "display:none"); edouard@2920: edouard@2920: if(eltsub.active_style !== undefined) edouard@2920: edouard@2920: eltsub.active.setAttribute("style", eltsub.active_style); edouard@2920: edouard@2920: console.log("active", eltsub); edouard@2920: edouard@2920: }; edouard@2920: edouard@2920: function widget_inactive_activable(eltsub) { edouard@2920: edouard@2920: if(eltsub.active_style === undefined) edouard@2920: edouard@2920: eltsub.active_style = eltsub.active.getAttribute("style"); edouard@2920: edouard@2920: eltsub.active.setAttribute("style", "display:none"); edouard@2920: edouard@2920: if(eltsub.inactive_style !== undefined) edouard@2920: edouard@2920: eltsub.inactive.setAttribute("style", eltsub.inactive_style); edouard@2920: edouard@2920: console.log("inactive", eltsub); edouard@2920: edouard@2920: }; edouard@2920: Edouard@2808: Edouard@2753: