Final report
Improving Bone101 Experience : the project aimed to improve the experience of Bone101 to make the most use of it to be friendly to novice developers, allowing them to work with BBUI inside tutorials, write python code beside Javascript, and provide some integration with Cloud9 IDE.
Initial plan
-
Phase 0: debugging html-proofer, styles fixes and updates.
-
Phase 1 : BBUI.
-
Phase 2: Python Integration.
-
Phase 3: Cloud9 IDE.
Phase 0 : Debugging html-proofer & fixes and updates
I started the project by debugging html-proofer and fixing some issues with project files to get Travis build successful. A part of my proposal was to provide some fixes and updates to old libraries in bone101, and through that week I managed to fix the errors appearing in html-proofer and do some updates, here are some of the fixes done: #1e91d1d, #22dc022, #077a03a, #7049d1c, #847df9e, #d65aee8, #aaea8c8, #b0b6bdb, #c0a0127, #64f86b9.
This fixes made got me deep with project files understanding the role of each directory and file, and I was happy to enhance some of html code by writing a module for breadcrumb that it can be used with BoneScript examples. Here’s what got merged by Jason Kridner : https://github.com/jadonk/bone101/pull/38
Phase 1 : Re-implementation of BBUI
The first phase of my project was to reimplement the BBUI, the new structure was separated into four main objects : Canvas, UI, Events, and Hardware.
I think this phase took much time and wasn’t an easy task with the available code comments and support. I started reading on Canvas and learning about drawing in contexts, the first thing was to draw the missing elements and reposition objects, then I went on BBUI as the scenario users do to get it done.
Here what I managed to do :
-
Drawing time&volt graph with proper scaling into the bonecard and redefine old positions of objects #3c6ed84.
-
Fixing welcome area dimensions, and editing voltage precision #96b761b.
-
Adding graph objects “play, stop, zoom in, zoom out” and write the function to draw each one into the graph. #3eab6b7
-
Rescaling time&volt graph to fit more within the white space . #dd369fc
-
Adding new functions #ea518b8
-
A function to test each pin in the beaglebone image.
-
A function to test each probe on the graph area.
-
A function to remove the button from graph when user doesn’t select the right pin.
-
A function to push new created button into probes array.
-
A function to clear the effect of ‘dragging new buttons into graph’.
-
A function to print the warning text for user to select the proper pin for different buttons.
-
A function to clear beaglebone active canvas drawings to avoid duplicates on Events.
-
Adding graph lines colors beside time&volt axis #2e02c85.
-
Adding on/off object to buttons #1f42c49.
-
Drawing on/off button objects to the active probes. #c3f6b79.
-
Create bar object that creates the bar, draw it, test each bar on graph, and test the slider itself on the bar. #fb1916b.
-
Adding hover effect on pins after dragging button into graph. (pins of probe) #92d4845.
-
Writing a hover functions for pins to be highlighted on mousemove events #dd78a1c.
-
Adding pin names on active probe while hovering #e961c02.
-
Adding wires, on/off button, slider for LEDs probe #16c2206.
-
Adding wires, on/off button for analog probe #b29267b.
-
Adding wires, on/off button, slider and conditions for digital menu probes #0267c21
-
Merging new variable names, and adding slider bar functionality #b59b21c
-
Fixing some issues #50cf454, #27a9b66, #5ba70b8, #5081995, #1d5ef08, #20b21d8, #16c49cf, #94e352a.
What’s Next / Future Work:
-
Fixing “one slider bar” issue.
-
Adding on/off button functionality.
-
Adding Hardware part, that includes communication between Beaglebone and BBUI.
-
Enhancing state diagram.
-
Writing a good comments/ cleanup code.
I want to say that even I got stuck many times with BBUI at first, but I was happy to get into the code, see things work, writing patches and change states. The final integration of components made me more confident toward the current implementation. Thanks for Jason to provide state diagram and code reviews, I would be available after GSoC to do new patches and provide updates to see BBUI full functional.
BBUI: http://amragaey.github.io/bone101/Support/bone101/UI/
Repo: https://github.com/amragaey/bone101/tree/gh-pages/Support/bone101
Phase 2 : Python Integration to bone101
I wrote a separate detailed report here: https://groups.google.com/forum/#!topic/beagleboard-gsoc/6WXSuP2gLIw
Phase 3 : Cloud9 IDE
This phase was investigated in the beginning and found out that it’s not possible to view and run bone101 examples in Cloud9 IDE. The only thing that is available in Cloud9 API is to create a button that could open specific URL in the IDE, that could be the bone101 example page, but there will be no direct communication between the page examples and cloud9 runner. Therefore, there’s no implementation done in this phase.
I would like to thank my mentors, and everyone who supported me or provided help on IRC, this is unforgettable experience being in GSoC and working with such great people.
Thanks,
Amr Ragaey