1

// svghmi.js

     2

     3

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

     4

var updates = {};

     5

var need_cache_apply = []; 

     6

var jumps_need_update = false;

     7

var jump_history = [[default_page, undefined]];

     8

     9

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

    10

    try {

    11

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

    12

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

    13

        let d = widget.dispatch;

    14

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

    15

            d.call(widget, value, oldval);

    16

        }

    17

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

    18

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

    19

        }

    20

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

    21

        /*else {

    22

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

    23

        }*/

    24

    } catch(err) {

    25

        console.log(err);

    26

    }

    27

}

    28

    29

function dispatch_value(index, value) {

    30

    let widgets = subscribers[index];

    31

    32

    let oldval = cache[index];

    33

    cache[index] = value;

    34

    35

    if(widgets.size > 0) {

    36

        for(let widget of widgets){

    37

            dispatch_value_to_widget(widget, index, value, oldval);

    38

        }

    39

    }

    40

};

    41

    42

function init_widgets() {

    43

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

    44

        let widget = hmi_widgets[id];

    45

        let init = widget.init;

    46

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

    47

            try {

    48

                init.call(widget);

    49

            } catch(err) {

    50

                console.log(err);

    51

            }

    52

        }

    53

    });

    54

};

    55

    56

// Open WebSocket to relative "/ws" address

    57

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

    58

ws.binaryType = 'arraybuffer';

    59

    60

