From fcee9f38c3121b38f91a1ac2a5656e7acc697bde Mon Sep 17 00:00:00 2001 From: Patrick Balsiger Date: Thu, 22 Nov 2018 13:01:26 +0100 Subject: [PATCH] improved ws, chat component --- data/gradients.js | 16 - data/gradients.json | 1347 +++++++++++++++++++++++++++++ data/index.html | 22 +- data/script.js | 154 +++- data/styles.css | 21 + src/app/components/Chat/Chat.html | 18 + src/app/components/Chat/Chat.js | 60 ++ src/app/components/ParamColor.js | 3 +- src/app/components/ParamSelect.js | 20 +- src/app/components/ParamSlider.js | 16 +- src/app/components/ParamWs.js | 4 +- src/app/components/exports.js | 1 + src/app/main.js | 29 +- src/pages/gradients.js | 16 - src/pages/gradients.json | 1347 +++++++++++++++++++++++++++++ src/pages/index.html | 22 +- src/styles/chat.less | 23 + src/styles/main.less | 2 + 18 files changed, 3025 insertions(+), 96 deletions(-) delete mode 100644 data/gradients.js create mode 100644 data/gradients.json create mode 100644 src/app/components/Chat/Chat.html create mode 100644 src/app/components/Chat/Chat.js delete mode 100644 src/pages/gradients.js create mode 100644 src/pages/gradients.json create mode 100644 src/styles/chat.less diff --git a/data/gradients.js b/data/gradients.js deleted file mode 100644 index 994eba3..0000000 --- a/data/gradients.js +++ /dev/null @@ -1,16 +0,0 @@ -const gradients = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ]; - - - -// [{"text": "foo", "value": "0"}] - -// let msg = JSON.stringify({ -// topic: 'pixels/state', -// payload: JSON.stringify({ -// brightness: 32, -// color: parseInt(gradient[0].replace('#', '0x'), 16), -// color2: parseInt(gradient[1].replace('#', '0x'), 16), -// totalSteps: 100, -// pattern: 5 -// }) -// }); \ No newline at end of file diff --git a/data/gradients.json b/data/gradients.json new file mode 100644 index 0000000..d184f8d --- /dev/null +++ b/data/gradients.json @@ -0,0 +1,1347 @@ +[ + { + "text": "None", + "value": ["#000000", "#000000"] + }, + { + "text": "Blu", + "value": ["#00416A", "#E4E5E6"] + }, + { + "text": "Ver", + "value": ["#FFE000", "#799F0C"] + }, + { + "text": "Ver Black", + "value": ["#F7F8F8", "#ACBB78"] + }, + { + "text": "Combi", + "value": ["#00416A", "#799F0C", "#FFE000"] + }, + { + "text": "Anwar", + "value": ["#334d50", "#cbcaa5"] + }, + { + "text": "Bluelagoo", + "value": ["#0052D4", "#4364F7", "#6FB1FC"] + }, + { + "text": "Lunada", + "value": ["#5433FF", "#20BDFF", "#A5FECB"] + }, + { + "text": "Reaqua", + "value": ["#799F0C", "#ACBB78"] + }, + { + "text": "Mango", + "value": ["#ffe259", "#ffa751"] + }, + { + "text": "Bupe", + "value": ["#00416A", "#E4E5E6"] + }, + { + "text": "Rea", + "value": ["#FFE000", "#799F0C"] + }, + { + "text": "Windy", + "value": ["#acb6e5", "#86fde8"] + }, + { + "text": "Royal Blue", + "value": ["#536976", "#292E49"] + }, + { + "text": "Royal Blue + Petrol", + "value": ["#BBD2C5", "#536976", "#292E49"] + }, + { + "text": "Copper", + "value": ["#B79891", "#94716B"] + }, + { + "text": "Anamnisar", + "value": ["#9796f0", "#fbc7d4"] + }, + { + "text": "Petrol", + "value": ["#BBD2C5", "#536976"] + }, + { + "text": "Sky", + "value": ["#076585", "#fff"] + }, + { + "text": "Sel", + "value": ["#00467F", "#A5CC82"] + }, + { + "text": "Skyline", + "value": ["#1488CC", "#2B32B2"] + }, + { + "text": "DIMIGO", + "value": ["#ec008c", "#fc6767"] + }, + { + "text": "Purple Love", + "value": ["#cc2b5e", "#753a88"] + }, + { + "text": "Sexy Blue", + "value": ["#2193b0", "#6dd5ed"] + }, + { + "text": "Blooker20", + "value": ["#e65c00", "#F9D423"] + }, + { + "text": "Sea Blue", + "value": ["#2b5876", "#4e4376"] + }, + { + "text": "Nimvelo", + "value": ["#314755", "#26a0da"] + }, + { + "text": "Hazel", + "value": ["#77A1D3", "#79CBCA", "#E684AE"] + }, + { + "text": "Noon to Dusk", + "value": ["#ff6e7f", "#bfe9ff"] + }, + { + "text": "YouTube", + "value": ["#e52d27", "#b31217"] + }, + { + "text": "Cool Brown", + "value": ["#603813", "#b29f94"] + }, + { + "text": "Harmonic Energy", + "value": ["#16A085", "#F4D03F"] + }, + { + "text": "Playing with Reds", + "value": ["#D31027", "#EA384D"] + }, + { + "text": "Sunny Days", + "value": ["#EDE574", "#E1F5C4"] + }, + { + "text": "Green Beach", + "value": ["#02AAB0", "#00CDAC"] + }, + { + "text": "Intuitive Purple", + "value": ["#DA22FF", "#9733EE"] + }, + { + "text": "Emerald Water", + "value": ["#348F50", "#56B4D3"] + }, + { + "text": "Lemon Twist", + "value": ["#3CA55C", "#B5AC49"] + }, + { + "text": "Monte Carlo", + "value": ["#CC95C0", "#DBD4B4", "#7AA1D2"] + }, + { + "text": "Horizon", + "value": ["#003973", "#E5E5BE"] + }, + { + "text": "Rose Water", + "value": ["#E55D87", "#5FC3E4"] + }, + { + "text": "Frozen", + "value": ["#403B4A", "#E7E9BB"] + }, + { + "text": "Mango Pulp", + "value": ["#F09819", "#EDDE5D"] + }, + { + "text": "Bloody Mary", + "value": ["#FF512F", "#DD2476"] + }, + { + "text": "Aubergine", + "value": ["#AA076B", "#61045F"] + }, + { + "text": "Aqua Marine", + "value": ["#1A2980", "#26D0CE"] + }, + { + "text": "Sunrise", + "value": ["#FF512F", "#F09819"] + }, + { + "text": "Purple Paradise", + "value": ["#1D2B64", "#F8CDDA"] + }, + { + "text": "Stripe", + "value": ["#1FA2FF", "#12D8FA", "#A6FFCB"] + }, + { + "text": "Sea Weed", + "value": ["#4CB8C4", "#3CD3AD"] + }, + { + "text": "Pinky", + "value": ["#DD5E89", "#F7BB97"] + }, + { + "text": "Cherry", + "value": ["#EB3349", "#F45C43"] + }, + { + "text": "Mojito", + "value": ["#1D976C", "#93F9B9"] + }, + { + "text": "Juicy Orange", + "value": ["#FF8008", "#FFC837"] + }, + { + "text": "Mirage", + "value": ["#16222A", "#3A6073"] + }, + { + "text": "Steel Gray", + "value": ["#1F1C2C", "#928DAB"] + }, + { + "text": "Kashmir", + "value": ["#614385", "#516395"] + }, + { + "text": "Electric Violet", + "value": ["#4776E6", "#8E54E9"] + }, + { + "text": "Venice Blue", + "value": ["#085078", "#85D8CE"] + }, + { + "text": "Bora Bora", + "value": ["#2BC0E4", "#EAECC6"] + }, + { + "text": "Moss", + "value": ["#134E5E", "#71B280"] + }, + { + "text": "Shroom Haze", + "value": ["#5C258D", "#4389A2"] + }, + { + "text": "Mystic", + "value": ["#757F9A", "#D7DDE8"] + }, + { + "text": "Midnight City", + "value": ["#232526", "#414345"] + }, + { + "text": "Sea Blizz", + "value": ["#1CD8D2", "#93EDC7"] + }, + { + "text": "Opa", + "value": ["#3D7EAA", "#FFE47A"] + }, + { + "text": "Titanium", + "value": ["#283048", "#859398"] + }, + { + "text": "Mantle", + "value": ["#24C6DC", "#514A9D"] + }, + { + "text": "Dracula", + "value": ["#DC2424", "#4A569D"] + }, + { + "text": "Peach", + "value": ["#ED4264", "#FFEDBC"] + }, + { + "text": "Moonrise", + "value": ["#DAE2F8", "#D6A4A4"] + }, + { + "text": "Clouds", + "value": ["#ECE9E6", "#FFFFFF"] + }, + { + "text": "Stellar", + "value": ["#7474BF", "#348AC7"] + }, + { + "text": "Bourbon", + "value": ["#EC6F66", "#F3A183"] + }, + { + "text": "Calm Darya", + "value": ["#5f2c82", "#49a09d"] + }, + { + "text": "Influenza", + "value": ["#C04848", "#480048"] + }, + { + "text": "Shrimpy", + "value": ["#e43a15", "#e65245"] + }, + { + "text": "Army", + "value": ["#414d0b", "#727a17"] + }, + { + "text": "Miaka", + "value": ["#FC354C", "#0ABFBC"] + }, + { + "text": "Pinot Noir", + "value": ["#4b6cb7", "#182848"] + }, + { + "text": "Day Tripper", + "value": ["#f857a6", "#ff5858"] + }, + { + "text": "Namn", + "value": ["#a73737", "#7a2828"] + }, + { + "text": "Blurry Beach", + "value": ["#d53369", "#cbad6d"] + }, + { + "text": "Vasily", + "value": ["#e9d362", "#333333"] + }, + { + "text": "A Lost Memory", + "value": ["#DE6262", "#FFB88C"] + }, + { + "text": "Petrichor", + "value": ["#666600", "#999966"] + }, + { + "text": "Jonquil", + "value": ["#FFEEEE", "#DDEFBB"] + }, + { + "text": "Sirius Tamed", + "value": ["#EFEFBB", "#D4D3DD"] + }, + { + "text": "Kyoto", + "value": ["#c21500", "#ffc500"] + }, + { + "text": "Misty Meadow", + "value": ["#215f00", "#e4e4d9"] + }, + { + "text": "Aqualicious", + "value": ["#50C9C3", "#96DEDA"] + }, + { + "text": "Moor", + "value": ["#616161", "#9bc5c3"] + }, + { + "text": "Almost", + "value": ["#ddd6f3", "#faaca8"] + }, + { + "text": "Forever Lost", + "value": ["#5D4157", "#A8CABA"] + }, + { + "text": "Winter", + "value": ["#E6DADA", "#274046"] + }, + { + "text": "Nelson", + "value": ["#f2709c", "#ff9472"] + }, + { + "text": "Autumn", + "value": ["#DAD299", "#B0DAB9"] + }, + { + "text": "Candy", + "value": ["#D3959B", "#BFE6BA"] + }, + { + "text": "Reef", + "value": ["#00d2ff", "#3a7bd5"] + }, + { + "text": "The Strain", + "value": ["#870000", "#190A05"] + }, + { + "text": "Dirty Fog", + "value": ["#B993D6", "#8CA6DB"] + }, + { + "text": "Earthly", + "value": ["#649173", "#DBD5A4"] + }, + { + "text": "Virgin", + "value": ["#C9FFBF", "#FFAFBD"] + }, + { + "text": "Ash", + "value": ["#606c88", "#3f4c6b"] + }, + { + "text": "Cherryblossoms", + "value": ["#FBD3E9", "#BB377D"] + }, + { + "text": "Parklife", + "value": ["#ADD100", "#7B920A"] + }, + { + "text": "Dance To Forget", + "value": ["#FF4E50", "#F9D423"] + }, + { + "text": "Starfall", + "value": ["#F0C27B", "#4B1248"] + }, + { + "text": "Red Mist", + "value": ["#000000", "#e74c3c"] + }, + { + "text": "Teal Love", + "value": ["#AAFFA9", "#11FFBD"] + }, + { + "text": "Neon Life", + "value": ["#B3FFAB", "#12FFF7"] + }, + { + "text": "Man of Steel", + "value": ["#780206", "#061161"] + }, + { + "text": "Amethyst", + "value": ["#9D50BB", "#6E48AA"] + }, + { + "text": "Cheer Up Emo Kid", + "value": ["#556270", "#FF6B6B"] + }, + { + "text": "Shore", + "value": ["#70e1f5", "#ffd194"] + }, + { + "text": "Facebook Messenger", + "value": ["#00c6ff", "#0072ff"] + }, + { + "text": "SoundCloud", + "value": ["#fe8c00", "#f83600"] + }, + { + "text": "Behongo", + "value": ["#52c234", "#061700"] + }, + { + "text": "ServQuick", + "value": ["#485563", "#29323c"] + }, + { + "text": "Friday", + "value": ["#83a4d4", "#b6fbff"] + }, + { + "text": "Martini", + "value": ["#FDFC47", "#24FE41"] + }, + { + "text": "Metallic Toad", + "value": ["#abbaab", "#ffffff"] + }, + { + "text": "Between The Clouds", + "value": ["#73C8A9", "#373B44"] + }, + { + "text": "Crazy Orange I", + "value": ["#D38312", "#A83279"] + }, + { + "text": "Hersheys", + "value": ["#1e130c", "#9a8478"] + }, + { + "text": "Talking To Mice Elf", + "value": ["#948E99", "#2E1437"] + }, + { + "text": "Purple Bliss", + "value": ["#360033", "#0b8793"] + }, + { + "text": "Predawn", + "value": ["#FFA17F", "#00223E"] + }, + { + "text": "Endless River", + "value": ["#43cea2", "#185a9d"] + }, + { + "text": "Pastel Orange at the Sun", + "value": ["#ffb347", "#ffcc33"] + }, + { + "text": "Twitch", + "value": ["#6441A5", "#2a0845"] + }, + { + "text": "Atlas", + "value": ["#FEAC5E", "#C779D0", "#4BC0C8"] + }, + { + "text": "Instagram", + "value": ["#833ab4", "#fd1d1d", "#fcb045"] + }, + { + "text": "Flickr", + "value": ["#ff0084", "#33001b"] + }, + { + "text": "Vine", + "value": ["#00bf8f", "#001510"] + }, + { + "text": "Turquoise flow", + "value": ["#136a8a", "#267871"] + }, + { + "text": "Portrait", + "value": ["#8e9eab", "#eef2f3"] + }, + { + "text": "Virgin America", + "value": ["#7b4397", "#dc2430"] + }, + { + "text": "Koko Caramel", + "value": ["#D1913C", "#FFD194"] + }, + { + "text": "Fresh Turboscent", + "value": ["#F1F2B5", "#135058"] + }, + { + "text": "Green to dark", + "value": ["#6A9113", "#141517"] + }, + { + "text": "Ukraine", + "value": ["#004FF9", "#FFF94C"] + }, + { + "text": "Curiosity blue", + "value": ["#525252", "#3d72b4"] + }, + { + "text": "Dark Knight", + "value": ["#BA8B02", "#181818"] + }, + { + "text": "Piglet", + "value": ["#ee9ca7", "#ffdde1"] + }, + { + "text": "Lizard", + "value": ["#304352", "#d7d2cc"] + }, + { + "text": "Sage Persuasion", + "value": ["#CCCCB2", "#757519"] + }, + { + "text": "Between Night and Day", + "value": ["#2c3e50", "#3498db"] + }, + { + "text": "Timber", + "value": ["#fc00ff", "#00dbde"] + }, + { + "text": "Passion", + "value": ["#e53935", "#e35d5b"] + }, + { + "text": "Clear Sky", + "value": ["#005C97", "#363795"] + }, + { + "text": "Master Card", + "value": ["#f46b45", "#eea849"] + }, + { + "text": "Back To Earth", + "value": ["#00C9FF", "#92FE9D"] + }, + { + "text": "Deep Purple", + "value": ["#673AB7", "#512DA8"] + }, + { + "text": "Little Leaf", + "value": ["#76b852", "#8DC26F"] + }, + { + "text": "Netflix", + "value": ["#8E0E00", "#1F1C18"] + }, + { + "text": "Light Orange", + "value": ["#FFB75E", "#ED8F03"] + }, + { + "text": "Green and Blue", + "value": ["#c2e59c", "#64b3f4"] + }, + { + "text": "Poncho", + "value": ["#403A3E", "#BE5869"] + }, + { + "text": "Back to the Future", + "value": ["#C02425", "#F0CB35"] + }, + { + "text": "Blush", + "value": ["#B24592", "#F15F79"] + }, + { + "text": "Inbox", + "value": ["#457fca", "#5691c8"] + }, + { + "text": "Purplin", + "value": ["#6a3093", "#a044ff"] + }, + { + "text": "Pale Wood", + "value": ["#eacda3", "#d6ae7b"] + }, + { + "text": "Haikus", + "value": ["#fd746c", "#ff9068"] + }, + { + "text": "Pizelex", + "value": ["#114357", "#F29492"] + }, + { + "text": "Joomla", + "value": ["#1e3c72", "#2a5298"] + }, + { + "text": "Christmas", + "value": ["#2F7336", "#AA3A38"] + }, + { + "text": "Minnesota Vikings", + "value": ["#5614B0", "#DBD65C"] + }, + { + "text": "Miami Dolphins", + "value": ["#4DA0B0", "#D39D38"] + }, + { + "text": "Forest", + "value": ["#5A3F37", "#2C7744"] + }, + { + "text": "Nighthawk", + "value": ["#2980b9", "#2c3e50"] + }, + { + "text": "Superman", + "value": ["#0099F7", "#F11712"] + }, + { + "text": "Suzy", + "value": ["#834d9b", "#d04ed6"] + }, + { + "text": "Dark Skies", + "value": ["#4B79A1", "#283E51"] + }, + { + "text": "Deep Space", + "value": ["#000000", "#434343"] + }, + { + "text": "Decent", + "value": ["#4CA1AF", "#C4E0E5"] + }, + { + "text": "value Of Sky", + "value": ["#E0EAFC", "#CFDEF3"] + }, + { + "text": "Purple White", + "value": ["#BA5370", "#F4E2D8"] + }, + { + "text": "Ali", + "value": ["#ff4b1f", "#1fddff"] + }, + { + "text": "Alihossein", + "value": ["#f7ff00", "#db36a4"] + }, + { + "text": "Shahabi", + "value": ["#a80077", "#66ff00"] + }, + { + "text": "Red Ocean", + "value": ["#1D4350", "#A43931"] + }, + { + "text": "Tranquil", + "value": ["#EECDA3", "#EF629F"] + }, + { + "text": "Transfile", + "value": ["#16BFFD", "#CB3066"] + }, + + { + "text": "Sylvia", + "value": ["#ff4b1f", "#ff9068"] + }, + { + "text": "Sweet Morning", + "value": ["#FF5F6D", "#FFC371"] + }, + { + "text": "Politics", + "value": ["#2196f3", "#f44336"] + }, + { + "text": "Bright Vault", + "value": ["#00d2ff", "#928DAB"] + }, + { + "text": "Solid Vault", + "value": ["#3a7bd5", "#3a6073"] + }, + { + "text": "Sunset", + "value": ["#0B486B", "#F56217"] + }, + { + "text": "Grapefruit Sunset", + "value": ["#e96443", "#904e95"] + }, + { + "text": "Deep Sea Space", + "value": ["#2C3E50", "#4CA1AF"] + }, + { + "text": "Dusk", + "value": ["#2C3E50", "#FD746C"] + }, + { + "text": "Minimal Red", + "value": ["#F00000", "#DC281E"] + }, + { + "text": "Royal", + "value": ["#141E30", "#243B55"] + }, + { + "text": "Mauve", + "value": ["#42275a", "#734b6d"] + }, + { + "text": "Frost", + "value": ["#000428", "#004e92"] + }, + { + "text": "Lush", + "value": ["#56ab2f", "#a8e063"] + }, + { + "text": "Firewatch", + "value": ["#cb2d3e", "#ef473a"] + }, + { + "text": "Sherbert", + "value": ["#f79d00", "#64f38c"] + }, + { + "text": "Blood Red", + "value": ["#f85032", "#e73827"] + }, + { + "text": "Sun on the Horizon", + "value": ["#fceabb", "#f8b500"] + }, + { + "text": "IIIT Delhi", + "value": ["#808080", "#3fada8"] + }, + { + "text": "Jupiter", + "value": ["#ffd89b", "#19547b"] + }, + { + "text": "50 Shades of Grey", + "value": ["#bdc3c7", "#2c3e50"] + }, + { + "text": "Dania", + "value": ["#BE93C5", "#7BC6CC"] + }, + { + "text": "Limeade", + "value": ["#A1FFCE", "#FAFFD1"] + }, + { + "text": "Disco", + "value": ["#4ECDC4", "#556270"] + }, + { + "text": "Love Couple", + "value": ["#3a6186", "#89253e"] + }, + { + "text": "Azure Pop", + "value": ["#ef32d9", "#89fffd"] + }, + { + "text": "Nepal", + "value": ["#de6161", "#2657eb"] + }, + { + "text": "Cosmic Fusion", + "value": ["#ff00cc", "#333399"] + }, + { + "text": "Snapchat", + "value": ["#fffc00", "#ffffff"] + }, + { + "text": "Ed's Sunset Gradient", + "value": ["#ff7e5f", "#feb47b"] + }, + { + "text": "Brady Brady Fun Fun", + "value": ["#00c3ff", "#ffff1c"] + }, + { + "text": "Black Rosé", + "value": ["#f4c4f3", "#fc67fa"] + }, + { + "text": "80's Purple", + "value": ["#41295a", "#2F0743"] + }, + { + "text": "Radar", + "value": ["#A770EF", "#CF8BF3", "#FDB99B"] + }, + { + "text": "Ibiza Sunset", + "value": ["#ee0979", "#ff6a00"] + }, + { + "text": "Dawn", + "value": ["#F3904F", "#3B4371"] + }, + { + "text": "Mild", + "value": ["#67B26F", "#4ca2cd"] + }, + { + + "text": "Vice City", + "value": ["#3494E6", "#EC6EAD"] + }, + { + "text": "Jaipur", + "value": ["#DBE6F6", "#C5796D"] + + }, + { + "text": "Jodhpur", + "value": ["#9CECFB", "#65C7F7", "#0052D4"] + + }, + { + "text": "Cocoaa Ice", + "value": ["#c0c0aa", "#1cefff"] + }, + { + "text": "EasyMed", + "value": ["#DCE35B", "#45B649"] + }, + { + "text": "Rose Colored Lenses", + "value": ["#E8CBC0", "#636FA4"] + }, + { + "text": "What lies Beyond", + "value": ["#F0F2F0", "#000C40"] + }, + { + "text": "Roseanna", + "value": ["#FFAFBD", "#ffc3a0"] + }, + { + "text": "Honey Dew", + "value": ["#43C6AC", "#F8FFAE"] + }, + { + "text": "Under the Lake", + "value": ["#093028", "#237A57"] + }, + { + "text": "The Blue Lagoon", + "value": ["#43C6AC", "#191654"] + }, + { + "text": "Can You Feel The Love Tonight", + "value": ["#4568DC", "#B06AB3"] + }, + { + "text": "Very Blue", + "value": ["#0575E6", "#021B79"] + }, + { + "text": "Love and Liberty", + "value": ["#200122", "#6f0000"] + }, + { + "text": "Orca", + "value": ["#44A08D", "#093637"] + }, + { + "text": "Venice", + "value": ["#6190E8", "#A7BFE8"] + }, + { + "text": "Pacific Dream", + "value": ["#34e89e", "#0f3443"] + }, + { + "text": "Learning and Leading", + "value": ["#F7971E", "#FFD200"] + }, + { + "text": "Celestial", + "value": ["#C33764", "#1D2671"] + }, + { + "text": "Purplepine", + "value": ["#20002c", "#cbb4d4"] + }, + { + "text": "Sha la la", + "value": ["#D66D75", "#E29587"] + }, + { + "text": "Mini", + "value": ["#30E8BF", "#FF8235"] + }, + { + "text": "Maldives", + "value": ["#B2FEFA", "#0ED2F7"] + }, + { + "text": "Cinnamint", + "value": ["#4AC29A", "#BDFFF3"] + }, + { + "text": "Html", + "value": ["#E44D26", "#F16529"] + }, + { + "text": "Coal", + "value": ["#EB5757", "#000000"] + }, + { + "text": "Sunkist", + "value": ["#F2994A", "#F2C94C"] + }, + { + "text": "Blue Skies", + "value": ["#56CCF2", "#2F80ED"] + }, + { + "text": "Chitty Chitty Bang Bang", + "value": ["#007991", "#78ffd6"] + }, + { + "text": "Visions of Grandeur", + "value": ["#000046", "#1CB5E0"] + }, + { + "text": "Crystal Clear", + "value": ["#159957", "#155799"] + }, + { + "text": "Mello", + "value": ["#c0392b", "#8e44ad"] + }, + { + "text": "Compare Now", + "value": ["#EF3B36", "#FFFFFF"] + }, + { + "text": "Meridian", + "value": ["#283c86", "#45a247"] + }, + { + "text": "Relay", + "value": ["#3A1C71", "#D76D77", "#FFAF7B"] + }, + { + "text": "Alive", + "value": ["#CB356B", "#BD3F32"] + }, + { + "text": "Scooter", + "value": ["#36D1DC", "#5B86E5"] + }, + { + "text": "Terminal", + "value": ["#000000", "#0f9b0f"] + }, + { + "text": "Telegram", + "value": ["#1c92d2", "#f2fcfe"] + }, + { + "text": "Crimson Tide", + "value": ["#642B73", "#C6426E"] + }, + { + "text": "Socialive", + "value": ["#06beb6", "#48b1bf"] + }, + { + "text": "Subu", + "value": ["#0cebeb", "#20e3b2", "#29ffc6"] + }, + { + "text": "Broken Hearts", + "value": ["#d9a7c7", "#fffcdc"] + }, + { + "text": "Kimoby Is The New Blue", + "value": ["#396afc", "#2948ff"] + }, + { + "text": "Dull", + "value": ["#C9D6FF", "#E2E2E2"] + }, + { + "text": "Purpink", + "value": ["#7F00FF", "#E100FF"] + }, + { + "text": "Orange Coral", + "value": ["#ff9966", "#ff5e62"] + }, + { + "text": "Summer", + "value": ["#22c1c3", "#fdbb2d"] + }, + { + "text": "King Yna", + "value": ["#1a2a6c", "#b21f1f", "#fdbb2d"] + }, + { + "text": "Velvet Sun", + "value": ["#e1eec3", "#f05053"] + }, + { + "text": "Zinc", + "value": ["#ADA996", "#F2F2F2", "#DBDBDB", "#EAEAEA"] + }, + { + "text": "Hydrogen", + "value": ["#667db6", "#0082c8", "#0082c8", "#667db6"] + }, + { + "text": "Argon", + "value": ["#03001e", "#7303c0", "#ec38bc", "#fdeff9"] + }, + { + "text": "Lithium", + "value": ["#6D6027", "#D3CBB8"] + }, + { + "text": "Digital Water", + "value": ["#74ebd5","#ACB6E5"] + }, + { + "text": "Orange Fun", + "value": ["#fc4a1a", "#f7b733"] + }, + { + "text": "Rainbow Blue", + "value": ["#00F260", "#0575E6"] + }, + { + "text": "Pink Flavour", + "value": ["#800080", "#ffc0cb"] + }, + { + "text": "Sulphur", + "value": ["#CAC531", "#F3F9A7"] + }, + { + "text": "Selenium", + "value": ["#3C3B3F", "#605C3C"] + }, + { + "text": "Delicate", + "value": ["#D3CCE3", "#E9E4F0"] + }, + { + + "text": "Ohhappiness", + "value": ["#00b09b", "#96c93d"] + }, + { + "text": "Lawrencium", + "value": ["#0f0c29", "#302b63", "#24243e"] + }, + { + "text": "Relaxing red", + "value": ["#fffbd5", "#b20a2c"] + }, + { + "text": "Taran Tado", + "value": ["#23074d", "#cc5333"] + }, + { + "text": "Bighead", + "value": ["#c94b4b", "#4b134f"] + }, + { + "text": "Sublime Vivid", + "value": ["#FC466B", "#3F5EFB"] + }, + { + "text": "Sublime Light", + "value": ["#FC5C7D", "#6A82FB"] + }, + { + "text": "Pun Yeta", + "value": ["#108dc7", "#ef8e38"] + }, + { + "text": "Quepal", + "value": ["#11998e", "#38ef7d"] + }, + { + "text": "Sand to Blue", + "value": ["#3E5151", "#DECBA4"] + }, + { + "text": "Wedding Day Blues", + "value": ["#40E0D0", "#FF8C00", "#FF0080"] + }, + { + "text": "Shifter", + "value": ["#bc4e9c", "#f80759"] + }, + { + "text": "Red Sunset", + "value": ["#355C7D", "#6C5B7B", "#C06C84"] + }, + { + "text": "Moon Purple", + "value": ["#4e54c8", "#8f94fb"] + }, + { + "text": "Pure Lust", + "value": ["#333333", "#dd1818"] + }, + { + "text": "Slight Ocean View", + "value": ["#a8c0ff", "#3f2b96"] + }, + { + "text": "eXpresso", + "value": ["#ad5389", "#3c1053"] + }, + { + "text": "Shifty", + "value": ["#636363", "#a2ab58"] + }, + { + "text": "Vanusa", + "value": ["#DA4453", "#89216B"] + }, + { + "text": "Evening Night", + "value": ["#005AA7", "#FFFDE4"] + }, + { + "text": "Magic", + "value": ["#59C173", "#a17fe0", "#5D26C1"] + }, + { + "text": "Margo", + "value": ["#FFEFBA", "#FFFFFF"] + }, + { + "text": "Blue Raspberry", + "value": ["#00B4DB", "#0083B0"] + }, + { + "text": "Citrus Peel", + "value": ["#FDC830", "#F37335"] + }, + { + "text": "Sin City Red", + "value": ["#ED213A", "#93291E"] + }, + { + "text": "Rastafari", + "value": ["#1E9600", "#FFF200", "#FF0000"] + }, + { + "text": "Summer Dog", + "value": ["#a8ff78", "#78ffd6"] + }, + { + "text": "Wiretap", + "value": ["#8A2387", "#E94057", "#F27121"] + }, + { + "text": "Burning Orange", + "value": ["#FF416C", "#FF4B2B"] + }, + { + "text": "Ultra Voilet", + "value": ["#654ea3", "#eaafc8"] + }, + { + "text": "By Design", + "value": ["#009FFF", "#ec2F4B"] + }, + { + "text": "Kyoo Tah", + "value": ["#544a7d", "#ffd452"] + }, + { + "text": "Kye Meh", + "value": ["#8360c3", "#2ebf91"] + }, + { + "text": "Kyoo Pal", + "value": ["#dd3e54", "#6be585"] + }, + { + "text": "Metapolis", + "value": ["#659999", "#f4791f"] + }, + { + "text": "Flare", + "value": ["#f12711", "#f5af19"] + }, + { + "text": "Witching Hour", + "value": ["#c31432", "#240b36"] + }, + { + "text": "Azur Lane", + "value": ["#7F7FD5", "#86A8E7", "#91EAE4"] + }, + { + "text": "Neuromancer", + "value": ["#f953c6", "#b91d73"] + }, + { + "text": "Harvey", + "value": ["#1f4037", "#99f2c8"] + }, + { + "text": "Amin", + "value": ["#8E2DE2", "#4A00E0"] + }, + { + "text": "Memariani", + "value": ["#aa4b6b", "#6b6b83" , "#3b8d99"] + }, + { + "text": "Yoda", + "value": ["#FF0099", "#493240"] + }, + { + "text": "Cool Sky", + "value": ["#2980B9", "#6DD5FA", "#FFFFFF"] + }, + { + "text": "Dark Ocean", + "value": ["#373B44", "#4286f4"] + }, + { + "text": "Evening Sunshine", + "value": ["#b92b27", "#1565C0"] + }, + { + "text": "JShine", + "value": ["#12c2e9","#c471ed","#f64f59"] + }, + { + "text": "Moonlit Asteroid", + "value": ["#0F2027", "#203A43", "#2C5364"] + }, + { + "text": "MegaTron", + "value": ["#C6FFDD", "#FBD786", "#f7797d"] + }, + { + "text": "Cool Blues", + "value": ["#2193b0","#6dd5ed"] + }, + { + "text": "Piggy Pink", + "value": ["#ee9ca7","#ffdde1"] + }, + { + "text": "Grade Grey", + "value": ["#bdc3c7","#2c3e50"] + } +] \ No newline at end of file diff --git a/data/index.html b/data/index.html index c5981b4..34223a0 100644 --- a/data/index.html +++ b/data/index.html @@ -5,7 +5,7 @@ ESP Kit - + @@ -21,7 +21,7 @@ data-name="hue" data-topic="pixels/hue" data-default="0" - data-entries='[{"text": "None", "value": "0"}, {"text": "Cool", "value": "1"}, {"text": "Warm", "value": "2"}, {"text": "Alien", "value": "5"}]' + data-external="/gradients.json" >
    • +
    + IlluChat +
    +
    +
    +
    Settings

    Network

    NeoPixel

    -
    +
    +

    MQTT

    +
    System
     bytes

    +
    + +
    +
    diff --git a/data/script.js b/data/script.js index 46c771d..d7dcdb0 100644 --- a/data/script.js +++ b/data/script.js @@ -10784,31 +10784,40 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); -const hues = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ]; -let endpoint = '/pixel'; +let endpoint = '/ws'; + +// gradients +// https://uigradients.com __WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => { let app = new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body')) .components(__WEBPACK_IMPORTED_MODULE_2__components_exports__) .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint)); - + app.ws.onmessage = (msg) => { + app.mediator.trigger('out/chat/log', {topic: 'out/chat/log', payload: msg.data}); + }; app.mediator.on('pixels/hue', (payload) => { + let colors = payload.split(','); let msg = JSON.stringify({ topic: 'pixels/state', + broadcast: 1, payload: JSON.stringify({ - brightness: 32, - color: parseInt(hues[payload][0].replace('#', '0x'), 16), - color2: parseInt(hues[payload][1].replace('#', '0x'), 16), - totalSteps: 32, + //brightness: 64, + color: parseInt(colors[0].replace('#', '0x'), 16), + color2: parseInt(colors[1].replace('#', '0x'), 16), + //totalSteps: 64, pattern: 5 }) }); - app.mediator.trigger('pixels/totalSteps', 32); + //app.mediator.trigger('pixels/brightness', 64); + //app.mediator.trigger('pixels/totalSteps', 64); app.mediator.trigger('pixels/pattern', 5); - app.mediator.trigger('pixels/color', hues[payload][0]); - app.mediator.trigger('pixels/color2', hues[payload][1]); + app.mediator.trigger('pixels/color', colors[0]); + app.mediator.trigger('pixels/color2', colors[1]); //console.log('pixels/hue: ' + msg); app.ws.send(msg); + + }); // TODO make components @@ -11040,6 +11049,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSelect", function() { return __WEBPACK_IMPORTED_MODULE_11__ParamSelect__["a"]; }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__ = __webpack_require__(29); /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "LedStripPatternSwitch", function() { return __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__["a"]; }); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__Chat_Chat__ = __webpack_require__(30); +/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Chat", function() { return __WEBPACK_IMPORTED_MODULE_13__Chat_Chat__["a"]; }); + @@ -11984,20 +11996,18 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a" constructor(ctx, node) { super(ctx, node); //this.store = new Store(this.config.endpoint); + this.ctx.mediator.on(this.config.topic, (payload) => { + this.node.find('input').val(payload); + }); } onChange(evt) { - this.ctx.ws.send(JSON.stringify({ + let msg = JSON.stringify({ topic: this.config.topic, - payload: evt.target.value - })); - } - subscribe(){ - this.ctx.mediator.on(this.config.topic, (payload) => { - //console.log(this.config.topic + ":" + payload); - this.node.find('input').val(payload); - //this.notify(payload); + payload: evt.target.value, + broadcast: 1 }); + this.ctx.ws.send(msg); } } /* harmony export (immutable) */ __webpack_exports__["a"] = ParamSlider; @@ -12061,7 +12071,8 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick notify(val){ let obj = { topic: this.config.topic, - payload: parseInt(val.replace('#', '0x')) + payload: parseInt(val.replace('#', '0x')), + broadcast: 1 }; this.ctx.ws.send(JSON.stringify(obj)); } @@ -12111,10 +12122,10 @@ class ParamWs extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__["a obj[this.config.name] = this.value; //this.store.save(obj); console.log(this.value); - this.ctx.ws.send({ + this.ctx.ws.send(JSON.stringify({ topic: this.config.topic, payload: this.value - }); + })); this.ctx.mediator.trigger(this.config.endpoint, this.value); } @@ -12138,11 +12149,20 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a" constructor(ctx, node) { super(ctx, node); - this.render({ + let viewData = { label: this.config.label, - name: this.config.name, - entries: this.config.entries - }); + name: this.config.name + }; + if(this.config.external){ + __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.getJSON(this.config.external).done((data) => { + viewData.entries = data; + this.render(viewData); + }) + } else { + viewData.entries = this.config.entries; + this.render(viewData); + } + this.selectEntry(this.config.default); this.ctx.mediator.on(this.config.topic, (payload) => { this.selectEntry(payload); @@ -12156,7 +12176,8 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a" onChange(evt) { let obj = { topic: this.config.topic, - payload: evt.target.value + payload: evt.target.value, + broadcast: 1 }; this.ctx.mediator.trigger(obj.topic, obj.payload); this.ctx.ws.send(JSON.stringify(obj)); @@ -12227,5 +12248,84 @@ class LedStripPatternSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Swi /* harmony export (immutable) */ __webpack_exports__["a"] = LedStripPatternSwitch; +/***/ }), +/* 30 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Chat_html__ = __webpack_require__(31); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Chat_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__Chat_html__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_Component__ = __webpack_require__(1); + + + + +class Chat extends __WEBPACK_IMPORTED_MODULE_2__core_Component__["a" /* default */] { + + constructor(ctx, node, template) { + super(ctx, node, template || __WEBPACK_IMPORTED_MODULE_1__Chat_html___default.a); + this.render(this.config); + this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this)); + this.node.delegate('input.msg', 'keypress', this.onInput.bind(this)); + this.node.delegate('button', 'click', this.send.bind(this)); + } + + templates() { + return { + message: (user, msg) => ` +
  • + ${user} + ${msg} +
    • + ` + }; + } + + onMessage(msg) { + let payload = msg.payload; //.replace(/<.+?>/g, ''); + //console.log('onMsg: ' + msg); + let msgParts = payload.split(':'); + let messages = this.node.find('.messages'); + messages.append( + this.templates().message(msgParts[0], msgParts[1] ? msgParts[1] : '') + ); + this.node.find('.message-container').animate({ + scrollTop: messages[0].scrollHeight + }, 250); + } + sanitizeInput(val) { + return val.replace(/<.+?>/g, ''); + } + send(evt) { + evt.preventDefault(); + let username = this.node.find('input.username'); + let msg = this.node.find('input.msg'); + if (username.length > 0 && message.length > 0) { + let message = JSON.stringify({ + topic: this.sanitizeInput(this.config.topic), + payload: this.sanitizeInput(username.val() + ':' + msg.val()) + }); + this.ctx.ws.send(message); + msg.val(''); + } + } + onInput(evt) { + if (evt.keyCode === 13) { + this.send(evt); + } + } + +} +/* harmony export (immutable) */ __webpack_exports__["a"] = Chat; + + +/***/ }), +/* 31 */ +/***/ (function(module, exports) { + +module.exports = "
    \n \n
    \n
      \n
      \n \n \n
      " + /***/ }) /******/ ]); \ No newline at end of file diff --git a/data/styles.css b/data/styles.css index 91868a7..dd04a28 100644 --- a/data/styles.css +++ b/data/styles.css @@ -306,3 +306,24 @@ form .form-row input[type="checkbox"] { .sui select option { background: #333333; } +.Chat .message-container { + max-height: 200px; + overflow: auto; +} +.Chat .message-container .messages { + list-style-type: none; +} +.Chat .message-container .messages .user-label { + color: lightblue; +} +.Chat .message-container .messages .user-label:before { + color: #097479; + content: '<'; +} +.Chat .message-container .messages .user-label:after { + color: #097479; + content: '>'; +} +.Chat .message-container .messages .message-text { + font-weight: normal; +} diff --git a/src/app/components/Chat/Chat.html b/src/app/components/Chat/Chat.html new file mode 100644 index 0000000..916219b --- /dev/null +++ b/src/app/components/Chat/Chat.html @@ -0,0 +1,18 @@ +
      + +
      +
        +
        + + +
        \ No newline at end of file diff --git a/src/app/components/Chat/Chat.js b/src/app/components/Chat/Chat.js new file mode 100644 index 0000000..2456736 --- /dev/null +++ b/src/app/components/Chat/Chat.js @@ -0,0 +1,60 @@ +import $ from 'jquery'; +import markup from './Chat.html'; +import Component from '../../core/Component'; + +export default class Chat extends Component { + + constructor(ctx, node, template) { + super(ctx, node, template || markup); + this.render(this.config); + this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this)); + this.node.delegate('input.msg', 'keypress', this.onInput.bind(this)); + this.node.delegate('button', 'click', this.send.bind(this)); + } + + templates() { + return { + message: (user, msg) => ` +
      • + ${user} + ${msg} +
        • + ` + }; + } + + onMessage(msg) { + let payload = msg.payload; //.replace(/<.+?>/g, ''); + //console.log('onMsg: ' + msg); + let msgParts = payload.split(':'); + let messages = this.node.find('.messages'); + messages.append( + this.templates().message(msgParts[0], msgParts[1] ? msgParts[1] : '') + ); + this.node.find('.message-container').animate({ + scrollTop: messages[0].scrollHeight + }, 250); + } + sanitizeInput(val) { + return val.replace(/<.+?>/g, ''); + } + send(evt) { + evt.preventDefault(); + let username = this.node.find('input.username'); + let msg = this.node.find('input.msg'); + if (username.length > 0 && message.length > 0) { + let message = JSON.stringify({ + topic: this.sanitizeInput(this.config.topic), + payload: this.sanitizeInput(username.val() + ':' + msg.val()) + }); + this.ctx.ws.send(message); + msg.val(''); + } + } + onInput(evt) { + if (evt.keyCode === 13) { + this.send(evt); + } + } + +} \ No newline at end of file diff --git a/src/app/components/ParamColor.js b/src/app/components/ParamColor.js index 7fcd6eb..8b80b6f 100644 --- a/src/app/components/ParamColor.js +++ b/src/app/components/ParamColor.js @@ -17,7 +17,8 @@ export default class ParamColor extends ColorPicker { notify(val){ let obj = { topic: this.config.topic, - payload: parseInt(val.replace('#', '0x')) + payload: parseInt(val.replace('#', '0x')), + broadcast: 1 }; this.ctx.ws.send(JSON.stringify(obj)); } diff --git a/src/app/components/ParamSelect.js b/src/app/components/ParamSelect.js index 0ea6b0f..e7c99e8 100644 --- a/src/app/components/ParamSelect.js +++ b/src/app/components/ParamSelect.js @@ -6,11 +6,20 @@ export default class ParamSelect extends Select { constructor(ctx, node) { super(ctx, node); - this.render({ + let viewData = { label: this.config.label, - name: this.config.name, - entries: this.config.entries - }); + name: this.config.name + }; + if(this.config.external){ + $.getJSON(this.config.external).done((data) => { + viewData.entries = data; + this.render(viewData); + }) + } else { + viewData.entries = this.config.entries; + this.render(viewData); + } + this.selectEntry(this.config.default); this.ctx.mediator.on(this.config.topic, (payload) => { this.selectEntry(payload); @@ -24,7 +33,8 @@ export default class ParamSelect extends Select { onChange(evt) { let obj = { topic: this.config.topic, - payload: evt.target.value + payload: evt.target.value, + broadcast: 1 }; this.ctx.mediator.trigger(obj.topic, obj.payload); this.ctx.ws.send(JSON.stringify(obj)); diff --git a/src/app/components/ParamSlider.js b/src/app/components/ParamSlider.js index 507bef4..67c3622 100644 --- a/src/app/components/ParamSlider.js +++ b/src/app/components/ParamSlider.js @@ -7,19 +7,17 @@ export default class ParamSlider extends Slider { constructor(ctx, node) { super(ctx, node); //this.store = new Store(this.config.endpoint); + this.ctx.mediator.on(this.config.topic, (payload) => { + this.node.find('input').val(payload); + }); } onChange(evt) { - this.ctx.ws.send(JSON.stringify({ + let msg = JSON.stringify({ topic: this.config.topic, - payload: evt.target.value - })); - } - subscribe(){ - this.ctx.mediator.on(this.config.topic, (payload) => { - //console.log(this.config.topic + ":" + payload); - this.node.find('input').val(payload); - //this.notify(payload); + payload: evt.target.value, + broadcast: 1 }); + this.ctx.ws.send(msg); } } \ No newline at end of file diff --git a/src/app/components/ParamWs.js b/src/app/components/ParamWs.js index 2704856..61e9561 100644 --- a/src/app/components/ParamWs.js +++ b/src/app/components/ParamWs.js @@ -30,10 +30,10 @@ export default class ParamWs extends TextInput { obj[this.config.name] = this.value; //this.store.save(obj); console.log(this.value); - this.ctx.ws.send({ + this.ctx.ws.send(JSON.stringify({ topic: this.config.topic, payload: this.value - }); + })); this.ctx.mediator.trigger(this.config.endpoint, this.value); } diff --git a/src/app/components/exports.js b/src/app/components/exports.js index eeda217..aeb0151 100644 --- a/src/app/components/exports.js +++ b/src/app/components/exports.js @@ -11,3 +11,4 @@ export { default as ParamColor } from './ParamColor' export { default as ParamWs } from './ParamWs' export { default as ParamSelect } from './ParamSelect' export { default as LedStripPatternSwitch } from './LedStripPatternSwitch' +export { default as Chat } from './Chat/Chat' diff --git a/src/app/main.js b/src/app/main.js index bf2e254..31771ae 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -4,31 +4,40 @@ import $ from 'jquery'; import App from './core/App'; import * as components from './components/exports'; -const hues = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ]; -let endpoint = '/pixel'; +let endpoint = '/ws'; + +// gradients +// https://uigradients.com $(() => { let app = new App($('body')) .components(components) .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint)); - + app.ws.onmessage = (msg) => { + app.mediator.trigger('out/chat/log', {topic: 'out/chat/log', payload: msg.data}); + }; app.mediator.on('pixels/hue', (payload) => { + let colors = payload.split(','); let msg = JSON.stringify({ topic: 'pixels/state', + broadcast: 1, payload: JSON.stringify({ - brightness: 32, - color: parseInt(hues[payload][0].replace('#', '0x'), 16), - color2: parseInt(hues[payload][1].replace('#', '0x'), 16), - totalSteps: 32, + //brightness: 64, + color: parseInt(colors[0].replace('#', '0x'), 16), + color2: parseInt(colors[1].replace('#', '0x'), 16), + //totalSteps: 64, pattern: 5 }) }); - app.mediator.trigger('pixels/totalSteps', 32); + //app.mediator.trigger('pixels/brightness', 64); + //app.mediator.trigger('pixels/totalSteps', 64); app.mediator.trigger('pixels/pattern', 5); - app.mediator.trigger('pixels/color', hues[payload][0]); - app.mediator.trigger('pixels/color2', hues[payload][1]); + app.mediator.trigger('pixels/color', colors[0]); + app.mediator.trigger('pixels/color2', colors[1]); //console.log('pixels/hue: ' + msg); app.ws.send(msg); + + }); // TODO make components diff --git a/src/pages/gradients.js b/src/pages/gradients.js deleted file mode 100644 index 994eba3..0000000 --- a/src/pages/gradients.js +++ /dev/null @@ -1,16 +0,0 @@ -const gradients = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ]; - - - -// [{"text": "foo", "value": "0"}] - -// let msg = JSON.stringify({ -// topic: 'pixels/state', -// payload: JSON.stringify({ -// brightness: 32, -// color: parseInt(gradient[0].replace('#', '0x'), 16), -// color2: parseInt(gradient[1].replace('#', '0x'), 16), -// totalSteps: 100, -// pattern: 5 -// }) -// }); \ No newline at end of file diff --git a/src/pages/gradients.json b/src/pages/gradients.json new file mode 100644 index 0000000..d184f8d --- /dev/null +++ b/src/pages/gradients.json @@ -0,0 +1,1347 @@ +[ + { + "text": "None", + "value": ["#000000", "#000000"] + }, + { + "text": "Blu", + "value": ["#00416A", "#E4E5E6"] + }, + { + "text": "Ver", + "value": ["#FFE000", "#799F0C"] + }, + { + "text": "Ver Black", + "value": ["#F7F8F8", "#ACBB78"] + }, + { + "text": "Combi", + "value": ["#00416A", "#799F0C", "#FFE000"] + }, + { + "text": "Anwar", + "value": ["#334d50", "#cbcaa5"] + }, + { + "text": "Bluelagoo", + "value": ["#0052D4", "#4364F7", "#6FB1FC"] + }, + { + "text": "Lunada", + "value": ["#5433FF", "#20BDFF", "#A5FECB"] + }, + { + "text": "Reaqua", + "value": ["#799F0C", "#ACBB78"] + }, + { + "text": "Mango", + "value": ["#ffe259", "#ffa751"] + }, + { + "text": "Bupe", + "value": ["#00416A", "#E4E5E6"] + }, + { + "text": "Rea", + "value": ["#FFE000", "#799F0C"] + }, + { + "text": "Windy", + "value": ["#acb6e5", "#86fde8"] + }, + { + "text": "Royal Blue", + "value": ["#536976", "#292E49"] + }, + { + "text": "Royal Blue + Petrol", + "value": ["#BBD2C5", "#536976", "#292E49"] + }, + { + "text": "Copper", + "value": ["#B79891", "#94716B"] + }, + { + "text": "Anamnisar", + "value": ["#9796f0", "#fbc7d4"] + }, + { + "text": "Petrol", + "value": ["#BBD2C5", "#536976"] + }, + { + "text": "Sky", + "value": ["#076585", "#fff"] + }, + { + "text": "Sel", + "value": ["#00467F", "#A5CC82"] + }, + { + "text": "Skyline", + "value": ["#1488CC", "#2B32B2"] + }, + { + "text": "DIMIGO", + "value": ["#ec008c", "#fc6767"] + }, + { + "text": "Purple Love", + "value": ["#cc2b5e", "#753a88"] + }, + { + "text": "Sexy Blue", + "value": ["#2193b0", "#6dd5ed"] + }, + { + "text": "Blooker20", + "value": ["#e65c00", "#F9D423"] + }, + { + "text": "Sea Blue", + "value": ["#2b5876", "#4e4376"] + }, + { + "text": "Nimvelo", + "value": ["#314755", "#26a0da"] + }, + { + "text": "Hazel", + "value": ["#77A1D3", "#79CBCA", "#E684AE"] + }, + { + "text": "Noon to Dusk", + "value": ["#ff6e7f", "#bfe9ff"] + }, + { + "text": "YouTube", + "value": ["#e52d27", "#b31217"] + }, + { + "text": "Cool Brown", + "value": ["#603813", "#b29f94"] + }, + { + "text": "Harmonic Energy", + "value": ["#16A085", "#F4D03F"] + }, + { + "text": "Playing with Reds", + "value": ["#D31027", "#EA384D"] + }, + { + "text": "Sunny Days", + "value": ["#EDE574", "#E1F5C4"] + }, + { + "text": "Green Beach", + "value": ["#02AAB0", "#00CDAC"] + }, + { + "text": "Intuitive Purple", + "value": ["#DA22FF", "#9733EE"] + }, + { + "text": "Emerald Water", + "value": ["#348F50", "#56B4D3"] + }, + { + "text": "Lemon Twist", + "value": ["#3CA55C", "#B5AC49"] + }, + { + "text": "Monte Carlo", + "value": ["#CC95C0", "#DBD4B4", "#7AA1D2"] + }, + { + "text": "Horizon", + "value": ["#003973", "#E5E5BE"] + }, + { + "text": "Rose Water", + "value": ["#E55D87", "#5FC3E4"] + }, + { + "text": "Frozen", + "value": ["#403B4A", "#E7E9BB"] + }, + { + "text": "Mango Pulp", + "value": ["#F09819", "#EDDE5D"] + }, + { + "text": "Bloody Mary", + "value": ["#FF512F", "#DD2476"] + }, + { + "text": "Aubergine", + "value": ["#AA076B", "#61045F"] + }, + { + "text": "Aqua Marine", + "value": ["#1A2980", "#26D0CE"] + }, + { + "text": "Sunrise", + "value": ["#FF512F", "#F09819"] + }, + { + "text": "Purple Paradise", + "value": ["#1D2B64", "#F8CDDA"] + }, + { + "text": "Stripe", + "value": ["#1FA2FF", "#12D8FA", "#A6FFCB"] + }, + { + "text": "Sea Weed", + "value": ["#4CB8C4", "#3CD3AD"] + }, + { + "text": "Pinky", + "value": ["#DD5E89", "#F7BB97"] + }, + { + "text": "Cherry", + "value": ["#EB3349", "#F45C43"] + }, + { + "text": "Mojito", + "value": ["#1D976C", "#93F9B9"] + }, + { + "text": "Juicy Orange", + "value": ["#FF8008", "#FFC837"] + }, + { + "text": "Mirage", + "value": ["#16222A", "#3A6073"] + }, + { + "text": "Steel Gray", + "value": ["#1F1C2C", "#928DAB"] + }, + { + "text": "Kashmir", + "value": ["#614385", "#516395"] + }, + { + "text": "Electric Violet", + "value": ["#4776E6", "#8E54E9"] + }, + { + "text": "Venice Blue", + "value": ["#085078", "#85D8CE"] + }, + { + "text": "Bora Bora", + "value": ["#2BC0E4", "#EAECC6"] + }, + { + "text": "Moss", + "value": ["#134E5E", "#71B280"] + }, + { + "text": "Shroom Haze", + "value": ["#5C258D", "#4389A2"] + }, + { + "text": "Mystic", + "value": ["#757F9A", "#D7DDE8"] + }, + { + "text": "Midnight City", + "value": ["#232526", "#414345"] + }, + { + "text": "Sea Blizz", + "value": ["#1CD8D2", "#93EDC7"] + }, + { + "text": "Opa", + "value": ["#3D7EAA", "#FFE47A"] + }, + { + "text": "Titanium", + "value": ["#283048", "#859398"] + }, + { + "text": "Mantle", + "value": ["#24C6DC", "#514A9D"] + }, + { + "text": "Dracula", + "value": ["#DC2424", "#4A569D"] + }, + { + "text": "Peach", + "value": ["#ED4264", "#FFEDBC"] + }, + { + "text": "Moonrise", + "value": ["#DAE2F8", "#D6A4A4"] + }, + { + "text": "Clouds", + "value": ["#ECE9E6", "#FFFFFF"] + }, + { + "text": "Stellar", + "value": ["#7474BF", "#348AC7"] + }, + { + "text": "Bourbon", + "value": ["#EC6F66", "#F3A183"] + }, + { + "text": "Calm Darya", + "value": ["#5f2c82", "#49a09d"] + }, + { + "text": "Influenza", + "value": ["#C04848", "#480048"] + }, + { + "text": "Shrimpy", + "value": ["#e43a15", "#e65245"] + }, + { + "text": "Army", + "value": ["#414d0b", "#727a17"] + }, + { + "text": "Miaka", + "value": ["#FC354C", "#0ABFBC"] + }, + { + "text": "Pinot Noir", + "value": ["#4b6cb7", "#182848"] + }, + { + "text": "Day Tripper", + "value": ["#f857a6", "#ff5858"] + }, + { + "text": "Namn", + "value": ["#a73737", "#7a2828"] + }, + { + "text": "Blurry Beach", + "value": ["#d53369", "#cbad6d"] + }, + { + "text": "Vasily", + "value": ["#e9d362", "#333333"] + }, + { + "text": "A Lost Memory", + "value": ["#DE6262", "#FFB88C"] + }, + { + "text": "Petrichor", + "value": ["#666600", "#999966"] + }, + { + "text": "Jonquil", + "value": ["#FFEEEE", "#DDEFBB"] + }, + { + "text": "Sirius Tamed", + "value": ["#EFEFBB", "#D4D3DD"] + }, + { + "text": "Kyoto", + "value": ["#c21500", "#ffc500"] + }, + { + "text": "Misty Meadow", + "value": ["#215f00", "#e4e4d9"] + }, + { + "text": "Aqualicious", + "value": ["#50C9C3", "#96DEDA"] + }, + { + "text": "Moor", + "value": ["#616161", "#9bc5c3"] + }, + { + "text": "Almost", + "value": ["#ddd6f3", "#faaca8"] + }, + { + "text": "Forever Lost", + "value": ["#5D4157", "#A8CABA"] + }, + { + "text": "Winter", + "value": ["#E6DADA", "#274046"] + }, + { + "text": "Nelson", + "value": ["#f2709c", "#ff9472"] + }, + { + "text": "Autumn", + "value": ["#DAD299", "#B0DAB9"] + }, + { + "text": "Candy", + "value": ["#D3959B", "#BFE6BA"] + }, + { + "text": "Reef", + "value": ["#00d2ff", "#3a7bd5"] + }, + { + "text": "The Strain", + "value": ["#870000", "#190A05"] + }, + { + "text": "Dirty Fog", + "value": ["#B993D6", "#8CA6DB"] + }, + { + "text": "Earthly", + "value": ["#649173", "#DBD5A4"] + }, + { + "text": "Virgin", + "value": ["#C9FFBF", "#FFAFBD"] + }, + { + "text": "Ash", + "value": ["#606c88", "#3f4c6b"] + }, + { + "text": "Cherryblossoms", + "value": ["#FBD3E9", "#BB377D"] + }, + { + "text": "Parklife", + "value": ["#ADD100", "#7B920A"] + }, + { + "text": "Dance To Forget", + "value": ["#FF4E50", "#F9D423"] + }, + { + "text": "Starfall", + "value": ["#F0C27B", "#4B1248"] + }, + { + "text": "Red Mist", + "value": ["#000000", "#e74c3c"] + }, + { + "text": "Teal Love", + "value": ["#AAFFA9", "#11FFBD"] + }, + { + "text": "Neon Life", + "value": ["#B3FFAB", "#12FFF7"] + }, + { + "text": "Man of Steel", + "value": ["#780206", "#061161"] + }, + { + "text": "Amethyst", + "value": ["#9D50BB", "#6E48AA"] + }, + { + "text": "Cheer Up Emo Kid", + "value": ["#556270", "#FF6B6B"] + }, + { + "text": "Shore", + "value": ["#70e1f5", "#ffd194"] + }, + { + "text": "Facebook Messenger", + "value": ["#00c6ff", "#0072ff"] + }, + { + "text": "SoundCloud", + "value": ["#fe8c00", "#f83600"] + }, + { + "text": "Behongo", + "value": ["#52c234", "#061700"] + }, + { + "text": "ServQuick", + "value": ["#485563", "#29323c"] + }, + { + "text": "Friday", + "value": ["#83a4d4", "#b6fbff"] + }, + { + "text": "Martini", + "value": ["#FDFC47", "#24FE41"] + }, + { + "text": "Metallic Toad", + "value": ["#abbaab", "#ffffff"] + }, + { + "text": "Between The Clouds", + "value": ["#73C8A9", "#373B44"] + }, + { + "text": "Crazy Orange I", + "value": ["#D38312", "#A83279"] + }, + { + "text": "Hersheys", + "value": ["#1e130c", "#9a8478"] + }, + { + "text": "Talking To Mice Elf", + "value": ["#948E99", "#2E1437"] + }, + { + "text": "Purple Bliss", + "value": ["#360033", "#0b8793"] + }, + { + "text": "Predawn", + "value": ["#FFA17F", "#00223E"] + }, + { + "text": "Endless River", + "value": ["#43cea2", "#185a9d"] + }, + { + "text": "Pastel Orange at the Sun", + "value": ["#ffb347", "#ffcc33"] + }, + { + "text": "Twitch", + "value": ["#6441A5", "#2a0845"] + }, + { + "text": "Atlas", + "value": ["#FEAC5E", "#C779D0", "#4BC0C8"] + }, + { + "text": "Instagram", + "value": ["#833ab4", "#fd1d1d", "#fcb045"] + }, + { + "text": "Flickr", + "value": ["#ff0084", "#33001b"] + }, + { + "text": "Vine", + "value": ["#00bf8f", "#001510"] + }, + { + "text": "Turquoise flow", + "value": ["#136a8a", "#267871"] + }, + { + "text": "Portrait", + "value": ["#8e9eab", "#eef2f3"] + }, + { + "text": "Virgin America", + "value": ["#7b4397", "#dc2430"] + }, + { + "text": "Koko Caramel", + "value": ["#D1913C", "#FFD194"] + }, + { + "text": "Fresh Turboscent", + "value": ["#F1F2B5", "#135058"] + }, + { + "text": "Green to dark", + "value": ["#6A9113", "#141517"] + }, + { + "text": "Ukraine", + "value": ["#004FF9", "#FFF94C"] + }, + { + "text": "Curiosity blue", + "value": ["#525252", "#3d72b4"] + }, + { + "text": "Dark Knight", + "value": ["#BA8B02", "#181818"] + }, + { + "text": "Piglet", + "value": ["#ee9ca7", "#ffdde1"] + }, + { + "text": "Lizard", + "value": ["#304352", "#d7d2cc"] + }, + { + "text": "Sage Persuasion", + "value": ["#CCCCB2", "#757519"] + }, + { + "text": "Between Night and Day", + "value": ["#2c3e50", "#3498db"] + }, + { + "text": "Timber", + "value": ["#fc00ff", "#00dbde"] + }, + { + "text": "Passion", + "value": ["#e53935", "#e35d5b"] + }, + { + "text": "Clear Sky", + "value": ["#005C97", "#363795"] + }, + { + "text": "Master Card", + "value": ["#f46b45", "#eea849"] + }, + { + "text": "Back To Earth", + "value": ["#00C9FF", "#92FE9D"] + }, + { + "text": "Deep Purple", + "value": ["#673AB7", "#512DA8"] + }, + { + "text": "Little Leaf", + "value": ["#76b852", "#8DC26F"] + }, + { + "text": "Netflix", + "value": ["#8E0E00", "#1F1C18"] + }, + { + "text": "Light Orange", + "value": ["#FFB75E", "#ED8F03"] + }, + { + "text": "Green and Blue", + "value": ["#c2e59c", "#64b3f4"] + }, + { + "text": "Poncho", + "value": ["#403A3E", "#BE5869"] + }, + { + "text": "Back to the Future", + "value": ["#C02425", "#F0CB35"] + }, + { + "text": "Blush", + "value": ["#B24592", "#F15F79"] + }, + { + "text": "Inbox", + "value": ["#457fca", "#5691c8"] + }, + { + "text": "Purplin", + "value": ["#6a3093", "#a044ff"] + }, + { + "text": "Pale Wood", + "value": ["#eacda3", "#d6ae7b"] + }, + { + "text": "Haikus", + "value": ["#fd746c", "#ff9068"] + }, + { + "text": "Pizelex", + "value": ["#114357", "#F29492"] + }, + { + "text": "Joomla", + "value": ["#1e3c72", "#2a5298"] + }, + { + "text": "Christmas", + "value": ["#2F7336", "#AA3A38"] + }, + { + "text": "Minnesota Vikings", + "value": ["#5614B0", "#DBD65C"] + }, + { + "text": "Miami Dolphins", + "value": ["#4DA0B0", "#D39D38"] + }, + { + "text": "Forest", + "value": ["#5A3F37", "#2C7744"] + }, + { + "text": "Nighthawk", + "value": ["#2980b9", "#2c3e50"] + }, + { + "text": "Superman", + "value": ["#0099F7", "#F11712"] + }, + { + "text": "Suzy", + "value": ["#834d9b", "#d04ed6"] + }, + { + "text": "Dark Skies", + "value": ["#4B79A1", "#283E51"] + }, + { + "text": "Deep Space", + "value": ["#000000", "#434343"] + }, + { + "text": "Decent", + "value": ["#4CA1AF", "#C4E0E5"] + }, + { + "text": "value Of Sky", + "value": ["#E0EAFC", "#CFDEF3"] + }, + { + "text": "Purple White", + "value": ["#BA5370", "#F4E2D8"] + }, + { + "text": "Ali", + "value": ["#ff4b1f", "#1fddff"] + }, + { + "text": "Alihossein", + "value": ["#f7ff00", "#db36a4"] + }, + { + "text": "Shahabi", + "value": ["#a80077", "#66ff00"] + }, + { + "text": "Red Ocean", + "value": ["#1D4350", "#A43931"] + }, + { + "text": "Tranquil", + "value": ["#EECDA3", "#EF629F"] + }, + { + "text": "Transfile", + "value": ["#16BFFD", "#CB3066"] + }, + + { + "text": "Sylvia", + "value": ["#ff4b1f", "#ff9068"] + }, + { + "text": "Sweet Morning", + "value": ["#FF5F6D", "#FFC371"] + }, + { + "text": "Politics", + "value": ["#2196f3", "#f44336"] + }, + { + "text": "Bright Vault", + "value": ["#00d2ff", "#928DAB"] + }, + { + "text": "Solid Vault", + "value": ["#3a7bd5", "#3a6073"] + }, + { + "text": "Sunset", + "value": ["#0B486B", "#F56217"] + }, + { + "text": "Grapefruit Sunset", + "value": ["#e96443", "#904e95"] + }, + { + "text": "Deep Sea Space", + "value": ["#2C3E50", "#4CA1AF"] + }, + { + "text": "Dusk", + "value": ["#2C3E50", "#FD746C"] + }, + { + "text": "Minimal Red", + "value": ["#F00000", "#DC281E"] + }, + { + "text": "Royal", + "value": ["#141E30", "#243B55"] + }, + { + "text": "Mauve", + "value": ["#42275a", "#734b6d"] + }, + { + "text": "Frost", + "value": ["#000428", "#004e92"] + }, + { + "text": "Lush", + "value": ["#56ab2f", "#a8e063"] + }, + { + "text": "Firewatch", + "value": ["#cb2d3e", "#ef473a"] + }, + { + "text": "Sherbert", + "value": ["#f79d00", "#64f38c"] + }, + { + "text": "Blood Red", + "value": ["#f85032", "#e73827"] + }, + { + "text": "Sun on the Horizon", + "value": ["#fceabb", "#f8b500"] + }, + { + "text": "IIIT Delhi", + "value": ["#808080", "#3fada8"] + }, + { + "text": "Jupiter", + "value": ["#ffd89b", "#19547b"] + }, + { + "text": "50 Shades of Grey", + "value": ["#bdc3c7", "#2c3e50"] + }, + { + "text": "Dania", + "value": ["#BE93C5", "#7BC6CC"] + }, + { + "text": "Limeade", + "value": ["#A1FFCE", "#FAFFD1"] + }, + { + "text": "Disco", + "value": ["#4ECDC4", "#556270"] + }, + { + "text": "Love Couple", + "value": ["#3a6186", "#89253e"] + }, + { + "text": "Azure Pop", + "value": ["#ef32d9", "#89fffd"] + }, + { + "text": "Nepal", + "value": ["#de6161", "#2657eb"] + }, + { + "text": "Cosmic Fusion", + "value": ["#ff00cc", "#333399"] + }, + { + "text": "Snapchat", + "value": ["#fffc00", "#ffffff"] + }, + { + "text": "Ed's Sunset Gradient", + "value": ["#ff7e5f", "#feb47b"] + }, + { + "text": "Brady Brady Fun Fun", + "value": ["#00c3ff", "#ffff1c"] + }, + { + "text": "Black Rosé", + "value": ["#f4c4f3", "#fc67fa"] + }, + { + "text": "80's Purple", + "value": ["#41295a", "#2F0743"] + }, + { + "text": "Radar", + "value": ["#A770EF", "#CF8BF3", "#FDB99B"] + }, + { + "text": "Ibiza Sunset", + "value": ["#ee0979", "#ff6a00"] + }, + { + "text": "Dawn", + "value": ["#F3904F", "#3B4371"] + }, + { + "text": "Mild", + "value": ["#67B26F", "#4ca2cd"] + }, + { + + "text": "Vice City", + "value": ["#3494E6", "#EC6EAD"] + }, + { + "text": "Jaipur", + "value": ["#DBE6F6", "#C5796D"] + + }, + { + "text": "Jodhpur", + "value": ["#9CECFB", "#65C7F7", "#0052D4"] + + }, + { + "text": "Cocoaa Ice", + "value": ["#c0c0aa", "#1cefff"] + }, + { + "text": "EasyMed", + "value": ["#DCE35B", "#45B649"] + }, + { + "text": "Rose Colored Lenses", + "value": ["#E8CBC0", "#636FA4"] + }, + { + "text": "What lies Beyond", + "value": ["#F0F2F0", "#000C40"] + }, + { + "text": "Roseanna", + "value": ["#FFAFBD", "#ffc3a0"] + }, + { + "text": "Honey Dew", + "value": ["#43C6AC", "#F8FFAE"] + }, + { + "text": "Under the Lake", + "value": ["#093028", "#237A57"] + }, + { + "text": "The Blue Lagoon", + "value": ["#43C6AC", "#191654"] + }, + { + "text": "Can You Feel The Love Tonight", + "value": ["#4568DC", "#B06AB3"] + }, + { + "text": "Very Blue", + "value": ["#0575E6", "#021B79"] + }, + { + "text": "Love and Liberty", + "value": ["#200122", "#6f0000"] + }, + { + "text": "Orca", + "value": ["#44A08D", "#093637"] + }, + { + "text": "Venice", + "value": ["#6190E8", "#A7BFE8"] + }, + { + "text": "Pacific Dream", + "value": ["#34e89e", "#0f3443"] + }, + { + "text": "Learning and Leading", + "value": ["#F7971E", "#FFD200"] + }, + { + "text": "Celestial", + "value": ["#C33764", "#1D2671"] + }, + { + "text": "Purplepine", + "value": ["#20002c", "#cbb4d4"] + }, + { + "text": "Sha la la", + "value": ["#D66D75", "#E29587"] + }, + { + "text": "Mini", + "value": ["#30E8BF", "#FF8235"] + }, + { + "text": "Maldives", + "value": ["#B2FEFA", "#0ED2F7"] + }, + { + "text": "Cinnamint", + "value": ["#4AC29A", "#BDFFF3"] + }, + { + "text": "Html", + "value": ["#E44D26", "#F16529"] + }, + { + "text": "Coal", + "value": ["#EB5757", "#000000"] + }, + { + "text": "Sunkist", + "value": ["#F2994A", "#F2C94C"] + }, + { + "text": "Blue Skies", + "value": ["#56CCF2", "#2F80ED"] + }, + { + "text": "Chitty Chitty Bang Bang", + "value": ["#007991", "#78ffd6"] + }, + { + "text": "Visions of Grandeur", + "value": ["#000046", "#1CB5E0"] + }, + { + "text": "Crystal Clear", + "value": ["#159957", "#155799"] + }, + { + "text": "Mello", + "value": ["#c0392b", "#8e44ad"] + }, + { + "text": "Compare Now", + "value": ["#EF3B36", "#FFFFFF"] + }, + { + "text": "Meridian", + "value": ["#283c86", "#45a247"] + }, + { + "text": "Relay", + "value": ["#3A1C71", "#D76D77", "#FFAF7B"] + }, + { + "text": "Alive", + "value": ["#CB356B", "#BD3F32"] + }, + { + "text": "Scooter", + "value": ["#36D1DC", "#5B86E5"] + }, + { + "text": "Terminal", + "value": ["#000000", "#0f9b0f"] + }, + { + "text": "Telegram", + "value": ["#1c92d2", "#f2fcfe"] + }, + { + "text": "Crimson Tide", + "value": ["#642B73", "#C6426E"] + }, + { + "text": "Socialive", + "value": ["#06beb6", "#48b1bf"] + }, + { + "text": "Subu", + "value": ["#0cebeb", "#20e3b2", "#29ffc6"] + }, + { + "text": "Broken Hearts", + "value": ["#d9a7c7", "#fffcdc"] + }, + { + "text": "Kimoby Is The New Blue", + "value": ["#396afc", "#2948ff"] + }, + { + "text": "Dull", + "value": ["#C9D6FF", "#E2E2E2"] + }, + { + "text": "Purpink", + "value": ["#7F00FF", "#E100FF"] + }, + { + "text": "Orange Coral", + "value": ["#ff9966", "#ff5e62"] + }, + { + "text": "Summer", + "value": ["#22c1c3", "#fdbb2d"] + }, + { + "text": "King Yna", + "value": ["#1a2a6c", "#b21f1f", "#fdbb2d"] + }, + { + "text": "Velvet Sun", + "value": ["#e1eec3", "#f05053"] + }, + { + "text": "Zinc", + "value": ["#ADA996", "#F2F2F2", "#DBDBDB", "#EAEAEA"] + }, + { + "text": "Hydrogen", + "value": ["#667db6", "#0082c8", "#0082c8", "#667db6"] + }, + { + "text": "Argon", + "value": ["#03001e", "#7303c0", "#ec38bc", "#fdeff9"] + }, + { + "text": "Lithium", + "value": ["#6D6027", "#D3CBB8"] + }, + { + "text": "Digital Water", + "value": ["#74ebd5","#ACB6E5"] + }, + { + "text": "Orange Fun", + "value": ["#fc4a1a", "#f7b733"] + }, + { + "text": "Rainbow Blue", + "value": ["#00F260", "#0575E6"] + }, + { + "text": "Pink Flavour", + "value": ["#800080", "#ffc0cb"] + }, + { + "text": "Sulphur", + "value": ["#CAC531", "#F3F9A7"] + }, + { + "text": "Selenium", + "value": ["#3C3B3F", "#605C3C"] + }, + { + "text": "Delicate", + "value": ["#D3CCE3", "#E9E4F0"] + }, + { + + "text": "Ohhappiness", + "value": ["#00b09b", "#96c93d"] + }, + { + "text": "Lawrencium", + "value": ["#0f0c29", "#302b63", "#24243e"] + }, + { + "text": "Relaxing red", + "value": ["#fffbd5", "#b20a2c"] + }, + { + "text": "Taran Tado", + "value": ["#23074d", "#cc5333"] + }, + { + "text": "Bighead", + "value": ["#c94b4b", "#4b134f"] + }, + { + "text": "Sublime Vivid", + "value": ["#FC466B", "#3F5EFB"] + }, + { + "text": "Sublime Light", + "value": ["#FC5C7D", "#6A82FB"] + }, + { + "text": "Pun Yeta", + "value": ["#108dc7", "#ef8e38"] + }, + { + "text": "Quepal", + "value": ["#11998e", "#38ef7d"] + }, + { + "text": "Sand to Blue", + "value": ["#3E5151", "#DECBA4"] + }, + { + "text": "Wedding Day Blues", + "value": ["#40E0D0", "#FF8C00", "#FF0080"] + }, + { + "text": "Shifter", + "value": ["#bc4e9c", "#f80759"] + }, + { + "text": "Red Sunset", + "value": ["#355C7D", "#6C5B7B", "#C06C84"] + }, + { + "text": "Moon Purple", + "value": ["#4e54c8", "#8f94fb"] + }, + { + "text": "Pure Lust", + "value": ["#333333", "#dd1818"] + }, + { + "text": "Slight Ocean View", + "value": ["#a8c0ff", "#3f2b96"] + }, + { + "text": "eXpresso", + "value": ["#ad5389", "#3c1053"] + }, + { + "text": "Shifty", + "value": ["#636363", "#a2ab58"] + }, + { + "text": "Vanusa", + "value": ["#DA4453", "#89216B"] + }, + { + "text": "Evening Night", + "value": ["#005AA7", "#FFFDE4"] + }, + { + "text": "Magic", + "value": ["#59C173", "#a17fe0", "#5D26C1"] + }, + { + "text": "Margo", + "value": ["#FFEFBA", "#FFFFFF"] + }, + { + "text": "Blue Raspberry", + "value": ["#00B4DB", "#0083B0"] + }, + { + "text": "Citrus Peel", + "value": ["#FDC830", "#F37335"] + }, + { + "text": "Sin City Red", + "value": ["#ED213A", "#93291E"] + }, + { + "text": "Rastafari", + "value": ["#1E9600", "#FFF200", "#FF0000"] + }, + { + "text": "Summer Dog", + "value": ["#a8ff78", "#78ffd6"] + }, + { + "text": "Wiretap", + "value": ["#8A2387", "#E94057", "#F27121"] + }, + { + "text": "Burning Orange", + "value": ["#FF416C", "#FF4B2B"] + }, + { + "text": "Ultra Voilet", + "value": ["#654ea3", "#eaafc8"] + }, + { + "text": "By Design", + "value": ["#009FFF", "#ec2F4B"] + }, + { + "text": "Kyoo Tah", + "value": ["#544a7d", "#ffd452"] + }, + { + "text": "Kye Meh", + "value": ["#8360c3", "#2ebf91"] + }, + { + "text": "Kyoo Pal", + "value": ["#dd3e54", "#6be585"] + }, + { + "text": "Metapolis", + "value": ["#659999", "#f4791f"] + }, + { + "text": "Flare", + "value": ["#f12711", "#f5af19"] + }, + { + "text": "Witching Hour", + "value": ["#c31432", "#240b36"] + }, + { + "text": "Azur Lane", + "value": ["#7F7FD5", "#86A8E7", "#91EAE4"] + }, + { + "text": "Neuromancer", + "value": ["#f953c6", "#b91d73"] + }, + { + "text": "Harvey", + "value": ["#1f4037", "#99f2c8"] + }, + { + "text": "Amin", + "value": ["#8E2DE2", "#4A00E0"] + }, + { + "text": "Memariani", + "value": ["#aa4b6b", "#6b6b83" , "#3b8d99"] + }, + { + "text": "Yoda", + "value": ["#FF0099", "#493240"] + }, + { + "text": "Cool Sky", + "value": ["#2980B9", "#6DD5FA", "#FFFFFF"] + }, + { + "text": "Dark Ocean", + "value": ["#373B44", "#4286f4"] + }, + { + "text": "Evening Sunshine", + "value": ["#b92b27", "#1565C0"] + }, + { + "text": "JShine", + "value": ["#12c2e9","#c471ed","#f64f59"] + }, + { + "text": "Moonlit Asteroid", + "value": ["#0F2027", "#203A43", "#2C5364"] + }, + { + "text": "MegaTron", + "value": ["#C6FFDD", "#FBD786", "#f7797d"] + }, + { + "text": "Cool Blues", + "value": ["#2193b0","#6dd5ed"] + }, + { + "text": "Piggy Pink", + "value": ["#ee9ca7","#ffdde1"] + }, + { + "text": "Grade Grey", + "value": ["#bdc3c7","#2c3e50"] + } +] \ No newline at end of file diff --git a/src/pages/index.html b/src/pages/index.html index c5981b4..34223a0 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -5,7 +5,7 @@ ESP Kit - + @@ -21,7 +21,7 @@ data-name="hue" data-topic="pixels/hue" data-default="0" - data-entries='[{"text": "None", "value": "0"}, {"text": "Cool", "value": "1"}, {"text": "Warm", "value": "2"}, {"text": "Alien", "value": "5"}]' + data-external="/gradients.json" >
        • +
        + IlluChat +
        +
        +
        +
        Settings

        Network

        NeoPixel

        -
        +
        +

        MQTT

        +
        System
         bytes

        +
        + +
        +
        diff --git a/src/styles/chat.less b/src/styles/chat.less new file mode 100644 index 0000000..2c46b5f --- /dev/null +++ b/src/styles/chat.less @@ -0,0 +1,23 @@ +.Chat { + .message-container{ + max-height: 200px; + overflow: auto; + .messages { + list-style-type: none; + .user-label { + color: lightblue; + &:before { + color: @color-main; + content: '<' + } + &:after { + color: @color-main; + content: '>' + } + } + .message-text{ + font-weight: normal; + } + } + } +} \ No newline at end of file diff --git a/src/styles/main.less b/src/styles/main.less index 7f84482..85e484e 100644 --- a/src/styles/main.less +++ b/src/styles/main.less @@ -10,3 +10,5 @@ @import "form/input.less"; @import "form/color.less"; @import "form/select.less"; + +@import "chat.less";