{"id":21681787,"url":"https://github.com/cbschuld/monoprice-multizone-interface","last_synced_at":"2025-04-12T06:42:39.628Z","repository":{"id":39577614,"uuid":"119324232","full_name":"cbschuld/monoprice-multizone-interface","owner":"cbschuld","description":"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.","archived":false,"fork":false,"pushed_at":"2023-01-03T22:11:07.000Z","size":5279,"stargazers_count":15,"open_issues_count":12,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T06:42:36.176Z","etag":null,"topics":["amp","amplifier","home-automation","homeautomation","monoprice","react","reactjs","typescript","webapplication"],"latest_commit_sha":null,"homepage":"https://chrisschuld.com/projects/react-app-for-the-monoprice-six-zone-audio-controller/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cbschuld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-29T03:03:00.000Z","updated_at":"2024-12-21T18:12:11.000Z","dependencies_parsed_at":"2023-02-01T11:00:45.384Z","dependency_job_id":null,"html_url":"https://github.com/cbschuld/monoprice-multizone-interface","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbschuld%2Fmonoprice-multizone-interface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbschuld%2Fmonoprice-multizone-interface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbschuld%2Fmonoprice-multizone-interface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbschuld%2Fmonoprice-multizone-interface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cbschuld","download_url":"https://codeload.github.com/cbschuld/monoprice-multizone-interface/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530612,"owners_count":21119592,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amp","amplifier","home-automation","homeautomation","monoprice","react","reactjs","typescript","webapplication"],"created_at":"2024-11-25T15:31:30.493Z","updated_at":"2025-04-12T06:42:39.600Z","avatar_url":"https://github.com/cbschuld.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monoprice Multizone Amp WebApp Interface\n\nThis is a React JS app written in TypeScript that provides a web-based interface to control the [six channel multi-zone amplifier from Monoprice](https://www.monoprice.com/product?p_id=10761) via a JSON API on a [Raspberry Pi](https://amzn.to/2Xk58og).\n\nThis 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](https://chrisschuld.com/2019/07/decorating-the-monoprice-6-zone-home-audio-multizone-controller/) (API is hosted via github here - [https://github.com/jnewland/mpr-6zhmaut-api](https://github.com/jnewland/mpr-6zhmaut-api)).\n\n\n\u003cimg src=\"https://s3-us-west-2.amazonaws.com/chrisschuld.com/images/iphone-render-house-audio.png\" style=\"width:400px;\"/\u003e\n\n## What do I need?\n\nYou need the following things for this app to work:\n+ The [six channel multi-zone amplifier from Monoprice](https://www.monoprice.com/product?p_id=10761)\n+ 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](https://amzn.to/2ypmceB)\n+ Raspberry pi or a [Raspberry Pi Starter Kit - everything you need](https://amzn.to/33cXPz4)\n+ Jesse Newland's API - [via this walk-through](https://chrisschuld.com/2019/07/decorating-the-monoprice-6-zone-home-audio-multizone-controller/)\n+ This WebApp (keep reading...)\n\n## Installing and Using the Web App\n\n### Clone the Repo\n\nTo 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.\n\n*notes: move your change directory to your project directly*\n\n```bash\ncd /projects\ngit clone https://github.com/cbschuld/monoprice-multizone-interface.git\ncd monoprice-multizone-interface\nnpm install\n```\n\n### Adjust the Environment\n\nThere 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.\n\n### Build the App\n\nNow 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.\n\n```bash\nnpm build\n```\n\n### Raspberry Pi - Installing the React App\n\nNext, on the Raspberry Pi run the following commands to install nginx\n\n```bash\nsudo apt-get update\nsudo apt-get install nginx\nsudo chown -R pi:root /var/www/html\n```\n\nWherever 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)*\n\n```bash\ncd /projects/monoprice-multizone-interface\nscp -r * pi@10.0.0.82:/var/www/html/\n```\n\n### View the App\n\nThat 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!\n\n## Contributions\n\n* fork\n* create a feature branch\n* open a Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbschuld%2Fmonoprice-multizone-interface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcbschuld%2Fmonoprice-multizone-interface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbschuld%2Fmonoprice-multizone-interface/lists"}