mirror of
https://github.com/stagehacks/Cue-View.git
synced 2026-08-10 00:03:39 +00:00
First Commit
This commit is contained in:
sparks-alec
@@ -0,0 +1,96 @@
|
||||
body{
|
||||
color: #6e6c6f;
|
||||
font-family: sans-serif;
|
||||
margin: 0px;
|
||||
margin-top: 40px;
|
||||
user-select: none;
|
||||
/*overflow-x: hidden;*/
|
||||
visibility: visible !important;
|
||||
max-width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing:content-box;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-bottom: black 1px solid;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: white;
|
||||
}
|
||||
|
||||
header h1, header h2{
|
||||
margin: 8px;
|
||||
margin-left: 20px;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
float: left;
|
||||
}
|
||||
header h2{
|
||||
color: #b6b6b6;
|
||||
}
|
||||
|
||||
|
||||
table.cv-table{
|
||||
border: none;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
color: #dddddd;
|
||||
font-size: 15px;
|
||||
}
|
||||
table.cv-table th{
|
||||
padding: 6px 16px;
|
||||
color: #969696;
|
||||
text-align: left;
|
||||
border-bottom: #555 1px solid;
|
||||
border-bottom: #555 1px solid;
|
||||
font-weight: normal;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
table.cv-table tr:nth-child(odd){
|
||||
background-color: #292929;
|
||||
}
|
||||
table.cv-table tr td:first-child{
|
||||
padding-left: 10px;
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-webkit-border-bottom-left-radius: 10px;
|
||||
}
|
||||
table.cv-table tr td:last-child{
|
||||
padding-right: 10px;
|
||||
-webkit-border-top-right-radius: 10px;
|
||||
-webkit-border-bottom-right-radius: 10px;
|
||||
}
|
||||
table.cv-table td{
|
||||
padding: 7px 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.not-responding{
|
||||
}
|
||||
.not-responding em{
|
||||
background-color: #3f3f3f;
|
||||
color: white;
|
||||
padding: 2px 10px;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PlexMono;
|
||||
src: url("media/IBMPlexMono-Text.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PlexSans;
|
||||
src: url("media/IBMPlexSans-Light.otf") format("opentype");
|
||||
}
|
||||
+274
@@ -0,0 +1,274 @@
|
||||
const { v4: uuid } = require('uuid');
|
||||
let osc = require("osc");
|
||||
let net = require("net");
|
||||
let udp = require('dgram');
|
||||
var _ = require('lodash/function');
|
||||
|
||||
|
||||
let PLUGINS = require("./plugins.js");
|
||||
let VIEW = require("./view.js");
|
||||
let SAVESLOTS = require("./saveSlots.js");
|
||||
|
||||
|
||||
var devices = {};
|
||||
module.exports.all = devices;
|
||||
|
||||
|
||||
registerDevice = function(newDevice){
|
||||
|
||||
console.log(PLUGINS.all)
|
||||
|
||||
if(PLUGINS.all[newDevice.type]==undefined){
|
||||
console.error("Plugin for device "+newDevice.type+" does not exist.");
|
||||
return true;
|
||||
}
|
||||
|
||||
var initElements = document.getElementsByClassName('init');
|
||||
for(var i=0; i<initElements.length; i++){
|
||||
initElements[i].style.display="none";
|
||||
}
|
||||
|
||||
// only register device if it hasn't already been added
|
||||
if(newDevice.addresses.length>0){
|
||||
for(var i in devices){
|
||||
if(devices[i].type==newDevice.type && JSON.stringify(devices[i].addresses) == JSON.stringify(newDevice.addresses)){
|
||||
// This device has already been added
|
||||
infoUpdate(devices[i], "status", "ok");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//console.log("Registered new "+newDevice.type)
|
||||
|
||||
var id = newDevice.id || uuid();
|
||||
devices[id] = {
|
||||
id: id,
|
||||
status: "new",
|
||||
type: newDevice.type,
|
||||
displayName: newDevice.displayName,
|
||||
defaultName: newDevice.defaultName,
|
||||
port: newDevice.port,
|
||||
addresses: newDevice.addresses,
|
||||
data: {},
|
||||
pinIndex: false,
|
||||
lastDrawn: 0,
|
||||
lastHeartbeat: 0,
|
||||
heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
|
||||
draw: _.debounce(function(){ VIEW.draw(this); }, 30, { leading: true, trailing: true})
|
||||
}
|
||||
|
||||
VIEW.addDeviceToList(devices[id]);
|
||||
initDeviceConnection(id);
|
||||
|
||||
}
|
||||
module.exports.registerDevice = registerDevice;
|
||||
|
||||
|
||||
initDeviceConnection = function(id){
|
||||
|
||||
|
||||
var device = devices[id];
|
||||
|
||||
infoUpdate(device, "status", "new");
|
||||
|
||||
if(device.port==undefined || device.addresses.length==0){
|
||||
return true;
|
||||
}
|
||||
try{
|
||||
// mostly only useful for UDP
|
||||
device.connection.close();
|
||||
}catch(err){}
|
||||
|
||||
const type = devices[id].type;
|
||||
var plugins = PLUGINS.all;
|
||||
|
||||
if(plugins[type].connectionType == "osc"){
|
||||
device.connection = new osc.TCPSocketPort({
|
||||
address: device.addresses[0],
|
||||
port: device.port
|
||||
});
|
||||
device.connection.open();
|
||||
device.connection.on("error", function (error) {
|
||||
//console.error(error)
|
||||
device.connection.close();
|
||||
});
|
||||
device.connection.on("ready", function () {
|
||||
plugins[type].ready(device);
|
||||
if(Object.keys(devices).length==1){
|
||||
VIEW.switchDevice(device.id);
|
||||
}
|
||||
});
|
||||
device.connection.on("message", function(message){
|
||||
//log("OSC IN", message.address);
|
||||
plugins[type].data(device, message);
|
||||
device.lastMessage = Date.now();
|
||||
});
|
||||
device.send = function(address, args){
|
||||
device.connection.send({address: address, args: args});
|
||||
}
|
||||
device.plugin = plugins[type];
|
||||
|
||||
}else if(plugins[type].connectionType == "TCPsocket"){
|
||||
device.connection = new net.Socket();
|
||||
|
||||
device.connection.connect({port: device.port, host: device.addresses[0]}, function() {
|
||||
|
||||
});
|
||||
|
||||
device.connection.on("error", function (error) {
|
||||
//console.error(error)
|
||||
});
|
||||
device.connection.on("ready", function () {
|
||||
plugins[type].ready(device);
|
||||
if(Object.keys(devices).length==1){
|
||||
VIEW.switchDevice(device.id);
|
||||
}
|
||||
});
|
||||
device.connection.on("data", function(message){
|
||||
//log("SOCK IN", message);
|
||||
plugins[type].data(device, message);
|
||||
device.lastMessage = Date.now();
|
||||
infoUpdate(device, "status", "ok");
|
||||
});
|
||||
device.send = function(data){
|
||||
//log("SOCK OUT", data);
|
||||
device.connection.write(data);
|
||||
}
|
||||
|
||||
}else if(plugins[type].connectionType == "UDPsocket"){
|
||||
|
||||
device.connection = udp.createSocket('udp4');
|
||||
|
||||
device.connection.bind(function(){
|
||||
|
||||
plugins[type].ready(device);
|
||||
|
||||
device.connection.on('message',function(msg,info){
|
||||
plugins[type].data(device, msg);
|
||||
infoUpdate(device, "status", "ok");
|
||||
});
|
||||
});
|
||||
|
||||
device.send = function(data){
|
||||
device.connection.send(data, device.port, device.addresses[0], function(err){
|
||||
//console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
module.exports.initDeviceConnection = initDeviceConnection;
|
||||
|
||||
|
||||
module.exports.deleteActive = function(){
|
||||
var device = VIEW.getActiveDevice();
|
||||
var choice = confirm("Are you sure you want to delete "+device.type+" device \""+(device.displayName || device.defaultName)+"\"?");
|
||||
|
||||
if(choice){
|
||||
VIEW.removeDeviceFromList(device);
|
||||
delete devices[device.id];
|
||||
SAVESLOTS.deleteFromSlots(device);
|
||||
SAVESLOTS.saveAll();
|
||||
SAVESLOTS.reloadActiveSlot();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports.changeActiveType = function(newType){
|
||||
var device = VIEW.getActiveDevice();
|
||||
device.type = newType;
|
||||
|
||||
initDeviceConnection(device.id);
|
||||
VIEW.draw(device);
|
||||
//SAVESLOTS.saveAll();
|
||||
}
|
||||
|
||||
module.exports.changeActiveIP = function(newIP){
|
||||
var device = VIEW.getActiveDevice();
|
||||
device.addresses[0] = newIP;
|
||||
initDeviceConnection(device.id);
|
||||
VIEW.draw(device);
|
||||
SAVESLOTS.saveAll();
|
||||
}
|
||||
|
||||
module.exports.changeActivePort = function(newPort){
|
||||
var device = VIEW.getActiveDevice();
|
||||
device.port = newPort;
|
||||
|
||||
initDeviceConnection(device.id);
|
||||
VIEW.draw(device);
|
||||
SAVESLOTS.saveAll();
|
||||
}
|
||||
|
||||
module.exports.changeActiveName = function(newName){
|
||||
var device = VIEW.getActiveDevice();
|
||||
device.displayName = newName;
|
||||
infoUpdate(device, "displayName", newName);
|
||||
VIEW.draw(device);
|
||||
SAVESLOTS.saveAll();
|
||||
}
|
||||
module.exports.changeActivePinIndex = function(newPin){
|
||||
var device = VIEW.getActiveDevice();
|
||||
device.pinIndex = newPin;
|
||||
VIEW.draw(device);
|
||||
SAVESLOTS.saveAll();
|
||||
}
|
||||
module.exports.changePinIndex = function(device, newPin){
|
||||
device.pinIndex = newPin;
|
||||
//SAVESLOTS.saveAll();
|
||||
}
|
||||
module.exports.refreshActive = function(){
|
||||
var device = VIEW.getActiveDevice();
|
||||
if(device==undefined){
|
||||
return true;
|
||||
}
|
||||
initDeviceConnection(device.id);
|
||||
VIEW.draw(device);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
infoUpdate = function(device, param, value){
|
||||
if(param=="addresses"){
|
||||
device.addresses = value.replace(/\s+/g, '').split(",");
|
||||
}else{
|
||||
device[param] = value;
|
||||
}
|
||||
VIEW.addDeviceToList(device);
|
||||
}
|
||||
module.exports.infoUpdate = infoUpdate;
|
||||
|
||||
|
||||
setInterval(heartbeat, 100);
|
||||
function heartbeat(){
|
||||
for(var i in devices){
|
||||
var device = devices[i];
|
||||
if(Date.now()>=device.lastHeartbeat+device.heartbeatInterval){
|
||||
|
||||
if(device.status=="broken"){
|
||||
initDeviceConnection(i);
|
||||
}else if(Date.now()-device.lastMessage>10000){
|
||||
infoUpdate(device, "status", "broken");
|
||||
}else{
|
||||
if(device.port!=undefined && device.addresses.length>0){
|
||||
PLUGINS.all[device.type].heartbeat(device);
|
||||
}else{
|
||||
//console.error("Invalid IP/Port on device "+device.name)
|
||||
}
|
||||
}
|
||||
device.lastHeartbeat = Date.now();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 138 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 294 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 171 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 236 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 415 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
+360
@@ -0,0 +1,360 @@
|
||||
html {
|
||||
font-size: 1rem;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
|
||||
}
|
||||
*, a, button {
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body{
|
||||
color: #6e6c6f;
|
||||
margin: 0px;
|
||||
user-select: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
.red{
|
||||
color: #eb6b5e;
|
||||
}
|
||||
.green{
|
||||
color: #61c650;
|
||||
}
|
||||
.left{
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
#main{
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
grid-template-columns: 270px 1fr;
|
||||
}
|
||||
.col{
|
||||
border-right: rgba(0, 0, 0, 0.5) 1px solid;
|
||||
height: 100vh !important;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* FIRST COL */
|
||||
#device-list-col{
|
||||
background-color: transparent;
|
||||
color: #707070;
|
||||
}
|
||||
#view-buttons-bar{
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 7px;
|
||||
user-select: text;
|
||||
-webkit-app-region: drag;
|
||||
z-index: 1000;
|
||||
/*border-bottom: black 1px solid;*/
|
||||
/*background: linear-gradient(#3f3f3f 0%, #343434 100%);*/
|
||||
/*background-color: #363636;*/
|
||||
/*background-color: rgba(0, 0, 0, 0.4);*/
|
||||
}
|
||||
#view-buttons-bar button{
|
||||
background-color: rgba(255, 255, 255, 0.07);
|
||||
width: 26px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#view-buttons-bar button:hover{
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#device-list{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
#device-list div{
|
||||
pointer-events: none;
|
||||
}
|
||||
#device-list .device{
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 10px 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#device-list .device.active-device{
|
||||
/*background-color: #0e5ccd;*/
|
||||
/*background-color: #c9961f;*/
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
#device-list .status{
|
||||
float: left;
|
||||
width: 25px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#device-list .type{
|
||||
float: left;
|
||||
width: 30px;
|
||||
color: #f6bd26;
|
||||
}
|
||||
#device-list .name{
|
||||
position: relative;
|
||||
left: 0px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
#device-list h3.init{
|
||||
margin: 0px auto;
|
||||
padding-top: 200px;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
width: 210px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#device-tools{
|
||||
position: absolute;
|
||||
bottom: 210px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding-right: 10px;
|
||||
/*background: linear-gradient(#2f2f2f 0%, #2c2c2c 100%);*/
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
border-top: rgba(0, 0, 0, 0.3) 1px solid;
|
||||
/*border-bottom: #3a3a3a 1px solid;*/
|
||||
}
|
||||
#device-tools select{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#device-settings{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
height: 200px;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#device-settings th{
|
||||
text-align: right;
|
||||
padding-right: 3px;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
#device-settings td{
|
||||
padding: 6px;
|
||||
}
|
||||
#device-settings-table{
|
||||
display: none;
|
||||
}
|
||||
#device-settings h3{
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
#device-settings #device-settings-name,
|
||||
#device-settings #device-settings-ip,
|
||||
#device-settings #device-settings-plugin-dropdown{
|
||||
width: 170px;
|
||||
}
|
||||
#device-settings #device-settings-port{
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SECOND COL */
|
||||
#all-devices{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.device-pin{
|
||||
position:absolute;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
height: 20px;
|
||||
}
|
||||
.device-wrapper{
|
||||
box-sizing: border-box;
|
||||
border-top: rgba(0, 0, 0, 0) 2px solid;
|
||||
border-bottom: rgba(0, 0, 0, 0) 2px solid;
|
||||
}
|
||||
.draw-area{
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
.active-device-outline{
|
||||
outline: #fdea08 2px solid;
|
||||
border-top: #fdea08 2px solid;
|
||||
border-bottom: #fdea08 2px solid;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
input{
|
||||
display: block;
|
||||
box-sizing:content-box;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
height: 28px;
|
||||
padding: 2px 6px;
|
||||
margin: 0px;
|
||||
border: rgba(255, 255, 255, 0.1) 1px solid;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
select{
|
||||
display: block;
|
||||
box-sizing:content-box;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
height: 28px;
|
||||
padding: 2px 6px;
|
||||
margin: 0px;
|
||||
border: rgba(255, 255, 255, 0.1) 1px solid;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
input:focus, select:focus{
|
||||
outline: #fdea08 2px solid;
|
||||
color: white;
|
||||
}
|
||||
input[type='checkbox']{
|
||||
position: relative;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
padding: 2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type='checkbox']:checked{
|
||||
background-color: #616064;
|
||||
}
|
||||
input[type='checkbox']:checked:after {
|
||||
content: '\2713';
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 1px;
|
||||
color: white;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
button, select.button{
|
||||
box-sizing:content-box;
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 7px;
|
||||
margin-left: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0px;
|
||||
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
button:hover{
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
button:focus{
|
||||
outline: none;
|
||||
}
|
||||
button.active{
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
}
|
||||
button:disabled{
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
button img{
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
select.button:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('img/Material Icons'),
|
||||
local('img/MaterialIcons-Regular'),
|
||||
url(img/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
document.onclick = function(e){
|
||||
window.closePopovers();
|
||||
}
|
||||
|
||||
window.init();
|
||||
|
||||
|
||||
document.getElementById("search-button").onclick = function(e){
|
||||
window.searchAll();
|
||||
}
|
||||
document.getElementById("add-device-button").onclick = function(e){
|
||||
//e.stopPropagation();
|
||||
//document.getElementById("add-device-popover").style.display = "block";
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.closePopovers = function(){
|
||||
//document.getElementById("add-device-popover").style.display = "none";
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
let fs = require('fs');
|
||||
let DEVICE = require("./device.js");
|
||||
let VIEW = require("./view.js");
|
||||
|
||||
|
||||
var allPlugins = {};
|
||||
module.exports.all = allPlugins;
|
||||
|
||||
module.exports.init = function(callback){
|
||||
|
||||
console.log("Loading Plugin Files...")
|
||||
|
||||
fs.readdir("./plugins", function(err, files){
|
||||
for(var i in files){
|
||||
var plugin = files[i];
|
||||
|
||||
if(plugin[0]!="."){
|
||||
allPlugins[plugin] = require(process.cwd()+"/plugins/"+plugin+"/"+plugin+".js");
|
||||
|
||||
allPlugins[plugin].deviceInfoUpdate = function(device, param, value){
|
||||
DEVICE.infoUpdate(device, param, value)
|
||||
}
|
||||
allPlugins[plugin].draw = function(device){
|
||||
VIEW.draw(device);
|
||||
}
|
||||
|
||||
allPlugins[plugin].template = ejs.compile(fs.readFileSync(process.cwd()+"/plugins/"+plugin+"/"+plugin+".html", 'utf8'));
|
||||
|
||||
if(allPlugins[plugin].heartbeatInterval==undefined || allPlugins[plugin].heartbeatInterval<50){
|
||||
allPlugins[plugin].heartbeatInterval = 5000;
|
||||
}
|
||||
}
|
||||
}
|
||||
callback();
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
let VIEW = require("./view.js");
|
||||
let DEVICE = require("./device.js");
|
||||
|
||||
|
||||
var activeSlot = false;
|
||||
var savedSlots = [[], [], [], []];
|
||||
var savedDevices = [];
|
||||
|
||||
var storedSlots = localStorage.getItem('savedSlots');;
|
||||
if(storedSlots){
|
||||
savedSlots = JSON.parse(storedSlots);
|
||||
}
|
||||
|
||||
var storedDevices = localStorage.getItem('savedDevices');;
|
||||
if(storedDevices){
|
||||
savedDevices = JSON.parse(storedDevices);
|
||||
}
|
||||
|
||||
loadSlot = function(slotIndex){
|
||||
|
||||
VIEW.toggleSlotButtons(slotIndex);
|
||||
activeSlot = slotIndex;
|
||||
|
||||
for(var d in DEVICE.all){
|
||||
DEVICE.changePinIndex(DEVICE.all[d], false);
|
||||
}
|
||||
VIEW.resetPinned();
|
||||
|
||||
for(var d in savedSlots[slotIndex]){
|
||||
var savedDevice = savedSlots[slotIndex][d];
|
||||
for(var d in DEVICE.all){
|
||||
var device = DEVICE.all[d];
|
||||
//if(device.addresses[0] == savedDevice.addresses[0] && device.type == savedDevice.type){
|
||||
if(device.id == savedDevice.id){
|
||||
VIEW.pinDevice(device);
|
||||
VIEW.switchDevice(device.id)
|
||||
}else if(device.addresses[0] == savedDevice.addresses[0] && device.type == savedDevice.type && savedDevice.addresses[0]!=undefined ){
|
||||
VIEW.pinDevice(device);
|
||||
VIEW.switchDevice(device.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports.loadSlot = loadSlot;
|
||||
|
||||
module.exports.loadDevices = function(){
|
||||
console.log("Loading "+savedDevices.length+" saved devices...")
|
||||
console.log(savedDevices)
|
||||
|
||||
for(var i=0; i<savedDevices.length; i++){
|
||||
DEVICE.registerDevice({
|
||||
type: savedDevices[i].type,
|
||||
displayName: savedDevices[i].displayName,
|
||||
defaultName: savedDevices[i].defaultName,
|
||||
port: savedDevices[i].port,
|
||||
addresses: savedDevices[i].addresses,
|
||||
id: savedDevices[i].id
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
module.exports.saveAll = function(){
|
||||
console.log("Saving...")
|
||||
var currentPins = VIEW.getPinnedDevices();
|
||||
|
||||
savedSlots[activeSlot] = [];
|
||||
for(var i=0; i<currentPins.length; i++){
|
||||
savedSlots[activeSlot][i] = {
|
||||
addresses: currentPins[i].addresses,
|
||||
type: currentPins[i].type,
|
||||
id: currentPins[i].id
|
||||
}
|
||||
}
|
||||
localStorage.setItem('savedSlots', JSON.stringify(savedSlots));
|
||||
console.log("Saved "+currentPins.length+" pinned devices to slot "+activeSlot+"!")
|
||||
|
||||
savedDevices = []
|
||||
var i = 0;
|
||||
for(var d in DEVICE.all){
|
||||
var device = DEVICE.all[d];
|
||||
savedDevices[i] = {
|
||||
addresses: device.addresses,
|
||||
type: device.type,
|
||||
displayName: device.displayName,
|
||||
defaultName: device.defaultName,
|
||||
port: device.port,
|
||||
id: device.id
|
||||
}
|
||||
i++;
|
||||
}
|
||||
localStorage.setItem('savedDevices', JSON.stringify(savedDevices));
|
||||
|
||||
}
|
||||
|
||||
module.exports.deleteFromSlots = function(device){
|
||||
for(var i = 1; i<=3; i++){
|
||||
console.log(savedSlots);
|
||||
for(var j=0; j<savedSlots[i].length; j++){
|
||||
if(savedSlots[i][j].id == device.id){
|
||||
delete savedSlots[i][j];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
module.exports.reloadActiveSlot = function(){
|
||||
loadSlot(activeSlot)
|
||||
}
|
||||
|
||||
module.exports.resetSlots = function(){
|
||||
localStorage.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
+399
@@ -0,0 +1,399 @@
|
||||
const { ipcRenderer } = require('electron');
|
||||
let netmask = require('netmask').Netmask;
|
||||
let dgram = require('dgram');
|
||||
let bonjour = require('bonjour')();
|
||||
let net = require("net");
|
||||
let os = require("os");
|
||||
let ip = require("ip");
|
||||
|
||||
|
||||
let DEVICE = require("./device.js");
|
||||
let SEARCH = require("./search.js");
|
||||
let PLUGINS = require("./plugins.js");
|
||||
|
||||
|
||||
var searching = false;
|
||||
var allServers = false;
|
||||
|
||||
searchAll = function(){
|
||||
if(searching){
|
||||
return true;
|
||||
}
|
||||
searching = true;
|
||||
ipcRenderer.send("disableSearchAll", "");
|
||||
document.getElementById("search-button").style.opacity = 0.2;
|
||||
//console.clear();
|
||||
|
||||
for(var i in DEVICE.all){
|
||||
DEVICE.infoUpdate(DEVICE.all[i], "status", "refresh");
|
||||
}
|
||||
|
||||
console.log("Searching...")
|
||||
|
||||
|
||||
//findOnlineDevices();
|
||||
allServers = getServers();
|
||||
var TCPFlag = true;
|
||||
if(allServers.length>2046){
|
||||
alert("Unable to search for TCP devices - subnet too large!\n\nCue View requires subnet 255.255.248.0 (/21) or smaller.")
|
||||
TCPFlag = false;
|
||||
}
|
||||
|
||||
console.log(PLUGINS)
|
||||
|
||||
for(var p in PLUGINS.all){
|
||||
var plugin = PLUGINS.all[p];
|
||||
console.log(p)
|
||||
try{
|
||||
switch(plugin.searchOptions.type){
|
||||
case "TCPport":
|
||||
if(TCPFlag){
|
||||
newSearchTCP(p, plugin);
|
||||
}
|
||||
break;
|
||||
case "Bonjour":
|
||||
newSearchBonjour(p, plugin)
|
||||
break;
|
||||
case "UDPsocket":
|
||||
newSearchUDP(p, plugin)
|
||||
break;
|
||||
}
|
||||
}catch(err){
|
||||
console.error("Unable to search for plugin "+p)
|
||||
}
|
||||
}
|
||||
|
||||
//searchBonjour();
|
||||
//searchTCP();
|
||||
//searchUDP();
|
||||
|
||||
setTimeout(function(){
|
||||
searching = false;
|
||||
document.getElementById("search-button").style.opacity = "";
|
||||
|
||||
for(var i=0; i<searchSockets.length; i++){
|
||||
try{searchSockets[i].close();}catch(err){}
|
||||
}
|
||||
|
||||
ipcRenderer.send("enableSearchAll", "");
|
||||
|
||||
}, 5000)
|
||||
}
|
||||
module.exports.searchAll = searchAll;
|
||||
|
||||
|
||||
|
||||
|
||||
// ____ _
|
||||
// | _ \ (_)
|
||||
// | |_) | ___ _ __ _ ___ _ _ _ __
|
||||
// | _ < / _ \| '_ \| |/ _ \| | | | '__|
|
||||
// | |_) | (_) | | | | | (_) | |_| | |
|
||||
// |____/ \___/|_| |_| |\___/ \__,_|_|
|
||||
// _/ |
|
||||
// |__/
|
||||
|
||||
newSearchBonjour = function(pluginType, plugin){
|
||||
bonjour.find({type: plugin.searchOptions.bonjourName}, function(e){
|
||||
console.log(pluginType)
|
||||
|
||||
var validAddresses = [];
|
||||
for(var i in e.addresses){
|
||||
if(e.addresses[i].indexOf(":")==-1){
|
||||
validAddresses.push(e.addresses[i])
|
||||
}
|
||||
}
|
||||
|
||||
DEVICE.registerDevice({
|
||||
type: pluginType,
|
||||
defaultName: e.name,
|
||||
port: e.port,
|
||||
addresses: validAddresses
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// searchBonjour = function(){
|
||||
// bonjour.find({type: "qlab"}, function(e){
|
||||
// for(var i in e.addresses){
|
||||
// if(e.addresses[i].indexOf(":")){
|
||||
// e.addresses.splice(i, 1);
|
||||
// }
|
||||
// }
|
||||
// DEVICE.registerDevice({
|
||||
// type: "qlab",
|
||||
// name: e.name,
|
||||
// port: e.port,
|
||||
// addresses: e.addresses
|
||||
// })
|
||||
// });
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// _______ _____ _____
|
||||
// |__ __/ ____| __ \
|
||||
// | | | | | |__) |
|
||||
// | | | | | ___/
|
||||
// | | | |____| |
|
||||
// |_| \_____|_|
|
||||
|
||||
|
||||
|
||||
newSearchTCP = function(pluginType, plugin){
|
||||
for(var i=0; i<allServers.length; i++){
|
||||
TCPtest(allServers[i], pluginType, plugin);
|
||||
}
|
||||
}
|
||||
|
||||
TCPtest = function(ip, pluginType, plugin){
|
||||
var client = net.createConnection(plugin.searchOptions.testPort, ip, function(){
|
||||
client.write(plugin.searchOptions.searchBuffer);
|
||||
// DEVICE.registerDevice({
|
||||
// type: pluginType,
|
||||
// defaultName: plugin.defaultName,
|
||||
// port: plugin.defaultPort,
|
||||
// addresses: [ip]
|
||||
// })
|
||||
});
|
||||
client.on('data', (data) => {
|
||||
if(plugin.searchOptions.validateResponse(data)){
|
||||
DEVICE.registerDevice({
|
||||
type: pluginType,
|
||||
defaultName: plugin.defaultName,
|
||||
port: plugin.defaultPort,
|
||||
addresses: [ip]
|
||||
})
|
||||
}
|
||||
client.end();
|
||||
});
|
||||
client.on("error", function(err){
|
||||
//no device here
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// from local-devices library
|
||||
function getServers () {
|
||||
var interfaces = os.networkInterfaces()
|
||||
var result = []
|
||||
|
||||
for (var key in interfaces) {
|
||||
var addresses = interfaces[key]
|
||||
for (var i = addresses.length; i--;) {
|
||||
var address = addresses[i]
|
||||
if (address.family === 'IPv4' && !address.internal) {
|
||||
var subnet = ip.subnet(address.address, address.netmask)
|
||||
var current = ip.toLong(subnet.firstAddress)
|
||||
var last = ip.toLong(subnet.lastAddress) - 1
|
||||
while (current++ < last) result.push(ip.fromLong(current))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
findOnlineDevices = function(){
|
||||
var allInterfaces = require('os').networkInterfaces();
|
||||
var validInterfaces = [];
|
||||
for(var i in allInterfaces){
|
||||
for(var j=0; j<allInterfaces[i].length; j++){
|
||||
var iface = allInterfaces[i][j];
|
||||
|
||||
if(iface.family=="IPv4" && iface.internal==false && iface.address.split(".")[0]!="169"){
|
||||
validInterfaces.push(iface);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(var i=0; i<validInterfaces.length; i++){
|
||||
var block = new netmask(validInterfaces[i].cidr);
|
||||
var f = block.first.split(".");
|
||||
var l = block.last.split(".");
|
||||
var cur = [f[0], f[1], f[2], f[3]];
|
||||
|
||||
for(var j=Number(f[2]); j<=Number(l[2]); j++){
|
||||
cur[2] = j;
|
||||
for(var k = Number(f[3]); k<Number(l[3]); k++){
|
||||
cur[3] = k;
|
||||
allIPs.push(cur[0]+"."+cur[1]+"."+cur[2]+"."+cur[3]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// window.searchTCP = function(){
|
||||
// var allInterfaces = require('os').networkInterfaces();
|
||||
// var validInterfaces = [];
|
||||
// for(var i in allInterfaces){
|
||||
// for(var j=0; j<allInterfaces[i].length; j++){
|
||||
// var iface = allInterfaces[i][j];
|
||||
|
||||
// if(iface.family=="IPv4" && iface.internal==false && iface.address.split(".")[0]!="169"){
|
||||
// validInterfaces.push(iface);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// for(var i=0; i<validInterfaces.length; i++){
|
||||
// var block = new netmask(validInterfaces[i].cidr);
|
||||
// var f = block.first.split(".");
|
||||
// var l = block.last.split(".");
|
||||
// var cur = [f[0], f[1], f[2], f[3]];
|
||||
|
||||
// for(var j=Number(f[2]); j<=Number(l[2]); j++){
|
||||
// cur[2] = j;
|
||||
// for(var k = Number(f[3]); k<Number(l[3]); k++){
|
||||
// cur[3] = k;
|
||||
// var ip = cur[0]+"."+cur[1]+"."+cur[2]+"."+cur[3];
|
||||
|
||||
// TCPtest(ip, 3033);
|
||||
// TCPtest(ip, 3039);
|
||||
// TCPtest(ip, 3040);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// TCPtest = function(address, port){
|
||||
// var client = net.createConnection(port, address, function(){
|
||||
// if(port==3033){
|
||||
// DEVICE.registerDevice({
|
||||
// type: "eos",
|
||||
// name: "ETC Eos Console",
|
||||
// port: 3032,
|
||||
// addresses: [address]
|
||||
// });
|
||||
// }else if(port==3040){
|
||||
// DEVICE.registerDevice({
|
||||
// type: "watchout",
|
||||
// name: "Watchout",
|
||||
// port: 3040,
|
||||
// addresses: [address]
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// client.on("error", function(err){
|
||||
// //no EOS here
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// _ _ _____ _____
|
||||
// | | | | __ \| __ \
|
||||
// | | | | | | | |__) |
|
||||
// | | | | | | | ___/
|
||||
// | |__| | |__| | |
|
||||
// \____/|_____/|_|
|
||||
|
||||
const pjLinkMessage = Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]);
|
||||
const xAirMessage = Buffer.from([0x2f, 0x78, 0x69, 0x6e, 0x66, 0x6f]);
|
||||
var serverUDP = dgram.createSocket('udp4');
|
||||
var serverUDP2 = dgram.createSocket('udp4');
|
||||
|
||||
var searchSockets = [];
|
||||
|
||||
|
||||
newSearchUDP = function(pluginType, plugin){
|
||||
var i = searchSockets.push(dgram.createSocket('udp4'))-1;
|
||||
searchSockets[i].bind(plugin.searchOptions.listenPort, function(){
|
||||
searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
|
||||
//console.log(err)
|
||||
});
|
||||
setTimeout(function(){
|
||||
searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
|
||||
//console.log(err)
|
||||
});
|
||||
}, 100);
|
||||
setTimeout(function(){
|
||||
searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
|
||||
//console.log(err)
|
||||
});
|
||||
}, 400);
|
||||
|
||||
searchSockets[i].on('message',function(msg,info){
|
||||
if(plugin.searchOptions.validateResponse(msg, info)){
|
||||
DEVICE.registerDevice({
|
||||
type: pluginType,
|
||||
defaultName: plugin.defaultName,
|
||||
port: plugin.defaultPort,
|
||||
addresses: [info.address]
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
searchSockets[i].on('listening', function(){
|
||||
searchSockets[i].setBroadcast(true);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// searchUDP = function(){
|
||||
|
||||
// dgramPJLink = dgram.createSocket('udp4');
|
||||
// dgramPJLink.bind(function(){
|
||||
// dgramPJLink.send(pjLinkMessage, 4352, '255.255.255.255', (err) => {
|
||||
// //console.log(err)
|
||||
// });
|
||||
// dgramPJLink.on('message',function(msg,info){
|
||||
// if(msg.toString().indexOf("%2ACKN")==0){
|
||||
// DEVICE.registerDevice({
|
||||
// type: "pjlink",
|
||||
// name: "PJLink Projector",
|
||||
// port: 4352,
|
||||
// addresses: [info.address]
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
|
||||
// });
|
||||
// dgramPJLink.on('listening', function(){
|
||||
// dgramPJLink.setBroadcast(true);
|
||||
// });
|
||||
|
||||
|
||||
// dgramXAir = dgram.createSocket('udp4');
|
||||
// dgramXAir.bind(function(){
|
||||
// dgramXAir.send(xAirMessage, 10024, '255.255.255.255', (err) => {
|
||||
// //console.log(err)
|
||||
// });
|
||||
// setTimeout(function(){
|
||||
// dgramXAir.send(xAirMessage, 10024, '255.255.255.255', (err) => {
|
||||
// //console.log(err)
|
||||
// });
|
||||
// }, 100);
|
||||
|
||||
// dgramXAir.on('message',function(msg,info){
|
||||
// if(msg.toString().indexOf("/xinfo,ssss")){
|
||||
// DEVICE.registerDevice({
|
||||
// type: "xair",
|
||||
// name: "X Air Mixer",
|
||||
// port: 10024,
|
||||
// addresses: [info.address]
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
|
||||
// });
|
||||
// dgramXAir.on('listening', function(){
|
||||
// dgramXAir.setBroadcast(true);
|
||||
// });
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+293
@@ -0,0 +1,293 @@
|
||||
const { ipcRenderer } = require('electron');
|
||||
let DEVICE = require("./device.js");
|
||||
let PLUGINS = require("./plugins.js");
|
||||
var _ = require('lodash/function');
|
||||
|
||||
var pinnedDevices = [];
|
||||
module.exports.pinnedDevices = pinnedDevices;
|
||||
let activeDevice = false;
|
||||
|
||||
|
||||
|
||||
module.exports.init = function(){
|
||||
populatePluginLists();
|
||||
}
|
||||
|
||||
|
||||
|
||||
drawDeviceInterface = function(id){
|
||||
|
||||
// console.log("DRAW")
|
||||
|
||||
var $deviceDrawArea = document.getElementById("device-"+id+"-draw-area");
|
||||
var $devicePinned = document.getElementById("device-"+id+"-pinned");
|
||||
|
||||
if($deviceDrawArea==null){
|
||||
return true;
|
||||
}
|
||||
|
||||
d = DEVICE.all[id];
|
||||
|
||||
var str = "<html><head>";
|
||||
if(d.status=="ok"){
|
||||
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>";
|
||||
str+="::-webkit-scrollbar {background-color: black;width: 12px;}";
|
||||
str+="::-webkit-scrollbar-track {background-color: #2b2b2b;}";
|
||||
str+="::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}";
|
||||
str+="::-webkit-scrollbar-button {display:none;}";
|
||||
str+="body{visibility: hidden;}";
|
||||
str+="</style>";
|
||||
str+="<link href='src/defaultPlugin.css' rel='stylesheet' type='text/css'>";
|
||||
str+="</head><body>";
|
||||
|
||||
if(d.status=="ok"){
|
||||
try{
|
||||
str += PLUGINS.all[d.type].template({data: d.data, 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+="<div class='not-responding'>";
|
||||
str+="<h2><em>"+d.type+"</em> is not responding to requests for data.</h2>";
|
||||
str+="<h3>IP <em>"+d.addresses[0]+"</em></h3>";
|
||||
str+="<h3>Port <em>"+d.port+"</em></h3></div>";
|
||||
}
|
||||
|
||||
str+="</body></html>";
|
||||
|
||||
|
||||
$deviceDrawArea.setAttribute("class", d.type+" draw-area");
|
||||
$deviceDrawArea.contentWindow.document.open();
|
||||
$deviceDrawArea.contentWindow.document.write(str);
|
||||
|
||||
|
||||
if(d.pinIndex){
|
||||
$devicePinned.style.display = "block";
|
||||
}else{
|
||||
$devicePinned.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
module.exports.draw = function(device){
|
||||
if(device==undefined){
|
||||
return true;
|
||||
}
|
||||
drawDeviceInterface(device.id)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
module.exports.addDeviceToList = function(device){
|
||||
var d = device;
|
||||
var addressStr = d.addresses[0] || "";
|
||||
for(var i=1; i<d.addresses.length; i++){
|
||||
addressStr+=", "+d.addresses[i];
|
||||
}
|
||||
var html = "";
|
||||
if(d.status=="ok"){
|
||||
html += "<div class='status material-icons green'>done</div>";
|
||||
}else if(d.status=="refresh"){
|
||||
html += "<div class='status material-icons'>refresh</div>";
|
||||
}else{
|
||||
html+="<div class='status material-icons red'>clear</div>";
|
||||
}
|
||||
html+="<div class='type'><img height='18px' src='plugins/"+d.type+"/icon.png'></div>";
|
||||
html+="<div class='name'>"+(d.displayName || d.defaultName)+"</div>";
|
||||
|
||||
let elem = document.getElementById(d.id);
|
||||
if(elem==null){
|
||||
document.getElementById("device-list").insertAdjacentHTML("beforeend", "<a class='device' id='"+d.id+"'>"+html+"</a>");
|
||||
}else{
|
||||
elem.innerHTML = html;
|
||||
}
|
||||
}
|
||||
module.exports.removeDeviceFromList = function(device){
|
||||
var d = device;
|
||||
document.getElementById(device.id).remove();
|
||||
}
|
||||
|
||||
|
||||
|
||||
switchDevice = function(id){
|
||||
|
||||
if(activeDevice && activeDevice.pinIndex==false){
|
||||
document.getElementById("device-"+activeDevice.id).remove();
|
||||
activeDevice = false;
|
||||
}
|
||||
activeDevice = DEVICE.all[id];
|
||||
|
||||
|
||||
var cols = 1;
|
||||
if(pinnedDevices.length>0){
|
||||
cols+=pinnedDevices.length;
|
||||
}
|
||||
if(pinnedDevices.indexOf(activeDevice)>=0 || id==undefined){
|
||||
cols--;
|
||||
}
|
||||
|
||||
document.getElementById("all-devices").style.gridTemplateColumns = "repeat("+(cols)+", 1fr)";
|
||||
|
||||
if(id==undefined){
|
||||
//document.getElementById('refresh-device-button').style.opacity = 0.2;
|
||||
document.getElementById('refresh-device-button').disabled = true;
|
||||
document.getElementById('device-settings-table').style.display = "none";
|
||||
return true;
|
||||
}else{
|
||||
document.getElementById('refresh-device-button').disabled = false;
|
||||
//document.getElementById('refresh-device-button').style.opacity = 1;
|
||||
}
|
||||
|
||||
|
||||
var i = DEVICE.all[id].id;
|
||||
|
||||
var $deviceWrapper = document.getElementById("device-"+i);
|
||||
if(!$deviceWrapper){
|
||||
var html = '<div class="col device-wrapper" id="device-'+i+'">'
|
||||
+'<img id="device-'+i+'-pinned" class="device-pin" src="src/img/outline_push_pin_white_18dp.png">'
|
||||
+'<iframe id="device-'+i+'-draw-area" class="draw-area"></iframe>'
|
||||
+'<div id="device-'+i+'-settings"></div></div>';
|
||||
document.getElementById("all-devices").insertAdjacentHTML("afterbegin", html);
|
||||
|
||||
$deviceWrapper = document.getElementById("device-"+i);
|
||||
}
|
||||
|
||||
switchClass(document.getElementById(id), "active-device");
|
||||
drawDeviceInterface(id);
|
||||
switchClass(document.getElementById("device-"+id), "active-device-outline");
|
||||
|
||||
|
||||
|
||||
document.getElementById('device-settings-table').style.display = "block";
|
||||
document.getElementById('device-settings-plugin-dropdown').value=activeDevice.type;
|
||||
document.getElementById("device-settings-name").value = activeDevice.displayName || activeDevice.defaultName || "";
|
||||
document.getElementById("device-settings-ip").value = activeDevice.addresses[0] || "";
|
||||
document.getElementById("device-settings-port").value = activeDevice.port || "";
|
||||
document.getElementById("device-settings-pin").checked = activeDevice.pinIndex;
|
||||
|
||||
|
||||
ipcRenderer.send("enableDeviceDropdown", "");
|
||||
ipcRenderer.send("setDevicePin", !DEVICE.all[id].pinIndex==false);
|
||||
|
||||
}
|
||||
module.exports.switchDevice = switchDevice;
|
||||
|
||||
|
||||
module.exports.getActiveDevice = function(){
|
||||
return activeDevice;
|
||||
}
|
||||
|
||||
module.exports.pinActiveDevice = function(){
|
||||
if(activeDevice==undefined){
|
||||
return true;
|
||||
}
|
||||
if(pinnedDevices.indexOf(DEVICE.all[activeDevice.id])==-1){
|
||||
pinnedDevices.push(DEVICE.all[activeDevice.id]);
|
||||
}
|
||||
DEVICE.changeActivePinIndex(true);
|
||||
}
|
||||
|
||||
module.exports.unpinActiveDevice = function(){
|
||||
if(activeDevice==undefined){
|
||||
return true;
|
||||
}
|
||||
pinnedDevices.splice(pinnedDevices.indexOf(DEVICE.all[activeDevice.id]), 1);
|
||||
DEVICE.changeActivePinIndex(false);
|
||||
}
|
||||
|
||||
module.exports.pinDevice = function(device){
|
||||
pinnedDevices.push(device)
|
||||
DEVICE.changePinIndex(device, true);
|
||||
}
|
||||
module.exports.unpinDevice = function(device){
|
||||
pinnedDevices.push(device)
|
||||
DEVICE.changePinIndex(device, false);
|
||||
}
|
||||
|
||||
module.exports.resetPinned = function(){
|
||||
pinnedDevices.length = 0;
|
||||
activeDevice = false;
|
||||
//switchDevice();
|
||||
try{
|
||||
document.querySelector("#device-list .active-device").classList.remove("active-device");
|
||||
}catch(err){}
|
||||
document.getElementById("all-devices").innerHTML = "";
|
||||
}
|
||||
|
||||
module.exports.getPinnedDevices = function(){
|
||||
return pinnedDevices;
|
||||
}
|
||||
|
||||
|
||||
module.exports.toggleSlotButtons = function(slotIndex){
|
||||
if(slotIndex==1){
|
||||
document.getElementById("save-slot-1").classList.add("active");
|
||||
document.getElementById("save-slot-2").classList.remove("active");
|
||||
document.getElementById("save-slot-3").classList.remove("active");
|
||||
}else if(slotIndex==2){
|
||||
document.getElementById("save-slot-1").classList.remove("active");
|
||||
document.getElementById("save-slot-2").classList.add("active");
|
||||
document.getElementById("save-slot-3").classList.remove("active");
|
||||
}else if(slotIndex==3){
|
||||
document.getElementById("save-slot-1").classList.remove("active");
|
||||
document.getElementById("save-slot-2").classList.remove("active");
|
||||
document.getElementById("save-slot-3").classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
module.exports.selectPreviousDevice = function(){
|
||||
if(activeDevice==undefined){
|
||||
return true;
|
||||
}
|
||||
var keys = Object.keys(DEVICE.all);
|
||||
var prevIndex = Math.max(0, keys.indexOf(activeDevice.id)-1);
|
||||
switchDevice(keys[prevIndex])
|
||||
}
|
||||
module.exports.selectNextDevice = function(){
|
||||
if(activeDevice==undefined){
|
||||
return true;
|
||||
}
|
||||
var keys = Object.keys(DEVICE.all);
|
||||
var prevIndex = Math.min(keys.length-1, keys.indexOf(activeDevice.id)+1);
|
||||
switchDevice(keys[prevIndex])
|
||||
}
|
||||
|
||||
|
||||
|
||||
populatePluginLists = function(){
|
||||
|
||||
var typeSelect = "";
|
||||
var addSelect = '<option value="" disabled selected hidden>+</option>';
|
||||
|
||||
for(const pluginType in PLUGINS.all){
|
||||
var plugin = PLUGINS.all[pluginType];
|
||||
|
||||
addSelect+="<option value='"+pluginType+"'>"+plugin.defaultName+"</option>";
|
||||
typeSelect+="<option value='"+pluginType+"'>"+plugin.defaultName+"</option>";
|
||||
}
|
||||
|
||||
document.getElementById("device-settings-plugin-dropdown").innerHTML = typeSelect;
|
||||
document.getElementById("add-device-button").innerHTML = addSelect;
|
||||
}
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user