micro-nova · SteveMicroNova · Dec 7, 2023 · Dec 6, 2023 · Dec 7, 2023
diff --git a/.gitignore b/.gitignore
@@ -167,6 +167,7 @@ gmrender-resurrect
 # Amplipi Web
 web/generated/*
 web/uploads/*
+web/node_modules/*
 
 # Firmware builds
 fw/preamp/Debug

diff --git a/NEW_RELEASE.md b/NEW_RELEASE.md
@@ -7,6 +7,7 @@ So you think you are ready to make a release, eh? Follow the steps below :)
 - [ ] Make a branch off develop called VERSION-prelease
 - [ ] Update the changelog with notes and the latest version (and commit it!)
 - [ ] Update the API by running the `scripts/create_spec` script and commit the resulting changes to `docs/amplipi_api.yaml` with `git commit --patch -m "Update API specification used by GitHub Pages"`
+- [ ] Build the webapp with `npm run build` and force add the changes with `git add -f web/dist`
 - [ ] Use poetry to bump the version with `poetry version ${VERSION}-alpha.0 && git add pyproject.toml && git commit -m "Bump pre-release version"`
 - [ ] Tag the changes so we can make a pre-release on GitHub `git tag -as ${VERSION}-alpha.0 -m '' && git push origin ${VERSION}-alpha.0`
 - [ ] Make a pre-release using the GitHub interface

diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ AmpliPi hosts a mobile-friendly web app that can control the system from any PC
 Here's an example of changing group and zone volumes:
 <p align="center">
   <img alt="Changing group and zone volumes"
-      src="docs/imgs/app_demos/expand_group_and_change_vols_small.gif" width="250">
+      src="docs/imgs/app_demos/change_vols.gif" width="250">
   </img>
 </p>
 

diff --git a/docs/WEB_APP.md b/docs/WEB_APP.md
@@ -3,57 +3,66 @@ AmpliPi hosts a mobile-friendly web app that can control the system from any PC
 
 ## Selecting an audio source
 A source has an input selector to pick what is playing. So, playing a Pandora radio station on that source is as
-simple as picking say Matt and Kim Radio from the drop down.
+simple as picking say Matt and Kim Radio from the pop up
+You can do this by tapping the name of the source on either the home view or the player view
 <p align="center">
   <img alt="Selecting an audio source"
-      src="imgs/app_demos/change_source_small.gif"
+      src="imgs/app_demos/change_source.gif"
       width="250">
   </img>
 </p>
 
 ## Changing Group and Zone volumes
-Underneath the input selector are the volume controls for groups and zones connected to the source. The number of zones present is determined by the number of zone expander units discovered during system startup. Zone volume controls only control themselves, whereas group volume controls adjust the volume for all of the zones in the group. The user can create an unlimited number of groups. Zones can also belong to multiple groups.
+There are volume controls at the bottom of every mini-player on the home screen that will effect all groups and zones that source is playing to. To change the volume of groups or zones individually, select the player by tapping the center of the mini-player on the home screen and then enter the player view tab at the bottom of the screen, then open the dropdowns to find the volume slider you want.
+The number of zones present is determined by the number of zone expander units discovered during system startup. Zone volume controls only control themselves, whereas group volume controls adjust the volume for all of the zones in the group. The user can create an unlimited number of groups. Zones can also belong to multiple groups.
 <p align="center">
   <img alt="Changing group and zone volumes"
-      src="imgs/app_demos/expand_group_and_change_vols_small.gif" width="250">
+      src="imgs/app_demos/change_vols.gif" width="250">
   </img>
 </p>
 
 ## Adding a group or zone to a different source
 Below the volumes is an add zone/group selector. To play the current Pandora station when you move to the living room, just add ‘living room’ from the selector. Living room will be removed from the audio source it was previously connected to (if any).
 <p align="center">
   <img alt="Adding a group to a source"
-      src="imgs/app_demos/add_group_to_source_small.gif"
+      src="imgs/app_demos/change_source.gif"
       width="250">
   </img>
 </p>
 
 ## Loading a preset
-We figured that presets should be simple to access, while not taking up much space while they weren't in use. This compromise led us to hide the presets in the AmpliPi logo. Just click the AmpliPi logo to access the preset control pane. Using presets, we can play the Matt and Kim radio station thoughout the house in a couple of clicks.
+Presets allow you to return your system to a specific state, with different sources playing in specific zones at the specific volumes. To create a preset, go to the settings page (the gear icon ⚙ on the bottom tab) and enter the presets page to create a preset based on your current system state, creating a save file of what sources are playing in what groups/zones at the volumes they're currently set to.
+To use a preset, hit the presets button on the main page and select whichever preset you'd like.
 <p align="center">
   <img alt="Load a preset"
-      src="imgs/app_demos/load_preset_small.gif"
+      src="imgs/app_demos/load_preset.gif"
       width="250">
   </img>
 </p>
 
 ## Settings
-The setting menu, found with the gear icon (⚙) in the top right corner provides an interface to configure inputs, zones, and groups.
+The setting menu, found with the gear icon (⚙) in the bottom right corner provides an interface to configure inputs, zones, and groups.
 
 ### Configuring an RCA Input
-Each of the 4 RCA Inputs can be named based on the device connected using the ⚙->Inputs menu. Below is an example of how to rename Input 1.
+Each of the 4 RCA Inputs can be named based on the device connected using the ⚙->Streams menu. Below is an example of how to rename Input 1.
 <p align="center">
   <img alt="Configuring an RCA Input"
-      src="imgs/app_demos/settings_update_input1_small.gif"
+      src="imgs/app_demos/settings_update_input1.gif"
       width="250">
   </img>
 </p>
 
 ### Configuring a Pandora Stream
-Changing the configuration of different streams or creating new streams can be done using the ⚙->Inputs menu. Below is an example of how to configure the default pandora station to play Matt and Kim radio.
+Changing the configuration of different streams or creating new streams can be done using the ⚙->Streams menu. Below is an example of how to configure the default pandora station, as well as an example of a station ID and where to find it.
 <p align="center">
   <img alt="Configuring a Pandora Stream"
-      src="imgs/app_demos/settings_update_pandora_small.gif"
+      src="imgs/app_demos/pandora_url_id.png"
+      width="250">
+  </img>
+</p>
+<p align="center">
+  <img alt="Configuring a Pandora Stream"
+      src="imgs/app_demos/settings_update_pandora.gif"
       width="250">
   </img>
 </p>
diff --git a/docs/imaging_etcher.md b/docs/imaging_etcher.md
@@ -1,47 +1,50 @@
 # Imaging with Etcher
 
 ## What You'll Need
-  * A computer running MacOS, Linux, or Windows
+  * A computer running Windows, MacOS or Linux
   * A micro USB cable
-  * Your Amplipi
+  * Your AmpliPi
 
-## 1. Get the Latest Amplipi Image
-  Download the latest image of Amplipi from [here](https://drive.google.com/file/d/1VHQhHivWCNVwmHukqtjjWu322Nxu_iDp/view) and save it to your computer.
+## 1. Get the Latest AmpliPi Image
+  Download the latest AmpliPi image from [here](https://drive.google.com/file/d/1VHQhHivWCNVwmHukqtjjWu322Nxu_iDp/view) and save it to your computer.
 
-## 2. Get Etcher
-Download and install (if necessary) the latest version of Etcher from [etcher.io](https://etcher.io/).
+## 2. Get RPIBoot
+Download and install the latest version of RPIBoot from [here](https://github.com/raspberrypi/usbboot/raw/master/win32/rpiboot_setup.exe) on windows, otherwise refer to the instructions for [building RPIBoot](https://github.com/raspberrypi/usbboot#building).
 
-## 3. Connect your Amplipi to your computer
-  Unplug your Amplipi from power and then connect your Amplipi to your computer via the service port using the micro USB cable. Once connected, plug your Amplipi back into power.
+## 3. Get Etcher
+Download and install (if necessary) the latest version of Etcher from [etcher.io](https://etcher.io/), on windows use the portable version.
+
+## 4. Connect your AmpliPi to your computer
+  Unplug your AmpliPi from power and then connect your AmpliPi to your computer via the service port using the micro USB cable. Once connected, plug your AmpliPi back into power.
 
   ![connected to service port](imgs/flashing/plugged_sp.jpg)
 
-  IMPORTANT - You must connect your Amplipi to your computer before plugging it into power or the Compute Module will not be recognized.
+  IMPORTANT - You must connect your AmpliPi to your computer before plugging it into power or the Compute Module will not be recognized.
 
-## 4. Open Etcher and Select the Amplipi Image
-  Open Etcher and select "Flash from file", then select the Amplipi image you downloaded in step 1.
+## 5. Open Etcher and Select the AmpliPi Image
+  Open Etcher and select "Flash from file", then select the AmpliPi image you downloaded in step 1.
 
  ![selecting image](imgs/flashing/image.png)
 
-## 5. Select the Compute Module
+## 6. Select the Compute Module
   Click the "Select target" button and select the Compute Module from the list of available drives.
 
   ![selecting device](imgs/flashing/device.png)
 
   WARNING -  Make sure to select the compute module! If you select the wrong drive, you may overwrite your computer's hard drive!
 
-## 6. Flash the Image
-  Click the "Flash!" button to begin flashing the image to your Amplipi.
+## 7. Flash the Image
+  Click the "Flash!" button to begin flashing the image to your AmpliPi.
 
   ![ready to flash](imgs/flashing/ready.png)
 
   This process may take several minutes so feel free to grab a cup of coffee or your preferred beverage.
 
 ![flashing](imgs/flashing/flashing.png)
 
-## 7. Disconnect your Amplipi from your computer
-  Once Etcher has finished flashing the image, unplug your Amplipi from power and disconnect the micro USB cable. Now you're ready to boot up your Amplipi! The username and password will be reset to the defaults of pi and raspberry, respectively.
+## 8. Disconnect your AmpliPi from your computer
+  Once Etcher has finished flashing the image, unplug your AmpliPi from power and disconnect the micro USB cable. Now you're ready to boot up your AmpliPi! The username and password will be reset to the defaults of pi and raspberry, respectively.
 
   ![unplugged from service port](imgs/flashing/unplugged_sp.jpg)
 
-  IMPORTANT - You must unplug your micro USB cable before plugging your Amplipi back into power or the Compute Module will not boot properly.
+  IMPORTANT - You must unplug your micro USB cable before plugging your AmpliPi back into power or the Compute Module will not boot properly.
diff --git a/docs/imgs/app_demos/HOW_TO.md b/docs/imgs/app_demos/HOW_TO.md
@@ -1,27 +1,13 @@
-# Gif creation process
-1. Take screenshots using AmpliPi with iPhone, making sure to take one before and after any user action. Copy the files to your computer.
-1. Open gimp, and click File->Open as Layers. Select the whole sequence of screenshots taken.
-1. Organize the layers top down from last to first. It will probably be the opposite at first.
-1. Add touches with the pencil tool using a circular tip with 30% opacity (use black or white to contrast with the touched background)
-1. Add a set of layers for each click to emulate a click ie:
-    * L1 - before click
-    * L2 - before click + touch
-    * L3 - before click copy
-    * L4 - after click
-1. click Filters->Animation->Optimize for GIF. This will make a duplicate project and remove repeated parts of the images to optize the gif.
-1. Add extra transparent frames to show timing delays
-  Simple recommendation: use 4fps (250ms period) and after every click add 4 transparent frames (1 sec)
-    * L1 - before click
-    * L2 - before click + touch
-    * L3 - before click copy
-    * L4 - after click
-    * L5 - transparent
-    * L6 - transparent
-    * L7 - transparent
-    * L8 - transparent
-1. Add 3 seconds worth of delay at the end (to demonstrate this is the end since we will make this gif play in a loop)
-1. Export to a gif using File->Export
-    * set the filename to something.gif
-    * Check the options: as animation, loop forever, and use delay entered. Set delay to 250ms.
-1. View the gif and make sure it looks good
-1. Use the create_smaller_sizes script to make smaller gifs
+#Gif creation process
+
+1. On an iOS device that supports it, make sure screencapture is enabled by going to Settings -> Control Center and adding Screen Recording to the list of included controls
+2. Open amplipi UI, start a screen recording, do what you're trying to capture a gif of
+3. Go to photo library, open the video, and edit it
+  3a. Crop out the clock/battery at the top, crop out the url bar from the bottom
+  3b. remove any excess time from the start, end (especially if it shows the control panel ui)
+4. Go to https://ezgif.com/video-to-gif and upload the videos one at a time
+5. make sure the settings are as such:
+  5a. end time set to the length of the video
+  5b. Size set to "AUTOx320"
+  5c. Frame rate set to 5 FPS
+  5d. If the clip doesnt involve much scrolling vertically, hit the "Optimize for static background" checkbox
diff --git a/docs/imgs/app_demos/add_group_to_source.gif b/docs/imgs/app_demos/add_group_to_source.gif
diff --git a/docs/imgs/app_demos/add_group_to_source/IMG_0057.png b/docs/imgs/app_demos/add_group_to_source/IMG_0057.png
diff --git a/docs/imgs/app_demos/add_group_to_source/IMG_0058.png b/docs/imgs/app_demos/add_group_to_source/IMG_0058.png
diff --git a/docs/imgs/app_demos/add_group_to_source/IMG_0059.png b/docs/imgs/app_demos/add_group_to_source/IMG_0059.png
diff --git a/docs/imgs/app_demos/add_group_to_source/IMG_0060.png b/docs/imgs/app_demos/add_group_to_source/IMG_0060.png
diff --git a/docs/imgs/app_demos/add_group_to_source/IMG_0061.png b/docs/imgs/app_demos/add_group_to_source/IMG_0061.png
diff --git a/docs/imgs/app_demos/add_group_to_source/IMG_0062.png b/docs/imgs/app_demos/add_group_to_source/IMG_0062.png
diff --git a/docs/imgs/app_demos/add_group_to_source/IMG_0063.png b/docs/imgs/app_demos/add_group_to_source/IMG_0063.png
diff --git a/docs/imgs/app_demos/add_group_to_source/add_group_to_source.xcf b/docs/imgs/app_demos/add_group_to_source/add_group_to_source.xcf
diff --git a/docs/imgs/app_demos/add_group_to_source_small.gif b/docs/imgs/app_demos/add_group_to_source_small.gif
diff --git a/docs/imgs/app_demos/add_group_to_source_tiny.gif b/docs/imgs/app_demos/add_group_to_source_tiny.gif
diff --git a/docs/imgs/app_demos/change_source.gif b/docs/imgs/app_demos/change_source.gif
diff --git a/docs/imgs/app_demos/change_source/IMG_0048.png b/docs/imgs/app_demos/change_source/IMG_0048.png
diff --git a/docs/imgs/app_demos/change_source/IMG_0049.png b/docs/imgs/app_demos/change_source/IMG_0049.png
diff --git a/docs/imgs/app_demos/change_source/IMG_0050.png b/docs/imgs/app_demos/change_source/IMG_0050.png
diff --git a/docs/imgs/app_demos/change_source/IMG_0051.png b/docs/imgs/app_demos/change_source/IMG_0051.png
diff --git a/docs/imgs/app_demos/change_source/IMG_0052.png b/docs/imgs/app_demos/change_source/IMG_0052.png
diff --git a/docs/imgs/app_demos/change_source/IMG_0053.png b/docs/imgs/app_demos/change_source/IMG_0053.png
diff --git a/docs/imgs/app_demos/change_source/IMG_0054.png b/docs/imgs/app_demos/change_source/IMG_0054.png
diff --git a/docs/imgs/app_demos/change_source/change_source.xcf b/docs/imgs/app_demos/change_source/change_source.xcf
diff --git a/docs/imgs/app_demos/change_source_small.gif b/docs/imgs/app_demos/change_source_small.gif
diff --git a/docs/imgs/app_demos/change_source_tiny.gif b/docs/imgs/app_demos/change_source_tiny.gif
diff --git a/docs/imgs/app_demos/change_vols.gif b/docs/imgs/app_demos/change_vols.gif
diff --git a/docs/imgs/app_demos/change_zone.gif b/docs/imgs/app_demos/change_zone.gif
diff --git a/docs/imgs/app_demos/create_smaller_sizes b/docs/imgs/app_demos/create_smaller_sizes
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols.gif b/docs/imgs/app_demos/expand_group_and_change_vols.gif
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0030.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0030.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0031.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0031.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0032.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0032.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0033.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0033.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0034.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0034.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0035.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0035.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0036.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0036.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0037.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0037.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0038.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0038.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0039.png b/docs/imgs/app_demos/expand_group_and_change_vols/IMG_0039.png
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols/expand_group_and_change_vols.xcf b/docs/imgs/app_demos/expand_group_and_change_vols/expand_group_and_change_vols.xcf
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols_small.gif b/docs/imgs/app_demos/expand_group_and_change_vols_small.gif
diff --git a/docs/imgs/app_demos/expand_group_and_change_vols_tiny.gif b/docs/imgs/app_demos/expand_group_and_change_vols_tiny.gif
diff --git a/docs/imgs/app_demos/load_preset.gif b/docs/imgs/app_demos/load_preset.gif
diff --git a/docs/imgs/app_demos/load_preset/after_mk.PNG b/docs/imgs/app_demos/load_preset/after_mk.PNG
diff --git a/docs/imgs/app_demos/load_preset/before_pst_expand.PNG b/docs/imgs/app_demos/load_preset/before_pst_expand.PNG
diff --git a/docs/imgs/app_demos/load_preset/load_preset.xcf b/docs/imgs/app_demos/load_preset/load_preset.xcf
diff --git a/docs/imgs/app_demos/load_preset/pst_check_done.PNG b/docs/imgs/app_demos/load_preset/pst_check_done.PNG
diff --git a/docs/imgs/app_demos/load_preset/pst_done_update.PNG b/docs/imgs/app_demos/load_preset/pst_done_update.PNG
diff --git a/docs/imgs/app_demos/load_preset/pst_expand.PNG b/docs/imgs/app_demos/load_preset/pst_expand.PNG
diff --git a/docs/imgs/app_demos/load_preset_small.gif b/docs/imgs/app_demos/load_preset_small.gif
diff --git a/docs/imgs/app_demos/load_preset_tiny.gif b/docs/imgs/app_demos/load_preset_tiny.gif
diff --git a/docs/imgs/app_demos/pandora_url_id.png b/docs/imgs/app_demos/pandora_url_id.png
diff --git a/docs/imgs/app_demos/settings_update_input1.gif b/docs/imgs/app_demos/settings_update_input1.gif
diff --git a/docs/imgs/app_demos/settings_update_input1/settings_update_input1.xcf.tar.gz b/docs/imgs/app_demos/settings_update_input1/settings_update_input1.xcf.tar.gz
diff --git a/docs/imgs/app_demos/settings_update_input1_small.gif b/docs/imgs/app_demos/settings_update_input1_small.gif
diff --git a/docs/imgs/app_demos/settings_update_input1_tiny.gif b/docs/imgs/app_demos/settings_update_input1_tiny.gif
diff --git a/docs/imgs/app_demos/settings_update_pandora.gif b/docs/imgs/app_demos/settings_update_pandora.gif
diff --git a/docs/imgs/app_demos/settings_update_pandora/settings_update_pandora.xcf.tar.gz b/docs/imgs/app_demos/settings_update_pandora/settings_update_pandora.xcf.tar.gz
diff --git a/docs/imgs/app_demos/settings_update_pandora_small.gif b/docs/imgs/app_demos/settings_update_pandora_small.gif
diff --git a/docs/imgs/app_demos/settings_update_pandora_tiny.gif b/docs/imgs/app_demos/settings_update_pandora_tiny.gif
diff --git a/docs/imgs/flashing/image.png b/docs/imgs/flashing/image.png
diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "amplipi"
-version = "0.2.1+731258c-Webapp2-RUM-dirty"
+version = "0.3.0+3d268f1-upstream_lms-dirty"
 description = "A Pi-based whole house audio controller"
 authors = [
   "Lincoln Lorenz <[email protected]>",
@@ -39,10 +39,9 @@ include = [
   "hw/**",
   "scripts/*",
   "streams/**/*",
