Resolved #28 issues with color selection in the GUI. Performing final tests before 1.5 release. On release will use new repo tagging methods and will build more frequently.

app/data/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.20",
+  "version": "1.4.21",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

app/lib/ui/grid.js

@@ -374,13 +374,14 @@ class Grid {
         if (typeof seq.grid[x].light === 'undefined') {
             return false;
         }
-        //console.log(x)
+        console.log(x);
         if (seq.grid[x].light === '0,0,0') {
             seq.setLight(x, light.color);
         }
         else {
             seq.setLight(x, [0, 0, 0]);
         }
+        grid.state(x);
     }
     /**
      * Change all lights at all camera commands to a specific
@@ -413,7 +414,9 @@ class Grid {
         });
         $('.w2ui-msg-body .swatch').removeClass('default set');
         $(`.w2ui-msg-body .swatch[color="${current}"`).eq(0).addClass('default set');
-        $('#sequencer-cancel').on('click', this.swatchesElem.close);
+        $('#sequencer-cancel').on('click', function () {
+            grid.swatchesElem.close();
+        });
         $('#sequencer-changeall').on('click', function () {
             const doit = confirm('You sure you want to change all light settings?');
             const elem = $('.w2ui-msg-body .default');
@@ -427,12 +430,19 @@ class Grid {
                 gui.warn('Select Color', 'Please select a color to proceed.');
             }
         });
+        $('.w2ui-msg-body .swatch').on('click', function () {
+            var elem = $(this);
+            $('.w2ui-msg-body .swatch').removeClass('default set');
+            elem.addClass('default set');
+        });
         $('#sequencer-ok').on('click', function () {
-            var elem = $('.w2ui-msg-body .default'), rgb;
+            var elem = $('.w2ui-msg-body .default');
+            let rgb;
             if (elem.length > 0) {
-                rgb = elem.attr('color').split(',');
+                rgb = elem.attr('color').split(',').map(el => { return parseInt(el); });
                 seq.setLight(x, rgb);
                 light.color = rgb;
+                grid.state(x);
                 grid.swatchesElem.close();
             }
             else {
@@ -486,7 +496,7 @@ class Grid {
             const title = $(this).attr('title');
             let color;
             if (typeof color !== 'undefined') {
-                color = colorStr.split(',');
+                color = colorStr.split(',').map(el => { return parseInt(el); });
                 $('.w2ui-msg-body .swatch').removeClass('default set');
                 $('#light-swatches .swatch').removeClass('default set');
                 $(this).addClass('default set');

app/lib/ui/light.js

@@ -1,520 +1,481 @@
-const light = {};
+'use strict';
-
+let light;
-//LIGHT
+class Light {
-light.id = 'light';
+    constructor() {
-light.preview_state = false; //light is on/off for preview viewing
+        this.id = 'light';
-light.color = [255, 255, 255]; //default color
+        this.preview_state = false; //light is on/off for preview viewing
-light.current = [0, 0, 0]; //last sent
+        this.color = [255, 255, 255]; //default color
-light.icon = {};
+        this.current = [0, 0, 0]; //last sent
-light.swatches = [
+        this.icon = {};
-	{
+        this.swatches = [
-		rgb : [0, 0, 0],
+            {
-		name : 'off'
+                rgb: [0, 0, 0],
-	},
+                name: 'off'
-	{
+            },
-		rgb : [255, 255, 255],
+            {
-		name : 'white (LED)'
+                rgb: [255, 255, 255],
-	},
+                name: 'white (LED)'
-	{
+            },
-		rgb : chroma.kelvin(2500).rgb(),
+            {
-		name : '2500 kelvin'
+                rgb: chroma.kelvin(2500).rgb(),
-	},
+                name: '2500 kelvin'
-	{
+            },
-		rgb : chroma.kelvin(3200).rgb(),
+            {
-		name : '3200 kelvin'
+                rgb: chroma.kelvin(3200).rgb(),
-	},
+                name: '3200 kelvin'
-	{
+            },
-		rgb : chroma.kelvin(5600).rgb(),
+            {
-		name : '5600 kelvin'
+                rgb: chroma.kelvin(5600).rgb(),
-	},
+                name: '5600 kelvin'
-	{
+            },
-		rgb : chroma.kelvin(6500).rgb(),
+            {
-		name : '6500 kelvin'
+                rgb: chroma.kelvin(6500).rgb(),
-	},
+                name: '6500 kelvin'
-	{
+            },
-		rgb : light.color,
+            {
-		set : true,
+                rgb: this.color,
-		default : true
+                set: true,
-	}
+                default: true
-];
+            }
-
+        ];
-light.help = `
+        this.help = `
-	Light Source		Kelvin	R G B Values Color
+		Light Source		Kelvin	R G B Values Color
-	Candle 				1900 	255, 147, 41
+		Candle 				1900 	255, 147, 41
-	40W Tungsten 		2600 	255, 197, 143
+		40W Tungsten 		2600 	255, 197, 143
-	100W Tungsten 		2850 	255, 214, 170
+		100W Tungsten 		2850 	255, 214, 170
-	Halogen 			3200 	255, 241, 224
+		Halogen 			3200 	255, 241, 224
-	Carbon Arc 			5200 	255, 250, 244
+		Carbon Arc 			5200 	255, 250, 244
-	High Noon Sun 		5400 	255, 255, 251
+		High Noon Sun 		5400 	255, 255, 251
-	Direct Sunlight	 	6000 	255, 255, 255
+		Direct Sunlight	 	6000 	255, 255, 255
-	Overcast Sky 		7000 	201, 226, 255
+		Overcast Sky 		7000 	201, 226, 255
-	Clear Blue Sky 		20000 	64, 156, 255
+		Clear Blue Sky 		20000 	64, 156, 255
-	Warm Fluorescent 			255, 244, 229
+		Warm Fluorescent 			255, 244, 229
-	Standard Fluorescent 		244, 255, 250
+		Standard Fluorescent 		244, 255, 250
-	Cool White Fluorescent 		212, 235, 255
+		Cool White Fluorescent 		212, 235, 255
-	Full Spectrum Fluorescent 	255, 244, 242
+		Full Spectrum Fluorescent 	255, 244, 242
-	Grow Light Fluorescent 		255, 239, 247
+		Grow Light Fluorescent 		255, 239, 247
-	Black Light Fluorescent 	167, 0, 255
+		Black Light Fluorescent 	167, 0, 255
-	Mercury Vapor 				216, 247, 255
+		Mercury Vapor 				216, 247, 255
-	Sodium Vapor 				255, 209, 178
+		Sodium Vapor 				255, 209, 178
-	Metal Halide 				242, 252, 255
+		Metal Halide 				242, 252, 255
-	High Pressure Sodium 		255, 183, 76
+		High Pressure Sodium 		255, 183, 76
-`;
+	`;
-
+        this.queue = {};
-light.queue = {};
+        this.lock = false;
-light.lock = false;
+        this.disabled = false;
-light.disabled = false;
+        this.rgb = new LightRGB();
-light.init = function () {
+        //cmy : LightCMY = new LightCMY();
-	'use strict';
+        this.kelvin = new LightKelvin();
-
+        this.swatch = new LightSwatch();
-	//create dynamic style for displaying light across screens
+    }
-	light.icon = document.createElement('style');
+    init() {
-	light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
+        //create dynamic style for displaying light across screens
-	document.body.appendChild(light.icon);
+        this.icon = document.createElement('style');
-
+        this.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
-	light.colorPickers();
+        document.body.appendChild(this.icon);
-	light.swatch.init();
+        this.colorPickers();
-	light.listen();
+        this.swatch.init();
-
+        this.listen();
-	light.display(light.current);
+        this.display(this.current);
-
+        $('#preview').on('change', this.onPreviewChange.bind(this));
-	$('#preview').on('change', function () {
+    }
-		light.preview_state = $(this).prop('checked');
+    onPreviewChange() {
-		if (light.preview_state) {
+        this.preview_state = $('#preview').prop('checked');
-			light.display(light.color);
+        if (this.preview_state) {
-			light.set(light.color);
+            this.display(this.color);
-		} else {
+            this.set(this.color);
-			light.display([0,0,0]);
+        }
-			light.set([0,0,0]);
+        else {
-		}
+            this.display([0, 0, 0]);
-	});
+            this.set([0, 0, 0]);
-};
+        }
-light.disable = function () {
+    }
-	const obj = {
+    disable() {
-		disable : true,
+        const obj = {
-		id : uuid()
+            disable: true,
-	};
+            id: uuid()
-	light.disabled = true;
+        };
-	$('#tb_toolbar_item_light').hide();
+        this.disabled = true;
-	$('#seq_labels .spacer').eq(1).hide();
+        $('#tb_toolbar_item_light').hide();
-	$('#light_set').hide();
+        $('#seq_labels .spacer').eq(1).hide();
-
+        $('#light_set').hide();
-	ipcRenderer.sendSync(light.id, obj);
+        ipcRenderer.sendSync(this.id, obj);
+    }
+    enable() {
+        const obj = {
+            enable: true,
+            id: uuid()
+        };
+        light.disabled = false;
+        $('#tb_toolbar_item_light').show();
+        $('#seq_labels .spacer').eq(1).show();
+        $('#light_set').show();
+        ipcRenderer.sendSync(light.id, obj);
+    }
+    colorPickers() {
+        //@ts-ignore
+        $('#colors-tabs').w2tabs({
+            name: 'colors',
+            active: 'kelvin',
+            tabs: [
+                { id: 'kelvin', caption: 'Kelvin' },
+                //{ id: 'cmy', caption: 'CMY'},
+                { id: 'rgb', caption: 'RGB' }
+            ],
+            onClick: function (event) {
+                $('.colors-page').hide();
+                log.info(event.target);
+                $('#' + event.target + '-page').show();
+                //@ts-ignore
+                //if (event.target === 'rgb') {
+                light.rgb.page();
+                //} else if (event.target) {
+                //light.cmy.page();
+                //}
+            }
+        });
+        this.rgb.init();
+        this.kelvin.init();
+        //light.cmy.init();
+    }
+    ;
+    set(rgb, callback) {
+        var obj;
+        if (this.disabled) {
+            if (callback) {
+                return callback();
+            }
+            else {
+                return false;
+            }
+        }
+        if (this.lock) {
+            //potential for logging overlapping commands
+            return false;
+        }
+        obj = {
+            rgb,
+            id: uuid()
+        };
+        ipcRenderer.sendSync(this.id, obj);
+        if (typeof callback !== 'undefined') {
+            obj.callback = callback;
+        }
+        this.queue[obj.id] = obj; //
+        this.current = rgb;
+        this.lock = true;
+    }
+    end(id) {
+        if (typeof this.queue[id] !== 'undefined') {
+            if (typeof this.queue[id].callback !== 'undefined') {
+                this.queue[id].callback();
+            }
+            delete this.queue[id];
+            this.lock = false;
+        }
+    }
+    listen() {
+        ipcRenderer.on(this.id, function (event, arg) {
+            light.end(arg.id);
+            return event.returnValue = true;
+        });
+    }
+    preview(rgb, name) {
+        let rgbStr;
+        if (this.disabled) {
+            return false;
+        }
+        rgb = this.rgb.floor(rgb);
+        rgbStr = 'rgb(' + rgb.join(',') + ')';
+        this.color = rgb;
+        if (typeof name === 'undefined') {
+            name = rgbStr;
+        }
+        $('#light-swatches .swatch.set').css('background', rgbStr)
+            .attr('color', rgb.join(','))
+            .prop('title', name);
+        if (this.preview_state) {
+            this.display(rgb);
+            this.set(rgb);
+        }
+    }
+    display(rgb) {
+        let str;
+        let i;
+        if (this.disabled) {
+            return false;
+        }
+        rgb = this.rgb.floor(rgb);
+        for (i = 0; i < 3; i++) {
+            $('#light-status form input').eq(i).val(rgb[i]);
+        }
+        str = 'rgb(' + rgb.join(',') + ')';
+        $('#color').css('background-color', str);
+        this.icon = document.styleSheets[document.styleSheets.length - 1];
+        this.icon.deleteRule(0);
+        this.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0);
+    }
+    ;
 }
-light.enable = function () {
+class LightKelvin {
-	const obj = {
+    constructor() {
-		enable : true,
+        //KELVIN GUI
-		id : uuid()
+        this.steps = 348;
-	};
+        this.min = this.steps * 4;
-	light.disabled = false;
+        this.max = 20000;
-	$('#tb_toolbar_item_light').show();
+        this.moving = false;
-	$('#seq_labels .spacer').eq(1).show();
+    }
-	$('#light_set').show();
+    init() {
-
+        $('#kelvin').on('change', light.kelvin.change);
-	ipcRenderer.sendSync(light.id, obj);
+        $('#kelvin').on('keypup', function (e) {
-};
+            var code = e.keyCode || e.which;
-light.colorPickers = function () {
+            if (code === 13) {
-	'use strict';
+                light.kelvin.change();
-	$('#colors-tabs').w2tabs({
+            }
-		name: 'colors',
+        });
-		active: 'kelvin',
+        $('#kelvin-slider').on('mousemove', function (event) {
-		tabs: [
+            if (light.kelvin.moving) {
-			{ id: 'kelvin', caption: 'Kelvin'},
+                light.kelvin.click(this, event);
-			//{ id: 'cmy', caption: 'CMY'},
+            }
-			{ id: 'rgb', caption: 'RGB' }
+        });
-		],
+        $('#kelvin-slider').on('mousedown', function (event) {
-		onClick: function (event) {
+            light.kelvin.moving = true;
-			$('.colors-page').hide();
+            light.kelvin.click(this, event);
-			$('#' + event.target + '-page').show();
+        });
-			if (event.target === 'rgb') {
+        $(document).on('mouseup', function () {
-				light.rgb.page();
+            light.kelvin.moving = false;
-			} else if (event.target) {
+        });
-				light.cmy.page();
+        light.kelvin.scale();
-			}
+        light.kelvin.set(5600); //default value
-		}
+    }
-	});
+    change() {
-	light.rgb.init();
+        let valStr = $('#kelvin').val();
-	light.kelvin.init();
+        let val = parseInt(valStr);
-	//light.cmy.init();
+        var rgb = chroma.kelvin(val).rgb();
-};
+        light.kelvin.preview(rgb);
-light.set = function (rgb, callback) { //rgb = [0,0,0]
+        light.kelvin.pos(val);
-	'use strict';
+        light.preview(rgb, val + ' kelvin');
-	var obj;
+    }
-
+    preview(rgb_float) {
-	if (light.disabled){
+        var elem = $('#kelvin-preview'), rgb = light.rgb.floor(rgb_float), rgb_str = 'rgb(' + rgb.join(', ') + ')';
-		if (callback) {
+        elem.css('background', rgb_str);
-			return callback();
+        elem.text(rgb_str);
-		} else {
+    }
-			return false;
+    scale() {
-		}
+        var i, min = light.kelvin.min, max = light.kelvin.max, steps = light.kelvin.steps, rgb, elem, elemStr = '<span style="background: rgb(XXXX);"></span>';
-	}
+        for (i = 0; i < steps; i++) {
-
+            rgb = chroma.kelvin((i * ((max - min) / steps)) + min).rgb();
-	if (light.lock) {
+            rgb = light.rgb.floor(rgb).join(',');
-		//potential for logging overlapping commands
+            elem = $(elemStr.replace('XXXX', rgb));
-		return false;
+            $('#kelvin-scale').append(elem);
-	}
+        }
-
+    }
-	obj = {
+    pos(kelvin) {
-		rgb,
+        var min = light.kelvin.min, max = light.kelvin.max, steps = light.kelvin.steps, start = -1, pos = Math.round((kelvin - min) / ((max - min) / steps)) + start;
-		id : uuid()
+        if (pos < start) {
-	};
+            pos = start;
-	ipcRenderer.sendSync(light.id, obj);
+        }
-
+        if (pos > steps) {
-	if (typeof callback !== 'undefined') {
+            pos = steps;
-		obj.callback = callback;
+        }
-	}
+        $('#kelvin-pos').css('left', pos + 'px');
-	light.queue[obj.id] = obj;//
+    }
-	light.current = rgb;
+    set(kelvin) {
-	light.lock = true;
+        $('#kelvin').val(kelvin);
-};
+        light.kelvin.change();
-light.end = function (id) {
+    }
-	'use strict';
+    click(t, e) {
-	if (typeof light.queue[id] !== 'undefined') {
+        var parentOffset = $(t).parent().offset(), relX = e.pageX - parentOffset.left - 31, //?
-		if (typeof light.queue[id].callback !== 'undefined') {
+        min = light.kelvin.min, max = light.kelvin.max, steps = light.kelvin.steps, kelvin = Math.round((relX * ((max - min) / steps)) + min);
-			light.queue[id].callback();
+        light.kelvin.set(kelvin);
-		}
+    }
-		delete light.queue[id];
-		light.lock = false;
-	}
 }
-light.listen = function () {
+class LightRGB {
-	'use strict';
+    constructor() {
-	ipcRenderer.on(light.id, function (event, arg) {
+        this.lock = true;
-		light.end(arg.id);
+    }
-		return event.returnValue = true;
+    init() {
-	});
+        this.elem = jsColorPicker('#rgb', {
-};
+            customBG: '#222',
-light.preview = function (rgb, name) { 
+            readOnly: true,
-	'use strict';
+            size: 3,
-	var rgbStr;
+            appendTo: document.getElementById('rgb-page'),
+            // patch: false,
+            init: function (elem, colors) {
+                elem.style.backgroundColor = elem.value;
+                elem.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
+            },
+            convertCallback: light.rgb.change
+        });
+    }
+    page() {
+        if (this.lock) {
+            $('#rgb').focus();
+            this.lock = false;
+        }
+        this.set(light.color);
+    }
+    change(colors, type) {
+        var a = colors.RND.rgb, rgb = [a.r, a.g, a.b];
+        if (!light.rgb.lock) {
+            light.preview(rgb);
+        }
+    }
+    floor(rgb) {
+        return [
+            Math.floor(rgb[0]),
+            Math.floor(rgb[1]),
+            Math.floor(rgb[2])
+        ];
+    }
+    set(rgb) {
+        var hex = chroma.rgb(rgb).hex();
+        this.elem.current.startRender();
+        this.elem.current.setColor(hex);
+        this.elem.current.stopRender();
+    }
+    ;
+}
+/*class LightCMY {
+    //CMY GUI
+    constructor () {
 
-	if (light.disabled) {
+    }
-		return false;
-	}
 
-	rgb = light.rgb.floor(rgb);
+    init () {
-	rgbStr = 'rgb(' + rgb.join(',') + ')';
+        $('.dial-wrapper input').on('input', function () {
-	light.color = rgb;
+            light.cmy.change(this);
-	if (typeof name === 'undefined') {
+        });
-		name = rgbStr;
+        $('.dial-wrapper input').on('change',  function () {
-	}
+            light.cmy.change(this);
-	$('#light-swatches .swatch.set').css('background', rgbStr)
+        });
-		.attr('color', rgb.join(','))
+    }
-		.prop('title', name);
 
-	if (light.preview_state) {
+    page  () {
-		light.display(rgb);
+        this.fromRgb(light.color);
-		light.set(rgb);
+    }
-	}
-};
-light.display = function (rgb) { //display light active state
-	'use strict';
-	var str,
-		i;
 
-	if (light.disabled) {
+    change (t : any) {
-		return false;
+        var id = $(t).parent().attr('id').split('-')[1],
-	}
+            val = $(t).val(),
+            cmy = [];
 
-	rgb = light.rgb.floor(rgb);
+        cmy[0] = $('#dial-c input').val();
-	for (i = 0; i < 3; i++) {
+        cmy[1] = $('#dial-m input').val();
-		$('#light-status form input').eq(i).val(rgb[i]);
+        cmy[2] = $('#dial-y input').val();
-	}
+        cmy[3] = $('#dial-k input').val();
-	str = 'rgb(' + rgb.join(',') + ')';
-	$('#color').css('background-color', str);
-	light.icon = document.styleSheets[document.styleSheets.length - 1];
-	light.icon.deleteRule(0);
-	light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
-};
 
-//KELVIN GUI
+        light.cmy.setDial(id, val);
-light.kelvin = {};
+        light.cmy.preview(cmy);
-light.kelvin.steps = 348;
+    }
-light.kelvin.min = light.kelvin.steps * 4;
-light.kelvin.max = 20000;
-light.kelvin.moving = false;
-light.kelvin.init = function () {
-	'use strict';
-	$('#kelvin').on('change', light.kelvin.change);
-	$('#kelvin').on('keypup', function (e) {
-		var code = e.keyCode || e.which;
-		if (code === 13) {
-			light.kelvin.change();
-		}
-	});
-	$('#kelvin-slider').on('mousemove', function (event) {
-		if (light.kelvin.moving) {
-			light.kelvin.click(this, event);
-		}
-	});
-	$('#kelvin-slider').on('mousedown', function (event) {
-		light.kelvin.moving = true;
-		light.kelvin.click(this, event);
-	});
-	$(document).on('mouseup', function () {
-		light.kelvin.moving = false;
-	});
-	light.kelvin.scale();
-	light.kelvin.set(5600); //default value
-};
-light.kelvin.change = function () {
-	'use strict';
-	var val = $('#kelvin').val(),
-		rgb = chroma.kelvin(val).rgb();
-	light.kelvin.preview(rgb);
-	light.kelvin.pos(val);
-	light.preview(rgb, val + ' kelvin');
-};
-light.kelvin.preview = function (rgb_float) {
-	'use strict';
-	var elem = $('#kelvin-preview'),
-		rgb = light.rgb.floor(rgb_float),
-		rgb_str = 'rgb(' + rgb.join(', ') + ')';
-	elem.css('background', rgb_str);
-	elem.text(rgb_str);
-};
-light.kelvin.scale = function () {
-	'use strict';
-	var i,
-		min = light.kelvin.min,
-		max = light.kelvin.max,
-		steps = light.kelvin.steps,
-		rgb,
-		elem,
-		elemStr = '<span style="background: rgb(XXXX);"></span>'
-	for (i = 0; i < steps; i++) {
-		rgb = chroma.kelvin((i * ((max - min) / steps)) + min).rgb();
-		rgb = light.rgb.floor(rgb).join(',');
-		elem = $(elemStr.replace('XXXX', rgb));
-		$('#kelvin-scale').append(elem);
-	}
-};
-light.kelvin.pos = function (kelvin) {
-	'use strict';
-	var min = light.kelvin.min,
-		max = light.kelvin.max,
-		steps = light.kelvin.steps,
-		start = -1,
-		pos = Math.round((kelvin - min) / ( (max - min) / steps)) + start;
-	if (pos < start) {
-		pos = start;
-	}
-	if (pos > steps) {
-		pos = steps;
-	}
-	$('#kelvin-pos').css('left', pos + 'px');
-};
-light.kelvin.set = function (kelvin) {
-	'use strict';
-	$('#kelvin').val(kelvin);
-	light.kelvin.change();
-};
-light.kelvin.click = function (t, e) {
-	'use strict';
-	var parentOffset = $(t).parent().offset(),
-   		relX = e.pageX - parentOffset.left - 31, //?
-   		min = light.kelvin.min,
-   		max = light.kelvin.max,
-   		steps = light.kelvin.steps,
-   		kelvin = Math.round((relX * ((max - min) / steps)) + min);
-   	light.kelvin.set(kelvin);
-};
 
-//CMY GUI
+    fromRgb (rgb : RGB) {
-light.cmy = {};
+        var cmy = chroma.rgb(rgb).cmyk();
-light.cmy.init = function () {
+        light.cmy.set(cmy);
-	'use strict';
+    }
-	$('.dial-wrapper input').on('input', function () {
-		light.cmy.change(this);
-	});
-	$('.dial-wrapper input').on('change',  function () {
-		light.cmy.change(this);
-	});
-};
 
-light.cmy.page = function () {
+    set (cmy) {
-	'use strict';
+        light.cmy.setDial('c', cmy[0]);
-	light.cmy.fromRgb(light.color);
+        light.cmy.setDial('m', cmy[1]);
-};
+        light.cmy.setDial('y', cmy[2]);
+        light.cmy.setDial('k', cmy[3]);
 
-light.cmy.change = function (t) {
+        light.cmy.preview(cmy);
-	'use strict';
+    }
-	var id = $(t).parent().attr('id').split('-')[1],
-		val = $(t).val(),
-		cmy = [];
 
-	cmy[0] = $('#dial-c input').val();
+    setDial (dial : any, val : number) {
-	cmy[1] = $('#dial-m input').val();
+        var elem = $('#dial-' + dial),
-	cmy[2] = $('#dial-y input').val();
+            angle = Math.floor(360 * val),
-	cmy[3] = $('#dial-k input').val();
+            container1 = 0,
+            container2 = 0;
+            elem.find('.dial-end').hide();
+        if (angle === 0) {
+            container1 = 180;
+            container2 = 180;
+        } else if (angle < 180) {
+            container1 = 180;
+            container2 = 180 - angle;
+        } else if (angle === 180) {
+            container1 = 180;
+            container2 = 0;
+        } else if (angle > 180 && angle < 360) {
+            container1 = 180 - (angle - 180);
+            container2 = 0;
+        } else if (angle === 360) {
+            //
+        }
 
-	light.cmy.setDial(id, val);
+        if (angle !== 0) {
-	light.cmy.preview(cmy);
+            elem.find('.dial-end').show();
-};
+        }
 
-light.cmy.fromRgb = function (rgb) {
+        elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + container1 + 'deg)');
-	'use strict';
+        elem.find('.dial-container2 .dial-wedge').css('transform', 'rotateZ(' + container2 + 'deg)');
-	var cmy = chroma.rgb(rgb).cmyk();
+        elem.find('.dial-end').css('transform', 'rotateZ(' + (360 - angle) + 'deg)');
-	light.cmy.set(cmy);
+        elem.find('input').val(val);
-};
+    }
 
-light.cmy.set = function (cmy) {
+    preview (cmy : CMYK) {
-	'use strict';
+        var elem = $('#cmy-preview'),
-	light.cmy.setDial('c', cmy[0]);
+            rgb = light.rgb.floor(chroma.cmyk(cmy).rgb()),
-	light.cmy.setDial('m', cmy[1]);
+            rgb_str = 'rgb(' + rgb.join(', ') + ')';
-	light.cmy.setDial('y', cmy[2]);
+        elem.css('background', rgb_str);
-	light.cmy.setDial('k', cmy[3]);
+        elem.text(rgb_str);
-
+    }
-	light.cmy.preview(cmy);
+}*/
-};
+class LightSwatch {
-
+    //SWATCH GUI
-light.cmy.setDial = function (dial, val) {
+    constructor() {
-	'use strict';
+    }
-	var elem = $('#dial-' + dial),
+    init() {
-		angle = Math.floor(360 * val),
+        var number = 12, add, elem, rgb, i, x;
-		container1 = 0,
+        for (i = 0; i < light.swatches.length; i++) {
-		container2 = 0;
+            light.swatches[i].rgb = light.rgb.floor(light.swatches[i].rgb);
-		elem.find('.dial-end').hide();
+            rgb = 'rgb(' + light.swatches[i].rgb.join(',') + ')';
-	if (angle === 0) {
+            elem = $('<div class="swatch"></div>');
-		container1 = 180;
+            elem.css('background', rgb);
-		container2 = 180;
+            elem.attr('color', light.swatches[i].rgb.join(','));
-	} else if (angle < 180) {
+            if (typeof light.swatches[i].name !== 'undefined') {
-		container1 = 180;
+                elem.prop('title', light.swatches[i].name);
-		container2 = 180 - angle;
+            }
-	} else if (angle === 180) {
+            else {
-		container1 = 180;
+                elem.prop('title', rgb);
-		container2 = 0;
+            }
-	} else if (angle > 180 && angle < 360) {
+            if (light.swatches[i].default) {
-		container1 = 180 - (angle - 180);
+                elem.addClass('default');
-		container2 = 0;
+            }
-	} else if (angle === 360) {
+            if (light.swatches[i].set) {
-		//
+                elem.addClass('set');
-	}
+            }
-
+            $('#new-swatch').before(elem);
-	if (angle !== 0) {
+        }
-		elem.find('.dial-end').show();
+        $('#new-swatch').on('click', light.swatch.add);
-	}
+        $(document).on('click', '#light-swatches .swatch', this.onClick);
-
+        // swatch modal logic in grid.ts
-	elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + container1 + 'deg)');
+    }
-	elem.find('.dial-container2 .dial-wedge').css('transform', 'rotateZ(' + container2 + 'deg)');
+    onClick() {
-	elem.find('.dial-end').css('transform', 'rotateZ(' + (360 - angle) + 'deg)');
+        let rgbStr = $(this).attr('color');
-	elem.find('input').val(val);
+        let rgb;
-};
+        if (typeof color !== 'undefined') {
-
+            rgb = rgbStr.split(',').map(el => { return parseInt(el); });
-light.cmy.preview = function (cmy) {
+            $('#light-swatches .swatch').removeClass('default set');
-	'use strict';
+            $(this).addClass('default set');
-	var elem = $('#cmy-preview'),
+            if (w2ui['colors'].active === 'rgb') {
-		rgb = light.rgb.floor(chroma.cmyk(cmy).rgb()),
+                light.rgb.set(light.color);
-		rgb_str = 'rgb(' + rgb.join(', ') + ')';
+            }
-	elem.css('background', rgb_str);
+            else if (w2ui['colors'].active === 'cmy') {
-	elem.text(rgb_str);
+                //light.cmy.fromRgb(light.color);
-};
+            }
-
+            light.preview(rgb);
-//RGB GUI
+        }
-light.rgb = {};
+    }
-light.rgb.elem;
+    add() {
-light.rgb.lock = true;
+        var swatch = $('<div class="swatch default set"></div>');
-light.rgb.init = function () {
+        $('#light-swatches .swatch').removeClass('default set');
-	'use strict';
+        $('#new-swatch').before(swatch);
-	light.rgb.elem = jsColorPicker('#rgb', {
+        light.preview(light.color);
-		customBG: '#222',
+    }
-		readOnly: true,
+}
-		size: 3,
+light = new Light();
-		appendTo : document.getElementById('rgb-page'),
+module.exports = light;
-		// patch: false,
+//# sourceMappingURL=light.js.map
-		init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
-			elm.style.backgroundColor = elm.value;
-			elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
-		},
-		convertCallback: light.rgb.change
-	});
-};
-light.rgb.page = function () {
-	'use strict';
-	if (light.rgb.lock) {
-		$('#rgb').focus();
-		light.rgb.lock = false;
-	}
-	light.rgb.set(light.color);
-};
-light.rgb.change = function (colors, type) {
-	'use strict';
-	var a = colors.RND.rgb,
-		rgb = [a.r, a.g, a.b];
-	if (!light.rgb.lock) {
-		light.preview(rgb);
-	}
-};
-light.rgb.floor = function (rgb) {
-	'use strict';
-	return [
-		Math.floor(rgb[0]),
-		Math.floor(rgb[1]),
-		Math.floor(rgb[2])
-	];
-};
-light.rgb.set = function (rgb) {
-	'use strict';
-	var hex = chroma.rgb(rgb).hex();
-	light.rgb.elem.current.startRender();
-	light.rgb.elem.current.setColor(hex);
-	light.rgb.elem.current.stopRender();
-};
-
-//SWATCH GUI
-light.swatch = {};
-light.swatch.init = function () {
-	'use strict';
-	var number = 12,
-		add,
-		elem,
-		rgb,
-		i,
-		x;
-	for (i = 0; i < light.swatches.length; i++) {
-		light.swatches[i].rgb = light.rgb.floor(light.swatches[i].rgb);
-		rgb = 'rgb(' + light.swatches[i].rgb.join(',') + ')';
-		elem = $('<div class="swatch"></div>');
-		elem.css('background', rgb);
-		elem.attr('color', light.swatches[i].rgb.join(','));
-		if (typeof light.swatches[i].name !== 'undefined') {
-			elem.prop('title', light.swatches[i].name);
-		} else {
-			elem.prop('title', rgb);
-		}
-		if (light.swatches[i].default) {
-			elem.addClass('default');
-		}
-		if (light.swatches[i].set) {
-			elem.addClass('set');
-		}
-		$('#new-swatch').before(elem);
-	}
-	$('#new-swatch').on('click', light.swatch.add);
-	$(document.body).on('click', '#light-swatches .swatch', function () {
-		var rgb = $(this).attr('color');
-		if (typeof color !== 'undefined') {
-			rgb = rgb.split(',');
-			$('#light-swatches .swatch').removeClass('default set');
-			$(this).addClass('default set');
-			if (w2ui['colors'].active === 'rgb') {
-				light.rgb.set(light.color);
-			} else if (w2ui['colors'].active === 'cmy') {
-				light.cmy.fromRgb(light.color);
-			}
-			light.preview(rgb);
-		}
-	});
-	$(document.body).on('dblclick', '.swatch', function () {
-		
-	});
-};
-light.swatch.add = function () {
-	'use strict';
-	var swatch = $('<div class="swatch default set"></div>');
-	$('#light-swatches .swatch').removeClass('default set');
-	$('#new-swatch').before(swatch);
-	light.preview(light.color);
-};
-
-module.exports = light;

