GSoC '16 | Bone101 - weekly report

[Amr Ragaey]

Hello mentors and beagle-gsoc students, in this thread I'll keep my progress reports every week for bone101 project " Improving Bone101 experience".

I'm having my exams going on this period and will finish by June 4, So I may not be fully committed now and I'll dedicate full-time to this project after next week. and here are my progress for first week

Week 1+ ( May 23-31 )

What is done:

1- debugging html-proofer for Travis.

2- fixed some errors in styles and html pages.

3- create separate breadcrumb file to be included with bonescript examples.

Issues:

- problem in debugging debian package

"tail: cannot open ‘debian/changelog’ for reading: No such file or directory dpkg-parsechangelog: error: tail of debian/changelog gave error exit status 1".

I got this error everytime on building and the same error even on my machine, I googled the error and spent some time on it but didn't reach a solution,

so I commented it in travis, and the same for make test as no makefile right now.

Next weak goals:

1- Updating some old libraries that cause errors now in bone101 and BBUI.

2- Sart working in BBUI re-implementation.

[Amr Ragaey]

Week 2 ( June 1-7 )

What is done:

1- updating jquery terminal library to solve a problem appearing in web console :

2- reading BBUI code.. and starting to draw the graph.

Issues:

- I couldn't debug BBUI canvas in browser, Canavs Inspector is no more available in Chrome.

Next weak goals:

BBUI :

- Drawing the graph into UI.

- Highlight inputs on select.

- Going to next steps with re-implementation.

[Amr Ragaey]

Week 3 ( June 7-14 )

What is done:

Started reimplementation of BBUI, I was stuck in with canvas dimensions, but I got it and started to fix old positions to the new structure, then I went on drawing graph XY axis, deleting negative scale, and resize it to have 4Volts and also draw the graph buttons (play, stop, zoom in, and out), I followed Jason advice on making some changes to the graph like precision and position of the zero point. I also fixed the welcome area dimensions.

current output : 

Issues:

- BBUI is missing comments and I spend long time debugging.

- Text were filling out of welcome area, the problem appears for me in firefox only , I tried to change font and I got a good result.

Next weak goals:

1- Continue working on BBUI, and adding events.

[Amr Ragaey]

Week 4 ( June 15-21 )

What is done:

I went through Events, and continued working on UI, I managed to understand much of new lines in current implementation and added the following functions:

• pin.test() to test any pin in BB.
  
• probe.push() to push new probes in probes array in probe object, so I can access them later in need.
  
• probe.clearDrag() to remove the duplicate of inserted button after dragging it to the graph.
  
• probe.selectText() to advise the user to select the appropriate pin for current probe.
  
• probe.test() to test inserted probes in the graph.
  
• loop.clearProbe() to clear Probe if the user doesn't select a connection pin.
  
• loop.clearBB() to clear BB Active canvas, as to not draw over highlighted pins another time.
  

The user can now drag a button into the graph and see an alert text to choose the pin, and on hovering over probes he gets the corresponding highlighted pins on BB. If he doesn't select a pin the probe is removed. 

Issues:

- the current implementation for probes wasn't clear, which took me a time to get it and fix some attributes for probe object in button.push() function.

- there are some functions that are not yet implemented but used in some event listeners, like graph.test() & probe.sliderTest() which need some clarifications.

Next weak goals:

Continue working on BBUI.

[Amr Ragaey]

Week 5 ( June 22-28 )

What is done:

I've gone more into UI, this week I fixed an old issue in dragged button and added some new components:

add on/off button to button object and add their functions. draws on/off buttons.

add drawToGraph() function. that draws wire lines near to graph top.

add bar object with create(), draw() and test() bar functions, draws bar next to onOff button.

Please note that these components are not necessary to show an output in gh-pages UI, but will later be used in Events functions to wrap all the functionality together.

Issues:

- there was an issue in keeping the pins highlighted for the current dragged button. I got it and the fix is ready this week.

[Amr Ragaey]

Week 6 ( June 29- July 5 )

My Dear mentors, I apologize this week for not having a big progress, I will make up this the next week. 

What is done:

fixing the highlighting issue on dragged button. User now can drag a button to graph and see the pins highlighted. if click outside everything is cleared and he has to choose the button again, the same scenario like the old BBUI. 

Issues:

I tried to highlight pins being hovered, by using the function that draws a lighter background on the hovered pin, but the event listens for 'mouse move' which keeps drawing this background over and over again while moving the mouse over pins and ends up the pin is 'white' colored. I do think that analogy of Events here is different than old implementation. Jason asked me for a state diagram, I'm working on it and will update you in report.

