[Sugar-devel] My week on sugar-web

[Manuel Quiñones]

Hi,

inspired by Suraj report, here is the progress I did this week on
sugar-web.


Bug fixing

- Fixed a bad positioning of toolbar buttons.  It was a case I haven't
  tried before, and Walter ran into it while doing his first webact.
  Thanks Walter for the report.  This is why we need more web
  activities to test the toolkit!

- I was following a bug report from Suraj.  Waiting feedback from
  Daniel, who did the datastore part.  Otherwise I'll jump into it.
  <https://github.com/sugarlabs/sugar-web/pull/66>


Toolkit (aka sugar-web)

- Did palette menus with clickable items.  See example in Memorize
  webact below.  I needed the palette menu for selecting the levels of
  difficulty of the game.

- Proper OOP (object oriented programming).  While doing the palette
  menus, I needed a way to properly inherit Palette, and pass
  parameters to the parent constructor.  So I researched a bit and
  found a solution that covers my needs.
  <https://github.com/manuq/sugar-web/commit/508ed9b85c7e931ef7fd90eddd3b605b9734de30>

- Mustache template system.  Also pop up while doing the palette menu.
  A template system is something all JS frameworks have, and it was
  already time to add it to ours, to improve the code that handles
  HTML.  I have choosen Mustache for its simplicity.
  <http://mustache.github.io/>

- Investigating multitouch.  I think we need to abstract the touch and
  mouse input events in sugar-web, as other web frameworks do.  Here
  is a nice library I'm looking at:
  <https://github.com/borismus/pointer.js> .  We could either use
  that, or do our own.  I started a sample activity to test
  multitouch, see Paint web below.


Web activities

- I started Stopwatch web activity.  To improve sugar-web, we need to
  exercise it.  As a little improvement over the GTK activity, the web
  clone allows you to add and remove stopwatches.
  * online: <http://manuq.github.io/stopwatch-web>
  * code: <https://github.com/manuq/stopwatch-web>

- Started Paint web to exercise multitouch, as described above.
  Currently uses EaselJS but is slow in my Android device, so I'll
  give a try with straight canvas drawing and pointer.js.
  * point your multitouch device to: <http://manuq.github.io/paint-web/>
  * code: <https://github.com/manuq/paint-web>

- Started Memorize web
  * online: <http://manuq.github.io/memorize-web/>
  * code: <https://github.com/manuq/memorize-web>
  * basic example: addition game
  * added levels of difficulty
  * added a few small CSS animations to give them a try.  Found that
    one is falling on Sugar emulator but not in Chrome (the end game
    animation).

- Improved Clock web.
  * online: <http://manuq.github.io/clock-web/>
  * code: <https://github.com/manuq/clock-web>
  * added verbose text using http://momentjs.com/
  * clock web: text toggles
  * fixed initial delay
  * use mustache as template system
  * better structured code
  * scale the numbers inside the clock


Sugar web documentation

- documented activity first steps, based on feedback from Walter

- while doing Paint multitouch, I was missing the inspector in Android
  Chrome.  Found it preety easy to use it remotely:
  <https://developers.google.com/chrome-developer-tools/docs/remote-debugging>

--
.. manuq ..