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="size" accepts="int" > buffer size

    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

    arg name="ymin" count="optional" accepts="int,real" > minimum value foe Y axis

    29

    arg name="ymax" count="optional" accepts="int,real" > maximum value for Y axis

    30

}

    31

    32

widget_class("XYGraph") {

    33

    ||

    34

        frequency = 1;

    35

        init() {

    36

            [this.x_size,

    37

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

    38

    39

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

    40

            // not to clip data.

    41

            this.clip = false;

    42

    43

            let y_min = -Infinity, y_max = Infinity;

    44

    45

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

    46

            for(let minmax of this.minmaxes){

    47

               if(minmax){

    48

                   let [min,max] = minmax;

    49

                   if(min < y_min)

    50

                       y_min = min;

    51

                   if(max > y_max) 

    52

                       y_max = max;

    53

               }

    54

            }

    55

    56

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

    57

               this.fixed_y_range = true;

    58

            } else {

    59

               this.fixed_y_range = false;

    60

            }

    61

    62

            this.ymin = y_min;

    63

            this.ymax = y_max;

    64

    65

            this.curves = [];

    66

            this.init_specific();

    67

    68

            this.reference = new ReferenceFrame(

    69

                [[this.x_interval_minor_mark, this.x_interval_major_mark],

    70

                 [this.y_interval_minor_mark, this.y_interval_major_mark]],

    71

                [this.y_axis_label, this.x_axis_label],

    72

                [this.x_axis_line, this.y_axis_line],

    73

                [this.x_format, this.y_format]);

    74

    75

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

    76

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

    77

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

    78

            clipPathPathDattr = document.createAttribute("d");

    79

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

    80

            clipPathPath.setAttributeNode(clipPathPathDattr);

    81

            clipPath.appendChild(clipPathPath);

    82

            this.element.appendChild(clipPath);

    83

    84

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

    85

            for(let curve of this.curves){

    86

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

    87

            }

    88

    89

            this.curves_data = [];

    90

            this.max_data_length = this.args[0];

    91

        }

    92

    93

        dispatch(value,oldval, index) {

    94

            // naive local buffer impl. 

    95

            // data is updated only when graph is visible

    96

            // TODO: replace with separate recording

    97

    98

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

    99

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

   100

            let ymin_damaged = false;

   101

            let ymax_damaged = false;

   102

            let overflow;

   103

   104

            if(data_length > this.max_data_length){

   105

                // remove first item

   106

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

   107

                data_length = data_length - 1;

   108

            }

   109

   110

            if(!this.fixed_y_range){

   111

                ymin_damaged = overflow <= this.ymin;

   112

                ymax_damaged = overflow >= this.ymax;

   113

                if(value > this.ymax){

   114

                    ymax_damaged = false;

   115

                    this.ymax = value;

   116

                }

   117

                if(value < this.ymin){

   118

                    ymin_damaged = false;

   119

                    this.ymin = value;

   120

                }

   121

            }

   122

   123

            // recompute X range based on curent time ad buffer depth

   124

            // TODO: get PLC time instead of browser time

   125

            const d = new Date();

   126

            let time = d.getTime();

   127

   128

            // FIXME: this becomes wrong when graph is not visible and updated all the time

   129

            [this.xmin, this.xmax] = [time - data_length*1000/this.frequency, time];

   130

            let Xlength = this.xmax - this.xmin;

   131

   132

   133

            // recompute curves "d" attribute

   134

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

   135

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

   136

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

   137

   138

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

   139

            this.curves_d_attr = 

   140

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

   141

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

   142

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

   143

                    let x = Xmin + i * Xlength / data_length;

   144

                    let xv = vectorscale(xvect, (x - Xmin) / Xlength);

   145

                    let yv = vectorscale(yvect, (y - Ymin) / Ylength);

   146

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

   147

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

   148

                    if(!this.fixed_y_range){

   149

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

   150

                        if(xmin_damaged && x > this.xmin) this.xmin = x;

   151

                    }

   152

   153

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

   154

                });

   155

   156

                new_d.unshift("M ");

   157

                new_d.push(" z");

   158

   159

                return new_d.join('');

   160

            }

   161

   162

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

   163

   164

            this.request_animate();

   165

        }

   166

   167

        animate(){

   168

   169

            // move marks and update labels

   170

            this.reference.applyRanges([this.XRange, this.YRange]);

   171

   172

            // apply computed curves "d" attributes

   173

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

   174

                curve.setAttribute("d", d_attr);

   175

            }

   176

        }

   177

   178

    ||

   179

}

   180

   181

