1

// svghmi.js

     2

     3

var updates = {};

     4

var need_cache_apply = []; 

     5

     6

     7

function dispatch_value(index, value) {

     8

    let widgets = subscribers(index);

     9

    10

    let oldval = cache[index];

    11

    cache[index] = value;

    12

    13

    if(widgets.size > 0) {

    14

        for(let widget of widgets){

    15

            widget.new_hmi_value(index, value, oldval);

    16

        }

    17

    }

    18

};

    19

    20

function init_widgets() {

    21

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

    22

        let widget = hmi_widgets[id];

    23

        let init = widget.init;

    24

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

    25

            try {

    26

                init.call(widget);

    27

            } catch(err) {

    28

                console.log(err);

    29

            }

    30

        }

    31

    });

    32

};

    33

    34

// Open WebSocket to relative "/ws" address

    35

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

    36

ws.binaryType = 'arraybuffer';

    37

    38

const dvgetters = {

    39

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

    40

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

    41

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

    42

    STRING: (dv, offset) => {

    43

        size = dv.getInt8(offset);

    44

        return [

    45

            String.fromCharCode.apply(null, new Uint8Array(

    46

                dv.buffer, /* original buffer */

    47

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

    48

                size /* size of string */

    49

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

    50

    }

    51

};

    52

    53

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

    54

function apply_updates() {

    55

    for(let index in updates){

    56

        // serving as a key, index becomes a string

    57

        // -> pass Number(index) instead

    58

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

    59

        delete updates[index];

    60

    }

    61

}

    62

    63

// Called on requestAnimationFrame, modifies DOM

    64

var requestAnimationFrameID = null;

    65

function animate() {

    66

    // Do the page swith if any one pending

    67

    if(current_subscribed_page != current_visible_page){

    68

        switch_visible_page(current_subscribed_page);

    69

    }

    70

    71

    while(widget = need_cache_apply.pop()){

    72

        widget.apply_cache();

    73

    }

    74

    75

    if(jumps_need_update) update_jumps();

    76

    77

    apply_updates();

    78

    79

    pending_widget_animates.forEach(widget => widget._animate());

    80

    pending_widget_animates = [];

    81

    82

    requestAnimationFrameID = null;

    83

}

    84

    85

function requestHMIAnimation() {

    86

    if(requestAnimationFrameID == null){

    87

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    88

    }

    89

}

    90

    91

// Message reception handler

    92

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

    93

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

    94

ws.onmessage = function (evt) {

    95

    96

    let data = evt.data;

    97

    let dv = new DataView(data);

    98

    let i = 0;

    99

    try {

   100

        for(let hash_int of hmi_hash) {

   101

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

   102

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

   103

            };

   104

            i++;

   105

        };

   106

   107

        while(i < data.byteLength){

   108

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

   109

            i += 4;

   110

            let iectype = hmitree_types[index];

   111

            if(iectype != undefined){

   112

                let dvgetter = dvgetters[iectype];

   113

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

   114

                updates[index] = value;

   115

                i += bytesize;

   116

            } else {

   117

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

   118

            }

   119

        };

   120

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

   121

        requestHMIAnimation();

   122

    } catch(err) {

   123

        // 1003 is for "Unsupported Data"

   124

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

   125

   126

        // TODO : remove debug alert ?

   127

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

   128

   129

        // force reload ignoring cache

   130

        location.reload(true);

   131

    }

   132

};

   133

   134

   135

function send_blob(data) {

   136

    if(data.length > 0) {

   137

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

   138

    };

   139

};

   140

   141

const typedarray_types = {

   142

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

   143

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

   144

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

   145

    STRING: (str) => {

   146

        // beremiz default string max size is 128

   147

        str = str.slice(0,128);

   148

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

   149

        binary[0] = str.length;

   150

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

   151

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

   152

        }

   153

        return binary;

   154

    }

   155

    /* TODO */

   156

};

   157

   158

function send_reset() {

   159

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

   160

};

   161

   162

var subscriptions = [];

   163

   164

function subscribers(index) {

   165

    let entry = subscriptions[index];

   166

    let res;

   167

    if(entry == undefined){

   168

        res = new Set();

   169

        subscriptions[index] = [res,0];

   170

    }else{

   171

        [res, _ign] = entry;

   172

    }

   173

    return res

   174

}

   175

   176

function get_subscription_period(index) {

   177

    let entry = subscriptions[index];

   178

    if(entry == undefined)

   179

        return 0;

   180

    let [_ign, period] = entry;

   181

    return period;

   182

}

   183

   184

function set_subscription_period(index, period) {

   185

    let entry = subscriptions[index];

   186

    if(entry == undefined){

   187

        subscriptions[index] = [new Set(), period];

   188

    } else {

   189

        entry[1] = period;

   190

    }

   191

}

   192

   193

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

   194

// Since dispatch directly calls change_hmi_value,

   195

// PLC will periodically send variable at given frequency

   196

subscribers(heartbeat_index).add({

   197

    /* type: "Watchdog", */

   198

    frequency: 1,

   199

    indexes: [heartbeat_index],

   200

    new_hmi_value: function(index, value, oldval) {

   201

        apply_hmi_value(heartbeat_index, value+1);

   202

    }

   203

});

   204

   205

   206

function update_subscriptions() {

   207

    let delta = [];

   208

    for(let index in subscriptions){

   209

        let widgets = subscribers(index);

   210

   211

        // periods are in ms

   212

        let previous_period = get_subscription_period(index);

   213

   214

        // subscribing with a zero period is unsubscribing

   215

        let new_period = 0;

   216

        if(widgets.size > 0) {

   217

            let maxfreq = 0;

   218

            for(let widget of widgets){

   219

                let wf = widget.frequency;

   220

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

   221

                    maxfreq = wf;

   222

            }

   223

   224

            if(maxfreq != 0)

   225

                new_period = 1000/maxfreq;

   226

        }

   227

   228

        if(previous_period != new_period) {

   229

            set_subscription_period(index, new_period);

   230

            if(index <= last_remote_index){

   231

                delta.push(

   232

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

   233

                    new Uint32Array([index]),

   234

                    new Uint16Array([new_period]));

   235

            }

   236

        }

   237

    }

   238

    send_blob(delta);

   239

};

   240

   241

function send_hmi_value(index, value) {

   242

    if(index > last_remote_index){

   243

        updates[index] = value;

   244

        requestHMIAnimation();

   245

        return;

   246

    }

   247

   248

    let iectype = hmitree_types[index];

   249

    let tobinary = typedarray_types[iectype];

   250

    send_blob([

   251

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

   252

        new Uint32Array([index]),

   253

        tobinary(value)]);

   254

   255

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

   256

    // cache[index] = value;

   257

};

   258

   259

function apply_hmi_value(index, new_val) {

   260

    let old_val = cache[index]

   261

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

   262

        send_hmi_value(index, new_val);

   263

    return new_val;

   264

}

   265

   266

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

   267

   268

function change_hmi_value(index, opstr) {

   269

    let op = opstr[0];

   270

    let given_val;

   271

    if(opstr.length < 2) 

   272

        return undefined; // TODO raise

   273

    if(opstr[1] in quotes){

   274

        if(opstr.length < 3) 

   275

            return undefined; // TODO raise

   276

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

   277

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

   278

        }

   279

    } else {

   280

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

   281

    }

   282

    let old_val = cache[index];

   283

    let new_val;

   284

    switch(op){

   285

      case "=":

   286

        new_val = given_val;

   287

        break;

   288

      case "+":

   289

        new_val = old_val + given_val;

   290

        break;

   291

      case "-":

   292

        new_val = old_val - given_val;

   293

        break;

   294

      case "*":

   295

        new_val = old_val * given_val;

   296

        break;

   297

      case "/":

   298

        new_val = old_val / given_val;

   299

        break;

   300

    }

   301

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

   302

        send_hmi_value(index, new_val);

   303

    // TODO else raise

   304

    return new_val;

   305

}

   306

   307

