1

// widget_xygraph.ysl2

     2

widget_desc("XYGraph") {

     3

    longdesc

     4

    ||

     5

    XYGraph draws a cartesian trend graph re-using styles given for axis,

     6

    grid/marks, legends and curves.

     7

     8

    Elements labeled "x_axis" and "y_axis" are svg:groups containg:

     9

     - "axis_label" svg:text gives style an alignment for axis labels.

    10

     - "interval_major_mark" and "interval_minor_mark" are svg elements to be

    11

       duplicated along axis line to form intervals marks.

    12

     - "axis_line"  svg:path is the axis line. Paths must be intersect and their

    13

       bounding box is the chart wall.

    14

    15

    Elements labeled "curve_0", "curve_1", ... are paths whose styles are used

    16

    to draw curves corresponding to data from variables passed as HMI tree paths.

    17

    "curve_0" is mandatory. HMI variables outnumbering given curves are ignored.

    18

    19

    ||

    20

    21

    shortdesc > Cartesian trend graph showing values of given variables over time

    22

    23

    path name="value" count="1+" accepts="HMI_INT,HMI_REAL" > value

    24

    25

    arg name="xrange" accepts="int,time" > X axis range expressed either in samples or duration.

    26

    arg name="xformat" count="optional" accepts="string" > format string for X label

    27

    arg name="yformat" count="optional" accepts="string" > format string for Y label

    28

}

    29

    30

