EXPLORATORY AUTHORING OF ACTIVE WEB CONTENT IN A MOBILE ENVIRONMENT
Bachelor Project 2012 (H1) @ Software Architecture Group Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm (<name.lastname>@student.hpi.uni-potsdam.de) 2011-11-02
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Contents
- What is Lively Kernel     - Vision - Demo - How we played with Lively Kernel - Goal of our Bachelor Project - Developing on and with Lively Kernel - Highlighting Plugin - User Story Application - Outlook
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
What is Lively Kernel
- interaction near to desktop experience - direct manipulation of objects - immediate response - collaborative coding - easy and fast prototyping - sending objects - Metaphor - "A GitHub with visual programming of active objects"
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
What is Lively Kernel
- easy rules for composition of objects
text
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
What is Lively Kernel
- visual programming through "wires and tiles" [R. Krahn, J. Lincke]
reset
0123456789101112123
converter: function (value) { var line = Strings.lines(value)[3]; idleValue = Number(Strings.tokens(line).last()); return 100 - idleValue; }
mpstat -P ALL 1 1
/home/nodejs/svn/webwerkstatt/$ ls BrokenWorldRepairSite.xhtml ChangeLog.xhtml Lively2.xhtml MovePages.xhtml NewMorphicEmptyWorld.xhtml NewWorldEmpty.xhtml PartsBin Tests apps auth bin blank.xhtml cleanup.xhtml cop demos documentation draft games hallo hpi issues jens lib lively media migration odata ometa papers projects sandbox screenshots.xhtml server serverTest sofia swa testCreatePartsSpace tests.xhtml text.txt users webcollab-integration webwerkstatt.xhtml welcome.xhtml widgets /home/nodejs/svn/webwerkstatt/$ ls BrokenWorldRepairSite.xhtml ChangeLog.xhtml Lively2.xhtml MovePages.xhtml NewMorphicEmptyWorld.xhtml NewWorldEmpty.xhtml PartsBin Tests apps auth bin blank.xhtml cleanup.xhtml cop demos documentation draft games hallo hpi issues jens lib lively media migration odata ometa papers projects sandbox screenshots.xhtml server serverTest sofia swa testCreatePartsSpace tests.xhtml text.txt users webcollab-integration webwerkstatt.xhtml welcome.xhtml widgets /home/nodejs/svn/webwerkstatt/$ ls BrokenWorldRepairSite.xhtml ChangeLog.xhtml Lively2.xhtml MovePages.xhtml NewMorphicEmptyWorld.xhtml NewWorldEmpty.xhtml PartsBin Tests apps auth bin blank.xhtml cleanup.xhtml cop demos documentation draft games hallo hpi issues jens lib lively media migration odata ometa papers projects sandbox screenshots.xhtml server serverTest sofia swa testCreatePartsSpace tests.xhtml text.txt users webcollab-integration webwerkstatt.xhtml welcome.xhtml widgets /home/nodejs/svn/webwerkstatt/$ clear /home/nodejs/svn/webwerkstatt/$ clear /home/nodejs/svn/webwerkstatt/$ clear /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ cd / /home/nodejs/svn/webwerkstatt/$ cd / /home/nodejs/svn/webwerkstatt/$ cd / /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ pwd /home/nodejs/svn/webwerkstatt /home/nodejs/svn/webwerkstatt/$ whoami nodejs /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$ /home/nodejs/svn/webwerkstatt/$
CommandLine
X
M
–
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
What is Lively Kernel
- How we played with it play :: LivelyBackgroundControl
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Goal of our Bachelor Project
Translator
X
M
–
from:
to:
What does this mean? Please explain.
Exploratory Authoring of Active Web Content in a Mobile Environment
Optimize the Lively Kernel for collaborative work on mobile devices
↔
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Goal of our Bachelor Project
- 3 main topics - UI on desktop / tablet / smartphone / ... - collaborative work - online/offline - programming on the iPad
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Goal of our Bachelor Project
- UI on desktop / tablet / smartphone / ... - fit the screen size - which are characteristic/non characteristic element properties? - effective use of screen - keep the lively-feeling independent from device --> so no App! - bring click-driven development to touch screen
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Goal of our Bachelor Project
- collaborative work - online/offline - live - same location - different location - delayed - by seconds / minutes - by hours / days / months
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Goal of our Bachelor Project
- programming on the iPad     - Is Javascript still the best idea? - adjustments / enhancements (beyond code completion)
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Developing with and on Lively Kernel
- Highlighting Plugin - discovered that it is hard to tell on which object you drop another object onto - the object that will receive the drop should be highlighted
module('projects.BP2012.Highlighting').requires().toRun(function() { cop.create('Highlighting').refineClass(Morph, { setHighlight:function () { $world.markerMorph.setBounds(this.globalBounds()); $world.markerMorph.setVisible(true); $world.markerMorph.bringToFront(); }, removeHighlight:function () { $world.markerMorph.setVisible(false); }, }); //end of cop }) // end of module
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Developing with and on Lively Kernel
- User Story Application - example application - has value for us - collaborative - uses CouchDB - user stories get serialized - diff viewer which compares new database revision with - live sync via long polling
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Developing with and on Lively Kernel
- What happens on creation of a user story
ObjectEditor
X
M
–
Scripts
Connections
+
+
-
-
// changed at Thu Oct 27 2011 17:06:38 GMT+0200 (CEST) by sebastian.stamm this.addScript(function onCreateFromPartsBin() { this.databaseID = undefined; this.databaseRev = undefined; this.dateOfCreation = new Date; this.dateOfDone = undefined; this.originalProperties = this.serialize(); this.updateChangeIndicator(); });
UserStory
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Developing with and on Lively Kernel
- What happens when an user story get published
ObjectEditor
X
M
–
Scripts
Connections
+
+
-
-
// changed at Thu Oct 27 2011 17:06:00 GMT+0200 (CEST) by sebastian.stamm this.addScript(function publishUserStory() { module('apps.CouchDB').load(true); var currentDatabase = this.getCurrentDatabase(); if(currentDatabase){ var db = new CouchDB(this.getCurrentDatabase()); var newtask = this.serialize(); var result = db.save(newtask); if(result.error=="conflict"){ var databaseDocument = db.open(this.databaseID); var window = $world.openPartItem("UserStoryDiffViewer","PartsBin/BP2012"); window.get("DiffViewer").makeDiff(databaseDocument,this); }else{ this.databaseID = result.id; this.databaseRev = result.rev; alertOK('task published'); this.originalProperties = newtask; } this.updateUserStoryBoards(); }; this.updateChangeIndicator(); });
UserStory
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Developing with and on Lively Kernel
- How does the serialization of user stories work?
ObjectEditor
X
M
–
Scripts
Connections
+
+
-
-
// changed at Thu Oct 27 2011 15:47:19 GMT+0200 (CEST) by sebastian.stamm this.addScript(function serialize() { var serializedObject = { title: this.filterTitle(), description: this.filterDescription(), position: {x:this.owner.getPosition().x, y: this.owner.getPosition().y}, extent: {x:this.owner.getExtent().x, y: this.owner.getExtent().y}, borderColor: {r: this.shape.getBorderColor().r, g: this.shape.getBorderColor().g, b: this.shape.getBorderColor().b}, borderWidth: this.shape.getBorderWidth(), color: {r: this.shape.getFill().r, g: this.shape.getFill().g, b: this.shape.getFill().b}, titleColor: {r: this.filterTitleColor().r, g: this.filterTitleColor().g, b: this.filterTitleColor().b}, descriptionColor: {r: this.filterDescriptionColor().r, g: this.filterDescriptionColor().g, b: this.filterDescriptionColor().b}, status: this.get('DropDownList').selectedLineNo, type: "task", creationDate: this.dateOfCreation, doneDate: this.dateOfDone, estimatedReleaseDate: this.estimatedReleaseDate, requestedReleaseDate: this.requestedReleaseDate } if(this.databaseID!==undefined) { serializedObject._id = this.databaseID; } if(this.databaseRev!==undefined) { serializedObject._rev = this.databaseRev; } return serializedObject; });
UserStory
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Developing with and on Lively Kernel
- How does the updating of user stories work?
ObjectEditor
X
M
–
Scripts
Connections
+
+
-
-
// changed at Thu Oct 27 2011 18:15:13 GMT+0200 (CEST) by sebastian.stamm this.addScript(function setSerializedProperties(props) { this.onShutdown(); this.isUpdated = true; //FIXME refactor: move to stack trace this.get('TitlePane').textString = props.title; this.get('DescriptionPane').textString = props.description; this.owner.setPosition(pt(props.position.x, props.position.y)); this.owner.setExtent(pt(props.extent.x, props.extent.y)); this.shape.setBorderColor(Color.rgb(props.borderColor.r*255, props.borderColor.g*255, props.borderColor.b*255)); this.shape.setBorderWidth(props.borderWidth); this.shape.setFill(Color.rgb(props.color.r*255, props.color.g*255, props.color.b*255)); this.get('TitlePane').shape.setFill(Color.rgb(props.titleColor.r*255, props.titleColor.g*255, props.titleColor.b*255)); this.get('DescriptionPane').shape.setFill(Color.rgb(props.descriptionColor.r*255, props.descriptionColor.g*255, props.descriptionColor.b*255)); this.databaseID = props._id; this.databaseRev = props._rev; this.get('DropDownList').selectAt(props.status); this.get('DropDownList').fill(props.status); this.dateOfCreation = props.creationDate; this.dateOfDone = props.doneDate; this.estimatedReleaseDate = props.estimatedReleaseDate; this.requestedReleaseDate = props.requestedReleaseDate; this.setDateProperties(); this.isUpdated = false; this.originalProperties = this.serialize(); this.updateChangeIndicator(); });
UserStory
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Outlook
- Hypercard - product of Apple Inc. (1987) - quick composition of GUIs - database features (stacks) - HyperTalk - object oriented - programming logic of applications - used for - rapid application prototyping - games - digital rolodex (aka. a wiki predecessor)
http://download.info.apple.com/Apple_Support_Area/Manuals/software/0340617AHYPERCARDI.PDF
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Outlook
- Implementation of HyperCard in Lively Kernel - we will use CouchDB - serialization of ambiguous and compound objects needed - application logic should be straight forward
19
Astrid Thomschke, Benjamin Siegmund, Conrad Calmez, Hubert Hesse, Sebastian Stamm - Bachelor Project 2012 (H1) - 2011-11-02
Outlook
- issues that were touched - synchronization of worlds (working together with small delay of time) - issues that were not touched - UI for mobile devices - Does Javascript perform well enough on mobile devices? - support for working together at different places and big time delay
Thank you for your attention!