From c4809047d522f6dbb7ae517d8ea66ae5896c86dd Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 13 Apr 2016 03:26:35 -0400 Subject: [PATCH] Successfully change led color from colorPicker :-3 --- app/css/app.css | 45 ++++- app/css/app.less | 47 ++++- app/gulpfile.js | 2 + app/index.html | 23 ++- app/js/app.js | 387 ++++++++++++++++++++++++++++++++++-- app/src/colorPicker.data.js | 28 +++ app/src/index.js | 130 ++++++++++-- app/src/jqColor.js | 217 ++++++++++++++++++++ app/src/jsColor.js | 229 +++++++++++++++++++++ 9 files changed, 1049 insertions(+), 59 deletions(-) create mode 100644 app/src/colorPicker.data.js create mode 100644 app/src/jqColor.js create mode 100644 app/src/jsColor.js diff --git a/app/css/app.css b/app/css/app.css index 98c3eea..e47e512 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1,4 +1,4 @@ -#footer { +footer { position: fixed; bottom: 0; width: 100%; @@ -13,23 +13,52 @@ display: none; } #colors-tabs { - width: 400px; + width: 411px; } #colors-content { - width: 400px; + width: 411px; + float: left; +} +.mcopy-light { + background: #000; + width: 15px; + height: 15px; } #light-status { - width: 400px; + width: 388px; float: right; } +#light-status > div { + position: relative; + clear: both; +} +#light-status > div:after { + content: ""; + display: block; +} #light-status form { float: left; line-height: 30px; + width: 40%; } #light-status form span { width: 20px; + margin-left: 40px; display: inline-block; } +#light-status form input[type=text] { + width: 40px; +} +#preview { + margin-top: 40px; +} +#rgb { + border: 0; + border-radius: 0; + width: 411px; + font-size: 12px; + text-align: center; +} #color { width: 100px; height: 100px; @@ -37,3 +66,11 @@ background-color: #000; float: right; } +.cp-app { + position: relative !important; + border-radius: 0px !important; + top: 0px !important; +} +.cp-app .cp-memo { + bottom: 2px !important; +} diff --git a/app/css/app.less b/app/css/app.less index 4f2263e..43a2995 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -1,4 +1,4 @@ -#footer{ +footer{ position: fixed; bottom: 0; width: 100%; @@ -16,28 +16,65 @@ } #colors-tabs{ - width: 400px; + width: 411px; } #colors-content{ - width: 400px; + width: 411px; + float: left; +} +.mcopy-light{ + background: #000; + width: 15px; + height: 15px; } #light-status{ - width: 400px; + width: 388px; float: right; + >div{ + position: relative; + clear: both; + &:after{ + content: ""; + display: block; + } + } form{ float: left; line-height: 30px; + width: 40%; span{ width: 20px; + margin-left: 40px; display: inline-block; } + input[type=text]{ + width: 40px; + } } } - +#preview{ + margin-top: 40px; +} +#rgb{ + border: 0; + border-radius: 0; + width: 411px; + font-size: 12px; + text-align: center; +} #color{ width: 100px; height: 100px; margin: 0 50px; background-color: #000; float: right; +} + +.cp-app{ + position: relative !important; + border-radius: 0px !important; + top: 0px !important; + .cp-memo{ + bottom: 2px !important; + } } \ No newline at end of file diff --git a/app/gulpfile.js b/app/gulpfile.js index 151359a..38f9378 100644 --- a/app/gulpfile.js +++ b/app/gulpfile.js @@ -8,7 +8,9 @@ var scripts = [ './src/w2ui-1.4.3.min.js', './src/moment.min.js', './src/colors.js', + './src/colorPicker.data.js', './src/colorPicker.js', + './src/jsColor.js', './src/chroma.min.js', './src/index.js' ]; diff --git a/app/index.html b/app/index.html index 07520b0..ccb6d2d 100644 --- a/app/index.html +++ b/app/index.html @@ -13,19 +13,26 @@
+
+
+
-
+
-
+
+ +
-
- R
- G
- B -
-
+
+
+ R
+ G
+ B +
+
+
Preview
diff --git a/app/js/app.js b/app/js/app.js index 0255dab..6da20fb 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -740,6 +740,34 @@ else{var c,d;a(this).after('
'),a( ;(function(window, undefined){ "use strict" + // see colorPicker.html for the following encrypted variables... will only be used in buildView() + var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß"> $^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß"> $^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß"> $$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß"> $$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@"> $^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">| $$^§col2">| $$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$'). + replace(/\^/g, '
'),a( }; })(window); +(function (window) { + window.jsColorPicker = function(selectors, config) { + var renderCallback = function(colors, mode) { + var options = this, + input = options.input, + patch = options.patch, + RGB = colors.RND.rgb, + HSL = colors.RND.hsl, + AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') + + (Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '', + RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b, + RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')', + isAlpha = colors.alpha !== 1 && !options.isIE8, + colorMode = input.getAttribute('data-colorMode'); + + patch.style.cssText = + 'color:' + (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd') + ';' + // Black...??? + 'background-color:' + RGBAText + ';' + + 'filter:' + (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9 + 'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : ''); + + input.value = (colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) : + colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ? + (!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) : + ('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' + + (isAlpha ? ', ' + colors.alpha : '') + ')') + ); + + if (options.displayCallback) { + options.displayCallback(colors, mode, options); + } + }, + extractValue = function(elm) { + return elm.value || elm.getAttribute('value') || elm.style.backgroundColor || '#FFFFFF'; + }, + actionCallback = function(event, action) { + var options = this, + colorPicker = colorPickers.current; + + if (action === 'toMemory') { + var memos = colorPicker.nodes.memos, + backgroundColor = '', + opacity = 0, + cookieTXT = []; + + for (var n = 0, m = memos.length; n < m; n++) { + backgroundColor = memos[n].style.backgroundColor; + opacity = memos[n].style.opacity; + opacity = Math.round((opacity === '' ? 1 : opacity) * 100) / 100; + cookieTXT.push(backgroundColor. + replace(/, /g, ','). + replace('rgb(', 'rgba('). + replace(')', ',' + opacity + ')') + ); + } + cookieTXT = '\'' + cookieTXT.join('\',\'') + '\''; + ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT); + } else if (action === 'resizeApp') { + ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize); + } else if (action === 'modeChange') { + var mode = colorPicker.color.options.mode; + + ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z); + } + }, + createInstance = function(elm, config) { + var initConfig = { + klass: window.ColorPicker, + input: elm, + patch: elm, + isIE8: !!document.all && !document.addEventListener, // Opera??? + // *** animationSpeed: 200, + // *** draggable: true, + margin: {left: -1, top: 2}, + customBG: '#FFFFFF', + // displayCallback: displayCallback, + /* --- regular colorPicker options from this point --- */ + color: extractValue(elm), + initStyle: 'display: block', + mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h', + // memoryColors: (function(colors, config) { + // return config.noAlpha ? + // colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors; + // })($.docCookies('colorPickerMemos'), config || {}), + memoryColors: ColorPicker.docCookies('colorPickerMemos' + + ((config || {}).noAlpha ? 'NoAlpha' : '')), + size: ColorPicker.docCookies('colorPickerSize') || 1, + renderCallback: renderCallback, + actionCallback: actionCallback + }; + + for (var n in config) { + initConfig[n] = config[n]; + } + return new initConfig.klass(initConfig); + }, + doEventListeners = function(elm, multiple, off) { + var onOff = off ? 'removeEventListener' : 'addEventListener', + focusListener = function(e) { + var input = this, + position = window.ColorPicker.getOrigin(input), + index = multiple ? Array.prototype.indexOf.call(elms, this) : 0, + colorPicker = colorPickers[index] || + (colorPickers[index] = createInstance(this, config)), + options = colorPicker.color.options, + colorPickerUI = colorPicker.nodes.colorPicker; + + options.color = extractValue(elm); // brings color to default on reset + colorPickerUI.style.cssText = + 'position: absolute;' + + 'left:' + (position.left + options.margin.left) + 'px;' + + 'top:' + (position.top + +input.offsetHeight + options.margin.top) + 'px;'; + + if (!multiple) { + options.input = elm; + options.patch = elm; // check again??? + colorPicker.setColor(extractValue(elm), undefined, undefined, true); + colorPicker.saveAsBackground(); + } + colorPickers.current = colorPickers[index]; + (options.appendTo || document.body).appendChild(colorPickerUI); + setTimeout(function() { // compensating late style on onload in colorPicker + colorPickerUI.style.display = 'block'; + }, 0); + }, + mousDownListener = function(e) { + var colorPicker = colorPickers.current, + colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined), + animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0, + isColorPicker = colorPicker && (function(elm) { + while (elm) { + if ((elm.className || '').indexOf('cp-app') !== -1) return elm; + elm = elm.parentNode; + } + return false; + })(e.target), + inputIndex = Array.prototype.indexOf.call(elms, e.target); + + if (isColorPicker && Array.prototype.indexOf.call(colorPickers, isColorPicker)) { + if (e.target === colorPicker.nodes.exit) { + //colorPickerUI.style.display = 'none'; + //document.activeElement.blur(); + } else { + // ... + } + } else if (inputIndex !== -1) { + // ... + } else if (colorPickerUI) { + //colorPickerUI.style.display = 'none'; + } + }; + + elm[onOff]('focus', focusListener); + + if (!colorPickers.evt || off) { + colorPickers.evt = true; // prevent new eventListener for window + + window[onOff]('mousedown', mousDownListener); + } + }, + // this is a way to prevent data binding on HTMLElements + colorPickers = window.jsColorPicker.colorPickers || [], + elms = document.querySelectorAll(selectors), + testColors = new window.Colors({customBG: config.customBG, allMixDetails: true}); + + window.jsColorPicker.colorPickers = colorPickers; + + for (var n = 0, m = elms.length; n < m; n++) { + var elm = elms[n]; + + if (config === 'destroy') { + doEventListeners(elm, (config && config.multipleInstances), true); + if (colorPickers[n]) { + colorPickers[n].destroyAll(); + } + } else { + var color = extractValue(elm); + var value = color.split('('); + + testColors.setColor(color); + if (config && config.init) { + config.init(elm, testColors.colors); + } + elm.setAttribute('data-colorMode', value[1] ? value[0].substr(0, 3) : 'HEX'); + doEventListeners(elm, (config && config.multipleInstances), false); + if (config && config.readOnly) { + elm.readOnly = true; + } + } + }; + + return window.jsColorPicker.colorPickers; + }; + + window.ColorPicker.docCookies = function(key, val, options) { + var encode = encodeURIComponent, decode = decodeURIComponent, + cookies, n, tmp, cache = {}, + days; + + if (val === undefined) { // all about reading cookies + cookies = document.cookie.split(/;\s*/) || []; + for (n = cookies.length; n--; ) { + tmp = cookies[n].split('='); + if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value... + } + + if (!key) return cache; // return Json for easy access to all cookies + else return cache[key]; // easy access to cookies from here + } else { // write/delete cookie + options = options || {}; + + if (val === '' || options.expires < 0) { // prepare deleteing the cookie + options.expires = -1; + // options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted... + } + + if (options.expires !== undefined) { // prepare date if any + days = new Date(); + days.setDate(days.getDate() + options.expires); + } + + document.cookie = encode(key) + '=' + encode(val) + + (days ? '; expires=' + days.toUTCString() : '') + + (options.path ? '; path=' + options.path : '') + + (options.domain ? '; domain=' + options.domain : '') + + (options.secure ? '; secure' : ''); + } + }; +})(this); /* chroma.js - JavaScript library for color conversions @@ -2181,6 +2438,7 @@ EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. var remote = require('remote'), ipcRenderer = require('electron').ipcRenderer, light = {}, + nav = {}, log = {}; //console.log(ipcRenderer.sendSync('light', { 'fuck' : true }) ); @@ -2258,50 +2516,137 @@ light.init = function () { { id: 'kelvin', caption: 'Kelvin'} ], onClick: function (event) { - $('#colors-content').html('Tab: ' + event.target); + //$('#colors-content').html('Tab: ' + event.target); } }); + /*var myColorPicker = new ColorPicker({ + color: '', // see Colors... + mode: 'rgb-b', // initial mode the color picker is starting with + fps: 60, // the framerate colorPicker refreshes the display if no 'requestAnimationFrame' + delayOffset: 8, // pixels offset when shifting mouse up/down inside input fields before it starts acting as slider + CSSPrefix: 'cp-', // the standard prefix for (almost) all class declarations (HTML, CSS) + size: 0, // one of the 4 sizes: 0 = L (large), 1 = S, 2 = XS, 3 = XXS; resize to see what happens... + allMixDetails: true, // see Colors... + alphaBG: 'w', // initial 3rd layer bgColor (w = white, c = custom (customBG), b = black); + customBG: '#808080', // see Colors... + noAlpha: true, // disable alpha input (all sliders are gone and current alpha therefore locked) + cmyOnly: false, // display CMY instead of CMYK + memoryColors: [], // array of colors in memory section + opacityPositionRelative: undefined, // render opacity slider arrows in px or % + customCSS: undefined, // if external stylesheet, internal will be ignored... + appendTo: document.body, // the HTMLElement the colorPicker will be appended to on initialization + noRangeBackground: false, // performance option: doesn't render backgrounds in input fields if set to false + textRight: false, // not supported yet. Make numbers appear aligned right + noHexButton: false, // button next to HEX input could be used for some trigger... + noResize: false, // enable / disable resizing of colorPicker + noRGBr: false, // active / passive button right to RGB-R display. Disables rendering of 'real' color possibilities... + noRGBg: false, // same as above + noRGBb: false, // same as above + CSSStrength: 'div.', // not in use + devPicker: false, // uses existing HTML instead of internal template for developing + renderCallback: function(colors, mode){ + + }, // callback on after rendering (for further rendering outside colorPicker) + actionCallback: function(e, action){ + + }, // callback on any action within colorPicker (buttons, sliders, ...) + convertCallback: function(colors, type){ + var a = colors.RND.rgb; + light.display([a.r, a.g, a.b]); + + }, // see Colors... + });*/ + var colors = jsColorPicker('#rgb', { + customBG: '#222', + readOnly: true, + size: 3, + // patch: false, + 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: function(colors, type){ + var a = colors.RND.rgb, + rgb = [a.r, a.g, a.b]; + light.color = rgb; + if (light.preview) { + light.display(rgb); + light.set(rgb); + } + + } + }); + light.display([0, 0, 0]); $('#preview').on('change', function () { light.preview = $(this).prop('checked'); + if (light.preview) { + light.display(light.color); + light.set(light.color); + } else { + light.display([0,0,0]); + light.set([0,0,0]); + } }); }; //color = [0,0,0] light.set = function (rgb) { 'use strict'; light.current = rgb; - console.log('color: ' + rgb.join(',')); ipcRenderer.sendSync('light', rgb); }; light.display = function (rgb) { 'use strict'; - for (var i = 0; i < 3; i++) { + var str, + i; + for (i = 0; i < 3; i++) { rgb[i] = Math.floor(rgb[i]); $('#light-status form input').eq(i).val(rgb[i]); } - light.color = rgb; - $('#color').css('background-color', 'rgb(' + rgb.join(',') + ')'); - if (light.preview) { - light.set(rgb); + str = 'rgb(' + rgb.join(',') + ')'; + $('#color').css('background-color', str); + $('.mcopy-light').css('background-color', str); +}; +light.color_on = false; +light.color_init = function () { + 'use strict'; + if (!light.color_on) { + $('#rgb').focus(); + $('.cp-app').appendTo('#rgb-page'); + light.color_on = true; + } +}; + +nav.init = function () { + 'use strict'; + $('#toolbar').w2toolbar({ + name: 'toolbar', + items: [ + { type: 'radio', id: 'sequence', group: '1', caption: 'Sequence', icon: 'fa-star', checked: true }, + { type: 'radio', id: 'script', group: '1', caption: 'Script', icon: 'fa-star-empty' }, + { type: 'radio', id: 'controls', group: '1', caption: 'Controls', icon: 'fa-star-empty' }, + { type: 'radio', id: 'light', group: '1', caption: 'Light', icon: 'mcopy-light' }, + { type: 'spacer' }, + { type: 'button', id: 'settings', group: '1', caption: 'Settings', icon: 'fa-home' } + ], + onClick : function (event) { + nav.change(event.target); + } + }); +}; + +nav.change = function (id) { + 'use strict'; + $('.screen').hide(); + $('#' + id).show(); + if (id === 'light') { + light.color_init(); } }; var init = function () { 'use strict'; - $('#toolbar').w2toolbar({ - name: 'toolbar', - items: [ - { type: 'radio', id: 'item1', group: '1', caption: 'Sequence', icon: 'fa-star', checked: true }, - { type: 'radio', id: 'item2', group: '1', caption: 'Script', icon: 'fa-star-empty' }, - { type: 'radio', id: 'item3', group: '1', caption: 'Controls', icon: 'fa-star-empty' }, - { type: 'radio', id: 'item4', group: '1', caption: 'Light', icon: 'fa-star-empty' }, - { type: 'spacer' }, - { type: 'button', id: 'item5', group: '1', caption: 'Settings', icon: 'fa-home' } - ], - onClick : function (event) { - - } - }); + nav.init(); log.init(); light.init(); }; \ No newline at end of file diff --git a/app/src/colorPicker.data.js b/app/src/colorPicker.data.js new file mode 100644 index 0000000..e4169ba --- /dev/null +++ b/app/src/colorPicker.data.js @@ -0,0 +1,28 @@ +;(function(window, undefined){ + "use strict" + + // see colorPicker.html for the following encrypted variables... will only be used in buildView() + var _html = ('^§app alpha-bg-w">^§slds">^§sldl-1">$^§sldl-2">$^§sldl-3">$^§curm">$^§sldr-1">$^§sldr-2">$^§sldr-4">$^§curl">$^§curr">$$^§opacity">|^§opacity-slider">$$$^§memo">^§raster">$^§raster-bg">$|$|$|$|$|$|$|$|$^§memo-store">$^§memo-cursor">$$^§panel">^§hsv">^hsl-mode §ß">$^hsv-h-ß §ß">H$^hsv-h-~ §~">-^§nsarrow">$$^hsl-h-@ §@">H$^hsv-s-ß §ß">S$^hsv-s-~ §~">-$^hsl-s-@ §@">S$^hsv-v-ß §ß">B$^hsv-v-~ §~">-$^hsl-l-@ §@">L$$^§hsl §hide">^hsv-mode §ß">$^hsl-h-ß §ß">H$^hsl-h-~ §~">-$^hsv-h-@ §@">H$^hsl-s-ß §ß">S$^hsl-s-~ §~">-$^hsv-s-@ §@">S$^hsl-l-ß §ß">L$^hsl-l-~ §~">-$^hsv-v-@ §@">B$$^§rgb">^rgb-r-ß §ß">R$^rgb-r-~ §~">-$^rgb-r-@ §ß"> $^rgb-g-ß §ß">G$^rgb-g-~ §~">-$^rgb-g-@ §ß"> $^rgb-b-ß §ß">B$^rgb-b-~ §~">-$^rgb-b-@ §ß"> $$^§cmyk">^Lab-mode §ß">$^cmyk-c-ß §@">C$^cmyk-c-~ §~">-$^Lab-L-@ §@">L$^cmyk-m-ß §@">M$^cmyk-m-~ §~">-$^Lab-a-@ §@">a$^cmyk-y-ß §@">Y$^cmyk-y-~ §~">-$^Lab-b-@ §@">b$^cmyk-k-ß §@">K$^cmyk-k-~ §~">-$^Lab-x-@ §ß"> $$^§Lab §hide">^cmyk-mode §ß">$^Lab-L-ß §@">L$^Lab-L-~ §~">-$^cmyk-c-@ §@">C$^Lab-a-ß §@">a$^Lab-a-~ §~">-$^cmyk-m-@ §@">M$^Lab-b-ß §@">b$^Lab-b-~ §~">-$^cmyk-y-@ §@">Y$^Lab-x-ß §@"> $^Lab-x-~ §~">-$^cmyk-k-@ §@">K$$^§alpha">^alpha-ß §ß">A$^alpha-~ §~">-$^alpha-@ §ß">W$$^§HEX">^HEX-ß §ß">#$^HEX-~ §~">-$^HEX-@ §ß">M$$^§ctrl">^§raster">$^§cont">$^§cold">$^§col1">| $$^§col2">| $$^§bres">RESET$^§bsav">SAVE$$$^§exit">$^§resize">$^§resizer">|$$$'). + replace(/\^/g, '
0.22 ? '#222' : '#ddd'; + }, + convertCallback: function(colors, type){ + var a = colors.RND.rgb, + rgb = [a.r, a.g, a.b]; + light.color = rgb; + if (light.preview) { + light.display(rgb); + light.set(rgb); + } + + } + }); + light.display([0, 0, 0]); $('#preview').on('change', function () { light.preview = $(this).prop('checked'); + if (light.preview) { + light.display(light.color); + light.set(light.color); + } else { + light.display([0,0,0]); + light.set([0,0,0]); + } }); }; //color = [0,0,0] light.set = function (rgb) { 'use strict'; light.current = rgb; - console.log('color: ' + rgb.join(',')); ipcRenderer.sendSync('light', rgb); }; light.display = function (rgb) { 'use strict'; - for (var i = 0; i < 3; i++) { + var str, + i; + for (i = 0; i < 3; i++) { rgb[i] = Math.floor(rgb[i]); $('#light-status form input').eq(i).val(rgb[i]); } - light.color = rgb; - $('#color').css('background-color', 'rgb(' + rgb.join(',') + ')'); - if (light.preview) { - light.set(rgb); + str = 'rgb(' + rgb.join(',') + ')'; + $('#color').css('background-color', str); + $('.mcopy-light').css('background-color', str); +}; +light.color_on = false; +light.color_init = function () { + 'use strict'; + if (!light.color_on) { + $('#rgb').focus(); + $('.cp-app').appendTo('#rgb-page'); + light.color_on = true; + } +}; + +nav.init = function () { + 'use strict'; + $('#toolbar').w2toolbar({ + name: 'toolbar', + items: [ + { type: 'radio', id: 'sequence', group: '1', caption: 'Sequence', icon: 'fa-star', checked: true }, + { type: 'radio', id: 'script', group: '1', caption: 'Script', icon: 'fa-star-empty' }, + { type: 'radio', id: 'controls', group: '1', caption: 'Controls', icon: 'fa-star-empty' }, + { type: 'radio', id: 'light', group: '1', caption: 'Light', icon: 'mcopy-light' }, + { type: 'spacer' }, + { type: 'button', id: 'settings', group: '1', caption: 'Settings', icon: 'fa-home' } + ], + onClick : function (event) { + nav.change(event.target); + } + }); +}; + +nav.change = function (id) { + 'use strict'; + $('.screen').hide(); + $('#' + id).show(); + if (id === 'light') { + light.color_init(); } }; var init = function () { 'use strict'; - $('#toolbar').w2toolbar({ - name: 'toolbar', - items: [ - { type: 'radio', id: 'item1', group: '1', caption: 'Sequence', icon: 'fa-star', checked: true }, - { type: 'radio', id: 'item2', group: '1', caption: 'Script', icon: 'fa-star-empty' }, - { type: 'radio', id: 'item3', group: '1', caption: 'Controls', icon: 'fa-star-empty' }, - { type: 'radio', id: 'item4', group: '1', caption: 'Light', icon: 'fa-star-empty' }, - { type: 'spacer' }, - { type: 'button', id: 'item5', group: '1', caption: 'Settings', icon: 'fa-home' } - ], - onClick : function (event) { - - } - }); + nav.init(); log.init(); light.init(); }; \ No newline at end of file diff --git a/app/src/jqColor.js b/app/src/jqColor.js new file mode 100644 index 0000000..af3cddf --- /dev/null +++ b/app/src/jqColor.js @@ -0,0 +1,217 @@ +(function ($, window) { + $.fn.extend({ + colorPicker: function(config) { + var renderCallback = function(colors, mode) { + var options = this, + $input = $(options.input), + $patch = $(options.patch), + RGB = colors.RND.rgb, + HSL = colors.RND.hsl, + AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') + + (Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '', + RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b, + RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')', + isAlpha = colors.alpha !== 1 && !options.isIE8, + colorMode = $input.data('colorMode'); + + $patch.css({ + 'color': (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'), // Black...??? + 'background-color': RGBAText, + 'filter' : (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9 + 'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '') + }); + + $input.val(colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) : + colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ? + (!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) : + ('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' + + (isAlpha ? ', ' + colors.alpha : '') + ')') + ); + + if (options.displayCallback) { + options.displayCallback(colors, mode, options); + } + }, + actionCallback = function(event, action) { + var options = this, + colorPicker = colorPickers.current; + + if (action === 'toMemery') { + var memos = colorPicker.nodes.memos, + $memo, + backgroundColor = '', + opacity = 0, + cookieTXT = []; + + for (var n = 0, m = memos.length; n < m; n++) { + $memo = $(memos[n]); + backgroundColor = $memo.css('background-color'); + opacity = Math.round($memo.css('opacity') * 100) / 100; + cookieTXT.push(backgroundColor. + replace(/, /g, ','). + replace('rgb(', 'rgba('). + replace(')', ',' + opacity + ')') + ); + } + cookieTXT = '\'' + cookieTXT.join('\',\'') + '\''; + $.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT); + } else if (action === 'resizeApp') { + $.docCookies('colorPickerSize', colorPicker.color.options.currentSize); + } else if (action === 'modeChange') { + var mode = colorPicker.color.options.mode; + + $.docCookies('colorPickerMode', mode.type + '-' + mode.z); + } + }, + createInstance = function(elm, config) { + var initConfig = { + klass: window.ColorPicker, + input: elm, + patch: elm, + isIE8: !!document.all && !document.addEventListener, // Opera??? + animationSpeed: 200, + draggable: true, + margin: {left: -1, top: 2}, + customBG: '#FFFFFF', + // displayCallback: displayCallback, + /* --- regular colorPicker options from this point --- */ + color: elm.value, + initStyle: 'display: none', + mode: $.docCookies('colorPickerMode') || 'hsv-h', + // memoryColors: (function(colors, config) { + // return config.noAlpha ? + // colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors; + // })($.docCookies('colorPickerMemos'), config || {}), + memoryColors: $.docCookies('colorPickerMemos' + ((config || {}).noAlpha ? 'NoAlpha' : '')), + size: $.docCookies('colorPickerSize') || 1, + renderCallback: renderCallback, + actionCallback: actionCallback + }; + + for (var n in config) { + initConfig[n] = config[n]; + } + return new initConfig.klass(initConfig); + }, + doEventListeners = function(elm, multiple, off) { + var onOff = off ? 'off' : 'on'; + + $(elm)[onOff]('focus.colorPicker', function(e) { + var $input = $(this), + position = $input.offset(), + index = multiple ? $(that).index(this) : 0, + colorPicker = colorPickers[index] || + (colorPickers[index] = createInstance(this, config)), + options = colorPicker.color.options, + $colorPicker = $.ui && options.draggable ? + $(colorPicker.nodes.colorPicker).draggable( + {cancel: '.' + options.CSSPrefix + 'app div'} + ) : $(colorPicker.nodes.colorPicker); + + options.color = elm.value; // brings color to default on reset + $colorPicker.css({ + 'position': 'absolute', + 'left': position.left + options.margin.left, + 'top': position.top + +$input.outerHeight(true) + options.margin.top + }); + if (!multiple) { + options.input = elm; + options.patch = elm; // check again??? + colorPicker.setColor(elm.value, undefined, undefined, true); + colorPicker.saveAsBackground(); + } + colorPickers.current = colorPickers[index]; + $(options.appendTo || document.body).append($colorPicker); + setTimeout(function() { // compensating late style on onload in colorPicker + $colorPicker.show(colorPicker.color.options.animationSpeed); + }, 0); + }); + + $(window)[onOff]('mousedown.colorPicker', function(e) { + var colorPicker = colorPickers.current, + $colorPicker = $(colorPicker ? colorPicker.nodes.colorPicker : undefined), + animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0, + isColorPicker = $(e.target).closest('.cp-app')[0], + inputIndex = $(that).index(e.target); + + if (isColorPicker && colorPicker && $(colorPickers).index(isColorPicker)) { + if (e.target === colorPicker.nodes.exit) { + $colorPicker.hide(animationSpeed); + $(':focus').trigger('blur'); + } else { + // buttons on colorPicker don't work any more + // $(document.body).append(isColorPicker); + } + } else if (inputIndex !== -1) { + // input fireld + } else { + $colorPicker.hide(animationSpeed); + } + }); + }, + that = this, + colorPickers = $.fn.colorPicker.colorPickers || [], // this is a way to prevent data binding on HTMLElements + testColors = new window.Colors({ + customBG: (config && config.customBG) || '#FFFFFF', + allMixDetails: true + }); + + $.fn.colorPicker.colorPickers = colorPickers; + + $(this).each(function(idx, elm) { + // doEventListeners(elm, (config && config.multipleInstances), true); + $(elm).off('.colorPicker'); + $(window).off('.colorPicker'); + if (config !== 'destroy') { + var value = elm.value.split('('); + $(elm).data('colorMode', value[1] ? value[0].substr(0, 3) : 'HEX'); + doEventListeners(elm, (config && config.multipleInstances), false); + if (config && config.readOnly) { + elm.readOnly = true; + } + testColors.setColor(elm.value); + if (config && config.init) { + config.init(elm, testColors.colors); + } + } + }); + + return this; + } + }); + + $.docCookies = function(key, val, options) { + var encode = encodeURIComponent, decode = decodeURIComponent, + cookies, n, tmp, cache = {}, + days; + + if (val === undefined) { // all about reading cookies + cookies = document.cookie.split('; ') || []; // easier for decoding then with RegExp search // .split(/;\s*/) + for (n = cookies.length; n--; ) { + tmp = cookies[n].split('='); + if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value... + } + + if (!key) return cache; // return Json for easy access to all cookies + else return cache[key]; // easy access to cookies from here + } else { // write/delete cookie + options = options || {}; + + if (val === '' || options.expires < 0) { // prepare deleteing the cookie + options.expires = -1; + // options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted... + } + + if (options.expires !== undefined) { // prepare date if any + days = new Date(); + days.setDate(days.getDate() + options.expires); + } + + document.cookie = encode(key) + '=' + encode(val) + + (days ? '; expires=' + days.toUTCString() : '') + + (options.path ? '; path=' + options.path : '') + + (options.domain ? '; domain=' + options.domain : '') + + (options.secure ? '; secure' : ''); + } + }; +})(jQuery, this); \ No newline at end of file diff --git a/app/src/jsColor.js b/app/src/jsColor.js new file mode 100644 index 0000000..babdada --- /dev/null +++ b/app/src/jsColor.js @@ -0,0 +1,229 @@ +(function (window) { + window.jsColorPicker = function(selectors, config) { + var renderCallback = function(colors, mode) { + var options = this, + input = options.input, + patch = options.patch, + RGB = colors.RND.rgb, + HSL = colors.RND.hsl, + AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') + + (Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '', + RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b, + RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')', + isAlpha = colors.alpha !== 1 && !options.isIE8, + colorMode = input.getAttribute('data-colorMode'); + + patch.style.cssText = + 'color:' + (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd') + ';' + // Black...??? + 'background-color:' + RGBAText + ';' + + 'filter:' + (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9 + 'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : ''); + + input.value = (colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) : + colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ? + (!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) : + ('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' + + (isAlpha ? ', ' + colors.alpha : '') + ')') + ); + + if (options.displayCallback) { + options.displayCallback(colors, mode, options); + } + }, + extractValue = function(elm) { + return elm.value || elm.getAttribute('value') || elm.style.backgroundColor || '#FFFFFF'; + }, + actionCallback = function(event, action) { + var options = this, + colorPicker = colorPickers.current; + + if (action === 'toMemory') { + var memos = colorPicker.nodes.memos, + backgroundColor = '', + opacity = 0, + cookieTXT = []; + + for (var n = 0, m = memos.length; n < m; n++) { + backgroundColor = memos[n].style.backgroundColor; + opacity = memos[n].style.opacity; + opacity = Math.round((opacity === '' ? 1 : opacity) * 100) / 100; + cookieTXT.push(backgroundColor. + replace(/, /g, ','). + replace('rgb(', 'rgba('). + replace(')', ',' + opacity + ')') + ); + } + cookieTXT = '\'' + cookieTXT.join('\',\'') + '\''; + ColorPicker.docCookies('colorPickerMemos' + (options.noAlpha ? 'NoAlpha' : ''), cookieTXT); + } else if (action === 'resizeApp') { + ColorPicker.docCookies('colorPickerSize', colorPicker.color.options.currentSize); + } else if (action === 'modeChange') { + var mode = colorPicker.color.options.mode; + + ColorPicker.docCookies('colorPickerMode', mode.type + '-' + mode.z); + } + }, + createInstance = function(elm, config) { + var initConfig = { + klass: window.ColorPicker, + input: elm, + patch: elm, + isIE8: !!document.all && !document.addEventListener, // Opera??? + // *** animationSpeed: 200, + // *** draggable: true, + margin: {left: -1, top: 2}, + customBG: '#FFFFFF', + // displayCallback: displayCallback, + /* --- regular colorPicker options from this point --- */ + color: extractValue(elm), + initStyle: 'display: block', + mode: ColorPicker.docCookies('colorPickerMode') || 'hsv-h', + // memoryColors: (function(colors, config) { + // return config.noAlpha ? + // colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors; + // })($.docCookies('colorPickerMemos'), config || {}), + memoryColors: ColorPicker.docCookies('colorPickerMemos' + + ((config || {}).noAlpha ? 'NoAlpha' : '')), + size: ColorPicker.docCookies('colorPickerSize') || 1, + renderCallback: renderCallback, + actionCallback: actionCallback + }; + + for (var n in config) { + initConfig[n] = config[n]; + } + return new initConfig.klass(initConfig); + }, + doEventListeners = function(elm, multiple, off) { + var onOff = off ? 'removeEventListener' : 'addEventListener', + focusListener = function(e) { + var input = this, + position = window.ColorPicker.getOrigin(input), + index = multiple ? Array.prototype.indexOf.call(elms, this) : 0, + colorPicker = colorPickers[index] || + (colorPickers[index] = createInstance(this, config)), + options = colorPicker.color.options, + colorPickerUI = colorPicker.nodes.colorPicker; + + options.color = extractValue(elm); // brings color to default on reset + colorPickerUI.style.cssText = + 'position: absolute;' + + 'left:' + (position.left + options.margin.left) + 'px;' + + 'top:' + (position.top + +input.offsetHeight + options.margin.top) + 'px;'; + + if (!multiple) { + options.input = elm; + options.patch = elm; // check again??? + colorPicker.setColor(extractValue(elm), undefined, undefined, true); + colorPicker.saveAsBackground(); + } + colorPickers.current = colorPickers[index]; + (options.appendTo || document.body).appendChild(colorPickerUI); + setTimeout(function() { // compensating late style on onload in colorPicker + colorPickerUI.style.display = 'block'; + }, 0); + }, + mousDownListener = function(e) { + var colorPicker = colorPickers.current, + colorPickerUI = (colorPicker ? colorPicker.nodes.colorPicker : undefined), + animationSpeed = colorPicker ? colorPicker.color.options.animationSpeed : 0, + isColorPicker = colorPicker && (function(elm) { + while (elm) { + if ((elm.className || '').indexOf('cp-app') !== -1) return elm; + elm = elm.parentNode; + } + return false; + })(e.target), + inputIndex = Array.prototype.indexOf.call(elms, e.target); + + if (isColorPicker && Array.prototype.indexOf.call(colorPickers, isColorPicker)) { + if (e.target === colorPicker.nodes.exit) { + //colorPickerUI.style.display = 'none'; + //document.activeElement.blur(); + } else { + // ... + } + } else if (inputIndex !== -1) { + // ... + } else if (colorPickerUI) { + //colorPickerUI.style.display = 'none'; + } + }; + + elm[onOff]('focus', focusListener); + + if (!colorPickers.evt || off) { + colorPickers.evt = true; // prevent new eventListener for window + + window[onOff]('mousedown', mousDownListener); + } + }, + // this is a way to prevent data binding on HTMLElements + colorPickers = window.jsColorPicker.colorPickers || [], + elms = document.querySelectorAll(selectors), + testColors = new window.Colors({customBG: config.customBG, allMixDetails: true}); + + window.jsColorPicker.colorPickers = colorPickers; + + for (var n = 0, m = elms.length; n < m; n++) { + var elm = elms[n]; + + if (config === 'destroy') { + doEventListeners(elm, (config && config.multipleInstances), true); + if (colorPickers[n]) { + colorPickers[n].destroyAll(); + } + } else { + var color = extractValue(elm); + var value = color.split('('); + + testColors.setColor(color); + if (config && config.init) { + config.init(elm, testColors.colors); + } + elm.setAttribute('data-colorMode', value[1] ? value[0].substr(0, 3) : 'HEX'); + doEventListeners(elm, (config && config.multipleInstances), false); + if (config && config.readOnly) { + elm.readOnly = true; + } + } + }; + + return window.jsColorPicker.colorPickers; + }; + + window.ColorPicker.docCookies = function(key, val, options) { + var encode = encodeURIComponent, decode = decodeURIComponent, + cookies, n, tmp, cache = {}, + days; + + if (val === undefined) { // all about reading cookies + cookies = document.cookie.split(/;\s*/) || []; + for (n = cookies.length; n--; ) { + tmp = cookies[n].split('='); + if (tmp[0]) cache[decode(tmp.shift())] = decode(tmp.join('=')); // there might be '='s in the value... + } + + if (!key) return cache; // return Json for easy access to all cookies + else return cache[key]; // easy access to cookies from here + } else { // write/delete cookie + options = options || {}; + + if (val === '' || options.expires < 0) { // prepare deleteing the cookie + options.expires = -1; + // options.path = options.domain = options.secure = undefined; // to make shure the cookie gets deleted... + } + + if (options.expires !== undefined) { // prepare date if any + days = new Date(); + days.setDate(days.getDate() + options.expires); + } + + document.cookie = encode(key) + '=' + encode(val) + + (days ? '; expires=' + days.toUTCString() : '') + + (options.path ? '; path=' + options.path : '') + + (options.domain ? '; domain=' + options.domain : '') + + (options.secure ? '; secure' : ''); + } + }; +})(this); \ No newline at end of file