widget_class("XYGraph") {

    31

    ||

    32

        frequency = 1;

    33

        init() {

    34

            let x_duration_s;

    35

            [x_duration_s,

    36

             this.x_format, this.y_format] = this.args;

    37

    38

            let timeunit = x_duration_s.slice(-1);

    39

            let factor = {

    40

                "s":1,

    41

                "m":60,

    42

                "h":3600,

    43

                "d":86400}[timeunit];

    44

            if(factor == undefined){

    45

                this.max_data_length = Number(x_duration_s);

    46

                this.x_duration = undefined;

    47

            }else{

    48

                let duration = factor*Number(x_duration_s.slice(0,-1));

    49

                this.max_data_length = undefined;

    50

                this.x_duration = duration*1000;

    51

            }

    52

    53

    54

            // Min and Max given with paths are meant to describe visible range,

    55

            // not to clip data.

    56

            this.clip = false;

    57

    58

            let y_min = Infinity, y_max = -Infinity;

    59

    60

            // Compute visible Y range by merging fixed curves Y ranges

    61

            for(let varopts of this.variables_options){

    62

                let minmax = varopts.minmax 

    63

                if(minmax){

    64

                    let [min,max] = minmax;

    65

                    if(min < y_min)

    66

                        y_min = min;

    67

                    if(max > y_max)

    68

                        y_max = max;

    69

                }

    70

            }

    71

    72

            if(y_min !== Infinity && y_max !== -Infinity){

    73

                this.fixed_y_range = true;

    74

            } else {

    75

                this.fixed_y_range = false;

    76

            }

    77

    78

            this.ymin = y_min;

    79

            this.ymax = y_max;

    80

    81

            this.curves = [];

    82

            this.init_specific();

    83

    84

            this.reference = new ReferenceFrame(

    85

                [[this.x_interval_minor_mark_elt, this.x_interval_major_mark_elt],

    86

                 [this.y_interval_minor_mark_elt, this.y_interval_major_mark_elt]],

    87

                [this.x_axis_label_elt, this.y_axis_label_elt],

    88

                [this.x_axis_line_elt, this.y_axis_line_elt],

    89

                [this.x_format, this.y_format]);

    90

    91

            let max_stroke_width = 0;

    92

            for(let curve of this.curves){

    93

                if(curve.style.strokeWidth > max_stroke_width){

    94

                    max_stroke_width = curve.style.strokeWidth;

    95

                }

    96

            }

    97

    98

            this.Margins=this.reference.getLengths().map(length => max_stroke_width/length);

    99

   100

            // create <clipPath> path and attach it to widget

   101

            let clipPath = document.createElementNS(xmlns,"clipPath");

   102

            let clipPathPath = document.createElementNS(xmlns,"path");

   103

            let clipPathPathDattr = document.createAttribute("d");

   104

            clipPathPathDattr.value = this.reference.getClipPathPathDattr();

   105

            clipPathPath.setAttributeNode(clipPathPathDattr);

   106

            clipPath.appendChild(clipPathPath);

   107

            clipPath.id = randomId();

   108

            this.element.appendChild(clipPath);

   109

   110

            // assign created clipPath to clip-path property of curves

   111

            for(let curve of this.curves){

   112

                curve.setAttribute("clip-path", "url(#" + clipPath.id + ")");

   113

            }

   114

   115

            this.curves_data = [];

   116

        }

   117

   118

        dispatch(value,oldval, index) {

   119

            // TODO: get PLC time instead of browser time

   120

            let time = Date.now();

   121

   122

            // naive local buffer impl. 

   123

            // data is updated only when graph is visible

   124

            // TODO: replace with separate recording

   125

   126

            if(this.curves_data[index] === undefined){

   127

                this.curves_data[index] = [];

   128

            }

   129

            this.curves_data[index].push([time, value]);

   130

            let data_length = this.curves_data[index].length;

   131

            let ymin_damaged = false;

   132

            let ymax_damaged = false;

   133

            let overflow;

   134

   135

            if(this.max_data_length == undefined){

   136

                let peremption = time - this.x_duration;

   137

                let oldest = this.curves_data[index][0][0]

   138

                this.xmin = peremption;

   139

                if(oldest < peremption){

   140

                    // remove first item

   141

                    overflow = this.curves_data[index].shift()[1];

   142

                    data_length = data_length - 1;

   143

                }

   144

            } else {

   145

                if(data_length > this.max_data_length){

   146

                    // remove first item

   147

                    [this.xmin, overflow] = this.curves_data[index].shift();

   148

                    data_length = data_length - 1;

   149

                } else {

   150

                    if(this.xmin == undefined){

   151

                        this.xmin = time;

   152

                    }

   153

                }

   154

            }

   155

   156

            this.xmax = time;

   157

            let Xrange = this.xmax - this.xmin;

   158

   159

            if(!this.fixed_y_range){

   160

                ymin_damaged = overflow <= this.ymin;

   161

                ymax_damaged = overflow >= this.ymax;

   162

                if(value > this.ymax){

   163

                    ymax_damaged = false;

   164

                    this.ymax = value;

   165

                }

   166

                if(value < this.ymin){

   167

                    ymin_damaged = false;

   168

                    this.ymin = value;

   169

                }

   170

            }

   171

            let Yrange = this.ymax - this.ymin;

   172

   173

            // apply margin by moving min and max to enlarge range

   174

            let [xMargin,yMargin] = zip(this.Margins, [Xrange, Yrange]).map(([m,l]) => m*l);

   175

            [[this.dxmin, this.dxmax],[this.dymin,this.dymax]] =

   176

                [[this.xmin-xMargin, this.xmax+xMargin],

   177

                 [this.ymin-yMargin, this.ymax+yMargin]];

   178

            Xrange += 2*xMargin;

   179

            Yrange += 2*yMargin;

   180

   181

            // recompute curves "d" attribute

   182

            // FIXME: use SVG getPathData and setPathData when available.

   183

            //        https://svgwg.org/specs/paths/#InterfaceSVGPathData

   184

            //        https://github.com/jarek-foksa/path-data-polyfill

   185

   186

            let [base_point, xvect, yvect] = this.reference.getBaseRef();

   187

            this.curves_d_attr =

   188

                zip(this.curves_data, this.curves).map(([data,curve]) => {

   189

                    let new_d = data.map(([x,y], i) => {

   190

                        // compute curve point from data, ranges, and base_ref

   191

                        let xv = vectorscale(xvect, (x - this.dxmin) / Xrange);

   192

                        let yv = vectorscale(yvect, (y - this.dymin) / Yrange);

   193

                        let px = base_point.x + xv.x + yv.x;

   194

                        let py = base_point.y + xv.y + yv.y;

   195

                        if(!this.fixed_y_range){

   196

                            // update min and max from curve data if needed

   197

                            if(ymin_damaged && y < this.ymin) this.ymin = y;

   198

                            if(ymax_damaged && y > this.ymax) this.ymax = y;

   199

                        }

   200

   201

                        return " " + px + "," + py;

   202

                    });

   203

   204

                    new_d.unshift("M ");

   205

   206

                    return new_d.join('');

   207

                });

   208

   209

            // computed curves "d" attr is applied to svg curve during animate();

   210

   211

            this.request_animate();

   212

        }

   213

   214

        animate(){

   215

   216

            // move elements only if enough data

   217

            if(this.curves_data.some(data => data.length > 1)){

   218

   219

                // move marks and update labels

   220

                this.reference.applyRanges([[this.dxmin, this.dxmax],

   221

                                            [this.dymin, this.dymax]]);

   222

   223

                // apply computed curves "d" attributes

   224

                for(let [curve, d_attr] of zip(this.curves, this.curves_d_attr)){

   225

                    curve.setAttribute("d", d_attr);

   226

                }

   227

            }

   228

        }

   229

   230

    ||

   231

}

   232

   233

