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

        if(widget.forced_frequency !== undefined)

    30

            widget.frequency = widget.forced_frequency;

    31

    });

    32

};

    33

    34

// Open WebSocket to relative "/ws" address

    35

var has_watchdog = window.location.hash == "#watchdog";

    36

    37

var ws_url = 

    38

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

    39

    + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");

    40

    41

var ws = new WebSocket(ws_url);

    42

ws.binaryType = 'arraybuffer';

    43

    44

const dvgetters = {

    45

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

    46

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

    47

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

    48

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

    49

    STRING: (dv, offset) => {

    50

        const size = dv.getInt8(offset);

    51

        return [

    52

            String.fromCharCode.apply(null, new Uint8Array(

    53

                dv.buffer, /* original buffer */

    54

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

    55

                size /* size of string */

    56

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

    57

    }

    58

};

    59

    60

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

    61

function apply_updates() {

    62

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

    63

        dispatch_value(index, value);

    64

    });

    65

    updates.clear();

    66

}

    67

    68

// Called on requestAnimationFrame, modifies DOM

    69

var requestAnimationFrameID = null;

    70

function animate() {

    71

    // Do the page swith if any one pending

    72

    if(current_subscribed_page != current_visible_page){

    73

        switch_visible_page(current_subscribed_page);

    74

    }

    75

    76

    while(widget = need_cache_apply.pop()){

    77

        widget.apply_cache();

    78

    }

    79

    80

    if(jumps_need_update) update_jumps();

    81

    82

    apply_updates();

    83

    84

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

    85

    pending_widget_animates = [];

    86

    87

    requestAnimationFrameID = null;

    88

}

    89

    90

function requestHMIAnimation() {

    91

    if(requestAnimationFrameID == null){

    92

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    93

    }

    94

}

    95

    96

// Message reception handler

    97

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

    98

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

    99

ws.onmessage = function (evt) {

   100

   101

    let data = evt.data;

   102

    let dv = new DataView(data);

   103

    let i = 0;

   104

    try {

   105

        for(let hash_int of hmi_hash) {

   106

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

   107

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

   108

            };

   109

            i++;

   110

        };

   111

   112

        while(i < data.byteLength){

   113

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

   114

            i += 4;

   115

            let iectype = hmitree_types[index];

   116

            if(iectype != undefined){

   117

                let dvgetter = dvgetters[iectype];

   118

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

   119

                updates.set(index, value);

   120

                i += bytesize;

   121

            } else {

   122

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

   123

            }

   124

        };

   125

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

   126

        requestHMIAnimation();

   127

    } catch(err) {

   128

        // 1003 is for "Unsupported Data"

   129

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

   130

   131

        // TODO : remove debug alert ?

   132

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

   133

   134

        // force reload ignoring cache

   135

        location.reload(true);

   136

    }

   137

};

   138

   139

hmi_hash_u8 = new Uint8Array(hmi_hash);

   140

   141

function send_blob(data) {

   142

    if(data.length > 0) {

   143

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

   144

    };

   145

};

   146

   147

const typedarray_types = {

   148

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

   149

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

   150

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

   151

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

   152

    STRING: (str) => {

   153

        // beremiz default string max size is 128

   154

        str = str.slice(0,128);

   155

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

   156

        binary[0] = str.length;

   157

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

   158

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

   159

        }

   160

        return binary;

   161

    }

   162

    /* TODO */

   163

};

   164

   165

function send_reset() {

   166

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

   167

};

   168

   169

var subscriptions = [];

   170

   171

function subscribers(index) {

   172

    let entry = subscriptions[index];

   173

    let res;

   174

    if(entry == undefined){

   175

        res = new Set();

   176

        subscriptions[index] = [res,0];

   177

    }else{

   178

        [res, _ign] = entry;

   179

    }

   180

    return res

   181

}

   182

   183

function get_subscription_period(index) {

   184

    let entry = subscriptions[index];

   185

    if(entry == undefined)

   186

        return 0;

   187

    let [_ign, period] = entry;

   188

    return period;

   189

}

   190

   191

function set_subscription_period(index, period) {

   192

    let entry = subscriptions[index];

   193

    if(entry == undefined){

   194

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

   195

    } else {

   196

        entry[1] = period;

   197

    }

   198

}

   199

   200