widget_defs("XYGraph") {

   184

   185

    |     init_specific() {

   186

   187

    // collect all curve_n labelled children

   188

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

   189

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

   190

        const "id","@id";

   191

   192

        // detect non-unique names

   193

        if "$hmi_element/*[not($id = @id) and @inkscape:label=$label]"{

   194

            error > XYGraph id="«$id»", label="«$label»" : elements with data_n label must be unique.

   195

        }

   196

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

   197

    }

   198

   199

    |     }

   200

   201

}

   202

   203

emit "declarations:XYGraph"

   204

||

   205

function lineFromPath(path_elt) {

   206

    let start = path_elt.getPointAtLength(0);

   207

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

   208

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

   209

};

   210

   211

function vector(p1, p2) {

   212

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

   213

};

   214

   215

function vectorscale(p1, p2) {

   216

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

   217

};

   218

   219

function move_elements_to_group(elements) {

   220

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

   221

    for(let element of elements){

   222

        element.parentElement().removeChild(element);

   223

        newgroup.appendChild(element);

   224

    }

   225

    return newgroup;

   226

}

   227

function getLinesIntesection(l1, l2) {

   228

    /*

   229

    Compute intersection of two lines

   230

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

   231

   232

                          ^ l2vect

   233

                         /

   234

                        /

   235

                       /

   236

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

   237

                     / intersection

   238

                    /

   239

                   /

   240

                   l2start

   241

   242

    intersection = l1start + l1vect * a

   243

    intersection = l2start + l2vect * b

   244

    ==> solve : "l1start + l1vect * a = l2start + l2vect * b" to find a and b and then intersection

   245

   246

    (1)   l1start.x + l1vect.x * a = l2start.x + l2vect.x * b

   247

    (2)   l1start.y + l1vect.y * a = l2start.y + l2vect.y * b

   248

   249

    // express a

   250

    (1)   a = (l2start.x + l2vect.x * b) / (l1start.x + l1vect.x)

   251

   252

    // substitute a to have only b

   253

    (1+2) l1start.y + l1vect.y * (l2start.x + l2vect.x * b) / (l1start.x + l1vect.x) = l2start.y + l2vect.y * b

   254

   255

    // expand to isolate b

   256

    (2) l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) + (l1vect.y * l2vect.x * b) / (l1start.x + l1vect.x) = l2start.y + l2vect.y * b

   257

    (2) l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y = l2vect.y * b - (l1vect.y * l2vect.x * b) / (l1start.x + l1vect.x)

   258

   259

    // factorize b

   260

    (2) l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y = b * (l2vect.y - (l1vect.y * l2vect.x ) / (l1start.x + l1vect.x))

   261

   262

    // extract b

   263

    (2) b = (l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y) / ((l2vect.y - (l1vect.y * l2vect.x ) / (l1start.x + l1vect.x)))

   264

    */

   265

   266

    let [l1start, l1vect] = l1;

   268

   269

    let b = (l1start.y + (l1vect.y * l2start.x) / (l1start.x + l1vect.x) - l2start.y) / ((l2vect.y - (l1vect.y * l2vect.x ) / (l1start.x + l1vect.x)));

   270

   271

    return new DOMPoint(l2start.x + l2vect.x * b, l2start.y + l2vect.y * b);

   272

};

   273

   274

   275

// From https://stackoverflow.com/a/48293566

   276

function *zip (...iterables){

   277

    let iterators = iterables.map(i => i[Symbol.iterator]() )

   278

    while (true) {

   279

        let results = iterators.map(iter => iter.next() )

   280

        if (results.some(res => res.done) ) return

   281

        else yield results.map(res => res.value )

   282

    }

   283

}

   284

   285

class ReferenceFrame {

   286

