1

// svghmi.js

     2

     3

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

     4

var updates = {};

     5

var need_cache_apply = []; 

     6

     7

     8

function dispatch_value(index, value) {

     9

    let widgets = subscribers[index];

    10

    11

    let oldval = cache[index];

    12

    cache[index] = value;

    13

    14

    if(widgets.size > 0) {

    15

        for(let widget of widgets){

    16

            widget.new_hmi_value(index, value, oldval);

    17

        }

    18

    }

    19

};

    20

    21

function init_widgets() {

    22

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

    23

        let widget = hmi_widgets[id];

    24

        let init = widget.init;

    25

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

    26

            try {

    27

                init.call(widget);

    28

            } catch(err) {

    29

                console.log(err);

    30

            }

    31

        }

    32

    });

    33

};

    34

    35

// Open WebSocket to relative "/ws" address

    36

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

    37

ws.binaryType = 'arraybuffer';

    38

    39

const dvgetters = {

    40

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

    41

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

    42

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

    43

    STRING: (dv, offset) => {

    44

        size = dv.getInt8(offset);

    45

        return [

    46

            String.fromCharCode.apply(null, new Uint8Array(

    47

                dv.buffer, /* original buffer */

    48

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

    49

                size /* size of string */

    50

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

    51

    }

    52

};

    53

    54

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

    55

function apply_updates() {

    56

    for(let index in updates){

    57

        // serving as a key, index becomes a string

    58

        // -> pass Number(index) instead

    59

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

    60

        delete updates[index];

    61

    }

    62

}

    63

    64

// Called on requestAnimationFrame, modifies DOM

    65

var requestAnimationFrameID = null;

    66

function animate() {

    67

    // Do the page swith if any one pending

    68

    if(current_subscribed_page != current_visible_page){

    69

        switch_visible_page(current_subscribed_page);

    70

    }

    71

    72

    while(widget = need_cache_apply.pop()){

    73

        widget.apply_cache();

    74

    }

    75

    76

    if(jumps_need_update) update_jumps();

    77

    78

    apply_updates();

    79

    requestAnimationFrameID = null;

    80

}

    81

    82

function requestHMIAnimation() {

    83

    if(requestAnimationFrameID == null){

    84

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    85

    }

    86

}

    87

    88

// Message reception handler

    89

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

    90

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

    91

ws.onmessage = function (evt) {

    92

    93

    let data = evt.data;

    94

    let dv = new DataView(data);

    95

    let i = 0;

    96

    try {

    97

        for(let hash_int of hmi_hash) {

    98

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

    99

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

   100

            };

   101

            i++;

   102

        };

   103

   104

        while(i < data.byteLength){

   105

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

   106

            i += 4;

   107

            let iectype = hmitree_types[index];

   108

            if(iectype != undefined){

   109

                let dvgetter = dvgetters[iectype];

   110

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

   111

                updates[index] = value;

   112

                i += bytesize;

   113

            } else {

   114

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

   115

            }

   116

        };

   117

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

   118

        requestHMIAnimation();

   119

    } catch(err) {

   120

        // 1003 is for "Unsupported Data"

   121

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

   122

   123

        // TODO : remove debug alert ?

   124

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

   125

   126

        // force reload ignoring cache

   127

        location.reload(true);

   128

    }

   129

};

   130

   131

   132

function send_blob(data) {

   133

    if(data.length > 0) {

   134

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

   135

    };

   136

};

   137

   138

const typedarray_types = {

   139

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

   140

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

   141

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

   142

    STRING: (str) => {

   143

        // beremiz default string max size is 128

   144

        str = str.slice(0,128);

   145

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

   146

        binary[0] = str.length;

   147

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

   148

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

   149

        }

   150

        return binary;

   151

    }

   152

    /* TODO */

   153

};

   154

   155

function send_reset() {

   156

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

   157

};

   158

   159

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

   160

// hmitree indexed array of integers

   161

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

   162

   163

// subscription state as needed by widget now

   164

// hmitree indexed array of Sets of widgets objects

   165

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

   166

   167

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

   168

// Since dispatch directly calls change_hmi_value,

   169

// PLC will periodically send variable at given frequency

   170

subscribers[heartbeat_index].add({

   171

    /* type: "Watchdog", */

   172

    frequency: 1,

   173

    indexes: [heartbeat_index],

   174

    new_hmi_value: function(index, value, oldval) {

   175

        apply_hmi_value(heartbeat_index, value+1);

   176

    }

   177

});

   178

   179

function update_subscriptions() {

   180

    let delta = [];

   181

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

   182

        let widgets = subscribers[index];

   183

   184

        // periods are in ms

   185

        let previous_period = subscriptions[index];

   186

   187

        // subscribing with a zero period is unsubscribing

   188

        let new_period = 0;

   189

        if(widgets.size > 0) {

   190

            let maxfreq = 0;

   191

            for(let widget of widgets){

   192

                let wf = widget.frequency;

   193

                if(wf != undefined && maxfreq < wf)

   194

                    maxfreq = wf;

   195

            }

   196

   197

            if(maxfreq != 0)

   198

                new_period = 1000/maxfreq;

   199

        }

   200

   201

        if(previous_period != new_period) {

   202

            subscriptions[index] = new_period;

   203

            delta.push(

   204

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

   205

                new Uint32Array([index]),

   206

                new Uint16Array([new_period]));

   207

        }

   208

    }

   209

    send_blob(delta);

   210

};

   211

   212

