1

// widget_slider.ysl2

     2

     3

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

     4

    ||

     5

    class SliderWidget extends Widget{

     6

        frequency = 5;

     7

        range = undefined;

     8

        handle_orig = undefined;

     9

        scroll_size = 10;

    10

        min_size = 0.07;

    11

        fi = undefined;

    12

        curr_value = 0;

    13

        drag = false;

    14

        enTimer = false;

    15

        handle_click = undefined;

    16

        last_drag = false;

    17

    18

        dispatch(value) {

    19

            //save current value inside widget

    20

            this.curr_value = value;

    21

    22

            if(this.value_elt)

    23

                this.value_elt.textContent = String(value);

    24

    25

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

    26

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

    27

                this.update_DOM(value, this.handle_elt);

    28

            }

    29

        }

    30

    31

        update_DOM(value, elt){

    32

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

    33

            // check if handle is resizeable

    34

            if (this.scroll_size != undefined){ //size changes

    35

                //get parameters

    36

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

    37

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

    38

                let handle_min = totallength*this.min_size;

    39

    40

                let step = 1;

    41

                //check if range is bigger than  max displayed and recalculate step

    42

                if ((totallength/handle_min) < (max-min+1)){

    43

                    step = (max-min+1)/(totallength/handle_min-1);

    44

                }

    45

    46

                let kx,ky,offseY,offseX = undefined;

    47

                //scale on x or y axes

    48

                if (this.fi > 0.75){

    49

                    //get scale factor

    50

                    if(step > 1){

    51

                        ky = handle_min/this.handle_orig.height;

    52

                    }

    53

                    else{

    54

                        ky = (totallength-handle_min*(max-min))/this.handle_orig.height;

    55

                    }

    56

                    kx = 1;

    57

                    //get 0 offset to stay inside range

    58

                    offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky;

    59

                    offseX = 0;

    60

                    //get distance from value

    61

                    tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min;

    62

                }

    63

                else{

    64

                    //get scale factor

    65

                    if(step > 1){

    66

                        kx = handle_min/this.handle_orig.width;

    67

                    }

    68

                    else{

    69

                        kx = (totallength-handle_min*(max-min))/this.handle_orig.width;

    70

                    }

    71

                    ky = 1;

    72

                    //get 0 offset to stay inside range

    73

                    offseX = start.x - (this.handle_orig.x * kx);

    74

                    offseY = 0;

    75

                    //get distance from value

    76

                    tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min;

    77

                }

    78

                elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")");

    79

            }

    80

            else{ //size stays the same

    81

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

    82

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

    83

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

    84

            }

    85

    86

            // show or hide ghost if exists

    87

            if(this.setpoint_elt != undefined){

    88

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

    89

                    if(this.drag){

    90

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

    91

                    }else{

    92

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

    93

                    }

    94

                    this.last_drag = this.drag;

    95

                }

    96

            }

    97

        }

    98

    99

        on_release(evt) {

   100

            //unbind events

   101

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

   102

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

   103

   104

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

   105

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

   106

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

   107

   108

            //reset drag flag

   109

            if(this.drag){

   110

                this.drag = false;

   111

            }

   112

   113

            // get final position

   114

            this.update_position(evt);

   115

   116

        }

   117

   118

        on_drag(evt){

   119

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

   120

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

   121

                this.update_position(evt);

   122

   123

                //reset timer

   124

                this.enTimer = false;

   125

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

   126

            }

   127

        }

   128

   129

        update_position(evt){

   130

            var html_dist = 0;

   131

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

   132

   133

            //calculate size of widget in html

   134

            var range_borders = this.range_elt.getBoundingClientRect();

   135

            var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];

   136

            var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );

   137

   138

            //get range and mouse coordinates

   139

            var mouseX = undefined;

   140

            var mouseY = undefined;

   141

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

   142

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

   143

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

   144

            }

   145

            else{

   146

                mouseX = evt.pageX;

   147

                mouseY = evt.pageY;

   148

            }

   149

   150

            // calculate position

   151

            if (this.handle_click){ //if clicked on handle

   152

                let moveDist = 0, resizeAdd = 0;

   153

                let range_percent = 1;

   154

   155

                //set paramters for resizeable handle

   156

                if (this.scroll_size != undefined){

   157

                    // add one more object to stay inside range

   158

                    resizeAdd = 1;

   159

   160

                    //chack if range is bigger than display option and

   161

                    // calculate percent of range with out handle

   162

                    if(((max/(max*this.min_size)) < (max-min+1))){

   163

                        range_percent = 1-this.min_size;

   164

                    }

   165

                    else{

   166

                        range_percent = 1-(max-max*this.min_size*(max-min))/max;

   167

                    }

   168

                }

   169

   170

                //calculate value difference on x or y axis

   171

                if(this.fi > 0.7){

   172

                    moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi));

   173

                }

   174

                else{

   175

                    moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi));

   176

                }

   177

   178

                this.curr_value = Math.ceil(this.handle_click[2] + moveDist);

   179

            }

   180

            else{ //if clicked on widget

   181

                //get handle distance from mouse position

   182

                if (minX > mouseX && minY < mouseY){

   183

                    html_dist = 0;

   184

                }

   185

                else if (maxX < mouseX && maxY > mouseY){

   186

                    html_dist = range_length;

   187

                }

   188

                else{

   189

                    if(this.fi > 0.7){

   190

                        html_dist = (minY - mouseY)/Math.sin(this.fi);

   191

                    }

   192

                    else{

   193

                        html_dist = (mouseX - minX)/Math.cos(this.fi);

   194

                    }

   195

                }

   196

                //calculate distance

   197

                this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);

   198

            }

   199

   200

            //check if in range

   201

            if (this.curr_value > max){

   202

                this.curr_value = max;

   203

            }

   204

            else if (this.curr_value < min){

   205

                this.curr_value = min;

   206

            }

   207

   208

            this.apply_hmi_value(0, this.curr_value);

   209

   210

            //redraw handle

   211

            this.request_animate();

   212

   213

        }

   214

   215

        animate(){

   216

            // redraw handle on screen refresh

   217

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

   218

            if(this.setpoint_elt != undefined){

   219

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

   220

            }

   221

            else{

   222

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

   223

            }

   224

        }

   225

   226

        on_select(evt){

   227

            //enable drag flag and timer

   228

            this.drag = true;

   229

            this.enTimer = true;

   230

   231

            //bind events

   232

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

   233

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

   234

   235

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

   236

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

   237

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

   238

   239

            // check if handle was pressed

   240

            if (evt.currentTarget == this.handle_elt){

   241

                //get mouse position on the handle

   242

                let mouseX = undefined;

   243

                let mouseY = undefined;

   244

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

   245

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

   246

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

   247

                }

   248

                else{

   249

                    mouseX = evt.pageX;

   250

                    mouseY = evt.pageY;

   251

                }

   252

                //save coordinates and orig value

   253

                this.handle_click = [mouseX,mouseY,this.curr_value];

   254

            }

   255

            else{

   256

                // get new handle position and reset if handle was not pressed

   257

                this.handle_click = undefined;

   258

                this.update_position(evt);

   259

            }

   260

   261

            //prevent next events

   262

            evt.stopPropagation();

   263

        }

   264

   265

        init() {

   266

            //set min max value if not defined

   267

            let min = this.min_elt ?

   268

                        Number(this.min_elt.textContent) :

   269

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

   270

            let max = this.max_elt ?

   271

                        Number(this.max_elt.textContent) :

   272

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

   273

   274

            // save initial parameters

   275

            this.range_elt.style.strokeMiterlimit="0";

   276

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

   277

            let start = this.range_elt.getPointAtLength(0);

   278

            let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());

   279

            this.fi = Math.atan2(start.y-end.y, end.x-start.x);

   280

            this.handle_orig = this.handle_elt.getBBox();

   281

   282

            //bind functions

   283

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

   284

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

   285

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

   286

   287

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

   288

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

   289

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

   290

   291

            if(this.setpoint_elt != undefined){

   292

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

   293

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

   294

            }

   295

   296

        }

   297

    }

   298

    ||

   299

   300

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

   301

    param "hmi_element";

   302

    labels("handle range");

   303

    optional_labels("value min max setpoint");

   304

    |,

   305

}