-  "web/**/*",
-  "web2/**/*",
   "bin/**",
   "docs/**",
+  "web/dist"
 ]
 exclude = [
   "scripts/deploy", "scripts/bootstrap_pi" # only support development

diff --git a/scripts/configure.py b/scripts/configure.py
@@ -89,17 +89,6 @@
              'libgirepository1.0-dev', 'libcairo2-dev',
             ],
   },
-  'web' : {
-    'script' : [
-      'curl -sL https://deb.nodesource.com/setup_19.x | sudo -E bash -', # Run script to add nodejs repo
-      'sudo apt-get install -y nodejs --allow-change-held-packages',     # Install nodejs
-      'export NODE_OPTIONS=--max_old_space_size=800',                    # Increase nodejs memory limit
-      'pushd web',                                                      # Change to web directory
-      'npm install',                                                     # Install nodejs dependencies
-      'npm run build',                                                   # Build the web app
-      'popd',                                                            # Change back to previous directory
-    ],
-  },
   'logging' : {
     'script' : [
       'echo "reconfiguring secondary logging utility rsyslog to only allow remote logging"',

diff --git a/scripts/deploy b/scripts/deploy
@@ -144,6 +144,13 @@ else
 fi
 poetry version ${git_info}
 
+# build webapp
+echo "Building web app"
+pushd ../web                                                 # Change to web directory
+npm install                                                       # Install nodejs dependencies
+npm run build                                                     # Build the web app
+popd
+
 # build release file (put in dist/)
 poetry build