1

// widget_circuralslider.ysl2

     2

     3

template "widget[@type='CircularSlider']", mode="widget_class"

     4

    ||

     5

    class CircularSliderWidget extends Widget{

     6

        frequency = 5;

     7

        range = undefined;

     8

        circle = undefined;

     9

        handle_pos = undefined;

    10

        curr_value = 0;

    11

        drag = false;

    12

        enTimer = false;

    13

        last_drag = false;

    14

    15

        dispatch(value) {

    16

            let [min,max,start,totallength] = this.range;

    17

            //save current value inside widget

    18

            this.curr_value = value;

    19

    20

            //check if in range

    21

            if (this.curr_value > max){

    22

                this.curr_value = max;

    23

                this.apply_hmi_value(0, this.curr_value);

    24

            }

    25

            else if (this.curr_value < min){

    26

                this.curr_value = min;

    27

                this.apply_hmi_value(0, this.curr_value);

    28

            }

    29

    30

            if(this.value_elt)

    31

                this.value_elt.textContent = String(value);

    32

    33

            //don't update if draging and setpoint ghost doesn't exist

    34

            if(!this.drag || (this.setpoint_elt != undefined)){

    35

                this.update_DOM(value, this.handle_elt);

    36

            }

    37

        }

    38

    39

        update_DOM(value, elt){

    40

            let [min,max,totalDistance] = this.range;

    41

            let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance)));

    42

            let tip = this.range_elt.getPointAtLength(length);

    43

            elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");

    44

    45

            // show or hide ghost if exists

    46

            if(this.setpoint_elt != undefined){

    47

                if(this.last_drag!= this.drag){

    48

                    if(this.drag){

    49

                        this.setpoint_elt.setAttribute("style", this.setpoint_style);

    50

                    }else{

    51

                        this.setpoint_elt.setAttribute("style", "display:none");

    52

                    }

    53

                    this.last_drag = this.drag;

    54

                }

    55

            }

    56

        }

    57

    58

        on_release(evt) {

    59

            //unbind events

    60

            window.removeEventListener("touchmove", this.on_bound_drag, true);

    61

            window.removeEventListener("mousemove", this.on_bound_drag, true);

    62

    63

            window.removeEventListener("mouseup", this.bound_on_release, true)

    64

            window.removeEventListener("touchend", this.bound_on_release, true);

    65

            window.removeEventListener("touchcancel", this.bound_on_release, true);

    66

    67

            //reset drag flag

    68

            if(this.drag){

    69

                this.drag = false;

    70

            }

    71

    72

            // get final position

    73

            this.update_position(evt);

    74

        }

    75

    76

        on_drag(evt){

    77

            //ignore drag event for X amount of time and if not selected

    78

            if(this.enTimer && this.drag){

    79

                this.update_position(evt);

    80

    81

                //reset timer

    82

                this.enTimer = false;

    83

                setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);

    84

            }

    85

        }

    86

    87

        update_position(evt){

    88

            if(this.drag && this.enTimer){

    89

                var svg_dist = 0;

    90

    91

                //calculate center of widget in html

    92

                // --TODO maybe it would be better to bind this part to window change size event ???

    93

                let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;

    94

                let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;

    95

                let htmlCirc = this.range_elt.getBoundingClientRect();

    96

                let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;

    97

                let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;

    98

    99

   100

                //get mouse coordinates

   101

                let mouseX = undefined;

   102

                let mouseY = undefined;

   103

                if (evt.type.startsWith("touch")){

   104

                    mouseX = Math.ceil(evt.touches[0].clientX);

   105

                    mouseY = Math.ceil(evt.touches[0].clientY);

   106

                }

   107

                else{

   108

                    mouseX = evt.pageX;

   109

                    mouseY = evt.pageY;

   110

                }

   111

   112

                //calculate angle

   113

                let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);

   114

   115

                // transform from 0 to 2PI

   116

                if (fi > 0){

   117

                    fi = 2*Math.PI-fi;

   118

                }

   119

                else{

   120

                    fi = -fi;

   121

                }

   122

   123

                //offset it to 0

   124

                fi = fi - fiStart;

   125

                if (fi < 0){

   126

                    fi = fi + 2*Math.PI;

   127

                }

   128

   129

                //get handle distance from mouse position

   130

                if(fi<fiEnd){

   131

                   this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);

   132

                }

   133

                else if(fiEnd<fi && fi<fiEnd+minMax){

   134

                    this.curr_value = this.range[1];

   135

                }

   136

                else{

   137

                    this.curr_value = this.range[0];

   138

                }

   139

   140

                //apply value to hmi

   141

                this.apply_hmi_value(0, Math.ceil(this.curr_value));

   142

   143

                //redraw handle

   144

                this.request_animate();

   145

   146

            }

   147

   148

        }

   149

   150

        animate(){

   151

            // redraw handle on screen refresh

   152

            // check if setpoint(ghost) handle exsist otherwise update main handle

   153

            if(this.setpoint_elt != undefined){

   154

                this.update_DOM(this.curr_value, this.setpoint_elt);

   155

            }

   156

            else{

   157

                this.update_DOM(this.curr_value, this.handle_elt);

   158

            }

   159

        }

   160

   161

        on_select(evt){

   162

            //enable drag flag and timer

   163

            this.drag = true;

   164

            this.enTimer = true;

   165

   166

            //bind events

   167

            window.addEventListener("touchmove", this.on_bound_drag, true);

   168

            window.addEventListener("mousemove", this.on_bound_drag, true);

   169

   170

            window.addEventListener("mouseup", this.bound_on_release, true);

   171

            window.addEventListener("touchend", this.bound_on_release, true);

   172

            window.addEventListener("touchcancel", this.bound_on_release, true);

   173

   174

            //update postion on mouse press

   175

            this.update_position(evt);

   176

   177

            //prevent next events

   178

            evt.stopPropagation();

   179

        }

   180

   181

        init() {

   182

            //get min max

   183

            let min = this.min_elt ?

   184

                        Number(this.min_elt.textContent) :

   185

                        this.args.length >= 1 ? this.args[0] : 0;

   186

            let max = this.max_elt ?

   187

                        Number(this.max_elt.textContent) :

   188

                        this.args.length >= 2 ? this.args[1] : 100;

   189

   190

            //fiStart ==> offset

   191

            let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));

   192

            let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));

   193

            fiEnd = fiEnd - fiStart;

   194

   195

            //fiEnd ==> size of angle

   196

            if (fiEnd < 0){

   197

                fiEnd = 2*Math.PI + fiEnd;

   198

            }

   199

   200

            //min max barrier angle

   201

            let minMax = (2*Math.PI - fiEnd)/2;

   202

   203

            //get parameters from svg

   204

            let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));

   205

            let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));

   206

            this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object

   207

            this.range = [min, max,this.range_elt.getTotalLength()];

   208

            let cPos = this.range_elt.getBBox();

   209

            this.handle_pos = this.range_elt.getPointAtLength(0);

   210

            this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];

   211

   212

            //bind functions

   213

            this.bound_on_select = this.on_select.bind(this);

   214

            this.bound_on_release = this.on_release.bind(this);

   215

            this.on_bound_drag = this.on_drag.bind(this);

   216

   217

            this.handle_elt.addEventListener("mousedown", this.bound_on_select);

   218

            this.element.addEventListener("mousedown", this.bound_on_select);

   219

            this.element.addEventListener("touchstart", this.bound_on_select);

   220

            //touch recognised as page drag without next command

   221

            document.body.addEventListener("touchstart", function(e){}, false);

   222

   223

            //save ghost style

   224

            //save ghost style

   225

            if(this.setpoint_elt != undefined){

   226

                this.setpoint_style = this.setpoint_elt.getAttribute("style");

   227

                this.setpoint_elt.setAttribute("style", "display:none");

   228

            }

   229

   230

        }

   231

    }

   232

    ||

   233

   234

template "widget[@type='CircularSlider']", mode="widget_defs" {

   235

    param "hmi_element";

   236

    labels("handle range");

   237

    optional_labels("value min max setpoint");

   238

    |,

   239

}