Many many many changes to update the UI. It hurts...

.github/workflows/esp-idf-v4.3-build.yml

@@ -42,11 +42,11 @@ jobs:
       with:
         path: |
           ~/build
-          ~/components/wifi-manager/webapp/node_modules
         key: ${{ runner.os }}-${{ matrix.node }}
     - name: Set build parameters
       run: |
         git update-index --chmod=+x ./server_certs/getcert.sh
+        git update-index --chmod=+x ./buildFirmware.sh
         git update-index --chmod=+x ./components/spotify/cspot/bell/nanopb/generator/protoc
         git update-index --chmod=+x ./components/spotify/cspot/bell/nanopb/generator/protoc-gen-nanopb
         git update-index --chmod=+x ./components/spotify/cspot/bell/nanopb/generator/*.py
@@ -91,13 +91,9 @@ jobs:
     - name: Build the firmware
       run: |
         env | grep "artifact\|tag\|GITHUB\|version\|NUMBER\|TARGET" >${TARGET_BUILD_NAME}-env.txt
-        echo "${tag}" >version.txt
         echo pulling custom docker image  ${DOCKER_IMAGE_NAME}
         docker pull ${DOCKER_IMAGE_NAME}
-        docker run --env-file=${TARGET_BUILD_NAME}-env.txt  -v $PWD:/project -w /project ${DOCKER_IMAGE_NAME} /bin/bash -c "pushd components/wifi-manager/webapp/ && npm install && npm run-script build && popd"
+        docker run --env-file=${TARGET_BUILD_NAME}-env.txt  -v $PWD:/project -w /project ${DOCKER_IMAGE_NAME} /bin/bash -c "./buildFirmware.sh"
-        docker run --env-file=${TARGET_BUILD_NAME}-env.txt  -v $PWD:/project -w /project ${DOCKER_IMAGE_NAME} /bin/bash -c "cp build-scripts/${TARGET_BUILD_NAME}-sdkconfig.defaults sdkconfig"
-        docker run --env-file=${TARGET_BUILD_NAME}-env.txt  -v $PWD:/project -w /project ${DOCKER_IMAGE_NAME} /bin/bash -c "idf.py build -DDEPTH=${{ matrix.depth }} -DBUILD_NUMBER=${BUILD_NUMBER}-${{ matrix.depth }} "
-        docker run --env-file=${TARGET_BUILD_NAME}-env.txt  -v $PWD:/project -w /project ${DOCKER_IMAGE_NAME} /bin/bash -c "zip -r build_output.zip build && zip build/${artifact_file_name} partitions*.csv build/*.bin build/bootloader/bootloader.bin build/partition_table/partition-table.bin build/flash_project_args build/size_*.txt"
     # - name: Build Mock firmware
     #   run: |
     #     mkdir -p build

Dockerfile

@@ -2,7 +2,7 @@ FROM ubuntu:20.04
 
 
 ARG DEBIAN_FRONTEND=noninteractive
-
+ENV GCC_TOOLS_BASE=/opt/esp/tools/xtensa-esp32-elf/esp-2021r2-8.4.0/xtensa-esp32-elf/bin/xtensa-esp32-elf-
 # We need libpython2.7 due to GDB tools
 # we also need npm 8 for the webapp to work
 RUN : \
@@ -38,6 +38,10 @@ RUN : \
   && python -m pip install --upgrade \
     pip \
     virtualenv \
+  && cd /opt \  
+  && git clone https://github.com/HBehrens/puncover.git \
+  && cd puncover \
+  && python setup.py -q install \
   && :
 
 # To build the image for a branch or a tag of IDF, pass --build-arg IDF_CLONE_BRANCH_OR_TAG=name.
@@ -47,11 +51,13 @@ RUN : \
 #   IDF_CHECKOUT_REF=<some commit on release/vX.Y branch>.
 # The following commit contains the ldgen fix: eab738c79e063b3d6f4c345ea5e1d4f8caef725b
 # to build an image using that commit: docker build . --build-arg IDF_CHECKOUT_REF=eab738c79e063b3d6f4c345ea5e1d4f8caef725b -t sle118/squeezelite-esp32-idfv4-master
-# docker build . --build-arg IDF_CHECKOUT_REF=8bf14a9238329954c7c5062eeeda569529aedf75  -t sle118/squeezelite-esp32-idfv4-master
+# docker build . --build-arg IDF_CHECKOUT_REF=8bf14a92python setup.py -q install38329954c7c5062eeeda569529aedf75  -t sle118/squeezelite-esp32-idfv4-master
 # To run the image interactive (windows): docker run --rm -v %cd%:/project -w /project -it sle118/squeezelite-esp32-idfv4-master
 # to build the web app inside of the interactive session
 # pushd components/wifi-manager/webapp/ && npm install && npm run-script build && popd
-
+#
+# to run the docker with netwotrk port published on the host:
+# docker run --rm -p 5000:5000/tcp -v %cd%:/project -w /project -it sle118/squeezelite-esp32-idfv4-master
 
 ARG IDF_CLONE_URL=https://github.com/espressif/esp-idf.git
 ARG IDF_CLONE_BRANCH_OR_TAG=master
@@ -60,6 +66,7 @@ ARG IDF_CHECKOUT_REF=eab738c79e063b3d6f4c345ea5e1d4f8caef725b
 ENV IDF_PATH=/opt/esp/idf
 ENV IDF_TOOLS_PATH=/opt/esp
 
+
 RUN echo IDF_CHECKOUT_REF=$IDF_CHECKOUT_REF IDF_CLONE_BRANCH_OR_TAG=$IDF_CLONE_BRANCH_OR_TAG && \
     git clone --recursive \
       ${IDF_CLONE_BRANCH_OR_TAG:+-b $IDF_CLONE_BRANCH_OR_TAG} \

buildFirmware.sh

@@ -0,0 +1,53 @@
+#!/bin/bash
+
+
+
+echo "Build process started"
+pushd components/wifi-manager/webapp/ 
+echo "Installing node.js dependencies"
+npm install 
+echo "Building webapp"
+npm run-script build 
+popd
+echo "Setting up build name and build number"
+if [ -z "${TARGET_BUILD_NAME}" ]
+then
+    export TARGET_BUILD_NAME="I2S-4MFlash"
+    echo "TARGET_BUILD_NAME is not set. Defaulting to ${TARGET_BUILD_NAME}"
+fi
+if [ -z "${BUILD_NUMBER}" ]
+then
+    export BUILD_NUMBER="500"
+    echo "BUILD_NUMBER is not set. Defaulting to ${BUILD_NUMBER}"
+fi
+if [ -z "$DEPTH" ]
+then
+    export DEPTH="16"
+    echo "DEPTH is not set. Defaulting to ${DEPTH}"
+fi
+if [ -z "$tag" ]
+then
+    branch_name="$(git rev-parse --abbrev-ref HEAD)"
+    branch_name="${branch_name//[^a-zA-Z0-9\-~!@_\.]/}"
+    app_name="${TARGET_BUILD_NAME}.${DEPTH}.dev-$(git log --pretty=format:'%h' --max-count=1).${branch_name}" 
+    echo "${app_name}">version.txt
+    echo "app_name is not set. Defaulting to ${app_name}"
+else
+    echo "${tag}" >version.txt
+fi
+
+echo "Copying target sdkconfig"
+cp build-scripts/${TARGET_BUILD_NAME}-sdkconfig.defaults sdkconfig
+echo "Building project"
+idf.py build -DDEPTH=${DEPTH} -DBUILD_NUMBER=${BUILD_NUMBER}-${DEPTH} 
+echo "Generating size report"
+idf.py size-components >build/size_components.txt
+idf.py size-components-squeezelite build/size_components_squeezelite.txt
+if [ -z "${artifact_file_name}" ]
+then
+    echo "No artifact file name set.  Will not generate zip file."
+else
+    echo "Generating build artifact zip file"
+    zip -r build_output.zip build
+    zip build/${artifact_file_name} partitions*.csv build/*.bin build/bootloader/bootloader.bin build/partition_table/partition-table.bin build/flash_project_args build/size_*.txt
+fi

components/wifi-manager/webapp/dist/js/index.0ff7b6.bundle.js.LICENSE.txt

@@ -1,50 +0,0 @@
-/*!
-  * Bootstrap v5.1.3 (https://getbootstrap.com/)
-  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
-  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-  */
-
-/*!
- * @overview es6-promise - a tiny implementation of Promises/A+.
- * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
- * @license   Licensed under MIT license
- *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
- * @version   v4.2.8+1e68dce6
- */
-
-/*!
- * Sizzle CSS Selector Engine v2.3.6
- * https://sizzlejs.com/
- *
- * Copyright JS Foundation and other contributors
- * Released under the MIT license
- * https://js.foundation/
- *
- * Date: 2021-02-16
- */
-
-/*!
- * jQuery JavaScript Library v3.6.0
- * https://jquery.com/
- *
- * Includes Sizzle.js
- * https://sizzlejs.com/
- *
- * Copyright OpenJS Foundation and other contributors
- * Released under the MIT license
- * https://jquery.org/license
- *
- * Date: 2021-03-02T17:08Z
- */
-
-/*! < A task is querying the state of itself, so must be running. */
-
-/*! < The task being queried is in a read or pending ready list. */
-
-/*! < The task being queried is in the Blocked state. */
-
-/*! < The task being queried is in the Suspended state, or is in the Blocked state with an infinite time out. */
-
-/*! https://mths.be/he v1.2.0 by @mathias | MIT license */
-
-/*! js-cookie v3.0.1 | MIT */

