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
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
- Getting Started with React.js
- Getting Started with GraphQL and Relay
- React.js Questions on StackOverflow
- React.js Discussion Board
- Learn ES6, ES6 Features
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