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

    34

var ws_url = 

    35

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

    36

    + '?mode=' + (window.location.hash == "#watchdog" 

    37

                  ? "watchdog"

    38

                  : "multiclient");

    39

var ws = new WebSocket(ws_url);

    40

ws.binaryType = 'arraybuffer';

    41

    42

const dvgetters = {

    43

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

    44

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

    45

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

    46

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

    47

    STRING: (dv, offset) => {

    48

        const size = dv.getInt8(offset);

    49

        return [

    50

            String.fromCharCode.apply(null, new Uint8Array(

    51

                dv.buffer, /* original buffer */

    52

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

    53

                size /* size of string */

    54

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

    55

    }

    56

};

    57

    58

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

    59

function apply_updates() {

    60

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

    61

        dispatch_value(index, value);

    62

    });

    63

    updates.clear();

    64

}

    65

    66

// Called on requestAnimationFrame, modifies DOM

    67

var requestAnimationFrameID = null;

    68

function animate() {

    69

    // Do the page swith if any one pending

    70

    if(current_subscribed_page != current_visible_page){

    71

        switch_visible_page(current_subscribed_page);

    72

    }

    73

    74

    while(widget = need_cache_apply.pop()){

    75

        widget.apply_cache();

    76

    }

    77

    78

    if(jumps_need_update) update_jumps();

    79

    80

    apply_updates();

    81

    82

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

    83

    pending_widget_animates = [];

    84

    85

    requestAnimationFrameID = null;

    86

}

    87

    88

function requestHMIAnimation() {

    89

    if(requestAnimationFrameID == null){

    90

        requestAnimationFrameID = window.requestAnimationFrame(animate);

    91

    }

    92

}

    93

    94

// Message reception handler

    95

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

    96

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

    97

ws.onmessage = function (evt) {

    98

    99

    let data = evt.data;

   100

    let dv = new DataView(data);

   101

    let i = 0;

   102

    try {

   103

        for(let hash_int of hmi_hash) {

   104

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

   105

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

   106

            };

   107

            i++;

   108

        };

   109

   110

        while(i < data.byteLength){

   111

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

   112

            i += 4;

   113

            let iectype = hmitree_types[index];

   114

            if(iectype != undefined){

   115

                let dvgetter = dvgetters[iectype];

   116

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

   117

                updates.set(index, value);

   118

                i += bytesize;

   119

            } else {

   120

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

   121

            }

   122

        };

   123

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

   124

        requestHMIAnimation();

   125

    } catch(err) {

   126

        // 1003 is for "Unsupported Data"

   127

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

   128

   129

        // TODO : remove debug alert ?

   130

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

   131

   132

        // force reload ignoring cache

   133

        location.reload(true);

   134

    }

   135

};

   136

   137

hmi_hash_u8 = new Uint8Array(hmi_hash);

   138

   139

function send_blob(data) {

   140

    if(data.length > 0) {

   141

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

   142

    };

   143

};

   144

   145

const typedarray_types = {

   146

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

   147

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

   148

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

   149

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

   150

    STRING: (str) => {

   151

        // beremiz default string max size is 128

   152

        str = str.slice(0,128);

   153

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

   154

        binary[0] = str.length;

   155

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

   156

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

   157

        }

   158

        return binary;

   159

    }

   160

    /* TODO */

   161

};

   162

   163

function send_reset() {

   164

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

   165

};

   166

   167

var subscriptions = [];

   168

   169

function subscribers(index) {

   170

    let entry = subscriptions[index];

   171

    let res;

   172

    if(entry == undefined){

   173

        res = new Set();

   174

        subscriptions[index] = [res,0];

   175

    }else{

   176

        [res, _ign] = entry;

   177

    }

   178

    return res

   179

}

   180

   181

function get_subscription_period(index) {

   182

    let entry = subscriptions[index];

   183

    if(entry == undefined)

   184

        return 0;

   185

    let [_ign, period] = entry;

   186

    return period;

   187

}

   188

   189

