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

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

    28

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

    29

    DINT:  (dv,offset) => [dv.getInt32(offset, true), 4],

    30

    LINT:  (dv,offset) => [dv.getBigInt64(offset, true), 8],

    31

    USINT: (dv,offset) => [dv.getUint8(offset, true), 1],

    32

    UINT:  (dv,offset) => [dv.getUint16(offset, true), 2],

    33

    UDINT: (dv,offset) => [dv.getUint32(offset, true), 4],

    34

    ULINT: (dv,offset) => [dv.getBigUint64(offset, true), 8],

    35

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

    36

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

    37

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

    38

    STRING: (dv, offset) => {

    39

        const size = dv.getInt8(offset);

    40

        return [

    41

            String.fromCharCode.apply(null, new Uint8Array(

    42

                dv.buffer, /* original buffer */

    43

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

    44

                size /* size of string */

    45

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

    46

    }

    47

};

    48

    49

// Called on requestAnimationFrame, modifies DOM

    50

var requestAnimationFrameID = null;

    51

function animate() {

    52

    let rearm = true;

    53

    do{

    54

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

    55

            if(page_fading == "pending")

    56

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

    57

            page_fading = "in_progress";

    58

            if(page_fading_args.length)

    59

                setTimeout(function(){

    60

                    switch_page(...page_fading_args);

    61

                },1);

    62

            break;

    63

        }

    64

    65

        // Do the page swith if pending

    66

        if(page_switch_in_progress){

    67

            if(current_subscribed_page != current_visible_page){

    68

                switch_visible_page(current_subscribed_page);

    69

            }

    70

    71

            page_switch_in_progress = false;

    72

    73

            if(page_fading == "in_progress"){

    74

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

    75

                page_fading = "off";

    76

            }

    77

        }

    78

    79

        if(jumps_need_update) update_jumps();

    80

    81

    82

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

    83

        pending_widget_animates = [];

    84

        rearm = false;

    85

    } while(0);

    86

    87

    requestAnimationFrameID = null;

    88

    89

    if(rearm) requestHMIAnimation();

    90

}

    91

    92

function requestHMIAnimation() {

    93

    if(requestAnimationFrameID == null){

    94

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    95

    }

    96

}

    97

    98

// Message reception handler

    99

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

   100

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

   101

function ws_onmessage(evt) {

   102

   103

    let data = evt.data;

   104

    let dv = new DataView(data);

   105

    let i = 0;

   106

    try {

   107

        for(let hash_int of hmi_hash) {

   108

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

   109

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

   110

            };

   111

            i++;

   112

        };

   113

   114

        while(i < data.byteLength){

   115

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

   116

            i += 4;

   117

            let iectype = hmitree_types[index];

   118

            if(iectype != undefined){

   119

                let dvgetter = dvgetters[iectype];

   120

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

   121

                dispatch_value(index, value);

   122

                i += bytesize;

   123

            } else {

   124

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

   125

            }

   126

        };

   127

   128

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

   129

    } catch(err) {

   130

        // 1003 is for "Unsupported Data"

   131

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

   132

   133

        // TODO : remove debug alert ?

   134

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

   135

   136

        // force reload ignoring cache

   137

        location.reload(true);

   138

    }

   139

};

   140

   141

hmi_hash_u8 = new Uint8Array(hmi_hash);

   142

   143

var ws = null;

   144

   145

function send_blob(data) {

   146

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

   147

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

   148

    };

   149

};

   150

   151

const typedarray_types = {

   152

    SINT: (number) => new Int8Array([number]),

   153

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

   154

    DINT: (number) => new Int32Array([number]),

   155

    LINT: (number) => new Int64Array([number]),

   156

    USINT: (number) => new Uint8Array([number]),

   157

    UINT: (number) => new Uint16Array([number]),

   158

    UDINT: (number) => new Uint32Array([number]),

   159

    ULINT: (number) => new Uint64Array([number]),

   160

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

   161

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

   162

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

   163

    STRING: (str) => {

   164

        // beremiz default string max size is 128

   165

        str = str.slice(0,128);

   166

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

   167

        binary[0] = str.length;

   168

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

   169

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

   170

        }

   171

        return binary;

   172

    }

   173

    /* TODO */

   174

};

   175

   176

function send_reset() {

   177

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

   178

};

   179

   180

var subscriptions = [];

   181

   182

