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 minmax of this.minmaxes){

    62

               if(minmax){

    63

                   let [min,max] = minmax;

    64

                   if(min < y_min)

    65

                       y_min = min;

    66

                   if(max > y_max)

    67

                       y_max = max;

    68

               }

    69

            }

    70

    71

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

    72

               this.fixed_y_range = true;

    73

            } else {

    74

               this.fixed_y_range = false;

    75

            }

    76

    77

            this.ymin = y_min;

    78

            this.ymax = y_max;

    79

    80

            this.curves = [];

    81

            this.init_specific();

    82

    83

            this.reference = new ReferenceFrame(

    84

                [[this.x_interval_minor_mark_elt, this.x_interval_major_mark_elt],

    85

                 [this.y_interval_minor_mark_elt, this.y_interval_major_mark_elt]],

    86

                [this.x_axis_label_elt, this.y_axis_label_elt],

    87

                [this.x_axis_line_elt, this.y_axis_line_elt],

    88

                [this.x_format, this.y_format]);

    89

    90

            let max_stroke_width = 0;

    91

            for(let curve of this.curves){

    92

                if(curve.style.strokeWidth > max_stroke_width){

    93

                    max_stroke_width = curve.style.strokeWidth;

    94

                }

    95

            }

    96

    97

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

    98

    99

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

   100

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

   101

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

   102

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

   103

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

   104

            clipPathPath.setAttributeNode(clipPathPathDattr);

   105

            clipPath.appendChild(clipPathPath);

   106

            clipPath.id = randomId();

   107

            this.element.appendChild(clipPath);

   108

   109

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

   110

            for(let curve of this.curves){

   111

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

   112

            }

   113

   114

            this.curves_data = [];

   115

        }

   116

   117

        dispatch(value,oldval, index) {

   118

            // TODO: get PLC time instead of browser time

   119

            let time = Date.now();

   120

   121

            // naive local buffer impl. 

   122

            // data is updated only when graph is visible

   123

            // TODO: replace with separate recording

   124

   125

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

   126

                this.curves_data[index] = [];

   127

            }

   128

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

   129

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

   130

            let ymin_damaged = false;

   131

            let ymax_damaged = false;

   132

            let overflow;

   133

   134

            if(this.max_data_length == undefined){

   135

                let peremption = time - this.x_duration;

   136

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

   137

                this.xmin = peremption;

   138

                if(oldest < peremption){

   139

                    // remove first item

   140

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

   141

                    data_length = data_length - 1;

   142

                }

   143

            } else {

   144

                if(data_length > this.max_data_length){

   145

                    // remove first item

   146

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

   147

                    data_length = data_length - 1;

   148

                } else {

   149

                    if(this.xmin == undefined){

   150

                        this.xmin = time;

   151

                    }

   152

                }

   153

            }

   154

   155

            this.xmax = time;

   156

            let Xrange = this.xmax - this.xmin;

   157

   158

            if(!this.fixed_y_range){

   159

                ymin_damaged = overflow <= this.ymin;

   160

                ymax_damaged = overflow >= this.ymax;

   161

                if(value > this.ymax){

   162

                    ymax_damaged = false;

   163

                    this.ymax = value;

   164

                }

   165

                if(value < this.ymin){

   166

                    ymin_damaged = false;

   167

                    this.ymin = value;

   168

                }

   169

            }

   170

            let Yrange = this.ymax - this.ymin;

   171

   172

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

   173

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

   174

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

   175

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

   176

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

   177

            Xrange += 2*xMargin;

   178

            Yrange += 2*yMargin;

   179

   180

            // recompute curves "d" attribute

   181

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

   182

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

   183

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

   184

   185

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

   186

            this.curves_d_attr =

   187

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

   188

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

   189

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

   190

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

   191

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

   192

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

   193

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

   194

                        if(!this.fixed_y_range){

   195

                            // update min and max from curve data if needed

   196

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

   197

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

   198

                        }

   199

   200

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

   201

                    });

   202

   203

                    new_d.unshift("M ");

   204

   205

                    return new_d.join('');

   206

                });

   207

   208

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

   209

   210

            this.request_animate();

   211

        }

   212

   213

        animate(){

   214

   215

            // move elements only if enough data

   216

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

   217

   218

                // move marks and update labels

   219

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

   220

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

   221

   222

                // apply computed curves "d" attributes

   223

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

   224

                    curve.setAttribute("d", d_attr);

   225

                }

   226

            }

   227

        }

   228

   229

    ||

   230

}

   231

   232

def "func:check_curves_label_consistency" {

   233

    param "curve_elts";

   234

    param "number_to_check";

   235

    const "res" choose {

   236

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

   237

            if "$number_to_check > 0"{

   238

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

   239

            }

   240

        }

   241

        otherwise {

   242

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

   243

        }

   244

    }

   245

    result "$res";

   246

}

   247

   248

widget_defs("XYGraph") {

   249

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

   250

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

   251

   252

    |     init_specific() {

   253

   254

    // collect all curve_n labelled children

   255

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

   256

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

   257

    if "string-length($curves_error)"

   258

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

   259

    foreach "$curves" {

   260

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

   261

        const "_id","@id";

   262

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

   263

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

   264

    }

   265

   266

    |     }

   267

   268

}

   269

   270

