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

        console.log(index, idx, idxidx, value);

    12

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

    13

            d.call(widget, value, oldval);

    14

        }

    16

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

    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

    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

    apply_updates();

    90

    requestAnimationFrameID = null;

    91

}

    92

    93

function requestHMIAnimation() {

    94

    if(requestAnimationFrameID == null){

    95

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    96

    }

    97

}

    98

    99

// Message reception handler

   100

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

   101

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

   102

ws.onmessage = function (evt) {

   103

   104

    let data = evt.data;

   105

    let dv = new DataView(data);

   106

    let i = 0;

   107

    try {

   108

        for(let hash_int of hmi_hash) {

   109

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

   110

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

   111

            };

   112

            i++;

   113

        };

   114

   115

        while(i < data.byteLength){

   116

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

   117

            i += 4;

   118

            let iectype = hmitree_types[index];

   119

            if(iectype != undefined){

   120

                let dvgetter = dvgetters[iectype];

   121

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

   122

                updates[index] = value;

   123

                i += bytesize;

   124

            } else {

   125

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

   126

            }

   127

        };

   128

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

   129

        requestHMIAnimation();

   130

    } catch(err) {

   131

        // 1003 is for "Unsupported Data"

   132

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

   133

   134

        // TODO : remove debug alert ?

   135

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

   136

   137

        // force reload ignoring cache

   138

        location.reload(true);

   139

    }

   140

};

   141

   142

   143

function send_blob(data) {

   144

    if(data.length > 0) {

   145

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

   146

    };

   147

};

   148

   149

const typedarray_types = {

   150

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

   151

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

   152

    STRING: (str) => {

   153

        // beremiz default string max size is 128

   154

        str = str.slice(0,128);

   155

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

   156

        binary[0] = str.length;

   157

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

   158

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

   159

        }

   160

        return binary;

   161

    }

   162

    /* TODO */

   163

};

   164

   165

function send_reset() {

   166

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

   167

};

   168

   169

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

   170

// hmitree indexed array of integers

   171

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

   172

   173

// subscription state as needed by widget now

   174

// hmitree indexed array of Sets of widgets objects

   175

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

   176

   177

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

   178

// Since dispatch directly calls change_hmi_value,

   179

// PLC will periodically send variable at given frequency

   180

subscribers[heartbeat_index].add({

   181

    /* type: "Watchdog", */

   182

    frequency: 1,

   183

    indexes: [heartbeat_index],

   184

    dispatch: function(value) {

   185

        // console.log("Heartbeat" + value);

   186

        change_hmi_value(heartbeat_index, "+1");

   187

    }

   188

});

   189

   190

function update_subscriptions() {

   191

    let delta = [];

   192

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

   193

        let widgets = subscribers[index];

   194

   195

        // periods are in ms

   196

        let previous_period = subscriptions[index];

   197

   198

        // subscribing with a zero period is unsubscribing

   199

        let new_period = 0;

   200

        if(widgets.size > 0) {

   201

            let maxfreq = 0;

   202

            for(let widget of widgets)

   203

                if(maxfreq < widget.frequency)

   204

                    maxfreq = widget.frequency;

   205

   206

            if(maxfreq != 0)

   207

                new_period = 1000/maxfreq;

   208

        }

   209

   210

        if(previous_period != new_period) {

   211

            subscriptions[index] = new_period;

   212

            delta.push(

   213

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

   214

                new Uint32Array([index]),

   215

                new Uint16Array([new_period]));

   216

        }

   217

    }

   218

    send_blob(delta);

   219

};

   220

   221

function send_hmi_value(index, value) {

   222

    let iectype = hmitree_types[index];

   223

    let tobinary = typedarray_types[iectype];

   224

    send_blob([

   225

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

   226

        new Uint32Array([index]),

   227

        tobinary(value)]);

   228

   229

    cache[index] = value;

   230

};

   231

   232

