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 idxidx = widget.indexes.indexOf(index);

     9

        let d = widget.dispatch;

    10

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

    11

            d.call(widget, value, oldval);

    12

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

    13

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

    14

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

    15

        /*else {

    16

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

    17

        }*/

    18

    } catch(err) {

    19

        console.log(err);

    20

    }

    21

}

    22

    23

function dispatch_value(index, value) {

    24

    let widgets = subscribers[index];

    25

    26

    let oldval = cache[index];

    27

    cache[index] = value;

    28

    29

    if(widgets.size > 0) {

    30

        for(let widget of widgets){

    31

            dispatch_value_to_widget(widget, index, value, oldval);

    32

        }

    33

    }

    34

};

    35

    36

function init_widgets() {

    37

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

    38

        let widget = hmi_widgets[id];

    39

        let init = widget.init;

    40

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

    41

            try {

    42

                init.call(widget);

    43

            } catch(err) {

    44

                console.log(err);

    45

            }

    46

        }

    47

    });

    48

};

    49

    50

// Open WebSocket to relative "/ws" address

    51

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

    52

ws.binaryType = 'arraybuffer';

    53

    54

const dvgetters = {

    55

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

    56

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

    57

    STRING: (dv, offset) => {

    58

        size = dv.getInt8(offset);

    59

        return [

    60

            String.fromCharCode.apply(null, new Uint8Array(

    61

                dv.buffer, /* original buffer */

    62

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

    63

                size /* size of string */

    64

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

    65

    }

    66

};

    67

    68

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

    69

function apply_updates() {

    70

    for(let index in updates){

    71

        // serving as a key, index becomes a string

    72

        // -> pass Number(index) instead

    73

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

    74

        delete updates[index];

    75

    }

    76

}

    77

    78

// Called on requestAnimationFrame, modifies DOM

    79

var requestAnimationFrameID = null;

    80

function animate() {

    81

    // Do the page swith if any one pending

    82

    if(current_subscribed_page != current_visible_page){

    83

        switch_visible_page(current_subscribed_page);

    84

    }

    85

    apply_updates();

    86

    requestAnimationFrameID = null;

    87

}

    88

    89

function requestHMIAnimation() {

    90

    if(requestAnimationFrameID == null){

    91

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    92

    }

    93

}

    94

    95

// Message reception handler

    96

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

    97

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

    98

ws.onmessage = function (evt) {

    99

   100

    let data = evt.data;

   101

    let dv = new DataView(data);

   102

    let i = 0;

   103

    try {

   104

        for(let hash_int of hmi_hash) {

   105

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

   106

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

   107

            };

   108

            i++;

   109

        };

   110

   111

        while(i < data.byteLength){

   112

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

   113

            i += 4;

   114

            let iectype = hmitree_types[index];

   115

            if(iectype != undefined){

   116

                let dvgetter = dvgetters[iectype];

   117

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

   118

                updates[index] = value;

   119

                i += bytesize;

   120

            } else {

   121

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

   122

            }

   123

        };

   124

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

   125

        requestHMIAnimation();

   126

    } catch(err) {

   127

        // 1003 is for "Unsupported Data"

   128

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

   129

   130

        // TODO : remove debug alert ?

   131

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

   132

   133

        // force reload ignoring cache

   134

        location.reload(true);

   135

    }

   136

};

   137

   138

   139

function send_blob(data) {

   140

    if(data.length > 0) {

   141

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

   142

    };

   143

};

   144

   145

const typedarray_types = {

   146

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

   147

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

   148

    STRING: (str) => {

   149

        // beremiz default string max size is 128

   150

        str = str.slice(0,128);

   151

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

   152

        binary[0] = str.length;

   153

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

   154

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

   155

        }

   156

        return binary;

   157

    }

   158

    /* TODO */

   159

};

   160

   161

function send_reset() {

   162

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

   163

};

   164

   165

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

   166

// hmitree indexed array of integers

   167

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

   168

   169

// subscription state as needed by widget now

   170

// hmitree indexed array of Sets of widgets objects

   171

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

   172

   173

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

   174

// Since dispatch directly calls change_hmi_value,

   175

// PLC will periodically send variable at given frequency

   176

subscribers[heartbeat_index].add({

   177

    /* type: "Watchdog", */

   178

    frequency: 1,

   179

    indexes: [heartbeat_index],

   180

    dispatch: function(value) {

   181

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

   182

        change_hmi_value(heartbeat_index, "+1");

   183

    }

   184

});

   185

   186

function update_subscriptions() {

   187

    let delta = [];

   188

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

   189

        let widgets = subscribers[index];

   190

   191

        // periods are in ms

   192

        let previous_period = subscriptions[index];

   193

   194

        // subscribing with a zero period is unsubscribing

   195

        let new_period = 0;

   196

        if(widgets.size > 0) {

   197

            let maxfreq = 0;

   198

            for(let widget of widgets)

   199

                if(maxfreq < widget.frequency)

   200

                    maxfreq = widget.frequency;

   201

   202

            if(maxfreq != 0)

   203

                new_period = 1000/maxfreq;

   204

        }

   205

   206

        if(previous_period != new_period) {

   207

            subscriptions[index] = new_period;

   208

            delta.push(

   209

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

   210

                new Uint32Array([index]),

   211

                new Uint16Array([new_period]));

   212

        }

   213

    }

   214

    send_blob(delta);

   215

};

   216

   217

