1

// svghmi.js

     2

     3

var cache = hmitree_types.map(_ignored => undefined);

     4

var updates = {};

     5

var need_cache_apply = []; 

     6

     7

function dispatch_value_to_widget(widget, index, value, oldval) {

     8

    try {

     9

        let idx = widget.offset ? index - widget.offset : index;

    10

        let idxidx = widget.indexes.indexOf(idx);

    11

        let d = widget.dispatch;

    12

        if(typeof(d) == "function" && idxidx == 0){

    13

            d.call(widget, value, oldval);

    14

        }

    15

        else if(typeof(d) == "object" && d.length >= idxidx){

    16

            d[idxidx].call(widget, value, oldval);

    17

        }

    18

        /* else dispatch_0, ..., dispatch_n ? */

    19

        /*else {

    20

            throw new Error("Dunno how to dispatch to widget at index = " + index);

    21

        }*/

    22

    } catch(err) {

    23

        console.log(err);

    24

    }

    25

}

    26

    27

function dispatch_value(index, value) {

    28

    let widgets = subscribers[index];

    29

    30

    let oldval = cache[index];

    31

    cache[index] = value;

    32

    33

    if(widgets.size > 0) {

    34

        for(let widget of widgets){

    35

            dispatch_value_to_widget(widget, index, value, oldval);

    36

        }

    37

    }

    38

};

    39

    40

function init_widgets() {

    41

    Object.keys(hmi_widgets).forEach(function(id) {

    42

        let widget = hmi_widgets[id];

    43

        let init = widget.init;

    44

        if(typeof(init) == "function"){

    45

            try {

    46

                init.call(widget);

    47

            } catch(err) {

    48

                console.log(err);

    49

            }

    50

        }

    51

    });

    52

};

    53

    54

// Open WebSocket to relative "/ws" address

    55

var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));

    56

ws.binaryType = 'arraybuffer';

    57

    58

const dvgetters = {

    59

    INT: (dv,offset) => [dv.getInt16(offset, true), 2],

    60

    BOOL: (dv,offset) => [dv.getInt8(offset, true), 1],

    61

    NODE: (dv,offset) => [dv.getInt8(offset, true), 1],

    62

    STRING: (dv, offset) => {

    63

        size = dv.getInt8(offset);

    64

        return [

    65

            String.fromCharCode.apply(null, new Uint8Array(

    66

                dv.buffer, /* original buffer */

    67

                offset + 1, /* string starts after size*/

    68

                size /* size of string */

    69

            )), size + 1]; /* total increment */

    70

    }

    71

};

    72

    73

// Apply updates recieved through ws.onmessage to subscribed widgets

    74

function apply_updates() {

    75

    for(let index in updates){

    76

        // serving as a key, index becomes a string

    77

        // -> pass Number(index) instead

    78

        dispatch_value(Number(index), updates[index]);

    79

        delete updates[index];

    80

    }

    81

}

    82

    83

// Called on requestAnimationFrame, modifies DOM

    84

var requestAnimationFrameID = null;

    85

function animate() {

    86

    // Do the page swith if any one pending

    87

    if(current_subscribed_page != current_visible_page){

    88

        switch_visible_page(current_subscribed_page);

    89

    }

    90

    91

    while(widget = need_cache_apply.pop()){

    92

        widget.apply_cache();

    93

    }

    94

    95

    if(jumps_need_update) update_jumps();

    96

    97

    apply_updates();

    98

    requestAnimationFrameID = null;

    99

}

   100

   101

function requestHMIAnimation() {

   102

    if(requestAnimationFrameID == null){

   103

        requestAnimationFrameID = window.requestAnimationFrame(animate);

   104

    }

   105

}

   106

   107

// Message reception handler

   108

// Hash is verified and HMI values updates resulting from binary parsing

   109

// are stored until browser can compute next frame, DOM is left untouched

   110

ws.onmessage = function (evt) {

   111

   112

    let data = evt.data;

   113

    let dv = new DataView(data);

   114

    let i = 0;

   115

    try {

   116

        for(let hash_int of hmi_hash) {

   117

            if(hash_int != dv.getUint8(i)){

   118

                throw new Error("Hash doesn't match");

   119

            };

   120

            i++;

   121

        };

   122

   123

        while(i < data.byteLength){

   124

            let index = dv.getUint32(i, true);

   125

            i += 4;

   126

            let iectype = hmitree_types[index];

   127

            if(iectype != undefined){

   128

                let dvgetter = dvgetters[iectype];

   129

                let [value, bytesize] = dvgetter(dv,i);

   130

                updates[index] = value;

   131

                i += bytesize;

   132

            } else {

   133

                throw new Error("Unknown index "+index);

   134

            }

   135

        };

   136

        // register for rendering on next frame, since there are updates

   137

        requestHMIAnimation();

   138

    } catch(err) {

   139

        // 1003 is for "Unsupported Data"

   140

        // ws.close(1003, err.message);

   141

   142

        // TODO : remove debug alert ?

   143

        alert("Error : "+err.message+"\\\\nHMI will be reloaded.");

   144

   145

        // force reload ignoring cache

   146

        location.reload(true);

   147

    }

   148

};

   149

   150

   151