function subscribers(index) {

   183

    let entry = subscriptions[index];

   184

    let res;

   185

    if(entry == undefined){

   186

        res = new Set();

   187

        subscriptions[index] = [res,0];

   188

    }else{

   189

        [res, _ign] = entry;

   190

    }

   191

    return res

   192

}

   193

   194

function get_subscription_period(index) {

   195

    let entry = subscriptions[index];

   196

    if(entry == undefined)

   197

        return 0;

   198

    let [_ign, period] = entry;

   199

    return period;

   200

}

   201

   202

function set_subscription_period(index, period) {

   203

    let entry = subscriptions[index];

   204

    if(entry == undefined){

   205

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

   206

    } else {

   207

        entry[1] = period;

   208

    }

   209

}

   210

   211

function reset_subscription_periods() {

   212

    for(let index in subscriptions)

   213

        subscriptions[index][1] = 0;

   214

}

   215

   216

if(has_watchdog){

   217

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

   218

    // Since dispatch directly calls change_hmi_value,

   219

    // PLC will periodically send variable at given frequency

   220

    subscribers(heartbeat_index).add({

   221

        /* type: "Watchdog", */

   222

        frequency: 1,

   223

        indexes: [heartbeat_index],

   224

        new_hmi_value: function(index, value, oldval) {

   225

            apply_hmi_value(heartbeat_index, value+1);

   226

        }

   227

    });

   228

}

   229

   230

   231

var page_fading = "off";

   232

var page_fading_args = "off";

   233

function fading_page_switch(...args){

   234

    if(page_fading == "in_progress")

   235

        page_fading = "forced";

   236

    else

   237

        page_fading = "pending";

   238

    page_fading_args = args;

   239

   240

    requestHMIAnimation();

   241

   242

}

   243

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

   244

   245

// subscribe to per instance current page hmi variable

   246

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

   247

subscribers(current_page_var_index).add({

   248

    frequency: 1,

   249

    indexes: [current_page_var_index],

   250

    new_hmi_value: function(index, value, oldval) {

   251

        if(value.startsWith("!"))

   252

            fading_page_switch(value.slice(1));

   253

    }

   254

});

   255

   256

function svg_text_to_multiline(elt) {

   257

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

   258

}

   259

   260

function multiline_to_svg_text(elt, str, blank) {

   261

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

   262

}

   263

   264

function switch_langnum(langnum) {

   265

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

   266

   267

    for (let translation of translations) {

   268

        let [objs, msgs] = translation;

   269

        let msg = msgs[langnum];

   270

        for (let obj of objs) {

   271

            multiline_to_svg_text(obj, msg);

   272

            obj.setAttribute("lang",langnum);

   273

        }

   274

    }

   275

    return langnum;

   276

}

   277

   278

// backup original texts

   279

for (let translation of translations) {

   280

    let [objs, msgs] = translation;

   281

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

   282

}

   283

   284

var lang_local_index = hmi_local_index("lang");

   285

var langcode_local_index = hmi_local_index("lang_code");

   286

var langname_local_index = hmi_local_index("lang_name");

   287

subscribers(lang_local_index).add({

   288

    indexes: [lang_local_index],

   289

    new_hmi_value: function(index, value, oldval) {

   290

        let current_lang =  switch_langnum(value);

   291

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

   292

        apply_hmi_value(langcode_local_index, langcode);

   293

        apply_hmi_value(langname_local_index, langname);

   294

        switch_page();

   295

    }

   296

});

   297

   298

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

   299

function get_current_lang_code(){

   300

    return cache[langcode_local_index];

   301

}

   302

   303

function setup_lang(){

   304

    let current_lang = cache[lang_local_index];

   305

    let new_lang = switch_langnum(current_lang);

   306

    if(current_lang != new_lang){

   307

        apply_hmi_value(lang_local_index, new_lang);

   308

    }

   309

}

   310

   311

setup_lang();

   312

   313