    constructor(

   287

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

   288

        marks,

   289

        // [Xlabel, Ylabel]

   290

        labels,

   291

        // [Xline, Yline]

   292

        lines,

   293

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

   294

        formats

   295

    ){

   296

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

   297

   298

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

   299

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

   300

        let base_point = this.getBasePoint();

   301

   302

        // setup clipping for curves

   303

        this.clipPathPathDattr =

   304

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

   305

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

   306

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

   307

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

   308

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

   309

   310

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

   311

   312

        for(let axis of this.axes){

   313

            axis.setBasePoint(base_point);

   314

        }

   315

    }

   316

   317

	getBaseRef(){

   318

        return this.base_ref;

   319

	}

   320

   321

    getClipPathPathDattr(){

   322

        return this.clipPathPathDattr;

   323

    }

   324

   325

    applyRanges(ranges){

   326

        for(let [range,axis] of zip(ranges,this.axes)){

   327

            axis.applyRange(range);

   328

        }

   329

    }

   330

   331

    getBasePoint() {

   332

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

   333

   334

        /*

   335

        Compute graph clipping region base point

   336

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

   337

   338

        Clipping region is a parallelogram containing axes lines,

   339

        and whose sides are parallel to axes line respectively.

   340

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

   341

        calculus of parallelogram base point.

   342

   343

                              ^ given Y axis

   344

                   /         /

   345

                  /         /

   346

                 /         /

   347

         xstart /---------/--------------> given X axis

   348

               /         /

   349

              /         /

   350

             /---------/--------------

   351

        base_point   ystart

   352

   353

        base_point = xstart + yvect * a

   354

        base_point = ystart + xvect * b

   355

        ==> solve : "xstart + yvect * a = ystart + xvect * b" to find a and b and then base_point

   356

   357

        (1)   xstart.x + yvect.x * a = ystart.x + xvect.x * b

   358

        (2)   xstart.y + yvect.y * a = ystart.y + xvect.y * b

   359

   360

        // express a

   361

        (1)   a = (ystart.x + xvect.x * b) / (xstart.x + yvect.x)

   362

   363

        // substitute a to have only b

   364

        (1+2) xstart.y + yvect.y * (ystart.x + xvect.x * b) / (xstart.x + yvect.x) = ystart.y + xvect.y * b

   365

   366

        // expand to isolate b

   367

        (2) xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) + (yvect.y * xvect.x * b) / (xstart.x + yvect.x) = ystart.y + xvect.y * b

   368

        (2) xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y = xvect.y * b - (yvect.y * xvect.x * b) / (xstart.x + yvect.x)

   369

   370

        // factorize b

   371

        (2) xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y = b * (xvect.y - (yvect.y * xvect.x ) / (xstart.x + yvect.x))

   372

   373

        // extract b

   374

        (2) b = (xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y) / ((xvect.y - (yvect.y * xvect.x ) / (xstart.x + yvect.x)))

   375

        */

   376

   377

        let b = (xstart.y + (yvect.y * ystart.x) / (xstart.x + yvect.x) - ystart.y) / ((xvect.y - (yvect.y * xvect.x ) / (xstart.x + yvect.x)));

   378

        let base_point = new DOMPoint(ystart.x + xvect.x * b, ystart.y + xvect.y * b);

   379

   380

        // // compute given origin

   381

        // // from drawing : given_origin = xstart - xvect * b

   382

        // let given_origin = new DOMPoint(xstart.x - xvect.x * b, xstart.y - xvect.y * b);

   383

   384

        return base_point;

   385

   386

    }

   387

   388

}

   389

   390

class Axis {

   391

    constructor(label, marks, line, format){

   392

        this.lineElement = line;

   393

        this.line = lineFromPath(line);

   394

        this.format = format;

   395

   396

        this.label = label;

   397

        this.marks = marks;

   398

   399

   400

        // add transforms for elements sliding along the axis line

   401

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

   402

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

   403

                let transform = svg_root.createSVGTransform();

   404

                element.transform.baseVal.appendItem(transform);

   405

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

   406

            };