def "func:check_curves_label_consistency" {

   234

    param "curve_elts";

   235

    param "number_to_check";

   236

    const "res" choose {

   237

        when "$curve_elts[@inkscape:label = concat('curve_', string($number_to_check))]"{

   238

            if "$number_to_check > 0"{

   239

                value "func:check_curves_label_consistency($curve_elts, $number_to_check - 1)";

   240

            }

   241

        }

   242

        otherwise {

   243

            value "concat('missing curve_', string($number_to_check))";

   244

        }

   245

    }

   246

    result "$res";

   247

}

   248

   249

widget_defs("XYGraph") {

   250

    labels("/x_interval_minor_mark /x_axis_line /x_interval_major_mark /x_axis_label");

   251

    labels("/y_interval_minor_mark /y_axis_line /y_interval_major_mark /y_axis_label");

   252

   253

    |     init_specific() {

   254

   255

    // collect all curve_n labelled children

   256

    const "curves","$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]";

   257

    const "curves_error", "func:check_curves_label_consistency($curves,count($curves)-1)";

   258

    if "string-length($curves_error)"

   259

        error > XYGraph id="«@id»", label="«@inkscape:label»" : «$curves_error»

   260

    foreach "$curves" {

   261

        const "label","@inkscape:label";

   262

        const "_id","@id";

   263

        const "curve_num", "substring(@inkscape:label, 7)";

   264

    |         this.curves[«$curve_num»] = id("«@id»"); /* «@inkscape:label» */

   265

    }

   266

   267

    |     }

   268

   269

}

   270

   271

emit "declarations:XYGraph"

   272

||

   273

function lineFromPath(path_elt) {

   274

    let start = path_elt.getPointAtLength(0);

   275

    let end = path_elt.getPointAtLength(path_elt.getTotalLength());

   276

    return [start, new DOMPoint(end.x - start.x , end.y - start.y)];

   277

};

   278

   279

function vector(p1, p2) {

   280

    return new DOMPoint(p2.x - p1.x , p2.y - p1.y);

   281

};

   282

   283

function vectorscale(p1, p2) {

   284

    return new DOMPoint(p2 * p1.x , p2 * p1.y);

   285

};

   286

   287

function vectorLength(p1) {

   288

    return Math.sqrt(p1.x*p1.x + p1.y*p1.y);

   289

};

   290

   291