if(has_watchdog){

   201

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

   202

    // Since dispatch directly calls change_hmi_value,

   203

    // PLC will periodically send variable at given frequency

   204

    subscribers(heartbeat_index).add({

   205

        /* type: "Watchdog", */

   206

        frequency: 1,

   207

        indexes: [heartbeat_index],

   208

        new_hmi_value: function(index, value, oldval) {

   209

            apply_hmi_value(heartbeat_index, value+1);

   210

        }

   211

    });

   212

}

   213

   214

// subscribe to per instance current page hmi variable

   215

// PLC must prefix page name with "!" for page switch to happen

   216

subscribers(current_page_var_index).add({

   217

    frequency: 1,

   218

    indexes: [current_page_var_index],

   219

    new_hmi_value: function(index, value, oldval) {

   220

        if(value.startsWith("!"))

   221

            switch_page(value.slice(1));

   222

    }

   223

});

   224

   225

function svg_text_to_multiline(elt) {

   226

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

   227

}

   228

   229

function multiline_to_svg_text(elt, str) {

   230

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

   231

}

   232

   233

function switch_langnum(langnum) {

   234

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

   235

   236

    for (let translation of translations) {

   237

        let [objs, msgs] = translation;

   238

        let msg = msgs[langnum];

   239

        for (let obj of objs) {

   240

            multiline_to_svg_text(obj, msg);

   241

            obj.setAttribute("lang",langnum);

   242

        }

   243

    }

   244

    return langnum;

   245

}

   246

   247

// backup original texts

   248

for (let translation of translations) {

   249

    let [objs, msgs] = translation;

   250

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

   251

}

   252

   253

var lang_local_index = hmi_local_index("lang");

   254

var langcode_local_index = hmi_local_index("lang_code");

   255

var langname_local_index = hmi_local_index("lang_name");

   256

subscribers(lang_local_index).add({

   257

    indexes: [lang_local_index],

   258

    new_hmi_value: function(index, value, oldval) {

   259

        let current_lang =  switch_langnum(value);

   260

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

   261

        apply_hmi_value(langcode_local_index, langcode);

   262

        apply_hmi_value(langname_local_index, langname);

   263

        switch_page();

   264

    }

   265

});

   266

   267

function setup_lang(){

   268

    let current_lang = cache[lang_local_index];

   269

    let new_lang = switch_langnum(current_lang);

   270

    if(current_lang != new_lang){

   271

        apply_hmi_value(lang_local_index, new_lang);

   272

    }

   273

}

   274

   275

setup_lang();

   276

   277

function update_subscriptions() {

   278

    let delta = [];

   279

    for(let index in subscriptions){

   280

        let widgets = subscribers(index);

   281

   282

        // periods are in ms

   283

        let previous_period = get_subscription_period(index);

   284

   285

        // subscribing with a zero period is unsubscribing

   286

        let new_period = 0;

   287

        if(widgets.size > 0) {

   288

            let maxfreq = 0;

   289

            for(let widget of widgets){

   290

                let wf = widget.frequency;

   291

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

   292

                    maxfreq = wf;

   293

            }

   294

   295

            if(maxfreq != 0)

   296

                new_period = 1000/maxfreq;

   297

        }

   298

   299

        if(previous_period != new_period) {

   300

            set_subscription_period(index, new_period);

   301

            if(index <= last_remote_index){

   302

                delta.push(

   303

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

   304

                    new Uint32Array([index]),

   305

                    new Uint16Array([new_period]));

   306

            }

   307

        }

   308

    }

   309

    send_blob(delta);

   310

};

   311

   312

function send_hmi_value(index, value) {

   313

    if(index > last_remote_index){

   314

        updates.set(index, value);

   315

   316

        if(persistent_indexes.has(index)){

   317

            let varname = persistent_indexes.get(index);

   318

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

   319

        }

   320

   321

        requestHMIAnimation();

   322

        return;

   323

    }

   324

   325

    let iectype = hmitree_types[index];

   326

    let tobinary = typedarray_types[iectype];

   327

    send_blob([

   328

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

   329

        new Uint32Array([index]),

   330

        tobinary(value)]);

   331

   332

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

   333

    // cache[index] = value;

   334

};

   335

   336

