change templates to ejs

src/device.js

@@ -54,13 +54,16 @@ registerDevice = function (newDevice) {
     lastDrawn: 0,
     lastHeartbeat: 0,
     heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
-    draw: debounce(
-      function () {
-        VIEW.draw(this);
-      },
-      30,
-      { leading: true, trailing: true }
-    ),
+    draw: async function(){
+      VIEW.draw(this);
+    },
+    update: function(type, data){
+      if(this.drawn){
+        VIEW.update(this, type, data);
+      }else{
+        this.draw();
+      }
+    }
   };
 
   VIEW.addDeviceToList(devices[id]);
@@ -68,6 +71,7 @@ registerDevice = function (newDevice) {
 };
 module.exports.registerDevice = registerDevice;
 
+
 initDeviceConnection = function (id) {
   const device = devices[id];
 
@@ -101,8 +105,12 @@ initDeviceConnection = function (id) {
       }
     });
     device.connection.on('message', (message) => {
-      // log("OSC IN", message.address);
-      plugins[type].data(device, message);
+      try{
+        plugins[type].data(device, message);
+      }catch(err){
+        console.error("Error with plugin 'data' function");
+        console.error(err)
+      }
       device.lastMessage = Date.now();
     });
     device.send = function (address, args) {
@@ -242,7 +250,7 @@ function heartbeat() {
     if (Date.now() >= device.lastHeartbeat + device.heartbeatInterval) {
       if (device.status == 'broken') {
         initDeviceConnection(i);
-      } else if (Date.now() - device.lastMessage > 10000) {
+      } else if (Date.now() - device.lastMessage > device.heartbeatTimeout) {
         infoUpdate(device, 'status', 'broken');
       } else {
         if (device.port != undefined && device.addresses.length > 0) {

src/plugins.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
-const ejs = require('ejs');
 const DEVICE = require('./device.js');
 const VIEW = require('./view.js');
+const _ = require('lodash');
 
 const allPlugins = {};
 module.exports.all = allPlugins;
@@ -13,32 +13,41 @@ module.exports.init = function (callback) {
     for (let i in files) {
       const plugin = files[i];
 
-      if (plugin[0] != '.') {
+      if (plugin[0] != '.' && plugin!= "qlab-old") {
+        
         console.log(`${i} ${plugin}`);
-        allPlugins[
-          plugin
-        ] = require(`${__dirname}/../plugins/${plugin}/${plugin}.js`);
+        allPlugins[plugin] = require(`${__dirname}/../plugins/${plugin}/${plugin}.js`);
 
-        allPlugins[plugin].deviceInfoUpdate = function (device, param, value) {
+        let p = allPlugins[plugin];
+
+        p.deviceInfoUpdate = function (device, param, value) {
           DEVICE.infoUpdate(device, param, value);
         };
-        allPlugins[plugin].draw = function (device) {
+        p.draw = function (device) {
           VIEW.draw(device);
         };
 
-        allPlugins[plugin].template = ejs.compile(
+        p.template = _.template(
           fs.readFileSync(
             `${__dirname}/../plugins/${plugin}/${plugin}.html`,
             'utf8'
           )
         );
 
-        if (
-          allPlugins[plugin].heartbeatInterval == undefined ||
-          allPlugins[plugin].heartbeatInterval < 50
-        ) {
-          allPlugins[plugin].heartbeatInterval = 5000;
+
+
+        if (p.heartbeatTimeout == undefined || p.heartbeatTimeout < 50) {
+          if(p.heartbeatInterval){
+            p.heartbeatTimeout = p.heartbeatInterval*1.5;
+          }else{
+            p.heartbeatTimeout = 10000;
+          }
         }
+
+        if (p.heartbeatInterval == undefined || p.heartbeatInterval < 50) {
+          p.heartbeatInterval = 5000;
+        }
+
       }
     }
     callback();

src/saveSlots.js

@@ -47,7 +47,6 @@ module.exports.loadSlot = loadSlot;
 
 module.exports.loadDevices = function () {
   console.log(`Loading ${savedDevices.length} saved devices...`);
-  console.log(savedDevices);
 
   for (let i = 0; i < savedDevices.length; i++) {
     DEVICE.registerDevice({

src/view.js

@@ -6,14 +6,12 @@ const PLUGINS = require('./plugins.js');
 const pinnedDevices = [];
 module.exports.pinnedDevices = pinnedDevices;
 let activeDevice = false;
-let drawCount = 0;
 
 module.exports.init = function () {
   populatePluginLists();
 };
 
 drawDeviceFrame = function (id) {
-  // console.log("DRAW")
 
   const $deviceDrawArea = document.getElementById(`device-${id}-draw-area`);
   const $devicePinned = document.getElementById(`device-${id}-pinned`);
@@ -25,14 +23,7 @@ drawDeviceFrame = function (id) {
   d = DEVICE.all[id];
 
   let str = '<html><head>';
-  if (d.status == 'ok') {
-    str +=
-      "<link href='./plugins/" +
-      d.type +
-      '/' +
-      d.type +
-      ".css' rel='stylesheet' type='text/css'>";
-  }
+  str += "<link href='./plugins/" +d.type +'/' +d.type +".css' rel='stylesheet' type='text/css'>";
 
   // scrollbar styles are inline to prevent the styles flickering in
   str += '<style>';
@@ -59,22 +50,25 @@ drawDeviceFrame = function (id) {
   } else {
     $devicePinned.style.display = 'none';
   }
+
 };
 
 generateBodyHTML = function(d){
   let str = "";
+
   if (d.status == 'ok') {
+
     try {
       str += PLUGINS.all[d.type].template({
         data: d.data,
-        listName: d.displayName || d.defaultName,
+        listName: (d.displayName || d.defaultName)
       });
     } catch (err) {
       console.log(err);
       str += '<h3>Plugin Template Error</h3>';
     }
   } else {
-    str += '<header><h1>' + (d.displayName || d.defaultName) + '</h1></header>';
+    str += '<header><h1>' + (d.displayName || d.defaultName) + d.status + '</h1></header>';
     str += "<div class='not-responding'>";
     str +=
       '<h2><em>' +
@@ -83,29 +77,27 @@ generateBodyHTML = function(d){
     str += '<h3>IP <em>' + d.addresses[0] + '</em></h3>';
     str += '<h3>Port <em>' + d.port + '</em></h3></div>';
   }
+  
   return str;
 }
 
 module.exports.draw = function (device) {
-  if (device == undefined || device.status=="new") {
-    return true;
-  }
-  
-  if(drawCount==0){
-    drawDeviceFrame(device.id);
-  }else{
-    let $deviceDrawArea = document.getElementById(`device-${device.id}-draw-area`).contentDocument.body;
-    $deviceDrawArea.innerHTML = generateBodyHTML(DEVICE.all[device.id]);
 
-    let $scrollTo = $deviceDrawArea.getElementsByClassName("scroll-position");
-    if($scrollTo.length==1){
-      document.getElementById(`device-${device.id}-draw-area`).contentWindow.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'});
-    }
+  let $deviceDrawArea = document.getElementById(`device-${device.id}-draw-area`);
+
+  if($deviceDrawArea){
+    $deviceDrawArea.contentDocument.body.innerHTML = generateBodyHTML(device);
+  }else{
+    drawDeviceFrame(device.id);
   }
-  drawCount++;
-  
+
 };
 
+module.exports.update = function(device, type, data){
+  let $iframe = document.getElementById(`device-${device.id}-draw-area`);
+  $iframe.contentWindow.updateElement(type, data);
+}
+
 module.exports.addDeviceToList = function (device) {
   var d = device;
   var addressStr = d.addresses[0] || '';