svghmi/widget_circularslider.ysl2
author Edouard Tisserant
Fri, 06 May 2022 11:02:03 +0200
changeset 3472 2fb9849c6721
parent 3241 fe945f1f48b7
permissions -rw-r--r--
SVGHMI: fix syntax error in sprintf.js and force makefile to regen xslt files when sprintf.js changes
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
}