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

    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;

    52

                       y_max = max;

    53

               }

    54

            }

    55

    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(

    73

                [this.x_format, this.y_format]);

    74

    75

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

    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

    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

            }

   123

   124

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

   125

            // TODO: get PLC time instead of browser time

   126

            const d = new Date();

   127

            let time = d.getTime();

   128

   129

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

   130

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

   131

            let Xlength = this.xmax - this.xmin;

   132

   133

   134

            // recompute curves "d" attribute

   135

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

   136

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

   137

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

   139

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

   160

                });

   161

   162

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

   163

   164

            this.request_animate();

   165

        }

   166

   167

        animate(){

   168

   180

            }

   181

        }

   182

   183

    ||

   184

}

   185

   186

widget_defs("XYGraph") {

   189

   190

    |     init_specific() {

   191

   192

    // collect all curve_n labelled children

   193

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

   194

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

   195

        const "id","@id";

   196

   197

        // detect non-unique names

   198

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

   199

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

   200

        }

   201

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

   202

    }

   203

   204

    |     }

   205

   206

}

   207

   208

emit "declarations:XYGraph"

   209

||

   210

function lineFromPath(path_elt) {

   211

    let start = path_elt.getPointAtLength(0);

   212

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

   213

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

   214

};

   215

   216

function vector(p1, p2) {

   217

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

   218

};

   219

   220

function vectorscale(p1, p2) {

   221

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

   222

};

   223

   224

function move_elements_to_group(elements) {

   225

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

   226

    for(let element of elements){

   230

        newgroup.appendChild(element);

   231

    }

   232

    return newgroup;

   233

}

   234

function getLinesIntesection(l1, l2) {

   239

    /*

   240

    Compute intersection of two lines

   241

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

   242

   243

                          ^ l2vect

   244

                         /

   245

                        /

   246

                       /

   247

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

   248

                     / intersection

   249

                    /

   250

                   /

   251

                   l2start

   252

   253

    intersection = l1start + l1vect * a

   254

    intersection = l2start + l2vect * b

   255

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

   256

   259

   260

    // express a

   262

   263

    // substitute a to have only b

   265

   266

    // expand to isolate b

   268

   269

    // factorize b

   271

   272

    // extract b

   274

    */

   275

   282

   283

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

   284

};

   285

   286

class ReferenceFrame {

   287

    constructor(

   288

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

   289

        marks,

   290

        // [Xlabel, Ylabel]

   291

        labels,

   292

        // [Xline, Yline]

   293

        lines,

   294

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

   295

        formats

   296

    ){

   298

   299

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

   300

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

   301

        let base_point = this.getBasePoint();

   302

   303

        // setup clipping for curves

   304

        this.clipPathPathDattr =

   305

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

   306

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

   307

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

   308

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

   309

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

   310

   311

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

   312

   313

        for(let axis of this.axes){

   314

            axis.setBasePoint(base_point);

   315

        }

   316

    }

   317

   318

	getBaseRef(){

   319

        return this.base_ref;

   320

	}

   321

   322

    getClipPathPathDattr(){

   323

        return this.clipPathPathDattr;

   324

    }

   325

   326

    applyRanges(ranges){

   327

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

   329

        }

   330

    }

   331

   332

    getBasePoint() {

   333

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

   334

   335

        /*

   336

        Compute graph clipping region base point

   337

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

   338

   339

        Clipping region is a parallelogram containing axes lines,

   340

        and whose sides are parallel to axes line respectively.

   341

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

   342

        calculus of parallelogram base point.

   343

   345

                   /         /

   346

                  /         /

   347

                 /         /

   350

              /         /

   352

        base_point   ystart

   353

   354

        */

   355

   357

   358

        return base_point;

   359

   360

    }

   361

   362

}

   363

   364

class Axis {

   365

    constructor(label, marks, line, format){

   366

        this.lineElement = line;

   367

        this.line = lineFromPath(line);

   368

        this.format = format;

   369

   370

        this.label = label;

   371

        this.marks = marks;

   372

   373

   374

        // add transforms for elements sliding along the axis line

   375

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

   376

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

   377

                let transform = svg_root.createSVGTransform();

   378

                element.transform.baseVal.appendItem(transform);

   379

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

   380

            };

   381

        };

   382

   383

        // group marks an labels together

   388

        parent.appendChild(group);

   389

   391

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

   392

            let transform = svg_root.createSVGTransform();

   393

            group.transform.baseVal.appendItem(transform);

   394

            this[name+"_transform"]=transform;

   395

        };

   396

   397

        this.group = group;

   398

        this.marks_group = marks_group;

   399

        this.marks_and_label_group = marks_and_label_group;

   400

   401

        this.mlg_clones = [];

   402

        this.last_mark_count = 0;

   403

    }

   404

   405

    setBasePoint(base_point){

   408

        let v = vector(start, base_point);

   409

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

   410

   416

   417

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

   418

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

   419

            let pos = vector(

   420

                // Marks are expected to be paths

   421

                // paths are expected to be lines

   422

                // intersection with axis line is taken 

   423

                // as reference for mark position

   424

                base_point, getLinesIntesection(

   425

                    this.line, lineFromPath(mark)));

   426

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

   427

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

   428

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

   429

            }

   430

        }

   431

    }

   432

   433

    applyRange(min, max){

   434

        let range = max - min;

   435

   436

        // compute how many units for a mark

   437

        //

   438

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

   439

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

   440

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

   441

        //

   442

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

   443

        //   fill the text in labels...

   444

        //   Unit is pow(10, integer_number )

   445

        //

   446

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

   447

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

   448

        //

   449

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

   450

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

   451

        //   log10(5) ~= 0.69897

   452

   453

   454

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

   455

   456

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

   457

        //       1       -> ms

   458

        //       10      -> s/100

   459

        //       100     -> s/10

   460

        //       1000    -> s

   461

        //       60000   -> min

   462

        //       3600000 -> hour

   463

        //       ...

   464

        //

   465

   466

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

   467

   468

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

   469

        // _____________|________________

   470

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

   471

        // <--offset---> ^

   472

        //               |_original

   473

   474

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

   475

        // |________________

   476

        // |6  7  8  9  10...

   477

        //  ^

   478

        //  |_original

   479

   480

        // min < 0, max < 0, offset = max-min (range)

   481

        // _____________|_

   482

        // ... -5 -4 -3 |-2

   483

        // <--offset---> ^

   484

        //               |_original

   485

   486

        let offset = (max>=0 && min>=0) ? 0 : (

   487

                     (max<0 && min<0)   ? range : -min);

   488

   489

        // compute unit vector

   490

        let [_start, vect] = this.line;

   491

        let unit_vect = vectorscale(vect, unit/range);

   492

        let [umin, umax, uoffset] = [min,max,offset].map(val => Math.round(val/unit));

   493

        let mark_count = umax-umin;

   494

   495

        // apply unit vector to marks and label

   518