function change_hmi_value(index, opstr) {

   233

    let op = opstr[0];

   234

    let given_val = opstr.slice(1);

   235

    let old_val = cache[index]

   236

    let new_val;

   237

    switch(op){

   238

      case "=":

   239

        eval("new_val"+opstr);

   240

        break;

   241

      case "+":

   242

      case "-":

   243

      case "*":

   244

      case "/":

   245

        if(old_val != undefined)

   246

            new_val = eval("old_val"+opstr);

   247

        break;

   248

    }

   249

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

   250

        send_hmi_value(index, new_val);

   251

    return new_val;

   252

}

   253

   254

var current_visible_page;

   255

var current_subscribed_page;

   256

   257

function prepare_svg() {

   258

    for(let eltid in detachable_elements){

   259

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

   260

        parent.removeChild(element);

   261

    }

   262

};

   263

   264

function switch_page(page_name, page_index) {

   265

    if(current_subscribed_page != current_visible_page){

   266

        /* page switch already going */

   267

        /* TODO LOG ERROR */

   268

        return;

   269

    } else if(page_name == current_visible_page){

   270

        /* already in that page */

   271

        /* TODO LOG ERROR */

   272

        return;

   273

    }

   274

    switch_subscribed_page(page_name, page_index);

   275

};

   276

   277

function* chain(a,b){

   278

    yield* a;

   279

    yield* b;

   280

};

   281

   282

function switch_subscribed_page(page_name, page_index) {

   283

    let old_desc = page_desc[current_subscribed_page];

   284

    let new_desc = page_desc[page_name];

   285

   286

    if(new_desc == undefined){

   287

        /* TODO LOG ERROR */

   288

        return;

   289

    }

   290

   291

    if(page_index == undefined){

   292

        page_index = new_desc.page_index;

   293

    }

   294

   295

    if(old_desc){

   296

        for(let widget of old_desc.absolute_widgets){

   297

            /* remove subsribers */

   298

            for(let index of widget.indexes){

   299

                subscribers[index].delete(widget);

   300

            }

   301

        }

   302

        for(let widget of old_desc.relative_widgets){

   303

            /* remove subsribers */

   304

            for(let index of widget.indexes){

   305

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

   306

                subscribers[idx].delete(widget);

   307

            }

   308

            /* lose the offset */

   309

            delete widget.offset;

   310

        }

   311

    }

   312

    for(let widget of new_desc.absolute_widgets){

   313

        /* add widget's subsribers */

   314

        for(let index of widget.indexes){

   315

            subscribers[index].add(widget);

   316

        }

   317

    }

   318

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

   319

    for(let widget of new_desc.relative_widgets){

   320

        /* set the offset because relative */

   321

        widget.offset = new_offset;

   322

        /* add widget's subsribers */

   323

        for(let index of widget.indexes){

   324

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

   325

        }

   326

    }

   327

   328

    update_subscriptions();

   329

   330

    current_subscribed_page = page_name;

   331

   332

    requestHMIAnimation();

   333

}

   334

   335

function switch_visible_page(page_name) {

   336

   337

    let old_desc = page_desc[current_visible_page];

   338

    let new_desc = page_desc[page_name];

   339

   340

    if(old_desc){

   341

        for(let eltid in old_desc.required_detachables){

   342

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

   343

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

   344

                parent.removeChild(element);

   345

            }

   346

        }

   347

        for(let eltid in new_desc.required_detachables){

   348

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

   349

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

   350

                parent.appendChild(element);

   351

            }

   352

        }

   353

    }else{

   354

        for(let eltid in new_desc.required_detachables){

   355

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

   356

            parent.appendChild(element);

   357

        }

   358

    }

   359

   360

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

   361

        for(let index of widget.indexes){

   362

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

   363

            let cached_val = cache[index];

   364

            if(cached_val != undefined)

   365

                dispatch_value_to_widget(widget, index, cached_val, cached_val);

   366

        }

   367

    }

   368

   369

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

   370

    current_visible_page = page_name;

   371

};

   372

   373

   374

// Once connection established

   375

ws.onopen = function (evt) {

   376

    init_widgets();

   377

    send_reset();

   378

    // show main page

   379

    prepare_svg();

   380

    switch_page(default_page);

   381

};

   382

   383

ws.onclose = function (evt) {

   384

    // TODO : add visible notification while waiting for reload

   385

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

   386

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

   387

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

   388

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

   389

   390

};