function send_blob(data) {

   152

    if(data.length > 0) {

   153

        ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data)));

   154

    };

   155

};

   156

   157

const typedarray_types = {

   158

    INT: (number) => new Int16Array([number]),

   159

    BOOL: (truth) => new Int16Array([truth]),

   160

    NODE: (truth) => new Int16Array([truth]),

   161

    STRING: (str) => {

   162

        // beremiz default string max size is 128

   163

        str = str.slice(0,128);

   164

        binary = new Uint8Array(str.length + 1);

   165

        binary[0] = str.length;

   166

        for(var i = 0; i < str.length; i++){

   167

            binary[i+1] = str.charCodeAt(i);

   168

        }

   169

        return binary;

   170

    }

   171

    /* TODO */

   172

};

   173

   174

function send_reset() {

   175

    send_blob(new Uint8Array([1])); /* reset = 1 */

   176

};

   177

   178

// subscription state, as it should be in hmi server

   179

// hmitree indexed array of integers

   180

var subscriptions =  hmitree_types.map(_ignored => 0);

   181

   182

// subscription state as needed by widget now

   183

// hmitree indexed array of Sets of widgets objects

   184

var subscribers = hmitree_types.map(_ignored => new Set());

   185

   186

// artificially subscribe the watchdog widget to "/heartbeat" hmi variable

   187

// Since dispatch directly calls change_hmi_value,

   188

// PLC will periodically send variable at given frequency

   189

subscribers[heartbeat_index].add({

   190

    /* type: "Watchdog", */

   191

    frequency: 1,

   192

    indexes: [heartbeat_index],

   193

    dispatch: function(value) {

   194

        apply_hmi_value(heartbeat_index, value+1);

   195

    }

   196

});

   197

   198

function update_subscriptions() {

   199

    let delta = [];

   200

    for(let index = 0; index < subscribers.length; index++){

   201

        let widgets = subscribers[index];

   202

   203

        // periods are in ms

   204

        let previous_period = subscriptions[index];

   205

   206

        // subscribing with a zero period is unsubscribing

   207

        let new_period = 0;

   208

        if(widgets.size > 0) {

   209

            let maxfreq = 0;

   210

            for(let widget of widgets){

   211

                let wf = widget.frequency;

   212

                if(wf != undefined && maxfreq < wf)

   213

                    maxfreq = wf;

   214

            }

   215

   216

            if(maxfreq != 0)

   217

                new_period = 1000/maxfreq;

   218

        }

   219

   220

        if(previous_period != new_period) {

   221

            subscriptions[index] = new_period;

   222

            delta.push(

   223

                new Uint8Array([2]), /* subscribe = 2 */

   224

                new Uint32Array([index]),

   225

                new Uint16Array([new_period]));

   226

        }

   227

    }

   228

    send_blob(delta);

   229

};

   230

   231

function send_hmi_value(index, value) {

   232

    let iectype = hmitree_types[index];

   233

    let tobinary = typedarray_types[iectype];

   234

    send_blob([

   235

        new Uint8Array([0]),  /* setval = 0 */

   236

        new Uint32Array([index]),

   237

        tobinary(value)]);

   238

   239

    // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf

   240

    // cache[index] = value;

   241

};

   242

   243

function apply_hmi_value(index, new_val) {

   244

    let old_val = cache[index]

   245

    if(new_val != undefined && old_val != new_val)

   246

        send_hmi_value(index, new_val);

   247

    return new_val;

   248

}

   249

   250

quotes = {"'":null, '"':null};

   251

   252

function change_hmi_value(index, opstr) {

   253

    let op = opstr[0];

   254

    let given_val;

   255

    if(opstr.length < 2) 

   256

        return undefined; // TODO raise

   257

    if(opstr[1] in quotes){

   258

        if(opstr.length < 3) 

   259

            return undefined; // TODO raise

   260

        if(opstr[opstr.length-1] == opstr[1]){

   261

            given_val = opstr.slice(2,opstr.length-1);

   262

        }

   263

    } else {

   264

        given_val = Number(opstr.slice(1));

   265

    }

   266

    let old_val = cache[index];

   267

    let new_val;

   268

    switch(op){

   269

      case "=":

   270

        new_val = given_val;

   271

        break;

   272

      case "+":

   273

        new_val = old_val + given_val;

   274

        break;

   275

      case "-":

   276

        new_val = old_val - given_val;

   277

        break;

   278

      case "*":

   279

        new_val = old_val * given_val;

   280

        break;

   281

      case "/":

   282

        new_val = old_val / given_val;

   283

        break;

   284

    }

   285

    if(new_val != undefined && old_val != new_val)

   286

        send_hmi_value(index, new_val);

   287

    // TODO else raise

   288

    return new_val;

   289

}

   290

   291

var current_visible_page;

   292

var current_subscribed_page;

   293

var current_page_index;

   294

   295

function prepare_svg() {

   296

    for(let eltid in detachable_elements){

   297

        let [element,parent] = detachable_elements[eltid];

   298

        parent.removeChild(element);

   299

    }

   300

};

   301

   302

