├── web_src ├── resources │ ├── .gitignore │ ├── wheel.png │ ├── colorwheel.mode.js │ ├── colorwheel.gradient.js │ ├── bower.json │ ├── README.md │ ├── LICENSE │ ├── index.css │ ├── colorwheel.theme.js │ ├── wheel.css │ ├── wheel.scss │ ├── fa-multi-button.js │ ├── bootstrap-slider.css │ ├── font-awesome-animation.min.css │ ├── colorwheel.js │ └── jquery.min.js ├── logo.png ├── view.PNG ├── wiring.png ├── favicon.ico ├── success.htm └── index.htm ├── data ├── favicon.ico ├── success.htm └── index.htm ├── src ├── view.h ├── model_factory.h ├── smd_model.h ├── definitions.h ├── uploadOTA.h ├── controller.h ├── ws28_model.h ├── alexa.h ├── model.h └── webServer.h ├── LICENSE ├── WiLED.ino └── README.md /web_src/resources/.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | bower_components 3 | -------------------------------------------------------------------------------- /data/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reger-men/WiLED/HEAD/data/favicon.ico -------------------------------------------------------------------------------- /web_src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reger-men/WiLED/HEAD/web_src/logo.png -------------------------------------------------------------------------------- /web_src/view.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reger-men/WiLED/HEAD/web_src/view.PNG -------------------------------------------------------------------------------- /web_src/wiring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reger-men/WiLED/HEAD/web_src/wiring.png -------------------------------------------------------------------------------- /web_src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reger-men/WiLED/HEAD/web_src/favicon.ico -------------------------------------------------------------------------------- /web_src/resources/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reger-men/WiLED/HEAD/web_src/resources/wheel.png -------------------------------------------------------------------------------- /data/success.htm: -------------------------------------------------------------------------------- 1 |
2 |

File uploaded successfully!

3 |
-------------------------------------------------------------------------------- /web_src/success.htm: -------------------------------------------------------------------------------- 1 |
2 |

File uploaded successfully!

