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

        widget.do_init();

    22

    });

    23

};

    24

    25

// Open WebSocket to relative "/ws" address

    26

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

    27

    28

var ws_url = 

    29

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

    30

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

    31

    32

var ws = new WebSocket(ws_url);

    33

ws.binaryType = 'arraybuffer';

    34

    35

const dvgetters = {

    36

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

    37

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

    38

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

    39

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

    40

    STRING: (dv, offset) => {

    41

        const size = dv.getInt8(offset);

    42

        return [

    43

            String.fromCharCode.apply(null, new Uint8Array(

    44

                dv.buffer, /* original buffer */

    45

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

    46

                size /* size of string */

    47

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

    48

    }

    49

};

    50

    51

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

    52

function apply_updates() {

    53

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

    54

        dispatch_value(index, value);

    55

    });

    56

    updates.clear();

    57

}

    58

    59

// Called on requestAnimationFrame, modifies DOM

    60

var requestAnimationFrameID = null;

    61

function animate() {

    62

    // Do the page swith if any one pending

    63

    if(current_subscribed_page != current_visible_page){

    64

        switch_visible_page(current_subscribed_page);

    65

    }

    66

    67

    while(widget = need_cache_apply.pop()){

    68

        widget.apply_cache();

    69

    }

    70

    71

    if(jumps_need_update) update_jumps();

    72

    73

    apply_updates();

    74

    75

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

    76

    pending_widget_animates = [];

    77

    78

    requestAnimationFrameID = null;

    79

}

    80

    81

function requestHMIAnimation() {

    82

    if(requestAnimationFrameID == null){

    83

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    84

    }

    85

}

    86

    87

// Message reception handler

    88

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

    89

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

    90

ws.onmessage = function (evt) {

    91

    92

    let data = evt.data;

    93

    let dv = new DataView(data);

    94

    let i = 0;

    95

    try {

    96

        for(let hash_int of hmi_hash) {

    97

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

    98

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

    99

            };

   100

            i++;

   101

        };

   102

   103

        while(i < data.byteLength){

   104

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

   105

            i += 4;

   106

            let iectype = hmitree_types[index];

   107

            if(iectype != undefined){

   108

                let dvgetter = dvgetters[iectype];

   109

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

   110

                updates.set(index, value);

   111

                i += bytesize;

   112

            } else {

   113

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

   114

            }

   115

        };

   116

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

   117

        requestHMIAnimation();

   118

    } catch(err) {

   119

        // 1003 is for "Unsupported Data"

   120

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

   121

   122

        // TODO : remove debug alert ?

   123

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

   124

   125

        // force reload ignoring cache

   126

        location.reload(true);

   127

    }

   128

};

   129

   130

hmi_hash_u8 = new Uint8Array(hmi_hash);

   131

   132