function set_subscription_period(index, period) {

   190

    let entry = subscriptions[index];

   191

    if(entry == undefined){

   192

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

   193

    } else {

   194

        entry[1] = period;

   195

    }

   196

}

   197

   198

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

   199

// Since dispatch directly calls change_hmi_value,

   200

// PLC will periodically send variable at given frequency

   201

subscribers(heartbeat_index).add({

   202

    /* type: "Watchdog", */

   203

    frequency: 1,

   204

    indexes: [heartbeat_index],

   205

    new_hmi_value: function(index, value, oldval) {

   206

        apply_hmi_value(heartbeat_index, value+1);

   207

    }

   208

});

   209

   210

function svg_text_to_multiline(elt) {

   211

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

   212

}

   213

   214

function multiline_to_svg_text(elt, str) {

   215

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

   216

}

   217

   218

function switch_langnum(langnum) {

   219

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

   220

   221

    for (let translation of translations) {

   222

        let [objs, msgs] = translation;

   223

        let msg = msgs[langnum];

   224

        for (let obj of objs) {

   225

            multiline_to_svg_text(obj, msg);

   226

            obj.setAttribute("lang",langnum);

   227

        }

   228

    }

   229

    return langnum;

   230

}

   231

   232

// backup original texts

   233

for (let translation of translations) {

   234

    let [objs, msgs] = translation;

   235

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

   236

}

   237

   238

var lang_local_index = hmi_local_index("lang");

   239

var langcode_local_index = hmi_local_index("lang_code");

   240

var langname_local_index = hmi_local_index("lang_name");

   241

subscribers(lang_local_index).add({

   242

    indexes: [lang_local_index],

   243

    new_hmi_value: function(index, value, oldval) {

   244

        let current_lang =  switch_langnum(value);

   245

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

   246

        apply_hmi_value(langcode_local_index, langcode);

   247

        apply_hmi_value(langname_local_index, langname);

   248

        switch_page();

   249

    }

   250

});

   251

   252

function setup_lang(){

   253

    let current_lang = cache[lang_local_index];

   254

    let new_lang = switch_langnum(current_lang);

   255

    if(current_lang != new_lang){

   256

        apply_hmi_value(lang_local_index, new_lang);

   257

    }

   258

}

   259

   260

setup_lang();

   261

   262

function update_subscriptions() {

   263

    let delta = [];

   264

    for(let index in subscriptions){

   265

        let widgets = subscribers(index);

   266

   267

        // periods are in ms

   268

        let previous_period = get_subscription_period(index);

   269

   270

        // subscribing with a zero period is unsubscribing

   271

        let new_period = 0;

   272

        if(widgets.size > 0) {

   273

            let maxfreq = 0;

   274

            for(let widget of widgets){

   275

                let wf = widget.frequency;

   276

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

   277

                    maxfreq = wf;

   278

            }

   279

   280

            if(maxfreq != 0)

   281

                new_period = 1000/maxfreq;

   282

        }

   283

   284

        if(previous_period != new_period) {

   285

            set_subscription_period(index, new_period);

   286

            if(index <= last_remote_index){

   287

                delta.push(

   288

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

   289

                    new Uint32Array([index]),

   290

                    new Uint16Array([new_period]));

   291

            }

   292

        }

   293

    }

   294

    send_blob(delta);

   295

};

   296

   297

function send_hmi_value(index, value) {

   298

    if(index > last_remote_index){

   299

        updates.set(index, value);

   300

   301

        if(persistent_indexes.has(index)){

   302

            let varname = persistent_indexes.get(index);

   303

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

   304

        }

   305

   306

        requestHMIAnimation();

   307

        return;

   308

    }

   309

   310

    let iectype = hmitree_types[index];

   311

    let tobinary = typedarray_types[iectype];

   312

    send_blob([

   313

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

   314

        new Uint32Array([index]),

   315

        tobinary(value)]);

   316

   317

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

   318

    // cache[index] = value;

   319

};

   320

   321

