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_elt, this.x_interval_major_mark_elt],

    70

                 [this.y_interval_minor_mark_elt, this.y_interval_major_mark_elt]],

    71

                [this.x_axis_label_elt, this.y_axis_label_elt],

    72

                [this.x_axis_line_elt, this.y_axis_line_elt],

    73

                [this.x_format, this.y_format]);

    74

    75

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

    76

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

    77

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

    78

            let 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 = this.curves.map(_unused => []);

    90

            this.max_data_length = this.args[0];

    91

        }

    92

    93

        dispatch(value,oldval, index) {

    97

            // naive local buffer impl. 

    98

            // data is updated only when graph is visible

    99

            // TODO: replace with separate recording

   100

   102

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

   103

            let ymin_damaged = false;

   104

            let ymax_damaged = false;

   105

            let overflow;

   106

   107

            if(data_length > this.max_data_length){

   108

                // remove first item

   110

                data_length = data_length - 1;

   119

   120

            if(!this.fixed_y_range){

   121

                ymin_damaged = overflow <= this.ymin;

   122

                ymax_damaged = overflow >= this.ymax;

   123

                if(value > this.ymax){

   124

                    ymax_damaged = false;

   125

                    this.ymax = value;

   126

                }

   127

                if(value < this.ymin){

   128

                    ymin_damaged = false;

   129

                    this.ymin = value;

   130

                }

   131

            }

   132

            let Ylength = this.ymax - this.ymin;

   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

   138

   139

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

   140

            this.curves_d_attr =

   141

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

   143

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

   144

                        let xv = vectorscale(xvect, (x - this.xmin) / Xlength);

   145

                        let yv = vectorscale(yvect, (y - this.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(ymax_damaged && y > this.ymax) this.ymax = y;

   151

                        }

   152

   153

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

   154

                    });

   155

   156

                    new_d.unshift("M ");

   157

   158

                    return new_d.join('');

   159

                });

   160

   161

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

   162

   163

            this.request_animate();

   164

        }

   165

   166

        animate(){

   167

   168

            // move elements only if enough data

   169

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

   170

   171

                // move marks and update labels

   172

                this.reference.applyRanges([[this.xmin, this.xmax],

   173

                                            [this.ymin, this.ymax]]);

   174

   175

                // apply computed curves "d" attributes

   176

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

   177

                    curve.setAttribute("d", d_attr);

   178

                }

   179

            }

   180

        }

   181

   182

    ||

   183

}

   184

   185

widget_defs("XYGraph") {

   186

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

   187

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

   188

   189

    |     init_specific() {

   190

   191

    // collect all curve_n labelled children

   192

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

   193

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

   194

        const "id","@id";

   195

   196

        // detect non-unique names

   197

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

   198

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

   199

        }

   200

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

   201

    }

   202

   203

    |     }

   204

   205

}

   206

   207

emit "declarations:XYGraph"

   208

||

   209

function lineFromPath(path_elt) {

   210

    let start = path_elt.getPointAtLength(0);

   211

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

   212

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

   213

};

   214

   215

function vector(p1, p2) {

   216

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

   217

};

   218

   219

function vectorscale(p1, p2) {

   220

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

   221

};

   222

   223

function move_elements_to_group(elements) {

   224

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

   227

    for(let element of elements){

   228

        let parent = element.parentElement;

   229

        if(parent !== null)

   230

            parent.removeChild(element);

   231

        newgroup.appendChild(element);

   232

    }

   233

    return newgroup;

   234

}

   235

