Challenge Overview
For the Hercules client, we are going to be doing some work that involves a couple of their drawing technologies, name "pxCore" and "pxScene". The links below offer a lot more details on these particular technologies. Currently, the pxscene test app is useful, but it could use a lot more features to be viable for development. This initial challenge will investigate to see if we can wrap the functionality into an Electron app that we can expand with additional features in future challenges.
Background
Pxscene is a platform independent drawing platform that will be used on a wide variety of embedded devices for the Hercules client. You can find more information here: http://www.pxscene.org/
A link to the Github project and build instructions for Mac are provided in the forum.
Requirements
The current "pxscene.app" wraps pxCore with Javascript APIs that are exposed by Node Native / V8. We'd like to make the UI *around* pxCore easier to manage and extend for development. We will not be able to change:
* Any pxCore source code
* Any source code in pxscene (other than maybe browser.js)
The goal is to have a wrapper around both pieces that's built using Electron (http://electron.atom.io/) that allows for a better UI than exists, better debug output, and some additional features for view sizing, etc...
React
To make the UI easy to build, let's use React as the base for the UI definition. You can see a good template for that here:
https://github.com/chentsulin/electron-react-boilerplate/tree/master/app
We'll do two separate, new React components in this challenge:
1. A "Pxscene" component that is the rendered screen for Pxscene and has functionality exposed via JS to load a URL in the pxscene itself
2. A "PxsceneLog" component that just scrolls the log output from Pxscene to help implement the logging requirement below
UI
The UI will be implemented in Electron, using React components and will be relatively simple for this proof of concept:
1. We are going to have a side menu on the left, and debugging tray underneath the pxscene display. The left side menu can just be mock content at this point
2. Currently, the debug output from pxscene just flows to "/private/var/tmp/pxscene.log", but we'd like to display that in a closable debug drawer underneath the pxscene display, through the "PxsceneLog" component outlined above
3. The URL entry text field will be moved from the pxscene drawable area into the Electron UI
Code layout
The goal for the code layout is to be able to reference pxCore as a git submodule in our wrapper app, avoiding any changes to that code so that we can build our wrapper with new pxCore code whenever we want. That may not be entirely possible, so if pxCore code changes are required, please document those in your README or a separate document.
There may be overlaps / issues in V8 and node versions, so we'll need any issues there documented as well.
The current, limited UI for pxscene is in browser.js in the code repository
Target
The app should be buildable for testing at least on Linux or Mac OS X at this point. Reviewers can't be expected to be able to test on any platform, so we'll target Mac or Linux first, unless there are strong objections to that in the forum.
Links
* pxscene.org
* https://github.com/johnrobinsn/pxcore (_temp_refactor branch)
* https://nodejs.org/docs/latest/api/addons.html#addons_wrapping_c_objects
* http://electron.atom.io/docs/
* http://johnrobinsn.github.io/pxScene2d/docs/
* https://github.com/chentsulin/electron-react-boilerplate/tree/master/app
Background
Pxscene is a platform independent drawing platform that will be used on a wide variety of embedded devices for the Hercules client. You can find more information here: http://www.pxscene.org/
A link to the Github project and build instructions for Mac are provided in the forum.
Requirements
The current "pxscene.app" wraps pxCore with Javascript APIs that are exposed by Node Native / V8. We'd like to make the UI *around* pxCore easier to manage and extend for development. We will not be able to change:
* Any pxCore source code
* Any source code in pxscene (other than maybe browser.js)
The goal is to have a wrapper around both pieces that's built using Electron (http://electron.atom.io/) that allows for a better UI than exists, better debug output, and some additional features for view sizing, etc...
React
To make the UI easy to build, let's use React as the base for the UI definition. You can see a good template for that here:
https://github.com/chentsulin/electron-react-boilerplate/tree/master/app
We'll do two separate, new React components in this challenge:
1. A "Pxscene" component that is the rendered screen for Pxscene and has functionality exposed via JS to load a URL in the pxscene itself
2. A "PxsceneLog" component that just scrolls the log output from Pxscene to help implement the logging requirement below
UI
The UI will be implemented in Electron, using React components and will be relatively simple for this proof of concept:
1. We are going to have a side menu on the left, and debugging tray underneath the pxscene display. The left side menu can just be mock content at this point
2. Currently, the debug output from pxscene just flows to "/private/var/tmp/pxscene.log", but we'd like to display that in a closable debug drawer underneath the pxscene display, through the "PxsceneLog" component outlined above
3. The URL entry text field will be moved from the pxscene drawable area into the Electron UI
Code layout
The goal for the code layout is to be able to reference pxCore as a git submodule in our wrapper app, avoiding any changes to that code so that we can build our wrapper with new pxCore code whenever we want. That may not be entirely possible, so if pxCore code changes are required, please document those in your README or a separate document.
There may be overlaps / issues in V8 and node versions, so we'll need any issues there documented as well.
The current, limited UI for pxscene is in browser.js in the code repository
Target
The app should be buildable for testing at least on Linux or Mac OS X at this point. Reviewers can't be expected to be able to test on any platform, so we'll target Mac or Linux first, unless there are strong objections to that in the forum.
Links
* pxscene.org
* https://github.com/johnrobinsn/pxcore (_temp_refactor branch)
* https://nodejs.org/docs/latest/api/addons.html#addons_wrapping_c_objects
* http://electron.atom.io/docs/
* http://johnrobinsn.github.io/pxScene2d/docs/
* https://github.com/chentsulin/electron-react-boilerplate/tree/master/app