function apply_hmi_value(index, new_val) {

   322

    let old_val = cache[index];

   323

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

   324

        send_hmi_value(index, new_val);

   325

    return new_val;

   326

}

   327

   328

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

   329

   330

function eval_operation_string(old_val, opstr) {

   331

    let op = opstr[0];

   332

    let given_val;

   333

    if(opstr.length < 2) 

   334

        return undefined;

   335

    if(opstr[1] in quotes){

   336

        if(opstr.length < 3) 

   337

            return undefined;

   338

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

   339

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

   340

        }

   341

    } else {

   342

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

   343

    }

   344

    let new_val;

   345

    switch(op){

   346

      case "=":

   347

        new_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

      case "*":

   356

        new_val = old_val * given_val;

   357

        break;

   358

      case "/":

   359

        new_val = old_val / given_val;

   360

        break;

   361

    }

   362

    return new_val;

   363

}

   364

   365

var current_visible_page;

   366

var current_subscribed_page;

   367

var current_page_index;

   368

var page_node_local_index = hmi_local_index("page_node");

   369

   370

function toggleFullscreen() {

   371

  let elem = document.documentElement;

   372

   373

  if (!document.fullscreenElement) {

   374

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

   375

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

   376

    });

   377

  } else {

   378

    document.exitFullscreen();

   379

  }

   380

}

   381

   382

function prepare_svg() {

   383

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

   384

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

   385

        toggleFullscreen();

   386

        e.preventDefault();

   387

    });

   388

   389

    for(let eltid in detachable_elements){

   390

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

   391

        parent.removeChild(element);

   392

    }

   393

};

   394

   395

function switch_page(page_name, page_index) {

   396

    if(current_subscribed_page != current_visible_page){

   397

        /* page switch already going */

   398

        /* TODO LOG ERROR */

   399

        return false;

   400

    }

   401

   402

    if(page_name == undefined)

   403

        page_name = current_subscribed_page;

   404

   405

   406

    let old_desc = page_desc[current_subscribed_page];

   407

    let new_desc = page_desc[page_name];

   408

   409

    if(new_desc == undefined){

   410

        /* TODO LOG ERROR */

   411

        return false;

   412

    }

   413

   414

    if(page_index == undefined){

   415

        page_index = new_desc.page_index;

   416

    }

   417

   418

    if(old_desc){

   419

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

   420

    }

   421

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

   422

   423

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

   424

   425

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

   426

   427

    update_subscriptions();

   428

   429

    current_subscribed_page = page_name;

   430

    current_page_index = page_index;

   431

    let page_node;

   432

    if(page_index != undefined){

   433

        page_node = hmitree_paths[page_index];

   434

    }else{

   435

        page_node = "";

   436

    }

   437

    apply_hmi_value(page_node_local_index, page_node);

   438

   439

    jumps_need_update = true;

   440

   441

    requestHMIAnimation();

   442

    jump_history.push([page_name, page_index]);

   443

    if(jump_history.length > 42)

   444

        jump_history.shift();

   445

   446

    return true;

   447

};

   448

   449

function switch_visible_page(page_name) {

   450

   451

    let old_desc = page_desc[current_visible_page];

   452

    let new_desc = page_desc[page_name];

   453

   454

    if(old_desc){

   455

        for(let eltid in old_desc.required_detachables){

   456

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

   457

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

   458

                parent.removeChild(element);

   459

            }

   460

        }

   461

        for(let eltid in new_desc.required_detachables){

   462

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

   463

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

   464

                parent.appendChild(element);

   465

            }

   466

        }

   467

    }else{

   468

        for(let eltid in new_desc.required_detachables){

   469

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

   470

            parent.appendChild(element);

   471

        }

   472

    }

   473

   474

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

   475

    current_visible_page = page_name;

   476

};

   477

   478

// Once connection established

   479

ws.onopen = function (evt) {

   480

    init_widgets();

   481

    send_reset();

   482

    // show main page

   483

    prepare_svg();

   484

    switch_page(default_page);