function randomId(){

   292

    return Date.now().toString(36) + Math.random().toString(36).substr(2);

   293

}

   294

   295

function move_elements_to_group(elements) {

   296

    let newgroup = document.createElementNS(xmlns,"g");

   297

    newgroup.id = randomId();

   298

   299

    for(let element of elements){

   300

        let parent = element.parentElement;

   301

        if(parent !== null)

   302

            parent.removeChild(element);

   303

        newgroup.appendChild(element);

   304

    }

   305

    return newgroup;

   306

}

   307

function getLinesIntesection(l1, l2) {

   308

    let [l1start, l1vect] = l1;

   309

    let [l2start, l2vect] = l2;

   310

   311

   312

    /*

   313

    Compute intersection of two lines

   314

    =================================

   315

   316

                          ^ l2vect

   317

                         /

   318

                        /

   319

                       /

   320

    l1start ----------X--------------> l1vect

   321

                     / intersection

   322

                    /

   323

                   /

   324

                   l2start

   325

   326

	*/

   327

    let [x1, y1, x3, y3] = [l1start.x, l1start.y, l2start.x, l2start.y];

   328

	let [x2, y2, x4, y4] = [x1+l1vect.x, y1+l1vect.y, x3+l2vect.x, y3+l2vect.y];

   329

   330

	// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/

   331

	// Determine the intersection point of two line segments

   332

	// Return FALSE if the lines don't intersect

   333

   334

    // Check if none of the lines are of length 0

   335

    if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {

   336

        return false

   337

    }

   338

   339

    denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))

   340

   341

    // Lines are parallel

   342

    if (denominator === 0) {

   343

        return false

   344

    }

   345

   346

    let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator

   347

    let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator

   348

   349

    // Return a object with the x and y coordinates of the intersection

   350

    let x = x1 + ua * (x2 - x1)

   351

    let y = y1 + ua * (y2 - y1)

   352

   353

    return new DOMPoint(x,y);

   354

};

   355

   356

class ReferenceFrame {

   357

    constructor(

   358

        // [[Xminor,Xmajor], [Yminor,Ymajor]]

   359

        marks,

   360

        // [Xlabel, Ylabel]

   361

        labels,

   362

        // [Xline, Yline]

   363

        lines,

   364

        // [Xformat, Yformat] printf-like formating strings

   365

        formats

   366

    ){

   367

        this.axes = zip(labels,marks,lines,formats).map(args => new Axis(...args));

   368

   369

        let [lx,ly] = this.axes.map(axis => axis.line);

   370

        let [[xstart, xvect], [ystart, yvect]] = [lx,ly];

   371

        let base_point = this.getBasePoint();

   372

   373

        // setup clipping for curves

   374

        this.clipPathPathDattr =

   375

            "m " + base_point.x + "," + base_point.y + " "

   376

                 + xvect.x + "," + xvect.y + " "

   377

                 + yvect.x + "," + yvect.y + " "

   378

                 + -xvect.x + "," + -xvect.y + " "

   379

                 + -yvect.x + "," + -yvect.y + " z";

   380

   381

        this.base_ref = [base_point, xvect, yvect];

   382

   383

        this.lengths = [xvect,yvect].map(v => vectorLength(v));

   384

   385

        for(let axis of this.axes){

   386

            axis.setBasePoint(base_point);

   387

        }

   388

    }

   389

   390

    getLengths(){

   391

        return this.lengths;

   392

    }

   393

   394

	getBaseRef(){

   395

        return this.base_ref;

   396

	}

   397

   398

    getClipPathPathDattr(){

   399

        return this.clipPathPathDattr;

   400

    }

   401

   402

    applyRanges(ranges){

   403

        let origin_moves = zip(ranges,this.axes).map(([range,axis]) => axis.applyRange(...range));

   404

		zip(origin_moves.reverse(),this.axes).forEach(([vect,axis]) => axis.moveOrigin(vect));

   405

    }