function send_blob(data) {

   133

    if(data.length > 0) {

   134

        ws.send(new Blob([hmi_hash_u8].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

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

   143

    STRING: (str) => {

   144

        // beremiz default string max size is 128

   145

        str = str.slice(0,128);

   146

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

   147

        binary[0] = str.length;

   148

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

   149

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

   150

        }

   151

        return binary;

   152

    }

   153

    /* TODO */

   154

};

   155

   156

function send_reset() {

   157

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

   158

};

   159

   160

var subscriptions = [];

   161

   162

function subscribers(index) {

   163

    let entry = subscriptions[index];

   164

    let res;

   165

    if(entry == undefined){

   166

        res = new Set();

   167

        subscriptions[index] = [res,0];

   168

    }else{

   169

        [res, _ign] = entry;

   170

    }

   171

    return res

   172

}

   173

   174

function get_subscription_period(index) {

   175

    let entry = subscriptions[index];

   176

    if(entry == undefined)

   177

        return 0;

   178

    let [_ign, period] = entry;

   179

    return period;

   180

}

   181

   182

function set_subscription_period(index, period) {

   183

    let entry = subscriptions[index];

   184

    if(entry == undefined){

   185

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

   186

    } else {

   187

        entry[1] = period;

   188

    }

   189

}

   190

   191

if(has_watchdog){

   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

   205

   206

var page_fading_in_progress = false;

   207

function fading_page_switch(...args){

   208

    svg_root.classList.add("fade-out-page");

   209

    page_fading_in_progress = true;

   210

   211

    setTimeout(function(){

   212

        switch_page(...args);

   213

    },1);

   214

}

   215

document.body.style.backgroundColor = "black";

   216

   217

// subscribe to per instance current page hmi variable

   218

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

   219

subscribers(current_page_var_index).add({

   220

    frequency: 1,

   221

    indexes: [current_page_var_index],

   222

    new_hmi_value: function(index, value, oldval) {

   223

        if(value.startsWith("!"))

   224

            fading_page_switch(value.slice(1));

   225

    }

   226

});

   227

   228

function svg_text_to_multiline(elt) {

   229

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

   230

}

   231

   232

function multiline_to_svg_text(elt, str) {

   233

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

   234

}

   235

   236

function switch_langnum(langnum) {

   237

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

   238

   239

    for (let translation of translations) {

   240

        let [objs, msgs] = translation;

   241

        let msg = msgs[langnum];

   242

        for (let obj of objs) {

   243

            multiline_to_svg_text(obj, msg);

   244

            obj.setAttribute("lang",langnum);

   245

        }

   246

    }

   247

    return langnum;

   248

}

   249

   250

// backup original texts

   251

for (let translation of translations) {

   252

    let [objs, msgs] = translation;

   253

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

   254

}

   255

   256

var lang_local_index = hmi_local_index("lang");

   257

var langcode_local_index = hmi_local_index("lang_code");

   258

var langname_local_index = hmi_local_index("lang_name");

   259

subscribers(lang_local_index).add({

   260

    indexes: [lang_local_index],

   261

    new_hmi_value: function(index, value, oldval) {

   262

        let current_lang =  switch_langnum(value);

   263

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

   264

        apply_hmi_value(langcode_local_index, langcode);

   265

        apply_hmi_value(langname_local_index, langname);

   266

        switch_page();

   267

    }

   268

});

   269

   270

// returns en_US, fr_FR or en_UK depending on selected language

   271

function get_current_lang_code(){

   272

    return cache[langcode_local_index];

   273

}

   274

   275

function setup_lang(){

   276

    let current_lang = cache[lang_local_index];

   277

    let new_lang = switch_langnum(current_lang);

   278

    if(current_lang != new_lang){

   279

        apply_hmi_value(lang_local_index, new_lang);

   280

    }

   281

}

   282

   283

setup_lang();

   284

   285

function update_subscriptions() {

   286

    let delta = [];

   287

    for(let index in subscriptions){

   288

        let widgets = subscribers(index);

   289

   290

        // periods are in ms

   291

        let previous_period = get_subscription_period(index);

   292

   293

        // subscribing with a zero period is unsubscribing

   294

        let new_period = 0;

   295

        if(widgets.size > 0) {

   296

            let maxfreq = 0;

   297

            for(let widget of widgets){

   298

                let wf = widget.frequency;

   299

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

   300

                    maxfreq = wf;

   301

            }

   302

   303

            if(maxfreq != 0)

   304

                new_period = 1000/maxfreq;

   305

        }

   306

   307

        if(previous_period != new_period) {

   308

            set_subscription_period(index, new_period);

   309

            if(index <= last_remote_index){

   310

                delta.push(

   311

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

   312

                    new Uint32Array([index]),

   313

                    new Uint16Array([new_period]));

   314

            }

   315

        }

   316

    }

   317

    send_blob(delta);

   318

};

   319

   320

function send_hmi_value(index, value) {

   321

    if(index > last_remote_index){

   322

        updates.set(index, value);

   323

   324

        if(persistent_indexes.has(index)){

   325

            let varname = persistent_indexes.get(index);

   326

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

   327

        }

   328

   329

        requestHMIAnimation();

   330

        return;

   331

    }

   332

   333

    let iectype = hmitree_types[index];

   334

    let tobinary = typedarray_types[iectype];

   335

    send_blob([

   336

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

   337

        new Uint32Array([index]),

   338

        tobinary(value)]);

   339

   340

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

   341

    // cache[index] = value;

   342

};

   343

   344

function apply_hmi_value(index, new_val) {

   345

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

   346

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

   347

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

   348

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

   349

        send_hmi_value(index, new_val);

   350

    return new_val;

   351

}

   352

   353

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

   354

   355

function eval_operation_string(old_val, opstr) {

   356

    let op = opstr[0];

   357

    let given_val;

   358

    if(opstr.length < 2) 

   359

        return undefined;

   360

    if(opstr[1] in quotes){

   361

        if(opstr.length < 3) 

   362

            return undefined;

   363

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

   364

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

   365

        }

   366

    } else {

   367

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

   368

    }

   369

    let new_val;

   370

    switch(op){

   371

      case "=":

   372

        new_val = given_val;

   373

        break;

   374

      case "+":

   375

        new_val = old_val + given_val;

   376

        break;

   377

      case "-":

   378

        new_val = old_val - given_val;

   379

        break;

   380

      case "*":

   381

        new_val = old_val * given_val;

   382

        break;

   383

      case "/":

   384

        new_val = old_val / given_val;

   385

        break;

   386

    }

   387

    return new_val;

   388

}

   389

   390

var current_visible_page;

   391

var current_subscribed_page;

   392

var current_page_index;

   393

var page_node_local_index = hmi_local_index("page_node");

   394

   395

function toggleFullscreen() {

   396

  let elem = document.documentElement;

   397

   398

  if (!document.fullscreenElement) {

   399

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

   400

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

   401

    });

   402

  } else {

   403

    document.exitFullscreen();

   404

  }

   405

}

   406

   407