function send_hmi_value(index, value) {

   220

    let iectype = hmitree_types[index];

   221

    let tobinary = typedarray_types[iectype];

   222

    send_blob([

   223

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

   224

        new Uint32Array([index]),

   225

        tobinary(value)]);

   226

   227

    // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf

   228

    // cache[index] = value;

   229

};

   230

   231

function apply_hmi_value(index, new_val) {

   232

    let old_val = cache[index]

   233

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

   234

        send_hmi_value(index, new_val);

   235

    return new_val;

   236

}

   237

   238

quotes = {"'":null, '"':null};

   239

   240

function change_hmi_value(index, opstr) {

   241

    let op = opstr[0];

   242

    let given_val;

   243

    if(opstr.length < 2) 

   244

        return undefined; // TODO raise

   245

    if(opstr[1] in quotes){

   246

        if(opstr.length < 3) 

   247

            return undefined; // TODO raise

   248

        if(opstr[opstr.length-1] == opstr[1]){

   249

            given_val = opstr.slice(2,opstr.length-1);

   250

        }

   251

    } else {

   252

        given_val = Number(opstr.slice(1));

   253

    }

   254

    let old_val = cache[index];

   255

    let new_val;

   256

    switch(op){

   257

      case "=":

   258

        new_val = given_val;

   259

        break;

   260

      case "+":

   261

        new_val = old_val + given_val;

   262

        break;

   263

      case "-":

   264

        new_val = old_val - given_val;

   265

        break;

   266

      case "*":

   267

        new_val = old_val * given_val;

   268

        break;

   269

      case "/":

   270

        new_val = old_val / given_val;

   271

        break;

   272

    }

   273

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

   274

        send_hmi_value(index, new_val);

   275

    // TODO else raise

   276

    return new_val;

   277

}

   278

   279

var current_visible_page;

   280

var current_subscribed_page;

   281

var current_page_index;

   282

   283

function prepare_svg() {

   284

    for(let eltid in detachable_elements){

   285

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

   286

        parent.removeChild(element);

   287

    }

   288

};

   289

   290

