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 = undefined;

    10

        scroll_range = 0;

    11

        scroll_visible = 7;

    12

        min_size = 0.07;

    13

        fi = undefined;

    14

        curr_value = 0;

    15

        drag = false;

    16

        enTimer = false;

    17

        handle_click = undefined;

    18

        last_drag = false;

    19

    20

        dispatch(value,oldval, index) {

    21

            if (index == 0){

    22

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

    23

                //save current value inside widget

    24

                this.curr_value = value;

    25

    26

                //check if in range

    27

                if (this.curr_value > max){

    28

                    this.curr_value = max;

    29

                    this.apply_hmi_value(0, this.curr_value);

    30

                }

    31

                else if (this.curr_value < min){

    32

                    this.curr_value = min;

    33

                    this.apply_hmi_value(0, this.curr_value);

    34

                }

    35

    36

                if(this.value_elt)

    37

                    this.value_elt.textContent = String(value);

    38

            }

    39

            else if(index == 1){

    40

                this.scroll_range = value;

    41

                this.set_scroll();

    42

            }

    43

            else if(index == 2){

    44

                this.scroll_visible = value;

    45

                this.set_scroll();

    46

            }

    47

    48

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

    49

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

    50

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

    51

            }

    52

        }

    53

    54

        set_scroll(){

    55

            //check if range is bigger than visible and set scroll size

    56

            if(this.scroll_range > this.scroll_visible){

    57

                this.scroll_size = this.scroll_range - this.scroll_visible;

    58

                this.range[0] = 0;

    59

                this.range[1] = this.scroll_size;

    60

            }

    61

            else{

    62

                this.scroll_size = 1;

    63

                this.range[0] = 0;

    64

                this.range[1] = 1;

    65

            }

    66

        }

    67

    68

        update_DOM(value, elt){

    69

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

    70

            // check if handle is resizeable

    71

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

    72

                //get parameters

    73

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

    74

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

    75

                let handle_min = totallength*this.min_size;

    76

    77

                let step = 1;

    78

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

    79

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

    80

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

    81

                }

    82

    83

                let kx,ky,offseY,offseX = undefined;

    84

                //scale on x or y axes

    85

                if (this.fi > 0.75){

    86

                    //get scale factor

    87

                    if(step > 1){

    88

                        ky = handle_min/this.handle_orig.height;

    89

                    }

    90

                    else{

    91

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

    92

                    }

    93

                    kx = 1;

    94

                    //get 0 offset to stay inside range

    95

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

    96

                    offseX = 0;

    97

                    //get distance from value

    98

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

    99

                }

   100

                else{

   101

                    //get scale factor

   102

                    if(step > 1){

   103

                        kx = handle_min/this.handle_orig.width;

   104

                    }

   105

                    else{

   106

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

   107

                    }

   108

                    ky = 1;

   109

                    //get 0 offset to stay inside range

   110

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

   111

                    offseY = 0;

   112

                    //get distance from value

   113

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

   114

                }

   115

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

   116

            }

   117

            else{ //size stays the same

   118

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

   119

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

   120

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

   121

            }

   122

   123

            // show or hide ghost if exists

   124

            if(this.setpoint_elt != undefined){

   125

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

   126

                    if(this.drag){

   127

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

   128

                    }else{

   129

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

   130

                    }

   131

                    this.last_drag = this.drag;

   132

                }

   133

            }

   134

        }

   135

   136

        on_release(evt) {

   137

            //unbind events

   138

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

   139

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

   140

   141

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

   142

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

   143

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

   144

   145

            //reset drag flag

   146

            if(this.drag){

   147

                this.drag = false;

   148

            }

   149

   150

            // get final position

   151

            this.update_position(evt);

   152

   153

        }

   154

   155

        on_drag(evt){

   156

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

   157

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

   158

                this.update_position(evt);

   159

   160

                //reset timer

   161

                this.enTimer = false;

   162

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

   163

            }

   164

        }

   165

   166

        update_position(evt){

   167

            var html_dist = 0;

   168

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

   169

   170

            //calculate size of widget in html

   171

            var range_borders = this.range_elt.getBoundingClientRect();

   172

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

   173

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

   174

   175

            //get range and mouse coordinates

   176

            var mouseX = undefined;

   177

            var mouseY = undefined;

   178

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

   179

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

   180

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

   181

            }

   182

            else{

   183

                mouseX = evt.pageX;

   184

                mouseY = evt.pageY;

   185

            }

   186

   187

            // calculate position

   188

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

   189

                let moveDist = 0, resizeAdd = 0;

   190

                let range_percent = 1;

   191

   192

                //set paramters for resizeable handle

   193

                if (this.scroll_size != undefined){

   194

                    // add one more object to stay inside range

   195

                    resizeAdd = 1;

   196

   197

                    //chack if range is bigger than display option and

   198

                    // calculate percent of range with out handle

   199

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

   200

                        range_percent = 1-this.min_size;

   201

                    }

   202

                    else{

   203

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

   204

                    }

   205

                }

   206

   207

                //calculate value difference on x or y axis

   208

                if(this.fi > 0.7){

   209

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

   210

                }

   211

                else{

   212

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

   213

                }

   214

   215

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

   216

            }

   217

            else{ //if clicked on widget

   218

                //get handle distance from mouse position

   219

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

   220

                    html_dist = 0;

   221

                }

   222

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

   223

                    html_dist = range_length;

   224

                }

   225

                else{

   226

                    if(this.fi > 0.7){

   227

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

   228

                    }

   229

                    else{

   230

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

   231

                    }

   232

                }

   233

                //calculate distance

   234

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

   235

            }

   236

   237

            //check if in range and apply

   238

            if (this.curr_value > max){

   239

                this.curr_value = max;

   240

            }

   241

            else if (this.curr_value < min){

   242

                this.curr_value = min;

   243

            }

   244

            this.apply_hmi_value(0, this.curr_value);

   245

   246

            //redraw handle

   247

            this.request_animate();

   248

   249

        }

   250

   251

        animate(){

   252

            // redraw handle on screen refresh

   253

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

   254

            if(this.setpoint_elt != undefined){

   255

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

   256

            }

   257

            else{

   258

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

   259

            }

   260

        }

   261

   262

        on_select(evt){

   263

            //enable drag flag and timer

   264

            this.drag = true;

   265

            this.enTimer = true;

   266

   267

            //bind events

   268

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

   269

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

   270

   271

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

   272

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

   273

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

   274

   275

            // check if handle was pressed

   276

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

   277

                //get mouse position on the handle

   278

                let mouseX = undefined;

   279

                let mouseY = undefined;

   280

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

   281

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

   282

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

   283

                }

   284

                else{

   285

                    mouseX = evt.pageX;

   286

                    mouseY = evt.pageY;

   287

                }

   288

                //save coordinates and orig value

   289

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

   290

            }

   291

            else{

   292

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

   293

                this.handle_click = undefined;

   294

                this.update_position(evt);

   295

            }

   296

   297

            //prevent next events

   298

            evt.stopPropagation();

   299

   300

        }

   301

   302

   303

        init() {

   304

            //set min max value if not defined

   305

            let min = this.min_elt ?

   306

                        Number(this.min_elt.textContent) :

   307

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

   308

            let max = this.max_elt ?

   309

                        Number(this.max_elt.textContent) :

   310

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

   311

   312

   313

            // save initial parameters

   314

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

   315

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

   316

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

   317

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

   318

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

   319

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

   320

   321

            //bind functions

   322

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

   323

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

   324

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

   325

   326

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

   327

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

   328

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

   329

            //touch recognised as page drag without next command

   330

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

   331

   332

            //save ghost style

   333

            if(this.setpoint_elt != undefined){

   334

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

   335

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

   336

            }

   337

   338

        }

   339

    }

   340

    ||

   341

   342

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

   343

    param "hmi_element";

   344

    labels("handle range");

   345

    optional_labels("value min max setpoint");

   346

    |,

   347

}