1

include yslt_noindent.yml2

     2

     3

// overrides yslt's output function to set CDATA

     4

decl output(method, cdata-section-elements="xhtml:script");

     5

     6

in xsl decl labels(*ptr, name="defs_by_labels") alias call-template {

     7

    with "hmi_element", "$hmi_element";

     8

    with "labels"{text *ptr};

     9

};

    10

    11

in xsl decl optional_labels(*ptr, name="defs_by_labels") alias call-template {

    12

    with "hmi_element", "$hmi_element";

    13

    with "labels"{text *ptr};

    14

    with "mandatory","'no'";

    15

};

    16

    17

in xsl decl svgtmpl(match, xmlns="http://www.w3.org/2000/svg") alias template;

    18

in xsl decl svgfunc(name, xmlns="http://www.w3.org/2000/svg") alias template;

    19

    20

!debug_output_calls = []

    21

    22

istylesheet

    23

            /* From Inkscape */

    24

            xmlns:dc="http://purl.org/dc/elements/1.1/"

    25

            xmlns:cc="http://creativecommons.org/ns#"

    26

            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

    27

            xmlns:svg="http://www.w3.org/2000/svg"

    28

            xmlns:xlink="http://www.w3.org/1999/xlink"

    29

            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

    30

            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

    31

            xmlns:xhtml="http://www.w3.org/1999/xhtml"

    32

    33

            /* Our namespace to invoke python code */

    34

            xmlns:ns="beremiz"

    35

            extension-element-prefixes="ns func exsl regexp str dyn"

    36

            exclude-result-prefixes="ns str regexp exsl func dyn" {

    37

    38

    43

    const "svg_root_id", "/svg:svg/@id";

    44

    const "hmi_elements", "//svg:*[starts-with(@inkscape:label, 'HMI:')]";

    45

    47

    48

    //////////////// Inline SVG

    49

    50

    // Identity template :

    51

    //  - copy every attributes 

    52

    //  - copy every sub-elements

    53

    template "@* | node()", mode="inline_svg" {

    54

      // use real xsl:copy instead copy-of alias from yslt.yml2

    55

      if "not(@id = $discardable_elements/@id)"

    56

          xsl:copy apply "@* | node()", mode="inline_svg";

    57

    }

    58

    59

    // replaces inkscape's height and width hints. forces fit

    60

    template "svg:svg/@width", mode="inline_svg";

    61

    template "svg:svg/@height", mode="inline_svg";

    62

    svgtmpl "svg:svg", mode="inline_svg" svg {

    63

        attrib "preserveAspectRatio" > none

    64

        attrib "height" > 100vh

    65

        attrib "width" > 100vw

    66

        apply "@* | node()", mode="inline_svg";

    67

    }

    68

    // ensure that coordinate in CSV file generated by inkscape are in default reference frame

    69

    template "svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]", mode="inline_svg" {

    70

        error > ViewBox settings other than X=0, Y=0 and Scale=1 are not supported

    71

    }

    72

    // ensure that coordinate in CSV file generated by inkscape match svg default unit

    73

    template "sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']", mode="inline_svg" {

    74

        error > All units must be set to "px" in Inkscape's document properties

    75

    }

    76

    77

    78

    //////////////// Clone Unlinking

    79

    80

    // svg:use (inkscape's clones) inside a widgets are

    81

    // replaced by real elements they refer in order to :

    82

    //  - allow finding "needle" element in "meter" widget,

    83

    //    even if "needle" is in a group refered by a svg use.

    84

    //  - if "needle" is visible through a svg:use for

    85

    //    each instance of the widget, then needle would show

    86

    //    the same position in all instances

    87

    //

    88

    // For now, clone unlinkink applies to descendants of all widget except HMI:Page

    89

    // TODO: narrow application of clone unlinking to active elements,

    90

    //       while keeping static decoration cloned

    91

    const "to_unlink", "$hmi_elements[not(@id = $hmi_pages)]//svg:use";

    92

    svgtmpl "svg:use", mode="inline_svg"

    93

    {

    94

        choose {

    95

            when "@id = $to_unlink/@id"

    96

                call "unlink_clone";

    97

            otherwise

    98

                xsl:copy apply "@* | node()", mode="inline_svg";

    99

        }

   100

    }

   101

   102

    // to unlink a clone, an group containing a copy of target element is created

   103

    // that way, style and transforms can be preserved

   104

    const "_excluded_use_attrs" {

   105

        name > href

   106

        name > width

   107

        name > height

   108

        name > x

   109

        name > y

   110

    }

   111

    const "excluded_use_attrs","exsl:node-set($_excluded_use_attrs)";

   112

   113

    svgfunc "unlink_clone"{

   114

        g{

   115

            // include non excluded attributes

   116

            foreach "@*[not(local-name() = $excluded_use_attrs/name)]"

   117

                attrib "{name()}" > «.»

   118

   119

            const "targetid","substring-after(@xlink:href,'#')";

   120

            apply "//svg:*[@id = $targetid]", mode="unlink_clone"{

   121

                with "seed","@id";

   122

            }

   123

        }

   124

    }

   125

   126

    // clone unlinking is really similar to deep-copy

   127

    // all nodes are sytematically copied

   128

    svgtmpl "@id", mode="unlink_clone" {

   129

        param "seed";

   130

        attrib "id" > «$seed»_«.»

   131

    }

   132

   133

    svgtmpl "@*", mode="unlink_clone" xsl:copy;

   134

   135

    // copying widgets would have unwanted effect

   136

    // instead widget is refered through a svg:use.

   137

    svgtmpl "svg:*", mode="unlink_clone" {

   138

        param "seed";

   139

        choose {

   140

            // node recursive copy ends when finding a widget

   141

            when "@id = $hmi_elements/@id" {

   142

                // place a clone instead of copying

   143

                use{

   144

                    attrib "xlink:href" > «concat('#',@id)»

   145

                }

   146

            }

   147

            otherwise {

   148

                xsl:copy apply "@* | node()", mode="unlink_clone" {

   149

                    with "seed","$seed";

   150

                }

   151

            }

   152

        }

   153

    }

   154

   155

    /*const "mark" > =HMI=\n*/

   156

   157

    const "result_svg" apply "/", mode="inline_svg";

   158

    const "result_svg_ns", "exsl:node-set($result_svg)";

   159

   160

    template "/" {

   161

        comment > Made with SVGHMI. https://beremiz.org

   162

   163

        // use python to call all debug output from included definitions

   164

        // '&bug' is a workaround for pyPEG that choke on yml2 python results not parsing to a single call

   165

        !"&bug {"+"\n".join(["comment {\n| \n| %s:\n call \"%s\";\n| \n}"%(n,n) for n in debug_output_calls]) +"}"!

   166

   167

        comment {

   168

            | Unlinked :

   169

            foreach "$to_unlink"{

   170

                | «@id»

   171

            }

   172

        }

   173

        /**/

   174

        html xmlns="http://www.w3.org/1999/xhtml"

   175

             xmlns:svg="http://www.w3.org/2000/svg"

   176

             xmlns:xlink="http://www.w3.org/1999/xlink" {

   177

            head;

   178

            body style="margin:0;overflow:hidden;" {

   179

                copy "$result_svg";

   180

                script{

   181

                    call "scripts";

   182

                }

   183

            }

   184

        }

   185

    }

   186

   187

    /*

   188

        Parses:

   189

        "HMI:WidgetType:param1:param2@path1@path2"

   190

   191

        Into:

   192

        widget type="WidgetType" {

   193

            arg value="param1";

   194

            arg value="param2";

   195

            path value="path1";

   196

            path value="path2";

   197

        }

   198

    */

   199

   200

   201

    function "scripts"

   202

    {

   203

        | //(function(){

   204

        |

   205

        | id = idstr => document.getElementById(idstr);

   206

        |

   207

        | var hmi_hash = [«$hmitree/@hash»]; 

   208

   209

        /* TODO re-enable

   210

        ||

   211

        function evaluate_js_from_descriptions() {

   212

            var Page;

   213

            var Input;

   214

            var Display;

   215

            var res = [];

   216

        ||

   217

        const "midmark" > \n«$mark»

   218

        apply """//*[contains(child::svg:desc, $midmark) or \

   219

                     starts-with(child::svg:desc, $mark)]""",2 

   220

              mode="code_from_descs";

   221

        ||

   222

            return res;

   223

        }

   224

        ||

   225

        */

   226

   227

        | var hmi_widgets = {

   228

        foreach "$hmi_elements" {

   229

            const "widget", "func:parselabel(@inkscape:label)/widget";

   230

            const "eltid","@id";

   231

        |   "«@id»": {

   232

        |     type: "«$widget/@type»",

   233

        |     args: [

   234

            foreach "$widget/arg"

   235

        |         "«@value»"`if "position()!=last()" > ,`

   236

        |     ],

   237

        |     indexes: [

   238

            foreach "$widget/path" {

   239

                choose {

   240

                    when "not(@index)" {

   241

                        warning > Widget «$widget/@type» id="«$eltid»" : No match for path "«@value»" in HMI tree

   242

                    }

   243

                    otherwise {

   244

        |             «@index»`if "position()!=last()" > ,`

   245

                    }

   246

                }

   247

            }

   248

        |     ],

   249

        |     element: id("«@id»"),

   250

            apply "$widget", mode="widget_defs" with "hmi_element",".";

   251

        |   }`if "position()!=last()" > ,`

   252

        }

   253

        | }

   254

        |

   255

        | var heartbeat_index = «$indexed_hmitree/*[@hmipath = '/HEARTBEAT']/@index»;

   256

        |

   257

        | var hmitree_types = [

   258

   259

        foreach "$indexed_hmitree/*" {

   260

        |     /* «@index»  «@hmipath» */ "«substring(local-name(), 5)»"`if "position()!=last()" > ,`

   261

        }

   262

   263

        | ]

   264

        |

   265

   266

        | var detachable_elements = {

   267

        foreach "$detachable_elements"{

   268

        |     "«@id»":[id("«@id»"), id("«../@id»")]`if "position()!=last()" > ,`

   269

        }

   270

        | }

   271

   272

        |

   273

        | var page_desc = {

   275

        | }

   276

   277

        |

   278

        | var default_page = "«$default_page»";

   279

        | var svg_root = id("«$svg_root_id»");

   280

        include text svghmi.js

   281

        | //})();

   282

    }

   283

   284

    // template "*", mode="code_from_descs" {

   285

    //     ||

   286

    //     {

   287

    //         var path, role, name, priv;

   288

    //         var id = "«@id»";

   289

    //     ||

   290

   291

    //     /* if label is used, use it as default name */

   292

    //     if "@inkscape:label"

   293

    //         |> name = "«@inkscape:label»";

   294

   295

    //     | /* -------------- */

   296

   297

    //     // this breaks indent, but fixing indent could break string literals

   298

    //     value "substring-after(svg:desc, $mark)";

   299

    //     // nobody reads generated code anyhow...

   300

   301

    //     ||

   302

   303

    //         /* -------------- */

   304

    //         res.push({

   305

    //             path:path,

   306

    //             role:role,

   307

    //             name:name,

   308

    //             priv:priv

   309

    //         })

   310

    //     }

   311

    //     ||

   312

    // }

   313

   314

   315

   316

    function "defs_by_labels" {

   317

        param "labels","''";

   318

        param "mandatory","'yes'";

   319

        param "hmi_element";

   320

        const "widget_type","@type";

   321

        foreach "str:split($labels)" {

   322

            const "name",".";

   323

            const "elt_id","$result_svg_ns//*[@id = $hmi_element/@id]//*[@inkscape:label=$name][1]/@id";

   324

            choose {

   325

                when "not($elt_id)" {

   326

                    if "$mandatory='yes'" {

   327

                        // TODO FIXME error > «$widget_type» widget must have a «$name» element

   328

                        warning > «$widget_type» widget must have a «$name» element

   329

                    }

   330

                    // otherwise produce nothing

   331

                }

   332

                otherwise {

   333

                    |     «$name»_elt: id("«$elt_id»"),

   334

                }

   335

            }

   336

        }

   337

    }

   338

   339

   340

    template "widget[@type='Display']", mode="widget_defs" {

   341

        param "hmi_element";

   342

        |     frequency: 5,

   343

        |     dispatch: function(value) {

   344

        choose {

   345

            when "$hmi_element[self::svg:text]"{

   346

            // TODO : care about <tspan> ?

   347

        |       this.element.textContent = String(value);

   348

            }

   349

            otherwise {

   350

                warning > Display widget as a group not implemented

   351

            }

   352

        }

   353

        |     },

   354

   355

    }

   356

    template "widget[@type='Meter']", mode="widget_defs" {

   357

        param "hmi_element";

   358

        |     frequency: 10,

   359

        labels("needle range");

   360

        optional_labels("value min max");

   361

        |     dispatch: function(value) {

   362

        |         if(this.value_elt)

   363

        |             this.value_elt.textContent = String(value);

   364

        |         let [min,max,totallength] = this.range;

   365

        |         let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));

   366

        |         let tip = this.range_elt.getPointAtLength(length);

   367

        |         this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y);

   368

        |     },

   369

        |     origin: undefined,

   370

        |     range: undefined,

   371

        |     init: function() {

   372

        |         let min = this.min_elt ?

   373

        |                     Number(this.min_elt.textContent) :

   374

        |                     this.args.length >= 1 ? this.args[0] : 0;

   375

        |         let max = this.max_elt ?

   376

        |                     Number(this.max_elt.textContent) :

   377

        |                     this.args.length >= 2 ? this.args[1] : 100;

   378

        |         this.range = [min, max, this.range_elt.getTotalLength()]

   379

        |         this.origin = this.needle_elt.getPointAtLength(0);

   380

        |     },

   381

    }

   382

   383

    def "func:escape_quotes" {

   384

        param "txt";

   385

        // have to use a python string to enter escaped quote

   386

        const "frst", !"substring-before($txt,'\"')"!;

   387

        const "frstln", "string-length($frst)";

   388

        choose {

   389

            when "$frstln > 0 and string-length($txt) > $frstln" {

   390

                result !"concat($frst,'\\\"',func:escape_quotes(substring-after($txt,'\"')))"!;

   391

            }

   392

            otherwise {

   393

                result "$txt";

   394

            }

   395

        }

   396

    }

   397

   398

    template "widget[@type='Input']", mode="widget_defs" {

   399

        param "hmi_element";

   400

        const "value_elt" {

   401

            optional_labels("value");

   402

        }

   403

        const "have_value","string-length($value_elt)>0";

   404

        value "$value_elt";

   405

        if "$have_value"

   406

        |     frequency: 5,

   407

   408

        |     dispatch: function(value) {

   409

   410

        if "$have_value"

   411

        |         this.value_elt.textContent = String(value);

   412

   413

        |     },

   414

        const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";

   415

        |     init: function() {

   416

        if "$edit_elt_id" {

   417

        |         id("«$edit_elt_id»").addEventListener(

   418

        |             "click", 

   419

        |             evt => alert('XXX TODO : Edit value'));

   420

        }

   421

        foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {

   422

        |         id("«@id»").addEventListener(

   423

        |             "click", 

   424

        |             evt => {let new_val = change_hmi_value(this.indexes[0], "«func:escape_quotes(@inkscape:label)»");

   425

            if "$have_value"{

   426

        |                     this.value_elt.textContent = String(new_val);

   427

            }

   428

        |                    });

   429

                              /* TODO gray out value until refreshed */

   430

        }

   431

        |     },

   432

    }

   433

    template "widget[@type='Button']", mode="widget_defs" {

   434

    }

   435

    template "widget[@type='Toggle']", mode="widget_defs" {

   436

        |     frequency: 5,

   437

    }

   438

    template "widget[@type='Switch']", mode="widget_defs" {

   439

        param "hmi_element";

   440

        |     frequency: 5,

   441

        |     dispatch: function(value) {

   442

        |         for(let choice of this.choices){

   443

        |             if(value != choice.value){

   444

        |                 choice.elt.setAttribute("style", "display:none");

   445

        |             } else {

   446

        |                 choice.elt.setAttribute("style", choice.style);

   447

        |             }

   448

        |         }

   449

        |     },

   450

        |     init: function() {

   451

        |         // Hello Switch

   452

        |     },

   453

        |     choices: [

   454

        const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+)(#.*)?$'"!;

   455

        foreach "$hmi_element/*[regexp:test(@inkscape:label,$regex)]" {

   456

            const "literal", "regexp:match(@inkscape:label,$regex)[2]";

   457

        |         {

   458

        |             elt:id("«@id»"),

   459

        |             style:"«@style»",

   460

        |             value:«$literal»

   461

        |         }`if "position()!=last()" > ,`

   462

        }

   463

        |     ],

   464

    }

   465

    template "widget[@type='Jump']", mode="widget_defs" {

   466

        param "hmi_element";

   467

        |     on_click: function(evt) {

   468

        |         switch_page(this.args[0], this.indexes[0]);

   469

        |     },

   470

        |     init: function() {

   471

        /* registering event this way doies not "click" through svg:use 

   472

        |     this.element.onclick = evt => switch_page(this.args[0]);

   473

        event must be registered by adding attribute to element instead

   474

        TODO : generalize mouse event handling by global event capture + getElementsAtPoint()

   475

        */

   476

        |         this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click(evt)");

   477

        |     },

   478

    }

   479

}