   406

   407

    getBasePoint() {

   408

        let [[xstart, xvect], [ystart, yvect]] = this.axes.map(axis => axis.line);

   409

   410

        /*

   411

        Compute graph clipping region base point

   412

        ========================================

   413

   414

        Clipping region is a parallelogram containing axes lines,

   415

        and whose sides are parallel to axes line respectively.

   416

        Given axes lines are not starting at the same point, hereafter is

   417

        calculus of parallelogram base point.

   418

   419

                              ^ given Y axis (yvect)

   420

                   /         /

   421

                  /         /

   422

                 /         /

   423

         xstart *---------*--------------> given X axis (xvect)

   424

               /         /origin

   425

              /         /

   426

             *---------*--------------

   427

        base_point   ystart

   428

   429

        */

   430

   431

        let base_point = getLinesIntesection([xstart,yvect],[ystart,xvect]);

   432

   433

        return base_point;

   434

   435

    }

   436

   437

}

   438

   439

class Axis {

   440

    constructor(label, marks, line, format){

   441

        this.lineElement = line;

   442

        this.line = lineFromPath(line);

   443

        this.format = format;

   444

   445

        this.label = label;

   446

        this.marks = marks;

   447

   448

   449

        // add transforms for elements sliding along the axis line

   450

        for(let [elementname,element] of zip(["minor", "major", "label"],[...marks,label])){

   451

            for(let name of ["base","slide"]){

   452

                let transform = svg_root.createSVGTransform();

   453

                element.transform.baseVal.insertItemBefore(transform,0);

   454

                this[elementname+"_"+name+"_transform"]=transform;

   455

            };

   456

        };

   457

   458

        // group marks an labels together

   459

        let parent = line.parentElement;

   460

        this.marks_group = move_elements_to_group(marks);

   461

        this.marks_and_label_group = move_elements_to_group([this.marks_group, label]);

   462

        this.group = move_elements_to_group([this.marks_and_label_group,line]);

   463

        parent.appendChild(this.group);

   464

   465

        // Add transforms to group

   466

        for(let name of ["base","origin"]){

   467

            let transform = svg_root.createSVGTransform();

   468

            this.group.transform.baseVal.appendItem(transform);

   469

            this[name+"_transform"]=transform;

   470

        };

   471

   472

        this.marks_and_label_group_transform = svg_root.createSVGTransform();

   473

        this.marks_and_label_group.transform.baseVal.appendItem(this.marks_and_label_group_transform);

   474

   475

        this.duplicates = [];

   476

        this.last_duplicate_index = 0;

   477

    }

   478

   479

    setBasePoint(base_point){

   480

        // move Axis to base point

   481

        let [start, _vect] = this.line;

   482

        let v = vector(start, base_point);

   483

        this.base_transform.setTranslate(v.x, v.y);

   484

   485

        // Move marks and label to base point.

   486

        // _|_______          _|________

   487

        //  |  '  |     ==>    '

   488

        //  |     0            0

   489

        //  |                  |

   490

   491

        for(let [markname,mark] of zip(["minor", "major"],this.marks)){

   492

            let pos = vector(

   493

                // Marks are expected to be paths

   494

                // paths are expected to be lines

   495

                // intersection with axis line is taken 

   496

                // as reference for mark position

   497

                getLinesIntesection(

   498

                    this.line, lineFromPath(mark)),base_point);

   499

            this[markname+"_base_transform"].setTranslate(pos.x - v.x, pos.y - v.y);

   500

            if(markname == "major"){ // label follow major mark

   501

                this.label_base_transform.setTranslate(pos.x - v.x, pos.y - v.y);

   502

            }

   503

        }

   504

    }

   505

   506

	moveOrigin(vect){

   507

		this.origin_transform.setTranslate(vect.x, vect.y);