<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta name=Generator content="Microsoft Word 14 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0cm;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri","sans-serif";
        mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:blue;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:purple;
        text-decoration:underline;}
p
        {mso-style-priority:99;
        mso-margin-top-alt:auto;
        margin-right:0cm;
        mso-margin-bottom-alt:auto;
        margin-left:0cm;
        font-size:12.0pt;
        font-family:"Times New Roman","serif";}
span.EmailStyle18
        {mso-style-type:personal;
        font-family:"Calibri","sans-serif";
        color:windowtext;}
span.EmailStyle19
        {mso-style-type:personal-reply;
        font-family:"Calibri","sans-serif";
        color:#1F497D;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-size:10.0pt;}
@page WordSection1
        {size:612.0pt 792.0pt;
        margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=FR link=blue vlink=purple><div class=WordSection1><p class=MsoNormal><o:p> </o:p></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>Hi all,<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>I've enhanced the work of Manuel Quinones to create an activity template using Enyo JavaScript Framework.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>My objective was to provide a template to write a Sugar activity using HTML5 but without losing advantage of the Sugar integration. Plus, I didn't want using a HTTP Server integrated into the activity like in the Wikipedia activity.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>Finally, using some WebKit tips & tricks (calling a JavaScript in the current page and console message handling), I finally conceived a simple framework that allow bi-directional communication between Python code and JavaScript code (using Enyo Framework). You could find the resulting source code from this framework here [1] for Python and here [2] for JavaScript.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>To test this framework, I wrote a sample activity (downloadable here [3]) with a part of the activity wrote in HTML5 and the other part wrote in Python. I've illustrated the power of this framework with few features:<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Sending basic type or full python object to JavaScript,<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Sending basic type or full JavaScript object to Python,<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- JavaScript Enyo controls (Checkbox and Slider) synchronized with matching Gtk control,<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Passing of Sugar context (buddy nickname and color) to JavaScript,<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Using Sugar toolbar to launch JavaScript event,<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Handling a HTML5 canvas (a small Logo Turtle ;-) from Gtk button.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>A screen capture of the activity is visible here [4].<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>I think it's a good start to show what we could hope from this sort of integration and finally, to have more HTML5 developers writing or adapting activities to Sugar.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>Lot of thing could be done to enhance this basic framework. I hope to have time to write a real activity to work on some other interesting stuff:<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Read/Write from Sugar Journal from JavaScript<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Use POT localization for HTML5 resource<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- Using Sugar presence from JavaScript<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>- ...<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>Hope that some of you could be interested by this.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>Best regards from France.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>                   Lionel.<o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> <o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>[1] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><a href="http://git.sugarlabs.org/enyo-activity/enyo-activity/blobs/master/enyo.py"><span lang=EN-US>http://git.sugarlabs.org/enyo-activity/enyo-activity/blobs/master/enyo.py</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>[2] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><a href="http://git.sugarlabs.org/enyo-activity/enyo-activity/blobs/master/html/sugar.js"><span lang=EN-US>http://git.sugarlabs.org/enyo-activity/enyo-activity/blobs/master/html/sugar.js</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>[3] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><a href="http://olpc-france.org/download/enyo-1.xo"><span lang=EN-US>http://olpc-france.org/download/enyo-1.xo</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><o:p></o:p></span></p><p style='margin:0cm;margin-bottom:.0001pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>[4] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><a href="http://olpc-france.org/download/enyo-1_capture.png"><span lang=EN-US>http://olpc-france.org/download/enyo-1_capture.png</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif"'><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p></div></body></html>