svghmi/widget_circularslider.ysl2
author Edouard Tisserant <edouard.tisserant@gmail.com>
Mon, 04 Oct 2021 07:41:18 +0200
changeset 3361 d955f2a3fabf
parent 3241 fe945f1f48b7
permissions -rw-r--r--
SVGHMI: remove "value" element in meter and circularbar widget. Adding support for printf like formating make widget label too heavy. It is better to use Display widget instead.
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     1
// widget_circuralslider.ysl2
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     2
3241
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     3
widget_desc("CircularSlider") {
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     4
    longdesc
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     5
    ||
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     6
    CircularSlider - DEPRECATED, to be replaced by PathSlider
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     7
    This widget moves "handle" labeled group along "range" labeled
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     8
    arc, according to value of the single accepted variable.
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
     9
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    10
    If "min" a "max" labeled texts are provided, or if first and second
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    11
    argument are given, then they are used as respective minimum and maximum
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    12
    value. Otherwise, value is expected to be in between 0 and 100.
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    13
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    14
    If "value" labeled text is found, then its content is replaced by value.
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    15
    During drag, "setpoint" labeled group is moved to position defined by user
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    16
    while "handle" reflects current value from variable.
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    17
    ||
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    18
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    19
    shortdesc > CircularSlider - DEPRECATED
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    20
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    21
    arg name="min" count="optional" accepts="int,real" > minimum value
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    22
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    23
    arg name="min" count="optional" accepts="int,real" > maximum value
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    24
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    25
    // TODO: add printf-like format
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    26
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    27
    path name="value" accepts="HMI_INT,HMI_REAL" > Value to display
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    28
    
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    29
}
fe945f1f48b7 SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3232
diff changeset
    30
3232
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3062
diff changeset
    31
