1

// svghmi.js

     2

     3

function dispatch_value(index, value) {

     4

    let widgets = subscribers(index);

     5

     6

    let oldval = cache[index];

     7

    cache[index] = value;

     8

     9

    if(widgets.size > 0) {

    10

        for(let widget of widgets){

    11

            widget.new_hmi_value(index, value, oldval);

    12

        }

    13

    }

    14

};

    15

    16

function init_widgets() {

    17

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

    18

        let widget = hmi_widgets[id];

    19

        widget.do_init();

    20

    });

    21

};

    22

    23

// Open WebSocket to relative "/ws" address

    24

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

    25

    26

const dvgetters = {

    27

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

    28

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

    29

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

    30

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

    31

    STRING: (dv, offset) => {

    32

        const size = dv.getInt8(offset);

    33

        return [

    34

            String.fromCharCode.apply(null, new Uint8Array(

    35

                dv.buffer, /* original buffer */

    36

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

    37

                size /* size of string */

    38

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

    39

    }

    40

};

    41

    42

// Called on requestAnimationFrame, modifies DOM

    43

var requestAnimationFrameID = null;

    44

function animate() {

    45

    let rearm = true;

    46

    do{

    47

        if(page_fading == "pending" || page_fading == "forced"){

    48

            if(page_fading == "pending")

    49

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

    50

            page_fading = "in_progress";

    51

            if(page_fading_args.length)

    52

                setTimeout(function(){

    53

                    switch_page(...page_fading_args);

    54

                },1);

    55

            break;

    56

        }

    57

    58

        // Do the page swith if pending

    59

        if(page_switch_in_progress){

    60

            if(current_subscribed_page != current_visible_page){

    61

                switch_visible_page(current_subscribed_page);

    62

            }

    63

    64

            page_switch_in_progress = false;

    65

    66

            if(page_fading == "in_progress"){

    67

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

    68

                page_fading = "off";

    69

            }

    70

        }

    71

    72

        if(jumps_need_update) update_jumps();

    73

    74

    75

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

    76

        pending_widget_animates = [];

    77

        rearm = false;

    78

    } while(0);

    79

    80

    requestAnimationFrameID = null;

    81

    82

    if(rearm) requestHMIAnimation();

    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

function ws_onmessage(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

                dispatch_value(index, value);

   115

                i += bytesize;

   116

            } else {

   117

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

   118

            }

   119

        };

   120

   121

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

   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

hmi_hash_u8 = new Uint8Array(hmi_hash);

   135

   136

var ws = null;

   137

   138

function send_blob(data) {

   139

    if(ws && data.length > 0) {

   140

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

   141

    };

   142

};

   143

   144

const typedarray_types = {

   145

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

   146

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

   147

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

   148

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

   149

    STRING: (str) => {

   150

        // beremiz default string max size is 128

   151

        str = str.slice(0,128);

   152

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

   153

        binary[0] = str.length;

   154

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

   155

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

   156

        }

   157

        return binary;

   158

    }

   159

    /* TODO */

   160

};

   161

   162

function send_reset() {

   163

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

   164

};

   165

   166

var subscriptions = [];

   167

   168

function subscribers(index) {

   169

    let entry = subscriptions[index];

   170

    let res;

   171

    if(entry == undefined){

   172

        res = new Set();

   173

        subscriptions[index] = [res,0];

   174

    }else{

   175

        [res, _ign] = entry;

   176

    }

   177

    return res

   178

}

   179

   180

function get_subscription_period(index) {

   181

    let entry = subscriptions[index];

   182

    if(entry == undefined)

   183

        return 0;

   184

    let [_ign, period] = entry;

   185

    return period;

   186

}

   187

   188

function set_subscription_period(index, period) {

   189

    let entry = subscriptions[index];

   190

    if(entry == undefined){

   191

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

   192

    } else {

   193

        entry[1] = period;

   194

    }

   195

}

   196

   197

function reset_subscription_periods() {

   198

    for(let index in subscriptions)

   199

        subscriptions[index][1] = 0;

   200

}

   201

   202

if(has_watchdog){

   203

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

   204

    // Since dispatch directly calls change_hmi_value,

   205

    // PLC will periodically send variable at given frequency

   206

    subscribers(heartbeat_index).add({

   207

        /* type: "Watchdog", */

   208

        frequency: 1,

   209

        indexes: [heartbeat_index],

   210

        new_hmi_value: function(index, value, oldval) {

   211

            apply_hmi_value(heartbeat_index, value+1);

   212

        }

   213

    });

   214

}

   215

   216

   217

var page_fading = "off";

   218

var page_fading_args = "off";

   219

function fading_page_switch(...args){

   220

    if(page_fading == "in_progress")

   221

        page_fading = "forced";

   222

    else

   223

        page_fading = "pending";

   224

    page_fading_args = args;

   225

   226

    requestHMIAnimation();

   227

   228

}

   229

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

   230

   231

// subscribe to per instance current page hmi variable

   232

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

   233

subscribers(current_page_var_index).add({

   234

    frequency: 1,

   235

    indexes: [current_page_var_index],

   236

    new_hmi_value: function(index, value, oldval) {

   237

        if(value.startsWith("!"))

   238

            fading_page_switch(value.slice(1));

   239

    }

   240

});

   241

   242

function svg_text_to_multiline(elt) {

   243

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

   244

}

   245

   246

function multiline_to_svg_text(elt, str, blank) {

   247

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

   248

}

   249

   250

function switch_langnum(langnum) {

   251

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

   252

   253

    for (let translation of translations) {

   254

        let [objs, msgs] = translation;

   255

        let msg = msgs[langnum];

   256

        for (let obj of objs) {

   257

            multiline_to_svg_text(obj, msg);

   258

            obj.setAttribute("lang",langnum);

   259

        }

   260

    }

   261

    return langnum;

   262

}

   263

   264

// backup original texts

   265

for (let translation of translations) {

   266

    let [objs, msgs] = translation;

   267

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

   268

}

   269

   270

var lang_local_index = hmi_local_index("lang");

   271

var langcode_local_index = hmi_local_index("lang_code");

   272

var langname_local_index = hmi_local_index("lang_name");

   273

subscribers(lang_local_index).add({

   274

    indexes: [lang_local_index],

   275

    new_hmi_value: function(index, value, oldval) {

   276

        let current_lang =  switch_langnum(value);

   277

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

   278

        apply_hmi_value(langcode_local_index, langcode);

   279

        apply_hmi_value(langname_local_index, langname);

   280

        switch_page();

   281

    }

   282

});

   283

   284

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

   285

function get_current_lang_code(){

   286

    return cache[langcode_local_index];

   287

}

   288

   289

function setup_lang(){

   290

    let current_lang = cache[lang_local_index];

   291

    let new_lang = switch_langnum(current_lang);

   292

    if(current_lang != new_lang){

   293

        apply_hmi_value(lang_local_index, new_lang);

   294

    }

   295

}

   296

   297

setup_lang();

   298

   299

function update_subscriptions() {

   300

    let delta = [];

   301

    if(!ws)

   302

        // dont' change subscriptions if not connected

   303

        return;

   304

   305

    for(let index in subscriptions){

   306

        let widgets = subscribers(index);

   307

   308

        // periods are in ms

   309

        let previous_period = get_subscription_period(index);

   310

   311

        // subscribing with a zero period is unsubscribing

   312

        let new_period = 0;

   313

        if(widgets.size > 0) {

   314

            let maxfreq = 0;

   315

            for(let widget of widgets){

   316

                let wf = widget.frequency;

   317

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

   318

                    maxfreq = wf;

   319

            }

   320

   321

            if(maxfreq != 0)

   322

                new_period = 1000/maxfreq;

   323

        }

   324

   325

        if(previous_period != new_period) {

   326

            set_subscription_period(index, new_period);

   327

            if(index <= last_remote_index){

   328

                delta.push(

   329

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

   330

                    new Uint32Array([index]),

   331

                    new Uint16Array([new_period]));

   332

            }

   333

        }

   334

    }

   335

    send_blob(delta);

   336

};

   337

   338

function send_hmi_value(index, value) {

   339

    if(index > last_remote_index){

   340

        dispatch_value(index, value);

   341

   342

        if(persistent_indexes.has(index)){

   343

            let varname = persistent_indexes.get(index);

   344

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

   345

        }

   346

   347

        return;

   348

    }

   349

   350

    let iectype = hmitree_types[index];

   351

    let tobinary = typedarray_types[iectype];

   352

    send_blob([

   353

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

   354

        new Uint32Array([index]),

   355

        tobinary(value)]);

   356

   357

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

   358

    // cache[index] = value;

   359

};

   360

   361

function apply_hmi_value(index, new_val) {

   362

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

   363

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

   364

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

   365

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

   366

        send_hmi_value(index, new_val);

   367

    return new_val;

   368

}

   369

   370

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

   371

   372

function eval_operation_string(old_val, opstr) {

   373

    let op = opstr[0];

   374

    let given_val;

   375

    if(opstr.length < 2) 

   376

        return undefined;

   377

    if(opstr[1] in quotes){

   378

        if(opstr.length < 3) 

   379

            return undefined;

   380

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

   381

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

   382

        }

   383

    } else {

   384

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

   385

    }

   386

    let new_val;

   387

    switch(op){

   388

      case "=":

   389

        new_val = given_val;

   390

        break;

   391

      case "+":

   392

        new_val = old_val + given_val;

   393

        break;

   394

      case "-":

   395

        new_val = old_val - given_val;

   396

        break;

   397

      case "*":

   398

        new_val = old_val * given_val;

   399

        break;

   400

      case "/":

   401

        new_val = old_val / given_val;

   402

        break;

   403

    }

   404

    return new_val;

   405

}

   406

   407

var current_visible_page;

   408

var current_subscribed_page;

   409

var current_page_index;

   410

var page_node_local_index = hmi_local_index("page_node");

   411

var page_switch_in_progress = false;

   412

   413

function toggleFullscreen() {

   414

  let elem = document.documentElement;

   415

   416

  if (!document.fullscreenElement) {

   417

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

   418

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

   419

    });

   420

  } else {

   421

    document.exitFullscreen();

   422

  }

   423

}

   424

   425

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

   426

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

   427

    toggleFullscreen();

   428

    e.preventDefault();

   429

});

   430

   444

