/brewpi-device-viewer

React component for remotely viewing the LCD and simulating the touchscreen on a Brewpi Controller.

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

Remote Display

Setup

Cross Compile Firmware

Check out the feature/cross-compile branch from brewpi firmware

cd platform/spark
make APP=controller PLATFORM=gcc -s 
cd target/controller-gcc

touch eeprom.bin

Buid this app

This React static app reqiures node 6.0.0.

Install nvm if not already done to manage node versions.

nvm install 6.0.0
nvm use 6.0.0

And then (from within the repo directory):

npm install 
npm start

Try the app

Browse to http://localhost:3000/device.

  • On starting the app you'll see an image of an unpowered Brewpi controller
  • in the firmware repo, run ./controller from the gcc build, this will start up a virtual controller
  • switch back to the browser - the device will show the screen from the controller

TOOD

  • background image doesn't render on Chrome
  • investigate why buttons on test page don't work.
  • website must be hosted at http://localhost:3000
  • Persist touch calibration to eeprom
  • command ID in message to distinguish commands:
  • describe: describes screen size and pixel format
  • pixel spread: (address, color) array of pixels.
  • reduce CPU usage of cross compiled app
  • Emulate touch screen

React Static Boilerplate

NPM version NPM downloads Build Status Dependency Status GitHub Issues To-do In progress

Static website starter kit powered by React.js and Webpack

Features

    ✓ Modern JavaScript syntax (ES2015+) via Babel
    ✓ Modern CSS syntax (CSS3+) via PostCSS
    ✓ Application state management via Redux
    ✓ Routing and navigation via React App, Universal Router, History
    ✓ Modular styles via CSS Modules
    ✓ Code-splitting and async chunk loading
    ✓ Hot Module Replacement (HMR) /w React Hot Loader
    ✓ Bundling and optimization with Webpack
    ✓ Cross-device testing with Browsersync
    ✓ Easy deployment to GitHub Pages, Amazon S3 or Firebase
    ✓ Yeoman generator (generator-react-static)
    ✓ 24/7 community support on Gitter or StackOverflow
    ✓ Customization requests on Codementor

Sponsors

       

Directory Layout

.
├── /build/                     # The folder for compiled output
├── /node_modules/              # 3rd-party libraries and utilities
├── /components/                # Shared/generic UI components
│   ├── /layout/                # Layout component
│   ├── /button/                # Button component
│   └── /...                    # etc.
├── /core/                      # Core framework
│   ├── /app.js                 # Application entry point (bootstrap)
│   ├── /store.js               # Application state manager (Redux)
│   └── /...                    # etc.
├── /routes/                    # View/screen UI components + routing information
│   ├── /about/                 # About page
│   ├── /error/                 # Error page
│   ├── /home/                  # Home page
│   └── /...                    # etc.
├── /static/                    # Static files such as favicon.ico etc.
├── /test/                      # Unit and integration tests
├── /tools/                     # Build automation scripts and utilities
│── LICENSE.txt                 # Licensing information
│── package.json                # The list of project dependencies and NPM scripts
└── README.md                   # Project overview / getting started guide

Getting Started

Just clone the repo, install Node.js modules and run npm start:

$ git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/koistya/react-static-boilerplate.git MyApp
$ cd MyApp
$ npm install           # Install project dependencies listed in package.json
$ npm start             # Build and launch the app, same as "node tools/start.js"

NODE: Make sure that you have Node.js v6 installed on your local machine.

How to Test

The unit tests are powered by chai and mocha.

$ npm test

How to Deploy

$ npm run deploy                # Deploys the project to GitHub Pages

Alternatively, you can build a production release to manually deploy to S3, Firebase, Netlify, and other static hosts. Simply run the command below and copy the generated build folder to your static host.

$ npm run build release         # Build production release

How to Update

You can always fetch and merge the recent changes from this repo back into your own project:

$ git checkout master
$ git fetch react-static-boilerplate
$ git merge react-static-boilerplate/master
$ npm install

Backers

Love React Static Boilerplate work and community? Help us keep it alive by donating funds to cover project expenses!

Related Projects

  • React Starter Kit — Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
  • Babel Starter Kit — JavaScript library boilerplate (ES2015, Babel, Rollup, Mocha, Chai, Sinon, Rewire)
  • React App — Bootstrap React application with routing, navigation, context variables and document metadata management
  • Universal Router — Isomorphic router for web and single-page applications (SPA)
  • History — A wrapper library for HTML5 History API
  • Membership Database — SQL schema boilerplate for user accounts, roles and auth tokens

Learn More

License

Copyright © 2015-2016 Konstantin Tarkus. This source code is licensed under the MIT license found in the LICENSE.txt file.

Made with ♥ by Konstantin Tarkus (@koistya) and contributors  |  MIT License