function prepare_svg() {

   408

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

   409

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

   410

        toggleFullscreen();

   411

        e.preventDefault();

   412

    });

   413

   414

    for(let eltid in detachable_elements){

   415

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

   416

        parent.removeChild(element);

   417

    }

   418

};

   419

   420

function switch_page(page_name, page_index) {

   421

    if(current_subscribed_page != current_visible_page){

   422

        /* page switch already going */

   423

        /* TODO LOG ERROR */

   424

        return false;

   425

    }

   426

   427

    if(page_name == undefined)

   428

        page_name = current_subscribed_page;

   429

    else if(page_index == undefined){

   430

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

   431

    }

   432

   433

    let old_desc = page_desc[current_subscribed_page];

   434

    let new_desc = page_desc[page_name];

   435

   436

    if(new_desc == undefined){

   437

        /* TODO LOG ERROR */

   438

        return false;

   439

    }

   440

   441

    if(page_index == undefined)

   442

        page_index = new_desc.page_index;

   443

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

   444

        let hmitree_node = hmitree_nodes[page_index];

   445

        if(hmitree_node !== undefined){

   446

            let [int_index, hmiclass] = hmitree_node;

   447

            if(hmiclass == new_desc.page_class)

   448

                page_index = int_index;

   449

            else

   450

                page_index = new_desc.page_index;

   451

        } else {

   452

            page_index = new_desc.page_index;

   453

        }

   454

    }

   455

   456

    if(old_desc){

   457

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

   458

    }

   459

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

   460

   461

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

   462

   463

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

   464

   465

    update_subscriptions();

   466

   467

    current_subscribed_page = page_name;

   468

    current_page_index = page_index;

   469

    let page_node;

   470

    if(page_index != undefined){

   471

        page_node = hmitree_paths[page_index];

   472

    }else{

   473

        page_node = "";

   474

    }

   475

    apply_hmi_value(page_node_local_index, page_node);

   476

   477

    jumps_need_update = true;

   478

   479

    requestHMIAnimation();

   480

    jump_history.push([page_name, page_index]);

   481

    if(jump_history.length > 42)

   482

        jump_history.shift();

   483

   484

    apply_hmi_value(current_page_var_index, page_index == undefined