app/lib/ui/seq.js

@@ -19,7 +19,7 @@ class Sequence {
     }
     listener(event, arg) {
         let timeStr;
-        console.log(JSON.stringify(arg));
+        //console.log(JSON.stringify(arg))
         if (arg.start) {
             if (typeof arg.loop !== 'undefined' && typeof arg.step !== 'undefined') {
                 this.activeStep(arg.step);

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy-app",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy-app",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "description": "GUI for the mcopy small gauge film optical printer platform",
   "main": "main.js",
   "scripts": {

app/src/lib/ui/grid.ts

@@ -8,6 +8,10 @@ interface Step {
 	x : number;
 }
 
+interface RGB extends Array<number> {
+	
+}
+
 let grid : Grid;
 
 /******
@@ -342,12 +346,12 @@ class Grid {
 		if (typeof seq.grid[x].light === 'undefined') {
 			return false;
 		}
-		//console.log(x)
 		if (seq.grid[x].light === '0,0,0') {
 			seq.setLight(x, light.color);
 		} else {
 			seq.setLight(x, [0, 0, 0]);
-		}	
+		}
+		grid.state(x);	
 	}
 
 	/**
@@ -382,7 +386,9 @@ class Grid {
 		$('.w2ui-msg-body .swatch').removeClass('default set');
 		$(`.w2ui-msg-body .swatch[color="${current}"`).eq(0).addClass('default set');
 
-		$('#sequencer-cancel').on('click', this.swatchesElem.close);
+		$('#sequencer-cancel').on('click', function () {
+			grid.swatchesElem.close();
+		});
 		$('#sequencer-changeall').on('click', function () {
 			const doit = confirm('You sure you want to change all light settings?');
 			const elem = $('.w2ui-msg-body .default');
@@ -395,13 +401,19 @@ class Grid {
 				gui.warn('Select Color', 'Please select a color to proceed.');
 			}
 		});
+		$('.w2ui-msg-body .swatch').on('click', function () {
+			var elem = $(this);
+			$('.w2ui-msg-body .swatch').removeClass('default set');
+			elem.addClass('default set');
+		})
 		$('#sequencer-ok').on('click', function () {
-			var elem =  $('.w2ui-msg-body .default'),
+			var elem =  $('.w2ui-msg-body .default');
-				rgb;
+			let rgb : RGB;
 			if (elem.length > 0) {
-				rgb = elem.attr('color').split(',');
+				rgb = elem.attr('color').split(',').map(el => { return parseInt(el) });
 				seq.setLight(x, rgb);
 				light.color = rgb;
+				grid.state(x);
 				grid.swatchesElem.close();
 			} else {
 				gui.warn('Select Color', 'Please select a color to proceed.');
@@ -454,9 +466,9 @@ class Grid {
 		$(document.body).on('click', '.w2ui-msg-body .swatch', function () {
 			const colorStr = $(this).attr('color');
 			const title = $(this).attr('title');
-			let color : string[];
+			let color : RGB;
 			if (typeof color !== 'undefined') {
-				color = colorStr.split(',');
+				color = colorStr.split(',').map(el => { return parseInt(el) });
 				$('.w2ui-msg-body .swatch').removeClass('default set');
 				$('#light-swatches .swatch').removeClass('default set');
 				$(this).addClass('default set');

app/src/lib/ui/light.ts

@@ -0,0 +1,576 @@
+'use strict';
+
+declare var uuid : any;
+declare var chroma : any;
+declare var ipcRenderer : any;
+declare var jsColorPicker : any;
+declare var color : any;
+declare var w2ui : any;
+
+interface RGB extends Array <number> {}
+
+interface CMYK extends Array <number> {}
+
+interface LightEvent {
+	id : string;
+	disable? : boolean;
+	enable? : boolean;
+	rgb? : RGB;
+	callback? : Function;
+}
+
+let light : Light;
+
+class Light {
+	id : string = 'light';
+	preview_state : boolean = false; //light is on/off for preview viewing
+	color : RGB = [255, 255, 255]; //default color
+	current : RGB = [0, 0, 0]; //last sent
+	icon : any = {};
+	public swatches : any = [
+		{
+			rgb : [0, 0, 0],
+			name : 'off'
+		},
+		{
+			rgb : [255, 255, 255],
+			name : 'white (LED)'
+		},
+		{
+			rgb : chroma.kelvin(2500).rgb(),
+			name : '2500 kelvin'
+		},
+		{
+			rgb : chroma.kelvin(3200).rgb(),
+			name : '3200 kelvin'
+		},
+		{
+			rgb : chroma.kelvin(5600).rgb(),
+			name : '5600 kelvin'
+		},
+		{
+			rgb : chroma.kelvin(6500).rgb(),
+			name : '6500 kelvin'
+		},
+		{
+			rgb : this.color,
+			set : true,
+			default : true
+		}
+	];
+
+	help : string = `
+		Light Source		Kelvin	R G B Values Color
+		Candle 				1900 	255, 147, 41
+		40W Tungsten 		2600 	255, 197, 143
+		100W Tungsten 		2850 	255, 214, 170
+		Halogen 			3200 	255, 241, 224
+		Carbon Arc 			5200 	255, 250, 244
+		High Noon Sun 		5400 	255, 255, 251
+		Direct Sunlight	 	6000 	255, 255, 255
+		Overcast Sky 		7000 	201, 226, 255
+		Clear Blue Sky 		20000 	64, 156, 255
+		Warm Fluorescent 			255, 244, 229
+		Standard Fluorescent 		244, 255, 250
+		Cool White Fluorescent 		212, 235, 255
+		Full Spectrum Fluorescent 	255, 244, 242
+		Grow Light Fluorescent 		255, 239, 247
+		Black Light Fluorescent 	167, 0, 255
+		Mercury Vapor 				216, 247, 255
+		Sodium Vapor 				255, 209, 178
+		Metal Halide 				242, 252, 255
+		High Pressure Sodium 		255, 183, 76
+	`;
+
+	queue : any = {};
+	lock : boolean = false;
+	disabled : boolean = false;
+
+	rgb : LightRGB = new LightRGB();
+	//cmy : LightCMY = new LightCMY();
+	kelvin : LightKelvin = new LightKelvin();
+	swatch : LightSwatch = new LightSwatch();
+
+	constructor () {
+
+	}
+
+	public init () {
+		//create dynamic style for displaying light across screens
+		this.icon = document.createElement('style');
+		this.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
+		document.body.appendChild(this.icon);
+
+		this.colorPickers();
+		this.swatch.init();
+		this.listen();
+
+		this.display(this.current);
+
+		$('#preview').on('change', this.onPreviewChange.bind(this));
+	}
+
+	private onPreviewChange () {
+		this.preview_state = $('#preview').prop('checked');
+		if (this.preview_state) {
+			this.display(this.color);
+			this.set(this.color);
+		} else {
+			this.display([0,0,0]);
+			this.set([0,0,0]);
+		}
+	}
+
+	public disable () {
+		const obj : LightEvent = {
+			disable : true,
+			id : uuid()
+		};
+		this.disabled = true;
+		$('#tb_toolbar_item_light').hide();
+		$('#seq_labels .spacer').eq(1).hide();
+		$('#light_set').hide();
+
+		ipcRenderer.sendSync(this.id, obj);
+	}
+
+	public enable () {
+		const obj = {
+			enable : true,
+			id : uuid()
+		};
+		light.disabled = false;
+		$('#tb_toolbar_item_light').show();
+		$('#seq_labels .spacer').eq(1).show();
+		$('#light_set').show();
+
+		ipcRenderer.sendSync(light.id, obj);
+	}
+
+	public colorPickers () {
+		//@ts-ignore
+		$('#colors-tabs').w2tabs({
+			name: 'colors',
+			active: 'kelvin',
+			tabs: [
+				{ id: 'kelvin', caption: 'Kelvin'},
+				//{ id: 'cmy', caption: 'CMY'},
+				{ id: 'rgb', caption: 'RGB' }
+			],
+			onClick: function (event : MouseEvent) {
+				$('.colors-page').hide();
+				log.info(event.target);
+				$('#' + event.target + '-page').show();
+				//@ts-ignore
+				//if (event.target === 'rgb') {
+					light.rgb.page();
+				//} else if (event.target) {
+					//light.cmy.page();
+				//}
+			}
+		});
+		this.rgb.init();
+		this.kelvin.init();
+		//light.cmy.init();
+	};
+	
+	public set (rgb : RGB, callback? : Function) { //rgb = [0,0,0]
+		var obj : LightEvent;
+
+		if (this.disabled){
+			if (callback) {
+				return callback();
+			} else {
+				return false;
+			}
+		}
+
+		if (this.lock) {
+			//potential for logging overlapping commands
+			return false;
+		}
+
+		obj = {
+			rgb,
+			id : uuid()
+		};
+		ipcRenderer.sendSync(this.id, obj);
+
+		if (typeof callback !== 'undefined') {
+			obj.callback = callback;
+		}
+		this.queue[obj.id] = obj;//
+		this.current = rgb;
+		this.lock = true;
+	}
+
+	public end  (id : string) {
+		if (typeof this.queue[id] !== 'undefined') {
+			if (typeof this.queue[id].callback !== 'undefined') {
+				this.queue[id].callback();
+			}
+			delete this.queue[id];
+			this.lock = false;
+		}
+	}
+
+	public listen () {
+		ipcRenderer.on(this.id, function (event : Event, arg : any) {
+			light.end(arg.id);
+			return event.returnValue = true;
+		});
+	}
+	
+	public preview (rgb : RGB, name? : string) { 
+		let rgbStr : any;
+
+		if (this.disabled) {
+			return false;
+		}
+
+		rgb = this.rgb.floor(rgb);
+		rgbStr = 'rgb(' + rgb.join(',') + ')';
+		this.color = rgb;
+
+		if (typeof name === 'undefined') {
+			name = rgbStr;
+		}
+
+		$('#light-swatches .swatch.set').css('background', rgbStr)
+			.attr('color', rgb.join(','))
+			.prop('title', name);
+
+		if (this.preview_state) {
+			this.display(rgb);
+			this.set(rgb);
+		}
+	}
+
+	public display (rgb : RGB) { //display light active state
+		let str : string;
+		let i : number;
+
+		if (this.disabled) {
+			return false;
+		}
+
+		rgb = this.rgb.floor(rgb);
+		for (i = 0; i < 3; i++) {
+			$('#light-status form input').eq(i).val(rgb[i]);
+		}
+		str = 'rgb(' + rgb.join(',') + ')';
+		$('#color').css('background-color', str);
+		this.icon = document.styleSheets[document.styleSheets.length - 1];
+		this.icon.deleteRule(0);
+		this.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
+	};
+}
+
+class LightKelvin {
+	//KELVIN GUI
+	steps : number = 348;
+	min : number = this.steps * 4;
+	max : number = 20000;
+	moving : boolean = false;
+
+	constructor () {
+
+	}
+
+	init () {
+		$('#kelvin').on('change', light.kelvin.change);
+		$('#kelvin').on('keypup', function (e) {
+			var code = e.keyCode || e.which;
+			if (code === 13) {
+				light.kelvin.change();
+			}
+		});
+		$('#kelvin-slider').on('mousemove', function (event) {
+			if (light.kelvin.moving) {
+				light.kelvin.click(this, event);
+			}
+		});
+		$('#kelvin-slider').on('mousedown', function (event) {
+			light.kelvin.moving = true;
+			light.kelvin.click(this, event);
+		});
+		$(document).on('mouseup', function () {
+			light.kelvin.moving = false;
+		});
+		light.kelvin.scale();
+		light.kelvin.set(5600); //default value
+	}
+	
+	change () {
+		let valStr : any = $('#kelvin').val();
+		let val : number = parseInt( valStr );
+		var rgb = chroma.kelvin(val).rgb();
+		light.kelvin.preview(rgb);
+		light.kelvin.pos(val);
+		light.preview(rgb, val + ' kelvin');
+	}
+
+	preview (rgb_float : number[]) {
+		var elem = $('#kelvin-preview'),
+			rgb = light.rgb.floor(rgb_float),
+			rgb_str = 'rgb(' + rgb.join(', ') + ')';
+		elem.css('background', rgb_str);
+		elem.text(rgb_str);
+	}
+
+	scale () {
+		var i,
+			min = light.kelvin.min,
+			max = light.kelvin.max,
+			steps = light.kelvin.steps,
+			rgb,
+			elem,
+			elemStr = '<span style="background: rgb(XXXX);"></span>'
+		for (i = 0; i < steps; i++) {
+			rgb = chroma.kelvin((i * ((max - min) / steps)) + min).rgb();
+			rgb = light.rgb.floor(rgb).join(',');
+			elem = $(elemStr.replace('XXXX', rgb));
+			$('#kelvin-scale').append(elem);
+		}
+	}
+
+	pos (kelvin : number) {
+		var min = light.kelvin.min,
+			max = light.kelvin.max,
+			steps = light.kelvin.steps,
+			start = -1,
+			pos = Math.round((kelvin - min) / ( (max - min) / steps)) + start;
+		if (pos < start) {
+			pos = start;
+		}
+		if (pos > steps) {
+			pos = steps;
+		}
+		$('#kelvin-pos').css('left', pos + 'px');
+	}
+
+	set (kelvin : number) {
+		$('#kelvin').val(kelvin);
+		light.kelvin.change();
+	}
+	
+	click (t : any, e : any) {
+		var parentOffset = $(t).parent().offset(),
+	   		relX = e.pageX - parentOffset.left - 31, //?
+	   		min = light.kelvin.min,
+	   		max = light.kelvin.max,
+	   		steps = light.kelvin.steps,
+	   		kelvin = Math.round((relX * ((max - min) / steps)) + min);
+	   	light.kelvin.set(kelvin);
+	}
+}
+
+class LightRGB {
+	//RGB GUI
+	elem : any;
+	lock : boolean = true;
+
+	constructor () {
+
+	}
+
+	init () {
+		this.elem = jsColorPicker('#rgb', {
+			customBG: '#222',
+			readOnly: true,
+			size: 3,
+			appendTo : document.getElementById('rgb-page'),
+			// patch: false,
+			init: function(elem : HTMLInputElement, colors : any) { // colors is a different instance (not connected to colorPicker)
+				elem.style.backgroundColor = elem.value;
+				elem.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
+			},
+			convertCallback: light.rgb.change
+		});
+	}
+
+	page () {
+		if (this.lock) {
+			$('#rgb').focus();
+			this.lock = false;
+		}
+		this.set(light.color);
+	}
+	
+	change (colors : any, type : any) {
+		var a = colors.RND.rgb,
+			rgb = [a.r, a.g, a.b];
+		if (!light.rgb.lock) {
+			light.preview(rgb);
+		}
+	}
+	
+	floor (rgb : any[]) {
+		return [
+			Math.floor(rgb[0]),
+			Math.floor(rgb[1]),
+			Math.floor(rgb[2])
+		];
+	}
+
+	set (rgb : RGB) {
+		var hex = chroma.rgb(rgb).hex();
+		this.elem.current.startRender();
+		this.elem.current.setColor(hex);
+		this.elem.current.stopRender();
+	};
+}
+
+/*class LightCMY {
+	//CMY GUI
+	constructor () {
+
+	}
+
+	init () {
+		$('.dial-wrapper input').on('input', function () {
+			light.cmy.change(this);
+		});
+		$('.dial-wrapper input').on('change',  function () {
+			light.cmy.change(this);
+		});
+	}
+
+	page  () {
+		this.fromRgb(light.color);
+	}
+
+	change (t : any) {
+		var id = $(t).parent().attr('id').split('-')[1],
+			val = $(t).val(),
+			cmy = [];
+
+		cmy[0] = $('#dial-c input').val();
+		cmy[1] = $('#dial-m input').val();
+		cmy[2] = $('#dial-y input').val();
+		cmy[3] = $('#dial-k input').val();
+
+		light.cmy.setDial(id, val);
+		light.cmy.preview(cmy);
+	}
+
+	fromRgb (rgb : RGB) {
+		var cmy = chroma.rgb(rgb).cmyk();
+		light.cmy.set(cmy);
+	}
+
+	set (cmy) {
+		light.cmy.setDial('c', cmy[0]);
+		light.cmy.setDial('m', cmy[1]);
+		light.cmy.setDial('y', cmy[2]);
+		light.cmy.setDial('k', cmy[3]);
+
+		light.cmy.preview(cmy);
+	}
+
+	setDial (dial : any, val : number) {
+		var elem = $('#dial-' + dial),
+			angle = Math.floor(360 * val),
+			container1 = 0,
+			container2 = 0;
+			elem.find('.dial-end').hide();
+		if (angle === 0) {
+			container1 = 180;
+			container2 = 180;
+		} else if (angle < 180) {
+			container1 = 180;
+			container2 = 180 - angle;
+		} else if (angle === 180) {
+			container1 = 180;
+			container2 = 0;
+		} else if (angle > 180 && angle < 360) {
+			container1 = 180 - (angle - 180);
+			container2 = 0;
+		} else if (angle === 360) {
+			//
+		}
+
+		if (angle !== 0) {
+			elem.find('.dial-end').show();
+		}
+
+		elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + container1 + 'deg)');
+		elem.find('.dial-container2 .dial-wedge').css('transform', 'rotateZ(' + container2 + 'deg)');
+		elem.find('.dial-end').css('transform', 'rotateZ(' + (360 - angle) + 'deg)');
+		elem.find('input').val(val);
+	}
+
+	preview (cmy : CMYK) {
+		var elem = $('#cmy-preview'),
+			rgb = light.rgb.floor(chroma.cmyk(cmy).rgb()),
+			rgb_str = 'rgb(' + rgb.join(', ') + ')';
+		elem.css('background', rgb_str);
+		elem.text(rgb_str);
+	}
+}*/
+
+class LightSwatch {
+	//SWATCH GUI
+
+	constructor () {
+
+	}
+
+	init () {
+		var number = 12,
+			add,
+			elem,
+			rgb,
+			i,
+			x;
+		for (i = 0; i < light.swatches.length; i++) {
+			light.swatches[i].rgb = light.rgb.floor(light.swatches[i].rgb);
+			rgb = 'rgb(' + light.swatches[i].rgb.join(',') + ')';
+			elem = $('<div class="swatch"></div>');
+			elem.css('background', rgb);
+			elem.attr('color', light.swatches[i].rgb.join(','));
+			if (typeof light.swatches[i].name !== 'undefined') {
+				elem.prop('title', light.swatches[i].name);
+			} else {
+				elem.prop('title', rgb);
+			}
+			if (light.swatches[i].default) {
+				elem.addClass('default');
+			}
+			if (light.swatches[i].set) {
+				elem.addClass('set');
+			}
+			$('#new-swatch').before(elem);
+		}
+		$('#new-swatch').on('click', light.swatch.add);
+		$(document).on('click', '#light-swatches .swatch', this.onClick);
+		// swatch modal logic in grid.ts
+	}
+
+	private onClick () {
+		let rgbStr : string = $(this).attr('color');
+		let rgb : RGB;
+		if (typeof color !== 'undefined') {
+			rgb = rgbStr.split(',').map(el => { return parseInt(el) });
+			$('#light-swatches .swatch').removeClass('default set');
+			$(this).addClass('default set');
+
+			if (w2ui['colors'].active === 'rgb') {
+				light.rgb.set(light.color);
+			} else if (w2ui['colors'].active === 'cmy') {
+				//light.cmy.fromRgb(light.color);
+			}
+			light.preview(rgb);
+		}
+	}
+
+	add () {
+		var swatch = $('<div class="swatch default set"></div>');
+		$('#light-swatches .swatch').removeClass('default set');
+		$('#new-swatch').before(swatch);
+		light.preview(light.color);
+	}
+}
+
+light = new Light();
+module.exports = light;

app/src/lib/ui/seq.ts

@@ -3,7 +3,6 @@
 /// <reference path ="jquery.d.ts"/> 
 
 declare var gui : any;
-declare var light : any;
 declare var cfg : any;
 declare var log : any;
 declare var w2popup : any;
@@ -49,7 +48,7 @@ class Sequence {
 	}
 	private listener (event : Event, arg : Arg) {
 		let timeStr;
-		console.log(JSON.stringify(arg))
+		//console.log(JSON.stringify(arg))
 		if (arg.start) {
 			if (typeof arg.loop !== 'undefined' && typeof arg.step !== 'undefined') {
 				this.activeStep(arg.step);

cli/data/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.20",
+  "version": "1.4.21",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy-cli",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "description": "CLI for controlling the mcopy optical printer platform",
   "main": "index.js",
   "scripts": {

data/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.20",
+  "version": "1.4.21",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -125,7 +125,7 @@
       "dev": true
     },
     "arduino": {
-      "version": "file:lib/arduino"
+      "version": "file:app/lib/arduino"
     },
     "argparse": {
       "version": "1.0.10",
@@ -166,7 +166,8 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
     },
     "aws-sign2": {
       "version": "0.7.0",
@@ -229,7 +230,7 @@
       }
     },
     "cam": {
-      "version": "file:lib/cam"
+      "version": "file:app/lib/cam"
     },
     "camelcase": {
       "version": "2.1.1",
@@ -263,7 +264,7 @@
       }
     },
     "cmd": {
-      "version": "file:lib/cmd"
+      "version": "file:app/lib/cmd"
     },
     "code-point-at": {
       "version": "1.1.0",
@@ -489,18 +490,19 @@
       "dev": true
     },
     "delay": {
-      "version": "file:lib/delay"
+      "version": "file:app/lib/delay"
     },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
     },
     "devices": {
-      "version": "file:lib/devices"
+      "version": "file:app/lib/devices"
     },
     "display": {
-      "version": "file:lib/display"
+      "version": "file:app/lib/display"
     },
     "dmd": {
       "version": "4.0.6",
@@ -676,7 +678,7 @@
       }
     },
     "filmout": {
-      "version": "file:lib/filmout"
+      "version": "file:app/lib/filmout"
     },
     "find-replace": {
       "version": "3.0.0",
@@ -722,26 +724,6 @@
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
       "dev": true
     },
-    "form-data": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
-      "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "dependencies": {
-        "combined-stream": {
-          "version": "1.0.8",
-          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-          "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-          "requires": {
-            "delayed-stream": "~1.0.0"
-          }
-        }
-      }
-    },
     "fs-extra": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
