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;

    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

    47

    48

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

    49

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

    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

   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){

   283

                }

   284

                else{

   290

            }

   291

            else{

   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);

   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");

   346

    |,

   347

}