FYP: The Birth of Acorn, the webapp

I've developed a little webapp that demonstrates the way this controller works.



Screen one shows an overview of the web version of the controller. On the left is the form that allows the user to modify the existing values. All this is generated on the fly based on existing data in the database. The database table has an 'attribute' value that determines if the form produces a slider, button, colour picker and others for that value.

On the right is a JSON array produced from the database. The script that generates these results pulls data from the server every half second. Using the colour picker I've changed the colour value, but NOT submitted the form.


Screen two shows what happens when I've submitted the form. Using AJAX the data is pushed to the server, and the user gets visual feedback of this by the left pane whiting out and a loading circle appearing.



Screen three shows what happens after the data's been pushed. The right pane has also now updated to reflect the new value.

This is currently live at http://acorn.siddv.net/ albeit in a fragile state.


Comments

Post a Comment

Popular posts from this blog

Logitech G502 Proteus Core Teardown & Scroll Wheel Replacement

Image
So I recently acquired a Logitech  G502  mouse, and I have to say I absolutely love it. It's a beautiful mouse, and a worth upgrade to my old G500s mouse. However my one gripe was the new all-metal scroll wheel. While the weight was nice, I missed the rubber ring around my old 500s. This led me to attempt to replace the new 502 scroll wheel with the old one from my busted 500s. So let's get started shall we? So as you can see, these are what the mice look like side-by side. While they look drastically different, the ergonomics are actually very similar among the two. The first step was to take the mouse feet off and unscrew the screws that hold the chassis in place.  Lever the feet off gently with a flathead screwdriver. And they just peel right off. There's four screws on the underside of the mouse.  So the feet are layered. There's double-sided adhesive foam, with the feet on top. On the back foot, I managed to peel off...
Read more

Turning a laptop screen into an external monitor.

Image
So my old Dell L502x died. However most of the components were fine, it's just the motherboard that seemed to be down with a case of water damage. So along with turning the chassis of the laptop into a dock/stand for my new laptop I wanted to turn the laptop's screen into an external monitor. So the first thing I did was extract the panel from the housing to take a look at the model number and the interface. If you're looking to do this yourself just look up the documentation for your laptop or go to ifixit.com  and look it up. Fortunately Dell has excellent documentation and a pretty straightforward teardown process.
Read more

FYP: Accessibility, and Justification of Equipment

The next step was hooking up the master arduino to Hazel and have it listening out for the webapp's messages. This wasn't that hard as I'd already done it as part of my prior development in December. Unfortunately I was lacking a WiFly shield I had borrowed from the university at the time, and the university had all of the WiFlys booked out.  However part of the intention of this project was accessibility, the components needed to be cost effective and easily accessible. This cannot be said for the WiFly shield as it costs around $70 . The official Arduino WiFi shield costs around the same . Instead I actively opted to use an ethernet shield for a number of reasons: Price. A new third-party ethernet shield can cost less than £10 on ebay. The one I bought for this project cost £12.49 . I selected that one because it had UK distribution. Standardization. Nearly any third-party ethernet shield can be used with the Arduino's default Ethernet library. Ano...
Read more