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

    19

istylesheet

    20

            /* From Inkscape */

    21

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

    22

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

    23

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

    24

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

    25

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

    26

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

    27

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

    28

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

    29

    30

            /* Our namespace to invoke python code */

    31

            xmlns:ns="beremiz"

    32

            extension-element-prefixes="ns func"

    33

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

    34

    35

    /* This retrieves geometry obtained through "inkscape -S"

    36

     * already parsed by python and presented as a list of

    37

     * <bbox x="0" y="0" w="42" h="42">

    38

     */

    39

    const "geometry", "ns:GetSVGGeometry()";

    40

    const "hmitree", "ns:GetHMITree()";

    41

    42

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

    43

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

    44

    const "hmi_geometry", "$geometry[@Id = $hmi_elements/@id]";

    45

    46

    const "hmi_pages", "$hmi_elements[func:parselabel(@inkscape:label)/widget/@type = 'Page']";

    47

    48

    const "default_page" choose {

    49

        when "count($hmi_pages) > 1" {

    50

            const "Home_page", 

    51

                "$hmi_pages[func:parselabel(@inkscape:label)/widget/arg[1]/@value = 'Home']";

    52

            choose {

    53

                when "$Home_page" > Home

    54

                otherwise {

    55

                    error "No Home page defined!";

    56

                }

    57

            }

    58

        }

    59

        when "count($hmi_pages) = 0" {

    60

            error "No page defined!";

    61

        }

    62

        otherwise > «func:parselabel($hmi_pages/@inkscape:label)/widget/arg[1]/@value»

    63

    }

    64

    65

    const "_categories" {

    66

        noindex > HMI_ROOT

    67

        noindex > HMI_NODE

    68

        noindex > HMI_PLC_STATUS

    69

        noindex > HMI_CURRENT_PAGE

    70

    }

    71

    const "categories", "exsl:node-set($_categories)";

    72

    const "_indexed_hmitree" apply "$hmitree", mode="index";

    73

    const "indexed_hmitree", "exsl:node-set($_indexed_hmitree)";

    74

    75

    template "*", mode="index" {

    76

        param "index", "0";

    77

        param "parentpath", "''";

    78

        const "content" {

    79

            const "path"

    80

                choose {

    81

                    when "local-name() = 'HMI_ROOT'" > «$parentpath»

    82

                    otherwise > «$parentpath»/«@name»

    83

                }

    84

            choose {

    85

                when "not(local-name() = $categories/noindex)" {

    86

                    xsl:copy {

    87

                        attrib "index" > «$index»

    88

                        attrib "hmipath" > «$path»

    89

                        foreach "@*" xsl:copy;

    90

                    }

    91

                    /* no node expected below value nodes */

    92

                }

    93

                otherwise {

    94

                    apply "*[1]", mode="index"{

    95

                        with "index", "$index";

    96

                        with "parentpath" > «$path»

    97

                    }

    98

                }

    99

            }

   100

        }

   101

   102

        copy "$content";

   103

        apply "following-sibling::*[1]", mode="index" {

   104

            with "index", "$index + count(exsl:node-set($content)/*)";

   105

            with "parentpath" > «$parentpath»

   106

        }

   107

    }

   108

   109

    /* Identity template :

   110

     *  - copy every attributes 

   111

     *  - copy every sub-elements

   112

     */

   113

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

   114

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

   115

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

   116

    }

   117

   118

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

   119

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

   120

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

   121

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

   122

        attrib "preserveAspectRatio" > none

   123

        attrib "height" > 100vh

   124

        attrib "width" > 100vw

   125

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

   126

    }

   127

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

   128

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

   129

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

   130

    }

   131

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

   132

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

   133

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

   134

    }

   135

   136

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

   137

   138

    /* copy root node and add geometry as comment for a test */

   139

    template "/" { 

   140

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

   141

        /* DEBUG DATA */

   142

        comment {

   143

            apply "$hmi_geometry", mode="testgeo";

   144

        }

   145

        comment {

   146

            apply "$hmitree", mode="testtree";

   147

        }

   148

        comment {

   149

            apply "$indexed_hmitree", mode="testtree";

   150

        }

   151

        /**/

   152

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

   153

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

   154

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

   155

            head;

   156

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

   157

                apply "svg:svg", mode="inline_svg";

   158

                script{

   159

                    call "scripts";

   160

                }

   161

            }

   162

        }

   163

    }

   164

   165

    /*

   166

        Parses:

   167

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

   168

   169

        Into:

   170

        widget type="WidgetType" {

   171

            arg value="param1";

   172

            arg value="param2";

   173

            path value="path1";

   174

            path value="path2";

   175

        }

   176

    */

   177

   178

    func:function name="func:parselabel" {

   179

        param "label";

   180

        const "description", "substring-after($label,'HMI:')";

   181

   182

        const "_args", "substring-before($description,'@')";

   183

        const "args" choose {

   184

            when "$_args" value "$_args";

   185

            otherwise value "$description";

   186

        }

   187

   188

        const "_type", "substring-before($args,':')";

   189

        const "type" choose {

   190

            when "$_type" value "$_type";

   191

            otherwise value "$args";

   192

        }

   193

   194

        const "ast" if "$type" widget {

   195

            attrib "type" > «$type»

   196

            foreach "str:split(substring-after($args, ':'), ':')" {

   197

                arg {

   198

                    attrib "value" > «.»

   199

                }

   200

            }

   201

            const "paths", "substring-after($description,'@')";

   202

            foreach "str:split($paths, '@')" {

   203

                path {

   204

                    attrib "value" > «.»

   205

                }

   206

            }

   207

        }

   208

   209

        func:result select="exsl:node-set($ast)"

   210

    }

   211

   212

    // returns all directly or indirectly refered elements

   213

    func:function name="func:refered_elements" {

   214

        param "elems";

   215

        const "descend", "$elems/descendant-or-self::svg:*";

   216

        const "clones", "$descend[self::svg:use]";

   217

        const "reals", "$descend[not(self::svg:use)]";

   218

        const "originals", "//svg:*[concat('#',@id) = $clones/@xlink:href]";

   219

        choose {

   220

            when "$originals" 

   221

                func:result select="$reals | func:refered_elements($originals)";

   222

            otherwise

   223

                func:result select="$reals";

   224

        }

   225

    }

   226

   227

    function "scripts"

   228

    {

   229

        | //(function(){

   230

        |

   231

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

   232

   233

        /* TODO re-enable

   234

        ||

   235

        function evaluate_js_from_descriptions() {

   236

            var Page;

   237

            var Input;

   238

            var Display;

   239

            var res = [];

   240

        ||

   241

        const "midmark" > \n«$mark»

   242

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

   243

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

   244

              mode="code_from_descs";

   245

        ||

   246

            return res;

   247

        }

   248

        ||

   249

        */

   250

   251

        | var hmi_widgets = {

   252

        foreach "$hmi_elements" {

   253

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

   254

            | "«@id»": {

   255

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

   256

            |     args: [

   257

            foreach "$widget/arg"

   258

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

   259

            |     ],

   260

            |     indexes: [

   261

            foreach "$widget/path" {

   262

                const "hmipath","@value";

   263

                const "hmitree_match","$indexed_hmitree/*[@hmipath = $hmipath]";

   264

                choose {

   265

                    when "count($hmitree_match) = 0" {

   266

                        warning > No match for path "«$hmipath»" in HMI tree

   267

                    }

   268

                    otherwise {

   269

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

   270

                    }

   271

                }

   272

            }

   273

            |     ],

   274

            |     element: document.getElementById("«@id»"),

   275

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

   276

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

   277

        }

   278

        | }

   279

        |

   280

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

   281

        |

   282

        | var hmitree_types = [

   283

   284

        foreach "$indexed_hmitree/*" {

   285

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

   286

        }

   287

   288

        | ]

   289

        |

   290

        | var page_desc = {

   291

   292

        foreach "$hmi_pages" {

   293

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

   294

            const "page", "."; 

   295

            const "p", "$hmi_geometry[@Id = $page/@id]"; 

   296

            const "page_ids","""$hmi_geometry[@Id != $page/@id and 

   297

                                @x >= $p/@x and @y >= $p/@y and 

   298

                                @x+@w <= $p/@x+$p/@w and @y+@h <= $p/@y+$p/@h]/@Id""";

   299

            const "page_sub_ids", "func:refered_elements($page)[@id = $hmi_elements/@id]/@id";

   300

            const "all_page_ids","$page_ids | $page_sub_ids[not(. = $page_ids)]"; 

   301

            |     "«$desc/arg[1]/@value»": {

   303

            |         bbox: [«$p/@x», «$p/@y», «$p/@w», «$p/@h»],

   304

            |         widgets: [

   305

            foreach "$all_page_ids" {

   306

            |             hmi_widgets["«.»"]`if "position()!=last()" > ,`

   307

            }

   308

            |         ]

   309

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

   310

        }

   311

        | }

   312

   313

        |

   314

        | var default_page = "«$default_page»";

   315

        | var svg_root = document.getElementById("«$svg_root_id»");

   316

        include text svghmi.js

   317

        | //})();

   318

    }

   319

   320

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

   321

    //     ||

   322

    //     {

   323

    //         var path, role, name, priv;

   324

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

   325

    //     ||

   326

   327

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

   328

    //     if "@inkscape:label"

   329

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

   330

   331

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

   332

   333

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

   334

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

   335

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

   336

   337

    //     ||

   338

   339

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

   340

    //         res.push({

   341

    //             path:path,

   342

    //             role:role,

   343

    //             name:name,

   344

    //             priv:priv

   345

    //         })

   346

    //     }

   347

    //     ||

   348

    // }

   349

   350

   351

    /**/

   352

    template "bbox", mode="testgeo"{

   353

        | ID: «@Id» x: «@x» y: «@y» w: «@w» h: «@h»

   354

    }

   355

   356

    template "*", mode="testtree"{

   357

        param "indent", "''";

   358

        > «$indent» «local-name()» 

   359

        foreach "@*" > «local-name()»=«.» 

   360

        > \n

   361

        apply "*", mode="testtree" {

   362

            with "indent" value "concat($indent,'>')"

   363

        };

   364

    }

   365

    /**/

   366

   367

    function "defs_by_labels" {

   368

        param "labels","''";

   369

        param "mandatory","'yes'";

   370

        param "hmi_element";

   371

        const "widget_type","@type";

   372

        foreach "str:split($labels)" {

   373

            const "name",".";

   374

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

   375

            choose {

   376

                when "not($elt_id)" {

   377

                    if "$mandatory='yes'" {

   378

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

   379

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

   380

                    }

   381

                    // otherwise produce nothing 

   382

                }

   383

                otherwise {

   384

                    | «$name»_elt: document.getElementById("«$elt_id»"),

   385

                }

   386

            }

   387

        }

   388

    }

   389

   390

   391

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

   392

        param "hmi_element";

   393

        | frequency: 5,

   394

        | dispatch: function(value) {

   395

        choose {

   396

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

   397

            // TODO : care about <tspan> ?

   398

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

   399

            }

   400

            otherwise {

   401

                warning > Display widget as a group not implemented

   402

            }

   403

        }

   404

        | },

   405

   406

    }

   407

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

   408

        param "hmi_element";

   409

        | frequency: 10,

   410

        labels("value min max needle range");

   411

        | dispatch: function(value) {

   412

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

   413

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

   414

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

   415

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

   416

        // TODO : deal with transformations between needle and range

   417

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

   418

        | },

   419

        | origin: undefined,

   420

        | range: undefined,

   421

        | init: function() {

   422

        |     this.range = [Number(this.min_elt.textContent), Number(this.max_elt.textContent), this.range_elt.getTotalLength()]

   423

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

   424

        | },

   425

    }

   426

   427

    def "func:escape_quotes" {

   428

        param "txt";

   429

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

   430

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

   431

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

   432

        choose {

   433

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

   434

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

   435

            }

   436

            otherwise {

   437

                result "$txt";

   438

            }

   439

        }

   440

    }

   441

   442

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

   443

        param "hmi_element";

   444

        const "value_elt" {

   445

            optional_labels("value");

   446

        }

   447

        value "$value_elt";

   448

        if "$value_elt"

   449

            | frequency: 5,

   450

        | dispatch: function(value) {

   451

        if "$value_elt"

   452

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

   453

        | },

   454

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

   455

        | init: function() {

   456

        if "$edit_elt_id" {

   457

        |     document.getElementById("«$edit_elt_id»").addEventListener(

   458

        |         "click", 

   459

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

   460

        }

   461

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

   462

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

   463

        |         "click", 

   464

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

   465

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

   466

                          /* could gray out value until refreshed */

   467

        }

   468

        | },

   469

    }

   470

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

   471

    }

   472

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

   473

        |     frequency: 5,

   474

    }

   475

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

   476

        param "hmi_element";

   477

        | frequency: 5,

   478

        | dispatch: function(value) {

   479

        |     for(let choice of this.choices){

   480

        |         if(value != choice.value){

   481

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

   482

        |         } else {

   483

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

   484

        |         }

   485

        |     }

   486

        | },

   487

        | init: function() {

   488

        |     // Hello Switch

   489

        | },