HTML5 activities: Difference between revisions

Created page with "= Principles = The objective of this work is to allow developers to write activities for Sugar using only HTML5 and JavaScript (no need to write Python code). HTML5 activities..."
 
No edit summary
Line 12: Line 12:


= 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].




Line 46: Line 46:


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


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


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


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