components/wifi-manager/webapp/package.json

@@ -3,7 +3,7 @@
   "version": "0.5.0",
   "main": "src/index.html",
   "repository": "git@github.com:sle118/squeezelite-esp32.git",
-  "author": "Andy K., Sebastien",
+  "author": "Sebastien L",
   "license": "MIT",
   "scripts": {
     "prod": "webpack serve --open  --mode=production",
@@ -11,13 +11,6 @@
     "watch": "webpack --progress --watch  --mode=development ",
     "dev": "webpack serve --open  --mode=development"
   },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss",
-    "**/index.ejs",
-    "**/index.js",
-    "**/*.js"
-  ],
   "devDependencies": {
     "@babel/core": "^7.16.12",
     "@babel/plugin-transform-runtime": "^7.16.10",
@@ -59,6 +52,7 @@
     "postcss": "^8.4.5",
     "postcss-loader": "^6.2.1",
     "purgecss-webpack-plugin": "^4.1.3",
+    "purgecss-whitelister": "^2.4.0",
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
     "remixicon": "^2.5.0",

components/wifi-manager/webapp/src/sass/main.scss

@@ -1,42 +1,42 @@
 
 @import "~bootswatch/dist/darkly/variables";
 @import "utils/variables";
-// @import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
-@import "~bootstrap/scss/functions";
+// @import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
+// @import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
+// @import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
+// @import "~bootstrap/scss/utilities";
 
-// Layout & components
+// // Layout & components
-@import "~bootstrap/scss/root";
+// @import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
+// @import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
+// @import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
+// @import "~bootstrap/scss/images";
-@import "~bootstrap/scss/containers";
+// @import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
+// @import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
+// @import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
+// @import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
+// @import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
+// @import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
+// @import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
+// @import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/nav";
+// @import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
+// @import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
+// @import "~bootstrap/scss/card";
-@import "~bootstrap/scss/badge";
+// @import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/alert";
+// @import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
+// @import "~bootstrap/scss/progress";
-//@import "~bootstrap/scss/list-group";
+// //@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/close";
-@import "~bootstrap/scss/toasts";
+// @import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
+// @import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/placeholders";
+// @import "~bootstrap/scss/placeholders";
 
-// Helpers
+// // Helpers
-@import "~bootstrap/scss/helpers";
+// @import "~bootstrap/scss/helpers";
 
-// Utilities
+// // Utilities
-@import "~bootstrap/scss/utilities/api";
+// @import "~bootstrap/scss/utilities/api";
 @import "~bootswatch/dist/darkly/bootswatch";
 @import "utils/style";     

components/wifi-manager/webapp/webapp.cmake

@@ -1,4 +1,5 @@
-target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.eb4a1bb223a59c656f2c.css.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.f2de74635f23b31fbdce.css.gz BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/favicon-32x32.png BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/index.html.gz BINARY)
-target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.0ff7b6.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.7581c6.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/node_vendors.7581c6.bundle.js.gz BINARY)