var current_visible_page;

   308

var current_subscribed_page;

   309

var current_page_index;

   310

   311

function prepare_svg() {

   312

    for(let eltid in detachable_elements){

   313

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

   314

        parent.removeChild(element);

   315

    }

   316

};

   317

   318

function switch_page(page_name, page_index) {

   319

    if(current_subscribed_page != current_visible_page){

   320

        /* page switch already going */

   321

        /* TODO LOG ERROR */

   322

        return false;

   323

    }

   324

   325

    if(page_name == undefined)

   326

        page_name = current_subscribed_page;

   327

   328

   329

    let old_desc = page_desc[current_subscribed_page];

   330

    let new_desc = page_desc[page_name];

   331

   332

    if(new_desc == undefined){

   333

        /* TODO LOG ERROR */

   334

        return false;

   335

    }

   336

   337

    if(page_index == undefined){

   338

        page_index = new_desc.page_index;

   339

    }

   340

   341

    if(old_desc){

   342

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

   343

    }

   344

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

   345

   346

    container_id = page_name + (page_index != undefined ? page_index : "");

   347

   348

    new_desc.widgets.map(([widget,relativeness])=>widget.sub(new_offset,relativeness,container_id));

   349

   350

    update_subscriptions();

   351

   352

    current_subscribed_page = page_name;

   353

    current_page_index = page_index;

   354

   355

    jumps_need_update = true;

   356

   357

    requestHMIAnimation();

   358

   359

    jump_history.push([page_name, page_index]);

   360

    if(jump_history.length > 42)

   361

        jump_history.shift();

   362

   363

    return true;

   364

};

   365

   366

