├── .gitattributes ├── .gitignore ├── LICENSE ├── NeoMatrix-Generator-Demo └── NeoMatrix-Generator-Demo.ino ├── README.md ├── all_colors.js ├── generator.css ├── generator.js ├── index.html ├── nbproject ├── project.properties └── project.xml └── screenshot.jpg /.gitattributes: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /nbproject/private/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Pavel Cesnokov (www.cesnokov.lt). 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /NeoMatrix-Generator-Demo/NeoMatrix-Generator-Demo.ino: -------------------------------------------------------------------------------- 1 | 2 | #include 3 | #include 4 | 5 | #define PIN 3 // Pin to which the input of the matrix is connected 6 | 7 | Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(13, 10, PIN, 8 | NEO_MATRIX_TOP + NEO_MATRIX_LEFT + 9 | NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE, 10 | NEO_GRB + NEO_KHZ800); 11 | 12 | 13 | void setup() { 14 | matrix.begin(); 15 | matrix.setBrightness(20); 16 | } 17 | 18 | void loop() { 19 | image1(); 20 | delay(10000); 21 | } 22 | 23 | void image1() { 24 | matrix.fillScreen(0); 25 | matrix.drawPixel(3, 0, matrix.Color(125, 102, 8)); 26 | matrix.drawPixel(4, 0, matrix.Color(255, 255, 0)); 27 | matrix.drawPixel(5, 0, matrix.Color(255, 255, 0)); 28 | matrix.drawPixel(6, 0, matrix.Color(255, 255, 0)); 29 | matrix.drawPixel(7, 0, matrix.Color(255, 255, 0)); 30 | matrix.drawPixel(8, 0, matrix.Color(255, 255, 0)); 31 | matrix.drawPixel(9, 0, matrix.Color(125, 102, 8)); 32 | matrix.drawPixel(2, 1, matrix.Color(125, 102, 8)); 33 | matrix.drawPixel(3, 1, matrix.Color(255, 255, 0)); 34 | matrix.drawPixel(4, 1, matrix.Color(255, 255, 0)); 35 | matrix.drawPixel(5, 1, matrix.Color(255, 255, 0)); 36 | matrix.drawPixel(6, 1, matrix.Color(255, 255, 0)); 37 | matrix.drawPixel(7, 1, matrix.Color(255, 255, 0)); 38 | matrix.drawPixel(8, 1, matrix.Color(255, 255, 0)); 39 | matrix.drawPixel(9, 1, matrix.Color(255, 255, 0)); 40 | matrix.drawPixel(10, 1, matrix.Color(125, 102, 8)); 41 | matrix.drawPixel(1, 2, matrix.Color(125, 102, 8)); 42 | matrix.drawPixel(2, 2, matrix.Color(255, 255, 0)); 43 | matrix.drawPixel(3, 2, matrix.Color(255, 255, 255)); 44 | matrix.drawPixel(4, 2, matrix.Color(255, 255, 255)); 45 | matrix.drawPixel(5, 2, matrix.Color(255, 255, 0)); 46 | matrix.drawPixel(6, 2, matrix.Color(255, 255, 0)); 47 | matrix.drawPixel(7, 2, matrix.Color(255, 255, 0)); 48 | matrix.drawPixel(8, 2, matrix.Color(255, 255, 255)); 49 | matrix.drawPixel(9, 2, matrix.Color(255, 255, 255)); 50 | matrix.drawPixel(10, 2, matrix.Color(255, 255, 0)); 51 | matrix.drawPixel(11, 2, matrix.Color(125, 102, 8)); 52 | matrix.drawPixel(0, 3, matrix.Color(125, 102, 8)); 53 | matrix.drawPixel(1, 3, matrix.Color(255, 255, 0)); 54 | matrix.drawPixel(2, 3, matrix.Color(255, 255, 0)); 55 | matrix.drawPixel(3, 3, matrix.Color(255, 255, 255)); 56 | matrix.drawPixel(4, 3, matrix.Color(0, 0, 0)); 57 | matrix.drawPixel(5, 3, matrix.Color(255, 255, 0)); 58 | matrix.drawPixel(6, 3, matrix.Color(255, 255, 0)); 59 | matrix.drawPixel(7, 3, matrix.Color(255, 255, 0)); 60 | matrix.drawPixel(8, 3, matrix.Color(0, 0, 0)); 61 | matrix.drawPixel(9, 3, matrix.Color(255, 255, 255)); 62 | matrix.drawPixel(10, 3, matrix.Color(255, 255, 0)); 63 | matrix.drawPixel(11, 3, matrix.Color(255, 255, 0)); 64 | matrix.drawPixel(12, 3, matrix.Color(125, 102, 8)); 65 | matrix.drawPixel(0, 4, matrix.Color(125, 102, 8)); 66 | matrix.drawPixel(1, 4, matrix.Color(255, 255, 0)); 67 | matrix.drawPixel(2, 4, matrix.Color(255, 255, 0)); 68 | matrix.drawPixel(3, 4, matrix.Color(255, 255, 255)); 69 | matrix.drawPixel(4, 4, matrix.Color(0, 0, 0)); 70 | matrix.drawPixel(5, 4, matrix.Color(255, 255, 0)); 71 | matrix.drawPixel(6, 4, matrix.Color(255, 255, 0)); 72 | matrix.drawPixel(7, 4, matrix.Color(255, 255, 0)); 73 | matrix.drawPixel(8, 4, matrix.Color(0, 0, 0)); 74 | matrix.drawPixel(9, 4, matrix.Color(255, 255, 255)); 75 | matrix.drawPixel(10, 4, matrix.Color(255, 255, 0)); 76 | matrix.drawPixel(11, 4, matrix.Color(255, 255, 0)); 77 | matrix.drawPixel(12, 4, matrix.Color(125, 102, 8)); 78 | matrix.drawPixel(0, 5, matrix.Color(125, 102, 8)); 79 | matrix.drawPixel(1, 5, matrix.Color(255, 255, 0)); 80 | matrix.drawPixel(2, 5, matrix.Color(255, 255, 0)); 81 | matrix.drawPixel(3, 5, matrix.Color(255, 255, 0)); 82 | matrix.drawPixel(4, 5, matrix.Color(255, 255, 0)); 83 | matrix.drawPixel(5, 5, matrix.Color(255, 255, 0)); 84 | matrix.drawPixel(6, 5, matrix.Color(255, 255, 0)); 85 | matrix.drawPixel(7, 5, matrix.Color(255, 255, 0)); 86 | matrix.drawPixel(8, 5, matrix.Color(255, 255, 0)); 87 | matrix.drawPixel(9, 5, matrix.Color(255, 255, 0)); 88 | matrix.drawPixel(10, 5, matrix.Color(255, 255, 0)); 89 | matrix.drawPixel(11, 5, matrix.Color(255, 255, 0)); 90 | matrix.drawPixel(12, 5, matrix.Color(125, 102, 8)); 91 | matrix.drawPixel(0, 6, matrix.Color(125, 102, 8)); 92 | matrix.drawPixel(1, 6, matrix.Color(255, 255, 0)); 93 | matrix.drawPixel(2, 6, matrix.Color(255, 255, 0)); 94 | matrix.drawPixel(3, 6, matrix.Color(255, 0, 0)); 95 | matrix.drawPixel(4, 6, matrix.Color(255, 255, 0)); 96 | matrix.drawPixel(5, 6, matrix.Color(255, 255, 0)); 97 | matrix.drawPixel(6, 6, matrix.Color(255, 255, 0)); 98 | matrix.drawPixel(7, 6, matrix.Color(255, 255, 0)); 99 | matrix.drawPixel(8, 6, matrix.Color(255, 255, 0)); 100 | matrix.drawPixel(9, 6, matrix.Color(255, 0, 0)); 101 | matrix.drawPixel(10, 6, matrix.Color(255, 255, 0)); 102 | matrix.drawPixel(11, 6, matrix.Color(255, 255, 0)); 103 | matrix.drawPixel(12, 6, matrix.Color(125, 102, 8)); 104 | matrix.drawPixel(1, 7, matrix.Color(125, 102, 8)); 105 | matrix.drawPixel(2, 7, matrix.Color(255, 255, 0)); 106 | matrix.drawPixel(3, 7, matrix.Color(255, 255, 0)); 107 | matrix.drawPixel(4, 7, matrix.Color(255, 0, 0)); 108 | matrix.drawPixel(5, 7, matrix.Color(255, 0, 0)); 109 | matrix.drawPixel(6, 7, matrix.Color(255, 0, 0)); 110 | matrix.drawPixel(7, 7, matrix.Color(255, 0, 0)); 111 | matrix.drawPixel(8, 7, matrix.Color(255, 0, 0)); 112 | matrix.drawPixel(9, 7, matrix.Color(255, 255, 0)); 113 | matrix.drawPixel(10, 7, matrix.Color(255, 255, 0)); 114 | matrix.drawPixel(11, 7, matrix.Color(125, 102, 8)); 115 | matrix.drawPixel(2, 8, matrix.Color(125, 102, 8)); 116 | matrix.drawPixel(3, 8, matrix.Color(255, 255, 0)); 117 | matrix.drawPixel(4, 8, matrix.Color(255, 255, 0)); 118 | matrix.drawPixel(5, 8, matrix.Color(100, 30, 22)); 119 | matrix.drawPixel(6, 8, matrix.Color(100, 30, 22)); 120 | matrix.drawPixel(7, 8, matrix.Color(100, 30, 22)); 121 | matrix.drawPixel(8, 8, matrix.Color(255, 255, 0)); 122 | matrix.drawPixel(9, 8, matrix.Color(255, 255, 0)); 123 | matrix.drawPixel(10, 8, matrix.Color(125, 102, 8)); 124 | matrix.drawPixel(3, 9, matrix.Color(125, 102, 8)); 125 | matrix.drawPixel(4, 9, matrix.Color(255, 255, 0)); 126 | matrix.drawPixel(5, 9, matrix.Color(255, 255, 0)); 127 | matrix.drawPixel(6, 9, matrix.Color(255, 255, 0)); 128 | matrix.drawPixel(7, 9, matrix.Color(255, 255, 0)); 129 | matrix.drawPixel(8, 9, matrix.Color(255, 255, 0)); 130 | matrix.drawPixel(9, 9, matrix.Color(125, 102, 8)); 131 | matrix.show(); 132 | } 133 | 134 | //EOF 135 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | NeoMatrix Generator 2 | ======= 3 | 4 | Arduino NeoMatrix (NeoPixel) VISIWIG graphics editor. 5 | 6 | ![Demo Shot](/screenshot.jpg) 7 | 8 | The part of [Opportunity-3000 project](https://github.com/cesnokov/Opportunity-3000). 9 | 10 | Requirements 11 | ------------ 12 | 13 | - [Adafruit_NeoPixel](https://github.com/adafruit/Adafruit_NeoPixel) 14 | - [Adafruit_NeoMatrix](https://github.com/adafruit/Adafruit_NeoMatrix) 15 | -------------------------------------------------------------------------------- /all_colors.js: -------------------------------------------------------------------------------- 1 | 2 | // HEX, RGB, HSL 3 | 4 | var allColors = [ 5 | ["#f9ebea", "249, 235, 234", "6, 54%, 95%"], 6 | ["#f2d7d5", "242, 215, 213", "6, 54%, 89%"], 7 | ["#e6b0aa", "230, 176, 170", "6, 54%, 78%"], 8 | ["#d98880", "217, 136, 128", "6, 54%, 68%"], 9 | ["#cd6155", "205, 97, 85", "6, 54%, 57%"], 10 | ["#c0392b", "192, 57, 43", "6, 63%, 46%"], 11 | ["#a93226", "169, 50, 38", "6, 63%, 41%"], 12 | ["#922b21", "146, 43, 33", "6, 63%, 35%"], 13 | ["#7b241c", "123, 36, 28", "6, 63%, 29%"], 14 | ["#641e16", "100, 30, 22", "6, 63%, 24%"], 15 | ["#fdedec", "253, 237, 236", "6, 78%, 96%"], 16 | ["#fadbd8", "250, 219, 216", "6, 78%, 91%"], 17 | ["#f5b7b1", "245, 183, 177", "6, 78%, 83%"], 18 | ["#f1948a", "241, 148, 138", "6, 78%, 74%"], 19 | ["#ec7063", "236, 112, 99", "6, 78%, 66%"], 20 | ["#e74c3c", "231, 76, 60", "6, 78%, 57%"], 21 | ["#cb4335", "203, 67, 53", "6, 59%, 50%"], 22 | ["#b03a2e", "176, 58, 46", "6, 59%, 43%"], 23 | ["#943126", "148, 49, 38", "6, 59%, 37%"], 24 | ["#78281f", "120, 40, 31", "6, 59%, 30%"], 25 | ["#f5eef8", "245, 238, 248", "283, 39%, 95%"], 26 | ["#ebdef0", "235, 222, 240", "283, 39%, 91%"], 27 | ["#d7bde2", "215, 189, 226", "283, 39%, 81%"], 28 | ["#c39bd3", "195, 155, 211", "283, 39%, 72%"], 29 | ["#af7ac5", "175, 122, 197", "283, 39%, 63%"], 30 | ["#9b59b6", "155, 89, 182", "283, 39%, 53%"], 31 | ["#884ea0", "136, 78, 160", "283, 34%, 47%"], 32 | ["#76448a", "118, 68, 138", "283, 34%, 40%"], 33 | ["#633974", "99, 57, 116", "283, 34%, 34%"], 34 | ["#512e5f", "81, 46, 95", "283, 34%, 28%"], 35 | ["#f4ecf7", "244, 236, 247", "282, 39%, 95%"], 36 | ["#e8daef", "232, 218, 239", "282, 39%, 89%"], 37 | ["#d2b4de", "210, 180, 222", "282, 39%, 79%"], 38 | ["#bb8fce", "187, 143, 206", "282, 39%, 68%"], 39 | ["#a569bd", "165, 105, 189", "282, 39%, 58%"], 40 | ["#8e44ad", "142, 68, 173", "282, 44%, 47%"], 41 | ["#7d3c98", "125, 60, 152", "282, 44%, 42%"], 42 | ["#6c3483", "108, 52, 131", "282, 44%, 36%"], 43 | ["#5b2c6f", "91, 44, 111", "282, 44%, 30%"], 44 | ["#4a235a", "74, 35, 90", "282, 44%, 25%"], 45 | ["#eaf2f8", "234, 242, 248", "204, 51%, 94%"], 46 | ["#d4e6f1", "212, 230, 241", "204, 51%, 89%"], 47 | ["#a9cce3", "169, 204, 227", "204, 51%, 78%"], 48 | ["#7fb3d5", "127, 179, 213", "204, 51%, 67%"], 49 | ["#5499c7", "84, 153, 199", "204, 51%, 55%"], 50 | ["#2980b9", "41, 128, 185", "204, 64%, 44%"], 51 | ["#2471a3", "36, 113, 163", "204, 64%, 39%"], 52 | ["#1f618d", "31, 97, 141", "204, 64%, 34%"], 53 | ["#1a5276", "26, 82, 118", "204, 64%, 28%"], 54 | ["#154360", "21, 67, 96", "204, 64%, 23%"], 55 | ["#ebf5fb", "235, 245, 251", "204, 70%, 95%"], 56 | ["#d6eaf8", "214, 234, 248", "204, 70%, 91%"], 57 | ["#aed6f1", "174, 214, 241", "204, 70%, 81%"], 58 | ["#85c1e9", "133, 193, 233", "204, 70%, 72%"], 59 | ["#5dade2", "93, 173, 226", "204, 70%, 63%"], 60 | ["#3498db", "52, 152, 219", "204, 70%, 53%"], 61 | ["#2e86c1", "46, 134, 193", "204, 62%, 47%"], 62 | ["#2874a6", "40, 116, 166", "204, 62%, 40%"], 63 | ["#21618c", "33, 97, 140", "204, 62%, 34%"], 64 | ["#1b4f72", "27, 79, 114", "204, 62%, 28%"], 65 | ["#e8f8f5", "232, 248, 245", "168, 55%, 94%"], 66 | ["#d1f2eb", "209, 242, 235", "168, 55%, 88%"], 67 | ["#a3e4d7", "163, 228, 215", "168, 55%, 77%"], 68 | ["#76d7c4", "118, 215, 196", "168, 55%, 65%"], 69 | ["#48c9b0", "72, 201, 176", "168, 55%, 54%"], 70 | ["#1abc9c", "26, 188, 156", "168, 76%, 42%"], 71 | ["#17a589", "23, 165, 137", "168, 76%, 37%"], 72 | ["#148f77", "20, 143, 119", "168, 76%, 32%"], 73 | ["#117864", "17, 120, 100", "168, 76%, 27%"], 74 | ["#0e6251", "14, 98, 81", "168, 76%, 22%"], 75 | ["#e8f6f3", "232, 246, 243", "168, 42%, 94%"], 76 | ["#d0ece7", "208, 236, 231", "168, 42%, 87%"], 77 | ["#a2d9ce", "162, 217, 206", "168, 42%, 74%"], 78 | ["#73c6b6", "115, 198, 182", "168, 42%, 61%"], 79 | ["#45b39d", "69, 179, 157", "168, 45%, 49%"], 80 | ["#16a085", "22, 160, 133", "168, 76%, 36%"], 81 | ["#138d75", "19, 141, 117", "168, 76%, 31%"], 82 | ["#117a65", "17, 122, 101", "168, 76%, 27%"], 83 | ["#0e6655", "14, 102, 85", "168, 76%, 23%"], 84 | ["#0b5345", "11, 83, 69", "168, 76%, 19%"], 85 | ["#e9f7ef", "233, 247, 239", "145, 45%, 94%"], 86 | ["#d4efdf", "212, 239, 223", "145, 45%, 88%"], 87 | ["#a9dfbf", "169, 223, 191", "145, 45%, 77%"], 88 | ["#7dcea0", "125, 206, 160", "145, 45%, 65%"], 89 | ["#52be80", "82, 190, 128", "145, 45%, 53%"], 90 | ["#27ae60", "39, 174, 96", "145, 63%, 42%"], 91 | ["#229954", "34, 153, 84", "145, 63%, 37%"], 92 | ["#1e8449", "30, 132, 73", "145, 63%, 32%"], 93 | ["#196f3d", "25, 111, 61", "145, 63%, 27%"], 94 | ["#145a32", "20, 90, 50", "145, 63%, 22%"], 95 | ["#eafaf1", "234, 250, 241", "145, 61%, 95%"], 96 | ["#d5f5e3", "213, 245, 227", "145, 61%, 90%"], 97 | ["#abebc6", "171, 235, 198", "145, 61%, 80%"], 98 | ["#82e0aa", "130, 224, 170", "145, 61%, 69%"], 99 | ["#58d68d", "88, 214, 141", "145, 61%, 59%"], 100 | ["#2ecc71", "46, 204, 113", "145, 63%, 49%"], 101 | ["#28b463", "40, 180, 99", "145, 63%, 43%"], 102 | ["#239b56", "35, 155, 86", "145, 63%, 37%"], 103 | ["#1d8348", "29, 131, 72", "145, 63%, 31%"], 104 | ["#186a3b", "24, 106, 59", "145, 63%, 25%"], 105 | ["#fef9e7", "254, 249, 231", "48, 89%, 95%"], 106 | ["#fcf3cf", "252, 243, 207", "48, 89%, 90%"], 107 | ["#f9e79f", "249, 231, 159", "48, 89%, 80%"], 108 | ["#f7dc6f", "247, 220, 111", "48, 89%, 70%"], 109 | ["#f4d03f", "244, 208, 63", "48, 89%, 60%"], 110 | ["#f1c40f", "241, 196, 15", "48, 89%, 50%"], 111 | ["#d4ac0d", "212, 172, 13", "48, 88%, 44%"], 112 | ["#b7950b", "183, 149, 11", "48, 88%, 38%"], 113 | ["#9a7d0a", "154, 125, 10", "48, 88%, 32%"], 114 | ["#7d6608", "125, 102, 8", "48, 88%, 26%"], 115 | ["#fef5e7", "254, 245, 231", "37, 90%, 95%"], 116 | ["#fdebd0", "253, 235, 208", "37, 90%, 90%"], 117 | ["#fad7a0", "250, 215, 160", "37, 90%, 80%"], 118 | ["#f8c471", "248, 196, 113", "37, 90%, 71%"], 119 | ["#f5b041", "245, 176, 65", "37, 90%, 61%"], 120 | ["#f39c12", "243, 156, 18", "37, 90%, 51%"], 121 | ["#d68910", "214, 137, 16", "37, 86%, 45%"], 122 | ["#b9770e", "185, 119, 14", "37, 86%, 39%"], 123 | ["#9c640c", "156, 100, 12", "37, 86%, 33%"], 124 | ["#7e5109", "126, 81, 9", "37, 86%, 27%"], 125 | ["#fdf2e9", "253, 242, 233", "28, 80%, 95%"], 126 | ["#fae5d3", "250, 229, 211", "28, 80%, 90%"], 127 | ["#f5cba7", "245, 203, 167", "28, 80%, 81%"], 128 | ["#f0b27a", "240, 178, 122", "28, 80%, 71%"], 129 | ["#eb984e", "235, 152, 78", "28, 80%, 61%"], 130 | ["#e67e22", "230, 126, 34", "28, 80%, 52%"], 131 | ["#ca6f1e", "202, 111, 30", "28, 74%, 46%"], 132 | ["#af601a", "175, 96, 26", "28, 74%, 39%"], 133 | ["#935116", "147, 81, 22", "28, 74%, 33%"], 134 | ["#784212", "120, 66, 18", "28, 74%, 27%"], 135 | ["#fbeee6", "251, 238, 230", "24, 71%, 94%"], 136 | ["#f6ddcc", "246, 221, 204", "24, 71%, 88%"], 137 | ["#edbb99", "237, 187, 153", "24, 71%, 77%"], 138 | ["#e59866", "229, 152, 102", "24, 71%, 65%"], 139 | ["#dc7633", "220, 118, 51", "24, 71%, 53%"], 140 | ["#d35400", "211, 84, 0", "24, 100%, 41%"], 141 | ["#ba4a00", "186, 74, 0", "24, 100%, 36%"], 142 | ["#a04000", "160, 64, 0", "24, 100%, 31%"], 143 | ["#873600", "135, 54, 0", "24, 100%, 26%"], 144 | ["#6e2c00", "110, 44, 0", "24, 100%, 22%"], 145 | ["#fefefe", "254, 254, 254", "192, 15%, 100%"], 146 | ["#fbfcfc", "251, 252, 252", "192, 15%, 99%"], 147 | ["#f7f9f9", "247, 249, 249", "192, 15%, 97%"], 148 | ["#f4f6f7", "244, 246, 247", "192, 15%, 96%"], 149 | ["#f0f3f4", "240, 243, 244", "192, 15%, 95%"], 150 | ["#ecf0f1", "236, 240, 241", "192, 15%, 94%"], 151 | ["#d0d3d4", "208, 211, 212", "192, 5%, 82%"], 152 | ["#b3b6b7", "179, 182, 183", "192, 3%, 71%"], 153 | ["#979a9a", "151, 154, 154", "192, 2%, 60%"], 154 | ["#7b7d7d", "123, 125, 125", "192, 1%, 49%"], 155 | ["#f8f9f9", "248, 249, 249", "204, 8%, 98%"], 156 | ["#f2f3f4", "242, 243, 244", "204, 8%, 95%"], 157 | ["#e5e7e9", "229, 231, 233", "204, 8%, 90%"], 158 | ["#d7dbdd", "215, 219, 221", "204, 8%, 86%"], 159 | ["#cacfd2", "202, 207, 210", "204, 8%, 81%"], 160 | ["#bdc3c7", "189, 195, 199", "204, 8%, 76%"], 161 | ["#a6acaf", "166, 172, 175", "204, 5%, 67%"], 162 | ["#909497", "144, 148, 151", "204, 4%, 58%"], 163 | ["#797d7f", "121, 125, 127", "204, 3%, 49%"], 164 | ["#626567", "98, 101, 103", "204, 3%, 40%"], 165 | ["#f4f6f6", "244, 246, 246", "184, 9%, 96%"], 166 | ["#eaeded", "234, 237, 237", "184, 9%, 92%"], 167 | ["#d5dbdb", "213, 219, 219", "184, 9%, 85%"], 168 | ["#bfc9ca", "191, 201, 202", "184, 9%, 77%"], 169 | ["#aab7b8", "170, 183, 184", "184, 9%, 69%"], 170 | ["#95a5a6", "149, 165, 166", "184, 9%, 62%"], 171 | ["#839192", "131, 145, 146", "184, 6%, 54%"], 172 | ["#717d7e", "113, 125, 126", "184, 5%, 47%"], 173 | ["#5f6a6a", "95, 106, 106", "184, 5%, 40%"], 174 | ["#4d5656", "77, 86, 86", "184, 5%, 32%"], 175 | ["#f2f4f4", "242, 244, 244", "184, 6%, 95%"], 176 | ["#e5e8e8", "229, 232, 232", "184, 6%, 91%"], 177 | ["#ccd1d1", "204, 209, 209", "184, 6%, 81%"], 178 | ["#b2babb", "178, 186, 187", "184, 6%, 72%"], 179 | ["#99a3a4", "153, 163, 164", "184, 6%, 62%"], 180 | ["#7f8c8d", "127, 140, 141", "184, 6%, 53%"], 181 | ["#707b7c", "112, 123, 124", "184, 5%, 46%"], 182 | ["#616a6b", "97, 106, 107", "184, 5%, 40%"], 183 | ["#515a5a", "81, 90, 90", "184, 5%, 34%"], 184 | ["#424949", "66, 73, 73", "184, 5%, 27%"], 185 | ["#ebedef", "235, 237, 239", "210, 12%, 93%"], 186 | ["#d6dbdf", "214, 219, 223", "210, 12%, 86%"], 187 | ["#aeb6bf", "174, 182, 191", "210, 12%, 71%"], 188 | ["#85929e", "133, 146, 158", "210, 12%, 57%"], 189 | ["#5d6d7e", "93, 109, 126", "210, 15%, 43%"], 190 | ["#34495e", "52, 73, 94", "210, 29%, 29%"], 191 | ["#2e4053", "46, 64, 83", "210, 29%, 25%"], 192 | ["#283747", "40, 55, 71", "210, 29%, 22%"], 193 | ["#212f3c", "33, 47, 60", "210, 29%, 18%"], 194 | ["#1b2631", "27, 38, 49", "210, 29%, 15%"], 195 | ["#eaecee", "234, 236, 238", "210, 9%, 92%"], 196 | ["#d5d8dc", "213, 216, 220", "210, 9%, 85%"], 197 | ["#abb2b9", "171, 178, 185", "210, 9%, 70%"], 198 | ["#808b96", "128, 139, 150", "210, 9%, 55%"], 199 | ["#566573", "86, 101, 115", "210, 14%, 39%"], 200 | ["#2c3e50", "44, 62, 80", "210, 29%, 24%"], 201 | ["#273746", "39, 55, 70", "210, 29%, 21%"], 202 | ["#212f3d", "33, 47, 61", "210, 29%, 18%"], 203 | ["#1c2833", "28, 40, 51", "210, 29%, 16%"], 204 | ["#17202a", "23, 32, 42", "210, 29%, 13%"], 205 | ["#000000", "0, 0, 0"], //white 206 | ["#ff0000", "255, 0, 0"], //red 207 | ["#00ff00", "0, 255, 0"], //green 208 | ["#ffff00", "255, 255, 0"], //yellow 209 | ["#0000ff", "0, 0, 255"], //blue 210 | ["#ff00ff", "255, 0, 255"], //magenta 211 | ["#00ffff", "0, 255, 255"], //cyan 212 | ["#ffffff", "255, 255, 255"], //black 213 | ["#aaaaaa", "160, 160, 160"], //grey 214 | ["#555555", "80, 80, 80"] //grey 215 | ]; -------------------------------------------------------------------------------- /generator.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: #333; 3 | } 4 | *, html, h1, strong, b { 5 | font-family: 'Roboto', sans-serif; 6 | font-weight: 300; 7 | } 8 | .container { 9 | margin-left: auto; 10 | margin-right: auto; 11 | } 12 | #npg-header { 13 | display: block; 14 | margin: 60px auto 40px; 15 | text-align: center; 16 | color: #aaa; 17 | font-size: 25px; 18 | line-height: 1; 19 | } 20 | #npg-header span { 21 | font-size: 12px; 22 | } 23 | .column_left { 24 | width: 70%; 25 | float: left; 26 | } 27 | .column_right { 28 | width: 30%; 29 | float: right; 30 | } 31 | #npg-container { 32 | display: block; 33 | max-width: 520px; 34 | margin-left: auto; 35 | margin-right: auto; 36 | box-sizing: border-box; 37 | -webkit-user-select: none; 38 | -moz-user-select: none; 39 | user-select: none; 40 | } 41 | .npg-row { 42 | margin: 0; 43 | width: 100%; 44 | display: table; 45 | clear: both; 46 | } 47 | .npg-pixel { 48 | display: table-cell; 49 | padding-top: 7%; 50 | cursor: pointer; 51 | background-color: #333; 52 | box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 1); 53 | box-sizing: border-box; 54 | transition: background-color 0.05s ease-in; 55 | } 56 | 57 | .npg-row:first-child .npg-pixel { 58 | box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 1), 59 | inset 0 1px 0 0 rgba(0, 0, 0, 1); 60 | } 61 | 62 | .npg-row .npg-pixel:first-child { 63 | box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 1), 64 | inset 1px 0 0 0 rgba(0, 0, 0, 1); 65 | } 66 | 67 | .npg-row:first-child .npg-pixel:first-child { 68 | box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 1), 69 | inset 1px 1px 0 0 rgba(0, 0, 0, 1); 70 | } 71 | 72 | /* ---------------------------------- COLOR PALLETE ---------------------------------- */ 73 | 74 | #npg-color-pallete { 75 | display: block; 76 | max-width: 200px; 77 | margin-left: auto; 78 | margin-right: auto; 79 | } 80 | 81 | .color-group { 82 | width: 100%; 83 | float: left; 84 | display: block; 85 | } 86 | 87 | .color-block { 88 | float: left; 89 | display: block; 90 | position: relative; 91 | width: 10%; 92 | padding-bottom: 17px; 93 | } 94 | .color-pixel { 95 | position: absolute; 96 | cursor: pointer; 97 | width: 100%; 98 | height: 100%; 99 | -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 100 | -moz-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 101 | -o-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 102 | transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 103 | } 104 | 105 | .color-pixel:hover { 106 | -webkit-transform: scale(2); 107 | -moz-transform: scale(2); 108 | -ms-transform: scale(2); 109 | -o-transform: scale(2); 110 | transform: scale(2); 111 | border-radius: 10px; 112 | z-index: 4; 113 | } 114 | 115 | .color-pixel.active { 116 | box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 1); 117 | } 118 | 119 | /* ---------------------------------- CTA ---------------------------------- */ 120 | 121 | .clear { 122 | clear: both; 123 | padding: 20px; 124 | } 125 | 126 | #generate-code { 127 | display: block; 128 | width: 200px; 129 | margin: 0 auto; 130 | padding: 10px; 131 | color: #fff; 132 | font-size: 12px; 133 | line-height: 1; 134 | text-align: center; 135 | border: 1px solid #fff; 136 | border-radius: 20px; 137 | text-decoration: none; 138 | text-transform: uppercase; 139 | background-color: #666; 140 | } 141 | 142 | /* ---------------------------------- OUTPUT ---------------------------------- */ 143 | 144 | #npg-output div { 145 | display: block; 146 | margin-left: auto; 147 | margin-right: auto; 148 | width: 90%; 149 | max-width: 500px; 150 | border: 1px solid #fff; 151 | padding: 20px; 152 | color: #eee; 153 | font-size: 11px; 154 | line-height: 1; 155 | } -------------------------------------------------------------------------------- /generator.js: -------------------------------------------------------------------------------- 1 | 2 | var matrixX = 13; //Matrix Width 3 | var matrixY = 10; //Matrix Height 4 | var npgContainer = jQuery("#npg-container"); 5 | var palleteContainer = jQuery("#npg-color-pallete"); 6 | var outputContainer = jQuery("#npg-output"); 7 | var lastColor = 207; 8 | var lastColorAttr = '255, 255, 255'; 9 | 10 | jQuery(document).ready(function ($) { 11 | 12 | npgPrepare(); 13 | document.oncontextmenu = function () { 14 | return false; 15 | }; 16 | 17 | $("body").on("mousedown", ".npg-pixel", function (e) { 18 | e.preventDefault(); 19 | var pixelId = $(this).attr('id'); 20 | 21 | switch (e.which) { 22 | case 1: 23 | leftMouseClick(pixelId); 24 | break; 25 | case 2: 26 | //middleMouseClick(pixelId); 27 | break; 28 | case 3: 29 | rightMouseClick(pixelId); 30 | break; 31 | default: 32 | alert('You have a strange Mouse!'); 33 | } 34 | }); 35 | 36 | $("body").on("mousedown", ".color-pixel", function (e) { 37 | e.preventDefault(); 38 | $(".color-pixel").removeClass("active"); 39 | $(this).addClass("active"); 40 | lastColorAttr = $(this).attr('data-rgb'); 41 | }); 42 | 43 | $("body").on("mousedown", "#generate-code", function (e) { 44 | e.preventDefault(); 45 | generateCode(); 46 | }); 47 | 48 | }); 49 | 50 | function npgPrepare() { 51 | 52 | jQuery(npgContainer).html(''); 53 | var xhtml = ''; 54 | 55 | for (ii = 0; ii < matrixY; ii++) { 56 | xhtml = '
'; 57 | for (iii = 0; iii < matrixX; iii++) { 58 | xhtml += '
'; 59 | } 60 | xhtml += '
'; 61 | jQuery(npgContainer).append(xhtml); 62 | } 63 | 64 | var colorCount = allColors.length; 65 | var colorColumns = colorCount / 10; 66 | var currentColor = 0; 67 | 68 | console.log(colorCount); 69 | console.log(colorColumns); 70 | console.log(currentColor); 71 | 72 | for (ii = 0; ii < colorColumns; ii++) { 73 | xhtml = '
'; 74 | for (iii = 0; iii < 10; iii++) { 75 | xhtml += '
'; 76 | xhtml += '
'; 77 | xhtml += '
'; 78 | currentColor++; 79 | } 80 | xhtml += '
'; 81 | jQuery(palleteContainer).append(xhtml); 82 | } 83 | 84 | jQuery("#cp__" + lastColor).addClass("active"); 85 | } 86 | 87 | function leftMouseClick(pixelId) { 88 | console.log(pixelId); 89 | jQuery('#' + pixelId).attr('data-rgb', lastColorAttr); 90 | jQuery('#' + pixelId).css('background-color', 'rgb(' + lastColorAttr + ')'); 91 | } 92 | 93 | function rightMouseClick(pixelId) { 94 | console.log(pixelId); 95 | jQuery('#' + pixelId).removeAttr('data-rgb'); 96 | jQuery('#' + pixelId).css('background-color', ''); 97 | } 98 | 99 | function generateCode() { 100 | 101 | var xhtml = ''; 102 | jQuery(outputContainer).html(''); 103 | var pixelId = ''; 104 | var pixelColor = ''; 105 | var allPixels = []; 106 | ii = 0; 107 | 108 | xhtml += '
'; 109 | xhtml += 'matrix.fillScreen(0);
'; 110 | 111 | jQuery('.npg-pixel').each(function () { 112 | pixelId = jQuery(this).attr('id'); 113 | pixelColor = jQuery(this).attr('data-rgb'); 114 | 115 | if (pixelColor != null) { 116 | pixelId = pixelId.split('__'); 117 | allPixels[ii] = [pixelId[1], pixelId[2], pixelColor]; 118 | ii++; 119 | } 120 | 121 | }); 122 | 123 | //matrix.drawPixel(x, y, Adafruit_NeoMatrix::Color) 124 | //matrix.drawPixel(0, 0, matrix.Color(color.r, color.g, color.b)); 125 | 126 | for (iii = 0; iii < allPixels.length; iii++) { 127 | xhtml += 'matrix.drawPixel(' + allPixels[iii][1] + ', ' + allPixels[iii][0] + ', matrix.Color(' + allPixels[iii][2] + '));'; 128 | xhtml += '
'; 129 | } 130 | xhtml += 'matrix.show();'; 131 | xhtml += '
'; 132 | 133 | jQuery(outputContainer).html(xhtml); 134 | 135 | } 136 | 137 | //EOF -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | NeoMatrix Generator 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
NeoMatrix Generator (v.0.1)
14 | Choose a Paint Color. Use Second mouse button for delete/erase. 15 |
16 |
17 | 18 |
19 |
20 |
21 |
Generate Code
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /nbproject/project.properties: -------------------------------------------------------------------------------- 1 | include.path=${php.global.include.path} 2 | php.version=PHP_56 3 | source.encoding=UTF-8 4 | src.dir=. 5 | tags.asp=false 6 | tags.short=false 7 | web.root=. 8 | -------------------------------------------------------------------------------- /nbproject/project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | org.netbeans.modules.php.project 4 | 5 | 6 | NeoMatrix-Generator 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cesnokov/NeoMatrix-Generator/83145ee33f4bdb3ed5faee1aeb7ec24138affc18/screenshot.jpg --------------------------------------------------------------------------------