components/wifi-manager/webapp/webpack.c

@@ -1,29 +1,34 @@
 // Automatically generated. Do not edit manually!.
 #include <inttypes.h>
-extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_start[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_start");
+extern const uint8_t _index_f2de74635f23b31fbdce_css_gz_start[] asm("_binary_index_f2de74635f23b31fbdce_css_gz_start");
-extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_end[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_end");
+extern const uint8_t _index_f2de74635f23b31fbdce_css_gz_end[] asm("_binary_index_f2de74635f23b31fbdce_css_gz_end");
 extern const uint8_t _favicon_32x32_png_start[] asm("_binary_favicon_32x32_png_start");
 extern const uint8_t _favicon_32x32_png_end[] asm("_binary_favicon_32x32_png_end");
 extern const uint8_t _index_html_gz_start[] asm("_binary_index_html_gz_start");
 extern const uint8_t _index_html_gz_end[] asm("_binary_index_html_gz_end");
-extern const uint8_t _index_0ff7b6_bundle_js_gz_start[] asm("_binary_index_0ff7b6_bundle_js_gz_start");
+extern const uint8_t _index_7581c6_bundle_js_gz_start[] asm("_binary_index_7581c6_bundle_js_gz_start");
-extern const uint8_t _index_0ff7b6_bundle_js_gz_end[] asm("_binary_index_0ff7b6_bundle_js_gz_end");
+extern const uint8_t _index_7581c6_bundle_js_gz_end[] asm("_binary_index_7581c6_bundle_js_gz_end");
+extern const uint8_t _node_vendors_7581c6_bundle_js_gz_start[] asm("_binary_node_vendors_7581c6_bundle_js_gz_start");
+extern const uint8_t _node_vendors_7581c6_bundle_js_gz_end[] asm("_binary_node_vendors_7581c6_bundle_js_gz_end");
 const char * resource_lookups[] = {
-	"/css/index.eb4a1bb223a59c656f2c.css.gz",
+	"/css/index.f2de74635f23b31fbdce.css.gz",
 	"/favicon-32x32.png",
 	"/index.html.gz",
-	"/js/index.0ff7b6.bundle.js.gz",
+	"/js/index.7581c6.bundle.js.gz",
+	"/js/node_vendors.7581c6.bundle.js.gz",
 ""
 };
 const uint8_t * resource_map_start[] = {
-	_index_eb4a1bb223a59c656f2c_css_gz_start,
+	_index_f2de74635f23b31fbdce_css_gz_start,
 	_favicon_32x32_png_start,
 	_index_html_gz_start,
-	_index_0ff7b6_bundle_js_gz_start
+	_index_7581c6_bundle_js_gz_start,
+	_node_vendors_7581c6_bundle_js_gz_start
 };
 const uint8_t * resource_map_end[] = {
-	_index_eb4a1bb223a59c656f2c_css_gz_end,
+	_index_f2de74635f23b31fbdce_css_gz_end,
 	_favicon_32x32_png_end,
 	_index_html_gz_end,
-	_index_0ff7b6_bundle_js_gz_end
+	_index_7581c6_bundle_js_gz_end,
+	_node_vendors_7581c6_bundle_js_gz_end
 };

components/wifi-manager/webapp/webpack.config.js

@@ -17,6 +17,8 @@ const devserver = require('./webpack/webpack.dev.js');
 const fs = require('fs');
 const zlib = require("zlib");
 const PurgeCSSPlugin = require('purgecss-webpack-plugin')
+const whitelister = require('purgecss-whitelister');
+
 
 const PATHS = {
   src: path.join(__dirname, 'src')
@@ -129,11 +131,13 @@ module.exports = (env, options) => (
           },          
           {
             test: /\.js$/,
-            exclude: /(node_modules|bower_components)/,
+            //exclude: /(node_modules|bower_components)/,
             use: {
               loader: "babel-loader",
               options: {
                 presets: ["@babel/preset-env"],
+                plugins: ['@babel/plugin-transform-runtime']
+
               },
             },
           },
@@ -199,7 +203,11 @@ module.exports = (env, options) => (
           filename: "css/[name].[contenthash].css",
         }),
         new PurgeCSSPlugin({
-          paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
+          keyframes: false,
+          paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, {
+            nodir: true
+          }),
+          whitelist: whitelister('bootstrap/dist/css/bootstrap.css')
         }),
         new webpack.ProvidePlugin({
           $: "jquery",
@@ -224,10 +232,9 @@ module.exports = (env, options) => (
           function (stats, arguments) {
 
             if (options.mode !== "production") return;
-            let wifiManagerPath=path.posix.resolve(process.cwd(),'..','..');
+            let buildRootPath = path.join(process.cwd(),'..','..','..');
-            let buildCRootPath=path.posix.resolve(process.cwd(),'..','..','..','..');
+            let wifiManagerPath=glob.sync(path.join(buildRootPath,'components/**/wifi-manager*'))[0];
-            let distPath = path.posix.resolve('dist');
+            let buildCRootPath=glob.sync(buildRootPath)[0];
-            let posixWebAppPath=path.posix.resolve(process.cwd(),'..');
             fs.appendFileSync('./dist/index.html.gz', 
               zlib.gzipSync(fs.readFileSync('./dist/index.html'), 
               {
@@ -285,7 +292,8 @@ extern const uint8_t * resource_map_end[];`;
                 
                 list.forEach(foundFile => {
                   let exportName = path.basename(foundFile).replace(/[\. \-]/gm, '_');
-                  let cmakeFileName = path.posix.relative(wifiManagerPath,foundFile);
+                  //take the full path of the file and make it relative to the build directory
+                  let cmakeFileName = path.posix.relative(wifiManagerPath,glob.sync(path.resolve(foundFile))[0]);
                   let httpRelativePath=path.posix.join('/',path.posix.relative('dist',foundFile));
                   exportDef += `extern const uint8_t _${exportName}_start[] asm("_binary_${exportName}_start");\nextern const uint8_t _${exportName}_end[] asm("_binary_${exportName}_end");\n`;
                   lookupDef += `\t"${httpRelativePath}",\n`;
@@ -314,9 +322,19 @@ extern const uint8_t * resource_map_end[];`;
       ],
       optimization: {
         minimize: true,
+        providedExports: true,
         minimizer: [
          
-          new TerserPlugin(),
+          new TerserPlugin({
+            terserOptions: {
+              format: {
+                  comments: false,
+              },
+            },
+            extractComments: false,
+          // enable parallel running
+            parallel: true,
+          }),
           new HtmlMinimizerPlugin(),
           new CssMinimizerPlugin(),
           new ImageMinimizerPlugin({
@@ -358,16 +376,16 @@ extern const uint8_t * resource_map_end[];`;
           //new BundleAnalyzerPlugin()
 
         ],
-        // splitChunks: {
+        splitChunks: {
-        //   cacheGroups: {
+          cacheGroups: {
-        //     styles: {
+              vendor: {
-        //       name: 'styles',
+                  name: "node_vendors",
-        //       test: /\.css$/,
+                  test: /[\\/]node_modules[\\/]/,
-        //       chunks: 'all',
+                  chunks: "all",
-        //       enforce: true
+              }
-        //     }
+          }
-        //   }
+      }
-        // }
+      
       },
       //   output: {
       //     filename: "[name].js",

components/wifi-manager/webapp/webpack.h

@@ -1,6 +1,6 @@
 /***********************************
 webpack_headers
-dist/css/index.eb4a1bb223a59c656f2c.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.0ff7b6.bundle.js.gz
+dist/css/index.f2de74635f23b31fbdce.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.7581c6.bundle.js.gz,dist/js/node_vendors.7581c6.bundle.js.gz
 ***********************************/
 #pragma once
 #include <inttypes.h>

docker/entrypoint.sh

@@ -6,4 +6,8 @@ echo "npm version is $(npm --version)"
 echo "node version is $(node --version)"
 echo "To build the web application, run:"
 echo "pushd components/wifi-manager/webapp/ && npm rebuild node-sass && npm run-script build && popd"
+echo ""
+echo "To run size statistics, run:"
+echo "puncover/runner.py --gcc_tools_base $GCC_TOOLS_BASE --elf ./build/recovery.elf --build_dir build --src_root ."
+echo ""
 exec "$@"