1

// svghmi.js

     2

     3

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

     4

var updates = {};

     5

     6

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

     7

    try {

     8

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

     9

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

    10

        let d = widget.dispatch;

    11

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

    12

            d.call(widget, value, oldval);

    13

        }

    14

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

    15

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

    16

        }

    17

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

    18

        /*else {

    19

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

    20

        }*/

    21

    } catch(err) {

    22

        console.log(err);

    23

    }

    24

}

    25

    26

function dispatch_value(index, value) {

    27

    let widgets = subscribers[index];

    28

    29

    let oldval = cache[index];

    30

    cache[index] = value;

    31

    32

    if(widgets.size > 0) {

    33

        for(let widget of widgets){

    34

            dispatch_value_to_widget(widget, index, value, oldval);

    35

        }

    36

    }

    37

};

    38

    39

function init_widgets() {

    40

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

    41

        let widget = hmi_widgets[id];

    42

        let init = widget.init;

    43

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

    44

            try {

    45

                init.call(widget);

    46

            } catch(err) {

    47

                console.log(err);

    48

            }

    49

        }

    50

    });

    51

};

    52

    53

// Open WebSocket to relative "/ws" address

    54

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

    55

ws.binaryType = 'arraybuffer';

    56

    57

const dvgetters = {

    58

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

    59

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

    60

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

    61

    STRING: (dv, offset) => {

    62

        size = dv.getInt8(offset);

    63

        return [

    64

            String.fromCharCode.apply(null, new Uint8Array(

    65

                dv.buffer, /* original buffer */

    66

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

    67

                size /* size of string */

    68

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

    69

    }

    70

};

    71

    72

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

    73

function apply_updates() {

    74

    for(let index in updates){

    75

        // serving as a key, index becomes a string

    76

        // -> pass Number(index) instead

    77

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

    78

        delete updates[index];

    79

    }

    80

}

    81

    82

// Called on requestAnimationFrame, modifies DOM

    83

var requestAnimationFrameID = null;

    84

function animate() {

    85

    // Do the page swith if any one pending

    86

    if(current_subscribed_page != current_visible_page){

    87

        switch_visible_page(current_subscribed_page);

    88

    }

    89

    90

    if(current_subscribed_page_index != current_visible_page_index){

    91

        apply_cache();

    92

    }

    93

    apply_updates();

    94

    requestAnimationFrameID = null;

    95

}

    96

    97

function requestHMIAnimation() {

    98

    if(requestAnimationFrameID == null){

    99

        requestAnimationFrameID = window.requestAnimationFrame(animate);

   100

    }

   101

}

   102

   103

// Message reception handler

   104

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

   105

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

   106

ws.onmessage = function (evt) {

   107

   108

    let data = evt.data;

   109

    let dv = new DataView(data);

   110

    let i = 0;

   111

    try {

   112

        for(let hash_int of hmi_hash) {

   113

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

   114

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

   115

            };

   116

            i++;

   117

        };

   118

   119

        while(i < data.byteLength){

   120

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

   121

            i += 4;

   122

            let iectype = hmitree_types[index];

   123

            if(iectype != undefined){

   124

                let dvgetter = dvgetters[iectype];

   125

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

   126

                updates[index] = value;

   127

                i += bytesize;

   128

            } else {

   129

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

   130

            }

   131

        };

   132

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

   133

        requestHMIAnimation();

   134

    } catch(err) {

   135

        // 1003 is for "Unsupported Data"

   136

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

   137

   138

        // TODO : remove debug alert ?

   139

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

   140

   141

        // force reload ignoring cache

   142

        location.reload(true);

   143

    }

   144

};

   145

   146

   147

function send_blob(data) {

   148

    if(data.length > 0) {

   149

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

   150

    };

   151

};

   152

   153

const typedarray_types = {

   154

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

   155

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

   156

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

   157

    STRING: (str) => {

   158

        // beremiz default string max size is 128

   159

        str = str.slice(0,128);

   160

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

   161

        binary[0] = str.length;

   162

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

   163

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

   164

        }

   165

        return binary;

   166

    }

   167

    /* TODO */

   168

};

   169

   170

function send_reset() {

   171

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

   172

};

   173

   174

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

   175

// hmitree indexed array of integers

   176

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

   177

   178

// subscription state as needed by widget now

   179

// hmitree indexed array of Sets of widgets objects

   180

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

   181

   182

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

   183

// Since dispatch directly calls change_hmi_value,

   184

// PLC will periodically send variable at given frequency

   185

subscribers[heartbeat_index].add({

   186

    /* type: "Watchdog", */

   187

    frequency: 1,

   188

    indexes: [heartbeat_index],

   189

    dispatch: function(value) {

   190

        change_hmi_value(heartbeat_index, "+1");

   191

    }

   192

});

   193

   194

function update_subscriptions() {

   195

    let delta = [];

   196

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

   197

        let widgets = subscribers[index];

   198

   199

        // periods are in ms

   200

        let previous_period = subscriptions[index];

   201

   202

        // subscribing with a zero period is unsubscribing

   203

        let new_period = 0;

   204

        if(widgets.size > 0) {

   205

            let maxfreq = 0;

   206

            for(let widget of widgets)

   207

                if(maxfreq < widget.frequency)

   208

                    maxfreq = widget.frequency;

   209

   210

            if(maxfreq != 0)

   211

                new_period = 1000/maxfreq;

   212

        }

   213

   214

        if(previous_period != new_period) {

   215

            subscriptions[index] = new_period;

   216

            delta.push(

   217

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

   218

                new Uint32Array([index]),

   219

                new Uint16Array([new_period]));

   220

        }

   221

    }

   222

    send_blob(delta);

   223

};

   224

   225