[Amr Ragaey]

Week 7 ( June 6- July 12 )

Dear Mentors, I discussed my college graduation project, and I have now more time to spend on GSoC, I'm still working on BBUI and I'm blocked at some points. I become familiar with the structure and code, and I can go easily to add and edit what is supposed to complete, but I need some help, I need a follow up on my code progress and a review of current states analogy to decide whether the implementation is going in the right path or not.

here's my try to draw a quick state diagram of what BBUI supposed to do :

Issues:

- Some Help in current state.

Next weak goals:

Continue working on BBUI.

[Amr Ragaey]

Week 8 ( July 12- July 19 )

What is done:

- I finally managed to do the pin hovering, I added a new event 'pinHover' that works in the same time with 'selectPin', I check the current active probe name and compare it's category with pin category to make hovering works in this event, if the user select a pin the rest is cleared and only the one selected is ready for connection.

- Adjusted pwm probe with corresponding digital pins.

- Added the pin name on active probe while hovering.

- There was some duplicates and errors appear in web console, fixed now.

Issues:

Previous issues solved, my commits need revision.

Next weak goals:

Continue working on BBUI.

--
You received this message because you are subscribed to a topic in the Google Groups "BeagleBoard GSoC" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/beagleboard-gsoc/blWruJVfKkM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to beagleboard-gs...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Amr Ragaey]

Week 9 ( June 20- July 5 )

What is done:

- I added a new object "ui.wire" that is responsible for all wire drawings inside canvas, I added a function for drawing LEDs wiring, and is working now to finish the rest of wiring functions for different buttons.

- I got some revision from Jason on my last week work. and get my old BBUI progress merged.

Issues:

I was waiting for a state diagram to make everything clear and put BBUI in the right working path. I have just seen an attempt by Jason, and will need to review it with him in meeting.

[Amr Ragaey]

Week 10 ( June 27- August 3 )

What is done:

BBUI:

- I solved an old issue regarding pinHover event that was discussed with Jason Kridner, and managed to remove pinHover event and use (selectPin & pinSelected) instead for hovering and selecting specific pin, works now well with hovering and pins name appear on selected probe while hovering.

- I added on/off, slider bar, and wires to LED button, Analog button, and Digital buttons, so user can now drag a button into graph then select a pin and will notice wires connection with on/off and slider if available. during integration I made some changes on the bar and on/off buttons objects to match the current dimensions.

- I added wire lines with the same color beside the graph, so the user will see the output of each line on graph when playing it later.

Python Integration:

- I got the outlines for the python integration phase, and start arranging functions prototype, the current status is to write the functions in bone101 page, let the user click on 'start' button after writing the code into the text area, and running it on beaglebone, if he clicks on 'reset' anytime, the process will terminate/stop and the python file would be removed. If there's an output like a print statement, it would be sent back to the user in browser, I'll have to figure the stdout, stderr, stdin.

Issues:

Slider bar in BBUI would be discussed today in IRC with Jason.

Next weak goals:

Preparing functions of Python phase, and continue working on BBUI.

[Kridner, Jason]

I'm on travel today and will have limited access to IRC. I can be available Friday morning US time. 

--
You received this message because you are subscribed to the Google Groups "BeagleBoard GSoC" group.
To unsubscribe from this group and stop receiving emails from it, send an email to beagleboard-gs...@googlegroups.com.

[Amr Ragaey]

I'm online now, please tell me when you're available, thanks.

[Amr Ragaey]

Week 11 ( August 3- August 10 )

What is done:

Issues:

I spend three days this week stuck trying to get my beaglebone work, I received a solution by Wormo, thanks for him. I created a new image on micro SD card, and get my bb work again. So I'm able now to work with bonescript code and examples.

Python Integration:

I created a branch on bone101, that is "python-integartion" and started to add the UI for an example that would some up the python integration phase.

- I added the python syntax to ace-editor.

- added a blink example code with stdout and stdin text boxes.

- forked the bonescript repo and started to look for some examples, there's a function called 'writeTextFile" that will be used to create a python file for the written code in the web page saved as 'someExample.py'.

- I'm going with next step now, that creating a function for running python examples on bb, using child_process, and wait until script is executed then return output and standard error to user to be rendered in web page example.

BBUI:

- merge revision with Jason to beagleboard repo.

Next weak goals:

Preparing functions of Python phase, and making some patches on BBUI if possible.

[Amr Ragaey]

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

1. Phase 0: debugging html-proofer, styles fixes and updates.

2. Phase 1 : BBUI.

3. Phase 2: Python Integration.

4. 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