widget_class("CircularSlider")
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    32
    ||
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    33
        frequency = 5;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    34
        range = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    35
        circle = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    36
        handle_pos = undefined;
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    37
        curr_value = 0;
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    38
        drag = false;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    39
        enTimer = false;
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    40
        last_drag = false;
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    41
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    42
        dispatch(value) {
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    43
            let [min,max,start,totallength] = this.range;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    44
            //save current value inside widget
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    45
            this.curr_value = value;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    46
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    47
            //check if in range
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    48
            if (this.curr_value > max){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    49
                this.curr_value = max;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    50
                this.apply_hmi_value(0, this.curr_value);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    51
            }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    52
            else if (this.curr_value < min){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    53
                this.curr_value = min;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    54
                this.apply_hmi_value(0, this.curr_value);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    55
            }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    56
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    57
            if(this.value_elt)
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    58
                this.value_elt.textContent = String(value);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    59
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    60
            //don't update if draging and setpoint ghost doesn't exist
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    61
            if(!this.drag || (this.setpoint_elt != undefined)){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    62
                this.update_DOM(value, this.handle_elt);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    63
            }
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    64
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    65
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    66
        update_DOM(value, elt){
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    67
            let [min,max,totalDistance] = this.range;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    68
            let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance)));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    69
            let tip = this.range_elt.getPointAtLength(length);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    70
            elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    71
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    72
            // show or hide ghost if exists
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    73
            if(this.setpoint_elt != undefined){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    74
                if(this.last_drag!= this.drag){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    75
                    if(this.drag){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    76
                        this.setpoint_elt.setAttribute("style", this.setpoint_style);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    77
                    }else{
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    78
                        this.setpoint_elt.setAttribute("style", "display:none");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    79
                    }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    80
                    this.last_drag = this.drag;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    81
                }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    82
            }
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    83
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    84
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    85
        on_release(evt) {
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    86
            //unbind events
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    87
            window.removeEventListener("touchmove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    88
            window.removeEventListener("mousemove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    89
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    90
            window.removeEventListener("mouseup", this.bound_on_release, true)
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    91
            window.removeEventListener("touchend", this.bound_on_release, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    92
            window.removeEventListener("touchcancel", this.bound_on_release, true);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    93
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    94
            //reset drag flag
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    95
            if(this.drag){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    96
                this.drag = false;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    97
            }
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    98
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    99
            // get final position
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   100
            this.update_position(evt);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   101
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   102
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   103
        on_drag(evt){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   104
            //ignore drag event for X amount of time and if not selected
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   105
            if(this.enTimer && this.drag){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   106
                this.update_position(evt);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   107
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   108
                //reset timer
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   109
                this.enTimer = false;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   110
                setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   111
            }
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   112
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   113
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   114
        update_position(evt){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   115
            if(this.drag && this.enTimer){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   116
                var svg_dist = 0;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   117
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   118
                //calculate center of widget in html
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   119
                // --TODO maybe it would be better to bind this part to window change size event ???
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   120
                let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   121
                let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   122
                let htmlCirc = this.range_elt.getBoundingClientRect();
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   123
                let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   124
                let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   125
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   126
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   127
                //get mouse coordinates
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   128
                let mouseX = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   129
                let mouseY = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   130
                if (evt.type.startsWith("touch")){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   131
                    mouseX = Math.ceil(evt.touches[0].clientX);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   132
                    mouseY = Math.ceil(evt.touches[0].clientY);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   133
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   134
                else{
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   135
                    mouseX = evt.pageX;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   136
                    mouseY = evt.pageY;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   137
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   138
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   139
                //calculate angle
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   140
                let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   141
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   142
                // transform from 0 to 2PI
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   143
                if (fi > 0){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   144
                    fi = 2*Math.PI-fi;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   145
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   146
                else{
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   147
                    fi = -fi;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   148
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   149
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   150
                //offset it to 0
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   151
                fi = fi - fiStart;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   152
                if (fi < 0){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   153
                    fi = fi + 2*Math.PI;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   154
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   155
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   156
                //get handle distance from mouse position
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   157
                if(fi<fiEnd){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   158
                   this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   159
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   160
                else if(fiEnd<fi && fi<fiEnd+minMax){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   161
                    this.curr_value = this.range[1];
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   162
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   163
                else{
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   164
                    this.curr_value = this.range[0];
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   165
                }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   166
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   167
                //apply value to hmi
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   168
                this.apply_hmi_value(0, Math.ceil(this.curr_value));
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   169
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   170
                //redraw handle
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   171
                this.request_animate();
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   172
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   173
            }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   174
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   175
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   176
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   177
        animate(){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   178
            // redraw handle on screen refresh
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   179
            // check if setpoint(ghost) handle exsist otherwise update main handle
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   180
            if(this.setpoint_elt != undefined){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   181
                this.update_DOM(this.curr_value, this.setpoint_elt);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   182
            }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   183
            else{
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   184
                this.update_DOM(this.curr_value, this.handle_elt);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   185
            }
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   186
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   187
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   188
        on_select(evt){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   189
            //enable drag flag and timer
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   190
            this.drag = true;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   191
            this.enTimer = true;
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   192
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   193
            //bind events
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   194
            window.addEventListener("touchmove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   195
            window.addEventListener("mousemove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   196
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   197
            window.addEventListener("mouseup", this.bound_on_release, true);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   198
            window.addEventListener("touchend", this.bound_on_release, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   199
            window.addEventListener("touchcancel", this.bound_on_release, true);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   200
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   201
            //update postion on mouse press
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   202
            this.update_position(evt);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   203
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   204
            //prevent next events
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   205
            evt.stopPropagation();
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   206
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   207
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   208
        init() {
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   209
            //get min max
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   210
            let min = this.min_elt ?
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   211
                        Number(this.min_elt.textContent) :
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   212
                        this.args.length >= 1 ? this.args[0] : 0;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   213
            let max = this.max_elt ?
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   214
                        Number(this.max_elt.textContent) :
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   215
                        this.args.length >= 2 ? this.args[1] : 100;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   216
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   217
            //fiStart ==> offset
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   218
            let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   219
            let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   220
            fiEnd = fiEnd - fiStart;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   221
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   222
            //fiEnd ==> size of angle
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   223
            if (fiEnd < 0){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   224
                fiEnd = 2*Math.PI + fiEnd;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   225
            }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   226
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   227
            //min max barrier angle
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   228
            let minMax = (2*Math.PI - fiEnd)/2;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   229
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   230
            //get parameters from svg
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   231
            let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   232
            let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   233
            this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   234
            this.range = [min, max,this.range_elt.getTotalLength()];
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   235
            let cPos = this.range_elt.getBBox();
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   236
            this.handle_pos = this.range_elt.getPointAtLength(0);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   237
            this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   238
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   239
            //bind functions
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   240
            this.bound_on_select = this.on_select.bind(this);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   241
            this.bound_on_release = this.on_release.bind(this);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   242
            this.on_bound_drag = this.on_drag.bind(this);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   243
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   244
            this.handle_elt.addEventListener("mousedown", this.bound_on_select);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   245
            this.element.addEventListener("mousedown", this.bound_on_select);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   246
            this.element.addEventListener("touchstart", this.bound_on_select);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   247
            //touch recognised as page drag without next command
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   248
            document.body.addEventListener("touchstart", function(e){}, false);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   249
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   250
            //save ghost style
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   251
            //save ghost style
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   252
            if(this.setpoint_elt != undefined){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   253
                this.setpoint_style = this.setpoint_elt.getAttribute("style");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   254
                this.setpoint_elt.setAttribute("style", "display:none");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   255
            }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   256
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   257
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   258
    ||
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   259
3232
7bdb766c2a4d SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3062
diff changeset
   260
widget_defs("CircularSlider") {
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   261
    labels("handle range");
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   262
    optional_labels("value min max setpoint");
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   263
    |,
3018
Edouard Tisserant
parents: 3013
diff changeset
   264
}