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

    REAL: (dv,offset) => [dv.getFloat32(offset, true), 4],

    43

    STRING: (dv, offset) => {

    44

        const 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

    80

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

    81

    pending_widget_animates = [];

    82

    83

    requestAnimationFrameID = null;

    84

}

    85

    86

function requestHMIAnimation() {

    87

    if(requestAnimationFrameID == null){

    88

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    89

    }

    90

}

    91

    92

// Message reception handler

    93

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

    94

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

    95

ws.onmessage = function (evt) {

    96

    97

    let data = evt.data;

    98

    let dv = new DataView(data);

    99

    let i = 0;

   100

    try {

   101

        for(let hash_int of hmi_hash) {

   102

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

   103

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

   104

            };

   105

            i++;

   106

        };

   107

   108

        while(i < data.byteLength){

   109

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

   110

            i += 4;

   111

            let iectype = hmitree_types[index];

   112

            if(iectype != undefined){

   113

                let dvgetter = dvgetters[iectype];

   114

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

   115

                updates[index] = value;

   116

                i += bytesize;

   117

            } else {

   118

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

   119

            }

   120

        };

   121

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

   122

        requestHMIAnimation();

   123

    } catch(err) {

   124

        // 1003 is for "Unsupported Data"

   125

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

   126

   127

        // TODO : remove debug alert ?

   128

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

   129

   130

        // force reload ignoring cache

   131

        location.reload(true);

   132

    }

   133

};

   134

   135

hmi_hash_u8 = new Uint8Array(hmi_hash);

   136

   137

function send_blob(data) {

   138

    if(data.length > 0) {

   139

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

   140

    };

   141

};

   142

   143

const typedarray_types = {

   144

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

   145

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

   146

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

   147

    STRING: (str) => {

   148

        // beremiz default string max size is 128

   149

        str = str.slice(0,128);

   150

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

   151

        binary[0] = str.length;

   152

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

   153

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

   154

        }

   155

        return binary;

   156

    }

   157

    /* TODO */

   158

};

   159

   160

function send_reset() {

   161

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

   162

};

   163

   164

var subscriptions = [];

   165

   166

function subscribers(index) {

   167

    let entry = subscriptions[index];

   168

    let res;

   169

    if(entry == undefined){

   170

        res = new Set();

   171

        subscriptions[index] = [res,0];

   172

    }else{

   173

        [res, _ign] = entry;

   174

    }

   175

    return res

   176

}

   177

   178

function get_subscription_period(index) {

   179

    let entry = subscriptions[index];

   180

    if(entry == undefined)

   181

        return 0;

   182

    let [_ign, period] = entry;

   183

    return period;

   184

}

   185

   186

function set_subscription_period(index, period) {

   187

    let entry = subscriptions[index];

   188

    if(entry == undefined){

   189

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

   190

    } else {

   191

        entry[1] = period;

   192

    }

   193

}

   194

   195

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

   196

// Since dispatch directly calls change_hmi_value,

   197

// PLC will periodically send variable at given frequency

   198

subscribers(heartbeat_index).add({

   199

    /* type: "Watchdog", */

   200

    frequency: 1,

   201

    indexes: [heartbeat_index],

   202

    new_hmi_value: function(index, value, oldval) {

   203

        apply_hmi_value(heartbeat_index, value+1);

   204

    }

   205

});

   206

   207

var translated = false;

   208

   209

function switch_langnum(langnum) {

   210

    if(langnum == current_lang) {

   211

        return;

   212

    }

   213

   214

    if (!translated) {

   215

        translated = true;

   216

        for (let translation of translations) {

   217

            let [objs] = translation;

   218

            translation.push(Array.prototype.map.call(objs[0].children, x=>x.textContent).join("\\\\n")); 

   219

        }

   220

    }

   221

   222

    for (let translation of translations) {

   223

        let [objs, msgs, orig] = translation;

   224

        let msg = langnum == 0 ? orig : msgs[langnum - 1];

   225

        for (let obj of objs) {

   226

            msg.split('\\\\n').map((line,i) => {obj.children[i].textContent = line;});

   227

        }

   228

    }

   229

    current_lang = langnum;

   230

}

   231

var lang_local_index = hmi_local_index("lang");

   232

subscribers(lang_local_index).add({

   233

    indexes: [lang_local_index],

   234

    new_hmi_value: function(index, value, oldval) {

   235

        switch_langnum(value);

   236

    }

   237

});

   238

var current_lang = 0;

   239

switch_langnum(cache[lang_local_index]);

   240

   241

function update_subscriptions() {

   242

    let delta = [];

   243

    for(let index in subscriptions){

   244

        let widgets = subscribers(index);

   245

   246

        // periods are in ms

   247

        let previous_period = get_subscription_period(index);

   248

   249

        // subscribing with a zero period is unsubscribing

   250

        let new_period = 0;

   251

        if(widgets.size > 0) {

   252

            let maxfreq = 0;

   253

            for(let widget of widgets){

   254

                let wf = widget.frequency;

   255

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

   256

                    maxfreq = wf;

   257

            }

   258

   259

            if(maxfreq != 0)

   260

                new_period = 1000/maxfreq;

   261

        }

   262

   263

        if(previous_period != new_period) {

   264

            set_subscription_period(index, new_period);

   265

            if(index <= last_remote_index){

   266

                delta.push(

   267

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

   268

                    new Uint32Array([index]),

   269

                    new Uint16Array([new_period]));

   270

            }

   271

        }

   272

    }

   273

    send_blob(delta);

   274

};

   275

   276