   407

        };

   408

   409

        // group marks an labels together

   410

        let parent = line.parentElement()

   411

        marks_group = move_elements_to_group(marks);

   412

        marks_and_label_group = move_elements_to_group([marks_group_use, label]);

   413

        group = move_elements_to_group([marks_and_label_group,line]);

   414

        parent.appendChild(group);

   415

   416

        // Add transforms to group 

   417

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

   418

            let transform = svg_root.createSVGTransform();

   419

            group.transform.baseVal.appendItem(transform);

   420

            this[name+"_transform"]=transform;

   421

        };

   422

   423

        this.group = group;

   424

        this.marks_group = marks_group;

   425

        this.marks_and_label_group = marks_and_label_group;

   426

   427

        this.mlg_clones = [];

   428

        this.last_mark_count = 0;

   429

    }

   430

   431

    setBasePoint(base_point){

   432

        // move Axis to base point 

   433

        let [start, _vect] = this.lineElement;

   434

        let v = vector(start, base_point);

   435

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

   436

   437

        // Move marks and label to base point. 

   438

        // _|_______         _|________

   439

        //  |  '  |     ==>   ' 

   440

        //  |     0           0

   441

        //  |                 |

   442

   443

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

   444

            let transform = this[markname+"_base_transform"];

   445

            let pos = vector(

   446

                // Marks are expected to be paths

   447

                // paths are expected to be lines

   448

                // intersection with axis line is taken 

   449

                // as reference for mark position

   450

                base_point, getLinesIntesection(

   451

                    this.line, lineFromPath(mark)));

   452

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

   453

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

   454

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

   455

            }

   456

        }

   457

    }

   458

   459

    applyOriginAndUnitVector(offset, unit_vect){

   460

        // offset is a representing position of an 

   461

        // axis along the opposit axis line, expressed in major marks units

   462

        // unit_vect is the translation in between to major marks

   463

   464

        //              ^

   465

        //              | unit_vect

   466

        //              |<--->

   467

        //     _________|__________>

   468

        //     ^  |  '  |  '  |  '

   469

        //     |yoffset |     1 

   470

        //     |        |

   471

        //     v xoffset|

   472

        //     X<------>|

   473

        // base_point

   474

   475

        // move major marks and label to first positive mark position

   476

        let v = vectorscale(unit_vect, offset+1);

   477

        this.label_slide_transform.setTranslate(v.x, v.x);

   478

        this.major_slide_transform.setTranslate(v.x, v.x);

   479

        // move minor mark to first half positive mark position

   480

        let h = vectorscale(unit_vect, offset+0.5);

   481

        this.minor_slide_transform.setTranslate(h.x, h.x);

   482

    }

   483

   484

    applyRange(min, max){

   485

        let range = max - min;

   486

   487

        // compute how many units for a mark

   488

        //

   489

        // - Units are expected to be an order of magnitude smaller than range,

   490

        //   so that marks are not too dense and also not too sparse.

   491

        //   Order of magnitude of range is log10(range)

   492

        //

   493

        // - Units are necessarily power of ten, otherwise it is complicated to

   494

        //   fill the text in labels...

   495

        //   Unit is pow(10, integer_number )

   496

        //

   497

        // - To transform order of magnitude to an integer, floor() is used.

   498

        //   This results in a count of mark fluctuating in between 10 and 100.

   499

        //

   500

        // - To spare resources result is better in between 5 and 50,

   501

        //   and log10(5) is substracted to order of magnitude to obtain this

   502

        //   log10(5) ~= 0.69897

   503

   504

   505

        let unit = Math.pow(10, Math.floor(Math.log10(range)-0.69897));

   506

   507

        // TODO: for time values (ms), units may be :

   508

        //       1       -> ms

   509

        //       10      -> s/100

   510

        //       100     -> s/10

   511

        //       1000    -> s

   512

        //       60000   -> min

   513

        //       3600000 -> hour

   514

        //       ...

   515

        //

   516

   517

        // Compute position of origin along axis [0...range]

   518

   519

        // min < 0, max > 0, offset = -min

   520

        // _____________|________________

   521

        // ... -3 -2 -1 |0  1  2  3  4 ...

   522

        // <--offset---> ^

   523

        //               |_original

   524

   525

        // min > 0, max > 0, offset = 0

   526

        // |________________

   527

        // |6  7  8  9  10...

   528

        //  ^

   529

        //  |_original