1

// widget_circuralslider.ysl2

     2

     3

widget_class("CircularSlider")

     4

    ||

     5

        frequency = 5;

     6

        range = undefined;

     7

        circle = undefined;

     8

        handle_pos = undefined;

     9

        curr_value = 0;

    10

        drag = false;

    11

        enTimer = false;

    12

        last_drag = false;

    13

    14

        dispatch(value) {

    15

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

    16

            //save current value inside widget

    17

            this.curr_value = value;

    18

    19

            //check if in range

    20

            if (this.curr_value > max){

    21

                this.curr_value = max;

    22

                this.apply_hmi_value(0, this.curr_value);

    23

            }

    24

            else if (this.curr_value < min){

    25

                this.curr_value = min;

    26

                this.apply_hmi_value(0, this.curr_value);

    27

            }

    28

    29

            if(this.value_elt)

    30

                this.value_elt.textContent = String(value);

    31

    32

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

    33

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

    34

                this.update_DOM(value, this.handle_elt);

    35

            }

    36

        }

    37

    38

        update_DOM(value, elt){

    39

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

    40

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

    41

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

    42

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

    43

    44

            // show or hide ghost if exists

    45

            if(this.setpoint_elt != undefined){

    46

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

    47

                    if(this.drag){

    48

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

    49

                    }else{

    50

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

    51

                    }

    52

                    this.last_drag = this.drag;

    53

                }

    54

            }

    55

        }

    56

    57

        on_release(evt) {

    58

            //unbind events

    59

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

    60

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

    61

    62

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

    63

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

    64

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

    65

    66

            //reset drag flag

    67

            if(this.drag){

    68

                this.drag = false;

    69

            }

    70

    71

            // get final position

    72

            this.update_position(evt);

    73

        }

    74

    75

        on_drag(evt){

    76

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

    77

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

    78

                this.update_position(evt);

    79

    80

                //reset timer

    81

                this.enTimer = false;

    82

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

    83

            }

    84

        }

    85

    86

        update_position(evt){

    87

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

    88

                var svg_dist = 0;

    89

    90

                //calculate center of widget in html

    91

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

    92

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

    93

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

    94

                let htmlCirc = this.range_elt.getBoundingClientRect();

    95

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

    96

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

    97

    98

    99

                //get mouse coordinates

   100

                let mouseX = undefined;

   101

                let mouseY = undefined;

   102

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

   103

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

   104

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

   105

                }

   106

                else{

   107

                    mouseX = evt.pageX;

   108

                    mouseY = evt.pageY;

   109

                }

   110

   111

                //calculate angle

   112

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

   113

   114

                // transform from 0 to 2PI

   115

                if (fi > 0){

   116

                    fi = 2*Math.PI-fi;

   117

                }

   118

                else{

   119

                    fi = -fi;

   120

                }

   121

   122

                //offset it to 0

   123

                fi = fi - fiStart;

   124

                if (fi < 0){

   125

                    fi = fi + 2*Math.PI;

   126

                }

   127

   128

                //get handle distance from mouse position

   129

                if(fi<fiEnd){

   130

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

   131

                }

   132

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

   133

                    this.curr_value = this.range[1];

   134

                }

   135

                else{

   136

                    this.curr_value = this.range[0];

   137

                }

   138

   139

                //apply value to hmi

   140

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

   141

   142

                //redraw handle

   143

                this.request_animate();

   144

   145

            }

   146

   147

        }

   148

   149

        animate(){

   150

            // redraw handle on screen refresh

   151

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

   152

            if(this.setpoint_elt != undefined){

   153

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

   154

            }

   155

            else{

   156

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

   157

            }

   158

        }

   159

   160

        on_select(evt){

   161

            //enable drag flag and timer

   162

            this.drag = true;

   163

            this.enTimer = true;

   164

   165

            //bind events

   166

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

   167

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

   168

   169

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

   170

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

   171

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

   172

   173

            //update postion on mouse press

   174

            this.update_position(evt);

   175

   176

            //prevent next events

   177

            evt.stopPropagation();

   178

        }

   179

   180

        init() {

   181

            //get min max

   182

            let min = this.min_elt ?

   183

                        Number(this.min_elt.textContent) :

   184

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

   185

            let max = this.max_elt ?

   186

                        Number(this.max_elt.textContent) :

   187

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

   188

   189

            //fiStart ==> offset

   190

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

   191

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

   192

            fiEnd = fiEnd - fiStart;

   193

   194

            //fiEnd ==> size of angle

   195

            if (fiEnd < 0){

   196

                fiEnd = 2*Math.PI + fiEnd;

   197

            }

   198

   199

            //min max barrier angle

   200

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

   201

   202

            //get parameters from svg

   203

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

   204

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

   205

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

   206

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

   207

            let cPos = this.range_elt.getBBox();

   208

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

   209

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

   210

   211

            //bind functions

   212

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

   213

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

   214

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

   215

   216

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

   217

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

   218

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

   219

            //touch recognised as page drag without next command

   220

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

   221

   222

            //save ghost style

   223

            //save ghost style

   224

            if(this.setpoint_elt != undefined){

   225

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

   226

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

   227

            }

   228

   229

        }

   230

    ||

   231

   232

widget_defs("CircularSlider") {

   233

    param "hmi_element";

   234

    labels("handle range");

   235

    optional_labels("value min max setpoint");

   236

    |,

   237

}