function switch_visible_page(page_name) {

   367

   368

    let old_desc = page_desc[current_visible_page];

   369

    let new_desc = page_desc[page_name];

   370

   371

    if(old_desc){

   372

        for(let eltid in old_desc.required_detachables){

   373

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

   374

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

   375

                parent.removeChild(element);

   376

            }

   377

        }

   378

        for(let eltid in new_desc.required_detachables){

   379

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

   380

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

   381

                parent.appendChild(element);

   382

            }

   383

        }

   384

    }else{

   385

        for(let eltid in new_desc.required_detachables){

   386

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

   387

            parent.appendChild(element);

   388

        }

   389

    }

   390

   391

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

   392

    current_visible_page = page_name;

   393

};

   394

   395

// Once connection established

   396

ws.onopen = function (evt) {

   397

    init_widgets();

   398

    send_reset();

   399

    // show main page

   400

    prepare_svg();

   401

    switch_page(default_page);

   402

};

   403

   404

ws.onclose = function (evt) {

   405

    // TODO : add visible notification while waiting for reload

   406

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

   407

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

   408

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

   409

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

   410

   411

};

   412

   413

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

   414

var edit_callback;

   415

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

   416

   417

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

   418

    edit_callback = callback;

   419

    let widget = hmi_widgets[keypadid];

   420

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

   421

};

   422

   423

var current_modal; /* TODO stack ?*/

   424

   425

function show_modal(size) {

   426

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

   427

   428

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

   429

    tmpgrpattr = document.createAttribute("transform");

   430

    let [xcoord,ycoord] = this.coordinates;

   431

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

   432

    if (typeof size === 'undefined'){

   433

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

   434

    }

   435

    else{

   436

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

   437

    }

   438

   439

    tmpgrp.setAttributeNode(tmpgrpattr);

   440

   441

    tmpgrp.appendChild(element);

   442

    parent.appendChild(tmpgrp);

   443

   444

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

   445

};

   446

   447

function end_modal() {

   448

    let [eltid, tmpgrp] = current_modal;

   449

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

   450

   451

    parent.removeChild(tmpgrp);

   452

   453

    current_modal = undefined;

   454

};

   455

   456

function widget_active_activable(eltsub) {

   457

    if(eltsub.inactive_style === undefined)

   458

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

   459

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

   460

    if(eltsub.active_style !== undefined)

   461

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

   462

};

   463

function widget_inactive_activable(eltsub) {

   464

    if(eltsub.active_style === undefined)

   465

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

   466

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

   467

    if(eltsub.inactive_style !== undefined)

   468

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

   469

};