Colors for different types of text should be readily configurable in CSS.
This list should auto scroll when it hits the bottom. Auto scroll should be configurable in settings modal.
Button that says "Gear Icon" should be a nice (and legally usable) gear icon to open a settings modal that allows the choice of what type of line ending is appended to sent data (\n,\r,\r\n or none), whether or not to send data on enter, and whether or not to auto scroll.
Selecting a function from the list or send event should bring up modals to enter arguments for functions and for send event: event name and optional data, and whether to send it to just selected device, all my devices, or all.
Upload should allow selecting a file and then send it via the API (might have to post directly to API endpoint, not sure if it works with SparkJS from browser).
Before this screen is shown a login prompt should be presented - this should be in pure javascript as a one page app - see github.com/digistump/OakSoftAP for an example (but this doesn't need to include all the sources like that does).
This should all be flexible mobile friendly layouts, buttons and text fields should be styled, with clean html, js, and css. Nothing from this demo needs to be used, this is purely to convey a very rough look, function, and feel start point.
"Send Data" box should take up as much room as possible while allowing for button and settings icon. Should send on hitting enter if that is enabled in settings
Text should wrap and never scroll horizontally.
List of devices should refresh whenever refresh is pressed and every 60 seconds, list of registered functions, variables, and device connected status should refresh when refresh is hit and every 10 seconds - those two times should be readily configurable from variables at the top of the javascript.
Should work in semi modern Firefox and Chrome, if a library is used (besides ParticleJS/SparkJS which will be 100% necessary) jQuery prefered but other libraries OK as well.