@@ -1093,7 +1075,7 @@
       }
     },
     "light": {
-      "version": "file:lib/light"
+      "version": "file:app/lib/light"
     },
     "linkify-it": {
       "version": "2.2.0",
@@ -1148,7 +1130,7 @@
       "dev": true
     },
     "log": {
-      "version": "file:lib/log"
+      "version": "file:app/lib/log"
     },
     "loud-rejection": {
       "version": "1.6.0",
@@ -1218,12 +1200,14 @@
     "mime-db": {
       "version": "1.38.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
-      "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
+      "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==",
+      "dev": true
     },
     "mime-types": {
       "version": "2.1.22",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
       "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
+      "dev": true,
       "requires": {
         "mime-db": "~1.38.0"
       }
@@ -1273,7 +1257,7 @@
       "dev": true
     },
     "mscript": {
-      "version": "file:lib/mscript"
+      "version": "file:app/lib/mscript"
     },
     "neo-async": {
       "version": "2.6.1",
@@ -1486,7 +1470,7 @@
       }
     },
     "proj": {
-      "version": "file:lib/proj"
+      "version": "file:app/lib/proj"
     },
     "psl": {
       "version": "1.1.31",
@@ -1720,10 +1704,10 @@
       "dev": true
     },
     "sequencer": {
-      "version": "file:lib/sequencer"
+      "version": "file:app/lib/sequencer"
     },
     "settings": {
-      "version": "file:lib/settings"
+      "version": "file:app/lib/settings"
     },
     "signal-exit": {
       "version": "3.0.2",
@@ -1932,7 +1916,7 @@
       }
     },
     "system": {
-      "version": "file:lib/system"
+      "version": "file:app/lib/system"
     },
     "table-layout": {
       "version": "0.4.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcopy",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "description": "Small gauge film optical printer platform",
   "main": "build.js",
   "directories": {
@@ -35,20 +35,19 @@
     "typescript": "^3.7.4"
   },
   "dependencies": {
-    "arduino": "file:lib/arduino",
+    "arduino": "file:app/lib/arduino",
-    "cam": "file:lib/cam",
+    "cam": "file:app/lib/cam",
-    "cmd": "file:lib/cmd",
+    "cmd": "file:app/lib/cmd",
-    "delay": "file:lib/delay",
+    "delay": "file:app/lib/delay",
-    "devices": "file:lib/devices",
+    "devices": "file:app/lib/devices",
-    "display": "file:lib/display",
+    "display": "file:app/lib/display",
-    "filmout": "file:lib/filmout",
+    "filmout": "file:app/lib/filmout",
-    "form-data": "^3.0.0",
+    "light": "file:app/lib/light",
-    "light": "file:lib/light",
+    "log": "file:app/lib/log",
-    "log": "file:lib/log",
+    "mscript": "file:app/lib/mscript",
-    "mscript": "file:lib/mscript",
+    "proj": "file:app/lib/proj",
-    "proj": "file:lib/proj",
+    "sequencer": "file:app/lib/sequencer",
-    "sequencer": "file:lib/sequencer",
+    "settings": "file:app/lib/settings",
-    "settings": "file:lib/settings",
+    "system": "file:app/lib/system"
-    "system": "file:lib/system"
   }
 }

processing/mcopy/cfg.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.20",
+  "version": "1.4.21",
   "ext_port": 1111,
   "profiles": {
     "mcopy": {