3 |
-------------------------------------------------------------------------------- /src/view.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | class View { 4 | public: 5 | 6 | View() {} // default constructor 7 | void index() 8 | { 9 | //server.send(200, "text/html", "HELLO FROM INDEX!"); 10 | } 11 | 12 | private: 13 | 14 | }; 15 | -------------------------------------------------------------------------------- /src/model_factory.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include 3 | #include 4 | #include "smd_model.h" 5 | #include "ws28_model.h" 6 | 7 | // Model factory to create the concrete model by type 8 | class Model_Factory { 9 | public: 10 | static Model* create(Strip_Type type) 11 | { 12 | switch (type) { 13 | case ESMD_STRIP: 14 | return new SMD_Model; 15 | case EWS28_STRIP: 16 | return new WS28_Model; 17 | default: // Compilation error 18 | printf("Init Model error. Model type is not defined.\n"); 19 | return NULL; 20 | } 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /web_src/resources/colorwheel.mode.js: -------------------------------------------------------------------------------- 1 | // Add mode toggle UI 2 | ColorWheel.extend('modeToggle', function (colorWheel) { 3 | var modeToggle = colorWheel.container.append('select') 4 | .attr('class', colorWheel.cx('mode-toggle')) 5 | .on('change', function () { 6 | colorWheel.currentMode = this.value; 7 | colorWheel.setHarmony(); 8 | }); 9 | 10 | for (var mode in ColorWheel.modes) { 11 | modeToggle.append('option').text(ColorWheel.modes[mode]) 12 | .attr('selected', function () { 13 | return ColorWheel.modes[mode] == colorWheel.currentMode ? 'selected' : null; 14 | }); 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /web_src/resources/colorwheel.gradient.js: -------------------------------------------------------------------------------- 1 | // Background gradient 2 | ColorWheel.extend('bgGradient', function (colorWheel) { 3 | var gradient = d3.select(colorWheel.selector('gradient')); 4 | if (! gradient.size()) { 5 | gradient = colorWheel.container.append('div').attr({ 6 | 'id': 'gradient', 7 | 'class': colorWheel.cx('gradient') 8 | }); 9 | } 10 | colorWheel.dispatch.on('updateEnd.gradient', function () { 11 | var gradientStops = colorWheel.getColorsAsHEX(); 12 | gradientStops[0] += ' 10%'; 13 | gradientStops[gradientStops.length - 1] += ' 90%'; 14 | gradient.style('background-image', 'linear-gradient(to right, ' + gradientStops.join() + ')'); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /web_src/resources/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kuler-d3", 3 | "version": "0.0.1", 4 | "homepage": "https://github.com/benknight/kuler-d3", 5 | "authors": [ 6 | "Benjamin Knight " 7 | ], 8 | "description": "Reconstruction of the color wheel UI found on http://kuler.adobe.com, built with D3.", 9 | "main": "colorwheel.js", 10 | "moduleType": [ 11 | "amd", 12 | "globals" 13 | ], 14 | "keywords": [ 15 | "d3", 16 | "color" 17 | ], 18 | "license": "MIT", 19 | "private": true, 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests" 26 | ], 27 | "dependencies": { 28 | "tinycolor": "~1.1.2", 29 | "d3": "~3.5.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /web_src/resources/README.md: -------------------------------------------------------------------------------- 1 |

Color Wheel with D3

2 | 3 | > Reconstruction of the color wheel UI found on http://color.adobe.com (formerly known as Kuler) using [D3.js](https://github.com/mbostock/d3). 4 | 5 | ## Demo 6 | 7 | http://benknight.github.io/kuler-d3/ 8 | 9 | ## Usage 10 | 11 | By specifying a number of colors: 12 | 13 | ```javascript 14 | var colorWheel = new ColorWheel('.colorwheel'); 15 | colorWheel.bindData(5); 16 | ``` 17 | 18 | or, with preexisting color values: 19 | 20 | ```javascript 21 | // Use any valid tinycolor input 22 | // More: github.com/bgrins/TinyColor 23 | var data = [ 24 | 'red', 25 | '#0ff', 26 | {r: 0, g: 255, b: 0}, 27 | {h: 220, s: 1, v: 1}, 28 | {h: 300, s: 1, l: 0.5}, 29 | 'hsl(0, 100%, 50%)' 30 | ]; 31 | 32 | var colorWheel = new ColorWheel('.colorwheel'); 33 | colorWheel.bindData(data); 34 | ``` 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 reger men 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /web_src/resources/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Benjamin Knight 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/smd_model.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include 3 | #include 4 | 5 | // Only the Model has the access to the LED strip 6 | class SMD_Model : public Model { 7 | public: 8 | SMD_Model() 9 | { 10 | printf("SMD: Initialize the pins as an output...\n"); 11 | this->stripModel = ESMD_STRIP; 12 | 13 | pinMode(kRedPin, OUTPUT); 14 | pinMode(kGreenPin, OUTPUT); 15 | pinMode(kBluePin, OUTPUT); 16 | 17 | // update delay 18 | this->updateSpeed(this->delay_); 19 | // Initialize the pins values 20 | this->off(); 21 | } 22 | 23 | void setRGB(RGB rgb) 24 | { 25 | analogWrite(kRedPin, rgb.r); 26 | analogWrite(kGreenPin, rgb.g); 27 | analogWrite(kBluePin, rgb.b); 28 | 29 | this->prev_color_ = rgb; 30 | //printf("Set RGB: %i, %i, %i\n", rgb.r, rgb.g, rgb.b); 31 | } 32 | 33 | void on() 34 | { 35 | digitalWrite(kRedPin, 1); 36 | digitalWrite(kGreenPin, 1); 37 | digitalWrite(kBluePin, 1); 38 | } 39 | 40 | void off() 41 | { 42 | digitalWrite(kRedPin, 0); 43 | digitalWrite(kGreenPin, 0); 44 | digitalWrite(kBluePin, 0); 45 | } 46 | 47 | private: 48 | static const uint8_t kRedPin = 12; // Used for SMD strip as output 49 | static const uint8_t kGreenPin = 13; // ... 50 | static const uint8_t kBluePin = 14; // ... 51 | }; 52 | -------------------------------------------------------------------------------- /src/definitions.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include 3 | 4 | enum Strip_Type { ESMD_STRIP, EWS28_STRIP };// Use E* prefix for enum 5 | Strip_Type strip_type = EWS28_STRIP; 6 | 7 | #define SMD_STRIP 0 // 5050 SMD RGB DC 12V. Set to 1 if you use SMD strip. 8 | #define WS28_STRIP 1 // WS2811/WS2812/WS2812b RGB DC 5V 9 | #define USE_ALEXA 1 // Set to 1 if you want to use smart home 10 | #define ESPALEXA_MAXDEVICES 15 11 | #define BUILTIN_LED 2 // Build-in LED PIN on ESP8266 12 | 13 | enum StateMode { OFF, ON, STATIC, DYNAMIC, BLINK, SET_MODE }; 14 | StateMode s_mode = OFF; 15 | 16 | enum SwitchMode { FLASH, FADE }; 17 | SwitchMode sw_mode = FADE; 18 | 19 | enum TransitionPhase { SETCOLOR, TRANSITION }; 20 | TransitionPhase tr_phase = SETCOLOR; 21 | 22 | struct rgb 23 | { 24 | uint8_t r; 25 | uint8_t g; 26 | uint8_t b; 27 | }; 28 | typedef struct rgb RGB; 29 | 30 | RGB BLUE = {0, 0, 255}; 31 | RGB PURPLE = {185, 0, 255}; 32 | RGB RED = {255, 0, 0}; 33 | RGB ORANGE = {255, 112, 0}; 34 | RGB GOLD = {255, 200, 0}; 35 | 36 | 37 | //////////////////////////////////////////////////////////////INCLUDE//////////////////////////////////////////////////////////////////////////////// 38 | #include 39 | Espalexa espalexa; 40 | 41 | #include "model.h" 42 | #include "model_factory.h" 43 | #include "controller.h" 44 | #include "webServer.h" 45 | #include "uploadOTA.h" 46 | 47 | 48 | //////////////////////////////////////////////////////////Globale Section///////////////////////////////////////////////////////////////////////// 49 | Controller controller; 50 | WebServer *wserver; 51 | /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 52 | 53 | #include "alexa.h" 54 | -------------------------------------------------------------------------------- /WiLED.ino: -------------------------------------------------------------------------------- 1 | /* 2 | ESP8266 LED 3 | */ 4 | #include "src/definitions.h" 5 | 6 | void setup() { 7 | ////////////////////////////////////////////////////////// OTA and Server//////////////////////////////////////////////////////////////////////// 8 | Serial.begin(115200); 9 | Serial.println("Booting..."); 10 | UploadOTA uploadOTA; 11 | 12 | ////////////////////////////////////////////////////////// MVC & Factory //////////////////////////////////////////////////////////////////////// 13 | Model_Factory model_factory; 14 | Model *model = model_factory.create(strip_type); 15 | 16 | controller = Controller(model); 17 | wserver = new WebServer(controller); 18 | ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 19 | 20 | Serial.println("LED initialization..."); 21 | pinMode(BUILTIN_LED, OUTPUT); 22 | digitalWrite(LED_BUILTIN, HIGH); 23 | 24 | ////////////////////////////////////////////////////////// ALEXA //////////////////////////////////////////////////////////////////////////////// 25 | #ifdef USE_ALEXA 26 | // Add your alexa virtual devices giving them a name and associated callback 27 | adddevices(); 28 | espalexa.begin(&wserver->server); // Give alexa a pointer to server object so it can use server instead of creating its own 29 | #endif 30 | ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 31 | 32 | printf(".............\n"); 33 | } 34 | 35 | 36 | // The loop function runs over and over again forever 37 | void loop() { 38 | 39 | #ifdef USE_ALEXA 40 | espalexa.loop(); // Start server 41 | #else 42 | wserver->serverListener(); // Omit this if USE_ALEXA 1 43 | #endif 44 | 45 | wserver->webSocketListener(); // Constantly check for websocket events 46 | ArduinoOTA.handle(); // Listen for OTA events 47 | 48 | if (strip_type == EWS28_STRIP) { // Continually run the animation service for WS28xx strip 49 | controller.runModelService(); 50 | } 51 | 52 | controller.run(); 53 | } 54 | -------------------------------------------------------------------------------- /src/uploadOTA.h: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////////////////OTA///////////////////////////////////////////////////////////////////////// 2 | #include 3 | #include 4 | #include 5 | #include 6 | #include 7 | #include 8 | 9 | class UploadOTA { 10 | public: 11 | 12 | UploadOTA() 13 | { 14 | WiFiManager wifiManager; 15 | if (!wifiManager.autoConnect(HOST_, PASSWORD_)) { 16 | Serial.println("failed to connect and hit timeout"); 17 | delay(3000); 18 | //reset and try again, or maybe put it to deep sleep 19 | ESP.reset(); 20 | delay(5000); 21 | } 22 | 23 | /*WiFi.begin(this->SSID_, this->PASSWORD_); 24 | WiFi.config(ip_, sn_, gw_); 25 | 26 | WiFi.mode(WIFI_STA); 27 | while (WiFi.waitForConnectResult() != WL_CONNECTED) { 28 | Serial.println("Connection Failed! Rebooting..."); 29 | delay(5000); 30 | ESP.restart(); 31 | }*/ 32 | 33 | ArduinoOTA.onStart([]() { 34 | String type; 35 | if (ArduinoOTA.getCommand() == U_FLASH) { 36 | type = "sketch"; 37 | } else { // U_SPIFFS 38 | type = "filesystem"; 39 | } 40 | 41 | // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end() 42 | Serial.println("Start updating " + type); 43 | }); 44 | 45 | ArduinoOTA.onEnd([]() { 46 | Serial.println("\nEnd"); 47 | }); 48 | ArduinoOTA.onProgress([](unsigned int progress, unsigned int total) { 49 | Serial.printf("Progress: %u%%\r", (progress / (total / 100))); 50 | }); 51 | ArduinoOTA.onError([](ota_error_t error) { 52 | Serial.printf("Error[%u]: ", error); 53 | if (error == OTA_AUTH_ERROR) { 54 | Serial.println("Auth Failed"); 55 | } else if (error == OTA_BEGIN_ERROR) { 56 | Serial.println("Begin Failed"); 57 | } else if (error == OTA_CONNECT_ERROR) { 58 | Serial.println("Connect Failed"); 59 | } else if (error == OTA_RECEIVE_ERROR) { 60 | Serial.println("Receive Failed"); 61 | } else if (error == OTA_END_ERROR) { 62 | Serial.println("End Failed"); 63 | } 64 | }); 65 | ArduinoOTA.begin(); 66 | Serial.println("Ready"); 67 | Serial.print("IP address: "); 68 | Serial.println(WiFi.localIP()); 69 | } 70 | 71 | protected: 72 | IPAddress ip_ = IPAddress(192,168,2,222); 73 | IPAddress gw_ = IPAddress(192,168,2,254); 74 | IPAddress sn_ = IPAddress(255,255,255,0); 75 | 76 | const char* HOST_ = "WiLED"; 77 | const char* SSID_ = "SSID"; 78 | const char* PASSWORD_ = "PASSWORD"; 79 | 80 | private: 81 | 82 | }; 83 | -------------------------------------------------------------------------------- /web_src/resources/index.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Globals 3 | */ 4 | .slider.slider-horizontal { 5 | width: 80% !important; 6 | opacity: 0.7; 7 | margin: 0 0 15px; 8 | z-index: 99; 9 | } 10 | .slider.slider-horizontal .slider-track { 11 | height: 2px !important; 12 | } 13 | 14 | .tooltip.in { 15 | filter: alpha(opacity=90); 16 | opacity: .9 17 | } 18 | 19 | #ex1Slider .slider-selection { 20 | background: #2CF20E; 21 | } 22 | .slider-handle { 23 | top: -3px !important; 24 | background-color: #000000 !important; 25 | background-image: linear-gradient(to bottom, #000000 0%, #2CF20E 100%) !important; 26 | border: 2px solid #FFFFFF !important; 27 | } 28 | 29 | .colorwheel-mode-toggle.select-mode { 30 | margin-bottom: 10px; 31 | } 32 | 33 | /* Links */ 34 | a, 35 | a:focus, 36 | a:hover { 37 | color: #fff; 38 | } 39 | 40 | /* Custom default button */ 41 | .btn-secondary, 42 | .btn-secondary:hover, 43 | .btn-secondary:focus { 44 | color: #333; 45 | text-shadow: none; /* Prevent inheritance from `body` */ 46 | background-color: #fff; 47 | border: .05rem solid #fff; 48 | } 49 | 50 | 51 | /* 52 | * Base structure 53 | */ 54 | 55 | html, 56 | body { 57 | background-color: #333; 58 | } 59 | 60 | body { 61 | display: -ms-flexbox; 62 | display: -webkit-box; 63 | display: flex; 64 | -ms-flex-pack: center; 65 | -webkit-box-pack: center; 66 | justify-content: center; 67 | color: #fff; 68 | text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); 69 | box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); 70 | } 71 | 72 | .cover-container { 73 | max-width: 42em; 74 | } 75 | 76 | 77 | /* 78 | * Header 79 | */ 80 | .masthead { 81 | margin-bottom: 2rem; 82 | } 83 | 84 | .masthead-brand { 85 | margin-bottom: 0; 86 | } 87 | 88 | .nav-masthead .nav-link { 89 | padding: .25rem 0; 90 | font-weight: 700; 91 | color: rgba(255, 255, 255, .5); 92 | background-color: transparent; 93 | border-bottom: .25rem solid transparent; 94 | } 95 | 96 | .nav-masthead .nav-link:hover, 97 | .nav-masthead .nav-link:focus { 98 | border-bottom-color: rgba(255, 255, 255, .25); 99 | } 100 | 101 | .nav-masthead .nav-link + .nav-link { 102 | margin-left: 1rem; 103 | } 104 | 105 | .nav-masthead .active { 106 | color: #fff; 107 | border-bottom-color: #fff; 108 | } 109 | 110 | @media (min-width: 48em) { 111 | .masthead-brand { 112 | float: left; 113 | } 114 | .nav-masthead { 115 | float: right; 116 | } 117 | } 118 | 119 | 120 | /* 121 | * Cover 122 | */ 123 | .cover-container.d-flex.h-100.p-3.mx-auto.flex-column { 124 | padding-top: 1rem !important; 125 | padding-right: 0rem !important; 126 | padding-bottom: 1rem !important; 127 | padding-left: 0rem !important; 128 | } 129 | .cover .btn-lg { 130 | padding: .75rem 1.25rem; 131 | font-weight: 700; 132 | } 133 | 134 | 135 | /* 136 | * Footer 137 | */ 138 | .mastfoot { 139 | color: rgba(255, 255, 255, .5); 140 | } 141 | -------------------------------------------------------------------------------- /web_src/resources/colorwheel.theme.js: -------------------------------------------------------------------------------- 1 | // Add theme UI 2 | ColorWheel.extend('theme', function (colorWheel) { 3 | var theme = colorWheel.container.append('div').attr('class', colorWheel.cx('theme')); 4 | 5 | colorWheel.dispatch.on('bindData.themeBuild', function (data) { 6 | var swatches = theme.selectAll(colorWheel.selector('theme-swatch')).data(data); 7 | var newSwatches = swatches.enter().append('div').attr('class', colorWheel.cx('theme-swatch')); 8 | 9 | // Add color 10 | newSwatches.append('div').attr('class', colorWheel.cx('theme-color')); 11 | 12 | // Add sliders 13 | newSwatches.append('input') 14 | .attr('type', 'range') 15 | .attr('class', colorWheel.cx('theme-slider')) 16 | .on('input', function (d) { 17 | d.color.v = parseInt(this.value) / 100; 18 | colorWheel.dispatch.markersUpdated(); 19 | }) 20 | .on('mouseup', function () { 21 | colorWheel.dispatch.updateEnd(); 22 | }) 23 | .on('touchend', function () { 24 | colorWheel.dispatch.updateEnd(); 25 | }); 26 | 27 | // Add color codes 28 | newSwatches.append('input') 29 | .attr('type', 'text') 30 | .attr('class', colorWheel.cx('theme-value')) 31 | .attr('readonly', true) 32 | .on('focus', function () { 33 | // Like jQuery's .one(), attach a listener that only executes once. 34 | // This way the user can use the cursor normally after the initial selection. 35 | d3.select(this).on('mouseup', function () { 36 | d3.event.preventDefault(); 37 | // Detach the listener 38 | d3.select(this).on('mouseup', null); 39 | }) 40 | this.select(); 41 | }); 42 | 43 | swatches.exit().remove(); 44 | }); 45 | 46 | colorWheel.dispatch.on('markersUpdated.theme', function () { 47 | colorWheel.container.selectAll(colorWheel.selector('theme-swatch')).each(function (d, i) { 48 | switch (colorWheel.currentMode) { 49 | case ColorWheel.modes.TRIAD: 50 | this.style.order = this.style.webkitOrder = i % 3; 51 | break; 52 | default: 53 | var order = ColorWheel.markerDistance(i); 54 | this.style.order = this.style.webkitOrder = order; 55 | d.id = ColorWheel.markerID(order, 5); // Update the id value 56 | break; 57 | } 58 | }); 59 | 60 | colorWheel.container.selectAll(colorWheel.selector('theme-color')).each(function (d) { 61 | var c = tinycolor({h: d.color.h, s: d.color.s, v: d.color.v}); 62 | this.style.backgroundColor = c.toHexString(); 63 | }); 64 | 65 | colorWheel.container.selectAll(colorWheel.selector('theme-slider')).each(function (d) { 66 | var val = parseInt(d.color.v * 100); 67 | this.value = val; 68 | d3.select(this).attr('value', val); 69 | }); 70 | 71 | colorWheel.container.selectAll(colorWheel.selector('theme-value')).each(function (d) { 72 | var c = tinycolor({h: d.color.h, s: d.color.s, v: d.color.v}); 73 | this.value = c.toHexString(); 74 | }); 75 | }); 76 | }); 77 | -------------------------------------------------------------------------------- /src/controller.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "model.h" 3 | #include 4 | 5 | // Controller combines Model and View 6 | class Controller { 7 | public: 8 | // default constructor 9 | Controller() 10 | { 11 | printf("Init Controller with default constructor.\n"); 12 | } 13 | 14 | Controller(Model *m) : model(m) {} 15 | 16 | void runModelService() 17 | { 18 | this->model->runService(); 19 | } 20 | 21 | void setRGB(RGB rgb) 22 | { 23 | this->model->setRGB(rgb); 24 | } 25 | 26 | void setSpeed(int sec) 27 | { 28 | this->model->updateSpeed(sec); 29 | } 30 | 31 | void setBrightness(uint8_t brt) 32 | { 33 | this->model->setBrightness(brt); 34 | } 35 | 36 | void insertRGB(RGB rgb) 37 | { 38 | this->model->pushInQueue(rgb); 39 | } 40 | 41 | void insertRGBArray(uint8_t rgbs[], uint8_t len) 42 | { 43 | for (int i = 0; i < (len / 3); i++) { 44 | pin_color.r = rgbs[(i * 3) + 0]; 45 | pin_color.g = rgbs[(i * 3) + 1]; 46 | pin_color.b = rgbs[(i * 3) + 2]; 47 | 48 | //printf("r: %d , g: %d, b: %d\n", rgbs[(i * 3) + 0], rgbs[(i * 3) + 1], rgbs[(i * 3) + 2]); 49 | this->insertRGB(pin_color); 50 | } 51 | } 52 | 53 | void updateStateMode(StateMode sm) 54 | { 55 | s_mode = sm; 56 | } 57 | 58 | void updateSwitchMode(SwitchMode swm) 59 | { 60 | sw_mode = swm; 61 | } 62 | 63 | void updateColors(uint8_t rgbs[], uint8_t len) 64 | { 65 | this->clearQueue(); 66 | this->insertRGBArray(rgbs, len); 67 | this->model->updateSpeed(); 68 | this->model->setNextRGB(); // Set the next color from the queue 69 | } 70 | 71 | void updateMode(int m) 72 | { 73 | if (m >= 0) { 74 | this->updateStateMode(SET_MODE); 75 | this->model->updateMode(m); 76 | } else { 77 | this->updateStateMode(DYNAMIC); 78 | this->model->updateMode(FX_MODE_STATIC); // Set mode back to static 79 | if (m == -2) { // Fade 80 | this->updateSwitchMode(FADE); 81 | } else if (m == -1) { // Flash 82 | this->updateSwitchMode(FLASH); 83 | } 84 | } 85 | this->model->updateSpeed(); 86 | } 87 | 88 | void run() 89 | { 90 | this->model->applyQueue(s_mode, sw_mode); 91 | } 92 | 93 | void on() 94 | { 95 | //printf(".....................................On....................................:\n"); 96 | this->updateStateMode(ON); 97 | this->model->on(); 98 | } 99 | 100 | void off() 101 | { 102 | //printf(".....................................OFF....................................:\n"); 103 | this->updateStateMode(OFF); 104 | this->model->off(); 105 | } 106 | 107 | void clearQueue() 108 | { 109 | this->model->clearQueue(); 110 | } 111 | protected: 112 | Model *model; 113 | private: 114 | RGB pin_color = { 0, 0, 0 }; 115 | }; 116 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ![WiLED Logo](https://raw.githubusercontent.com/reger-men/WiLED/master/web_src/logo.png) 2 | WiLED is an Open Source project to control various types of LED strips with ESP8266. 5050 SMD and WS28xx LED strips are supported. 3 | 4 | ## How to install ## 5 | **IMPORTANT:** Download the latest release version (ZIP file) from [HERE](https://github.com/reger-men/WiLED/releases) and upload the binary file or compile the source code. 6 | 7 | [![WiLED on youtube](https://raw.githubusercontent.com/reger-men/WiLED/master/web_src/view.PNG)](https://www.youtube.com/watch?v=cLCZFH-E9To) 8 | 9 | Click on the image above to watch the video. 10 | 11 | ## Building from Source ## 12 | * Install Arduino IDE 13 | * Install driver for ESP8266 [https://github.com/esp8266/Arduino](https://github.com/esp8266/Arduino) 14 | * Install plugin for ESP8266 Sketch Data Upload [https://github.com/esp8266/arduino-esp8266fs-plugin](https://github.com/esp8266/arduino-esp8266fs-plugin) 15 | * Install [Adafruit_NeoPixel](https://github.com/adafruit/Adafruit_NeoPixel), [Espalexa](https://github.com/Aircoookie/Espalexa), [WebSockets](https://github.com/Links2004/arduinoWebSockets), [WifiManager](https://github.com/tzapu/WiFiManager) and [WS2812FX](https://github.com/kitesurfer1404/WS2812FX) Libraries 16 | 17 | ## Upload the pre-compiled binary ## 18 | Download the latest release version [**WiLED.ino.nodemcu.bin**](https://github.com/reger-men/WiLED/releases) and use [ESPTool](https://github.com/espressif/esptool) or [ESPFlashDownloadTool](https://www.espressif.com/en/support/download/other-tools) to upload the binary to ESP8266. 19 | 20 | 21 | ## Features ## 22 | User ... 23 | * ... doesn't need to install any app to controlle the LED strip 24 | * ... can controlle the LED strip via Webinterface or via Alexa 25 | * ... Alexa can detect this skill as multiple devices, you may include the number of devices by increase this line ```#define ESPALEXA_MAXDEVICES 15``` in ```definitions.h``` 26 | * ... to invoke custom Skills, use: 27 | * ``` Alexa turn light on``` 28 | * ``` Alexa turn light 1 on``` 29 | * ``` Alexa turn light off``` 30 | * ... can upload new file from within a Web browser without having to connect to the ESP8266 over USB 31 | * ``` http://esp8266.local/update``` 32 | * ... may load the firmware to ESP module using Wi-Fi connection **OTA (Over the Air)** 33 | 34 | 35 | ## Adaption ## 36 | To controle SMD or WS28xx LED strips you need to set ``` #define SMD_STRIP 1 ``` or ``` #define WS28_STRIP 1 ``` in ```definitions.h``` 37 | Make sure that you set only one to ``` 1``` and the other one to ``` 0``` 38 | 39 | If you don't want to use Alexa set ``` #define USE_ALEXA 0 ``` 40 | 41 | ## Wiring ## 42 | ![Wiring](https://raw.githubusercontent.com/reger-men/WiLED/master/web_src/wiring.png) 43 | 44 | ## Things you need (Shopping Cart) ## 45 | [ESP82666](https://www.amazon.com/AZDelivery-Nodemcu-Module-ESP8266-Development/dp/B07F8759RC/ref=sr_1_2?keywords=esp8266&qid=1549978307&s=gateway&sr=8-2) 46 | 47 | [5050 SMD](https://www.amazon.com/SUPERNIGHT-Changing-Non-waterproof-Flexible-Decoration/dp/B00E0EVHYA/ref=sr_1_3_sspa?keywords=rgb+led+strip&qid=1549978486&s=gateway&sr=8-3-spons&psc=1&smid=AXEJGN8WLZD9M) or [WS28xx](https://www.amazon.com/BTF-LIGHTING-Flexible-Individually-Addressable-Non-waterproof/dp/B01CDTEJBG/ref=sr_1_1_sspa?keywords=ws2812b&qid=1549978517&s=gateway&sr=8-1-spons&psc=1) 48 | 49 | (Optional) [Alexa echo or any other version](https://www.amazon.de/dp/B01DFKBG5E/ref=asc_df_B01DFKBG5E58466726/?tag=googshopde-21&creative=22398&creativeASIN=B01DFKBG5E&linkCode=df0&hvadid=204288091658&hvpos=1o3&hvnetw=g&hvrand=8361400114568144756&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9044401&hvtargid=pla-329799024896&th=1&psc=1) 50 | -------------------------------------------------------------------------------- /web_src/resources/wheel.css: -------------------------------------------------------------------------------- 1 | /*! Kuler D3 by Benjamin Knight */ 2 | /** Base & Generic */ 3 | html { 4 | min-height: 100%; 5 | overflow-x: hidden;} 6 | 7 | body { 8 | background: black; 9 | margin: 0 auto; 10 | overflow-x: hidden;} 11 | 12 | /** Components */ 13 | .colorwheel { 14 | position: relative; 15 | z-index: 1; 16 | display: block; 17 | width: 320px; 18 | height: 320px; 19 | margin: 0px auto 0px;} 20 | 21 | 22 | .colorwheel-marker:first-child circle { 23 | stroke-opacity: 1; 24 | stroke-width: 5px; } 25 | 26 | .colorwheel-marker text { 27 | text-shadow: 1px 1px 1px black, 0 0 3px rgba(0, 0, 0, 0.25); } 28 | [data-mode=Shades] .colorwheel-marker text { 29 | display: none; } 30 | 31 | .colorwheel-theme { 32 | display: flex; 33 | text-align: center; 34 | max-width: 450px; 35 | min-width: 320px; 36 | margin: 10px auto 0; } 37 | 38 | .colorwheel-theme-swatch { 39 | flex: 1; 40 | padding: 0 0.6% 20px; } 41 | .colorwheel-theme-swatch input { 42 | opacity: 0.3; } 43 | .colorwheel-theme-swatch:hover input { 44 | opacity: 0.75; } 45 | 46 | .colorwheel-theme-color { 47 | position: relative; 48 | border-radius: 50%; 49 | padding-top: 100%; 50 | box-shadow: 2px 2px 0 black; } 51 | 52 | .colorwheel-theme-slider { 53 | position: relative; 54 | display: block; 55 | width: 100%; 56 | margin: 0 0 15px; 57 | -webkit-appearance: none; 58 | outline: none; 59 | background: transparent; } 60 | .colorwheel-theme-slider:before { 61 | content: attr(value) "%"; 62 | display: block; 63 | position: absolute; 64 | z-index: -1; 65 | top: 30px; 66 | width: 100%; 67 | font-size: 10px; 68 | text-align: center; 69 | color: white; 70 | text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5); } 71 | 72 | .colorwheel-theme-value { 73 | outline: none; 74 | width: 100%; 75 | border: none; 76 | font-family: Monaco, monospace; 77 | text-align: center; 78 | background: transparent; 79 | color: white; } 80 | 81 | .colorwheel-mode-toggle { 82 | position: relative; 83 | z-index: 2; 84 | height: 1.7em; 85 | border: none; 86 | background: #000; 87 | color: rgba(255, 255, 255, 0.75); 88 | font-size: 20px; 89 | border: 1px solid #e1e1e1; 90 | border-radius: 4px; 91 | width: 50%;} 92 | 93 | .colorwheel-mode-toggle:hover { 94 | color: rgba(255, 255, 255, 0.9); } 95 | 96 | .colorwheel-gradient { 97 | z-index: -1; 98 | opacity: 0.5; 99 | -webkit-filter: url(#blur); 100 | filter: url(#blur); 101 | display: block; 102 | position: fixed; 103 | top: 0; 104 | left: 0; 105 | width: 100%; 106 | height: 100%; 107 | transform: translateZ(0); } 108 | 109 | /** Trumps */ 110 | ::-webkit-slider-runnable-track { 111 | -webkit-appearance: none; 112 | height: 2px; 113 | border: none; 114 | margin: 1em 0; 115 | background: #fff; 116 | color: #fff; } 117 | 118 | ::-moz-range-track { 119 | height: 2px; 120 | border: none; 121 | margin: 1em 0; 122 | background: #fff; 123 | color: #fff; } 124 | 125 | ::-ms-track { 126 | height: 2px; 127 | border: none; 128 | margin: 1em 0; 129 | background: #fff; 130 | color: #fff; } 131 | 132 | ::-ms-fill-lower, 133 | ::-ms-fill-upper, 134 | ::-ms-ticks-before, 135 | ::-ms-ticks-after, 136 | ::-ms-tooltip { 137 | display: none; } 138 | 139 | ::-webkit-slider-thumb { 140 | -webkit-appearance: none; 141 | margin-top: -7px; 142 | background: black; 143 | border: 2px solid #fff; 144 | height: 15px; 145 | width: 15px; 146 | border-radius: 99px; 147 | cursor: ew-resize; } 148 | 149 | ::-moz-range-thumb { 150 | background: black; 151 | border: 2px solid #fff; 152 | height: 15px; 153 | width: 15px; 154 | border-radius: 99px; 155 | cursor: ew-resize; } 156 | 157 | ::-ms-thumb { 158 | background: black; 159 | border: 2px solid #fff; 160 | height: 15px; 161 | width: 15px; 162 | border-radius: 99px; 163 | cursor: ew-resize; } 164 | -------------------------------------------------------------------------------- /web_src/resources/wheel.scss: -------------------------------------------------------------------------------- 1 | /*! Kuler D3 by Benjamin Knight */ 2 | 3 | 4 | /** Base & Generic */ 5 | 6 | html { 7 | min-height: 100%; 8 | } 9 | 10 | body { 11 | background: black; 12 | margin: 0 auto; 13 | } 14 | 15 | 16 | /** Components */ 17 | 18 | .colorwheel { 19 | position: relative; 20 | z-index: 1; 21 | display: block; 22 | width: 400px; 23 | height: 400px; 24 | margin: 60px auto 0; 25 | } 26 | 27 | .colorwheel-marker { 28 | &:first-child circle { 29 | stroke-opacity: 1; 30 | stroke-width: 5px; 31 | } 32 | 33 | text { 34 | text-shadow: 35 | 1px 1px 1px black, 36 | 0 0 3px rgba(0, 0, 0, 0.25); 37 | 38 | [data-mode=Shades] & { 39 | display: none; 40 | } 41 | } 42 | } 43 | 44 | .colorwheel-theme { 45 | display: flex; 46 | text-align: center; 47 | max-width: 450px; 48 | min-width: 350px; 49 | margin: 10px auto 0; 50 | } 51 | 52 | .colorwheel-theme-swatch { 53 | flex: 1; 54 | padding: 0 0.6% 20px; 55 | 56 | input { 57 | opacity: 0.3; 58 | } 59 | 60 | &:hover input { 61 | opacity: 0.75; 62 | } 63 | } 64 | 65 | .colorwheel-theme-color { 66 | position: relative; 67 | border-radius: 50%; 68 | padding-top: 100%; 69 | box-shadow: 2px 2px 0 black; 70 | } 71 | 72 | .colorwheel-theme-slider { 73 | position: relative; 74 | display: block; 75 | width: 100%; 76 | margin: 0 0 15px; 77 | -webkit-appearance: none; 78 | outline: none; 79 | background: transparent; 80 | 81 | &:before { 82 | content: attr(value) '%'; 83 | display: block; 84 | position: absolute; 85 | z-index: -1; 86 | top: 30px; 87 | width: 100%; 88 | font-size: 10px; 89 | text-align: center; 90 | color: white; 91 | text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5); 92 | } 93 | } 94 | 95 | .colorwheel-theme-value { 96 | outline: none; 97 | width: 100%; 98 | border: none; 99 | font-family: Monaco, monospace; 100 | text-align: center; 101 | background: transparent; 102 | color: white; 103 | } 104 | 105 | .colorwheel-mode-toggle { 106 | position: absolute; 107 | z-index: 2; 108 | top: 20px; 109 | right: 20px; 110 | height: 2em; 111 | border: none; 112 | background: #000; 113 | color: rgba(255, 255, 255, 0.75); 114 | font-size: 20px; 115 | 116 | &:hover { 117 | color: rgba(255, 255, 255, 0.9); 118 | } 119 | } 120 | 121 | .colorwheel-gradient { 122 | z-index: -1; 123 | opacity: 0.5; 124 | -webkit-filter: url(#blur); 125 | filter: url(#blur); 126 | display: block; 127 | position: fixed; 128 | top: 0; 129 | left: 0; 130 | width: 100%; 131 | height: 100%; 132 | transform: translateZ(0); 133 | } 134 | 135 | 136 | /** Trumps */ 137 | 138 | ::-webkit-slider-runnable-track { 139 | -webkit-appearance: none; 140 | height: 2px; 141 | border: none; 142 | margin: 1em 0; 143 | background: #fff; 144 | color: #fff; 145 | } 146 | 147 | ::-moz-range-track { 148 | height: 2px; 149 | border: none; 150 | margin: 1em 0; 151 | background: #fff; 152 | color: #fff; 153 | } 154 | 155 | ::-ms-track { 156 | height: 2px; 157 | border: none; 158 | margin: 1em 0; 159 | background: #fff; 160 | color: #fff; 161 | } 162 | 163 | ::-ms-fill-lower, 164 | ::-ms-fill-upper, 165 | ::-ms-ticks-before, 166 | ::-ms-ticks-after, 167 | ::-ms-tooltip { 168 | display: none; 169 | } 170 | 171 | ::-webkit-slider-thumb { 172 | -webkit-appearance: none; 173 | margin-top: -7px; 174 | background: black; 175 | border: 2px solid #fff; 176 | height: 15px; 177 | width: 15px; 178 | border-radius: 99px; 179 | cursor: ew-resize; 180 | } 181 | 182 | ::-moz-range-thumb { 183 | background: black; 184 | border: 2px solid #fff; 185 | height: 15px; 186 | width: 15px; 187 | border-radius: 99px; 188 | cursor: ew-resize; 189 | } 190 | 191 | ::-ms-thumb { 192 | background: black; 193 | border: 2px solid #fff; 194 | height: 15px; 195 | width: 15px; 196 | border-radius: 99px; 197 | cursor: ew-resize; 198 | } 199 | -------------------------------------------------------------------------------- /src/ws28_model.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include 3 | #include 4 | #include 5 | 6 | // Only the Model has the access to the LED strip 7 | class WS28_Model : public Model { 8 | public: 9 | WS28_Model() 10 | { 11 | printf("WS28: Initialize the pins as an output...\n"); 12 | this->stripModel = EWS28_STRIP; 13 | 14 | this->strip = new WS2812FX(kLEDCount, kLEDPin, NEO_GRB + NEO_KHZ800); 15 | this->strip->init(); 16 | this->strip->setBrightness(this->brightness_); 17 | this->strip->setSpeed(this->delay_); 18 | this->strip->setColor(0x007BFF); 19 | this->strip->setMode(FX_MODE_STATIC); 20 | this->strip->start(); 21 | 22 | // update delay 23 | this->updateSpeed(this->delay_); 24 | // Initialize the pins values 25 | this->off(); 26 | } 27 | 28 | void runService() 29 | { 30 | this->strip->service(); 31 | } 32 | 33 | void setBrightness(uint8_t brt) 34 | { 35 | this->brightness_ = brt; 36 | this->strip->setBrightness(brt); 37 | this->strip->trigger(); 38 | } 39 | 40 | void updateSpeed(int s = -1) { 41 | s = s != -1 ? s : this->delay_; 42 | this->setSpeed(s); 43 | this->strip->setSpeed(s); 44 | this->strip->trigger(); 45 | } 46 | 47 | void setRGB(RGB rgb) 48 | { 49 | if(s_mode != OFF){ 50 | //Set the new RGB Values 51 | this->strip->setColor(rgb.r, rgb.g, rgb.b); 52 | this->strip->trigger(); 53 | this->prev_color_ = rgb; 54 | //printf("Set RGB: %i, %i, %i\n", rgb.r, rgb.g, rgb.b); 55 | } 56 | } 57 | 58 | void updateMode(uint8_t m) 59 | { 60 | this->mode_ = m; 61 | this->setMode(m); 62 | } 63 | 64 | void setMode(uint8_t m) 65 | { 66 | //Set the new Mode 67 | this->strip->setMode(m); 68 | this->strip->trigger(); 69 | this->prev_mode_ = m; 70 | 71 | //printf("Set mode to: %i\n", this->strip->getMode()); 72 | 73 | } 74 | 75 | void on() 76 | { 77 | unsigned long hex = this->strip->getColor() == 0 ? 0x007BFF : this->strip->getColor(); 78 | 79 | if (!this->strip->isRunning()){ 80 | this->strip->setColor(hex); 81 | this->strip->setMode(FX_MODE_STATIC); 82 | this->strip->start(); 83 | } 84 | } 85 | 86 | void off() 87 | { 88 | this->strip->setColor(0x000000); 89 | if (this->strip->isRunning()) this->strip->stop(); 90 | } 91 | 92 | void applyQueue(StateMode stm, SwitchMode swm) override 93 | { 94 | RGB tmp = {0, 0, 0}; 95 | switch (stm) { 96 | case OFF: 97 | this->off(); 98 | break; 99 | 100 | case ON: 101 | this->on(); 102 | break; 103 | 104 | case STATIC: 105 | tmp = this->pullFromQueue(); 106 | if (!this->isSameColor(this->prev_color_, tmp)) { 107 | this->setRGB(tmp); 108 | } 109 | break; 110 | 111 | case DYNAMIC: 112 | if (swm == FLASH) { 113 | this->flash(); 114 | } else if (swm == FADE) { 115 | this->fade(); 116 | } 117 | break; 118 | 119 | case SET_MODE: 120 | if (this->prev_mode_ != this->mode_) { 121 | this->setMode(mode_); 122 | } 123 | break; 124 | 125 | default: 126 | printf("applyQueue error. State Mode is not defined.\n"); 127 | break; 128 | } 129 | } 130 | private: 131 | static const uint8_t kLEDPin = 14; // Used for WS28 strip as output pin 132 | static const uint16_t kLEDCount = 299; // Used for WS28 strip as LED Count 133 | uint8_t mode_ = 0; 134 | uint8_t prev_mode_ = 255; // Store the previous mode 135 | 136 | uint8_t brightness_ = 90; // Store the brightness value 137 | WS2812FX *strip = nullptr; 138 | }; 139 | -------------------------------------------------------------------------------- /src/alexa.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | bool checkIsOff(uint8_t brightness) 4 | { 5 | if (brightness == 0) { 6 | return true; 7 | } 8 | return false; 9 | } 10 | 11 | void onCallback(uint8_t brightness) { 12 | if (!checkIsOff(brightness)) { 13 | controller.setBrightness(brightness); 14 | controller.on(); 15 | } 16 | else { 17 | controller.off(); 18 | } 19 | } 20 | 21 | void ownFadeCallback(uint8_t brightness) { 22 | if (!checkIsOff(brightness)) { 23 | controller.on(); 24 | controller.setBrightness(brightness); 25 | controller.updateMode(-2); 26 | }else{ 27 | controller.off(); 28 | } 29 | } 30 | 31 | void blinkCallback(uint8_t brightness) { 32 | if (!checkIsOff(brightness)) { 33 | controller.on(); 34 | controller.setBrightness(brightness); 35 | controller.updateMode(1); 36 | }else{ 37 | controller.off(); 38 | } 39 | } 40 | 41 | void colorWipeRandomCallback(uint8_t brightness) { 42 | if (!checkIsOff(brightness)) { 43 | controller.on(); 44 | controller.setBrightness(brightness); 45 | controller.updateMode(7); 46 | }else{ 47 | controller.off(); 48 | } 49 | } 50 | 51 | void multiDynamicCallback(uint8_t brightness) { 52 | if (!checkIsOff(brightness)) { 53 | controller.on(); 54 | controller.setBrightness(brightness); 55 | controller.updateMode(10); 56 | }else{ 57 | controller.off(); 58 | } 59 | } 60 | 61 | void RainbowCallback(uint8_t brightness) { 62 | if (!checkIsOff(brightness)) { 63 | controller.on(); 64 | controller.setBrightness(brightness); 65 | controller.updateMode(11); 66 | }else{ 67 | controller.off(); 68 | } 69 | } 70 | 71 | void rainbowCycleCallback(uint8_t brightness) { 72 | if (!checkIsOff(brightness)) { 73 | controller.on(); 74 | controller.setBrightness(brightness); 75 | controller.updateMode(12); 76 | }else{ 77 | controller.off(); 78 | } 79 | } 80 | 81 | void dualScanCallback(uint8_t brightness) { 82 | if (!checkIsOff(brightness)) { 83 | controller.on(); 84 | controller.setBrightness(brightness); 85 | controller.updateMode(14); 86 | }else{ 87 | controller.off(); 88 | } 89 | } 90 | 91 | void twinkleRandomCallback(uint8_t brightness) { 92 | if (!checkIsOff(brightness)) { 93 | controller.on(); 94 | controller.setBrightness(brightness); 95 | controller.updateMode(20); 96 | }else{ 97 | controller.off(); 98 | } 99 | } 100 | 101 | void chaseWhiteCallback(uint8_t brightness) { 102 | if (!checkIsOff(brightness)) { 103 | controller.on(); 104 | controller.setBrightness(brightness); 105 | controller.updateMode(30); 106 | }else{ 107 | controller.off(); 108 | } 109 | } 110 | 111 | void chaseRainbowCallback(uint8_t brightness) { 112 | if (!checkIsOff(brightness)) { 113 | controller.on(); 114 | controller.setBrightness(brightness); 115 | controller.updateMode(33); 116 | }else{ 117 | controller.off(); 118 | } 119 | } 120 | 121 | void chaseBlackoutRainbowCallback(uint8_t brightness) { 122 | if (!checkIsOff(brightness)) { 123 | controller.on(); 124 | controller.setBrightness(brightness); 125 | controller.updateMode(37); 126 | }else{ 127 | controller.off(); 128 | } 129 | } 130 | 131 | void runningRandomCallback(uint8_t brightness) { 132 | if (!checkIsOff(brightness)) { 133 | controller.on(); 134 | controller.setBrightness(brightness); 135 | controller.updateMode(42); 136 | }else{ 137 | controller.off(); 138 | } 139 | } 140 | 141 | void larsonScannerCallback(uint8_t brightness) { 142 | if (!checkIsOff(brightness)) { 143 | controller.on(); 144 | controller.setBrightness(brightness); 145 | controller.updateMode(43); 146 | }else{ 147 | controller.off(); 148 | } 149 | } 150 | 151 | void fireworksRandomCallback(uint8_t brightness) { 152 | if (!checkIsOff(brightness)) { 153 | controller.on(); 154 | controller.setBrightness(brightness); 155 | controller.updateMode(45); 156 | }else{ 157 | controller.off(); 158 | } 159 | } 160 | 161 | 162 | void adddevices() 163 | { 164 | espalexa.addDevice("Light", onCallback); 165 | espalexa.addDevice("Light 1", ownFadeCallback); 166 | espalexa.addDevice("Light 2", blinkCallback); 167 | espalexa.addDevice("Light 3", colorWipeRandomCallback); 168 | espalexa.addDevice("Light 4", multiDynamicCallback); 169 | espalexa.addDevice("Light 5", RainbowCallback); 170 | espalexa.addDevice("Light 6", rainbowCycleCallback); 171 | espalexa.addDevice("Light 7", dualScanCallback); 172 | espalexa.addDevice("Light 8", twinkleRandomCallback); 173 | espalexa.addDevice("Light 9", chaseWhiteCallback); 174 | espalexa.addDevice("Light 10", chaseRainbowCallback); 175 | espalexa.addDevice("Light 11", chaseBlackoutRainbowCallback); 176 | espalexa.addDevice("Light 13", runningRandomCallback); 177 | espalexa.addDevice("Light 14", larsonScannerCallback); 178 | espalexa.addDevice("Light 15", fireworksRandomCallback); 179 | } 180 | -------------------------------------------------------------------------------- /web_src/resources/fa-multi-button.js: -------------------------------------------------------------------------------- 1 | /*!jQuery FA multi button*/ 2 | /** 3 | * Modern toggle, push buttons or just a signal indicator 4 | * 5 | * Version: 1.0.0 6 | * Requires: jQuery v1.7+ 7 | * 8 | * Copyright (c) 2015 Mario Stephan 9 | * Under MIT License (http://www.opensource.org/licenses/mit-license.php) 10 | * 11 | * Thanks to phoxoey 12 | */ 13 | (function ( $ ) { 14 | 15 | $.fn.famultibutton = function(pOptions) { 16 | 17 | if (this.length > 1){ 18 | this.each(function() { $(this).famultibutton(pOptions) }); 19 | return this; 20 | } 21 | 22 | // private variables; 23 | var elem = this; 24 | var state = false; 25 | 26 | // setup options 27 | var defaultOptions = { 28 | classes: ['fa-2x'], 29 | backgroundIcon: 'fa-circle', 30 | icon: 'fa-power-off', 31 | //offColor: '#2A2A2A', 32 | //offBackgroundColor: '#505050', 33 | //onBackgroundColor: '#aa6900', 34 | //onColor: '#2A2A2A', 35 | offBgStyle: 'color: #000; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), inset 3px 15px 45px rgba(255,255,255,0.1), inset -1px -1px 2px rgba(0,0,0,0.5), inset -3px -15px 45px rgba(0,0,0,0.2), 1px 5px 30px -4px rgb(0, 0, 0); border-radius: 999px;', 36 | offStyle: 'box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), inset 3px 15px 85px rgba(255,255,255,0.1), inset -1px -1px 2px rgba(0,0,0,0.5), inset -3px -15px 45px rgba(0,0,0,0.2), 1px 5px 30px -4px rgb(0, 0, 0); border-radius: 999px; color: rgb(30, 30, 30);text-shadow: -1px -1px 0px rgba(204, 194, 9, 0.8), 1px 1px 2px rgb(0, 0, 0);', 37 | onBgStyle: 'color: rgba(0, 0, 0, 0.7);text-shadow: 1px 1px 0px rgba(255,255,255,0.15);box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), inset 3px 15px 45px rgba(0,0,0,0.2), inset -1px -1px 2px rgba(0,0,0,0.5), inset -3px -15px 45px rgba(255,255,255,0.1), 1px 5px 10px -4px rgba(0,0,0,1);border-radius: 999px;', 38 | onStyle: 'text-shadow: 1px 1px 0px rgba(125, 103, 28, 0.96); color: rgba(249, 219, 0, 0.89); border-radius: 999px; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), inset 3px 15px 45px rgba(0,0,0,0.2), inset -1px -1px 2px rgba(0,0,0,0.5), inset -3px -15px 45px rgba(255,255,255,0.1), 1px 5px 10px -4px rgba(0,0,0,1);', 39 | mode: 'toggle', //toggle, push, signal, 40 | toggleOn: null, 41 | toggleOff: null 42 | }; 43 | 44 | var options = $.extend({}, defaultOptions, pOptions); 45 | 46 | // private functions; 47 | var intialize = function() { 48 | 49 | //if (elem.metadata()){ 50 | 51 | options = $.extend({}, options, elem.data()); 52 | //} 53 | 54 | elem.addClass('fa-stack'); 55 | 56 | jQuery('', { 57 | id: 'bg', 58 | class: 'fa fa-stack-2x' 59 | }).addClass(options['backgroundIcon']) 60 | .css( "margin", "1px 1px") 61 | .appendTo(elem); 62 | 63 | jQuery('', { 64 | id: 'fg', 65 | class: 'fa fa-stack-1x' 66 | }).addClass(options['icon']).appendTo(elem); 67 | 68 | if(options['classes'] && options['classes'].length > 0){ 69 | for(var e=0;e' ).animate({ 'width' : 100 }, { 106 | duration : 700, 107 | easing : 'swing', 108 | // Fade the colors in the step function 109 | step : function( now, fx ) { 110 | var completion = ( now - fx.start ) / ( fx.end - fx.start ); 111 | elem.children().first().css( 'color', getGradientColor( 112 | options['onBackgroundColor'], 113 | options['offBackgroundColor'], 114 | completion)); 115 | elem.children().last().css( 'color', getGradientColor( 116 | options['onColor'], 117 | options['offColor'], 118 | completion)); 119 | }, 120 | }); 121 | }; 122 | 123 | // helper function for color fade out 124 | getGradientColor = function(start_color, end_color, percent) { 125 | // strip the leading # if it's there 126 | start_color = start_color.replace(/^\s*#|\s*$/g, ''); 127 | end_color = end_color.replace(/^\s*#|\s*$/g, ''); 128 | 129 | // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF` 130 | if(start_color.length == 3){ 131 | start_color = start_color.replace(/(.)/g, '$1$1'); 132 | } 133 | 134 | if(end_color.length == 3){ 135 | end_color = end_color.replace(/(.)/g, '$1$1'); 136 | } 137 | 138 | // get colors 139 | var start_red = parseInt(start_color.substr(0, 2), 16), 140 | start_green = parseInt(start_color.substr(2, 2), 16), 141 | start_blue = parseInt(start_color.substr(4, 2), 16); 142 | 143 | var end_red = parseInt(end_color.substr(0, 2), 16), 144 | end_green = parseInt(end_color.substr(2, 2), 16), 145 | end_blue = parseInt(end_color.substr(4, 2), 16); 146 | 147 | // calculate new color 148 | var diff_red = end_red - start_red; 149 | var diff_green = end_green - start_green; 150 | var diff_blue = end_blue - start_blue; 151 | 152 | diff_red = ( (diff_red * percent) + start_red ).toString(16).split('.')[0]; 153 | diff_green = ( (diff_green * percent) + start_green ).toString(16).split('.')[0]; 154 | diff_blue = ( (diff_blue * percent) + start_blue ).toString(16).split('.')[0]; 155 | 156 | // ensure 2 digits by color 157 | if( diff_red.length == 1 ) 158 | diff_red = '0' + diff_red 159 | 160 | if( diff_green.length == 1 ) 161 | diff_green = '0' + diff_green 162 | 163 | if( diff_blue.length == 1 ) 164 | diff_blue = '0' + diff_blue 165 | 166 | return '#' + diff_red + diff_green + diff_blue; 167 | }; 168 | 169 | var clickEventType=((document.ontouchend!==null)?'click':'touchstart'); 170 | this.bind(clickEventType, function(e) { 171 | 172 | if(options['mode'] != 'signal'){ 173 | 174 | if(state){ 175 | setOff(); 176 | if(typeof options['toggleOff'] === 'function'){ 177 | options['toggleOff'](this); 178 | } 179 | }else{ 180 | setOn(); 181 | 182 | if(options['mode'] == 'push'){ 183 | fadeOff(); 184 | } 185 | if(typeof options['toggleOn'] === 'function'){ 186 | options['toggleOn'].call(this); 187 | } 188 | } 189 | e.preventDefault(); 190 | } 191 | }); 192 | 193 | // public functions; 194 | this.setOn = function() { 195 | setOn(); 196 | }; 197 | this.setOff = function() { 198 | setOff(); 199 | }; 200 | this.getState = function() { 201 | return state; 202 | }; 203 | 204 | 205 | return intialize(); 206 | } 207 | })( jQuery ); 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | -------------------------------------------------------------------------------- /src/model.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include 3 | #include 4 | 5 | // Only the Model has the access to the LED strip 6 | class Model { 7 | public: 8 | // Default constructor 9 | Model() 10 | { 11 | printf("Init Model with default constructor.\n"); 12 | this->pushInQueue(BLUE); 13 | this->pushInQueue(PURPLE); 14 | this->pushInQueue(RED); 15 | this->pushInQueue(ORANGE); 16 | this->pushInQueue(GOLD); 17 | } 18 | 19 | // Abstract methods which has to be implemeted by its subclasses 20 | virtual void setRGB(RGB rgb) = 0; 21 | virtual void on() = 0; 22 | virtual void off() = 0; 23 | virtual void runService() {}; // Do nothing: this method will be overwritten if needed. 24 | virtual void updateMode(uint8_t m) {}; // ... 25 | virtual void setBrightness(uint8_t brt) {}; // ... 26 | virtual void updateSpeed(int s = -1) 27 | { 28 | s = s != -1 ? s : this->delay_; 29 | this->setSpeed(s); 30 | } 31 | 32 | 33 | void pushInQueue(RGB rgb) 34 | { 35 | this->RGBQueue_.push(rgb); 36 | } 37 | 38 | RGB pullFromQueue() 39 | { 40 | return RGBQueue_.front(); //Get next element 41 | } 42 | 43 | void shiftQueue() 44 | { 45 | RGB front = this->pullFromQueue(); 46 | this->RGBQueue_.pop(); //Remove next element 47 | this->pushInQueue(front); 48 | } 49 | 50 | void clearQueue() 51 | { 52 | std::queue empty; 53 | std::swap( this->RGBQueue_, empty ); // Clear the RGB queue 54 | } 55 | 56 | void setNextRGB() 57 | { 58 | RGB tmp = {0, 0, 0}; 59 | tmp = this->pullFromQueue(); //Get the first item from the queue 60 | this->prev_queue_color_ = tmp; // Set the Current Color to prev 61 | this->setRGB(tmp); //Set the RGB Value 62 | this->shiftQueue(); //Shift the queue to update the items order 63 | } 64 | 65 | void setSpeed(int sec) 66 | { 67 | this->delay_ = sec; 68 | if (s_mode == DYNAMIC && sw_mode == FADE) { 69 | //Compute the transition period 70 | this->switchColorDelay_ = (sec * TRANSITION_PART); 71 | this->transitionSteps_ = (int)((this->switchColorDelay_ * 2) / (this->TRANSITION_DELAY + 10)); // 10 is the estimated processing time of the fade procedure 72 | this->speed_ = sec - this->switchColorDelay_; 73 | } else { 74 | this->speed_ = sec; 75 | } 76 | } 77 | 78 | int getSpeed() 79 | { 80 | return this->delay_; 81 | } 82 | 83 | int getNextColor(int prev_queue, int prev, int next) { 84 | float ret = 0; 85 | 86 | if (prev > next) { 87 | ret = floor(prev - ((float)(prev_queue - next) / (float)this->transitionSteps_)); 88 | } else { 89 | ret = ceil(prev + ((float)(next - prev_queue) / (float)this->transitionSteps_)); 90 | } 91 | int min_value = min(prev_queue, next); 92 | int max_value = max(prev_queue, next); 93 | 94 | ret = (ret < min_value) ? min_value : ret; 95 | ret = (ret > max_value) ? max_value : ret; 96 | 97 | return (int)ret; 98 | } 99 | 100 | // Update Transistion Phase 101 | TransitionPhase getTransistionPhase() 102 | { 103 | unsigned long currentMillis = millis(); 104 | unsigned long period = currentMillis - previousMillis_; 105 | 106 | if ((period >= this->speed_) and (period <= this->speed_ + (this->switchColorDelay_ * 2))) { // Transition period 107 | return TRANSITION; 108 | } 109 | if (period > this->speed_ + (this->switchColorDelay_ * 2)) { //End transition 110 | previousMillis_ = currentMillis; //Rest timer 111 | return SETCOLOR; 112 | } 113 | } 114 | 115 | void fade() 116 | { 117 | RGB tmp = {0, 0, 0}; RGB rgb = {0, 0, 0}; 118 | TransitionPhase tr = getTransistionPhase(); // Update Transistion Phase 119 | 120 | switch (tr) { 121 | case SETCOLOR: 122 | this->setNextRGB(); // Set the next color from the queue 123 | 124 | this->current_step_ = 0; 125 | delay(this->speed_); 126 | break; 127 | case TRANSITION: 128 | 129 | rgb = this->pullFromQueue(); 130 | tmp.r = getNextColor(this->prev_queue_color_.r, this->prev_color_.r, rgb.r); 131 | tmp.g = getNextColor(this->prev_queue_color_.g, this->prev_color_.g, rgb.g); 132 | tmp.b = getNextColor(this->prev_queue_color_.b, this->prev_color_.b, rgb.b); 133 | 134 | this->setRGB(tmp); // Set the RGB Value 135 | 136 | this->current_step_ = min(this->current_step_ + 1, this->transitionSteps_); 137 | delay(this->TRANSITION_DELAY); 138 | break; 139 | default: 140 | 141 | break; 142 | } 143 | } 144 | 145 | void flash() 146 | { 147 | this->setNextRGB(); // Set the next color from the queue 148 | delay(this->speed_); 149 | } 150 | 151 | // Check if two RGB colors are the same 152 | bool isSameColor(RGB c1, RGB c2) 153 | { 154 | if ((c1.r == c2.r) && (c1.g == c2.g) && (c1.b == c2.b)) { 155 | return true; 156 | } else { 157 | return false; 158 | } 159 | } 160 | 161 | virtual void applyQueue(StateMode stm, SwitchMode swm) 162 | { 163 | RGB tmp = {0, 0, 0}; 164 | switch (stm) { 165 | case OFF: 166 | this->off(); 167 | break; 168 | 169 | case ON: 170 | this->on(); 171 | break; 172 | 173 | case STATIC: 174 | tmp = this->pullFromQueue(); 175 | if (!this->isSameColor(this->prev_color_, tmp)) { 176 | this->setRGB(tmp); 177 | } 178 | break; 179 | 180 | case DYNAMIC: 181 | if (swm == FLASH) { 182 | this->flash(); 183 | } else if (swm == FADE) { 184 | this->fade(); 185 | } 186 | break; 187 | 188 | default: 189 | printf("applyQueue error. State Mode is not defined.\n"); 190 | break; 191 | } 192 | } 193 | protected: 194 | std::queue RGBQueue_; // Queue that contains all the RGB values 195 | Strip_Type stripModel; // Store the strip model 196 | 197 | unsigned long switchColorDelay_ = 0; // Set transition duration 198 | float TRANSITION_PART = 0.5f; // Set the transition part as 20 percent 199 | uint8_t TRANSITION_DELAY = 20; // Set the transition time (ms) 200 | int transitionSteps_ = 0; // Steps number for one transition 201 | int speed_ = 0; // Steps the speed value for one color 202 | int delay_ = 1000; // Steps the delay value 203 | 204 | RGB prev_color_ = {0, 0, 0}; // Store the preview color 205 | RGB prev_queue_color_ = {0, 0, 0}; // Store the preview color from queue 206 | int current_step_ = 0; 207 | unsigned long previousMillis_ = 0; 208 | }; 209 | -------------------------------------------------------------------------------- /web_src/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | WiLED 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 48 | 49 | 50 | 51 | 52 |
53 |
54 |
55 |

WiLED

56 |
57 |
58 | 59 |
60 |
61 |

62 |

63 | 125 |

126 | 127 | 128 | 129 | 130 |
131 |
132 | 133 | 138 |
139 | 140 | 141 | 143 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 267 | 268 | 269 | 270 | -------------------------------------------------------------------------------- /data/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | WiLED 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 48 | 49 | 50 | 51 | 52 | 53 |
54 |
55 |
56 |

WiLED

57 |
58 |
59 | 60 |
61 |
62 |

63 |

64 | 126 |

127 | 128 | 129 | 130 | 131 |
132 |
133 | 134 | 139 |
140 | 141 | 142 | 144 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 268 | 269 | 270 | 271 | -------------------------------------------------------------------------------- /src/webServer.h: -------------------------------------------------------------------------------- 1 | /* Functions: 2 | update the sw via http server 3 | upload new files via the SPIFFS library 4 | return the requested file from client through server.uri 5 | 6 | */ 7 | 8 | #pragma once 9 | #include 10 | #include 11 | #include 12 | #include // Include the SPIFFS library 13 | 14 | 15 | 16 | using namespace std::placeholders; 17 | class WebServer { 18 | public: 19 | WebServer(Controller &c) : controller(c), server(80) 20 | { 21 | startServer(); // Start a HTTP server with a file read handler and an upload handler 22 | startSPIFFS(); // Start the SPIFFS and list all contents 23 | startWebSocket(); // Start a WebSocket server 24 | 25 | httpUpdater.setup(&server, "/update"); // Initialize http updater server 26 | } 27 | 28 | // Convert sizes in bytes to KB and MB 29 | String formatBytes(size_t bytes) { 30 | if (bytes < 1024) { 31 | return String(bytes) + "B"; 32 | } else if (bytes < (1024 * 1024)) { 33 | return String(bytes / 1024.0) + "KB"; 34 | } else if (bytes < (1024 * 1024 * 1024)) { 35 | return String(bytes / 1024.0 / 1024.0) + "MB"; 36 | } 37 | } 38 | 39 | // Convert the file extension to the MIME type 40 | String getContentType(String filename) { 41 | if (server.hasArg("download")) return "application/octet-stream"; 42 | else if (filename.endsWith(".htm")) return "text/html"; 43 | else if (filename.endsWith(".html")) return "text/html"; 44 | else if (filename.endsWith(".css")) return "text/css"; 45 | else if (filename.endsWith(".js")) return "application/javascript"; 46 | else if (filename.endsWith(".png")) return "image/png"; 47 | else if (filename.endsWith(".gif")) return "image/gif"; 48 | else if (filename.endsWith(".jpg")) return "image/jpeg"; 49 | else if (filename.endsWith(".ico")) return "image/x-icon"; 50 | else if (filename.endsWith(".xml")) return "text/xml"; 51 | else if (filename.endsWith(".pdf")) return "application/x-pdf"; 52 | else if (filename.endsWith(".zip")) return "application/x-zip"; 53 | else if (filename.endsWith(".gz")) return "application/x-gzip"; 54 | return "text/plain"; 55 | } 56 | 57 | // Send the right file to the client (if it exists) 58 | bool handleFileRead(String path) { 59 | if (path.endsWith("/")) path += "index.htm"; // If a folder is requested, send the index file 60 | if (path == "/upload") path = "/upload.htm"; // Send the upload file 61 | Serial.println("handleFileRead: " + path); 62 | 63 | String contentType = getContentType(path); // Get the MIME type 64 | String pathWithGz = path + ".gz"; 65 | if (SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)) { // If the file exists, either as a compressed archive, or normal 66 | if (SPIFFS.exists(pathWithGz)) // If there's a compressed version available 67 | path += ".gz"; // Use the compressed verion 68 | File file = SPIFFS.open(path, "r"); // Open the file 69 | size_t sent = server.streamFile(file, contentType); // Send it to the client 70 | file.close(); // Close the file again 71 | Serial.println(String("\tSent file: ") + path); 72 | return true; 73 | } 74 | Serial.println(String("\tFile Not Found: ") + path); // If the file doesn't exist, return false 75 | return false; 76 | } 77 | 78 | 79 | // Upload file to flash 80 | void handleFileUpload() { 81 | HTTPUpload& upload = server.upload(); 82 | String path; 83 | if (upload.status == UPLOAD_FILE_START) { 84 | path = upload.filename; 85 | if (!path.startsWith("/")) path = "/" + path; 86 | if (!path.endsWith(".gz")) { // The file server always prefers a compressed version of a file 87 | String pathWithGz = path + ".gz"; // So if an uploaded file is not compressed, the existing compressed 88 | if (SPIFFS.exists(pathWithGz)) // version of that file must be deleted (if it exists) 89 | SPIFFS.remove(pathWithGz); 90 | } 91 | Serial.println("handleFileUpload Name: " + path); 92 | fsUploadFile = SPIFFS.open(path, "w"); // Open the file for writing in SPIFFS (create if it doesn't exist) 93 | path = String(); 94 | } else if (upload.status == UPLOAD_FILE_WRITE) { 95 | if (fsUploadFile) 96 | fsUploadFile.write(upload.buf, upload.currentSize); // Write the received bytes to the file 97 | } else if (upload.status == UPLOAD_FILE_END) { 98 | if (fsUploadFile) { // If the file was successfully created 99 | fsUploadFile.close(); // Close the file again 100 | printf("handleFileUpload Size: %d\n", upload.totalSize); 101 | server.sendHeader("Location", "/success.htm"); // Redirect the client to the success page 102 | server.send(303); 103 | } else { 104 | Update.printError(Serial); 105 | server.send(500, "text/plain", "500: couldn't create file"); 106 | } 107 | } 108 | } 109 | 110 | // Start the SPIFFS and list all contents 111 | void startSPIFFS() { 112 | 113 | printf("SPIFFS starting...\n"); 114 | SPIFFS.begin(); // Start the SPI Flash File System (SPIFFS) 115 | printf("SPIFFS started. Contents:\n"); 116 | { 117 | Dir dir = SPIFFS.openDir("/"); 118 | while (dir.next()) { // List the file system contents 119 | String fileName = dir.fileName(); 120 | size_t fileSize = dir.fileSize(); 121 | printf("\tFS File: %s, size: %s\r\n", fileName.c_str(), formatBytes(fileSize).c_str()); 122 | } 123 | } 124 | } 125 | 126 | void uploadData() 127 | { 128 | printf("upload data..."); 129 | server.send(200, "text/html", this->upload_html); 130 | } 131 | 132 | // Start a HTTP server with a file read handler and an upload handler 133 | void startServer() { 134 | //Initialize Webserver 135 | printf("Server starting...\n"); 136 | 137 | server.on("/update", HTTP_GET, std::bind(&WebServer::uploadData, this)); // if the client requests the upload page 138 | server.on("/update", HTTP_POST, [this]() { // if the client posts to the upload page 139 | server.send(200); // Send status 200 (OK) to tell the client we are ready to receive 140 | }, std::bind(&WebServer::handleFileUpload, this) // Receive and save the file 141 | ); 142 | 143 | 144 | server.onNotFound([this]() { // If the client requests any URI 145 | if (!espalexa.handleAlexaApiCall(server.uri(),server.arg(0))){ // Check if is an Alexa control request 146 | if (!handleFileRead(server.uri())){ 147 | server.send(404, "text/plain", "404: Not Found"); // otherwise, respond with a 404 (Not Found) error 148 | } 149 | } 150 | }); 151 | 152 | server.begin(); // start the HTTP server 153 | printf("HTTP server started.\n"); 154 | } 155 | 156 | // Start a WebSocket server 157 | void startWebSocket() { 158 | printf("WebSocket starting...\n"); 159 | webSocket.begin(); // Start the websocket server 160 | webSocket.onEvent(std::bind(&WebServer::webSocketEvent, this, _1, _2, _3, _4)); // Call webSocketEvent if there's an incomming websocket message 161 | printf("WebSocket server started.\n"); 162 | } 163 | 164 | // Start handleClient 165 | void serverListener() // Omit this line since it will be called in espalexa.loop() 166 | { 167 | server.handleClient(); 168 | } 169 | 170 | // Start webSocket listener 171 | void webSocketListener() 172 | { 173 | webSocket.loop(); 174 | } 175 | 176 | // Event handler 177 | void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght) { 178 | switch (type) { 179 | case WStype_DISCONNECTED: // If the websocket is disconnected 180 | printf("[%u] Disconnected!\n", num); 181 | break; 182 | case WStype_CONNECTED: { // if a new websocket connection is established 183 | IPAddress ip = webSocket.remoteIP(num); 184 | printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload); 185 | } 186 | break; 187 | case WStype_TEXT: // If new text data is received 188 | printf("[%u] get Text: %s\n", num, payload); 189 | 190 | if (payload[0] == '#') { // # Set LED Colors 191 | payload++; 192 | char delimiter[] = ","; 193 | char *rgb_str = strtok((char *)payload, delimiter); 194 | uint8_t rgbs[15]; uint8_t i = 0; 195 | 196 | while (rgb_str != NULL) { 197 | rgbs[i] = atoi(rgb_str); 198 | i++; 199 | rgb_str = strtok(NULL, delimiter); 200 | } 201 | this->controller.updateColors(rgbs, i); 202 | } else if (payload[0] == '$') { // $ Set Strip Mode 203 | payload++; 204 | int m = atoi((const char *)payload); 205 | printf("m: %i\n", m); 206 | this->controller.updateMode(m); 207 | } else if (payload[0] == '~') { // ~ Set Speed 208 | payload++; 209 | int s = atoi((const char *)payload) * 100; 210 | this->controller.setSpeed(s); 211 | } else if (payload[0] == '&') { // & Set Brightness 212 | payload++; 213 | uint8_t b = atoi((const char *)payload); 214 | this->controller.setBrightness(b); 215 | } else if (payload[0] == 'N') { // N Turn LED On 216 | this->controller.on(); 217 | } else if (payload[0] == 'F') { // F Turn LED Off 218 | this->controller.off(); 219 | } 220 | break; 221 | } 222 | } 223 | 224 | 225 | private: 226 | Controller &controller; 227 | File fsUploadFile; // A File object to temporarily store the received file 228 | WebSocketsServer webSocket = WebSocketsServer(81); // Create a websocket server on port 81 229 | ESP8266HTTPUpdateServer httpUpdater; 230 | String upload_html = "
\n"; 231 | public: 232 | ESP8266WebServer server; 233 | }; 234 | -------------------------------------------------------------------------------- /web_src/resources/bootstrap-slider.css: -------------------------------------------------------------------------------- 1 | /*! ========================================================= 2 | * bootstrap-slider.js 3 | * 4 | * Maintainers: 5 | * Kyle Kemp 6 | * - Twitter: @seiyria 7 | * - Github: seiyria 8 | * Rohit Kalkur 9 | * - Twitter: @Rovolutionary 10 | * - Github: rovolution 11 | * 12 | * ========================================================= 13 | * 14 | * bootstrap-slider is released under the MIT License 15 | * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors 16 | * 17 | * Permission is hereby granted, free of charge, to any person 18 | * obtaining a copy of this software and associated documentation 19 | * files (the "Software"), to deal in the Software without 20 | * restriction, including without limitation the rights to use, 21 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 22 | * copies of the Software, and to permit persons to whom the 23 | * Software is furnished to do so, subject to the following 24 | * conditions: 25 | * 26 | * The above copyright notice and this permission notice shall be 27 | * included in all copies or substantial portions of the Software. 28 | * 29 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 30 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 31 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 32 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 33 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 34 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 35 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 36 | * OTHER DEALINGS IN THE SOFTWARE. 37 | * 38 | * ========================================================= */ 39 | .slider { 40 | display: inline-block; 41 | vertical-align: middle; 42 | position: relative; 43 | } 44 | .slider.slider-horizontal { 45 | width: 210px; 46 | height: 20px; 47 | } 48 | .slider.slider-horizontal .slider-track { 49 | height: 10px; 50 | width: 100%; 51 | margin-top: -5px; 52 | top: 50%; 53 | left: 0; 54 | } 55 | .slider.slider-horizontal .slider-selection, 56 | .slider.slider-horizontal .slider-track-low, 57 | .slider.slider-horizontal .slider-track-high { 58 | height: 100%; 59 | top: 0; 60 | bottom: 0; 61 | } 62 | .slider.slider-horizontal .slider-tick, 63 | .slider.slider-horizontal .slider-handle { 64 | margin-left: -10px; 65 | } 66 | .slider.slider-horizontal .slider-tick.triangle, 67 | .slider.slider-horizontal .slider-handle.triangle { 68 | position: relative; 69 | top: 50%; 70 | -ms-transform: translateY(-50%); 71 | transform: translateY(-50%); 72 | border-width: 0 10px 10px 10px; 73 | width: 0; 74 | height: 0; 75 | border-bottom-color: #2e6da4; 76 | margin-top: 0; 77 | } 78 | .slider.slider-horizontal .slider-tick-container { 79 | white-space: nowrap; 80 | position: absolute; 81 | top: 0; 82 | left: 0; 83 | width: 100%; 84 | } 85 | .slider.slider-horizontal .slider-tick-label-container { 86 | white-space: nowrap; 87 | margin-top: 20px; 88 | } 89 | .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { 90 | padding-top: 4px; 91 | display: inline-block; 92 | text-align: center; 93 | } 94 | .slider.slider-horizontal .tooltip { 95 | -ms-transform: translateX(-50%); 96 | transform: translateX(-50%); 97 | } 98 | .slider.slider-horizontal.slider-rtl .slider-track { 99 | left: initial; 100 | right: 0; 101 | } 102 | .slider.slider-horizontal.slider-rtl .slider-tick, 103 | .slider.slider-horizontal.slider-rtl .slider-handle { 104 | margin-left: initial; 105 | margin-right: -10px; 106 | } 107 | .slider.slider-horizontal.slider-rtl .slider-tick-container { 108 | left: initial; 109 | right: 0; 110 | } 111 | .slider.slider-horizontal.slider-rtl .tooltip { 112 | -ms-transform: translateX(50%); 113 | transform: translateX(50%); 114 | } 115 | .slider.slider-vertical { 116 | height: 210px; 117 | width: 20px; 118 | } 119 | .slider.slider-vertical .slider-track { 120 | width: 10px; 121 | height: 100%; 122 | left: 25%; 123 | top: 0; 124 | } 125 | .slider.slider-vertical .slider-selection { 126 | width: 100%; 127 | left: 0; 128 | top: 0; 129 | bottom: 0; 130 | } 131 | .slider.slider-vertical .slider-track-low, 132 | .slider.slider-vertical .slider-track-high { 133 | width: 100%; 134 | left: 0; 135 | right: 0; 136 | } 137 | .slider.slider-vertical .slider-tick, 138 | .slider.slider-vertical .slider-handle { 139 | margin-top: -10px; 140 | } 141 | .slider.slider-vertical .slider-tick.triangle, 142 | .slider.slider-vertical .slider-handle.triangle { 143 | border-width: 10px 0 10px 10px; 144 | width: 1px; 145 | height: 1px; 146 | border-left-color: #2e6da4; 147 | border-right-color: #2e6da4; 148 | margin-left: 0; 149 | margin-right: 0; 150 | } 151 | .slider.slider-vertical .slider-tick-label-container { 152 | white-space: nowrap; 153 | } 154 | .slider.slider-vertical .slider-tick-label-container .slider-tick-label { 155 | padding-left: 4px; 156 | } 157 | .slider.slider-vertical .tooltip { 158 | -ms-transform: translateY(-50%); 159 | transform: translateY(-50%); 160 | } 161 | .slider.slider-vertical.slider-rtl .slider-track { 162 | left: initial; 163 | right: 25%; 164 | } 165 | .slider.slider-vertical.slider-rtl .slider-selection { 166 | left: initial; 167 | right: 0; 168 | } 169 | .slider.slider-vertical.slider-rtl .slider-tick.triangle, 170 | .slider.slider-vertical.slider-rtl .slider-handle.triangle { 171 | border-width: 10px 10px 10px 0; 172 | } 173 | .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label { 174 | padding-left: initial; 175 | padding-right: 4px; 176 | } 177 | .slider.slider-disabled .slider-handle { 178 | background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); 179 | background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); 180 | background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%); 181 | background-repeat: repeat-x; 182 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0); 183 | } 184 | .slider.slider-disabled .slider-track { 185 | background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); 186 | background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); 187 | background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%); 188 | background-repeat: repeat-x; 189 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0); 190 | cursor: not-allowed; 191 | } 192 | .slider input { 193 | display: none; 194 | } 195 | .slider .tooltip { 196 | pointer-events: none; 197 | } 198 | .slider .tooltip.top { 199 | margin-top: -36px; 200 | } 201 | .slider .tooltip-inner { 202 | white-space: nowrap; 203 | max-width: none; 204 | } 205 | .slider .hide { 206 | display: none; 207 | } 208 | .slider-track { 209 | position: absolute; 210 | cursor: pointer; 211 | background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%); 212 | background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%); 213 | background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%); 214 | background-repeat: repeat-x; 215 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); 216 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 217 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 218 | border-radius: 4px; 219 | } 220 | .slider-selection { 221 | position: absolute; 222 | background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 223 | background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 224 | background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); 225 | background-repeat: repeat-x; 226 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); 227 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 228 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 229 | -webkit-box-sizing: border-box; 230 | -moz-box-sizing: border-box; 231 | box-sizing: border-box; 232 | border-radius: 4px; 233 | } 234 | .slider-selection.tick-slider-selection { 235 | background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 236 | background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 237 | background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%); 238 | background-repeat: repeat-x; 239 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0); 240 | } 241 | .slider-track-low, 242 | .slider-track-high { 243 | position: absolute; 244 | background: transparent; 245 | -webkit-box-sizing: border-box; 246 | -moz-box-sizing: border-box; 247 | box-sizing: border-box; 248 | border-radius: 4px; 249 | } 250 | .slider-handle { 251 | position: absolute; 252 | top: 0; 253 | width: 20px; 254 | height: 20px; 255 | background-color: #337ab7; 256 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); 257 | background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); 258 | background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); 259 | background-repeat: repeat-x; 260 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); 261 | filter: none; 262 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 263 | box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 264 | border: 0px solid transparent; 265 | } 266 | .slider-handle:hover { 267 | cursor: pointer; 268 | } 269 | .slider-handle.round { 270 | border-radius: 50%; 271 | } 272 | .slider-handle.triangle { 273 | background: transparent none; 274 | } 275 | .slider-handle.custom { 276 | background: transparent none; 277 | } 278 | .slider-handle.custom::before { 279 | line-height: 20px; 280 | font-size: 20px; 281 | content: '\2605'; 282 | color: #726204; 283 | } 284 | .slider-tick { 285 | position: absolute; 286 | cursor: pointer; 287 | width: 20px; 288 | height: 20px; 289 | background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 290 | background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 291 | background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); 292 | background-repeat: repeat-x; 293 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); 294 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 295 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 296 | -webkit-box-sizing: border-box; 297 | -moz-box-sizing: border-box; 298 | box-sizing: border-box; 299 | filter: none; 300 | opacity: 0.8; 301 | border: 0px solid transparent; 302 | } 303 | .slider-tick.round { 304 | border-radius: 50%; 305 | } 306 | .slider-tick.triangle { 307 | background: transparent none; 308 | } 309 | .slider-tick.custom { 310 | background: transparent none; 311 | } 312 | .slider-tick.custom::before { 313 | line-height: 20px; 314 | font-size: 20px; 315 | content: '\2605'; 316 | color: #726204; 317 | } 318 | .slider-tick.in-selection { 319 | background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 320 | background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 321 | background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%); 322 | background-repeat: repeat-x; 323 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0); 324 | opacity: 1; 325 | } 326 | -------------------------------------------------------------------------------- /web_src/resources/font-awesome-animation.min.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes wrench{0%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}18%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}20%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}28%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}30%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}38%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}40%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}48%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}50%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}58%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}60%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes wrench{0%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}18%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}20%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}28%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}30%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}38%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}40%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}48%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}50%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}58%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}60%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0);transform:rotate(0)}}.faa-parent.animated-hover:hover>.faa-wrench,.faa-wrench.animated,.faa-wrench.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-wrench.faa-fast,.faa-wrench.animated-hover.faa-fast:hover,.faa-wrench.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-wrench.faa-slow,.faa-wrench.animated-hover.faa-slow:hover,.faa-wrench.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}@-webkit-keyframes ring{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes ring{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0);transform:rotate(0)}}.faa-parent.animated-hover:hover>.faa-ring,.faa-ring.animated,.faa-ring.animated-hover:hover{-webkit-animation:ring 2s ease infinite;animation:ring 2s ease infinite;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-ring.faa-fast,.faa-ring.animated-hover.faa-fast:hover,.faa-ring.animated.faa-fast{-webkit-animation:ring 1s ease infinite;animation:ring 1s ease infinite}.faa-parent.animated-hover:hover>.faa-ring.faa-slow,.faa-ring.animated-hover.faa-slow:hover,.faa-ring.animated.faa-slow{-webkit-animation:ring 3s ease infinite;animation:ring 3s ease infinite}@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes vertical{0%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.faa-parent.animated-hover:hover>.faa-vertical,.faa-vertical.animated,.faa-vertical.animated-hover:hover{-webkit-animation:vertical 2s ease infinite;animation:vertical 2s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-fast,.faa-vertical.animated-hover.faa-fast:hover,.faa-vertical.animated.faa-fast{-webkit-animation:vertical 1s ease infinite;animation:vertical 1s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-slow,.faa-vertical.animated-hover.faa-slow:hover,.faa-vertical.animated.faa-slow{-webkit-animation:vertical 4s ease infinite;animation:vertical 4s ease infinite}@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes horizontal{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.faa-horizontal.animated,.faa-horizontal.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-horizontal{-webkit-animation:horizontal 2s ease infinite;animation:horizontal 2s ease infinite}.faa-horizontal.animated-hover.faa-fast:hover,.faa-horizontal.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-horizontal.faa-fast{-webkit-animation:horizontal 1s ease infinite;animation:horizontal 1s ease infinite}.faa-horizontal.animated-hover.faa-slow:hover,.faa-horizontal.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-horizontal.faa-slow{-webkit-animation:horizontal 3s ease infinite;animation:horizontal 3s ease infinite}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.faa-flash.animated,.faa-flash.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-flash{-webkit-animation:flash 2s ease infinite;animation:flash 2s ease infinite}.faa-flash.animated-hover.faa-fast:hover,.faa-flash.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-flash.faa-fast{-webkit-animation:flash 1s ease infinite;animation:flash 1s ease infinite}.faa-flash.animated-hover.faa-slow:hover,.faa-flash.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-flash.faa-slow{-webkit-animation:flash 3s ease infinite;animation:flash 3s ease infinite}@-webkit-keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}.faa-bounce.animated,.faa-bounce.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-bounce{-webkit-animation:bounce 2s ease infinite;animation:bounce 2s ease infinite}.faa-bounce.animated-hover.faa-fast:hover,.faa-bounce.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-bounce.faa-fast{-webkit-animation:bounce 1s ease infinite;animation:bounce 1s ease infinite}.faa-bounce.animated-hover.faa-slow:hover,.faa-bounce.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-bounce.faa-slow{-webkit-animation:bounce 3s ease infinite;animation:bounce 3s ease infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.faa-parent.animated-hover:hover>.faa-spin,.faa-spin.animated,.faa-spin.animated-hover:hover{-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-fast,.faa-spin.animated-hover.faa-fast:hover,.faa-spin.animated.faa-fast{-webkit-animation:spin .7s linear infinite;animation:spin .7s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-slow,.faa-spin.animated-hover.faa-slow:hover,.faa-spin.animated.faa-slow{-webkit-animation:spin 2.2s linear infinite;animation:spin 2.2s linear infinite}@-webkit-keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.faa-float.animated,.faa-float.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-float{-webkit-animation:float 2s linear infinite;animation:float 2s linear infinite}.faa-float.animated-hover.faa-fast:hover,.faa-float.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-float.faa-fast{-webkit-animation:float 1s linear infinite;animation:float 1s linear infinite}.faa-float.animated-hover.faa-slow:hover,.faa-float.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-float.faa-slow{-webkit-animation:float 3s linear infinite;animation:float 3s linear infinite}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}.faa-parent.animated-hover:hover>.faa-pulse,.faa-pulse.animated,.faa-pulse.animated-hover:hover{-webkit-animation:pulse 2s linear infinite;animation:pulse 2s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-fast,.faa-pulse.animated-hover.faa-fast:hover,.faa-pulse.animated.faa-fast{-webkit-animation:pulse 1s linear infinite;animation:pulse 1s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-slow,.faa-pulse.animated-hover.faa-slow:hover,.faa-pulse.animated.faa-slow{-webkit-animation:pulse 3s linear infinite;animation:pulse 3s linear infinite}.faa-parent.animated-hover:hover>.faa-shake,.faa-shake.animated,.faa-shake.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-fast,.faa-shake.animated-hover.faa-fast:hover,.faa-shake.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-slow,.faa-shake.animated-hover.faa-slow:hover,.faa-shake.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}.faa-parent.animated-hover:hover>.faa-tada,.faa-tada.animated,.faa-tada.animated-hover:hover{-webkit-animation:tada 2s linear infinite;animation:tada 2s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-fast,.faa-tada.animated-hover.faa-fast:hover,.faa-tada.animated.faa-fast{-webkit-animation:tada 1s linear infinite;animation:tada 1s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-slow,.faa-tada.animated-hover.faa-slow:hover,.faa-tada.animated.faa-slow{-webkit-animation:tada 3s linear infinite;animation:tada 3s linear infinite}@-webkit-keyframes passing{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}@keyframes passing{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-passing,.faa-passing.animated,.faa-passing.animated-hover:hover{-webkit-animation:passing 2s linear infinite;animation:passing 2s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-fast,.faa-passing.animated-hover.faa-fast:hover,.faa-passing.animated.faa-fast{-webkit-animation:passing 1s linear infinite;animation:passing 1s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-slow,.faa-passing.animated-hover.faa-slow:hover,.faa-passing.animated.faa-slow{-webkit-animation:passing 3s linear infinite;animation:passing 3s linear infinite}@-webkit-keyframes passing-reverse{0%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}}@keyframes passing-reverse{0%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-passing-reverse,.faa-passing-reverse.animated,.faa-passing-reverse.animated-hover:hover{-webkit-animation:passing-reverse 2s linear infinite;animation:passing-reverse 2s linear infinite}.faa-parent.animated-hover:hover>.faa-passing-reverse.faa-fast,.faa-passing-reverse.animated-hover.faa-fast:hover,.faa-passing-reverse.animated.faa-fast{-webkit-animation:passing-reverse 1s linear infinite;animation:passing-reverse 1s linear infinite}.faa-parent.animated-hover:hover>.faa-passing-reverse.faa-slow,.faa-passing-reverse.animated-hover.faa-slow:hover,.faa-passing-reverse.animated.faa-slow{-webkit-animation:passing-reverse 3s linear infinite;animation:passing-reverse 3s linear infinite}@-webkit-keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}@keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}.faa-burst.animated,.faa-burst.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-burst{-webkit-animation:burst 2s infinite linear;animation:burst 2s infinite linear}.faa-burst.animated-hover.faa-fast:hover,.faa-burst.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-burst.faa-fast{-webkit-animation:burst 1s infinite linear;animation:burst 1s infinite linear}.faa-burst.animated-hover.faa-slow:hover,.faa-burst.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-burst.faa-slow{-webkit-animation:burst 3s infinite linear;animation:burst 3s infinite linear}@-webkit-keyframes falling{0%{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0}}@keyframes falling{0%{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0}50%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0}}.faa-falling.animated,.faa-falling.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-falling{-webkit-animation:falling 2s linear infinite;animation:falling 2s linear infinite}.faa-falling.animated-hover.faa-fast:hover,.faa-falling.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-falling.faa-fast{-webkit-animation:falling 1s linear infinite;animation:falling 1s linear infinite}.faa-falling.animated-hover.faa-slow:hover,.faa-falling.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-falling.faa-slow{-webkit-animation:falling 3s linear infinite;animation:falling 3s linear infinite} -------------------------------------------------------------------------------- /web_src/resources/colorwheel.js: -------------------------------------------------------------------------------- 1 | // Color Wheel with D3 2 | // http://github.com/benknight/kuler-d3 3 | // Benjamin Knight 4 | // MIT License 5 | 6 | (function (root, factory) { 7 | // AMD/requirejs: Define the module 8 | if (typeof define === 'function' && define.amd) { 9 | define(['tinycolor', 'd3'], factory); 10 | } else { 11 | // Expose to browser window 12 | root.ColorWheel = factory(root.tinycolor, root.d3); 13 | } 14 | }(this, function (tinycolor, d3) { 15 | 'use strict'; 16 | 17 | var ColorWheelMarkerDatum = function ColorWheelMarkerDatum(color, name, show, id=0) { 18 | this.color = tinycolor(color).toHsv(); 19 | this.id = id; 20 | this.name = name; 21 | this.show = show; 22 | }; 23 | 24 | var ColorWheel = function ColorWheel (options) { 25 | var self = this; 26 | 27 | // --- Settings --- 28 | 29 | this.options = { 30 | container : document.getElementById('ColorPicker'), 31 | radius : 175, 32 | margin : 40, // space around the edge of the wheel 33 | markerWidth : 40, 34 | defaultSlice : 45, 35 | initRoot : 'red', 36 | initMode : ColorWheel.modes.ANALOGOUS, 37 | baseClassName: 'colorwheel', 38 | }; 39 | 40 | // Merge default options with options param. (Similar to jQuery.extend) 41 | if (typeof options === 'object') { 42 | for (var option in options) { 43 | if (option == 'initMode') { 44 | ColorWheel.checkIfModeExists(options[option]); 45 | } 46 | this.options[option] = options[option]; 47 | } 48 | } 49 | 50 | var diameter = this.options.radius * 2; 51 | this.currentMode = this.options.initMode; 52 | this.container = d3.select(this.options.container); 53 | 54 | this.slice = this.options.defaultSlice; 55 | 56 | 57 | // --- Nodes --- 58 | 59 | this.$ = {}; 60 | this.$.wheel = this.container.append('svg').attr({ 61 | 'class': this.options.baseClassName, 62 | width: diameter, 63 | height: diameter, 64 | viewBox: [ 65 | -1 * this.options.margin, 66 | -1 * this.options.margin, 67 | diameter + 2 * this.options.margin, 68 | diameter + 2 * this.options.margin 69 | ].join(' ') 70 | }); 71 | 72 | this.$.wheel.append('circle').attr({ 73 | fill : 'black', 74 | r : this.options.radius, 75 | cx : this.options.radius, 76 | cy : this.options.radius, 77 | transform: 'translate(4, 4)' 78 | }); 79 | 80 | this.$.wheel.append('image').attr({ 81 | width: diameter, 82 | height: diameter, 83 | 'xlink:href': 'https://cdn.jsdelivr.net/gh/reger-men/WiLED@master/web_src/resources/wheel.png' 84 | }); 85 | 86 | this.$.markerTrails = this.$.wheel.append('g'); 87 | this.$.markers = this.$.wheel.append('g').attr({ 88 | 'id' : this.options.baseClassName, 89 | 'touch-action': 'manipulation' 90 | }); 91 | 92 | 93 | 94 | // --- Events --- 95 | 96 | this.dispatch = d3.dispatch( 97 | // Markers datum has changed, so redraw as necessary, etc. 98 | 'markersUpdated', 99 | 100 | // "updateEnd" means the state of the ColorWheel has been finished updating. 101 | 'updateEnd', 102 | 103 | // Initial data was successfully bound. 104 | 'bindData', 105 | 106 | // The mode was changed 107 | 'modeChanged' 108 | ); 109 | 110 | this.dispatch.on('bindData.default', function () { 111 | self.setHarmony(); 112 | }); 113 | 114 | this.dispatch.on('markersUpdated.default', function () { 115 | self.getMarkers().attr({ 116 | transform: function (d) { 117 | var hue = ColorWheel.scientificToArtisticSmooth(d.color.h); 118 | var p = self.getSVGPositionFromHS(d.color.h, d.color.s); 119 | return ['translate(' + [p.x, p.y].join() + ')'].join(' '); 120 | }, 121 | visibility: function (d) { 122 | return d.show ? 'visible' : 'hidden'; 123 | } 124 | }).select('circle').attr({ 125 | fill: function (d) { 126 | return ColorWheel.hexFromHS(d.color.h, d.color.s); 127 | } 128 | }); 129 | 130 | self.container.selectAll(self.selector('marker-trail')).attr({ 131 | 'x2': function (d) { 132 | var p = self.getSVGPositionFromHS(d.color.h, d.color.s); 133 | return p.x; 134 | }, 135 | 'y2': function (d) { 136 | var p = self.getSVGPositionFromHS(d.color.h, d.color.s); 137 | return p.y; 138 | }, 139 | visibility: function (d) { 140 | return d.show ? 'visible' : 'hidden'; 141 | } 142 | }); 143 | }); 144 | 145 | this.dispatch.on('modeChanged.default', function () { 146 | self.container.attr('data-mode', self.currentMode); 147 | }); 148 | 149 | 150 | // --- Plugins --- 151 | 152 | for (var pluginId in ColorWheel.plugins) { 153 | if (typeof ColorWheel.plugins[pluginId] == 'function') { 154 | ColorWheel.plugins[pluginId](this); 155 | } 156 | } 157 | }; 158 | 159 | ColorWheel.prototype.bindData = function (newData) { 160 | var self = this; 161 | 162 | // Data can be passed as a whole number, 163 | // or an array of ColorWheelMarkerDatum. 164 | if (newData.constructor === Array) { 165 | var data = newData; 166 | this.setMode(ColorWheel.modes.CUSTOM); 167 | } else { 168 | // We weren't given any data so create our own. 169 | var numColors = (typeof newData === 'number') ? newData : 5; 170 | var data = Array.apply(null, {length: numColors}).map(function () { 171 | return new ColorWheelMarkerDatum(self.options.initRoot, null, true); 172 | }); 173 | } 174 | 175 | var markerTrails = this.$.markerTrails.selectAll(this.selector('marker-trail')).data(data); 176 | 177 | markerTrails.enter().append('line').attr({ 178 | 'class': this.cx('marker-trail'), 179 | 'x1': this.options.radius, 180 | 'y1': this.options.radius, 181 | 'stroke': 'white', 182 | 'stroke-opacity': 0.75, 183 | 'stroke-width': 3, 184 | 'stroke-linecap': 'butt', 185 | 'stroke-dasharray': 0 186 | }); 187 | 188 | markerTrails.exit().remove(); 189 | 190 | var markers = this.$.markers.selectAll(this.selector('marker')).data(data); 191 | 192 | markers.enter() 193 | .append('g') 194 | .attr({ 195 | 'class': this.cx('marker'), 196 | 'visibility': 'visible' 197 | }) 198 | .append('circle') 199 | .attr({ 200 | 'r': this.options.markerWidth / 2, 201 | 'stroke': 'white', 202 | 'stroke-width': 2, 203 | 'stroke-opacity': 0.9, 204 | 'cursor': 'move' 205 | }); 206 | 207 | markers.exit().remove(); 208 | 209 | markers.append('text').text(function (d) { return d.name; }).attr({ 210 | x: (this.options.markerWidth / 2) + 8, 211 | y: (this.options.markerWidth / 4) - 5, 212 | fill: 'white', 213 | 'font-size': '13px', 214 | }); 215 | 216 | markers.call(this.getDragBehavior()); 217 | 218 | this.dispatch.bindData(data); 219 | this.dispatch.markersUpdated(); 220 | this.dispatch.updateEnd(); 221 | this.dispatch.updateEnd(); 222 | }; 223 | 224 | ColorWheel.prototype.getDragBehavior = function () { 225 | var self = this; 226 | return d3.behavior.drag() 227 | .on('drag', function (d) { 228 | var pos, hs, p, dragHue, startingHue, theta1, theta2; 229 | pos = self.pointOnCircle(d3.event.x, d3.event.y); 230 | hs = self.getHSFromSVGPosition(pos.x, pos.y); 231 | d.color.h = hs.h; 232 | d.color.s = hs.s; 233 | p = self.svgToCartesian(d3.event.x, d3.event.y); 234 | dragHue = ((Math.atan2(p.y, p.x) * 180 / Math.PI) + 720) % 360; 235 | startingHue = parseFloat(d3.select(this).attr('data-startingHue')); 236 | theta1 = (360 + startingHue - dragHue) % 360; 237 | theta2 = (360 + dragHue - startingHue) % 360; 238 | self.updateHarmony(this, theta1 < theta2 ? -1 * theta1 : theta2); 239 | }) 240 | .on('dragstart', function () { 241 | self.getVisibleMarkers().attr('data-startingHue', function (d) { 242 | return ColorWheel.scientificToArtisticSmooth(d.color.h); 243 | }); 244 | }) 245 | .on('dragend', function () { 246 | var visibleMarkers = self.getVisibleMarkers(); 247 | visibleMarkers.attr('data-startingHue', null); 248 | if (self.currentMode === ColorWheel.modes.ANALOGOUS) { 249 | var rootTheta = ColorWheel.scientificToArtisticSmooth(d3.select(visibleMarkers[0][0]).datum().color.h); 250 | if (visibleMarkers[0].length > 1) { 251 | var neighborTheta = ColorWheel.scientificToArtisticSmooth(d3.select(visibleMarkers[0][1]).datum().color.h); 252 | self.slice = (360 + neighborTheta - rootTheta) % 360; 253 | } 254 | } 255 | self.dispatch.updateEnd(); 256 | }); 257 | }; 258 | 259 | ColorWheel.prototype.getMarkers = function () { 260 | return this.container.selectAll(this.selector('marker')); 261 | }, 262 | 263 | ColorWheel.prototype.getVisibleMarkers = function () { 264 | return this.container.selectAll(this.selector('marker') + '[visibility=visible]'); 265 | }, 266 | 267 | ColorWheel.prototype.getRootMarker = function () { 268 | return this.container.select(this.selector('marker') + '[visibility=visible]'); 269 | }, 270 | 271 | ColorWheel.prototype.setHarmony = function () { 272 | var self = this; 273 | var root = this.getRootMarker(); 274 | var offsetFactor = 0.08; 275 | this.getMarkers().classed('root', false); 276 | if (! root.empty()) { 277 | var rootHue = ColorWheel.scientificToArtisticSmooth(root.datum().color.h); 278 | switch (this.currentMode) { 279 | case ColorWheel.modes.ANALOGOUS: 280 | root.classed('root', true); 281 | this.getVisibleMarkers().each(function (d, i) { 282 | var newHue = (rootHue + (ColorWheel.markerDistance(i) * self.slice) + 720) % 360; 283 | d.color.h = ColorWheel.artisticToScientificSmooth(newHue); 284 | d.color.s = 1; 285 | d.color.v = 1; 286 | }); 287 | break; 288 | case ColorWheel.modes.MONOCHROMATIC: 289 | case ColorWheel.modes.SHADES: 290 | this.getVisibleMarkers().each(function (d, i) { 291 | d.color.h = ColorWheel.artisticToScientificSmooth(rootHue); 292 | if (self.currentMode == ColorWheel.modes.SHADES) { 293 | d.color.s = 1; 294 | d.color.v = 0.25 + 0.75 * Math.random(); 295 | } else { 296 | d.color.s = 1 - (0.15 * i + Math.random() * 0.1); 297 | d.color.v = 0.75 + 0.25 * Math.random(); 298 | } 299 | }); 300 | break; 301 | case ColorWheel.modes.COMPLEMENTARY: 302 | this.getVisibleMarkers().each(function (d, i) { 303 | var newHue = (rootHue + ((i % 2) * 180) + 720) % 360; 304 | d.color.h = ColorWheel.artisticToScientificSmooth(newHue); 305 | d.color.s = 1 - offsetFactor * ColorWheel.stepFn(2)(i); 306 | d.color.v = 1; 307 | }); 308 | break; 309 | case ColorWheel.modes.TRIAD: 310 | this.getVisibleMarkers().each(function (d, i) { 311 | var newHue = (rootHue + ((i % 3) * 120) + 720) % 360; 312 | d.color.h = ColorWheel.artisticToScientificSmooth(newHue); 313 | d.color.s = 1 - offsetFactor * ColorWheel.stepFn(3)(i); 314 | d.color.v = 1; 315 | }); 316 | break; 317 | case ColorWheel.modes.TETRAD: 318 | this.getVisibleMarkers().each(function (d, i) { 319 | var newHue = (rootHue + ((i % 4) * 90) + 720) % 360; 320 | d.color.h = ColorWheel.artisticToScientificSmooth(newHue); 321 | d.color.s = 1 - offsetFactor * ColorWheel.stepFn(4)(i); 322 | d.color.v = 1; 323 | }); 324 | break; 325 | } 326 | this.dispatch.markersUpdated(); 327 | } 328 | }; 329 | 330 | ColorWheel.prototype.updateHarmony = function (target, theta) { 331 | var self = this; 332 | var root = this.getRootMarker(); 333 | var rootHue = ColorWheel.scientificToArtisticSmooth(root.datum().color.h); 334 | 335 | // Find out how far the dragging marker is from the root marker. 336 | var cursor = target; 337 | var counter = 0; 338 | while (cursor = cursor.previousSibling) { 339 | if (cursor.getAttribute('visibility') !== 'hidden') { 340 | counter++; 341 | } 342 | } 343 | var targetDistance = ColorWheel.markerDistance(counter); 344 | 345 | switch (this.currentMode) { 346 | case ColorWheel.modes.ANALOGOUS: 347 | this.getVisibleMarkers().each(function (d, i) { 348 | var startingHue = parseFloat(d3.select(this).attr('data-startingHue')); 349 | var slices = 1; 350 | if (targetDistance !== 0) { 351 | slices = ColorWheel.markerDistance(i) / targetDistance; 352 | } 353 | if (this !== target) { 354 | d.color.h = ColorWheel.artisticToScientificSmooth( 355 | (startingHue + (slices * theta) + 720) % 360 356 | ); 357 | } 358 | }); 359 | break; 360 | case ColorWheel.modes.MONOCHROMATIC: 361 | case ColorWheel.modes.COMPLEMENTARY: 362 | case ColorWheel.modes.SHADES: 363 | case ColorWheel.modes.TRIAD: 364 | case ColorWheel.modes.TETRAD: 365 | this.getVisibleMarkers().each(function (d) { 366 | var startingHue = parseFloat(d3.select(this).attr('data-startingHue')); 367 | d.color.h = ColorWheel.artisticToScientificSmooth((startingHue + theta + 720) % 360); 368 | if (self.currentMode == ColorWheel.modes.SHADES) { 369 | d.color.s = 1; 370 | } 371 | }); 372 | break; 373 | } 374 | self.dispatch.markersUpdated(); 375 | }; 376 | 377 | ColorWheel.prototype.svgToCartesian = function (x, y) { 378 | return {'x': x - this.options.radius, 'y': this.options.radius - y}; 379 | }; 380 | 381 | ColorWheel.prototype.cartesianToSVG = function (x, y) { 382 | return {'x': x + this.options.radius, 'y': this.options.radius - y}; 383 | }; 384 | 385 | // Given an SVG point (x, y), returns the closest point to (x, y) still in the circle. 386 | ColorWheel.prototype.pointOnCircle = function (x, y) { 387 | var p = this.svgToCartesian(x, y); 388 | if (Math.sqrt(p.x * p.x + p.y * p.y) <= this.options.radius) { 389 | return {'x': x, 'y': y}; 390 | } else { 391 | var theta = Math.atan2(p.y, p.x); 392 | var x_ = this.options.radius * Math.cos(theta); 393 | var y_ = this.options.radius * Math.sin(theta); 394 | return this.cartesianToSVG(x_, y_); 395 | } 396 | }; 397 | 398 | // Get a coordinate pair from hue and saturation components. 399 | ColorWheel.prototype.getSVGPositionFromHS = function (h, s) { 400 | var hue = ColorWheel.scientificToArtisticSmooth(h); 401 | var theta = hue * (Math.PI / 180); 402 | var y = Math.sin(theta) * this.options.radius * s; 403 | var x = Math.cos(theta) * this.options.radius * s; 404 | return this.cartesianToSVG(x, y); 405 | }; 406 | 407 | // Inverse of getSVGPositionFromHS 408 | ColorWheel.prototype.getHSFromSVGPosition = function (x, y) { 409 | var p = this.svgToCartesian(x, y); 410 | var theta = Math.atan2(p.y, p.x); 411 | var artisticHue = (theta * (180 / Math.PI) + 360) % 360; 412 | var scientificHue = ColorWheel.artisticToScientificSmooth(artisticHue); 413 | var s = Math.min(Math.sqrt(p.x*p.x + p.y*p.y) / this.options.radius, 1); 414 | return {h: scientificHue, s: s}; 415 | }; 416 | 417 | ColorWheel.prototype._getColorsAs = function (toFunk) { 418 | return this.getVisibleMarkers().data() 419 | .sort(function (a, b) { 420 | return a.color.h - b.color.h; 421 | }) 422 | .map(function (d) { 423 | return tinycolor({h: d.color.h, s: d.color.s, v: d.color.v})[toFunk](); 424 | }); 425 | }; 426 | 427 | ColorWheel.prototype.getColorsAsHEX = function () { 428 | return this._getColorsAs('toHexString'); 429 | }; 430 | 431 | ColorWheel.prototype.getColorsAsRGB = function () { 432 | return this._getColorsAs('toRgbString'); 433 | }; 434 | 435 | ColorWheel.prototype.getColorsAsHSL = function () { 436 | return this._getColorsAs('toHslString'); 437 | }; 438 | 439 | ColorWheel.prototype.getColorsAsHSV = function () { 440 | return this._getColorsAs('toHsvString'); 441 | }; 442 | 443 | ColorWheel.prototype.setMode = function (mode) { 444 | ColorWheel.checkIfModeExists(mode); 445 | this.currentMode = mode; 446 | this.setHarmony(); 447 | this.dispatch.updateEnd(); 448 | this.dispatch.modeChanged(); 449 | }; 450 | 451 | // Utility for building internal classname strings 452 | ColorWheel.prototype.cx = function (className) { 453 | return this.options.baseClassName + '-' + className; 454 | }; 455 | 456 | ColorWheel.prototype.selector = function (className) { 457 | return '.' + this.cx(className); 458 | }; 459 | 460 | // These modes define a relationship between the colors on a color wheel, 461 | // based on "science". 462 | ColorWheel.modes = { 463 | CUSTOM: 'Custom', 464 | ANALOGOUS: 'Analogous', 465 | COMPLEMENTARY: 'Complementary', 466 | TRIAD: 'Triad', 467 | TETRAD: 'Tetrad', 468 | MONOCHROMATIC: 'Monochromatic', 469 | SHADES: 'Shades', 470 | }; 471 | 472 | // Simple range mapping function 473 | // For example, mapRange(5, 0, 10, 0, 100) = 50 474 | ColorWheel.mapRange = function (value, fromLower, fromUpper, toLower, toUpper) { 475 | return (toLower + (value - fromLower) * ((toUpper - toLower) / (fromUpper - fromLower))); 476 | }; 477 | 478 | // These two functions are ripped straight from Kuler source. 479 | // They convert between scientific hue to the color wheel's "artistic" hue. 480 | ColorWheel.artisticToScientificSmooth = function (hue) { 481 | return ( 482 | hue < 60 ? hue * (35 / 60): 483 | hue < 122 ? this.mapRange(hue, 60, 122, 35, 60): 484 | hue < 165 ? this.mapRange(hue, 122, 165, 60, 120): 485 | hue < 218 ? this.mapRange(hue, 165, 218, 120, 180): 486 | hue < 275 ? this.mapRange(hue, 218, 275, 180, 240): 487 | hue < 330 ? this.mapRange(hue, 275, 330, 240, 300): 488 | this.mapRange(hue, 330, 360, 300, 360)); 489 | }; 490 | 491 | ColorWheel.scientificToArtisticSmooth = function (hue) { 492 | return ( 493 | hue < 35 ? hue * (60 / 35): 494 | hue < 60 ? this.mapRange(hue, 35, 60, 60, 122): 495 | hue < 120 ? this.mapRange(hue, 60, 120, 122, 165): 496 | hue < 180 ? this.mapRange(hue, 120, 180, 165, 218): 497 | hue < 240 ? this.mapRange(hue, 180, 240, 218, 275): 498 | hue < 300 ? this.mapRange(hue, 240, 300, 275, 330): 499 | this.mapRange(hue, 300, 360, 330, 360)); 500 | }; 501 | 502 | // Get a hex string from hue and sat components, with 100% brightness. 503 | ColorWheel.hexFromHS = function (h, s) { 504 | return tinycolor({h: h, s: s, v: 1}).toHexString(); 505 | }; 506 | 507 | // Used to determine the distance from the root marker. 508 | // (The first DOM node with marker class) 509 | // Domain: [0, 1, 2, 3, 4, ... ] 510 | // Range: [0, 1, -1, 2, -2, ... ] 511 | ColorWheel.markerDistance = function (i) { 512 | return Math.ceil(i / 2) * Math.pow(-1, i + 1); 513 | }; 514 | 515 | // Returns a step function with the given base. 516 | // e.g. with base = 3, returns a function with this domain/range: 517 | // Domain: [0, 1, 2, 3, 4, 5, ...] 518 | // Range: [0, 0, 0, 1, 1, 1, ...] 519 | ColorWheel.stepFn = function (base) { 520 | return function (x) { return Math.floor(x / base); } 521 | }; 522 | 523 | ColorWheel.markerID = function (i, len) { 524 | return (i + len)%len; 525 | }; 526 | 527 | // Throw an error if someone gives us a bad mode. 528 | ColorWheel.checkIfModeExists = function (mode) { 529 | var modeExists = false; 530 | for (var possibleMode in ColorWheel.modes) { 531 | if (ColorWheel.modes[possibleMode] == mode) { 532 | modeExists = true; 533 | break; 534 | } 535 | } 536 | if (! modeExists) { 537 | throw Error('Invalid mode specified: ' + mode); 538 | } 539 | return true; 540 | }; 541 | 542 | // For creating custom markers 543 | ColorWheel.createMarker = function (color, name, show) { 544 | return new ColorWheelMarkerDatum(color, name, show); 545 | }; 546 | 547 | // Provide a plugin interface 548 | ColorWheel.plugins = {}; 549 | 550 | ColorWheel.extend = function (pluginId, pluginFn) { 551 | this.plugins[pluginId] = pluginFn; 552 | }; 553 | 554 | return ColorWheel; 555 | })); 556 | -------------------------------------------------------------------------------- /web_src/resources/jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license 2 | //@ sourceMappingURL=jquery.min.map 3 | */ 4 | (function(e,undefined){var t,n,r=typeof undefined,i=e.location,o=e.document,s=o.documentElement,a=e.jQuery,u=e.$,l={},c=[],p="2.0.3",f=c.concat,h=c.push,d=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,x=function(e,n){return new x.fn.init(e,n,t)},b=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,w=/\S+/g,T=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,k=/^-ms-/,N=/-([\da-z])/gi,E=function(e,t){return t.toUpperCase()},S=function(){o.removeEventListener("DOMContentLoaded",S,!1),e.removeEventListener("load",S,!1),x.ready()};x.fn=x.prototype={jquery:p,constructor:x,init:function(e,t,n){var r,i;if(!e)return this;if("string"==typeof e){if(r="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:T.exec(e),!r||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof x?t[0]:t,x.merge(this,x.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:o,!0)),C.test(r[1])&&x.isPlainObject(t))for(r in t)x.isFunction(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return i=o.getElementById(r[2]),i&&i.parentNode&&(this.length=1,this[0]=i),this.context=o,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):x.isFunction(e)?n.ready(e):(e.selector!==undefined&&(this.selector=e.selector,this.context=e.context),x.makeArray(e,this))},selector:"",length:0,toArray:function(){return d.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return x.each(this,e,t)},ready:function(e){return x.ready.promise().done(e),this},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(x.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:h,sort:[].sort,splice:[].splice},x.fn.init.prototype=x.fn,x.extend=x.fn.extend=function(){var e,t,n,r,i,o,s=arguments[0]||{},a=1,u=arguments.length,l=!1;for("boolean"==typeof s&&(l=s,s=arguments[1]||{},a=2),"object"==typeof s||x.isFunction(s)||(s={}),u===a&&(s=this,--a);u>a;a++)if(null!=(e=arguments[a]))for(t in e)n=s[t],r=e[t],s!==r&&(l&&r&&(x.isPlainObject(r)||(i=x.isArray(r)))?(i?(i=!1,o=n&&x.isArray(n)?n:[]):o=n&&x.isPlainObject(n)?n:{},s[t]=x.extend(l,o,r)):r!==undefined&&(s[t]=r));return s},x.extend({expando:"jQuery"+(p+Math.random()).replace(/\D/g,""),noConflict:function(t){return e.$===x&&(e.$=u),t&&e.jQuery===x&&(e.jQuery=a),x},isReady:!1,readyWait:1,holdReady:function(e){e?x.readyWait++:x.ready(!0)},ready:function(e){(e===!0?--x.readyWait:x.isReady)||(x.isReady=!0,e!==!0&&--x.readyWait>0||(n.resolveWith(o,[x]),x.fn.trigger&&x(o).trigger("ready").off("ready")))},isFunction:function(e){return"function"===x.type(e)},isArray:Array.isArray,isWindow:function(e){return null!=e&&e===e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[m.call(e)]||"object":typeof e},isPlainObject:function(e){if("object"!==x.type(e)||e.nodeType||x.isWindow(e))return!1;try{if(e.constructor&&!y.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(t){return!1}return!0},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||o;var r=C.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=x.buildFragment([e],t,i),i&&x(i).remove(),x.merge([],r.childNodes))},parseJSON:JSON.parse,parseXML:function(e){var t,n;if(!e||"string"!=typeof e)return null;try{n=new DOMParser,t=n.parseFromString(e,"text/xml")}catch(r){t=undefined}return(!t||t.getElementsByTagName("parsererror").length)&&x.error("Invalid XML: "+e),t},noop:function(){},globalEval:function(e){var t,n=eval;e=x.trim(e),e&&(1===e.indexOf("use strict")?(t=o.createElement("script"),t.text=e,o.head.appendChild(t).parentNode.removeChild(t)):n(e))},camelCase:function(e){return e.replace(k,"ms-").replace(N,E)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,t,n){var r,i=0,o=e.length,s=j(e);if(n){if(s){for(;o>i;i++)if(r=t.apply(e[i],n),r===!1)break}else for(i in e)if(r=t.apply(e[i],n),r===!1)break}else if(s){for(;o>i;i++)if(r=t.call(e[i],i,e[i]),r===!1)break}else for(i in e)if(r=t.call(e[i],i,e[i]),r===!1)break;return e},trim:function(e){return null==e?"":v.call(e)},makeArray:function(e,t){var n=t||[];return null!=e&&(j(Object(e))?x.merge(n,"string"==typeof e?[e]:e):h.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:g.call(t,e,n)},merge:function(e,t){var n=t.length,r=e.length,i=0;if("number"==typeof n)for(;n>i;i++)e[r++]=t[i];else while(t[i]!==undefined)e[r++]=t[i++];return e.length=r,e},grep:function(e,t,n){var r,i=[],o=0,s=e.length;for(n=!!n;s>o;o++)r=!!t(e[o],o),n!==r&&i.push(e[o]);return i},map:function(e,t,n){var r,i=0,o=e.length,s=j(e),a=[];if(s)for(;o>i;i++)r=t(e[i],i,n),null!=r&&(a[a.length]=r);else for(i in e)r=t(e[i],i,n),null!=r&&(a[a.length]=r);return f.apply([],a)},guid:1,proxy:function(e,t){var n,r,i;return"string"==typeof t&&(n=e[t],t=e,e=n),x.isFunction(e)?(r=d.call(arguments,2),i=function(){return e.apply(t||this,r.concat(d.call(arguments)))},i.guid=e.guid=e.guid||x.guid++,i):undefined},access:function(e,t,n,r,i,o,s){var a=0,u=e.length,l=null==n;if("object"===x.type(n)){i=!0;for(a in n)x.access(e,t,a,n[a],!0,o,s)}else if(r!==undefined&&(i=!0,x.isFunction(r)||(s=!0),l&&(s?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(x(e),n)})),t))for(;u>a;a++)t(e[a],n,s?r:r.call(e[a],a,t(e[a],n)));return i?e:l?t.call(e):u?t(e[0],n):o},now:Date.now,swap:function(e,t,n,r){var i,o,s={};for(o in t)s[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=s[o];return i}}),x.ready.promise=function(t){return n||(n=x.Deferred(),"complete"===o.readyState?setTimeout(x.ready):(o.addEventListener("DOMContentLoaded",S,!1),e.addEventListener("load",S,!1))),n.promise(t)},x.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){l["[object "+t+"]"]=t.toLowerCase()});function j(e){var t=e.length,n=x.type(e);return x.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}t=x(o),function(e,undefined){var t,n,r,i,o,s,a,u,l,c,p,f,h,d,g,m,y,v="sizzle"+-new Date,b=e.document,w=0,T=0,C=st(),k=st(),N=st(),E=!1,S=function(e,t){return e===t?(E=!0,0):0},j=typeof undefined,D=1<<31,A={}.hasOwnProperty,L=[],q=L.pop,H=L.push,O=L.push,F=L.slice,P=L.indexOf||function(e){var t=0,n=this.length;for(;n>t;t++)if(this[t]===e)return t;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",W="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",$=W.replace("w","w#"),B="\\["+M+"*("+W+")"+M+"*(?:([*^$|!~]?=)"+M+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+$+")|)|)"+M+"*\\]",I=":("+W+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+B.replace(3,8)+")*)|.*)\\)|)",z=RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=RegExp("^"+M+"*,"+M+"*"),X=RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=RegExp(M+"*[+~]"),Y=RegExp("="+M+"*([^\\]'\"]*)"+M+"*\\]","g"),V=RegExp(I),G=RegExp("^"+$+"$"),J={ID:RegExp("^#("+W+")"),CLASS:RegExp("^\\.("+W+")"),TAG:RegExp("^("+W.replace("w","w*")+")"),ATTR:RegExp("^"+B),PSEUDO:RegExp("^"+I),CHILD:RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:RegExp("^(?:"+R+")$","i"),needsContext:RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Q=/^[^{]+\{\s*\[native \w/,K=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,Z=/^(?:input|select|textarea|button)$/i,et=/^h\d$/i,tt=/'|\\/g,nt=RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),rt=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:0>r?String.fromCharCode(r+65536):String.fromCharCode(55296|r>>10,56320|1023&r)};try{O.apply(L=F.call(b.childNodes),b.childNodes),L[b.childNodes.length].nodeType}catch(it){O={apply:L.length?function(e,t){H.apply(e,F.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function ot(e,t,r,i){var o,s,a,u,l,f,g,m,x,w;if((t?t.ownerDocument||t:b)!==p&&c(t),t=t||p,r=r||[],!e||"string"!=typeof e)return r;if(1!==(u=t.nodeType)&&9!==u)return[];if(h&&!i){if(o=K.exec(e))if(a=o[1]){if(9===u){if(s=t.getElementById(a),!s||!s.parentNode)return r;if(s.id===a)return r.push(s),r}else if(t.ownerDocument&&(s=t.ownerDocument.getElementById(a))&&y(t,s)&&s.id===a)return r.push(s),r}else{if(o[2])return O.apply(r,t.getElementsByTagName(e)),r;if((a=o[3])&&n.getElementsByClassName&&t.getElementsByClassName)return O.apply(r,t.getElementsByClassName(a)),r}if(n.qsa&&(!d||!d.test(e))){if(m=g=v,x=t,w=9===u&&e,1===u&&"object"!==t.nodeName.toLowerCase()){f=gt(e),(g=t.getAttribute("id"))?m=g.replace(tt,"\\$&"):t.setAttribute("id",m),m="[id='"+m+"'] ",l=f.length;while(l--)f[l]=m+mt(f[l]);x=U.test(e)&&t.parentNode||t,w=f.join(",")}if(w)try{return O.apply(r,x.querySelectorAll(w)),r}catch(T){}finally{g||t.removeAttribute("id")}}}return kt(e.replace(z,"$1"),t,r,i)}function st(){var e=[];function t(n,r){return e.push(n+=" ")>i.cacheLength&&delete t[e.shift()],t[n]=r}return t}function at(e){return e[v]=!0,e}function ut(e){var t=p.createElement("div");try{return!!e(t)}catch(n){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function lt(e,t){var n=e.split("|"),r=e.length;while(r--)i.attrHandle[n[r]]=t}function ct(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&(~t.sourceIndex||D)-(~e.sourceIndex||D);if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function pt(e){return function(t){var n=t.nodeName.toLowerCase();return"input"===n&&t.type===e}}function ft(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function ht(e){return at(function(t){return t=+t,at(function(n,r){var i,o=e([],n.length,t),s=o.length;while(s--)n[i=o[s]]&&(n[i]=!(r[i]=n[i]))})})}s=ot.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?"HTML"!==t.nodeName:!1},n=ot.support={},c=ot.setDocument=function(e){var t=e?e.ownerDocument||e:b,r=t.defaultView;return t!==p&&9===t.nodeType&&t.documentElement?(p=t,f=t.documentElement,h=!s(t),r&&r.attachEvent&&r!==r.top&&r.attachEvent("onbeforeunload",function(){c()}),n.attributes=ut(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=ut(function(e){return e.appendChild(t.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=ut(function(e){return e.innerHTML="
",e.firstChild.className="i",2===e.getElementsByClassName("i").length}),n.getById=ut(function(e){return f.appendChild(e).id=v,!t.getElementsByName||!t.getElementsByName(v).length}),n.getById?(i.find.ID=function(e,t){if(typeof t.getElementById!==j&&h){var n=t.getElementById(e);return n&&n.parentNode?[n]:[]}},i.filter.ID=function(e){var t=e.replace(nt,rt);return function(e){return e.getAttribute("id")===t}}):(delete i.find.ID,i.filter.ID=function(e){var t=e.replace(nt,rt);return function(e){var n=typeof e.getAttributeNode!==j&&e.getAttributeNode("id");return n&&n.value===t}}),i.find.TAG=n.getElementsByTagName?function(e,t){return typeof t.getElementsByTagName!==j?t.getElementsByTagName(e):undefined}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},i.find.CLASS=n.getElementsByClassName&&function(e,t){return typeof t.getElementsByClassName!==j&&h?t.getElementsByClassName(e):undefined},g=[],d=[],(n.qsa=Q.test(t.querySelectorAll))&&(ut(function(e){e.innerHTML="",e.querySelectorAll("[selected]").length||d.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll(":checked").length||d.push(":checked")}),ut(function(e){var n=t.createElement("input");n.setAttribute("type","hidden"),e.appendChild(n).setAttribute("t",""),e.querySelectorAll("[t^='']").length&&d.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll(":enabled").length||d.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),d.push(",.*:")})),(n.matchesSelector=Q.test(m=f.webkitMatchesSelector||f.mozMatchesSelector||f.oMatchesSelector||f.msMatchesSelector))&&ut(function(e){n.disconnectedMatch=m.call(e,"div"),m.call(e,"[s!='']:x"),g.push("!=",I)}),d=d.length&&RegExp(d.join("|")),g=g.length&&RegExp(g.join("|")),y=Q.test(f.contains)||f.compareDocumentPosition?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},S=f.compareDocumentPosition?function(e,r){if(e===r)return E=!0,0;var i=r.compareDocumentPosition&&e.compareDocumentPosition&&e.compareDocumentPosition(r);return i?1&i||!n.sortDetached&&r.compareDocumentPosition(e)===i?e===t||y(b,e)?-1:r===t||y(b,r)?1:l?P.call(l,e)-P.call(l,r):0:4&i?-1:1:e.compareDocumentPosition?-1:1}:function(e,n){var r,i=0,o=e.parentNode,s=n.parentNode,a=[e],u=[n];if(e===n)return E=!0,0;if(!o||!s)return e===t?-1:n===t?1:o?-1:s?1:l?P.call(l,e)-P.call(l,n):0;if(o===s)return ct(e,n);r=e;while(r=r.parentNode)a.unshift(r);r=n;while(r=r.parentNode)u.unshift(r);while(a[i]===u[i])i++;return i?ct(a[i],u[i]):a[i]===b?-1:u[i]===b?1:0},t):p},ot.matches=function(e,t){return ot(e,null,null,t)},ot.matchesSelector=function(e,t){if((e.ownerDocument||e)!==p&&c(e),t=t.replace(Y,"='$1']"),!(!n.matchesSelector||!h||g&&g.test(t)||d&&d.test(t)))try{var r=m.call(e,t);if(r||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(i){}return ot(t,p,null,[e]).length>0},ot.contains=function(e,t){return(e.ownerDocument||e)!==p&&c(e),y(e,t)},ot.attr=function(e,t){(e.ownerDocument||e)!==p&&c(e);var r=i.attrHandle[t.toLowerCase()],o=r&&A.call(i.attrHandle,t.toLowerCase())?r(e,t,!h):undefined;return o===undefined?n.attributes||!h?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null:o},ot.error=function(e){throw Error("Syntax error, unrecognized expression: "+e)},ot.uniqueSort=function(e){var t,r=[],i=0,o=0;if(E=!n.detectDuplicates,l=!n.sortStable&&e.slice(0),e.sort(S),E){while(t=e[o++])t===e[o]&&(i=r.push(o));while(i--)e.splice(r[i],1)}return e},o=ot.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r];r++)n+=o(t);return n},i=ot.selectors={cacheLength:50,createPseudo:at,match:J,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(nt,rt),e[3]=(e[4]||e[5]||"").replace(nt,rt),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||ot.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&ot.error(e[0]),e},PSEUDO:function(e){var t,n=!e[5]&&e[2];return J.CHILD.test(e[0])?null:(e[3]&&e[4]!==undefined?e[2]=e[4]:n&&V.test(n)&&(t=gt(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(nt,rt).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=C[e+" "];return t||(t=RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&C(e,function(e){return t.test("string"==typeof e.className&&e.className||typeof e.getAttribute!==j&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=ot.attr(r,e);return null==i?"!="===t:t?(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i+" ").indexOf(n)>-1:"|="===t?i===n||i.slice(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),s="last"!==e.slice(-4),a="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,p,f,h,d,g=o!==s?"nextSibling":"previousSibling",m=t.parentNode,y=a&&t.nodeName.toLowerCase(),x=!u&&!a;if(m){if(o){while(g){p=t;while(p=p[g])if(a?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;d=g="only"===e&&!d&&"nextSibling"}return!0}if(d=[s?m.firstChild:m.lastChild],s&&x){c=m[v]||(m[v]={}),l=c[e]||[],h=l[0]===w&&l[1],f=l[0]===w&&l[2],p=h&&m.childNodes[h];while(p=++h&&p&&p[g]||(f=h=0)||d.pop())if(1===p.nodeType&&++f&&p===t){c[e]=[w,h,f];break}}else if(x&&(l=(t[v]||(t[v]={}))[e])&&l[0]===w)f=l[1];else while(p=++h&&p&&p[g]||(f=h=0)||d.pop())if((a?p.nodeName.toLowerCase()===y:1===p.nodeType)&&++f&&(x&&((p[v]||(p[v]={}))[e]=[w,f]),p===t))break;return f-=i,f===r||0===f%r&&f/r>=0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||ot.error("unsupported pseudo: "+e);return r[v]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?at(function(e,n){var i,o=r(e,t),s=o.length;while(s--)i=P.call(e,o[s]),e[i]=!(n[i]=o[s])}):function(e){return r(e,0,n)}):r}},pseudos:{not:at(function(e){var t=[],n=[],r=a(e.replace(z,"$1"));return r[v]?at(function(e,t,n,i){var o,s=r(e,null,i,[]),a=e.length;while(a--)(o=s[a])&&(e[a]=!(t[a]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),!n.pop()}}),has:at(function(e){return function(t){return ot(e,t).length>0}}),contains:at(function(e){return function(t){return(t.textContent||t.innerText||o(t)).indexOf(e)>-1}}),lang:at(function(e){return G.test(e||"")||ot.error("unsupported lang: "+e),e=e.replace(nt,rt).toLowerCase(),function(t){var n;do if(n=h?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return n=n.toLowerCase(),n===e||0===n.indexOf(e+"-");while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===f},focus:function(e){return e===p.activeElement&&(!p.hasFocus||p.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeName>"@"||3===e.nodeType||4===e.nodeType)return!1;return!0},parent:function(e){return!i.pseudos.empty(e)},header:function(e){return et.test(e.nodeName)},input:function(e){return Z.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||t.toLowerCase()===e.type)},first:ht(function(){return[0]}),last:ht(function(e,t){return[t-1]}),eq:ht(function(e,t,n){return[0>n?n+t:n]}),even:ht(function(e,t){var n=0;for(;t>n;n+=2)e.push(n);return e}),odd:ht(function(e,t){var n=1;for(;t>n;n+=2)e.push(n);return e}),lt:ht(function(e,t,n){var r=0>n?n+t:n;for(;--r>=0;)e.push(r);return e}),gt:ht(function(e,t,n){var r=0>n?n+t:n;for(;t>++r;)e.push(r);return e})}},i.pseudos.nth=i.pseudos.eq;for(t in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})i.pseudos[t]=pt(t);for(t in{submit:!0,reset:!0})i.pseudos[t]=ft(t);function dt(){}dt.prototype=i.filters=i.pseudos,i.setFilters=new dt;function gt(e,t){var n,r,o,s,a,u,l,c=k[e+" "];if(c)return t?0:c.slice(0);a=e,u=[],l=i.preFilter;while(a){(!n||(r=_.exec(a)))&&(r&&(a=a.slice(r[0].length)||a),u.push(o=[])),n=!1,(r=X.exec(a))&&(n=r.shift(),o.push({value:n,type:r[0].replace(z," ")}),a=a.slice(n.length));for(s in i.filter)!(r=J[s].exec(a))||l[s]&&!(r=l[s](r))||(n=r.shift(),o.push({value:n,type:s,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?ot.error(e):k(e,u).slice(0)}function mt(e){var t=0,n=e.length,r="";for(;n>t;t++)r+=e[t].value;return r}function yt(e,t,n){var i=t.dir,o=n&&"parentNode"===i,s=T++;return t.first?function(t,n,r){while(t=t[i])if(1===t.nodeType||o)return e(t,n,r)}:function(t,n,a){var u,l,c,p=w+" "+s;if(a){while(t=t[i])if((1===t.nodeType||o)&&e(t,n,a))return!0}else while(t=t[i])if(1===t.nodeType||o)if(c=t[v]||(t[v]={}),(l=c[i])&&l[0]===p){if((u=l[1])===!0||u===r)return u===!0}else if(l=c[i]=[p],l[1]=e(t,n,a)||r,l[1]===!0)return!0}}function vt(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function xt(e,t,n,r,i){var o,s=[],a=0,u=e.length,l=null!=t;for(;u>a;a++)(o=e[a])&&(!n||n(o,r,i))&&(s.push(o),l&&t.push(a));return s}function bt(e,t,n,r,i,o){return r&&!r[v]&&(r=bt(r)),i&&!i[v]&&(i=bt(i,o)),at(function(o,s,a,u){var l,c,p,f=[],h=[],d=s.length,g=o||Ct(t||"*",a.nodeType?[a]:a,[]),m=!e||!o&&t?g:xt(g,f,e,a,u),y=n?i||(o?e:d||r)?[]:s:m;if(n&&n(m,y,a,u),r){l=xt(y,h),r(l,[],a,u),c=l.length;while(c--)(p=l[c])&&(y[h[c]]=!(m[h[c]]=p))}if(o){if(i||e){if(i){l=[],c=y.length;while(c--)(p=y[c])&&l.push(m[c]=p);i(null,y=[],l,u)}c=y.length;while(c--)(p=y[c])&&(l=i?P.call(o,p):f[c])>-1&&(o[l]=!(s[l]=p))}}else y=xt(y===s?y.splice(d,y.length):y),i?i(null,s,y,u):O.apply(s,y)})}function wt(e){var t,n,r,o=e.length,s=i.relative[e[0].type],a=s||i.relative[" "],l=s?1:0,c=yt(function(e){return e===t},a,!0),p=yt(function(e){return P.call(t,e)>-1},a,!0),f=[function(e,n,r){return!s&&(r||n!==u)||((t=n).nodeType?c(e,n,r):p(e,n,r))}];for(;o>l;l++)if(n=i.relative[e[l].type])f=[yt(vt(f),n)];else{if(n=i.filter[e[l].type].apply(null,e[l].matches),n[v]){for(r=++l;o>r;r++)if(i.relative[e[r].type])break;return bt(l>1&&vt(f),l>1&&mt(e.slice(0,l-1).concat({value:" "===e[l-2].type?"*":""})).replace(z,"$1"),n,r>l&&wt(e.slice(l,r)),o>r&&wt(e=e.slice(r)),o>r&&mt(e))}f.push(n)}return vt(f)}function Tt(e,t){var n=0,o=t.length>0,s=e.length>0,a=function(a,l,c,f,h){var d,g,m,y=[],v=0,x="0",b=a&&[],T=null!=h,C=u,k=a||s&&i.find.TAG("*",h&&l.parentNode||l),N=w+=null==C?1:Math.random()||.1;for(T&&(u=l!==p&&l,r=n);null!=(d=k[x]);x++){if(s&&d){g=0;while(m=e[g++])if(m(d,l,c)){f.push(d);break}T&&(w=N,r=++n)}o&&((d=!m&&d)&&v--,a&&b.push(d))}if(v+=x,o&&x!==v){g=0;while(m=t[g++])m(b,y,l,c);if(a){if(v>0)while(x--)b[x]||y[x]||(y[x]=q.call(f));y=xt(y)}O.apply(f,y),T&&!a&&y.length>0&&v+t.length>1&&ot.uniqueSort(f)}return T&&(w=N,u=C),b};return o?at(a):a}a=ot.compile=function(e,t){var n,r=[],i=[],o=N[e+" "];if(!o){t||(t=gt(e)),n=t.length;while(n--)o=wt(t[n]),o[v]?r.push(o):i.push(o);o=N(e,Tt(i,r))}return o};function Ct(e,t,n){var r=0,i=t.length;for(;i>r;r++)ot(e,t[r],n);return n}function kt(e,t,r,o){var s,u,l,c,p,f=gt(e);if(!o&&1===f.length){if(u=f[0]=f[0].slice(0),u.length>2&&"ID"===(l=u[0]).type&&n.getById&&9===t.nodeType&&h&&i.relative[u[1].type]){if(t=(i.find.ID(l.matches[0].replace(nt,rt),t)||[])[0],!t)return r;e=e.slice(u.shift().value.length)}s=J.needsContext.test(e)?0:u.length;while(s--){if(l=u[s],i.relative[c=l.type])break;if((p=i.find[c])&&(o=p(l.matches[0].replace(nt,rt),U.test(u[0].type)&&t.parentNode||t))){if(u.splice(s,1),e=o.length&&mt(u),!e)return O.apply(r,o),r;break}}}return a(e,f)(o,t,!h,r,U.test(e)),r}n.sortStable=v.split("").sort(S).join("")===v,n.detectDuplicates=E,c(),n.sortDetached=ut(function(e){return 1&e.compareDocumentPosition(p.createElement("div"))}),ut(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||lt("type|href|height|width",function(e,t,n){return n?undefined:e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),n.attributes&&ut(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||lt("value",function(e,t,n){return n||"input"!==e.nodeName.toLowerCase()?undefined:e.defaultValue}),ut(function(e){return null==e.getAttribute("disabled")})||lt(R,function(e,t,n){var r;return n?undefined:(r=e.getAttributeNode(t))&&r.specified?r.value:e[t]===!0?t.toLowerCase():null}),x.find=ot,x.expr=ot.selectors,x.expr[":"]=x.expr.pseudos,x.unique=ot.uniqueSort,x.text=ot.getText,x.isXMLDoc=ot.isXML,x.contains=ot.contains}(e);var D={};function A(e){var t=D[e]={};return x.each(e.match(w)||[],function(e,n){t[n]=!0}),t}x.Callbacks=function(e){e="string"==typeof e?D[e]||A(e):x.extend({},e);var t,n,r,i,o,s,a=[],u=!e.once&&[],l=function(p){for(t=e.memory&&p,n=!0,s=i||0,i=0,o=a.length,r=!0;a&&o>s;s++)if(a[s].apply(p[0],p[1])===!1&&e.stopOnFalse){t=!1;break}r=!1,a&&(u?u.length&&l(u.shift()):t?a=[]:c.disable())},c={add:function(){if(a){var n=a.length;(function s(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&c.has(n)||a.push(n):n&&n.length&&"string"!==r&&s(n)})})(arguments),r?o=a.length:t&&(i=n,l(t))}return this},remove:function(){return a&&x.each(arguments,function(e,t){var n;while((n=x.inArray(t,a,n))>-1)a.splice(n,1),r&&(o>=n&&o--,s>=n&&s--)}),this},has:function(e){return e?x.inArray(e,a)>-1:!(!a||!a.length)},empty:function(){return a=[],o=0,this},disable:function(){return a=u=t=undefined,this},disabled:function(){return!a},lock:function(){return u=undefined,t||c.disable(),this},locked:function(){return!u},fireWith:function(e,t){return!a||n&&!u||(t=t||[],t=[e,t.slice?t.slice():t],r?u.push(t):l(t)),this},fire:function(){return c.fireWith(this,arguments),this},fired:function(){return!!n}};return c},x.extend({Deferred:function(e){var t=[["resolve","done",x.Callbacks("once memory"),"resolved"],["reject","fail",x.Callbacks("once memory"),"rejected"],["notify","progress",x.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return x.Deferred(function(n){x.each(t,function(t,o){var s=o[0],a=x.isFunction(e[t])&&e[t];i[o[1]](function(){var e=a&&a.apply(this,arguments);e&&x.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[s+"With"](this===r?n.promise():this,a?[e]:arguments)})}),e=null}).promise()},promise:function(e){return null!=e?x.extend(e,r):r}},i={};return r.pipe=r.then,x.each(t,function(e,o){var s=o[2],a=o[3];r[o[1]]=s.add,a&&s.add(function(){n=a},t[1^e][2].disable,t[2][2].lock),i[o[0]]=function(){return i[o[0]+"With"](this===i?r:this,arguments),this},i[o[0]+"With"]=s.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=d.call(arguments),r=n.length,i=1!==r||e&&x.isFunction(e.promise)?r:0,o=1===i?e:x.Deferred(),s=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?d.call(arguments):r,n===a?o.notifyWith(t,n):--i||o.resolveWith(t,n)}},a,u,l;if(r>1)for(a=Array(r),u=Array(r),l=Array(r);r>t;t++)n[t]&&x.isFunction(n[t].promise)?n[t].promise().done(s(t,l,n)).fail(o.reject).progress(s(t,u,a)):--i;return i||o.resolveWith(l,n),o.promise()}}),x.support=function(t){var n=o.createElement("input"),r=o.createDocumentFragment(),i=o.createElement("div"),s=o.createElement("select"),a=s.appendChild(o.createElement("option"));return n.type?(n.type="checkbox",t.checkOn=""!==n.value,t.optSelected=a.selected,t.reliableMarginRight=!0,t.boxSizingReliable=!0,t.pixelPosition=!1,n.checked=!0,t.noCloneChecked=n.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!a.disabled,n=o.createElement("input"),n.value="t",n.type="radio",t.radioValue="t"===n.value,n.setAttribute("checked","t"),n.setAttribute("name","t"),r.appendChild(n),t.checkClone=r.cloneNode(!0).cloneNode(!0).lastChild.checked,t.focusinBubbles="onfocusin"in e,i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===i.style.backgroundClip,x(function(){var n,r,s="padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box",a=o.getElementsByTagName("body")[0];a&&(n=o.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",a.appendChild(n).appendChild(i),i.innerHTML="",i.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%",x.swap(a,null!=a.style.zoom?{zoom:1}:{},function(){t.boxSizing=4===i.offsetWidth}),e.getComputedStyle&&(t.pixelPosition="1%"!==(e.getComputedStyle(i,null)||{}).top,t.boxSizingReliable="4px"===(e.getComputedStyle(i,null)||{width:"4px"}).width,r=i.appendChild(o.createElement("div")),r.style.cssText=i.style.cssText=s,r.style.marginRight=r.style.width="0",i.style.width="1px",t.reliableMarginRight=!parseFloat((e.getComputedStyle(r,null)||{}).marginRight)),a.removeChild(n))}),t):t}({});var L,q,H=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,O=/([A-Z])/g;function F(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=x.expando+Math.random()}F.uid=1,F.accepts=function(e){return e.nodeType?1===e.nodeType||9===e.nodeType:!0},F.prototype={key:function(e){if(!F.accepts(e))return 0;var t={},n=e[this.expando];if(!n){n=F.uid++;try{t[this.expando]={value:n},Object.defineProperties(e,t)}catch(r){t[this.expando]=n,x.extend(e,t)}}return this.cache[n]||(this.cache[n]={}),n},set:function(e,t,n){var r,i=this.key(e),o=this.cache[i];if("string"==typeof t)o[t]=n;else if(x.isEmptyObject(o))x.extend(this.cache[i],t);else for(r in t)o[r]=t[r];return o},get:function(e,t){var n=this.cache[this.key(e)];return t===undefined?n:n[t]},access:function(e,t,n){var r;return t===undefined||t&&"string"==typeof t&&n===undefined?(r=this.get(e,t),r!==undefined?r:this.get(e,x.camelCase(t))):(this.set(e,t,n),n!==undefined?n:t)},remove:function(e,t){var n,r,i,o=this.key(e),s=this.cache[o];if(t===undefined)this.cache[o]={};else{x.isArray(t)?r=t.concat(t.map(x.camelCase)):(i=x.camelCase(t),t in s?r=[t,i]:(r=i,r=r in s?[r]:r.match(w)||[])),n=r.length;while(n--)delete s[r[n]]}},hasData:function(e){return!x.isEmptyObject(this.cache[e[this.expando]]||{})},discard:function(e){e[this.expando]&&delete this.cache[e[this.expando]]}},L=new F,q=new F,x.extend({acceptData:F.accepts,hasData:function(e){return L.hasData(e)||q.hasData(e)},data:function(e,t,n){return L.access(e,t,n)},removeData:function(e,t){L.remove(e,t)},_data:function(e,t,n){return q.access(e,t,n)},_removeData:function(e,t){q.remove(e,t)}}),x.fn.extend({data:function(e,t){var n,r,i=this[0],o=0,s=null;if(e===undefined){if(this.length&&(s=L.get(i),1===i.nodeType&&!q.get(i,"hasDataAttrs"))){for(n=i.attributes;n.length>o;o++)r=n[o].name,0===r.indexOf("data-")&&(r=x.camelCase(r.slice(5)),P(i,r,s[r]));q.set(i,"hasDataAttrs",!0)}return s}return"object"==typeof e?this.each(function(){L.set(this,e)}):x.access(this,function(t){var n,r=x.camelCase(e);if(i&&t===undefined){if(n=L.get(i,e),n!==undefined)return n;if(n=L.get(i,r),n!==undefined)return n;if(n=P(i,r,undefined),n!==undefined)return n}else this.each(function(){var n=L.get(this,r);L.set(this,r,t),-1!==e.indexOf("-")&&n!==undefined&&L.set(this,e,t)})},null,t,arguments.length>1,null,!0)},removeData:function(e){return this.each(function(){L.remove(this,e)})}});function P(e,t,n){var r;if(n===undefined&&1===e.nodeType)if(r="data-"+t.replace(O,"-$1").toLowerCase(),n=e.getAttribute(r),"string"==typeof n){try{n="true"===n?!0:"false"===n?!1:"null"===n?null:+n+""===n?+n:H.test(n)?JSON.parse(n):n}catch(i){}L.set(e,t,n)}else n=undefined;return n}x.extend({queue:function(e,t,n){var r;return e?(t=(t||"fx")+"queue",r=q.get(e,t),n&&(!r||x.isArray(n)?r=q.access(e,t,x.makeArray(n)):r.push(n)),r||[]):undefined},dequeue:function(e,t){t=t||"fx";var n=x.queue(e,t),r=n.length,i=n.shift(),o=x._queueHooks(e,t),s=function(){x.dequeue(e,t) 5 | };"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,s,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return q.get(e,n)||q.access(e,n,{empty:x.Callbacks("once memory").add(function(){q.remove(e,[t+"queue",n])})})}}),x.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),n>arguments.length?x.queue(this[0],e):t===undefined?this:this.each(function(){var n=x.queue(this,e,t);x._queueHooks(this,e),"fx"===e&&"inprogress"!==n[0]&&x.dequeue(this,e)})},dequeue:function(e){return this.each(function(){x.dequeue(this,e)})},delay:function(e,t){return e=x.fx?x.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=x.Deferred(),o=this,s=this.length,a=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=undefined),e=e||"fx";while(s--)n=q.get(o[s],e+"queueHooks"),n&&n.empty&&(r++,n.empty.add(a));return a(),i.promise(t)}});var R,M,W=/[\t\r\n\f]/g,$=/\r/g,B=/^(?:input|select|textarea|button)$/i;x.fn.extend({attr:function(e,t){return x.access(this,x.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){x.removeAttr(this,e)})},prop:function(e,t){return x.access(this,x.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[x.propFix[e]||e]})},addClass:function(e){var t,n,r,i,o,s=0,a=this.length,u="string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).addClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];a>s;s++)if(n=this[s],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(W," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=x.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,s=0,a=this.length,u=0===arguments.length||"string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).removeClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];a>s;s++)if(n=this[s],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(W," "):"")){o=0;while(i=t[o++])while(r.indexOf(" "+i+" ")>=0)r=r.replace(" "+i+" "," ");n.className=e?x.trim(r):""}return this},toggleClass:function(e,t){var n=typeof e;return"boolean"==typeof t&&"string"===n?t?this.addClass(e):this.removeClass(e):x.isFunction(e)?this.each(function(n){x(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if("string"===n){var t,i=0,o=x(this),s=e.match(w)||[];while(t=s[i++])o.hasClass(t)?o.removeClass(t):o.addClass(t)}else(n===r||"boolean"===n)&&(this.className&&q.set(this,"__className__",this.className),this.className=this.className||e===!1?"":q.get(this,"__className__")||"")})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;r>n;n++)if(1===this[n].nodeType&&(" "+this[n].className+" ").replace(W," ").indexOf(t)>=0)return!0;return!1},val:function(e){var t,n,r,i=this[0];{if(arguments.length)return r=x.isFunction(e),this.each(function(n){var i;1===this.nodeType&&(i=r?e.call(this,n,x(this).val()):e,null==i?i="":"number"==typeof i?i+="":x.isArray(i)&&(i=x.map(i,function(e){return null==e?"":e+""})),t=x.valHooks[this.type]||x.valHooks[this.nodeName.toLowerCase()],t&&"set"in t&&t.set(this,i,"value")!==undefined||(this.value=i))});if(i)return t=x.valHooks[i.type]||x.valHooks[i.nodeName.toLowerCase()],t&&"get"in t&&(n=t.get(i,"value"))!==undefined?n:(n=i.value,"string"==typeof n?n.replace($,""):null==n?"":n)}}}),x.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,o="select-one"===e.type||0>i,s=o?null:[],a=o?i+1:r.length,u=0>i?a:o?i:0;for(;a>u;u++)if(n=r[u],!(!n.selected&&u!==i||(x.support.optDisabled?n.disabled:null!==n.getAttribute("disabled"))||n.parentNode.disabled&&x.nodeName(n.parentNode,"optgroup"))){if(t=x(n).val(),o)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=x.makeArray(t),s=i.length;while(s--)r=i[s],(r.selected=x.inArray(x(r).val(),o)>=0)&&(n=!0);return n||(e.selectedIndex=-1),o}}},attr:function(e,t,n){var i,o,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return typeof e.getAttribute===r?x.prop(e,t,n):(1===s&&x.isXMLDoc(e)||(t=t.toLowerCase(),i=x.attrHooks[t]||(x.expr.match.bool.test(t)?M:R)),n===undefined?i&&"get"in i&&null!==(o=i.get(e,t))?o:(o=x.find.attr(e,t),null==o?undefined:o):null!==n?i&&"set"in i&&(o=i.set(e,n,t))!==undefined?o:(e.setAttribute(t,n+""),n):(x.removeAttr(e,t),undefined))},removeAttr:function(e,t){var n,r,i=0,o=t&&t.match(w);if(o&&1===e.nodeType)while(n=o[i++])r=x.propFix[n]||n,x.expr.match.bool.test(n)&&(e[r]=!1),e.removeAttribute(n)},attrHooks:{type:{set:function(e,t){if(!x.support.radioValue&&"radio"===t&&x.nodeName(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},propFix:{"for":"htmlFor","class":"className"},prop:function(e,t,n){var r,i,o,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return o=1!==s||!x.isXMLDoc(e),o&&(t=x.propFix[t]||t,i=x.propHooks[t]),n!==undefined?i&&"set"in i&&(r=i.set(e,n,t))!==undefined?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){return e.hasAttribute("tabindex")||B.test(e.nodeName)||e.href?e.tabIndex:-1}}}}),M={set:function(e,t,n){return t===!1?x.removeAttr(e,n):e.setAttribute(n,n),n}},x.each(x.expr.match.bool.source.match(/\w+/g),function(e,t){var n=x.expr.attrHandle[t]||x.find.attr;x.expr.attrHandle[t]=function(e,t,r){var i=x.expr.attrHandle[t],o=r?undefined:(x.expr.attrHandle[t]=undefined)!=n(e,t,r)?t.toLowerCase():null;return x.expr.attrHandle[t]=i,o}}),x.support.optSelected||(x.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null}}),x.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){x.propFix[this.toLowerCase()]=this}),x.each(["radio","checkbox"],function(){x.valHooks[this]={set:function(e,t){return x.isArray(t)?e.checked=x.inArray(x(e).val(),t)>=0:undefined}},x.support.checkOn||(x.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})});var I=/^key/,z=/^(?:mouse|contextmenu)|click/,_=/^(?:focusinfocus|focusoutblur)$/,X=/^([^.]*)(?:\.(.+)|)$/;function U(){return!0}function Y(){return!1}function V(){try{return o.activeElement}catch(e){}}x.event={global:{},add:function(e,t,n,i,o){var s,a,u,l,c,p,f,h,d,g,m,y=q.get(e);if(y){n.handler&&(s=n,n=s.handler,o=s.selector),n.guid||(n.guid=x.guid++),(l=y.events)||(l=y.events={}),(a=y.handle)||(a=y.handle=function(e){return typeof x===r||e&&x.event.triggered===e.type?undefined:x.event.dispatch.apply(a.elem,arguments)},a.elem=e),t=(t||"").match(w)||[""],c=t.length;while(c--)u=X.exec(t[c])||[],d=m=u[1],g=(u[2]||"").split(".").sort(),d&&(f=x.event.special[d]||{},d=(o?f.delegateType:f.bindType)||d,f=x.event.special[d]||{},p=x.extend({type:d,origType:m,data:i,handler:n,guid:n.guid,selector:o,needsContext:o&&x.expr.match.needsContext.test(o),namespace:g.join(".")},s),(h=l[d])||(h=l[d]=[],h.delegateCount=0,f.setup&&f.setup.call(e,i,g,a)!==!1||e.addEventListener&&e.addEventListener(d,a,!1)),f.add&&(f.add.call(e,p),p.handler.guid||(p.handler.guid=n.guid)),o?h.splice(h.delegateCount++,0,p):h.push(p),x.event.global[d]=!0);e=null}},remove:function(e,t,n,r,i){var o,s,a,u,l,c,p,f,h,d,g,m=q.hasData(e)&&q.get(e);if(m&&(u=m.events)){t=(t||"").match(w)||[""],l=t.length;while(l--)if(a=X.exec(t[l])||[],h=g=a[1],d=(a[2]||"").split(".").sort(),h){p=x.event.special[h]||{},h=(r?p.delegateType:p.bindType)||h,f=u[h]||[],a=a[2]&&RegExp("(^|\\.)"+d.join("\\.(?:.*\\.|)")+"(\\.|$)"),s=o=f.length;while(o--)c=f[o],!i&&g!==c.origType||n&&n.guid!==c.guid||a&&!a.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(f.splice(o,1),c.selector&&f.delegateCount--,p.remove&&p.remove.call(e,c));s&&!f.length&&(p.teardown&&p.teardown.call(e,d,m.handle)!==!1||x.removeEvent(e,h,m.handle),delete u[h])}else for(h in u)x.event.remove(e,h+t[l],n,r,!0);x.isEmptyObject(u)&&(delete m.handle,q.remove(e,"events"))}},trigger:function(t,n,r,i){var s,a,u,l,c,p,f,h=[r||o],d=y.call(t,"type")?t.type:t,g=y.call(t,"namespace")?t.namespace.split("."):[];if(a=u=r=r||o,3!==r.nodeType&&8!==r.nodeType&&!_.test(d+x.event.triggered)&&(d.indexOf(".")>=0&&(g=d.split("."),d=g.shift(),g.sort()),c=0>d.indexOf(":")&&"on"+d,t=t[x.expando]?t:new x.Event(d,"object"==typeof t&&t),t.isTrigger=i?2:3,t.namespace=g.join("."),t.namespace_re=t.namespace?RegExp("(^|\\.)"+g.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,t.result=undefined,t.target||(t.target=r),n=null==n?[t]:x.makeArray(n,[t]),f=x.event.special[d]||{},i||!f.trigger||f.trigger.apply(r,n)!==!1)){if(!i&&!f.noBubble&&!x.isWindow(r)){for(l=f.delegateType||d,_.test(l+d)||(a=a.parentNode);a;a=a.parentNode)h.push(a),u=a;u===(r.ownerDocument||o)&&h.push(u.defaultView||u.parentWindow||e)}s=0;while((a=h[s++])&&!t.isPropagationStopped())t.type=s>1?l:f.bindType||d,p=(q.get(a,"events")||{})[t.type]&&q.get(a,"handle"),p&&p.apply(a,n),p=c&&a[c],p&&x.acceptData(a)&&p.apply&&p.apply(a,n)===!1&&t.preventDefault();return t.type=d,i||t.isDefaultPrevented()||f._default&&f._default.apply(h.pop(),n)!==!1||!x.acceptData(r)||c&&x.isFunction(r[d])&&!x.isWindow(r)&&(u=r[c],u&&(r[c]=null),x.event.triggered=d,r[d](),x.event.triggered=undefined,u&&(r[c]=u)),t.result}},dispatch:function(e){e=x.event.fix(e);var t,n,r,i,o,s=[],a=d.call(arguments),u=(q.get(this,"events")||{})[e.type]||[],l=x.event.special[e.type]||{};if(a[0]=e,e.delegateTarget=this,!l.preDispatch||l.preDispatch.call(this,e)!==!1){s=x.event.handlers.call(this,e,u),t=0;while((i=s[t++])&&!e.isPropagationStopped()){e.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!e.isImmediatePropagationStopped())(!e.namespace_re||e.namespace_re.test(o.namespace))&&(e.handleObj=o,e.data=o.data,r=((x.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,a),r!==undefined&&(e.result=r)===!1&&(e.preventDefault(),e.stopPropagation()))}return l.postDispatch&&l.postDispatch.call(this,e),e.result}},handlers:function(e,t){var n,r,i,o,s=[],a=t.delegateCount,u=e.target;if(a&&u.nodeType&&(!e.button||"click"!==e.type))for(;u!==this;u=u.parentNode||this)if(u.disabled!==!0||"click"!==e.type){for(r=[],n=0;a>n;n++)o=t[n],i=o.selector+" ",r[i]===undefined&&(r[i]=o.needsContext?x(i,this).index(u)>=0:x.find(i,this,null,[u]).length),r[i]&&r.push(o);r.length&&s.push({elem:u,handlers:r})}return t.length>a&&s.push({elem:this,handlers:t.slice(a)}),s},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(e,t){return null==e.which&&(e.which=null!=t.charCode?t.charCode:t.keyCode),e}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(e,t){var n,r,i,s=t.button;return null==e.pageX&&null!=t.clientX&&(n=e.target.ownerDocument||o,r=n.documentElement,i=n.body,e.pageX=t.clientX+(r&&r.scrollLeft||i&&i.scrollLeft||0)-(r&&r.clientLeft||i&&i.clientLeft||0),e.pageY=t.clientY+(r&&r.scrollTop||i&&i.scrollTop||0)-(r&&r.clientTop||i&&i.clientTop||0)),e.which||s===undefined||(e.which=1&s?1:2&s?3:4&s?2:0),e}},fix:function(e){if(e[x.expando])return e;var t,n,r,i=e.type,s=e,a=this.fixHooks[i];a||(this.fixHooks[i]=a=z.test(i)?this.mouseHooks:I.test(i)?this.keyHooks:{}),r=a.props?this.props.concat(a.props):this.props,e=new x.Event(s),t=r.length;while(t--)n=r[t],e[n]=s[n];return e.target||(e.target=o),3===e.target.nodeType&&(e.target=e.target.parentNode),a.filter?a.filter(e,s):e},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==V()&&this.focus?(this.focus(),!1):undefined},delegateType:"focusin"},blur:{trigger:function(){return this===V()&&this.blur?(this.blur(),!1):undefined},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&x.nodeName(this,"input")?(this.click(),!1):undefined},_default:function(e){return x.nodeName(e.target,"a")}},beforeunload:{postDispatch:function(e){e.result!==undefined&&(e.originalEvent.returnValue=e.result)}}},simulate:function(e,t,n,r){var i=x.extend(new x.Event,n,{type:e,isSimulated:!0,originalEvent:{}});r?x.event.trigger(i,null,t):x.event.dispatch.call(t,i),i.isDefaultPrevented()&&n.preventDefault()}},x.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n,!1)},x.Event=function(e,t){return this instanceof x.Event?(e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||e.getPreventDefault&&e.getPreventDefault()?U:Y):this.type=e,t&&x.extend(this,t),this.timeStamp=e&&e.timeStamp||x.now(),this[x.expando]=!0,undefined):new x.Event(e,t)},x.Event.prototype={isDefaultPrevented:Y,isPropagationStopped:Y,isImmediatePropagationStopped:Y,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=U,e&&e.preventDefault&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=U,e&&e.stopPropagation&&e.stopPropagation()},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=U,this.stopPropagation()}},x.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(e,t){x.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=this,i=e.relatedTarget,o=e.handleObj;return(!i||i!==r&&!x.contains(r,i))&&(e.type=o.origType,n=o.handler.apply(this,arguments),e.type=t),n}}}),x.support.focusinBubbles||x.each({focus:"focusin",blur:"focusout"},function(e,t){var n=0,r=function(e){x.event.simulate(t,e.target,x.event.fix(e),!0)};x.event.special[t]={setup:function(){0===n++&&o.addEventListener(e,r,!0)},teardown:function(){0===--n&&o.removeEventListener(e,r,!0)}}}),x.fn.extend({on:function(e,t,n,r,i){var o,s;if("object"==typeof e){"string"!=typeof t&&(n=n||t,t=undefined);for(s in e)this.on(s,t,n,e[s],i);return this}if(null==n&&null==r?(r=t,n=t=undefined):null==r&&("string"==typeof t?(r=n,n=undefined):(r=n,n=t,t=undefined)),r===!1)r=Y;else if(!r)return this;return 1===i&&(o=r,r=function(e){return x().off(e),o.apply(this,arguments)},r.guid=o.guid||(o.guid=x.guid++)),this.each(function(){x.event.add(this,e,r,n,t)})},one:function(e,t,n,r){return this.on(e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,x(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return(t===!1||"function"==typeof t)&&(n=t,t=undefined),n===!1&&(n=Y),this.each(function(){x.event.remove(this,e,n,t)})},trigger:function(e,t){return this.each(function(){x.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];return n?x.event.trigger(e,t,n,!0):undefined}});var G=/^.[^:#\[\.,]*$/,J=/^(?:parents|prev(?:Until|All))/,Q=x.expr.match.needsContext,K={children:!0,contents:!0,next:!0,prev:!0};x.fn.extend({find:function(e){var t,n=[],r=this,i=r.length;if("string"!=typeof e)return this.pushStack(x(e).filter(function(){for(t=0;i>t;t++)if(x.contains(r[t],this))return!0}));for(t=0;i>t;t++)x.find(e,r[t],n);return n=this.pushStack(i>1?x.unique(n):n),n.selector=this.selector?this.selector+" "+e:e,n},has:function(e){var t=x(e,this),n=t.length;return this.filter(function(){var e=0;for(;n>e;e++)if(x.contains(this,t[e]))return!0})},not:function(e){return this.pushStack(et(this,e||[],!0))},filter:function(e){return this.pushStack(et(this,e||[],!1))},is:function(e){return!!et(this,"string"==typeof e&&Q.test(e)?x(e):e||[],!1).length},closest:function(e,t){var n,r=0,i=this.length,o=[],s=Q.test(e)||"string"!=typeof e?x(e,t||this.context):0;for(;i>r;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(11>n.nodeType&&(s?s.index(n)>-1:1===n.nodeType&&x.find.matchesSelector(n,e))){n=o.push(n);break}return this.pushStack(o.length>1?x.unique(o):o)},index:function(e){return e?"string"==typeof e?g.call(x(e),this[0]):g.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){var n="string"==typeof e?x(e,t):x.makeArray(e&&e.nodeType?[e]:e),r=x.merge(this.get(),n);return this.pushStack(x.unique(r))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function Z(e,t){while((e=e[t])&&1!==e.nodeType);return e}x.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return x.dir(e,"parentNode")},parentsUntil:function(e,t,n){return x.dir(e,"parentNode",n)},next:function(e){return Z(e,"nextSibling")},prev:function(e){return Z(e,"previousSibling")},nextAll:function(e){return x.dir(e,"nextSibling")},prevAll:function(e){return x.dir(e,"previousSibling")},nextUntil:function(e,t,n){return x.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return x.dir(e,"previousSibling",n)},siblings:function(e){return x.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return x.sibling(e.firstChild)},contents:function(e){return e.contentDocument||x.merge([],e.childNodes)}},function(e,t){x.fn[e]=function(n,r){var i=x.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=x.filter(r,i)),this.length>1&&(K[e]||x.unique(i),J.test(e)&&i.reverse()),this.pushStack(i)}}),x.extend({filter:function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?x.find.matchesSelector(r,e)?[r]:[]:x.find.matches(e,x.grep(t,function(e){return 1===e.nodeType}))},dir:function(e,t,n){var r=[],i=n!==undefined;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&x(e).is(n))break;r.push(e)}return r},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}});function et(e,t,n){if(x.isFunction(t))return x.grep(e,function(e,r){return!!t.call(e,r,e)!==n});if(t.nodeType)return x.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(G.test(t))return x.filter(t,e,n);t=x.filter(t,e)}return x.grep(e,function(e){return g.call(t,e)>=0!==n})}var tt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,nt=/<([\w:]+)/,rt=/<|&#?\w+;/,it=/<(?:script|style|link)/i,ot=/^(?:checkbox|radio)$/i,st=/checked\s*(?:[^=]|=\s*.checked.)/i,at=/^$|\/(?:java|ecma)script/i,ut=/^true\/(.*)/,lt=/^\s*\s*$/g,ct={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};ct.optgroup=ct.option,ct.tbody=ct.tfoot=ct.colgroup=ct.caption=ct.thead,ct.th=ct.td,x.fn.extend({text:function(e){return x.access(this,function(e){return e===undefined?x.text(this):this.empty().append((this[0]&&this[0].ownerDocument||o).createTextNode(e))},null,e,arguments.length)},append:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=pt(this,e);t.appendChild(e)}})},prepend:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=pt(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){var n,r=e?x.filter(e,this):this,i=0;for(;null!=(n=r[i]);i++)t||1!==n.nodeType||x.cleanData(mt(n)),n.parentNode&&(t&&x.contains(n.ownerDocument,n)&&dt(mt(n,"script")),n.parentNode.removeChild(n));return this},empty:function(){var e,t=0;for(;null!=(e=this[t]);t++)1===e.nodeType&&(x.cleanData(mt(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return x.clone(this,e,t)})},html:function(e){return x.access(this,function(e){var t=this[0]||{},n=0,r=this.length;if(e===undefined&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!it.test(e)&&!ct[(nt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(tt,"<$1>");try{for(;r>n;n++)t=this[n]||{},1===t.nodeType&&(x.cleanData(mt(t,!1)),t.innerHTML=e);t=0}catch(i){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var e=x.map(this,function(e){return[e.nextSibling,e.parentNode]}),t=0;return this.domManip(arguments,function(n){var r=e[t++],i=e[t++];i&&(r&&r.parentNode!==i&&(r=this.nextSibling),x(this).remove(),i.insertBefore(n,r))},!0),t?this:this.remove()},detach:function(e){return this.remove(e,!0)},domManip:function(e,t,n){e=f.apply([],e);var r,i,o,s,a,u,l=0,c=this.length,p=this,h=c-1,d=e[0],g=x.isFunction(d);if(g||!(1>=c||"string"!=typeof d||x.support.checkClone)&&st.test(d))return this.each(function(r){var i=p.eq(r);g&&(e[0]=d.call(this,r,i.html())),i.domManip(e,t,n)});if(c&&(r=x.buildFragment(e,this[0].ownerDocument,!1,!n&&this),i=r.firstChild,1===r.childNodes.length&&(r=i),i)){for(o=x.map(mt(r,"script"),ft),s=o.length;c>l;l++)a=r,l!==h&&(a=x.clone(a,!0,!0),s&&x.merge(o,mt(a,"script"))),t.call(this[l],a,l);if(s)for(u=o[o.length-1].ownerDocument,x.map(o,ht),l=0;s>l;l++)a=o[l],at.test(a.type||"")&&!q.access(a,"globalEval")&&x.contains(u,a)&&(a.src?x._evalUrl(a.src):x.globalEval(a.textContent.replace(lt,"")))}return this}}),x.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){x.fn[e]=function(e){var n,r=[],i=x(e),o=i.length-1,s=0;for(;o>=s;s++)n=s===o?this:this.clone(!0),x(i[s])[t](n),h.apply(r,n.get());return this.pushStack(r)}}),x.extend({clone:function(e,t,n){var r,i,o,s,a=e.cloneNode(!0),u=x.contains(e.ownerDocument,e);if(!(x.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||x.isXMLDoc(e)))for(s=mt(a),o=mt(e),r=0,i=o.length;i>r;r++)yt(o[r],s[r]);if(t)if(n)for(o=o||mt(e),s=s||mt(a),r=0,i=o.length;i>r;r++)gt(o[r],s[r]);else gt(e,a);return s=mt(a,"script"),s.length>0&&dt(s,!u&&mt(e,"script")),a},buildFragment:function(e,t,n,r){var i,o,s,a,u,l,c=0,p=e.length,f=t.createDocumentFragment(),h=[];for(;p>c;c++)if(i=e[c],i||0===i)if("object"===x.type(i))x.merge(h,i.nodeType?[i]:i);else if(rt.test(i)){o=o||f.appendChild(t.createElement("div")),s=(nt.exec(i)||["",""])[1].toLowerCase(),a=ct[s]||ct._default,o.innerHTML=a[1]+i.replace(tt,"<$1>")+a[2],l=a[0];while(l--)o=o.lastChild;x.merge(h,o.childNodes),o=f.firstChild,o.textContent=""}else h.push(t.createTextNode(i));f.textContent="",c=0;while(i=h[c++])if((!r||-1===x.inArray(i,r))&&(u=x.contains(i.ownerDocument,i),o=mt(f.appendChild(i),"script"),u&&dt(o),n)){l=0;while(i=o[l++])at.test(i.type||"")&&n.push(i)}return f},cleanData:function(e){var t,n,r,i,o,s,a=x.event.special,u=0;for(;(n=e[u])!==undefined;u++){if(F.accepts(n)&&(o=n[q.expando],o&&(t=q.cache[o]))){if(r=Object.keys(t.events||{}),r.length)for(s=0;(i=r[s])!==undefined;s++)a[i]?x.event.remove(n,i):x.removeEvent(n,i,t.handle);q.cache[o]&&delete q.cache[o]}delete L.cache[n[L.expando]]}},_evalUrl:function(e){return x.ajax({url:e,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})}});function pt(e,t){return x.nodeName(e,"table")&&x.nodeName(1===t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function ft(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function ht(e){var t=ut.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function dt(e,t){var n=e.length,r=0;for(;n>r;r++)q.set(e[r],"globalEval",!t||q.get(t[r],"globalEval"))}function gt(e,t){var n,r,i,o,s,a,u,l;if(1===t.nodeType){if(q.hasData(e)&&(o=q.access(e),s=q.set(t,o),l=o.events)){delete s.handle,s.events={};for(i in l)for(n=0,r=l[i].length;r>n;n++)x.event.add(t,i,l[i][n])}L.hasData(e)&&(a=L.access(e),u=x.extend({},a),L.set(t,u))}}function mt(e,t){var n=e.getElementsByTagName?e.getElementsByTagName(t||"*"):e.querySelectorAll?e.querySelectorAll(t||"*"):[];return t===undefined||t&&x.nodeName(e,t)?x.merge([e],n):n}function yt(e,t){var n=t.nodeName.toLowerCase();"input"===n&&ot.test(e.type)?t.checked=e.checked:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}x.fn.extend({wrapAll:function(e){var t;return x.isFunction(e)?this.each(function(t){x(this).wrapAll(e.call(this,t))}):(this[0]&&(t=x(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this)},wrapInner:function(e){return x.isFunction(e)?this.each(function(t){x(this).wrapInner(e.call(this,t))}):this.each(function(){var t=x(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=x.isFunction(e);return this.each(function(n){x(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){x.nodeName(this,"body")||x(this).replaceWith(this.childNodes)}).end()}});var vt,xt,bt=/^(none|table(?!-c[ea]).+)/,wt=/^margin/,Tt=RegExp("^("+b+")(.*)$","i"),Ct=RegExp("^("+b+")(?!px)[a-z%]+$","i"),kt=RegExp("^([+-])=("+b+")","i"),Nt={BODY:"block"},Et={position:"absolute",visibility:"hidden",display:"block"},St={letterSpacing:0,fontWeight:400},jt=["Top","Right","Bottom","Left"],Dt=["Webkit","O","Moz","ms"];function At(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Dt.length;while(i--)if(t=Dt[i]+n,t in e)return t;return r}function Lt(e,t){return e=t||e,"none"===x.css(e,"display")||!x.contains(e.ownerDocument,e)}function qt(t){return e.getComputedStyle(t,null)}function Ht(e,t){var n,r,i,o=[],s=0,a=e.length;for(;a>s;s++)r=e[s],r.style&&(o[s]=q.get(r,"olddisplay"),n=r.style.display,t?(o[s]||"none"!==n||(r.style.display=""),""===r.style.display&&Lt(r)&&(o[s]=q.access(r,"olddisplay",Rt(r.nodeName)))):o[s]||(i=Lt(r),(n&&"none"!==n||!i)&&q.set(r,"olddisplay",i?n:x.css(r,"display"))));for(s=0;a>s;s++)r=e[s],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[s]||"":"none"));return e}x.fn.extend({css:function(e,t){return x.access(this,function(e,t,n){var r,i,o={},s=0;if(x.isArray(t)){for(r=qt(e),i=t.length;i>s;s++)o[t[s]]=x.css(e,t[s],!1,r);return o}return n!==undefined?x.style(e,t,n):x.css(e,t)},e,t,arguments.length>1)},show:function(){return Ht(this,!0)},hide:function(){return Ht(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){Lt(this)?x(this).show():x(this).hide()})}}),x.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=vt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,s,a=x.camelCase(t),u=e.style;return t=x.cssProps[a]||(x.cssProps[a]=At(u,a)),s=x.cssHooks[t]||x.cssHooks[a],n===undefined?s&&"get"in s&&(i=s.get(e,!1,r))!==undefined?i:u[t]:(o=typeof n,"string"===o&&(i=kt.exec(n))&&(n=(i[1]+1)*i[2]+parseFloat(x.css(e,t)),o="number"),null==n||"number"===o&&isNaN(n)||("number"!==o||x.cssNumber[a]||(n+="px"),x.support.clearCloneStyle||""!==n||0!==t.indexOf("background")||(u[t]="inherit"),s&&"set"in s&&(n=s.set(e,n,r))===undefined||(u[t]=n)),undefined)}},css:function(e,t,n,r){var i,o,s,a=x.camelCase(t);return t=x.cssProps[a]||(x.cssProps[a]=At(e.style,a)),s=x.cssHooks[t]||x.cssHooks[a],s&&"get"in s&&(i=s.get(e,!0,n)),i===undefined&&(i=vt(e,t,r)),"normal"===i&&t in St&&(i=St[t]),""===n||n?(o=parseFloat(i),n===!0||x.isNumeric(o)?o||0:i):i}}),vt=function(e,t,n){var r,i,o,s=n||qt(e),a=s?s.getPropertyValue(t)||s[t]:undefined,u=e.style;return s&&(""!==a||x.contains(e.ownerDocument,e)||(a=x.style(e,t)),Ct.test(a)&&wt.test(t)&&(r=u.width,i=u.minWidth,o=u.maxWidth,u.minWidth=u.maxWidth=u.width=a,a=s.width,u.width=r,u.minWidth=i,u.maxWidth=o)),a};function Ot(e,t,n){var r=Tt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function Ft(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,s=0;for(;4>o;o+=2)"margin"===n&&(s+=x.css(e,n+jt[o],!0,i)),r?("content"===n&&(s-=x.css(e,"padding"+jt[o],!0,i)),"margin"!==n&&(s-=x.css(e,"border"+jt[o]+"Width",!0,i))):(s+=x.css(e,"padding"+jt[o],!0,i),"padding"!==n&&(s+=x.css(e,"border"+jt[o]+"Width",!0,i)));return s}function Pt(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=qt(e),s=x.support.boxSizing&&"border-box"===x.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=vt(e,t,o),(0>i||null==i)&&(i=e.style[t]),Ct.test(i))return i;r=s&&(x.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+Ft(e,t,n||(s?"border":"content"),r,o)+"px"}function Rt(e){var t=o,n=Nt[e];return n||(n=Mt(e,t),"none"!==n&&n||(xt=(xt||x("