function switch_page(page_name, page_index) {

   291

    if(current_subscribed_page != current_visible_page){

   292

        /* page switch already going */

   293

        /* TODO LOG ERROR */

   294

        return false;

   295

    }

   296

   297

    if(page_name == undefined)

   298

        page_name = current_subscribed_page;

   299

   300

   301

    let old_desc = page_desc[current_subscribed_page];

   302

    let new_desc = page_desc[page_name];

   303

   304

    if(new_desc == undefined){

   305

        /* TODO LOG ERROR */

   306

        return false;

   307

    }

   308

   309

    if(page_index == undefined){

   310

        page_index = new_desc.page_index;

   311

    }

   312

   313

    if(old_desc){

   314

        old_desc.widgets.map(([widget,relativeness])=>widget.unsub());

   315

    }

   316

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

   321

   322

    update_subscriptions();

   323

   324

    current_subscribed_page = page_name;

   325

    current_page_index = page_index;

   326

   327

    jumps_need_update = true;

   328

   329

    requestHMIAnimation();

   330

   331

    jump_history.push([page_name, page_index]);

   332

    if(jump_history.length > 42)

   333

        jump_history.shift();

   334

   335

    return true;

   336

};

   337

   338

function switch_visible_page(page_name) {

   339

   340

    let old_desc = page_desc[current_visible_page];

   341

    let new_desc = page_desc[page_name];

   342

   343

    if(old_desc){

   344

        for(let eltid in old_desc.required_detachables){

   345

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

   346

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

   347

                parent.removeChild(element);

   348

            }

   349

        }

   350

        for(let eltid in new_desc.required_detachables){

   351

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

   352

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

   353

                parent.appendChild(element);

   354

            }

   355

        }

   356

    }else{

   357

        for(let eltid in new_desc.required_detachables){

   358

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

   359

            parent.appendChild(element);

   360

        }

   361

    }

   362

   363

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

   364

    current_visible_page = page_name;

   365

};

   366

   367

// Once connection established

   368

ws.onopen = function (evt) {

   369

    init_widgets();

   370

    send_reset();

   371

    // show main page

   372

    prepare_svg();

   373

    switch_page(default_page);

   374

};

   375

   376

ws.onclose = function (evt) {

   377

    // TODO : add visible notification while waiting for reload

   378

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

   379

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

   380

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

   381

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

   382

   383

};

   384

   385

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

   386

var edit_callback;

   387

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

   388

   389

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

   390

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

   391

    edit_callback = callback;

   392

    let widget = hmi_widgets[keypadid];

   393

    widget.start_edit(path, valuetype, callback, initial);

   394

};

   395

   396

var current_modal; /* TODO stack ?*/

   397

   398

function show_modal() {

   399

    let [element, parent] = detachable_elements[this.element.id];

   400

   401

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

   402

    tmpgrpattr = document.createAttribute("transform");

   403

   404

    let [xcoord,ycoord] = this.coordinates;

   405

    let [xdest,ydest] = page_desc[current_visible_page].bbox;

   406

    tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")";

   407

    tmpgrp.setAttributeNode(tmpgrpattr);

   408

   409

    tmpgrp.appendChild(element);

   410

    parent.appendChild(tmpgrp);

   411

   412

    current_modal = [this.element.id, tmpgrp];

   413

};

   414

   415

function end_modal() {

   416

    let [eltid, tmpgrp] = current_modal;

   417

    let [element, parent] = detachable_elements[this.element.id];

   418

   419

    parent.removeChild(tmpgrp);

   420

   421

    current_modal = undefined;

   422

};

   423

   424

function widget_active_activable(eltsub) {

   425

    if(eltsub.inactive_style === undefined)

   426

        eltsub.inactive_style = eltsub.inactive.getAttribute("style");

   427

    eltsub.inactive.setAttribute("style", "display:none");

   428

    if(eltsub.active_style !== undefined)

   429

            eltsub.active.setAttribute("style", eltsub.active_style);

   430

    console.log("active", eltsub);

   431

};

   432

function widget_inactive_activable(eltsub) {

   433

    if(eltsub.active_style === undefined)

   434

        eltsub.active_style = eltsub.active.getAttribute("style");

   435

    eltsub.active.setAttribute("style", "display:none");

   436

    if(eltsub.inactive_style !== undefined)

   437

            eltsub.inactive.setAttribute("style", eltsub.inactive_style);

   438

    console.log("inactive", eltsub);

   439

};