function detach_detachables() {

   445

   446

    for(let eltid in detachable_elements){

   447

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

   448

        parent.removeChild(element);

   449

    }

   450

};

   451

   452

function switch_page(page_name, page_index) {

   453

    if(page_switch_in_progress){

   454

        /* page switch already going */

   455

        /* TODO LOG ERROR */

   456

        return false;

   457

    }

   458

    page_switch_in_progress = true;

   459

   460

    if(page_name == undefined)

   461

        page_name = current_subscribed_page;

   462

    else if(page_index == undefined){

   463

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

   464

    }

   465

   466

    let old_desc = page_desc[current_subscribed_page];

   467

    let new_desc = page_desc[page_name];

   468

   469

    if(new_desc == undefined){

   470

        /* TODO LOG ERROR */

   471

        return false;

   472

    }

   473

   474

    if(page_index == undefined)

   475

        page_index = new_desc.page_index;

   476

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

   477

        let hmitree_node = hmitree_nodes[page_index];

   478

        if(hmitree_node !== undefined){

   479

            let [int_index, hmiclass] = hmitree_node;

   480

            if(hmiclass == new_desc.page_class)

   481

                page_index = int_index;

   482

            else

   483

                page_index = new_desc.page_index;

   484

        } else {

   485

            page_index = new_desc.page_index;