const dvgetters = {

    61

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

    62

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

    63

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

    64

    STRING: (dv, offset) => {

    65

        size = dv.getInt8(offset);

    66

        return [

    67

            String.fromCharCode.apply(null, new Uint8Array(

    68

                dv.buffer, /* original buffer */

    69

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

    70

                size /* size of string */

    71

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

    72

    }

    73

};

    74

    75

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

    76

function apply_updates() {

    77

    for(let index in updates){

    78

        // serving as a key, index becomes a string

    79

        // -> pass Number(index) instead

    80

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

    81

        delete updates[index];

    82

    }

    83

}

    84

    85

// Called on requestAnimationFrame, modifies DOM

    86

var requestAnimationFrameID = null;

    87

function animate() {

    88

    // Do the page swith if any one pending

    89

    if(current_subscribed_page != current_visible_page){

    90

        switch_visible_page(current_subscribed_page);

    91

    }

    92

    93

    while(widget = need_cache_apply.pop()){

    94

        widget.apply_cache();

    95

    }

    96

    97

    if(jumps_need_update) update_jumps();

    98

    99

    apply_updates();

   100

    requestAnimationFrameID = null;

   101

}

   102

   103

function requestHMIAnimation() {

   104

    if(requestAnimationFrameID == null){

   105

        requestAnimationFrameID = window.requestAnimationFrame(animate);

   106

    }

   107

}

   108

   109

// Message reception handler

   110

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

   111

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

   112

ws.onmessage = function (evt) {

   113

   114

    let data = evt.data;

   115

    let dv = new DataView(data);

   116

    let i = 0;

   117

    try {

   118

        for(let hash_int of hmi_hash) {

   119

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

   120

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

   121

            };

   122

            i++;

   123

        };

   124

   125

        while(i < data.byteLength){

   126

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

   127

            i += 4;

   128

            let iectype = hmitree_types[index];

   129

            if(iectype != undefined){

   130

                let dvgetter = dvgetters[iectype];

   131

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

   132

                updates[index] = value;

   133

                i += bytesize;

   134

            } else {

   135

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

   136

            }

   137

        };

   138

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

   139

        requestHMIAnimation();

   140

    } catch(err) {

   141

        // 1003 is for "Unsupported Data"

   142

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

   143

   144

        // TODO : remove debug alert ?

   145

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

   146

   147

        // force reload ignoring cache

   148

        location.reload(true);

   149

    }

   150

};

   151

   152

   153

function send_blob(data) {

   154

    if(data.length > 0) {

   155

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

   156

    };

   157

};

   158

   159

const typedarray_types = {

   160

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

   161

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

   162

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

   163

    STRING: (str) => {

   164

        // beremiz default string max size is 128

   165

        str = str.slice(0,128);

   166

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

   167

        binary[0] = str.length;

   168

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

   169

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

   170

        }

   171

        return binary;

   172

    }

   173

    /* TODO */

   174

};

   175

   176

function send_reset() {

   177

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

   178

};

   179

   180

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

   181

// hmitree indexed array of integers

   182

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

   183

   184

// subscription state as needed by widget now

   185

// hmitree indexed array of Sets of widgets objects

   186

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

   187

   188

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

   189

// Since dispatch directly calls change_hmi_value,

   190

// PLC will periodically send variable at given frequency

   191

subscribers[heartbeat_index].add({

   192

    /* type: "Watchdog", */

   193

    frequency: 1,

   194

    indexes: [heartbeat_index],

   195

    dispatch: function(value) {

   196

        change_hmi_value(heartbeat_index, "+1");

   197

    }

   198

});

   199

   200

function update_subscriptions() {

   201

    let delta = [];

   202

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

   203

        let widgets = subscribers[index];

   204

   205

        // periods are in ms

   206

        let previous_period = subscriptions[index];

   207

   208

        // subscribing with a zero period is unsubscribing

   209

        let new_period = 0;

   210

        if(widgets.size > 0) {

   211

            let maxfreq = 0;

   212

            for(let widget of widgets)

   213

                if(maxfreq < widget.frequency)

   214

                    maxfreq = widget.frequency;

   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

    cache[index] = value;

   240

};

   241

   242

function apply_hmi_value(index, new_val) {

   243

    let old_val = cache[index]

   244

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

   245

        send_hmi_value(index, new_val);

   246

    return new_val;

   247

}

   248

   249

function change_hmi_value(index, opstr) {

   250

    let op = opstr[0];

   251

    let given_val = opstr.slice(1);

   252

    let old_val = cache[index]

   253

    let new_val;

   254

    switch(op){

   255

      case "=":

   256

        eval("new_val"+opstr);

   257

        break;

   258

      case "+":

   259

      case "-":

   260

      case "*":

   261

      case "/":

   262

        if(old_val != undefined)

   263

            new_val = eval("old_val"+opstr);

   264

        break;

   265

    }

   266

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

   267

        send_hmi_value(index, new_val);

   268

    return new_val;

   269

}

   270

   271

var current_visible_page;

   272

var current_subscribed_page;

   273

var current_page_index;

   274

   275

function prepare_svg() {

   276

    for(let eltid in detachable_elements){

   277

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

   278

        parent.removeChild(element);

   279

    }

   280

};

   281

   282

function switch_page(page_name, page_index) {

   283

    if(current_subscribed_page != current_visible_page){

   284

        /* page switch already going */

   285

        /* TODO LOG ERROR */

   286

        return false;

   287

    }

   288

   289

    if(page_name == undefined)

   290

        page_name = current_subscribed_page;

   291

   292

   293

    let old_desc = page_desc[current_subscribed_page];

   294

    let new_desc = page_desc[page_name];

   295

   296

    if(new_desc == undefined){

   297

        /* TODO LOG ERROR */

   298

        return false;

   299

    }

   300

   301

    if(page_index == undefined){

   302

        page_index = new_desc.page_index;

   303

    }

   304

   305

    if(old_desc){

   306

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

   307

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

   308

    }

   309

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

   310

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

   311

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

   312

   313

    update_subscriptions();

   314

   315

    current_subscribed_page = page_name;

   316

    current_page_index = page_index;

   317

   318

    jumps_need_update = true;

   319

   320

    requestHMIAnimation();

   321

   322

    jump_history.push([page_name, page_index]);

   323

    if(jump_history.length > 42)

   324

        jump_history.shift();

   325

   326

    return true;

   327

};

   328

   329

function* chain(a,b){

   330

    yield* a;

   331

    yield* b;

   332

};

   333

   334

function unsubscribe(){

   335

    /* remove subsribers */

   336

    for(let index of this.indexes){

   337

        let idx = index + this.offset;

   338

        subscribers[idx].delete(this);

   339

    }

   340

    this.offset = 0;

   341

}

   342

   343

function subscribe(new_offset=0){

   344

    /* set the offset because relative */

   345

    this.offset = new_offset;

   346

    /* add this's subsribers */

   347

    for(let index of this.indexes){

   348

        subscribers[index + new_offset].add(this);

   349

    }

   350

    need_cache_apply.push(this); 

   351

}

   352

   353

function foreach_unsubscribe(){

   354

    for(let item of this.items){

   355

        for(let widget of item) {

   356

            unsubscribe.call(widget);

   357

        }

   358

    }

   359

    this.offset = 0;

   360

}

   361

   362

function foreach_widgets_do(new_offset, todo){

   363

    this.offset = new_offset;

   364

    for(let i = 0; i < this.items.length; i++) {

   365

        let item = this.items[i];

   366

        let orig_item_index = this.index_pool[i];

   367

        let item_index = this.index_pool[i+this.item_offset];

   368

        let item_index_offset = item_index - orig_item_index;

   369

        for(let widget of item) {

   370

            todo.call(widget, new_offset + item_index_offset);

   371

        }

   372

    }

   373

}

   374

   375

function foreach_subscribe(new_offset=0){

   376

    foreach_widgets_do.call(this, new_offset, subscribe);

   377

}

   378

   379

function widget_apply_cache() {

   380

    for(let index of this.indexes){

   381

        /* dispatch current cache in newly opened page widgets */

   382

        let realindex = index+this.offset;

   383

        let cached_val = cache[realindex];

   384

        if(cached_val != undefined)

   385

            dispatch_value_to_widget(this, realindex, cached_val, cached_val);

   386

    }

   387

}

   388

   389

function foreach_apply_cache() {

   390

    foreach_widgets_do.call(this, this.offset, widget_apply_cache);

   391

}

   392

   393

function foreach_onclick(opstr, evt) {

   394

    new_item_offset = eval(String(this.item_offset)+opstr)

   395

    if(new_item_offset + this.items.length > this.index_pool.length) {

   396

        if(this.item_offset + this.items.length == this.index_pool.length)

   397

            new_item_offset = 0;

   398

        else

   399

            new_item_offset = this.index_pool.length - this.items.length;

   400

    } else if(new_item_offset < 0) {

   401

        if(this.item_offset == 0)

   402

            new_item_offset = this.index_pool.length - this.items.length;

   403

        else

   404

            new_item_offset = 0;

   405

    }

   406

    this.item_offset = new_item_offset;

   407

    off = this.offset;

   408

    foreach_unsubscribe.call(this);

   409

    foreach_subscribe.call(this,off);

   410

    update_subscriptions();

   411

    need_cache_apply.push(this);

   412

    jumps_need_update = true;

   413

    requestHMIAnimation();

   414

}

   415

   416

   417

function switch_visible_page(page_name) {

   418

   419

    let old_desc = page_desc[current_visible_page];

   420

    let new_desc = page_desc[page_name];

   421

   422

    if(old_desc){

   423

        for(let eltid in old_desc.required_detachables){

   424

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

   425

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

   426

                parent.removeChild(element);

   427

            }

   428

        }

   429

        for(let eltid in new_desc.required_detachables){

   430

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

   431

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

   432

                parent.appendChild(element);

   433

            }

   434

        }

   435

    }else{

   436

        for(let eltid in new_desc.required_detachables){

   437

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

   438

            parent.appendChild(element);

   439

        }

   440

    }

   441

   442

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

   443

    current_visible_page = page_name;

   444

};

   445

   446

function update_jumps() {

   447

    page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index));

   448

    jumps_need_update = false;

   449

};

   450

   451

   452

// Once connection established

   453

ws.onopen = function (evt) {

   454

    init_widgets();

   455

    send_reset();

   456

    // show main page

   457

    prepare_svg();

   458

    switch_page(default_page);

   459

};

   460

   461

ws.onclose = function (evt) {

   462

    // TODO : add visible notification while waiting for reload

   463

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

   464

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

   465

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

   466

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

   467

   468

};

   469

   470

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

   471

var edit_callback;

   472

function edit_value(path, valuetype, callback, initial) {

   473

   474

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

   475

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

   476

    edit_callback = callback;

   486

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