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

    apply_updates();

    96

    requestAnimationFrameID = null;

    97

}

    98

    99

function requestHMIAnimation() {

   100

    if(requestAnimationFrameID == null){

   101

        requestAnimationFrameID = window.requestAnimationFrame(animate);

   102

    }

   103

}

   104

   105

// Message reception handler

   106

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

   107

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

   108

ws.onmessage = function (evt) {

   109

   110

    let data = evt.data;

   111

    let dv = new DataView(data);

   112

    let i = 0;

   113

    try {

   114

        for(let hash_int of hmi_hash) {

   115

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

   116

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

   117

            };

   118

            i++;

   119

        };

   120

   121

        while(i < data.byteLength){

   122

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

   123

            i += 4;

   124

            let iectype = hmitree_types[index];

   125

            if(iectype != undefined){

   126

                let dvgetter = dvgetters[iectype];

   127

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

   128

                updates[index] = value;

   129

                i += bytesize;

   130

            } else {

   131

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

   132

            }

   133

        };

   134

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

   135

        requestHMIAnimation();

   136

    } catch(err) {

   137

        // 1003 is for "Unsupported Data"

   138

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

   139

   140

        // TODO : remove debug alert ?

   141

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

   142

   143

        // force reload ignoring cache

   144

        location.reload(true);

   145

    }

   146

};

   147

   148

   149

function send_blob(data) {

   150

    if(data.length > 0) {

   151

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

   152

    };

   153

};

   154

   155

const typedarray_types = {

   156

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

   157

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

   158

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

   159

    STRING: (str) => {

   160

        // beremiz default string max size is 128

   161

        str = str.slice(0,128);

   162

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

   163

        binary[0] = str.length;

   164

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

   165

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

   166

        }

   167

        return binary;

   168

    }

   169

    /* TODO */

   170

};

   171

   172

function send_reset() {

   173

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

   174

};

   175

   176

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

   177

// hmitree indexed array of integers

   178

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

   179

   180

// subscription state as needed by widget now

   181

// hmitree indexed array of Sets of widgets objects

   182

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

   183

   184

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

   185

// Since dispatch directly calls change_hmi_value,

   186

// PLC will periodically send variable at given frequency

   187

subscribers[heartbeat_index].add({

   188

    /* type: "Watchdog", */

   189

    frequency: 1,

   190

    indexes: [heartbeat_index],

   191

    dispatch: function(value) {

   192

        change_hmi_value(heartbeat_index, "+1");

   193

    }

   194

});

   195

   196

function update_subscriptions() {

   197

    let delta = [];

   198

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

   199

        let widgets = subscribers[index];

   200

   201

        // periods are in ms

   202

        let previous_period = subscriptions[index];

   203

   204

        // subscribing with a zero period is unsubscribing

   205

        let new_period = 0;

   206

        if(widgets.size > 0) {

   207

            let maxfreq = 0;

   208

            for(let widget of widgets)

   209

                if(maxfreq < widget.frequency)

   210

                    maxfreq = widget.frequency;

   211

   212

            if(maxfreq != 0)

   213

                new_period = 1000/maxfreq;

   214

        }

   215

   216

        if(previous_period != new_period) {

   217

            subscriptions[index] = new_period;

   218

            delta.push(

   219

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

   220

                new Uint32Array([index]),

   221

                new Uint16Array([new_period]));

   222

        }

   223

    }

   224

    send_blob(delta);

   225

};

   226

   227

function send_hmi_value(index, value) {

   228

    let iectype = hmitree_types[index];

   229

    let tobinary = typedarray_types[iectype];

   230

    send_blob([

   231

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

   232

        new Uint32Array([index]),

   233

        tobinary(value)]);

   234

   235

    cache[index] = value;

   236

};

   237

   238

function change_hmi_value(index, opstr) {

   239

    let op = opstr[0];

   240

    let given_val = opstr.slice(1);

   241

    let old_val = cache[index]

   242

    let new_val;

   243

    switch(op){

   244

      case "=":

   245

        eval("new_val"+opstr);

   246

        break;

   247

      case "+":

   248

      case "-":

   249

      case "*":

   250

      case "/":

   251

        if(old_val != undefined)

   252

            new_val = eval("old_val"+opstr);

   253

        break;

   254

    }

   255

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

   256

        send_hmi_value(index, new_val);

   257

    return new_val;

   258

}

   259

   260

var current_visible_page;

   261

var current_subscribed_page;

   262

   263

function prepare_svg() {

   264

    for(let eltid in detachable_elements){

   265

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

   266

        parent.removeChild(element);

   267

    }

   268

};

   269

   270

