diff options
Diffstat (limited to 'html/app.js')
| -rw-r--r-- | html/app.js | 205 |
1 files changed, 205 insertions, 0 deletions
diff --git a/html/app.js b/html/app.js new file mode 100644 index 0000000..9b1b927 --- /dev/null +++ b/html/app.js @@ -0,0 +1,205 @@ +// Enyo content used in a Sugar Activity +// Show bi-directionnal communication between Sugar and Enyo + +enyo.kind({ + name: "App", + classes: "onyx main-window", + components: [ + // HTML5 logo and introduction text + {kind: "Image", classes: "logo", src: "images/html5-logo.jpg"}, + {classes: "block-top", components: [ + {content: "This is the HTML5 part of the activity.", classes:"hello-text"}, + {content: "All content is handle by JavaScript code.", classes:"hello-line"} + ]}, + + // Welcome message using buddy setup + {classes: "divider", content: "Environment"}, + {components: [ + {content: "Hello", classes: "hello-text"}, + {name: "buddyName", content: "NAME", classes: "hello-text hello-buddy"}, + {content: "!", classes: "hello-text"}, + {content: "(colors and name come from Sugar)", classes: "hello-advice"} + ]}, + + // Buttons to send basic messages + {classes: "divider", content: "Basic message"}, + {kind: "onyx.Button", content: "Send string to Python", ontap: "buttonStringClicked"}, + {kind: "onyx.Button", content: "Send object to Python", ontap: "buttonObjectClicked", classes: "spacer"}, + {content: "(send a simple message with a string or an object)", classes: "hello-advice"}, + + // Counter affected by toolbar activity buttons + {classes: "divider", content: "Toolbar"}, + {components: [ + {content: "Page count:", classes: "hello-text"}, + {name: "pageCount", classes: "hello-text hello-buddy"}, + {content: "(use toolbar buttons to update page count)", classes: "hello-advice"} + ]}, + + // Right part of the screen + {classes: "right-part", components: [ + // Controls synchronized with matching Python controls + {classes: "divider", content: "Synchronized controls"}, + {name: "checkbox", kind: "onyx.Checkbox", checked: true, onchange: "checkboxClicked"}, + {content: "Checkbox", classes: "hello-text spacer"}, + {components: [ + {kind: "onyx.InputDecorator", components: [ + {name: "sliderValue", kind: "onyx.Input", classes: "slider-text", onchange: "valueChanged"} + ]}, + {name: "sliderBar", kind: "onyx.Slider", classes: "slider-bar", onChange: "sliderChanged"} + ]}, + {content: "(click to update Python counterpart at the same time)", classes: "hello-advice"}, + + // Canvas area + {classes: "divider", content: "Canvas"}, + {kind: "Canvas", name: "canvas", classes: "canvas-style", attributes: {width: 200, height: 200}}, + {content: "(use Python buttons to move the turtle)", classes: "hello-advice"}, + {kind: "Image", id: "liogo", src:"images/liogo.png", classes: "liogo-logo", onload: "initLiogo" } + ]} + ], + + // Constructor + create: function() { + this.inherited(arguments); + + // Init sugar interface + this.sugar = new Sugar(); + + // Connect to python events + this.sugar.connect("helloFromPY", function(args) { + // Displayed as JSON string to see structure + alert("JavaScript received "+JSON.stringify(args)); + }); + this.sugar.connect("buddy", enyo.bind(this, "buddyChanged")); + this.sugar.connect("home_clicked", enyo.bind(this, "upgradePageCount")); + this.sugar.connect("back_clicked", enyo.bind(this, "upgradePageCount")); + this.sugar.connect("forward_clicked", enyo.bind(this, "upgradePageCount")); + this.sugar.connect("py_slider_changed", enyo.bind(this, "pySliderChanged")); + this.sugar.connect("py_checkbox_changed", enyo.bind(this, "pyCheckboxChanged")); + this.sugar.connect("liogo_forward_clicked", enyo.bind(this, "bForward")); + this.sugar.connect("liogo_left_clicked", enyo.bind(this, "bLeft")); + this.sugar.connect("liogo_right_clicked", enyo.bind(this, "bRight")); + this.sugar.connect("liogo_clear_clicked", enyo.bind(this, "bClear")); + + // Send a message to python + this.sugar.sendMessage("ready") + + // Init synchronized control + this.$.sliderBar.setValue(50); + this.$.sliderValue.setValue(50); + this.$.pageCount.setContent(1); + + // Just to see that console function stay usable + console.log("Unhandled console message"); + }, + + // Python sent buddy setup + buddyChanged: function(args) { + // Redraw buddy context + this.$.buddyName.applyStyle("background-color", args.colors[1]); + this.$.buddyName.applyStyle("color", args.colors[0]); + this.$.buddyName.setContent(args.name); + }, + + // Create Liogo component when the turtle image is loaded + initLiogo: function() { + // Init mini Logo component + this.liogo = new Liogo({canvas: this.$.canvas, image: document.getElementById("liogo") }); + this.liogo.draw(); + }, + + // Send a simple string message to Python + buttonStringClicked: function() { + this.sugar.sendMessage("helloFromJS", "Hello Python !"); + }, + + // Send a dummy JavaScript object to Python + buttonObjectClicked: function() { + var person = { name: "Lionel", version: 2.0, language: ["Python", "JavaScript"] }; + person.modified = new Date(); + this.sugar.sendMessage("helloFromJS", person); + }, + + // Checkbox clicked, signal the changed to the matching Python control + checkboxClicked: function() { + this.sugar.sendMessage("JScheckboxChanged", this.$.checkbox.getChecked()); + }, + + // Handle Python message coming from toolbar + upgradePageCount: function(args) { + // Process toolbar button click + var currentValue = parseInt(this.$.pageCount.getContent()); + switch(args) + { + case 1: + currentValue++; + break; + case -1: + currentValue--; + break; + case 0: + currentValue = 1; + break; + } + this.$.pageCount.setContent(currentValue); + + // Change toolbar button sensitivity depending of current page + var back = "False"; + var forward = "False"; + if (currentValue == 1) + back = "True" + else if (currentValue == 10) + forward = "True" + this.sugar.sendMessage("disableBack", back); + this.sugar.sendMessage("disableForward", forward); + }, + + // Slider changed, change the value and send a message to matching Python control + sliderChanged: function(inSender, inEvent) { + var newvalue = parseInt(this.$.sliderBar.getValue()); + this.$.sliderValue.setValue(newvalue); + this.sugar.sendMessage("JSsliderChanged", newvalue); + }, + + // Slider value changed, change the slider and send a message to matching Python control + valueChanged: function(inSender, inEvent) { + var newvalue = parseInt(this.$.sliderValue.getValue()); + this.$.sliderBar.setValue(newvalue); + this.sugar.sendMessage("JSsliderChanged", newvalue); + }, + + // Python slider value has changed, update the matching JavaScript control + pySliderChanged: function(args) { + var newvalue = parseInt(args); + this.$.sliderBar.setValue(newvalue); + this.$.sliderValue.setValue(newvalue); + }, + + // Python checkbox value has changed, update the matching JavaScript control + pyCheckboxChanged: function(args) { + this.$.checkbox.setChecked(args); + }, + + // Python forward turtle button clicked, process it in the mini Logo component + bForward: function(args) { + this.liogo.forward(args); + this.liogo.draw(); + }, + + // Python left turtle button clicked, process it in the mini Logo component + bLeft: function(args) { + this.liogo.left(args); + this.liogo.draw(); + }, + + // Python right turtle button clicked, process it in the mini Logo component + bRight: function(args) { + this.liogo.right(args); + this.liogo.draw(); + }, + + // Python clear turtle button clicked, process it in the mini Logo component + bClear: function() { + this.liogo.clear(); + this.liogo.draw(); + } +}); |