function send_hmi_value(index, value) {

   226

    let iectype = hmitree_types[index];

   227

    let tobinary = typedarray_types[iectype];

   228

    send_blob([

   229

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

   230

        new Uint32Array([index]),

   231

        tobinary(value)]);

   232

   233

    cache[index] = value;

   234

};

   235

   236

function change_hmi_value(index, opstr) {

   237

    let op = opstr[0];

   238

    let given_val = opstr.slice(1);

   239

    let old_val = cache[index]

   240

    let new_val;

   241

    switch(op){

   242

      case "=":

   243

        eval("new_val"+opstr);

   244

        break;

   245

      case "+":

   246

      case "-":

   247

      case "*":

   248

      case "/":

   249

        if(old_val != undefined)

   250

            new_val = eval("old_val"+opstr);

   251

        break;

   252

    }

   253

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

   254

        send_hmi_value(index, new_val);

   255

    return new_val;

   256

}

   257

   258

var current_visible_page;

   259

var current_subscribed_page;

   260

var current_visible_page_index;

   261

var current_subscribed_page_index;

   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

}

   305

   307

    for(let item of this.items){

   308

        for(let widget of item) {

   309

            unsubscribe.call(widget);

   310

        }

   311

    }

   312

}

   313

   315

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

   316

        let item = this.items[i];

   317

        let orig_item_index = this.index_pool[i];

   318

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

   319

        let item_index_offset = item_index - orig_item_index;

   320

        for(let widget of item) {

   321

            subscribe.call(widget,new_offset + item_index_offset);

   322

        }

   323

    }

   324

}

   325

   326

function switch_subscribed_page(page_name, page_index) {

   327

    let old_desc = page_desc[current_subscribed_page];

   328

    let new_desc = page_desc[page_name];

   329

   330

    if(new_desc == undefined){

   331

        /* TODO LOG ERROR */

   332

        return;

   333

    }

   334

   335

    if(page_index == undefined){

   336

        page_index = new_desc.page_index;

   337

    }

   338

   339

    if(old_desc){

   340

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

   341

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

   342

    }

   343

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

   344

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

   345

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

   346

   347

    update_subscriptions();

   348

   349

    current_subscribed_page = page_name;

   350

    current_subscribed_page_index = page_index;

   351

   352

    requestHMIAnimation();

   353

}

   354

   355

function switch_visible_page(page_name) {

   356

   357

    let old_desc = page_desc[current_visible_page];

   358

    let new_desc = page_desc[page_name];

   359

   360

    if(old_desc){

   361

        for(let eltid in old_desc.required_detachables){

   362

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

   363

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

   364

                parent.removeChild(element);

   365

            }

   366

        }

   367

        for(let eltid in new_desc.required_detachables){

   368

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

   369

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

   370

                parent.appendChild(element);

   371

            }

   372

        }

   373

    }else{

   374

        for(let eltid in new_desc.required_detachables){

   375

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

   376

            parent.appendChild(element);

   377

        }

   378

    }

   379

   380

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

   381

    current_visible_page = page_name;

   382

};

   383

   384

function apply_cache() {

   385

    let new_desc = page_desc[current_visible_page];

   386

    for(let widget of chain(new_desc.absolute_widgets,new_desc.relative_widgets)){

   387

        for(let index of widget.indexes){

   388

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

   389

            let realindex = index+widget.offset;

   390

            let cached_val = cache[realindex];

   391

            if(cached_val != undefined)

   392

                dispatch_value_to_widget(widget, realindex, cached_val, cached_val);

   393

        }

   394

    }

   395

    current_visible_page_index = current_subscribed_page_index;

   396

}

   397

   398

   399

   400

// Once connection established

   401

ws.onopen = function (evt) {

   402

    init_widgets();

   403

    send_reset();

   404

    // show main page

   405

    prepare_svg();

   406

    switch_page(default_page);

   407

};

   408

   409

ws.onclose = function (evt) {

   410

    // TODO : add visible notification while waiting for reload

   411

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

   412

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

   413

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

   414

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

   415

   416

};