function switch_page(page_name, page_index) {

   271

    if(current_subscribed_page != current_visible_page){

   272

        /* page switch already going */

   273

        /* TODO LOG ERROR */

   274

        return;

   275

    }

   276

   277

    if(page_name == undefined)

   278

        page_name = current_subscribed_page;

   279

   280

    switch_subscribed_page(page_name, page_index);

   281

};

   282

   283

function* chain(a,b){

   284

    yield* a;

   285

    yield* b;

   286

};

   287

   288

function unsubscribe(){

   289

    /* remove subsribers */

   290

    for(let index of this.indexes){

   291

        let idx = index + this.offset;

   292

        subscribers[idx].delete(this);

   293

    }

   294

    this.offset = 0;

   295

}

   296

   297

function subscribe(new_offset=0){

   298

    /* set the offset because relative */

   299

    this.offset = new_offset;

   300

    /* add this's subsribers */

   301

    for(let index of this.indexes){

   302

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

   303

    }

   304

    need_cache_apply.push(this); 

   305

}

   306

   307

function foreach_unsubscribe(){

   308

    for(let item of this.items){

   309

        for(let widget of item) {

   310

            unsubscribe.call(widget);

   311

        }

   312

    }

   313

    this.offset = 0;

   314

}

   315

   316

function foreach_widgets_do(new_offset, todo){

   317

    this.offset = new_offset;

   318

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

   319

        let item = this.items[i];

   320

        let orig_item_index = this.index_pool[i];

   321

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

   322

        let item_index_offset = item_index - orig_item_index;

   323

        for(let widget of item) {

   324

            todo.call(widget, new_offset + item_index_offset);

   325

        }

   326

    }

   327

}

   328

   329

function foreach_subscribe(new_offset=0){

   330

    foreach_widgets_do.call(this, new_offset, subscribe);

   331

}

   332

   333

function widget_apply_cache() {

   334

    for(let index of this.indexes){

   335

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

   336

        let realindex = index+this.offset;

   337

        let cached_val = cache[realindex];

   338

        if(cached_val != undefined)

   339

            dispatch_value_to_widget(this, realindex, cached_val, cached_val);

   340

    }

   341

}

   342

   343

function foreach_apply_cache() {

   344

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

   345

}

   346

   347

function foreach_onclick(opstr, evt) {

   348

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

   349

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

   354

    } else if(new_item_offset < 0) {

   359

    }

   360

    this.item_offset = new_item_offset;

   361

    off = this.offset;

   362

    foreach_unsubscribe.call(this);

   363

    foreach_subscribe.call(this,off);

   364

    update_subscriptions();

   365

    need_cache_apply.push(this);

   366

    requestHMIAnimation();

   367

    console.log(opstr, new_item_offset);

   368

}

   369

   370

function switch_subscribed_page(page_name, page_index) {

   371

    let old_desc = page_desc[current_subscribed_page];

   372

    let new_desc = page_desc[page_name];

   373

   374

    if(new_desc == undefined){

   375

        /* TODO LOG ERROR */

   376

        return;

   377

    }

   378

   379

    if(page_index == undefined){

   380

        page_index = new_desc.page_index;

   381

    }

   382

   383

    if(old_desc){

   384

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

   385

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

   386

    }

   387

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

   388

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

   389

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

   390

   391

    update_subscriptions();

   392

   393

    current_subscribed_page = page_name;

   394

   395

    requestHMIAnimation();

   396

}

   397

   398

function switch_visible_page(page_name) {

   399

   400

    let old_desc = page_desc[current_visible_page];

   401

    let new_desc = page_desc[page_name];

   402

   403

    if(old_desc){

   404

        for(let eltid in old_desc.required_detachables){

   405

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

   406

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

   407

                parent.removeChild(element);

   408

            }

   409

        }

   410

        for(let eltid in new_desc.required_detachables){

   411

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

   412

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

   413

                parent.appendChild(element);

   414

            }

   415

        }

   416

    }else{

   417

        for(let eltid in new_desc.required_detachables){

   418

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

   419

            parent.appendChild(element);

   420

        }

   421

    }

   422

   423

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

   424

    current_visible_page = page_name;

   425

};

   426

   427

// Once connection established

   428

ws.onopen = function (evt) {

   429

    init_widgets();

   430

    send_reset();

   431

    // show main page

   432

    prepare_svg();

   433

    switch_page(default_page);

   434

};

   435

   436

ws.onclose = function (evt) {

   437

    // TODO : add visible notification while waiting for reload

   438

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

   439

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

   440

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

   441

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

   442

   443

};