emit "declarations:XYGraph"

   271

||

   272

function lineFromPath(path_elt) {

   273

    let start = path_elt.getPointAtLength(0);

   274

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

   275

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

   276

};

   277

   278

function vector(p1, p2) {

   279

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

   280

};

   281

   282

function vectorscale(p1, p2) {

   283

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

   284

};

   285

   286

function vectorLength(p1) {

   287

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

   288

};

   289

   290

function randomId(){

   291

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

   292

}

   293

   294

function move_elements_to_group(elements) {

   295

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

   296

    newgroup.id = randomId();

   297

   298

    for(let element of elements){

   299

        let parent = element.parentElement;

   300

        if(parent !== null)

   301

            parent.removeChild(element);

   302

        newgroup.appendChild(element);

   303

    }

   304

    return newgroup;

   305

}

   306

function getLinesIntesection(l1, l2) {

   307

    let [l1start, l1vect] = l1;

   308

    let [l2start, l2vect] = l2;

   309

   310

   311

    /*

   312

    Compute intersection of two lines

   313

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

   314

   315

                          ^ l2vect

   316

                         /

   317

                        /

   318

                       /

   319

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

   320

                     / intersection

   321

                    /

   322

                   /

   323

                   l2start

   324

   325

	*/

   326

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

   327

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

   328

   329

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

   330

	// Determine the intersection point of two line segments

   331

	// Return FALSE if the lines don't intersect

   332

   333

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

   334

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

   335

        return false

   336

    }

   337

   338

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

   339

   340

    // Lines are parallel

   341

    if (denominator === 0) {

   342

        return false

   343

    }

   344

   345

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

   346

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

   347

   348

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

   349

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

   350

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

   351

   352

    return new DOMPoint(x,y);

   353

};

   354

   355

class ReferenceFrame {

   356

    constructor(

   357

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

   358

        marks,

   359

        // [Xlabel, Ylabel]

   360

        labels,

   361

        // [Xline, Yline]

   362

        lines,

   363

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

   364

        formats

   365

    ){

   366

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

   367

   368

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

   369

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

   370

        let base_point = this.getBasePoint();

   371

   372

        // setup clipping for curves

   373

        this.clipPathPathDattr =

   374

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

   375

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

   376

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

   377

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

   378

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

   379

   380

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

   381

   382

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

   383

   384

        for(let axis of this.axes){

   385

            axis.setBasePoint(base_point);

   386

        }

   387

    }

   388

   389

    getLengths(){

   390

        return this.lengths;

   391

    }

   392

   393

	getBaseRef(){

   394

        return this.base_ref;

   395

	}

   396

   397

    getClipPathPathDattr(){

   398

        return this.clipPathPathDattr;

   399

    }

   400

   401

    applyRanges(ranges){

   402

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

   403

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

   404

    }

   405

   406

    getBasePoint() {

   407

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

   408

   409

        /*

   410

        Compute graph clipping region base point

   411

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

   412

   413

        Clipping region is a parallelogram containing axes lines,

   414

        and whose sides are parallel to axes line respectively.

   415

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

   416

        calculus of parallelogram base point.

   417

   418

                              ^ given Y axis (yvect)

   419

                   /         /

   420

                  /         /

   421

                 /         /

   422

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

   423

               /         /origin

   424

              /         /

   425

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

   426

        base_point   ystart

   427

   428

        */

   429

   430

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

   431

   432

        return base_point;

   433

   434

    }

   435

   436

}

   437

   438

class Axis {

   439

    constructor(label, marks, line, format){

   440

        this.lineElement = line;

   441

        this.line = lineFromPath(line);

   442

        this.format = format;

   443

   444

        this.label = label;

   445

        this.marks = marks;

   446

   447

   448

        // add transforms for elements sliding along the axis line

   449

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

   450

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

   451

                let transform = svg_root.createSVGTransform();

   452

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

   453

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

   454

            };

   455

        };

   456

   457

        // group marks an labels together

   458

        let parent = line.parentElement;

   459

        this.marks_group = move_elements_to_group(marks);

   460

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

   461

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

   462

        parent.appendChild(this.group);

   463

   464

        // Add transforms to group

   465

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

   466

            let transform = svg_root.createSVGTransform();

   467

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

   468

            this[name+"_transform"]=transform;

   469

        };

   470

   471

        this.marks_and_label_group_transform = svg_root.createSVGTransform();

   472

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

   473

   474

        this.duplicates = [];

   475

        this.last_duplicate_index = 0;

   476

    }

   477

   478

    setBasePoint(base_point){

   479

        // move Axis to base point

   480

        let [start, _vect] = this.line;

   481

        let v = vector(start, base_point);

   482

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

   483

   484

        // Move marks and label to base point.

   485

        // _|_______          _|________

   486

        //  |  '  |     ==>    '

   487

        //  |     0            0

   488

        //  |                  |

   489

   490

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

   491

            let pos = vector(

   492

                // Marks are expected to be paths

   493

                // paths are expected to be lines

   494

                // intersection with axis line is taken 

   495

                // as reference for mark position

   496

                getLinesIntesection(

   497

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

   498

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

   499

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

   500

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

   501

            }

   502

        }

   503

    }

   504

   505

	moveOrigin(vect){

   506

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

   507

	}