cbschuld / monoprice-multizone-interface Goto Github PK

This is a React JS app written in TypeScript that provides a web-based interface to control the six channel multi-zone amplifier from Monoprice via a JSON API on a Raspberry Pi.

Home Page: https://chrisschuld.com/projects/react-app-for-the-monoprice-six-zone-audio-controller/

HTML 4.52% CSS 3.35% TypeScript 92.14%

react reactjs typescript webapplication homeautomation home-automation monoprice amplifier amp

monoprice-multizone-interface's Introduction

Monoprice Multizone Amp WebApp Interface

This is a React JS app written in TypeScript that provides a web-based interface to control the six channel multi-zone amplifier from Monoprice via a JSON API on a Raspberry Pi.

This project provides just the web application. You will need to have the JSON API project running already before you use this application. You can get more information about that API via this walk-through (API is hosted via github here - https://github.com/jnewland/mpr-6zhmaut-api).

What do I need?

You need the following things for this app to work:

The six channel multi-zone amplifier from Monoprice
Serial cable to USB-A - this one works GREAT (and this can be tricky to get one with correct functionality): USB 2.0 to RS232 DB9 Serial Cable Male A Converter Adapter with PL2303 Chipset
Raspberry pi or a Raspberry Pi Starter Kit - everything you need
Jesse Newland's API - via this walk-through
This WebApp (keep reading...)

Installing and Using the Web App

Clone the Repo

To get started you need to put the TypeScript React app on your local machine (or on the raspberry pi). Also, you need to make sure you have the latest version of npm installed on your machine.

notes: move your change directory to your project directly

cd /projects
git clone https://github.com/cbschuld/monoprice-multizone-interface.git
cd monoprice-multizone-interface
npm install

Adjust the Environment

There is file in the root path called env.sample.tsx (in the src folder). You will need to copy this file over as env.tsx and adjust this file to match your amplifier/controller setup before you go to the next step. You will see in there that you can use custom icons for each zone/room. I have included what I use in my sample image to help your setup.

Build the App

Now that your environment is updated you can build the App to get ready to ship it to the Raspberry Pi (where your API is located most likely). Staying on the same machine run the following.

npm build

Raspberry Pi - Installing the React App

Next, on the Raspberry Pi run the following commands to install nginx

sudo apt-get update
sudo apt-get install nginx
sudo chown -R pi:root /var/www/html

Wherever you ran the npm build command you will now see a build directory. Copy that directory to the /var/www/html path on the Raspberry Pi. In my case I built it on my local development machine and just used scp to copy the build directoy to the Pi. (Note: my Raspberry Pi is located at 10.0.0.82)

cd /projects/monoprice-multizone-interface
scp -r * [email protected]:/var/www/html/

View the App

That is all it takes to use this application; if you point your browser to the IP address of the Raspberry Pi you'll see the App!

Contributions

fork
create a feature branch
open a Pull Request

monoprice-multizone-interface's People

Contributors

Stargazers

Watchers

Forkers

aurels drj-io zolapop ssrowe dkmansion augustsix dcheck

monoprice-multizone-interface's Issues

Build breaks with node > 16

Hello!
First, thank you for this cool project, very nicely written and designed app!

No big deal really once you figure it out, but just thought I should share this here in case anyone experiences the same bug. When trying to build or start the dev server using a Node version > 16, it fails with the error listed in this StackOverflow post:

node:internal/modules/cjs/loader:488
      throw e;
  ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/juliantc/Desktop/ai-    studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Not sure what the true fix would be, but if you're using some sort of node version manager (I use volta), an easy workaround is using node @ 16.x

Channel Slider UX is a bit wonky sometimes

First I want to say that this is a great project. We are using both the API and the front end service with our two multizone amps.

I might look into this a bit further, but sometimes the channel sliders go into "selection" mode while trying to alter the settings in safari. It mostly drives my wife crazy, she's asked to just make it so that there's an integer input.

I'm not too savvy with TS/React but this CSS snippet might be valuable.

https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting

I might take a look at the code myself when I get time, and if I find a fix, I'll pop in a PR. Thanks again for the great OSS contribution!

env sample was deleted in lastest version.

/src/env.sample.tsx is no longer aviailable and was removed.

move to latest assets/components/includes

update all of the components and assets to the latest versions

Issue with ZonePowerVolumeControl.tsx

Thanks for updating this script recently. I really appreciate your work on this. I've complied on two machines today and gotten this error. Can you replicate?

/projects/monoprice-multizone-interface/src/ZonePowerVolumeControl.tsx
TypeScript error in /projects/monoprice-multizone-interface/src/ZonePowerVolumeControl.tsx(60,48):
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'. TS2345

58 |                         style={{width:'48px'}}
59 |                         onChange={(selected:LabeledValue)=>{

60 | setSource(parseInt(selected.key));
| ^
61 | onSourceChange(info.zone,selected.key);
62 | }}
63 | value={{key:source.toString(),label:getSourceIcon()}}