1

// svghmi.js

     2

     3

var need_cache_apply = [];

     4

     5

function dispatch_value(index, value) {

     6

    let widgets = subscribers(index);

     7

     8

    let oldval = cache[index];

     9

    cache[index] = value;

    10

    11

    if(widgets.size > 0) {

    12

        for(let widget of widgets){

    13

            widget.new_hmi_value(index, value, oldval);

    14

        }

    15

    }

    16

};

    17

    18

function init_widgets() {

    19

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

    20

        let widget = hmi_widgets[id];

    21

        let init = widget.init;

    22

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

    23

            try {

    24

                init.call(widget);

    25

            } catch(err) {

    26

                console.log(err);

    27

            }

    28

        }

    29

    });

    30

};

    31

    32

// Open WebSocket to relative "/ws" address

    33

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

    34

ws.binaryType = 'arraybuffer';

    35

    36

const dvgetters = {

    37

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

    38

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

    39

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

    40

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

    41

    STRING: (dv, offset) => {

    42

        const size = dv.getInt8(offset);

    43

        return [

    44

            String.fromCharCode.apply(null, new Uint8Array(

    45

                dv.buffer, /* original buffer */

    46

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

    47

                size /* size of string */

    48

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

    49

    }

    50

};

    51

    52

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

    53

function apply_updates() {

    54

    updates.forEach((value, index) => {

    55

        dispatch_value(index, value);

    56

    });

    57

    updates.clear();

    58

}

    59

    60

// Called on requestAnimationFrame, modifies DOM

    61

var requestAnimationFrameID = null;

    62

function animate() {

    63

    // Do the page swith if any one pending

    64

    if(current_subscribed_page != current_visible_page){

    65

        switch_visible_page(current_subscribed_page);

    66

    }

    67

    68

    while(widget = need_cache_apply.pop()){

    69

        widget.apply_cache();

    70

    }

    71

    72

    if(jumps_need_update) update_jumps();

    73

    74

    apply_updates();

    75

    76

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

    77

    pending_widget_animates = [];

    78

    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.set(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

hmi_hash_u8 = new Uint8Array(hmi_hash);

   132

   133

function send_blob(data) {

   134

    if(data.length > 0) {

   135

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

   136

    };

   137

};

   138

   139

const typedarray_types = {

   140

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

   141

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

   142

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

   143

    REAL: (number) => new Float32Array([number]),

   144

    STRING: (str) => {

   145

        // beremiz default string max size is 128

   146

        str = str.slice(0,128);

   147

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

   148

        binary[0] = str.length;

   149

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

   150

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

   151

        }

   152

        return binary;

   153

    }

   154

    /* TODO */

   155

};

   156

   157

function send_reset() {

   158

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

   159

};

   160

   161

var subscriptions = [];

   162

   163

function subscribers(index) {

   164

    let entry = subscriptions[index];

   165

    let res;

   166

    if(entry == undefined){

   167

        res = new Set();

   168

        subscriptions[index] = [res,0];

   169

    }else{

   170

        [res, _ign] = entry;

   171

    }

   172

    return res

   173

}

   174

   175

function get_subscription_period(index) {

   176

    let entry = subscriptions[index];

   177

    if(entry == undefined)

   178

        return 0;

   179

    let [_ign, period] = entry;

   180

    return period;

   181

}

   182

   183

function set_subscription_period(index, period) {

   184

    let entry = subscriptions[index];

   185

    if(entry == undefined){

   186

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

   187

    } else {

   188

        entry[1] = period;

   189

    }

   190

}

   191

   192

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

   193

// Since dispatch directly calls change_hmi_value,

   194

// PLC will periodically send variable at given frequency

   195

subscribers(heartbeat_index).add({

   196

    /* type: "Watchdog", */

   197

    frequency: 1,

   198

    indexes: [heartbeat_index],

   199

    new_hmi_value: function(index, value, oldval) {

   200

        apply_hmi_value(heartbeat_index, value+1);

   201

    }

   202

});

   203

   204

function svg_text_to_multiline(elt) {

   205

    return(Array.prototype.map.call(elt.children, x=>x.textContent).join("\\\\n")); 

   206

}

   207

   208

function multiline_to_svg_text(elt, str) {

   209

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

   210

}

   211

   212

function switch_langnum(langnum) {

   213

    langnum = Math.max(0, Math.min(langs.length - 1, langnum));

   214

   215

    for (let translation of translations) {

   216

        let [objs, msgs] = translation;

   217

        let msg = msgs[langnum];

   218

        for (let obj of objs) {

   219

            multiline_to_svg_text(obj, msg);

   220

            obj.setAttribute("lang",langnum);

   221

        }

   222

    }

   223

    return langnum;

   224

}

   225

   226

// backup original texts

   227

for (let translation of translations) {

   228

    let [objs, msgs] = translation;

   229

    msgs.unshift(svg_text_to_multiline(objs[0])); 

   230

}

   231

   232

var lang_local_index = hmi_local_index("lang");

   233

var langcode_local_index = hmi_local_index("lang_code");

   234

var langname_local_index = hmi_local_index("lang_name");

   235

subscribers(lang_local_index).add({

   236

    indexes: [lang_local_index],

   237

    new_hmi_value: function(index, value, oldval) {

   238

        let current_lang =  switch_langnum(value);

   239

        let [langname,langcode] = langs[current_lang];

   240

        apply_hmi_value(langcode_local_index, langcode);

   241

        apply_hmi_value(langname_local_index, langname);

   242

        switch_page();

   243

    }

   244

});

   245

   246

function setup_lang(){

   247

    let current_lang = cache[lang_local_index];

   248

    let new_lang = switch_langnum(current_lang);

   249

    if(current_lang != new_lang){

   250

        apply_hmi_value(lang_local_index, new_lang);

   251

    }

   252

}

   253

   254

setup_lang();

   255

   256

function update_subscriptions() {

   257

    let delta = [];

   258

    for(let index in subscriptions){

   259

        let widgets = subscribers(index);

   260

   261

        // periods are in ms

   262

        let previous_period = get_subscription_period(index);

   263

   264

        // subscribing with a zero period is unsubscribing

   265

        let new_period = 0;

   266

        if(widgets.size > 0) {

   267

            let maxfreq = 0;

   268

            for(let widget of widgets){

   269

                let wf = widget.frequency;

   270

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

   271

                    maxfreq = wf;

   272

            }

   273

   274

            if(maxfreq != 0)

   275

                new_period = 1000/maxfreq;

   276

        }

   277

   278

        if(previous_period != new_period) {

   279

            set_subscription_period(index, new_period);

   280

            if(index <= last_remote_index){

   281

                delta.push(

   282

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

   283

                    new Uint32Array([index]),

   284

                    new Uint16Array([new_period]));

   285

            }

   286

        }

   287

    }

   288

    send_blob(delta);

   289

};

   290

   291

function send_hmi_value(index, value) {

   292

    if(index > last_remote_index){

   293

        updates.set(index, value);

   294

   295

        if(persistent_indexes.has(index)){

   296

            let varname = persistent_indexes.get(index);

   297

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

   298

        }

   299

   300

        requestHMIAnimation();

   301

        return;

   302

    }

   303

   304

    let iectype = hmitree_types[index];

   305

    let tobinary = typedarray_types[iectype];

   306

    send_blob([

   307

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

   308

        new Uint32Array([index]),

   309

        tobinary(value)]);

   310

   311

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

   312

    // cache[index] = value;

   313

};

   314

   315

function apply_hmi_value(index, new_val) {

   316

    let old_val = cache[index];

   317

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

   318

        send_hmi_value(index, new_val);

   319

    return new_val;

   320

}

   321

   322

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

   323

   324

function eval_operation_string(old_val, opstr) {

   325

    let op = opstr[0];

   326

    let given_val;

   327

    if(opstr.length < 2) 

   328

        return undefined;

   329

    if(opstr[1] in quotes){

   330

        if(opstr.length < 3) 

   331

            return undefined;

   332

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

   333

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

   334

        }

   335

    } else {

   336

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

   337

    }

   338

    let new_val;

   339

    switch(op){

   340

      case "=":

   341

        new_val = given_val;

   342

        break;

   343

      case "+":

   344

        new_val = old_val + given_val;

   345

        break;

   346

      case "-":

   347

        new_val = old_val - given_val;

   348

        break;

   349

      case "*":

   350

        new_val = old_val * given_val;

   351

        break;

   352

      case "/":

   353

        new_val = old_val / given_val;

   354

        break;

   355

    }

   356

    return new_val;

   357

}

   358

   359

var current_visible_page;

   360

var current_subscribed_page;

   361

var current_page_index;

   362

   363

function prepare_svg() {

   364

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

   365

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

   366

        e.preventDefault();

   367

    });

   368

   369

    for(let eltid in detachable_elements){

   370

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

   371

        parent.removeChild(element);

   372

    }

   373

};

   374

   375

function switch_page(page_name, page_index) {

   376

    if(current_subscribed_page != current_visible_page){

   377

        /* page switch already going */

   378

        /* TODO LOG ERROR */

   379

        return false;

   380

    }

   381

   382

    if(page_name == undefined)

   383

        page_name = current_subscribed_page;

   384

   385

   386

    let old_desc = page_desc[current_subscribed_page];

   387

    let new_desc = page_desc[page_name];

   388

   389

    if(new_desc == undefined){

   390

        /* TODO LOG ERROR */

   391

        return false;

   392

    }

   393

   394

    if(page_index == undefined){

   395

        page_index = new_desc.page_index;

   396

    }

   397

   398

    if(old_desc){

   399

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

   400

    }

   401

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

   402

   403

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

   404

   405

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

   406

   407

    update_subscriptions();

   408

   409

    current_subscribed_page = page_name;

   410

    current_page_index = page_index;

   411

   412

    jumps_need_update = true;

   413

   414

    requestHMIAnimation();

   415

    jump_history.push([page_name, page_index]);

   416

    if(jump_history.length > 42)

   417

        jump_history.shift();

   418

   419

    return true;

   420

};

   421

   422

function switch_visible_page(page_name) {

   423

   424

    let old_desc = page_desc[current_visible_page];

   425

    let new_desc = page_desc[page_name];

   426

   427

    if(old_desc){

   428

        for(let eltid in old_desc.required_detachables){

   429

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

   430

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

   431

                parent.removeChild(element);

   432

            }

   433

        }

   434

        for(let eltid in new_desc.required_detachables){

   435

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

   436

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

   437

                parent.appendChild(element);

   438

            }

   439

        }

   440

    }else{

   441

        for(let eltid in new_desc.required_detachables){

   442

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

   443

            parent.appendChild(element);

   444

        }

   445

    }

   446

   447

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

   448

    current_visible_page = page_name;

   449

};

   450

   451

// Once connection established

   452

ws.onopen = function (evt) {

   453

    init_widgets();

   454

    send_reset();

   455

    // show main page

   456

    prepare_svg();

   457

    switch_page(default_page);

   458

};

   459

   460

ws.onclose = function (evt) {

   461

    // TODO : add visible notification while waiting for reload

   462

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

   463

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

   464

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

   465

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

   466

   467

};

   468

   469

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

   470

var edit_callback;

   471

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

   472

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

   473

    if(valuetype in localtypes){

   474

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

   475

    }

   476

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

   477

    edit_callback = callback;

   478

    let widget = hmi_widgets[keypadid];

   479

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

   480

};

   481

   482

var current_modal; /* TODO stack ?*/

   483

   484

function show_modal() {