function switch_page(page_name, page_index) {

   303

    if(current_subscribed_page != current_visible_page){

   304

        /* page switch already going */

   305

        /* TODO LOG ERROR */

   306

        return false;

   307

    }

   308

   309

    if(page_name == undefined)

   310

        page_name = current_subscribed_page;

   311

   312

   313

    let old_desc = page_desc[current_subscribed_page];

   314

    let new_desc = page_desc[page_name];

   315

   316

    if(new_desc == undefined){

   317

        /* TODO LOG ERROR */

   318

        return false;

   319

    }

   320

   321

    if(page_index == undefined){

   322

        page_index = new_desc.page_index;

   323

    }

   324

   325

    if(old_desc){

   326

        old_desc.absolute_widgets.map(w=>w.unsub());

   327

        old_desc.relative_widgets.map(w=>w.unsub());

   328

    }

   329

    new_desc.absolute_widgets.map(w=>w.sub());

   330

    var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;

   331

    new_desc.relative_widgets.map(w=>w.sub(new_offset));

   332

   333

    update_subscriptions();

   334

   335

    current_subscribed_page = page_name;

   336

    current_page_index = page_index;

   337

   338

    jumps_need_update = true;

   339

   340

    requestHMIAnimation();

   341

   342

    jump_history.push([page_name, page_index]);

   343

    if(jump_history.length > 42)

   344

        jump_history.shift();

   345

   346

    return true;

   347

};

   348

   349

function switch_visible_page(page_name) {

   350

   351

    let old_desc = page_desc[current_visible_page];

   352

    let new_desc = page_desc[page_name];

   353

   354

    if(old_desc){

   355

        for(let eltid in old_desc.required_detachables){

   356

            if(!(eltid in new_desc.required_detachables)){

   357

                let [element, parent] = old_desc.required_detachables[eltid];

   358

                parent.removeChild(element);

   359

            }

   360

        }

   361

        for(let eltid in new_desc.required_detachables){

   362

            if(!(eltid in old_desc.required_detachables)){

   363

                let [element, parent] = new_desc.required_detachables[eltid];

   364

                parent.appendChild(element);

   365

            }

   366

        }

   367

    }else{

   368

        for(let eltid in new_desc.required_detachables){

   369

            let [element, parent] = new_desc.required_detachables[eltid];

   370

            parent.appendChild(element);

   371

        }

   372

    }

   373

   374

    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));

   375

    current_visible_page = page_name;

   376

};

   377

   378

// Once connection established

   379

ws.onopen = function (evt) {

   380

    init_widgets();

   381

    send_reset();

   382

    // show main page

   383

    prepare_svg();

   384

    switch_page(default_page);

   385

};

   386

   387

ws.onclose = function (evt) {

   388

    // TODO : add visible notification while waiting for reload

   389

    console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s.");

   390

    // TODO : re-enable auto reload when not in debug

   391

    //window.setTimeout(() => location.reload(true), 10000);

   392

    alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+".");

   393

   394

};

   395

   396

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

   397

var edit_callback;

   399

   400

    let [keypadid, xcoord, ycoord] = keypads[valuetype];

   401

    console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypadid);

   402

    edit_callback = callback;

   403

    let widget = hmi_widgets[keypadid];

   405

};

   406

   407

var current_modal; /* TODO stack ?*/

   408

   410

    let [element, parent] = detachable_elements[this.element.id];

   411

   412

    tmpgrp = document.createElementNS(xmlns,"g");

   413

    tmpgrpattr = document.createAttribute("transform");

   414

    let [xcoord,ycoord] = this.coordinates;

   415

    let [xdest,ydest] = page_desc[current_visible_page].bbox;

   423

    tmpgrp.setAttributeNode(tmpgrpattr);

   424

   425

    tmpgrp.appendChild(element);

   426

    parent.appendChild(tmpgrp);

   427

   428

    current_modal = [this.element.id, tmpgrp];

   429

};

   430

   431

function end_modal() {

   432

    let [eltid, tmpgrp] = current_modal;

   433

    let [element, parent] = detachable_elements[this.element.id];

   434

   435

    parent.removeChild(tmpgrp);

   436

   437

    current_modal = undefined;

   438

};

   439

   440

function widget_active_activable(eltsub) {

   441

    if(eltsub.inactive_style === undefined)

   442

        eltsub.inactive_style = eltsub.inactive.getAttribute("style");

   443

    eltsub.inactive.setAttribute("style", "display:none");

   444

    if(eltsub.active_style !== undefined)

   445

            eltsub.active.setAttribute("style", eltsub.active_style);

   446

    console.log("active", eltsub);

   447

};

   448

function widget_inactive_activable(eltsub) {

   449

    if(eltsub.active_style === undefined)

   450

        eltsub.active_style = eltsub.active.getAttribute("style");

   451

    eltsub.active.setAttribute("style", "display:none");

   452

    if(eltsub.inactive_style !== undefined)

   453

            eltsub.inactive.setAttribute("style", eltsub.inactive_style);

   454

    console.log("inactive", eltsub);

   455

};