Hercules React Native to pxscene - Connection handling, bootstrap, and examples

This challenge is part of a new project involving React Native.  The eventual goal is to have a way to build React Native apps for Hercule's embedded devices that communicate with the device over websockets.  This challenge will add on support for drawing and bootstrapping to the pxscene app, instead of an XRE receiver.  This code challenge will supplement the XRE server side of the app with new functionality if the server side detects a connection request from pxscene instead of from an XRE receiver.

Pxscene

We are using a framework called pxscene for a number of current projects.  You can find more details here: 
Recently documentation was added that describes how to integrate Visual Studio code debugger with pxscene for debugging local scripts:

https://github.com/johnrobinsn/pxCore/blob/master/examples/pxScene2d/VSCODE_DEBUG.md

General requirements

The goal of this challenge is to add in support for pxscene to our React Native server side flow.  When a request is made to an app, like "http://{react-server}/{app_name}", we'll send down Javascript to pxscene that will handle the UI generation based on what the server sends down, and will also send events back to the server.  Basically, the Javascript sent down from the server will act similar to how the XRE receiver works, where it sits between the graphics layer and the server, handling events that are sent down from the server, and raising events back up to the server based on user actions.

Interconnection

The communication between the server and pxscene is at the discretion of the competitor, but this should be fast and lightweight.  Don't use XRE style messages since those are complex, but choose as lightweight a format as possible.

Bootstrap

The initial request from pxscene will just be an HTTP request for a specific app path on the server.  The server should respond with some Javascript that sets up the canvas on pxscene and starts the communication of data from the server to the client.  The bootstrap Javascript will handle drawing commands from the server and will draw on the pxscene canvas using direct pxscene API calls.  Clicks and other input will be sent back up to the server as events that the server will then translate into the React Native flow.  The bootstrap can be dynamic, in that it can contain specific elements for the the app requested - it doesn't have to be completely standard for all apps, although it can be if that's easier.

Examples

Your submission should support the 3 examples in the current codebase:

* ClickCounter
* ImageRendering
* TextFormat

If something isn't going to be fully supported due to limitations with pxscene, please mention that in the forum and README.

React Native server

It's important that the server still work properly for XRE apps, and that code is properly shared and encapsulated.  It's fine to refactor the code if it makes sense to split things out so they can be reused and consumed by either the pxscene piece or the XRE piece.

The server also needs to be able to transparently handle the requests and respond accordingly.  This means that a request from pxscene should be responded to with pxscene data, but a request from an XRE server should respond with XRE data.
 

 

 

Final Submission Guidelines

Please see above