function apply_hmi_value(index, new_val) {

   337

    // Similarly to previous comment, taking decision to update based 

   338

    // on cache content is bad and can lead to inconsistency

   339

    /*let old_val = cache[index];*/

   340

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

   341

        send_hmi_value(index, new_val);

   342

    return new_val;

   343

}

   344

   345

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

   346

   347

function eval_operation_string(old_val, opstr) {

   348

    let op = opstr[0];

   349

    let given_val;

   350

    if(opstr.length < 2) 

   351

        return undefined;

   352

    if(opstr[1] in quotes){

   353

        if(opstr.length < 3) 

   354

            return undefined;

   355

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

   356

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

   357

        }

   358

    } else {

   359

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

   360

    }

   361

    let new_val;

   362

    switch(op){

   363

      case "=":

   364

        new_val = given_val;

   365

        break;

   366

      case "+":

   367

        new_val = old_val + given_val;

   368

        break;

   369

      case "-":

   370

        new_val = old_val - given_val;

   371

        break;

   372

      case "*":

   373

        new_val = old_val * given_val;

   374

        break;

   375

      case "/":

   376

        new_val = old_val / given_val;

   377

        break;

   378

    }

   379

    return new_val;

   380

}

   381

   382

var current_visible_page;

   383

var current_subscribed_page;

   384

var current_page_index;

   385

var page_node_local_index = hmi_local_index("page_node");

   386

   387

function toggleFullscreen() {

   388

  let elem = document.documentElement;

   389

   390

  if (!document.fullscreenElement) {

   391

    elem.requestFullscreen().catch(err => {

   392

      console.log("Error attempting to enable full-screen mode: "+err.message+" ("+err.name+")");

   393

    });

   394

  } else {

   395

    document.exitFullscreen();

   396

  }

   397

}

   398

   399

function prepare_svg() {

   400

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

   401

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

   402

        toggleFullscreen();

   403

        e.preventDefault();

   404

    });

   405

   406

    for(let eltid in detachable_elements){

   407

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

   408

        parent.removeChild(element);

   409

    }

   410

};

   411

   412

function switch_page(page_name, page_index) {

   413

    if(current_subscribed_page != current_visible_page){

   414

        /* page switch already going */

   415

        /* TODO LOG ERROR */

   416

        return false;

   417

    }

   418

   419

    if(page_name == undefined)

   420

        page_name = current_subscribed_page;

   421

    else if(page_index == undefined){

   422

        [page_name, page_index] = page_name.split('@')

   423

    }

   424

   425

    let old_desc = page_desc[current_subscribed_page];

   426

    let new_desc = page_desc[page_name];

   427

   428

    if(new_desc == undefined){

   429

        /* TODO LOG ERROR */

   430

        return false;

   431

    }

   432

   433

    if(page_index == undefined)

   434

        page_index = new_desc.page_index;

   435

    else if(typeof(page_index) == "string") {

   436

        let hmitree_node = hmitree_nodes[page_index];

   437

        if(hmitree_node !== undefined){

   438

            let [int_index, hmiclass] = hmitree_node;

   439

            if(hmiclass == new_desc.page_class)

   440

                page_index = int_index;

   441

            else

   442

                page_index = new_desc.page_index;

   443

        } else {

   444

            page_index = new_desc.page_index;

   445

        }

   446

    }

   447

   448

    if(old_desc){

   449

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

   450

    }

   451

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

   452

   453

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

   454

   455

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

   456

   457

    update_subscriptions();

   458

   459

    current_subscribed_page = page_name;

   460

    current_page_index = page_index;

   461

    let page_node;

   462

    if(page_index != undefined){

   463

        page_node = hmitree_paths[page_index];

   464

    }else{

   465

        page_node = "";

   466

    }

   467

    apply_hmi_value(page_node_local_index, page_node);

   468

   469

    jumps_need_update = true;

   470

   471

    requestHMIAnimation();

   472

    jump_history.push([page_name, page_index]);

   473

    if(jump_history.length > 42)

   474

        jump_history.shift();

   475

   476

    apply_hmi_value(current_page_var_index, page_index == undefined

   477

        ? page_name

   478

        : page_name + "@" + hmitree_paths[page_index]);

   479

   480

    return true;

   481

};

   482

   483

function switch_visible_page(page_name) {

   484