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

istylesheet

    18

            /* From Inkscape */

    19

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

    20

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

    21

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

    22

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

    23

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

    24

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

    25

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

    26

    27

            /* Our namespace to invoke python code */

    28

            xmlns:ns="beremiz"

    29

            extension-element-prefixes="ns func"

    30

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

    31

    32

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

    33

     * already parsed by python and presented as a list of

    34

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

    35

     */

    36

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

    37

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

    38

    39

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

    40

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

    41

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

    42

    43

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

    44

    45

    const "default_page" choose {

    46

        when "count($hmi_pages) > 1" {

    47

            const "Home_page", 

    48

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

    49

            choose {

    50

                when "$Home_page" > Home

    51

                otherwise {

    52

                    error "No Home page defined!";

    53

                }

    54

            }

    55

        }

    56

        when "count($hmi_pages) = 0" {

    57

            error "No page defined!";

    58

        }

    59

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

    60

    }

    61

    62

    const "_categories" {

    63

        noindex > HMI_ROOT

    64

        noindex > HMI_NODE

    65

        noindex > HMI_PLC_STATUS

    66

        noindex > HMI_CURRENT_PAGE

    67

    }

    68

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

    69

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

    70

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

    71

    72

    template "*", mode="index" {

    73

        param "index", "0";

    74

        param "parentpath", "''";

    75

        const "content" {

    76

            const "path"

    77

                choose {

    78

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

    79

                    otherwise > «$parentpath»/«@name»

    80

                }

    81

            choose {

    82

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

    83

                    xsl:copy {

    84

                        attrib "index" > «$index»

    85

                        attrib "hmipath" > «$path»

    86

                        foreach "@*" xsl:copy;

    87

                    }

    88

                    /* no node expected below value nodes */

    89

                }

    90

                otherwise {

    91

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

    92

                        with "index", "$index";

    93

                        with "parentpath" > «$path»

    94

                    }

    95

                }

    96

            }

    97

        }

    98

    99

        copy "$content";

   100

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

   101

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

   102

            with "parentpath" > «$parentpath»

   103

        }

   104

    }

   105

   106

    /* Identity template :

   107

     *  - copy every attributes 

   108

     *  - copy every sub-elements

   109

     */

   110

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

   111

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

   112

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

   113

    }

   114

   115

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

   116

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

   117

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

   118

    template "svg:svg", mode="inline_svg" xsl:copy {

   119

        attrib "preserveAspectRatio" > none

   120

        attrib "height" > 100vh

   121

        attrib "width" > 100vw

   122

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

   123

    }

   132

   133

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

   134

   135

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

   136

    template "/" { 

   137

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

   138

        /* DEBUG DATA */

   139

        comment {

   140

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

   141

        }

   142

        comment {

   143

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

   144

        }

   145

        comment {

   146

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

   147

        }

   148

        /**/

   149

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

   150

            head;

   151

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

   152

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

   153

                script{

   154

                    call "scripts";

   155

                }

   156

            }

   157

        }

   158

    }

   159

   160

    /*

   161

        Parses:

   162

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

   163

   164

        Into:

   165

        widget type="WidgetType" {

   166

            arg value="param1";

   167

            arg value="param2";

   168

            path value="path1";

   169

            path value="path2";

   170

        }

   171

    */

   172

   173

    func:function name="func:parselabel" {

   174

        param "label";

   175

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

   176

   177

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

   178

        const "args" choose {

   179

            when "$_args" value "$_args";

   180

            otherwise value "$description";

   181

        }

   182

   183

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

   184

        const "type" choose {

   185

            when "$_type" value "$_type";

   186

            otherwise value "$args";

   187

        }

   188

   189

        const "ast" if "$type" widget {

   190

            attrib "type" > «$type»

   191

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

   192

                arg {

   193

                    attrib "value" > «.»

   194

                }

   195

            }

   196

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

   197

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

   198

                path {

   199

                    attrib "value" > «.»

   200

                }

   201

            }

   202

        }

   203

   204

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

   205

    }

   206

   207

    function "scripts"

   208

    {

   209

        | //(function(){

   210

        |

   211

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

   212

   213

        /* TODO re-enable

   214

        ||

   215

        function evaluate_js_from_descriptions() {

   216

            var Page;

   217

            var Input;

   218

            var Display;

   219

            var res = [];

   220

        ||

   221

        const "midmark" > \n«$mark»

   222

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

   223

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

   224

              mode="code_from_descs";

   225

        ||

   226

            return res;

   227

        }

   228

        ||

   229

        */

   230

   231

        | var hmi_widgets = {

   232

        foreach "$hmi_elements" {

   233

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

   234

            | "«@id»": {

   235

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

   236

            |     args: [

   237

            foreach "$widget/arg"

   238

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

   239

            |     ],

   240

            |     indexes: [

   241

            foreach "$widget/path" {

   242

                const "hmipath","@value";

   243

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

   244

                choose {

   245

                    when "count($hmitree_match) = 0" {

   246

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

   247

                    }

   248

                    otherwise {

   249

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

   250

                    }

   251

                }

   252

            }

   253

            |     ],

   254

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

   255

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

   256

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

   257

        }

   258

        | }

   259

        |

   260

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

   261

        |

   262

        | var hmitree_types = [

   263

   264

        foreach "$indexed_hmitree/*" {

   265

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

   266

        }

   267

   268

        | ]

   269

        |

   270

        | var page_desc = {

   271

   272

        foreach "$hmi_pages" {

   273

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

   274

            const "page", "."; 

   275

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

   276

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

   277

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

   278

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

   279

            const "page_elements", "$hmi_elements[@id = $page_ids]";

   280

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

   281

            |         id: "«@id»",

   282

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

   283

            |         widgets: [

   284

            foreach "$page_ids" {

   285

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

   286

            }

   287

            |         ]

   288

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

   289

        }

   290

        | }

   291

   292

        |

   293

        | var default_page = "«$default_page»";

   294

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

   295

        include text svghmi.js

   296

        | //})();

   297

    }

   298

   299

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

   300

    //     ||

   301

    //     {

   302

    //         var path, role, name, priv;

   303

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

   304

    //     ||

   305

   306

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

   307

    //     if "@inkscape:label"

   308

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

   309

   310

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

   311

   312

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

   313

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

   314

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

   315

   316

    //     ||

   317

   318

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

   319

    //         res.push({

   320

    //             path:path,

   321

    //             role:role,

   322

    //             name:name,

   323

    //             priv:priv

   324

    //         })

   325

    //     }

   326

    //     ||

   327

    // }

   328

   329

   330

    /**/

   331

    template "bbox", mode="testgeo"{

   332

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

   333

    }

   334

   335

    template "*", mode="testtree"{

   336

        param "indent", "''";

   337

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

   338

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

   339

        > \n

   340

        apply "*", mode="testtree" {

   341

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

   342

        };

   343

    }

   344

    /**/

   345

   346

    function "defs_by_labels" {

   347

        param "labels","''";

   348

        param "mandatory","'yes'";

   349

        param "hmi_element";

   350

        const "widget_type","@type";

   351

        foreach "str:split($labels)" {

   352

            const "name",".";

   353

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

   354

            choose {

   355

                when "not($elt_id)" {

   356

                    if "$mandatory='yes'" {

   357

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

   358

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

   359

                    }

   360

                    // otherwise produce nothing 

   361

                }

   362

                otherwise {

   363

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

   364

                }

   365

            }

   366

        }

   367

    }

   368

   369

   370

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

   371

        param "hmi_element";

   372

        | frequency: 5,

   373

        | dispatch: function(value) {

   374

        choose {

   375

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

   376

            // TODO : care about <tspan> ?

   377

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

   378

            }

   379

            otherwise {

   380

                warning > Display widget as a group not implemented

   381

            }

   382

        }

   383

        | },

   384

   385

    }

   386

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

   387

        param "hmi_element";

   388

        | frequency: 10,

   389

        labels("value min max needle range");

   390

        | dispatch: function(value) {

   391

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

   392

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

   393

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

   394

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

   395

        // TODO : deal with transformations between needle and range

   396

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

   397

        | },

   398

        | origin: undefined,

   399

        | range: undefined,

   400

        | init: function() {

   401

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

   402

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

   403

        | },

   404

    }

   405

   406

    def "func:escape_quotes" {

   407

        param "txt";

   408

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

   409

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

   410

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

   411

        choose {

   412

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

   413

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

   414

            }

   415

            otherwise {

   416

                result "$txt";

   417

            }

   418

        }

   419

    }

   420

   421

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

   422

        param "hmi_element";

   423

        const "value_elt" {

   424

            optional_labels("value");

   425

        }

   426

        value "$value_elt";

   427

        if "$value_elt"

   428

            | frequency: 5,

   429

        | dispatch: function(value) {

   430

        if "$value_elt"

   431

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

   432

        | },

   433

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

   434

        | init: function() {

   435

        if "$edit_elt_id" {

   436

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

   437

        |         "click", 

   438

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

   439

        }

   440

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

   441

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

   442

        |         "click", 

   443

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

   444

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

   445

                          /* could gray out value until refreshed */

   446

        }

   447

        | },

   448

    }

   449

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

   450

    }

   451

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

   452

        |     frequency: 5,

   453

    }

   454

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

   455

        |     frequency: 5,

   456

    }

   457

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

   458

        | init: function() {

   459

        |     this.element.addEventListener(

   460

        |         "click", 

   461

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

   462

        | },

   463

    }

   464

}