1

// widget_slider.ysl2

     2

     3

widget_desc("Slider") {

     4

    longdesc

     5

    || 

     6

    Slider - DEPRECATED - use ScrollBar or PathSlider instead

     7

    ||

     8

     9

    shortdesc > Slider - DEPRECATED - use ScrollBar instead

    10

    11

    path name="value" accepts="HMI_INT" > value

    12

    path name="range" accepts="HMI_INT" > range

    13

    path name="visible" accepts="HMI_INT" > visible

    14

    15

}

    16

    17

widget_class("Slider")

    18

    ||

    19

        frequency = 5;

    20

        range = undefined;

    21

        handle_orig = undefined;

    22

        scroll_size = undefined;

    23

        scroll_range = 0;

    24

        scroll_visible = 7;

    25

        min_size = 0.07;

    26

        fi = undefined;

    27

        curr_value = 0;

    28

        drag = false;

    29

        enTimer = false;

    30

        handle_click = undefined;

    31

        last_drag = false;

    32

    33

        dispatch(value,oldval, index) {

    34

            if (index == 0){

    35

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

    36

                //save current value inside widget

    37

                this.curr_value = value;

    38

    39

                //check if in range

    40

                if (this.curr_value > max){

    41

                    this.curr_value = max;

    42

                    this.apply_hmi_value(0, this.curr_value);

    43

                }

    44

                else if (this.curr_value < min){

    45

                    this.curr_value = min;

    46

                    this.apply_hmi_value(0, this.curr_value);

    47

                }

    48

    49

                if(this.value_elt)

    50

                    this.value_elt.textContent = String(value);

    51

            }

    52

            else if(index == 1){

    53

                this.scroll_range = value;

    54

                this.set_scroll();

    55

            }

    56

            else if(index == 2){

    57

                this.scroll_visible = value;

    58

                this.set_scroll();

    59

            }

    60

    61

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

    62

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

    63

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

    64

            }

    65

        }

    66

    67

        set_scroll(){

    68

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

    69

            if(this.scroll_range > this.scroll_visible){

    70

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

    71

                this.range[0] = 0;

    72

                this.range[1] = this.scroll_size;

    73

            }

    74

            else{

    75

                this.scroll_size = 1;

    76

                this.range[0] = 0;

    77

                this.range[1] = 1;

    78

            }

    79

        }

    80

    81

        update_DOM(value, elt){

    82

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

    83

            // check if handle is resizeable

    84

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

    85

                //get parameters

    86

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

    87

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

    88

                let handle_min = totallength*this.min_size;

    89

    90

                let step = 1;

    91

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

    92

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

    93

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

    94

                }

    95

    96

                let kx,ky,offseY,offseX = undefined;

    97

                //scale on x or y axes

    98

                if (this.fi > 0.75){

    99

                    //get scale factor

   100

                    if(step > 1){

   101

                        ky = handle_min/this.handle_orig.height;

   102

                    }

   103

                    else{

   104

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

   105

                    }

   106

                    kx = 1;

   107

                    //get 0 offset to stay inside range

   108

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

   109

                    offseX = 0;

   110

                    //get distance from value

   111

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

   112

                }

   113

                else{

   114

                    //get scale factor

   115

                    if(step > 1){

   116

                        kx = handle_min/this.handle_orig.width;

   117

                    }

   118

                    else{

   119

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

   120

                    }

   121

                    ky = 1;

   122

                    //get 0 offset to stay inside range

   123

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

   124

                    offseY = 0;

   125

                    //get distance from value

   126

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

   127

                }

   128

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

   129

            }

   130

            else{ //size stays the same

   131

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

   132

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

   133

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

   134

            }

   135

   136

            // show or hide ghost if exists

   137

            if(this.setpoint_elt != undefined){

   138

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

   139

                    if(this.drag){

   140

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

   141

                    }else{

   142

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

   143

                    }

   144

                    this.last_drag = this.drag;

   145

                }

   146

            }

   147

        }

   148

   149

        on_release(evt) {

   150

            //unbind events

   151

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

   152

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

   153

   154

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

   155

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

   156

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

   157

   158

            //reset drag flag

   159

            if(this.drag){

   160

                this.drag = false;

   161

            }

   162

   163

            // get final position

   164

            this.update_position(evt);

   165

   166

        }

   167

   168

        on_drag(evt){

   169

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

   170

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

   171

                this.update_position(evt);

   172

   173

                //reset timer

   174

                this.enTimer = false;

   175

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

   176

            }

   177

        }

   178

   179

        update_position(evt){

   180

            var html_dist = 0;

   181

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

   182

   183

            //calculate size of widget in html

   184

            var range_borders = this.range_elt.getBoundingClientRect();

   185

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

   186

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

   187

   188

            //get range and mouse coordinates

   189

            var mouseX = undefined;

   190

            var mouseY = undefined;

   191

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

   192

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

   193

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

   194

            }

   195

            else{

   196

                mouseX = evt.pageX;

   197

                mouseY = evt.pageY;

   198

            }

   199

   200

            // calculate position

   201

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

   202

                let moveDist = 0, resizeAdd = 0;

   203

                let range_percent = 1;

   204

   205

                //set paramters for resizeable handle

   206

                if (this.scroll_size != undefined){

   207

                    // add one more object to stay inside range

   208

                    resizeAdd = 1;

   209

   210

                    //chack if range is bigger than display option and

   211

                    // calculate percent of range with out handle

   212

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

   213

                        range_percent = 1-this.min_size;

   214

                    }

   215

                    else{

   216

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

   217

                    }

   218

                }

   219

   220

                //calculate value difference on x or y axis

   221

                if(this.fi > 0.7){

   222

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

   223

                }

   224

                else{

   225

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

   226

                }

   227

   228

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

   229

            }

   230

            else{ //if clicked on widget

   231

                //get handle distance from mouse position

   232

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

   233

                    html_dist = 0;

   234

                }

   235

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

   236

                    html_dist = range_length;

   237

                }

   238

                else{

   239

                    if(this.fi > 0.7){

   240

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

   241

                    }

   242

                    else{

   243

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

   244

                    }

   245

                }

   246

                //calculate distance

   247

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

   248

            }

   249

   250

            //check if in range and apply

   251

            if (this.curr_value > max){

   252

                this.curr_value = max;

   253

            }

   254

            else if (this.curr_value < min){

   255

                this.curr_value = min;

   256

            }

   257

            this.apply_hmi_value(0, this.curr_value);

   258

   259

            //redraw handle

   260

            this.request_animate();

   261

   262

        }

   263

   264

        animate(){

   265

            // redraw handle on screen refresh

   266

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

   267

            if(this.setpoint_elt != undefined){

   268

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

   269

            }

   270

            else{

   271

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

   272

            }

   273

        }

   274

   275

        on_select(evt){

   276

            //enable drag flag and timer

   277

            this.drag = true;

   278

            this.enTimer = true;

   279

   280

            //bind events

   281

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

   282

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

   283

   284

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

   285

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

   286

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

   287

   288

            // check if handle was pressed

   289

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

   290

                //get mouse position on the handle

   291

                let mouseX = undefined;

   292

                let mouseY = undefined;

   293

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

   294

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

   295

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

   296

                }

   297

                else{

   298

                    mouseX = evt.pageX;

   299

                    mouseY = evt.pageY;

   300

                }

   301

                //save coordinates and orig value

   302

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

   303

            }

   304

            else{

   305

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

   306

                this.handle_click = undefined;

   307

                this.update_position(evt);

   308

            }

   309

   310

            //prevent next events

   311

            evt.stopPropagation();

   312

   313

        }

   314

   315

   316

        init() {

   317

            //set min max value if not defined

   318

            let min = this.min_elt ?

   319

                        Number(this.min_elt.textContent) :

   320

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

   321

            let max = this.max_elt ?

   322

                        Number(this.max_elt.textContent) :

   323

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

   324

   325

   326

            // save initial parameters

   327

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

   328

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

   329

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

   330

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

   331

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

   332

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

   333

   334

            //bind functions

   335

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

   336

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

   337

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

   338

   339

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

   340

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

   341

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

   342

            //touch recognised as page drag without next command

   343

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

   344

   345

            //save ghost style

   346

            if(this.setpoint_elt != undefined){

   347

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

   348

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

   349

            }

   350

   351

        }

   352

    ||

   353

   354

widget_defs("Slider") {

   355

    labels("handle range");

   356

    optional_labels("value min max setpoint");

   357

}