Changes

HTML5 activities will be run via a WebKit instance. A JavaScript framework will expose Sugar Features to HTML5 activities. Specifically, this framework will allow to use HTML controls matching the Sugar widgets look&feel and will expose common and customized activity toolbars. The framework will also expose API for handling Telepathy (communication and collaboration between multiple Sugar machine) and Datastore (Sugar Journal reading and writing).

HTML5 activities will be run via a WebKit instance. A JavaScript framework will expose Sugar Features to HTML5 activities. Specifically, this framework will allow to use HTML controls matching the Sugar widgets look&feel and will expose common and customized activity toolbars. The framework will also expose API for handling Telepathy (communication and collaboration between multiple Sugar machine) and Datastore (Sugar Journal reading and writing).

The following schema sum up HTML5 activities architecture.

The following schema sum up HTML5 activities functional architecture.

[[File:SugarWebApp Architecture.svg|400px|center]]

[[File:SugarWebApp Architecture.svg|400px|center]]

= History =

= History =

The very first Web Activity is [http://activities.sugarlabs.org//en-US/sugar/addon/4411 Wikipedia]. Wikipedia is a Python activity embedding a WebView to display HTML Wikipedia pages. Searching and browsing is available from a standard Python toolbar. Clicking on a toolbar button change the current viewed HTML page or launch history command (previous/next). To communicate from HTML to Python, Wikipedia embedd an [https://git.sugarlabs.org/wikipedia/wikipedia/blobs/master/activity.py HTTP Server]. When a hyperlink is clicked in the HTML page it call the HTTP server then launch any Python code.

The very first Web Activity is [http://activities.sugarlabs.org//en-US/sugar/addon/4411 Wikipedia]. Wikipedia is a Python activity embedding a WebView to display HTML Wikipedia pages. Searching and browsing is available from a standard Python toolbar. Clicking on a toolbar button change the current HTML viewed page or launch an history command (previous/next). To communicate from HTML to Python, Wikipedia embed an [https://git.sugarlabs.org/wikipedia/wikipedia/blobs/master/activity.py HTTP Server]. When a hyperlink is clicked in the HTML page it call the HTTP server then run Python code.

[http://activities.sugarlabs.org/en-US/sugar/addon/4612 Foodchain] is another attempt to write HTML5 activities. In FoodChain there is no embedded HTTP Server. Communication from Python to JavaScript use the WebKit "[https://git.sugarlabs.org/foodchain-activity/master/blobs/master/enyo.py execute_script]" command. Communication from JavaScript to Python use the WebKit "[https://git.sugarlabs.org/foodchain-activity/master/blobs/master/html/sugar.js console.log]" function with the hack on the WebKit "console-message". In both way of communication, all data exchange between Python and JavaScript are converted in JSON.

[http://activities.sugarlabs.org/en-US/sugar/addon/4612 Foodchain] is another attempt to write HTML5 activities. In FoodChain there is no embedded HTTP Server. Communication from Python to JavaScript use the WebKit "[https://git.sugarlabs.org/foodchain-activity/master/blobs/master/enyo.py execute_script]" command. Communication from JavaScript to Python use the WebKit "[https://git.sugarlabs.org/foodchain-activity/master/blobs/master/html/sugar.js console.log]" function with a hack on the WebKit "console-message". In both way of communication, all data exchange between Python and JavaScript are converted in JSON.

Two others activities use the same way of working: [http://activities.sugarlabs.org/en-US/sugar/addon/4647 Grid paint] and [http://activities.sugarlabs.org/en-US/sugar/addon/4659 Abecedarium].

Two others activities use the same framework: [http://activities.sugarlabs.org/en-US/sugar/addon/4647 Grid paint] and [http://activities.sugarlabs.org/en-US/sugar/addon/4659 Abecedarium]. The framework is described [http://en.flossmanuals.net/make-your-own-sugar-activities/developing-sugar-activities-using-html5/ here].

= Current works =

= Current works =

HTML5 activities has been choose[http://meeting.sugarlabs.org/sugar-meeting/meetings/2013-04-22T14:04:27

HTML5 activities has been choose [http://meeting.sugarlabs.org/sugar-meeting/meetings/2013-04-22T14:04:27] as a feature for Sugar 0.100.

] as a feature for Sugar 0.100.

HTML5 activities will be build on WebKit2 but if time permits we will implement compatibility with previous releases running WebKit1.

HTML5 activities will be build on WebKit2 but if time permits we will implement compatibility with previous releases running WebKit1

Historic implementation (Wikipedia and Foodchain) use hacky ways to handle communication between Sugar and JavaScript. We need a more performance way to communicate (send API call and data).

The procedure to create a web activity using from a common template is described [http://shell.sugarlabs.org/~buildbot/docs/activity.md.html here].

Daniel explore communication using WebSocket [http://lists.sugarlabs.org/archive/sugar-devel/2013-April/042677.html].

* How to deploy framework in the activity [http://lists.sugarlabs.org/archive/sugar-devel/2013-May/043335.html]

* Datastore API [http://lists.sugarlabs.org/archive/sugar-devel/2013-May/043303.html][http://lists.sugarlabs.org/archive/sugar-devel/2013-May/thread.html]

== Sugar HTML Framework ==

= TODO List =

=== Sugar UI ===

See TODO list of the project on [https://github.com/sugarlabs/roadmap/issues/8].

This part of the framework should expose HTML controls matching the Sugar widgets look&feel and common and customized activity toolbars.

=== Datastore ===

= GSoC Timeline progress =

This part of the framework should expose Datastore API into JavaScript.

 

* Week 2: Develop the RadioButton and CheckBox in Sugar HTML UI, sample here: [https://github.com/surajgillespie/CheckboxRadio], start a new Sugar HTML API

 

This part of the framework should expose Telepathy API into JavaScript.

* Week 6: First mock-up and specification of the Markdown activity a Markdown format editor

 

* Week 7: First version of Markdown activity [http://surajgillespie.github.io/]

* Week 8-9-10: Object Chooser integration in the Markdown activity

 

* Week 11: Publish a first version of Markdown activity in [http://activities.sugarlabs.org/en/sugar/addon/4705 Sugar App Store]. Work on an issue in the DataStore JavaScript API

* Week 12: Solve issue in the DataStore JavaScript API, work on a new blog post

A template will be provide to developers to write its own activity. This template will include the Sugar HTML Framework

 

* Week 14: Publish the new version of [http://activities.sugarlabs.org/en/sugar/addon/4705 Markdown activity], Final [http://surajgillespie123.wordpress.com/2013/10/02/google-summer-of-code-2013final-blog-post/ blog post]

Daniel has wrote a first template [http://lists.sugarlabs.org/archive/sugar-devel/2013-April/042710.html].

 

 

HTML activities will be developed in parallel with the framework developpement.

 

Manuel has started to port the Clock activity using HTML5 Canvas [http://lists.sugarlabs.org/archive/sugar-devel/2013-April/042706.html].