function send_hmi_value(index, value) {

   218

    let iectype = hmitree_types[index];

   219

    let tobinary = typedarray_types[iectype];

   220

    send_blob([

   221

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

   222

        new Uint32Array([index]),

   223

        tobinary(value)]);

   224

   225

    cache[index] = value;

   226

};

   227

   228

function change_hmi_value(index, opstr) {

   229

    let op = opstr[0];

   230

    let given_val = opstr.slice(1);

   231

    let old_val = cache[index]

   232

    let new_val;

   233

    switch(op){

   234

      case "=":

   235

        eval("new_val"+opstr);

   236

        break;

   237

      case "+":

   238

      case "-":

   239

      case "*":

   240

      case "/":

   241

        if(old_val != undefined)

   242

            new_val = eval("old_val"+opstr);

   243

        break;

   244

    }

   245

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

   246

        send_hmi_value(index, new_val);

   247

    return new_val;

   248

}

   249

   250

var current_visible_page;

   251

var current_subscribed_page;

   252

   253

function prepare_svg() {

   254

    for(let eltid in detachable_elements){

   255

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

   256

        parent.removeChild(element);

   257

    }

   258

};

   259

   260

function switch_page(page_name) {

   261

    if(current_subscribed_page != current_visible_page){

   262

        /* page switch already going */

   263

        /* TODO LOG ERROR */

   264

        return;

   265

    } else if(page_name == current_visible_page){

   266

        /* already in that page */

   267

        /* TODO LOG ERROR */

   268

        return;

   269

    }

   270

    switch_subscribed_page(page_name);

   271

};

   272

   273

function switch_subscribed_page(page_name) {

   274

    let old_desc = page_desc[current_subscribed_page];

   275

    let new_desc = page_desc[page_name];

   276

   277

    if(new_desc == undefined){

   278

        /* TODO LOG ERROR */

   279

        return;

   280

    }

   281

   282

    if(old_desc){

   283

        for(let widget of old_desc.widgets){

   284

            /* remove subsribers */

   285

            for(let index of widget.indexes){

   286

                subscribers[index].delete(widget);

   287

            }

   288

        }

   289

    }

   290

    for(let widget of new_desc.widgets){

   291

        /* add widget's subsribers */

   292

        for(let index of widget.indexes){

   293

            subscribers[index].add(widget);

   294

        }

   295

    }

   296

   297

    update_subscriptions();

   298

   299

    current_subscribed_page = page_name;

   300

   301

    requestHMIAnimation();

   302

}

   303

   304

function switch_visible_page(page_name) {

   305

   306

    let old_desc = page_desc[current_visible_page];

   307

    let new_desc = page_desc[page_name];

   308

   309

    if(old_desc){

   310

        for(let eltid in old_desc.required_detachables){

   311

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

   312

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

   313

                parent.removeChild(element);

   314

            }

   315

        }

   316

        for(let eltid in new_desc.required_detachables){

   317

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

   318

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

   319

                parent.appendChild(element);

   320

            }

   321

        }

   322

    }else{

   323

        for(let eltid in new_desc.required_detachables){

   324

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

   325

            parent.appendChild(element);

   326

        }

   327

    }

   328

   329

    for(let widget of new_desc.widgets){

   330

        for(let index of widget.indexes){

   331

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

   332

            let cached_val = cache[index];

   333

            if(cached_val != undefined)

   334

                dispatch_value_to_widget(widget, index, cached_val, cached_val);

   335

        }

   336

    }

   337

   338

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

   339

    current_visible_page = page_name;

   340

};

   341

   342

   343

// Once connection established

   344

ws.onopen = function (evt) {

   345

    init_widgets();

   346

    send_reset();

   347

    // show main page

   348

    prepare_svg();

   349

    switch_page(default_page);

   350

};

   351

   352

ws.onclose = function (evt) {

   353

    // TODO : add visible notification while waiting for reload

   354

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

   355

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

   356

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

   357

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

   358

   359

};