function update_subscriptions() {

   314

    let delta = [];

   315

    if(!ws)

   316

        // dont' change subscriptions if not connected

   317

        return;

   318

   319

    for(let index in subscriptions){

   320

        let widgets = subscribers(index);

   321

   322

        // periods are in ms

   323

        let previous_period = get_subscription_period(index);

   324

   325

        // subscribing with a zero period is unsubscribing

   326

        let new_period = 0;

   327

        if(widgets.size > 0) {

   328

            let maxfreq = 0;

   329

            for(let widget of widgets){

   330

                let wf = widget.frequency;

   331

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

   332

                    maxfreq = wf;

   333

            }

   334

   335

            if(maxfreq != 0)

   336

                new_period = 1000/maxfreq;

   337

        }

   338

   339

        if(previous_period != new_period) {

   340

            set_subscription_period(index, new_period);

   341

            if(index <= last_remote_index){

   342

                delta.push(

   343

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

   344

                    new Uint32Array([index]),

   345

                    new Uint16Array([new_period]));

   346

            }

   347

        }

   348

    }

   349

    send_blob(delta);

   350

};

   351

   352

function send_hmi_value(index, value) {

   353

    if(index > last_remote_index){

   354

        dispatch_value(index, value);

   355

   356

        if(persistent_indexes.has(index)){

   357

            let varname = persistent_indexes.get(index);

   358

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

   359

        }

   360

   361

        return;

   362

    }

   363

   364

    let iectype = hmitree_types[index];

   365

    let tobinary = typedarray_types[iectype];

   366

    send_blob([

   367

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

   368

        new Uint32Array([index]),

   369

        tobinary(value)]);

   370

   371

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

   372

    // cache[index] = value;

   373

};

   374

   375

function apply_hmi_value(index, new_val) {

   376

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

   377

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

   378

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

   379

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

   380

        send_hmi_value(index, new_val);

   381

    return new_val;

   382

}

   383

   384

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

   385

   386

function eval_operation_string(old_val, opstr) {

   387

    let op = opstr[0];

   388

    let given_val;

   389

    if(opstr.length < 2) 

   390

        return undefined;

   391

    if(opstr[1] in quotes){

   392

        if(opstr.length < 3) 

   393

            return undefined;

   394

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

   395

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

   396

        }

   397

    } else {

   398

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

   399

    }

   400

    let new_val;

   401

    switch(op){

   402

      case "=":

   403

        new_val = given_val;

   404

        break;

   405

      case "+":

   406

        new_val = old_val + given_val;

   407

        break;

   408

      case "-":

   409

        new_val = old_val - given_val;

   410

        break;

   411

      case "*":

   412

        new_val = old_val * given_val;

   413

        break;

   414

      case "/":

   415

        new_val = old_val / given_val;

   416

        break;

   417

    }

   418

    return new_val;

   419

}

   420

   421

var current_visible_page;

   422

var current_subscribed_page;

   423

var current_page_index;

   424

var page_node_local_index = hmi_local_index("page_node");

   425

var page_switch_in_progress = false;

   426

   427

function toggleFullscreen() {

   428

  let elem = document.documentElement;

   429

   430

  if (!document.fullscreenElement) {

   431

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

   432

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

   433

    });

   434

  } else {

   435

    document.exitFullscreen();

   436

  }

   437

}

   438

   439

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

   440

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

   441

    toggleFullscreen();

   442

    e.preventDefault();

   443

});

   444

   445

if(screensaver_delay){

   446

    var screensaver_timer = null;

   447

    function reset_screensaver_timer() {

   448

        if(screensaver_timer){

   449

            window.clearTimeout(screensaver_timer);

   450

        }

   451

        screensaver_timer = window.setTimeout(() => {

   452

            switch_page("ScreenSaver");

   453

            screensaver_timer = null;

   454

        }, screensaver_delay*1000);

   455

    }

   456

    document.body.addEventListener('pointerdown', reset_screensaver_timer);

   457

    // initialize screensaver

   458

    reset_screensaver_timer();

   459

}

   460

   461

   462

function detach_detachables() {

   463

   464

    for(let eltid in detachable_elements){

   465

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

   466

        parent.removeChild(element);

   467

    }

   468

};

   469

   470

function switch_page(page_name, page_index) {

   471

    if(page_switch_in_progress){

   472

        /* page switch already going */

   473

        /* TODO LOG ERROR */

   474

        return false;

   475

    }

   476

    page_switch_in_progress = true;

   477

   478

    if(page_name == undefined)

   479

        page_name = current_subscribed_page;

   480

    else if(page_index == undefined){

   481

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

   482

    }

   483

   484

    let old_desc = page_desc[current_subscribed_page];

   485

    let new_desc = page_desc[page_name];