Updated dependencies to newer releases

c-klinger · c-klinger · commit ed7973974646 · 2022-06-06T01:32:52.000+02:00
diff --git a/README.md b/README.md
@@ -9,9 +9,14 @@ The circuit uses an LD1117V33 voltage regulator with two capacitors as specified
 
 ## Code
 ### Dependencies
-The mentioned versions are tested, other may work as well but may lead to compile issues.
-* [esp8266 v.2.4.2](https://github.com/esp8266/Arduino)
-* [ArduinoJSON v.6.13.0](https://github.com/bblanchon/ArduinoJson)
+The following dependencies have to be installed in Arduino IDE using library or board manager (see project readme) to compile this project. The mentioned versions are tested, other may work as well but may lead to compile issues.
+* [esp8266 v.3.0.2](https://github.com/esp8266/Arduino)
+* [ArduinoJSON v.6.19.4](https://github.com/bblanchon/ArduinoJson)
+
+The following dependencies will be loaded using a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) for the web ui. There is no need to install them, but an internet connection is needed for the ui to display.
+* [iro.js v.5.5.2](https://github.com/jaames/iro.js)
+* [jQuery v.3.6.0](https://github.com/jquery/jquery)
+
 
 ### Configuration
 
@@ -90,7 +95,7 @@ The controller accecpts POST request at http://ip-adress/api/v1/state. The reque
 
 ### Graphical User Interface
 
-A User Interface using [iro.js](https://github.com/jaames/iro.js) is available at http://ip-adress/ui. An Internet connection is required to load additional Javascript libraries from CDN.
+A User Interface using [iro.js](https://github.com/jaames/iro.js) is available at http://ip-adress/ui. An Internet connection is required to load additional Javascript libraries from CDN (see dependencies section).
 
 ## License
 Copyright (c) 2018 Chris Klinger. Licensed under MIT license, see  [LICENSE](https://github.com/c-klinger/esp8266-arduino-wifirgb/blob/master/LICENSE.md) for the full license.
diff --git a/WifiRGB/web_interface.h b/WifiRGB/web_interface.h
@@ -5,63 +5,79 @@ const char WEBINTERFACE[] PROGMEM = R"=====(
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>WifiRGB Controller Interface</title>
-    <script type="text/javascript" src="iro.min.js"></script>
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <style>
       body {
         color: #fff;
         background: #272727;
         text-align: center;
       }
 
-      #color-picker-container svg {
+      #color-picker-container {
         margin: 48px auto;
       }
+
+      #color-picker {
+        margin: auto;
+      }
     </style>
 </head>
 <body>
   <div id="color-picker-container"></div>
   <script type="text/javascript">
-      var size = 0;
-      if (window.innerWidth > window.innerHeight) {
-        size = window.innerHeight * 0.8;
-      } else {
-        size = window.innerWidth * 0.8;
+      function resizeColorPicker(colorPicker) {
+        var size = 0;
+        if (window.innerWidth > window.innerHeight) {
+          size = window.innerHeight * 0.8;
+        } else {
+          size = window.innerWidth * 0.8;
+        }
+        
+        var cssSize = size + "px";
+        
+        $( "#color-picker-container" ).css( "width", cssSize );
+        $( "#colorPicker" ).css( "width", cssSize );
+        colorPicker.resize(size);
       }
 
-      var demoColorPicker = new iro.ColorPicker("#color-picker-container", {
-      // color picker options
-      // Option guide: https://rakujira.jp/projects/iro/docs/guide.html#Color-Picker-Options
-      width: size,
-      height: size,
-      color: {r: 0, g: 0, b: 0},
-      anticlockwise: true,
-      borderWidth: 10,
-      borderColor: "#313131"
-    });
+      var colorPicker = new iro.ColorPicker("#color-picker-container", {
+        // color picker options
+        // Option guide: https://rakujira.jp/projects/iro/docs/guide.html#Color-Picker-Options
+        id: "color-picker",
+        color: {r: 0, g: 0, b: 0},
+        anticlockwise: true,
+        borderWidth: 10,
+        borderColor: "#313131"
+      });
+
+      // inital resize
+      resizeColorPicker(colorPicker);
+
+      // register hook
+      $( window ).resize(function() {
+        resizeColorPicker(colorPicker);
+      });
 
-    demoColorPicker.on("color:change", function(color, changes) {
-      // Log the color's hex RGB value to the dev console
-      console.log(color.rgb);
-      console.log(color.hsv.v);
-      // If the "H" channel has changed, log the color's HSV value too
-      //if (changes.h) {
-      //  console.log(color.hsv);
-      //}
-      var json = {state:"ON",brightness:color.hsv.v,color:{mode:"rgb",r:color.rgb.r,g:color.rgb.g,b:color.rgb.b},mode:"SOLID"};
-      console.log(json);
-      console.log(JSON.stringify(json));
+      
+      colorPicker.on("color:change", function(color, changes) {
+        // Log the color's hex RGB value to the dev console
+        console.log(color.rgb);
 
-      $.ajax( "/api/v1/state", { data: JSON.stringify(json), dataType: "json", method: "POST", contentType: "application/json", cache: false, timeout: 2000})
-        .done(function( data ) {
-          console.log( "Response: " );
-          console.log( data );
-        })
-        .fail(function( data ) {
-          console.log( "Error: " );
-          console.log( data );
-        });
-    });
+        var json = {state:"ON",brightness:color.hsv.v,color:{mode:"rgb",r:color.rgb.r,g:color.rgb.g,b:color.rgb.b},mode:"SOLID"};
+        console.log(json);
+        console.log(JSON.stringify(json));
+  
+        $.ajax( "/api/v1/state", { data: JSON.stringify(json), dataType: "json", method: "POST", contentType: "application/json", cache: false, timeout: 2000})
+          .done(function( data ) {
+            console.log( "Response: " );
+            console.log( data );
+          })
+          .fail(function( data ) {
+            console.log( "Error: " );
+            console.log( data );
+          });
+      });
   </script>
 </body>
 </html>
diff --git a/WifiRGB/web_iro_js.h b/WifiRGB/web_iro_js.h
