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

    35

    36

istylesheet

    37

            /* From Inkscape */

    38

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

    39

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

    40

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

    41

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

    42

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

    43

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

    44

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

    45

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

    46

    47

            /* Our namespace to invoke python code */

    48

            xmlns:ns="beremiz"

    49

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

    50

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

    51

    52

    53

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

    54

    55

    include hmi_tree.ysl2

    56

    57

    include geometry.ysl2

    58

    59

    include detachable_pages.ysl2

    60

    61

    include inline_svg.ysl2

    62

    63

    template "/" {

    64

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

    65

    66

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

    68

    69

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

    70

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

    71

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

    72

            head;

    73

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

    74

                copy "$result_svg";

    75

                script{

    76

                    call "scripts";

    77

                }

    78

            }

    79

        }

    80

    }

    81

    82

    /*

    83

        Parses:

    84

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

    85

    86

        Into:

    87

        widget type="WidgetType" {

    88

            arg value="param1";

    89

            arg value="param2";

    90

            path value="path1";

    91

            path value="path2";

    92

        }

    93

    */

    94

    95

    96

    function "scripts"

    97

    {

    98

        | //(function(){

    99

        |

   100

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

   101

        |

   102

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

   103

   104

        /* TODO re-enable

   105

        ||

   106

        function evaluate_js_from_descriptions() {

   107

            var Page;

   108

            var Input;

   109

            var Display;

   110

            var res = [];

   111

        ||

   112

        const "midmark" > \n«$mark»

   113

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

   114

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

   115

              mode="code_from_descs";

   116

        ||

   117

            return res;

   118

        }

   119

        ||

   120

        */

   121

   122

        | var hmi_widgets = {

   123

        foreach "$hmi_elements" {

   124

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

   125

            const "eltid","@id";

   126

        |   "«@id»": {

   127

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

   128

        |     args: [

   129

            foreach "$widget/arg"

   130

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

   131

        |     ],

   132

        |     indexes: [

   133

            foreach "$widget/path" {

   134

                choose {

   135

                    when "not(@index)" {

   136

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

   137

                    }

   138

                    otherwise {

   139

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

   140

                    }

   141

                }

   142

            }

   143

        |     ],

   144

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

   145

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

   146

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

   147

        }

   148

        | }

   149

        |

   150

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

   151

        |

   152

        | var hmitree_types = [

   153

   154

        foreach "$indexed_hmitree/*" {

   155

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

   156

        }

   157

   158

        | ]

   159

        |

   160

   161

        | var detachable_elements = {

   162

        foreach "$detachable_elements"{

   163

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

   164

        }

   165

        | }

   166

   167

        |

   168

        | var page_desc = {

   169

        apply "$hmi_pages", mode="page_desc";

   170

        | }

   171

   172

        |

   173

        | var default_page = "«$default_page»";

   174

        | var svg_root = id("«/svg:svg/@id»");

   175

        include text svghmi.js

   176

        | //})();

   177

    }

   178

   179

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

   180

    //     ||

   181

    //     {

   182

    //         var path, role, name, priv;

   183

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

   184

    //     ||

   185

   186

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

   187

    //     if "@inkscape:label"

   188

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

   189

   190

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

   191

   192

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

   193

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

   194

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

   195

   196

    //     ||

   197

   198

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

   199

    //         res.push({

   200

    //             path:path,

   201

    //             role:role,

   202

    //             name:name,

   203

    //             priv:priv

   204

    //         })

   205

    //     }

   206

    //     ||

   207

    // }

   208

   209

   210

   211

    function "defs_by_labels" {

   212

        param "labels","''";

   213

        param "mandatory","'yes'";

   214

        param "hmi_element";

   215

        const "widget_type","@type";

   216

        foreach "str:split($labels)" {

   217

            const "name",".";

   218

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

   219

            choose {

   220

                when "not($elt_id)" {

   221

                    if "$mandatory='yes'" {

   222

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

   223

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

   224

                    }

   225

                    // otherwise produce nothing

   226

                }

   227

                otherwise {

   228

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

   229

                }

   230

            }

   231

        }

   232

    }

   233

   234

   235

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

   236

        param "hmi_element";

   237

        |     frequency: 5,

   238

        |     dispatch: function(value) {

   239

        choose {

   240

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

   241

            // TODO : care about <tspan> ?

   242

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

   243

            }

   244

            otherwise {

   245

                warning > Display widget as a group not implemented

   246

            }

   247

        }

   248

        |     },

   249

   250

    }

   251

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

   252

        param "hmi_element";

   253

        |     frequency: 10,

   254

        labels("needle range");

   255

        optional_labels("value min max");

   256

        |     dispatch: function(value) {

   257

        |         if(this.value_elt)

   258

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

   259

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

   260

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

   261

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

   262

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

   263

        |     },

   264

        |     origin: undefined,

   265

        |     range: undefined,

   266

        |     init: function() {

   267

        |         let min = this.min_elt ?

   268

        |                     Number(this.min_elt.textContent) :

   269

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

   270

        |         let max = this.max_elt ?

   271

        |                     Number(this.max_elt.textContent) :

   272

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

   273

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

   274

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

   275

        |     },

   276

    }

   277

   278

    def "func:escape_quotes" {

   279

        param "txt";

   280

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

   281

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

   282

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

   283

        choose {

   284

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

   285

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

   286

            }

   287

            otherwise {

   288

                result "$txt";

   289

            }

   290

        }

   291

    }

   292

   293

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

   294

        param "hmi_element";

   295

        const "value_elt" {

   296

            optional_labels("value");

   297

        }

   298

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

   299

        value "$value_elt";

   300

        if "$have_value"

   301

        |     frequency: 5,

   302

   303

        |     dispatch: function(value) {

   304

   305

        if "$have_value"

   306

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

   307

   308

        |     },

   309

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

   310

        |     init: function() {

   311

        if "$edit_elt_id" {

   312

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

   313

        |             "click", 

   314

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

   315

        }

   316

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

   317

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

   318

        |             "click", 

   319

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

   320

            if "$have_value"{

   321

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

   322

            }

   323

        |                    });

   324

                              /* TODO gray out value until refreshed */

   325

        }

   326

        |     },

   327

    }

   328

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

   329

    }

   330

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

   331

        |     frequency: 5,

   332

    }

   333

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

   334

        param "hmi_element";

   335

        |     frequency: 5,

   336

        |     dispatch: function(value) {

   337

        |         for(let choice of this.choices){

   338

        |             if(value != choice.value){

   339

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

   340

        |             } else {

   341

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

   342

        |             }

   343

        |         }

   344

        |     },

   345

        |     init: function() {

   346

        |         // Hello Switch

   347

        |     },

   348

        |     choices: [

   349

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

   350

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

   351

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

   352

        |         {

   353

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

   354

        |             style:"«@style»",

   355

        |             value:«$literal»

   356

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

   357

        }

   358

        |     ],

   359

    }

   360

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

   361

        param "hmi_element";

   362

        |     on_click: function(evt) {

   363

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

   364

        |     },

   365

        |     init: function() {

   366

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

   367

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

   368

        event must be registered by adding attribute to element instead

   369

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

   370

        */

   371

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

   372

        |     },

   373

    }

   374

}