function send_hmi_value(index, value) {

   277

    if(index > last_remote_index){

   278

        updates[index] = value;

   279

   280

        if(persistent_indexes.has(index)){

   281

            let varname = persistent_indexes.get(index);

   282

            console.log(varname+"="+value+"; max-age=3153600000");

   283

            document.cookie = varname+"="+value+"; max-age=3153600000";

   284

        }

   285

   286

        requestHMIAnimation();

   287

        return;

   288

    }

   289

   290

    let iectype = hmitree_types[index];

   291

    let tobinary = typedarray_types[iectype];

   292

    send_blob([

   293

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

   294

        new Uint32Array([index]),

   295

        tobinary(value)]);

   296

   297

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

   298

    // cache[index] = value;

   299

};

   300

   301

function apply_hmi_value(index, new_val) {

   302

    let old_val = cache[index]

   303

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

   304

        send_hmi_value(index, new_val);

   305

    return new_val;

   306

}

   307

   308

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

   309

   310

function eval_operation_string(old_val, opstr) {

   311

    let op = opstr[0];

   312

    let given_val;

   313

    if(opstr.length < 2) 

   314

        return undefined;

   315

    if(opstr[1] in quotes){

   316

        if(opstr.length < 3) 

   317

            return undefined;

   318

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

   319

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

   320

        }

   321

    } else {

   322

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

   323

    }

   324

    let new_val;

   325

    switch(op){

   326

      case "=":

   327

        new_val = given_val;

   328

        break;

   329

      case "+":

   330

        new_val = old_val + given_val;

   331

        break;

   332

      case "-":

   333

        new_val = old_val - given_val;

   334

        break;

   335

      case "*":

   336

        new_val = old_val * given_val;

   337

        break;

   338

      case "/":

   339

        new_val = old_val / given_val;

   340

        break;

   341

    }

   342

    return new_val;

   343

}

   344

   345

var current_visible_page;

   346

var current_subscribed_page;

   347

var current_page_index;

   348

   349

function prepare_svg() {

   350

    // prevents context menu from appearing on right click and long touch

   351

    document.body.addEventListener('contextmenu', e => {

   352

        e.preventDefault();

   353

    });

   354

   355

    for(let eltid in detachable_elements){

   356

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

   357

        parent.removeChild(element);

   358

    }

   359

};

   360

   361

function switch_page(page_name, page_index) {

   362

    if(current_subscribed_page != current_visible_page){

   363

        /* page switch already going */

   364

        /* TODO LOG ERROR */

   365

        return false;

   366

    }

   367

   368

    if(page_name == undefined)

   369

        page_name = current_subscribed_page;

   370

   371

   372

    let old_desc = page_desc[current_subscribed_page];

   373

    let new_desc = page_desc[page_name];

   374

   375

    if(new_desc == undefined){

   376

        /* TODO LOG ERROR */

   377

        return false;

   378

    }

   379

   380

    if(page_index == undefined){

   381

        page_index = new_desc.page_index;

   382

    }

   383

   384

    if(old_desc){

   385

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

   386

    }

   387

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

   388

   389

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

   390

   391

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

   392

   393

    update_subscriptions();

   394

   395

    current_subscribed_page = page_name;

   396

    current_page_index = page_index;

   397

   398

    jumps_need_update = true;

   399

   400

    requestHMIAnimation();

   401

   402

    jump_history.push([page_name, page_index]);

   403

    if(jump_history.length > 42)

   404

        jump_history.shift();

   405

   406

    return true;

   407

};

   408

   409

function switch_visible_page(page_name) {

   410

   411

    let old_desc = page_desc[current_visible_page];

   412

    let new_desc = page_desc[page_name];

   413

   414

    if(old_desc){

   415

        for(let eltid in old_desc.required_detachables){

   416

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

   417

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

   418

                parent.removeChild(element);

   419

            }

   420

        }

   421

        for(let eltid in new_desc.required_detachables){

   422

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

   423

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

   424

                parent.appendChild(element);

   425

            }

   426

        }

   427

    }else{

   428

        for(let eltid in new_desc.required_detachables){

   429

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

   430

            parent.appendChild(element);

   431

        }

   432

    }

   433

   434

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

   435

    current_visible_page = page_name;

   436

};

   437

   438

// Once connection established

   439

ws.onopen = function (evt) {

   440

    init_widgets();

   441

    send_reset();

   442

    // show main page

   443

    prepare_svg();

   444

    switch_page(default_page);

   445

};

   446

   447

ws.onclose = function (evt) {

   448

    // TODO : add visible notification while waiting for reload

   449

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

   450

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

   451

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

   452

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

   453

   454

};

   455

   456

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

   457

var edit_callback;

   458

const localtypes = {"PAGE_LOCAL":null, "HMI_LOCAL":null}

   459

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

   460

    if(valuetype in localtypes){

   461

        valuetype = (typeof initial) == "number" ? "HMI_REAL" : "HMI_STRING";

   462

    }

   463

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

   464

    edit_callback = callback;

   465

    let widget = hmi_widgets[keypadid];

   466

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

   467

};

   468

   469

var current_modal; /* TODO stack ?*/

   470

   471

function show_modal() {

   472

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

   473

   474

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

   475

    tmpgrpattr = document.createAttribute("transform");

   476

    let [xcoord,ycoord] = this.coordinates;

   477

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

   478

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

   479

   480

    tmpgrp.setAttributeNode(tmpgrpattr);

   481

   482

    tmpgrp.appendChild(element);

   483

    parent.appendChild(tmpgrp);

   484

   485