function getLinesIntesection(l1, l2) {

   236

    let [l1start, l1vect] = l1;

   237

    let [l2start, l2vect] = l2;

   238

   240

    /*

   241

    Compute intersection of two lines

   242

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

   243

   244

                          ^ l2vect

   245

                         /

   246

                        /

   247

                       /

   248

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

   249

                     / intersection

   250

                    /

   251

                   /

   252

                   l2start

   253

   282

};

   283

   284

class ReferenceFrame {

   285

    constructor(

   286

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

   287

        marks,

   288

        // [Xlabel, Ylabel]

   289

        labels,

   290

        // [Xline, Yline]

   291

        lines,

   292

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

   293

        formats

   294

    ){

   295

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

   296

   297

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

   298

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

   299

        let base_point = this.getBasePoint();

   300

   301

        // setup clipping for curves

   302

        this.clipPathPathDattr =

   303

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

   304

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

   305

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

   306

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

   307

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

   308

   309

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

   310

   311

        for(let axis of this.axes){

   312

            axis.setBasePoint(base_point);

   313

        }

   314

    }

   315

   316

	getBaseRef(){

   317

        return this.base_ref;

   318

	}

   319

   320

    getClipPathPathDattr(){

   321

        return this.clipPathPathDattr;

   322

    }

   323

   324

    applyRanges(ranges){

   327

    }

   328

   329

    getBasePoint() {

   330

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

   331

   332

        /*

   333

        Compute graph clipping region base point

   334

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

   335

   336

        Clipping region is a parallelogram containing axes lines,

   337

        and whose sides are parallel to axes line respectively.

   338

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

   339

        calculus of parallelogram base point.

   340

   341

                              ^ given Y axis (yvect)

   342

                   /         /

   343

                  /         /

   344

                 /         /

   345

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

   346

               /         /origin

   347

              /         /

   348

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

   349

        base_point   ystart

   350

   351

        */

   352

   353

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

   354

   355

        return base_point;

   356

   357

    }

   358

   359

}

   360

   361

class Axis {

   362

    constructor(label, marks, line, format){

   363

        this.lineElement = line;

   364

        this.line = lineFromPath(line);

   365

        this.format = format;

   366

   367

        this.label = label;

   368

        this.marks = marks;

   369

   370

   371

        // add transforms for elements sliding along the axis line

   372

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

   373

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

   374

                let transform = svg_root.createSVGTransform();

   375

                element.transform.baseVal.appendItem(transform);

   376

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

   377

            };

   378

        };

   379

   380

        // group marks an labels together

   381

        let parent = line.parentElement;

   386

   387

        // Add transforms to group

   388

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

   389

            let transform = svg_root.createSVGTransform();

   391

            this[name+"_transform"]=transform;

   392

        };

   393

   398

        this.last_mark_count = 0;

   399

    }

   400

   401

    setBasePoint(base_point){

   402

        // move Axis to base point

   403

        let [start, _vect] = this.line;

   404

        let v = vector(start, base_point);

   405

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

   406

   407

        // Move marks and label to base point.

   408

        // _|_______          _|________

   409

        //  |  '  |     ==>    '

   410

        //  |     0            0

   411

        //  |                  |

   412

   413

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

   414

            let pos = vector(

   415

                // Marks are expected to be paths

   416

                // paths are expected to be lines

   417

                // intersection with axis line is taken 

   418

                // as reference for mark position

   422

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

   431

   432

    applyRange(min, max){

   433

        let range = max - min;

   434

   435

        // compute how many units for a mark

   436

        //

   437

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

   438

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

   439

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

   440

        //

   441

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

   442

        //   fill the text in labels...

   443

        //   Unit is pow(10, integer_number )

   444

        //

   445

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

   446

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

   447

        //

   448

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

   449

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

   450

        //   log10(5) ~= 0.69897

   451

   452

   453

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

   454

   455

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

   456

        //       1       -> ms

   457

        //       10      -> s/100

   458

        //       100     -> s/10

   459

        //       1000    -> s

   460

        //       60000   -> min

   461

        //       3600000 -> hour

   462

        //       ...

   463

        //

   464

   465

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

   466

   467

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

   468

        // _____________|________________

   469

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

   470

        // <--offset---> ^

   471

        //               |_original

   472

   473

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

   474

        // |________________

   475

        // |6  7  8  9  10...

   476

        //  ^

   477

        //  |_original

   478

   479

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

   480

        // _____________|_

   481

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

   482

        // <--offset---> ^

   483

        //               |_original

   484

   485

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

   486

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

   487

   488

        // compute unit vector

   489

        let [_start, vect] = this.line;

   493

   494

        // apply unit vector to marks and label

   495

        // offset is a representing position of an 

   496

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

   498

   499

        //              ^

   500

        //              | unit_vect

   501

        //              |<--->

   502

        //     _________|__________>

   503

        //     ^  |  '  |  '  |  '

   504

        //     |yoffset |     1 

   505

        //     |        |

   506

        //     v xoffset|

   507

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

   508

        // base_point

   509

   510

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

   512

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

   513

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

   514

        // move minor mark to first half positive mark position