Seaweed 2 Workbook

49
Captain's log, Star Date: -314393.4 (24 May 09) In Flex, calls to the database are made using HTTPService components. The HTTPService component takes a URL as a parameter by default expects a response in the format of an "object" - an entity formatted as XML and parsed as a tree of Action Script (AS) objects. Seaweed transfers data in JSON, not XML. Thus, Seaweed's HTTPService components will specify "text" as the resultFormat and after it is recieved parse the JSON. JSON can be parsed using a library called as3corelib . For Seaweed to use the JSON object, as3corelib must be in the library path. To do this: 1. Extract as3corelib using 7zip into a directory on your hard drive, or make sure you have the folder as3corelib under Seaweed/Seaweed2.0/FlexLibs on your hard drive. 2. In Flex Builder, select Project > Properties > Flex Builder Path. 3. Go to the "Library Path" tab and click the "Add SWC" button. To specify the location of the .swf file associated with as3corelib, navigate to the as3corelib folder on your hard drive. Within that folder, select lib > as3corelib.swc. It should then appear as a JAR file in the Library Path. The Google Maps API offers a detailed tutorial about how to include libraries in Flex . Captain's log, Star Date: -314396.13 (25 May 09) Seaweed 2 is structured in the Model View Control design pattern. Seaweed has two meanings for the term "model." The database store the model of the game in tables and the designer interface contains a model based on the model in the database, but represented as objects in ActionScript. Model View Controller The designer represents exactly 1 game . The game has the following: name a list of all The screens are presented in a screen chooser where thumbnails of each screen* are represented in a column similar to PowerPoint. The draw area shows the The controller allows the designer to do the following: edit widgets create, delete (copy, and paste) screens, widgets,

Transcript of Seaweed 2 Workbook

Page 1: Seaweed 2 Workbook

Captain's log, Star Date: -314393.4 (24 May 09)

In Flex, calls to the database are made using HTTPService components.  The HTTPService component takes a URL as a parameter by default expects a response in the format of an "object" - an entity formatted as XML and parsed as a tree of Action Script (AS) objects.  Seaweed transfers data in JSON, not XML.  Thus, Seaweed's HTTPService components will specify "text" as the resultFormat and after it is recieved parse the JSON. 

JSON can be parsed using a library called as3corelib.  For Seaweed to use the JSON object, as3corelib must be in the library path.  To do this:

1. Extract as3corelib using 7zip into a directory on your hard drive, or make sure you have the folder as3corelib under Seaweed/Seaweed2.0/FlexLibs on your hard drive.

2. In Flex Builder, select Project > Properties > Flex Builder Path.

3. Go to the "Library Path" tab and click the "Add SWC" button.  To specify the location of the .swf file associated with as3corelib, navigate to the as3corelib folder on your hard drive.  Within that folder, select lib > as3corelib.swc.  It should then  appear as a JAR file in the Library Path.

The Google Maps API offers a detailed tutorial about how to include libraries in Flex.

Captain's log, Star Date: -314396.13 (25 May 09)

Seaweed 2 is structured in the Model View Control design pattern.

Seaweed has two meanings for the term "model."  The database store the model of the game in tables and the designer interface contains a model based on the model in the database, but represented as objects in ActionScript.

Model View Controller

The designer represents exactly 1 game.

The game has the following:

name a list of all screens a link to the first node array of payoff

matrices dimensions of the

draw area

The game in Seaweed 1.0 also had a number of rounds.

A Screen has the following:

a unique name within

The screens are presented in a screen chooser where thumbnails of each screen* are represented in a column similar to PowerPoint.

The draw area shows the selected screen at full size.

Payoff matrices are presented as a grid.

Conditionals are represented in pairs of conditions and text.

The controller allows the designer to do the following:

edit widgets create, delete (copy,

and paste) screens, widgets, and payoff matrices

edit screen names keeps track of the

screen currently "active" (in the draw area)

undo and redo actions

Page 2: Seaweed 2 Workbook

the game an array of widgets

A screen does not know it's position in the ordered list of screens

Widget is an abstract class containing:

position (top, left offset)

the screen it is on knows how to render

itself (abstract method)

bounding box

HTML Widget and Button Widget both contain:

height and width text name

Condition Widget

array of conditions and html

A Payoff Matrix has:

name player 1 variable player 2 variable array of Payoff Matrix

cells

A Payoff Matrix Cell has:

player 1's choice player 2's choice player 1's outcome player 2's outcome

* Thumbnails are bound to the screen representation of the model and update immediately.

Software design issues that will arise:

Page 3: Seaweed 2 Workbook

1. The representation the positions and other pixel measures of widgets.  Considering we the size of the game screen may be in the designer's control.2. The representation of the screen chooser.

Captain's log, Star Date: -314398.37 (26 May 09)

Unlike PHP pages, Flex projects do not need to be run from the server in order to access scripts on the server.  To work on a copy of Seaweed 2.0 locally, you only need to transfer the PHP files to the server.  You can run the Flex application from the Flex Builder (you can also run it in debug mode).

Seaweed 2.0 is now in the UID group repository.  To check it out with svn, the location is:

svn+ssh://svn.csail.mit.edu/afs/csail/group/uid/svn/uid/projects/cWeed/

This contains Seaweed 1.0 and 2.0 in separate folders.  Seaweed 1.0 PHP files are still applicable to Seaweed 2.0 and you will probably need them.  However, Seaweed 2.0 will only ever use it's own copies of the PHP files.  This ensures that Seaweed 1.0 will not be broken by Seaweed 2.0.

Text widgets are now known as HTML widgets, because they can contain arbitrary HTML, including images.

Further design decisions:The game represents states and transitions as a tree.  Nodes in the tree have a next and an object.  The object is either a screen, loop, or branch.  Games and rounds have NodeLists which contain a first node, a next node and any methods needed (for example, a find method).  This representation is helpful in drawing the screen chooser and possibly helpful in creating the game dynamically for the player. 

The game also keeps dictionaries of the screens and loops.  These are the official references to the representation of the screens and loops without the control structure information.  The tree store the control structure information.

The designer can change the states and transitions by direct manipulation, but the model will never be permuted directly.  The control structure will be redrawn from the UI. 

Captain's log, Star Date: -314398.37 (26 May 09) (I'm doing this under protest; even the Napoleonic calendar would be better than this! ;-)

Software architecture from today's meeting

Abstract syntax tree

Page 4: Seaweed 2 Workbook

Screen is blue because it's defined below in a separate diagram Other control flow (e.g. conditional branches) will be new subclasses of Node

Example object diagram of a Rock-Paper-Scissors game:

Page 5: Seaweed 2 Workbook

Graphical objects

MXComponent is the Flex graphical object class It might be better to eliminate Widget entirely and just use MXComponent instead

Views

Page 6: Seaweed 2 Workbook

Captain's log, Star Date: -314398.37 (26 May 09) (I mean, does this even use a 24-hour day???)

Project plan:

1. [lydia] Model classes, serialization to/from JSON, rendering as widgets[yafim] RTE experimentation & prototypes

2. [?] Skeleton of Designer class layout including static draw area that displays rendering of a screen as widgets

3. [yafim] make DrawArea editable (incorporating RTE, dragging of widgets, resizing of widgets, creation of new HTML and button objects)[lydia] ScreenChooser

Page 7: Seaweed 2 Workbook

4. [?] PayoffMatrix and PayoffMatrixEditor[?] Conditional and ConditionalEditor

5. [?] Everything else on the Toolbar (Save, New Screen, Delete Screen, etc.) 6. [?] Copy & paste of screens, widgets, payoff matrices 7. [?] Undo/redo

Target date for completing the port: June 12

Flex Implementation Details (26 May 09) by YafimEditable widgets are implemented using Flex custom components. The HTML Widget has been implemented using an mx:htmlText, which introduces the following limitations to the element:

When you use the htmlText property, you use a subset of HTML that is supported by Flash Player and AIR, which support the following tags:

a, b, br, font, img, i, li, p, textformat, u.

Source.

It appears to me that only text with basic formatting and images are needed. I don't think that these limitations will pose a problem, although if they do, let me know. :)

Captain's log, Star Date: -314399.49 (26 May 09) by Rob

There's now a Chickenfoot script for adding star dates to this document.  It works perfectly.  Sigh.

Captain's log, Star Date: -314402.16 (27 May 09)

The access modifier on a variable determines whether or not you can see those objects from in the debugger.  I find this inconvenient, and I will be on the lookout for a way around this.  (The particular instance I have encountered is trying to drill into a Screen of a game that was created in Initialize.as)

(Edited on 6/3/09) Inspectable

Captain's log, Star Date: -314403.39 (28 May 09)

Commits to the Seaweed Subversion repository are now being sent out by email to everybody working on the project.  To change the list of people who get these messages, edit /afs/csail/group/uid/svn/uid/hooks/post-commit and change the line mentioning "cWeed" to add or remove email addresses.

Captain's log, Star Date: -314403.95 (28 May 09)

Widgets need a model that is indepenent of the view.  Earlier, we proposed making Widgets

Page 8: Seaweed 2 Workbook

an extension of MXComponent, or just making the MXComponents.  MXComponent isn't actually the correct name.  Here is the inheritance of Flex Button.

Button UIComponent FlexSprite Sprite DisplayObjectContainer

InteractiveObject DisplayObject EventDispatcher Object

Instead of MXComponent, we mean either UIComponent or possibly Display Object.  Both are very heavyweight and in our case inconvenient to work with because a majority of the time, our widgets are not actually displayed.  Only widgets on the selected screen are displayed in the designer.

[Rob] I agree, this is sensible.  Widgets shouldn't be view objects.

Captain's log, Star Date: -314407.54 (29 May 09)

Building and instantiating the model was completed yesterday.  Today I  start making the screen chooser, starting with thumbnails. The scaling properties of Canvas are very nice, scaleX and scale y (where 1 = no scaling) are properties in addition to height and width to specify the size.

Unfortunately, Flex Buttons do not natively support any form of mark up.  Multiple lines are word wrap are also disallowed.  In order to get any of these features, you have to override a method in Button.  I borrowed some code for making buttons with HTML inside them (HTMLButtons) and am using it in Seaweed currently to make thumbnails dynamically.  I hope the buttons will also render the RTE output.

Rich text can be created in mx:Text component by setting the htmlText component to be a string of HTML.  Unfortunately, the Flex and Flash only support a subset of HTML tags.  The output of an RTE will certainly conform to these, it will not be backwards compatible with old games in Seaweed.

Captain's log, Star Date: -314415.11 (1 June 09)

When making a new component, there are two choices.  The new component can be based on MXML or can be written entirely in ActionScript.  Seaweed's components can be done either way, but since they are always dynamically generated and highly parameterized, the only advantage out of using MXML is that the graphical part of the widget can be more modifier in the Flex Builder design view.  For the Thumbnails, started with MXML and changed to ActionScript due to difficultly accessing elements of the MXML from ActionScript.  The ActionScript must be loaded at the right time such that the MXML components are initialized.  I found it easier to write ActionScript instead of learn the timing issue.

MXML files are implicitly classes, and have constructors (although those constructors do not take parameters) You cannot create a controller class for an MXML object with a constructor with the same name as the MXML file.  That would overload the namespace, which Flex does not allow. 

I have made the backbone of the screenChooser thumbnails.  It takes a nodeList  and populated the screenChooser VBox.  Currently it is inert.  Here is a list of features of implement:

Page 9: Seaweed 2 Workbook

click highlighting for screens and loops (will affect the controller) rename screens or loops edit loop information   symbol for loop repetitions drag and drop which informs the model.

Captain's log, Star Date: -314434.24 (8 June 09)

A RichTextEditor is just a panel with a TextArea and a Container in it. The Container contains controls to edit the TextArea HTML. I have already created widgets that allow the user to edit the HTML content within to alter their display, such as the HTMLWidget and the ButtonWidget. Now I am going to put the aforementioned Container in the application's toolbar and make it control the RTE of the widget that the user is currently editing.

Captain's log, Star Date: -314436.63 (9 June 09)

I have been using an application called KapInspect which claims to be "Firebug for Flex."  It seems to work very well. It lets you inspect the interface and edit properties.  My main reason for using it is that the Flex debugger doesn't seems to let you iterate through children of a node.  To use it, you have to include KapInspect.swc, specify the kapit xml namespace, and include the tag <kapit:KapInspect/> in the application.  When you run an application, you can press ctrl+alt+F12 and it will bring up their debugger.

The screen chooser is now implemented as a Tree widget.  The tree widget separate the data from the view of the data very nicely.  Tree takes an ArrayCollection of Objects as it's data (called a dataProvider).  If any of those Objects has a property .children of type ArrayCollection, that node will be a branch rather than a leaf.  The screens and loops in Seaweed now are represented as an ArrayCollection of ArrayCollections, recursively to represent all the loops and loops within loops, etc. 

Customizing the tree widget to display to specification was not easy.  The tree has an attribute called itemRenderer, in which you can specify a string which represents a class that extends itemRenderer.  In Seaweed, I create a component called ScreenChooserTreeRenderer which extends TreeItemRenderer.  A TreeItemRenderer is a DisplayListObject (a UIComponent) for each item in the tree.  Each instance has access to a property called 'data' (and also 'listdata') which which in Seaweed's case is a Screen or Loop Object. 

The TreeItemRenderer doesn't differentiate between leaves and branches.  In order to display them differently, you must check if the object has children and display accordingly. 

As the user drags and drops items in the tree, the dataProvider (which is our underlying representation gets mutated (reordered) which is exactly what we want.

I worked from the TreeItemRenderer example.

Captain's log, Star Date: -314440.25 (10 June 09)

I created a function reviveScreen(screen) which iterates through all the components and attaches them to the drawArea.  At Yafim's suggestion, it is a Factory Method.  This depends on the model class and the component class having the same name.  Flex has a quirkyness that it won't let me call getDefinitionByName of a string that hasn't already been declared in the program.  An unfortunate consequence is that we have to declare fake components for

Page 10: Seaweed 2 Workbook

each Widget type:            var x:components.HTMLWidget;            var y:components.ButtonWidget;

Captain's log, Star Date: -314442.29 (11 June 09)

Seaweed is now in need of controller behavior.  The model has been established and the view is well underway with both a screen chooser and screen widgets (although no payoff matrix or conditional text yet).  The view will throw events.  Events are in the purvey of the controller and the view and the model will listen for those events in order to update.

The first custom event I created was to send a event saying that the screen chooser had been clicked on, and the application listen to that and changes the screen in the view when it hears that event.

I followed some example code found here.

Captain's log, Star Date: -314445.23 (12 June 09)

The bug list for Seaweed has been created.  You should be able to log in automatically if there's a CSAIL cert in your browser. keywords: bug database, flyspray, bugs.

Captain's log, Star Date: -314458.69 (17 June 09)

There is an issue when requesting data from the server if the IP address requesting is not 18.xx...  I connect using 128.xxx... and there is the following error described by:

http://dotanything.wordpress.com/2008/08/11/flex-security-error-accessing-url-or-channelsecurityerror/

The particular error applies to flash 9.  After downloading and installing flash 10, I no longer have this issue.  We should follow the instructions described by the link above in all applicable instances or have a link in html at the footer or something that routes people to downloading the latest version of flash. 

On another note, I thought we added the applicable code yesterday, but I still had the issue today before downloading flash 10.  I am not sure what other changes need to take place in order to avoid this error.

Captain's log, Star Date: -314463.11 (19 June 09) (Rob)

A few notes on things that have been mentioned as troublesome in Flex.

1. Children: Flex does support the usual DOM methods for iterating over the children of a component -- both getChildAt()/numChildren, and getChildren() to get the children as an array.  (There's also a rawChildren array property, which returns additional children that are added by styling; I don't entirely know the difference between getChildren() and rawChildren, but my understanding of the docs is that getChildren() gives you the children that you've explicitly added with either MXML or addChild()).

I like to iterate over the children with for each, e.g.:

Page 11: Seaweed 2 Workbook

    for each (var child:UIComponent in parent.getChildren()) {       // do something with child    }

for each is a really useful construct; we should be using it a lot more than we do.

2. getChildByName() workaround:  I ran into this problem too -- setting the id attribute of a component to foo didn't make the component immediately available as a variable named foo.  But I realized that this was because I hadn't added the component to the tree yet.  As soon as I did, then foo became immediately available.  Alternatively, you can just define your own private variable foo and assign the component to that.  I don't think we need to use getChildByName at all.

Captain's log, Star Date: -314475.36 (23 June 09) (Aubrey)

The main page no longer has the popup blocker blocking any of the windows that are created from the main page.

The main page has the following functions:

create new blank game edit game Copy Game and Edit the Copy Play as (someone) Delete Game

An interesting note about popup blockers is that if a action is triggered by something like a button, a new window must popup as a result of the function called.  If the button activates a httpservice request and the callback opens a new window, this will be blocked by the popup blocker.  In order to fix this problem for the buttons, "Create New Blank Game" and "Copy Game...", the click events now open a php file in a new window.  This file does the necessary calls to the server to create a new blank game or clone a game.  After that is done, the page is redirected to the designer for the desired game.

The format for redirecting after making some php requests used is as follows:

<html><head><?php//code to make game or clone game//code to make the $urlString to redirect to?><meta http-equiv="Refresh" content="0; url=<?php echo $urlString;?>"></head><body>Please wait while your game loads.</body></html>

The new php files are located in:csail.mit.edu/group/uid/www/data/seaweed/php

the new files used are:

Page 12: Seaweed 2 Workbook

newBlankGameLoader.php o this uses a lot of the same code from the original file makeBlankGame.php o makeBlankGame.php is no longer used

cloneGameLoader.php o this uses some code from getDB.php to get the information for the game that

is going to be cloned o it also uses some code from cloneGame.php in order to get the next id

number and put the information from the original game into the db for the cloned game.

o getDB.php and cloneGame.php are no longer uses in the flex home page o getDB.php may be used for other purposes, but cloneGame.php is most likely

not used anymore.

On another note, the format above using html to redirect works, but a more robust design across browser platforms would be to redirect in php.  This change has been done so the redirect is made by:

header("Location: http://...");

Before when using the header(...) request, there was an error being thrown, but that was most likely due to whitespace at the top of the page.  This is now deleted.

Captain's log, Star Date: -314494.48 (30 June 09)July 7th we have a meeting with our Harvard economists.  Their goal is to run a direct reciprocity game, and we would like to have implemented as much of the features they will need by then.  There are also features we will need further out.

This week:

[Aubrey] A place in a screen chooser for indicating a partnership change and an interface for describing the type of partnering

[Yafim] A dialog for specifying data from the database to be used for a screen during game play and a clickable object we can use as a placeholder in RTEs and conditions.

[Lydia] A way to represent partnering times in the database.

[Lydia] A way to represent data from the backend in the database. (Perhaps just a syntax?)

Futher out:

Multi-player games:

[Lydia] partnership table needs to have only one person per line (this changes many things in the back end)

o partnering table and partnering.php are changed o computer partnering is different. o looking up data from the db is different (this effects getValue.php)

games should also be asymmetric (offerer and offeree - perhaps each partnership needs a role)

Page 13: Seaweed 2 Workbook

User created loops

[Lydia] The backend database game storage needs to represent games as a tree - not with the hardcoded h/m/f/ representation.

o affects getting the game for the designer, saving the game, getting the next game during gameplay

Branching in the screen chooser

Text inputs on a screen

Timeouts (different timeouts on each screen?)

Practice rounds?

Partnering on a graph

Captain's log, Star Date: -314495.02 (30 June 09)Note to self: how to create new AFS drives:  Start the AFS client.  Go to the "Drive Letters" tab, click the "Add" button.  enter the URL under afs for example: "/afs/athena.mit.edu"

Captain's log, Star Date: -314495.24 (30 June 09) supplementalReorganization of the files on the back end.

Seaweed code exists in two places:1. In the repository2. On the server

Obviously, code in the repository is versioned.  We are also versioning some code on the server. 

The server has two folders: release, dev, and developer.  Release holds the release version of the code (front end and back end), dev holds the current Backend code and is checked into the repository so that it gets versioned.  dev/Backend/php only contains files that are used (not simply all the old Seaweed 1.0 files)  Individuals testing code that needs to be run on the server can create a folder with their own username under the developer folder and have their own copies of files run on the server there.  If you are doing this, you must change the URLstart variable in Designer.as to point to your user directory in in seaweed.

We will also have a new database called cweed2.  New php files should point to this database.

If you want to go to the Designer on the web, go to

http://groups.csail.mit.edu/uid/seaweed/release/php/Designer/Designer.html?gameID=45

The current 'release' version of the game chooser doesn't have the proper URLs, and so it doesn't work properly. 

Captain's Log, Star Date: -314498.34 (1 July 2009)The database schema has been changed to reflect the new structure (that is, various versions of a game may be run at different times with different parameters, so instead of

Page 14: Seaweed 2 Workbook

having all runs of a game be lumped together, we can separate them by experimental runs).  There's a new table called "run" in the cweed2 database; each run consists of the ID of the game it is based on, start time, end time, the JSON that encodes the game, and its own unique id.  The userdata table now references a run rather than a gameid. (Note that this is going to break things until the front-end gets changed to reflect this...).  The games table remains unchanged.

Captain's Log, Star Date: -314500.76 (2 July 2009)Just for reference, we are defining:Failed games - games where either player has timed outSuccessful games - games where both players have reached the last screenIn-progress games - everything else.

To do: change the ugly nasty chunks of SQL in DataOutput to reflect this...

Captain's log, Star Date: -314511.93 (6 July 09)

Escape hatch design proposal.

A new object in the screen chooser (like a Screen, or a Loop, or a Partnering).  Call it a Script object.

When selected in the screen chooser, the Script object simply displays a big plain-text editor.

The designer can write PHP code in the editor, following the spec below. When the game is played, and the Script object is encountered by

getNextScreen.php, the script code is executed.

Design flaws:

Allowing the designer to write PHP code is a bad idea in the long term, because of: o security (since the PHP code can do anything on the server) o isolation (since one designer's PHP code can intentionally or inadvertently

mess up other designers' games) One fix for this is to use a different script interpreter with a sandbox A better fix might be to let the designer write ActionScript or Javascript that gets run

on the experimenter's machine while the games are running, rather than on the server

When executed, the designer's script code is converted to a function as follows:

$f = eval("function ($me, $players, $partnerships, $data) {" + script + "}")

So these parameters are defined as variables for the designer's code:

me: player ID of this player players: an array of all the players in this Run (player ids, as strings) partnerships: an array of all the partnerships that have been formed in this Run. data: an array of all the user data (variable assignments) that have been made in

this Run.

Page 15: Seaweed 2 Workbook

Partnerships and data are drawn from the corresponding database tables (partnerships and userdata).  

We should provide helper functions for common queries on these data structures:

opponent($me, $partnerships) returns my current partner's ID for a two-player game

myPartnership($me, $partnerships) returns my current partnership valueOf($data, $player, $varname) returns the latest value for the variable named

$varname for player $player

The script code can take the following actions, by calling global functions we define for them:

makePartnership($players) takes an array of player IDs and makes them partners with each other

gotoScreen($players, $screenname) takes an array of player IDs and a screen name (as shown in the screen chooser) and sends all the players to that screen

logData($player, $varname, $value) logs a variable assignment for a player

Captain's log, Star Date: -314516.96 (8 July 09)

Structure of Seaweed web site

http://uid.csail.mit.edu/seaweed/    release/    for the current official release    dev/         for the development version (head of SVN repo)    developer/hmslydia/        for a single developer's working directory                 /paigep/                 /altat/

Underneath each of these folders is the following structure:

/Designer     /flex      contains Designer.html and Designer.swf     /php      contains php files used by Designer/GameChooser     /flex     /php/PlaySideBySide     /php/GameEngine     /php

Redirections:

/ redirects to /GameChooser/flex/GameChooser.html

Page 16: Seaweed 2 Workbook

Structure of Subversion repository

Seaweed/    Designer/        src/        embed/        backend/ [done]            php/ [done]            sql/  [done]

    GameChooser/        src/        embed/        backend/ [done]            php/   [done]            sql/    [done]

    GameEngine/         php/   [done]         sql/    [done]

etc.

Todo:

[Aubrey] eliminate absolute URLs from PHP[Rob -done] eliminate absolute URLs from Flex code[Lydia -done] making data expressions work in the game engine[Lydia -done] rearrange dev/ into the structure shown above[Lydia -done] commit the PHP parts of dev/ into Subversion into the places shown above[Rob -done] figure out how to do automatic checkouts from Subversion into dev/

Captain's log, Star Date: -314519.71 (9 July 09) (Aubrey)

The php files and the structure in my developer space (... /developer/altat/) represents the above structure.  In my space, the files in GameChooser/php/ have been changed to support relative addresses.  In GameEngine/php, the file alias.php has been changed to have relative addresses as well.  in PlaySideBySide/php/ the debugSideBySide.php has been updated as well.

Currently, the following php files need to be updated to reflect the new DB structure: (found in GameChooser/php/)

[done] newBlankGameLoader.php [done] cloneGameLoader.php [done] deleteGame.php

chooseGame.php still works fine.  Fixing these is a matter of making sure these files have the new updated names for some of the tables and adding the new structure for loops etc.  Lydia suggested waiting to do this fix until the DB changes have settled.  I suggest working from the files in my directory since they have the updated relative addresses.

Page 17: Seaweed 2 Workbook

COPY AND PASTE!!!

Right now our implementation does not use the clipboard.  (which means we can only copy and paste within the same editor and not between projects) It seems that flex might not support using the clipboard when using flash:

http://livedocs.adobe.com/flex/3/langref/flash/desktop/Clipboard.html

In the article, it says AIR only, but later says Runtime Versions: flash 10, AIR 1.0

I have not been able to use the clipboard library (in flash.desktop).  IDEAS??

Captain's log, Star Date: -314525.53 (11 July 09)

php code is commited in the structure listed above.  There are three files that I think are extraneous and would like to get rid of.

1.  dev/Designer/Backend (in the csail webspace) I'm very sure this isn't being used2. Seaweed2.0/Backend in the Repository3. Seaweed2.0/php in the Repository.  (I want to make sure Paige isn't using either of these.)

Update (Rob): I went ahead and removed all of these, and fixed the part in Designer Flex that broke when Designer/Backend went away. 

Captain's log, Star Date: -314529.84 (13 July 09)

Some extra info on clipboards and copy-and-paste (from User-initiated Action Requirements in Flash Player 10):

Clipboard: The ActionScript 2.0 and ActionScript 3.0 API called System.setClipboard(), available in Flash Player 9 and earlier, now requires user interaction to write to the system Clipboard. In addition, the new Clipboard.generalClipboard object in Flash Player 10 can read and write the system Clipboard. Writing to the system Clipboard using either API requires the write to happen as the result of a user-initiated action. In addition, reading from the system Clipboard using the new ActionScript 3.0 API, Clipboard.generalClipboard.getData, can succeed only as the result of a paste event handler. Since a paste event handler can be triggered only by activating the context menu with the mouse (by right-click or Control-click, depending on operating system) or by using the appropriate keyboard shortcut for paste (Control+V or Command+V), APIs executing inside a paste handler are the de facto result of a user-initiated action. These restrictions avoid the problem of a SWF being able to set Clipboard contents unbeknownst to the user.

Captain's log, Star Date: -314529.85 (13 July 09)

Designer and GameChooser can now run either locally (from a file:/ URL) or on a web server ( http://).

If it's on a web server, it automatically determines its root URL (e.g. http://groups.csail.mit.edu/uid/seaweed/dev/).

If it's running locally from a file:/ URL, it requires you to specify its root URL in a file called rootUrl.as.

Page 18: Seaweed 2 Workbook

Note: Since some people may have a different root URL, I didn't commit rootUrl.as.  Instead, I committed a file called "copy-me-to-rootUrl.as".  In order to get the Designer to compile, you will have to copy that file to a new file called "rootUrl.as".  The filename rootUrl.as is marked with svn:ignore, so that Subversion won't ever try to commit it and we won't conflict with each other on it.

Captain's log, Star Date: -314530.06 (13 July 09)

We released a version of Seaweed to the web for our Economist collaborators at Harvard to play with.  As I see it, our primary goal at this point is to add new features to Seaweed essential to freeing it from the limitations on the games that it can design.  Aubrey and I sketched out five steps that will take between 3 and 6 weeks to implement in order to enable Seaweed to design anything.

1 [Aubrey]. UI for asymmetric multiplayer games.2. [Aubrey] UI for adding text input widgets to screens3. Restructure Game Engine for Multiplayer games.4. A server side escape hatch run in conjunction with getNextScreen.php that can    1. send the player to a new screen    2. log data    3. input data for a computer player    4. change partnerships    5. get data5. A client side escape hatch which takes as input data fetched especially for this screen in the server side escape hatch and gives as output a html element that can be put on the screen.

Captain's Log, Star Date -314530.7 (13 July 2009)All tables in cweed2 now have a primary key.  In all cases except the following, it is an auto-incrementing integer column named 'id'.

The primary key for the game table is gameid, and the primary key for partnership is partnerid.  (I would suggest changing these for consistency whenever we rework the database.) The primary key for designers is designerid, but I'm not sure it should be, since designerid is a varchar and thus can't be easily auto-incremented (I think?)

Also, there's a clone of cweed2 called cweed2dev, where we will be fixing these things (and some others) and testing them out before going live with the new schema.

Just for reference, here's how you clone a database:1. Create the database you want to copy into. (I believe you can clone over top of an existing database with stuff in it already, too.)2. mysqldump --host [mysql hostname] -p -u [user] [database name] >[backupfile]3. mysql -u [user] -p -h [hostname] [name of clone DB] < [backup file]

Captain's Log, Star Date -314530.72 (13 July 2009)I asked the interwebs how to optimize SQL queries. Here's what I found:

Explicitly enumerating columns, even if you want most of them, speeds things up. Oops... gonna go fix that now.

If you can, use JOINs rather than chained SELECTs.  Derived tables are also an improvement.

Page 19: Seaweed 2 Workbook

 

Captain's log, Star Date: -314531.11 (13 July 09)

The dev server (http://groups.csail.mit.edu/uid/seaweed/dev/) now automatically updates its php folders whenever anybody commits to any php folder in Seaweed (/projects/cWeed/.../php).

Here's the recommended way to  hackon Seaweed php files:

1. Create a developer server for yourself.  The easiest way to do this is to copy the dev/ folder (in /afs/csail/group/uid/www/data/seaweed/dev) to a developer/username folder (e.g., mine is /afs/csail/group/uid/www/data/seaweed/developer/rcm).

2. In your developer server, all the php/ folders are Subversion checkouts.         Edit them as usual.       Run them through your developer server URL (http://groups.csail.mit.edu/uid/seaweed/developer/username/).       Update them all at once by running "svn update /afs/csail/group/uid/www/data/seaweed/developer/username/*/php"       Commit the php folder you've changed by cd'ing into it and running "svn commit"

3. If you're hacking on the backend of a Flex application, like Designer, then change the rootUrl.as file in your working copy of Designer to point to your developer server (e.g. http://groups.csail.mit.edu/uid/seaweed/developer/rcm/).

Captain's Log, Star Date -314531.32 (13 July 2009)Ok, here's the lowdown on the database schema.

First, a bit of SQL background:

All tables in the database have a primary key.  This means that every entry in the table has a unique identifier (unique within the table, anyway).  The column is (for all tables other than partnership and games, which have been grandfathered in, and designer, which is a special case; see below) an integer column named 'id'.  All the tables are set up to automatically generate an ID for anything you put in (but if you create new tables, you'll have to set up the ID generator for each one).

Once you have unique identifiers for everything, you can do fun things like declaring foreign key constraints.  [explanation]

Most of the tables can be sorted into two groups: game objects and [??? can't think of a word]. 

Game Objects:There's one tricky bit about game objects.  They have a primary key column named 'id', just like everything else, but they also have another column, with things that look suspiciously like IDs, in the form of cweed-genNN.  Those are client-side-generated IDs, that are unique only within a specific game - allowing the client to assign them saves a round trip to the database every time someone adds a component to the game.  So if you have both a game number and a cweed-genNN ID, you can uniquely identify a game component, or you can just use those to look up the database key and use that.  You must have both a game number and a cweed-genNN ID to uniquely identify any game object.

Page 20: Seaweed 2 Workbook

loop:    a loop object. I'm not actually sure what a loop object means in this context.button_widget:    Keeps track of buttons.  Interesting fields:

widgetid - this is a cweed-genNN identifier for the button screenid - a cweed-genNN type identifier for the screen that the button is on. gameid - the ID of the game the button is in. toppos, leftpos, width, height - where the button is and how big it is. html -the button text, including whatever formatting HTML it's wrapped in. conditional - I have no idea. I would expect it to be a reference (together with the

game ID) into the conditional table, which would tell you what the button would say (??), but it's a tinyint field, so I'm not sure.

text_widget:    Describes a text box. Pretty much exactly the same as button_widget.

conditional:    Stores the conditions of conditional text objects. The only things you won't            have seen before are:

condition - html - ordernum -

[Ok, I have absolutely no idea how this table actually works, someone else should fill this in -PP]

pom:

    Payoff matrices.  It's actually a 2d array of pomvalues, holding the payoff for        each player. Currently constrained to a two-player relationship.

name - the user actually gets to name these guys. pomid - yet another cweed-genNN identifier p1vartype - the type of screen player 1 goes to [?] p2vartype - ditto p1varid - the cweed-genNN type ID of the pomvalue for this outcome p2varid - ditto

pomvalue:    The actual payoff (??) for each player.

Page 21: Seaweed 2 Workbook

pomid - this must be the cweed-genNN ID of the pomvalue.  from context I'd assume it was the name of the parent POM, but then there'd be no way to get at a specific pomvalue.

valueid1 - the ID of ...?? valueid2 - the ID of ...? singleOrDouble - ?? p1value - what player 1 actually gets out of this (as a number). p2value - what player 2 actually gets out of this (as a number).

screen:    The screens that the game is made up of.  Fairly self-explanatory.

controlFlow:    Basically a big pile of pointers that gets you through all of the screens that        make up a game.   

gameid - the game this entry belongs to nodeType - ?? nodeId - the ID of the current screen in the game (cweed-genNN) nextNodeType - ?? nextNodeId - the ID of the next screen in the game (cweed-genNN)

?? things:designers:

    All the lovely people who are using seaweed to make games.

designerid - the username of the designer (usernames are expected to be unique, so it's the primary key instead of an 'id' column).

pass - the user's password.

games:    The games, silly!

name - the name of the game. firstNodeId - a pointer (again, cweed-genNN style) to the first screen of the game. counter - ?? firstNodeType - the type of screen (??) of the first screen. debug_run - the database ID of the run used for debugging (it doesn't track the usual

run variables).  There's only ever going to be one debugging run per game, so this enforces the one-to-one relationship.

gameid - until we clean up the schema, this is the primary key for this table

partners:    The people who are playing the game.

partnerid - the database ID of the partnership this player is in. name - the player's name timeentered - when the player got entered into the database

Page 22: Seaweed 2 Workbook

partnership:    Groups of players playing the same instance of a game. [We need some better    terminology.]

partnerid - the primary key of this table; the database ID of this partnership. run - a pointer to the run of the game that this group of players is playing

run:    A specific deployment of a game (i.e., you may deploy it once with different        payoffs, or a different number of repeats, or whatever.)

name - the name of the run. game - the game that this run is associated with. note that one game can have many

runs, but a run can only be associated with one game. A bunch of deployment-specific variables that we may or may not keep

userdata:    userdata is something entirely different.  It's basically a log of everything the        players in a game are doing.

partnership - what group of players is playing this game? player - the name (needs to become the ID) of the player associated with this event. roll [sic] - the role this player has in the game. variabletype - the kind of event the player is seeing (a regular screen, a timeout

screen, etc) variableid - a (cweed-genNN) pointer to the screen the user is looking at datavalue - if the user entered any data, it will be dropped in here timeentered - each log entry is timestamped run - the run (join with the run table to get the game) of the game this player is

playing.

Also drop the object model sketch I made in here once I get it scanned

Captain's log, Star Date: -314549.4 (20 July 09) (aubrey)

CUT/COPY/PASTE update:

It looks like we will not be able to support keyboard shortcuts for ctrl-c/x/v since there is a bug in the flash player that does not listen to the key presses correctly.  I thought this might be specific to flash player 10 since that is what the bug report is for, but I installed flash player 9 and the bug is the same for that as well. 

Some possible solutions include:

Use some other keys for cut/copy/paste and publish those key combos in the roll-over of the buttons so that it is discoverable.  (the only keys affected by this are ones currently used as shortcut keys)

Only support using the buttons at the top of the designer (this could get annoying for the user).  Text will still be able to be cut/copied/pasted using the OS clipboard if we

Page 23: Seaweed 2 Workbook

do not override it.  Note: There is an issue with not overriding the keystrokes since the clipboard might be inconsistent with the object that is on the local clipboard.

Try to use an ExternalInterface and javascript to handle Ctrl key downs.  This may not work since the bug reporter in the above link has apparantly already tried it.

Captain's log, Star Date: -314568.51 (27 July 09) (Aubrey)

Ctrl-c/x/v works on firefox on mac. 

It does not work for copying/pasting a widget on a screen.  I am having trouble getting an event listener for that object. - (This has been fixed)

Currently need to get a tool to listen across browsers.  It does not work in safari right now.

The current implementation for the shortcuts ctrl-c/x/v will not work on IE.  I am not sure if there is a possible workaround.  The problem is that IE only supports bubbling events, but in order for flex to not interfere with the event, the listener must be capturing in the javascript.

Summary of how ctrl-c/x/v is captured:

There is a key listener on the stage that listens for ctrl-c/x/v.  The bug in flex is that the keycode for c/x/v when ctrl (or command for mac) is held down at the same time is the max integer value.  This makes distinguishing which actual event happens impossible in flex.

There is a listener in javascript on the page that is a capturing listener, saving the last key press.

When flex detects ctrl + max int pressed, it requests the actual keycode of the last key pressed from the javascript.

Flex performs the necessary action based on the returned value from javascript.

Captain's log, Star Date: -314571 (28 July 09) (Lydia recording)

The game engine is being rewritten to accomodate new features and to be written in Flex for cross browser compatability.

The previous version of the game engine was not well documented, for lack of a good place to put documentation.  The new version of the game engine will be documented here.

Session variables: (upon registering the player for the game in registerPlayer.php)

gameId, an id number run, an id number playerId - the autoincremented number you get when you enter into registerPlayer

table.  This takes the place of name before.  currentNodeId currentNodeType loop1 - all these will be an array with the loop (id) and the round number(round) loop2 loop3 currentLoop = {loop1, loop2, loop3} currentPartnership, an id number

Page 24: Seaweed 2 Workbook

computerPlayer ={computer player ids}  this will only be set for one real player in the game, and they will be designated to make the computer players moves.

Status messages:

ready waitingForPartners waitingForVariable

Userdata variable types:

enterScreen (helpers.php) loop pom

Timing Elements:

[in GameEngine.as] public static var checkPartnersPollingRate:Number = 2; [in partnering-helpers.php] $pronounceStale = 10; //if a player hasn't updated in this

many seconds, make them stale.

Captain's Log, Star Date -314574.34 (29 July 2009) (Paige)I'm starting to get a user framework in place.  There is now an authenticate.php in the top level; import it and call check_credentials() (returns true if user is logged in correctly, false if not) before making any database calls.  I feel like it ought to redirect to the login page if the credentials are bad, but I'm not sure.

I've also added a column to ownership that describes the permissions the user has on the game.  Options are 'r' (read), 'rw' (read and write), and 'rws' (read, write, and share).  I've set it to default to 'rws' to make our lives easier.

Also, I've set the default designer to 'cweed' with password 'seaweed'.  You probably don't care yet, though.

Captain's Log, Star Date -314582.69 (1 August 2009) (Paige)Deploy interface is up and hooked into GameChooser.  It's not connected to Mechanical Turk yet, but GameChooser.as/deploy() is a hook you can use.  Known issues:

It needs links to view/edit interfaces How the heck do I get DataGrid to only show the relevant number of rows?? Layout still needs some work for maximum prettiness.

Captain's Log, Star Date -314616.01 (13 August 2009) (Paige)Authentication/permissions more or less work now.Until I get the login interface written, you still have to run dev/Login/php/login.php before GameChooser, Deploy, or Designer php work (designers are irrelevant for GameEngine, Global, and PlaySideBySide; Viewer is getting merged back into Designer, and DataOutput

Page 25: Seaweed 2 Workbook

needs its PHP seriously overhauled anyway).  But aside from that, the call to check_permissions checks to see if you are both logged in and listed in the ownership table as an owner of the relevant game.  

Still to do:

Public games (just need to pick an appropriate group name and modify the sql query in check_permissions a bit)

Do something useful on incorrect username/password Do something useful if the user doesn't have permission on the game they're trying

to do stuff to (note to self: talk about error handling tomorrow in the meeting) Write the login interface (and, eventually, register/reset password/etc) Maybe at some point we'll want to have different permissions levels.  In that case, I

suppose we could hand check_permissions (the structure and naming scheme of authenticate.php can use some work... sigh) the permission level that the user should have for that action, and it'll check for that.

Where is everyone, anyway?

Captain's Log, Star Date -314616.01 (28 August 2009)

New bugsIn a new game, click on escape hatch. Then, select a screen. Now, try to put an element on the screen. (It doesn't work)

In Game 111, it's possible to click Code and the screen appears split in half. A click to Payoff matrix splits the screen between code and payoff matrix.

Page 26: Seaweed 2 Workbook
Page 27: Seaweed 2 Workbook
Page 28: Seaweed 2 Workbook
Page 29: Seaweed 2 Workbook

[rcm] let's meet on Tuesday, time TBA; need to get real experimental results by next Friday

Functionality

[hmslydia] * No partnership in the default game[rcm] * Still caching SWF files[hmslydia] * Game 82 shouldn't crash Seaweed[yafim] [hmslydia] * THE BOMB button was cut off in the GameEngine (game 82) - this isn't a problem with the game engine. The buttons in the Designer grow to the size of the text, but the size it gets saved as only changes when you manually resize.  (Look carefully at the outline of the button, it's smaller than the button itself)[yafim] Multiple PlaySbS tabs might be slowing down the browser; consider reusing the same tab for each game

Long game name and screen names shouldn't cause scrollbars to appearPlay SbS only shows 1st word of game nameResizing the slide chooser is slow & not reliable

Usability

Uncategorized

[joey] ** Autosave when PlaySidebySide r2460[yafim] ** Save button had no feedback, clicked it many times (display "Saved" in yellow at top, very briefly)[hmslydia] * Can't change screen timeouts, and default is probably too short (make default 30 seconds)[yafim] * All screens require buttons (persistent message displayed over screens that don't have buttons and you can't play them) ???[hmslydia] * New screens should have better default names than cweed-genX[yafim] * UI doesn't work on 1024x768 (scrollbars first, then autoscaling) ???

AutosaveUndo"Loop1" is confusing (need to name loops? maybe the default one Round)Selecting screen name and leaving bounding box starts dragging the screen insteadRevision historyWanted to align widgetsDesign in PPT and upload to SeaweedWanted random number generatorClicking on slide name should select text for easy replacement of the whole nameSumming payoffs is essential

Slide chooser[rcm] ** Visually hard to tell whether slides are inside or outside the loop; bring back hamburger buns[rcm] * Dragging slides into and out of (especially below) loops was hard (behavior was "different" at different times)

Widgets[joey] * Rearrange widgets in toolbar, too many rarely-used widgets in toolbar (Partnership, Escape Hatch, Loop)[joey] * Escape Hatch is a bad name (Script, Code)

Page 30: Seaweed 2 Workbook

[yafim] * Want to change font of whole button or textbox without making a text selection ???[yafim] * "Okay" should be "OK" in image dialog, or better Save or Insert[joey] * Choosing a widget from the toolbar has very little feedback (e.g. clicking on the Image widget appeared to do nothing)  (cursor feedback immediately, better depress feedback) ???[yafim] * Default font size is too small

Font size selector is too complicated (enlarge/shrink font buttons might be simpler)Font toolbar needs to be disabled much more often (e.g. while editing screen names)Hard to put unbulleted text before bulleted listTried to put an image into a button and tried to put an image into a textboxExpected text input widget to be a multiline text area, but it's really a single-line text inpu[F] Font size selector didn't seem to update

Copy Paste Select[rcm] * Expected multiple selection for widgets[rcm] * Expected multiple selection for slides[aubrey] * Hotkeys for Delete, Ctrl-C, Ctrl-V[rcm] * Copy & paste of slides sometimes didn't work, sometimes put the pasted slide in unexpected place[rcm] * Click & drag out widgets, not just click[aubrey] * Pasting widgets from one screen to another seemed to require clicking on the screen (maybe?)[aubrey] * Clicked in a textbox, pressed Copy, nothing happened (maybe copy entire widget instead)[yafim] * Selection border to thin to easily hit

Copy & paste image data directlyplace (no cursor in the slide chooser for pasting at a particular place)Paste didn't replace the selected widgets

  Payoff Matrix [hmslydia]* POM variable choices were more than needed (only vars with multiple values); could have a better default[hmslydia] * POM variable value order should be based on slide (left-to-right, top-down order)[hmslydia]* POMs should have unique default names, and not allow duplicate names[hmslydia]* [F] POM editor filled in identical values automatically[yafim] * [F] Font toolbar shouldn't show when POM editor is showing[hmslydia]* [F] Switching from POM editor to Draw area is very slow

* Automatically maintained symmetric POM by default

Expression Language

[hmslydia] put the expression syntax spec in this workbook (include =/==, or/||, and/&&, not/!)[hmslydia] backend for embedded data expressions[hmslydia] backend for conditional text expressions[yafim] UI for variable references[joey] * Renaming a screen should automatically refactor all the references to its variable (maybe we need to drop the expression syntax or represent it internally using internal identifiers)

Page 31: Seaweed 2 Workbook

* Need a more powerful expression language (e.g. so you can put a total payoff in a textbox)* Not visible that you can embed data expressions in textboxesLoop/Variable/Player is the wrong order for the constraints (should allow any order; should generate a reasonable order)Expression syntax needs more space in the conditional text dialog or needs to be less verbose* Expression syntax needs expression for player name (e.g. Player[me])* Need wizard for creating variable references* Expression syntax: used = instead of ==, and instead of &&* Didn't know the names of the variables he could use in the expression syntax (need to be more visible)

[rcm] Conditional Text* Conditional text needs to be rich textResizability of conditional text is undiscoverable* Not clear that conditional text preview is uneditable (perhaps pop up dialog automatically when you click on it)*[F] Conditional text dialog didn't disappear when switching screensNever filled in Otherwise box on conditional text dialogs

Captain's Log, Star Date -314616.01 (4 September 2009)

Here is a description of the new express language design.

Expressions appear in two places:1. Conditional Text if... clauses2. Label Widgets

In label widgets, the clauses appear in {} so that the parser can find them. In both places, the code will get eval'ed so users can add, subtract, multiply divide, etc.

Primitives:

=/==/is/equals or/|| and/&& not/!

Specifying a value:

1. VariableName[player]

player is required, loop defaults to the current loop if nothing is specified. Uses: You Played: {decision[me]} and your partner player: {decision[opponent]}

2.  LoopName

  Spits back the current iteration of that loop name  Uses: telling the user what round they are in, writing a conditional that will do

something different if Loop1 = 5 (the last round perhaps)

Page 32: Seaweed 2 Workbook

Aggregate Expressions: sum(VariableName[player, loop])

player is required     loop is also required.  It is the name of the loop that you want to aggregate over Uses:  Get total points accrued over the current round.

max, min, are the same as sum in syntax

count(VariableName[player, loop] == 'winner')

player is required loop is required.  It is the name of the loop that you want to aggregate (count) over. Uses: This is meant to all the designer to report back how many rounds a player won,

or how many times they played rock, or something like that.,

Captain's Log, Star Date -314686.65 (8 September 2009)

Ok, here's how TextInputWidgets work.

In Designer, they're basically just a TextArea (resizeable), with:

A Label with the widget's name; click to get a TextArea to change it A checkbox to select whether or not the user is allowed to submit an empty text

area, and an explanatory label attached to that A checkbox to select whether the user must enter a number, and an explanatory

label attached to that.

I've edited allll the saving and loading PHP in Designer and the deleting and cloning PHP in GameChooser.  It gets more complicated in GameEngine, so I'm giving that its own section here:

helper.php/processNode: looks for text widgets, makes an array from them (unfortunately, makeWidgetArray doesn't generalize, so it uses makeTextInputWidgetArray, which is just like makeWidgetArray except that it grabs the special TextInputWidget parameters as well: name, cannotBeEmpty, mustBeNumeric.), and sends it off with the other widgets to be sent back and put on th

getNextScreen.php: Flex (theoretically) scrapes the text in the text inputs in the player interface and packages them up (JSON encoding) as an array of objects with the fields type, variableid, and datavalue, which are 'textinput', the game's ID for that widget, and the text that is contained in that widget at the time the screen's button is pressed. 

GameEngine does not yet validate text inputs. It's also not scraping text correctly, and something's wrong with the packing-up-to-JSON, because the PHP barfs when trying to process the text input data I send it. Sigh.

Page 33: Seaweed 2 Workbook

Captain's log, Star Date: -314691.62 (10 September 09)

New bugs:

Functionality:[hmslydia] Variables not replaced with their values during play[hmslydia] Partnering and expression evaluation doesn't work properly.

Data Builder:[yafim] Data Builder: the first radio should be selected by default[yafim] insert button doesn't work: it's not copy pasting the expression into the text widget

The insert button works well for me. – Yafim

[yafim] alignment of data builder not correct[yafim] Didn't choose a radio button in the data builder, and used the data builder as a guide.

Screens:[joey] Auto-resize: the size of the text widget should adjust to the size of the text. Wanted auto-resize on the label widget.[joey] Text Widget placement: tried to drag a rectangle for TextWidget, didn't work. Expected label widgets to be dragged out using a rectangle.[yafim] saving is dark green on green. need more contrastCan't align widgets"maybe you should have an error message if you don't have any buttons" -> the error message was not visible to the user."now the data is hanging off the bottom." -> maybe widgets should not be able to be placed beyond the bottom of the screen?

Cut/Copy/paste still broken on windows

Payoff matrices:Inserted another payoff matrix seemingly by mistake. He pressed the payoff matrix button expecting to see the payoff matrix that already exists. "what just happened here?" when switching to payoff matrices. "I'm accidentally making payoff matrices, willy nilly"

would like to put in a reminder of the payoff matrix in the instructions: can you copy/paste the payoff matrix into a screen? If I change the payoff, I'll have to do it manually, maybe use this data button?

the pom list in screen chooser  is too tiny, he wasn't able to see all available poms (needed some visual feedback of poms in list but off the display)

Variables:"is there a way to make a button that will make it advance to the next screen?""how does it know this is called decision?"he was nervous about putting spaces in variable namesinitially expected to refer to player based on who had the higher score

Miscellaneous Usability:Variables are longer than the text that will replaces them, giving a poor layouttext widgets with conditional text appear as the first condition.Tried to put buttons on instruction screen.The widgets end with a blank line.

Page 34: Seaweed 2 Workbook

Expected conditional text to be invoked using the data button.

Oct 22, 2009

Regular Meeting Time of Monday at 3pm Status updates:

o ProcessNode vs. grammars for Validation or syntax checking o CodeIgniter framework o Mechanical Turk integration o Refactoring variable names

Research questions for paper o deadlock & race conditions: how do we address this in a simple, EUP system? o visualizing two different UIs: how to design both sides of the interaction at the

same time. most other systems have only one UI to design. we often think of having multiple roles, but having this as an EUP system is novel.

o producing user generated test output to determine that their game is functioning as expected.

o visualization of test output: a problem that professional designers have: be able to understand them. also an issue of scale

o sessions are traces through user interface: how to aggregate and summarize so the user can understand it?

o Farther out: GWAP built by PhDs, and make this an end user programming system. make them fun and engaging for players. security: people will game it, script it, exploit it, or ruin it. figure out how to check and solve these problems.

November 4 meeting with economists Bugs Ensure jvmarg is set only on the mac, not windows.

Nov 18, 2009

Code Reviewing

1. When you're ready to commit some changes from your working directory to Subversion, you first run a Python script that uploads those changes for somebody else to review.  The script is called upload.py, it's found in the root directory of Seaweed2.0, and here's how you use it:

            ./upload.py -r <reviewer's gmail address>

For example, I initiated a code review by running upload.py -r [email protected].  For now, let's use me ([email protected]) as the reviewer for frontend (Flex) code, and Joey ([email protected]) as as the reviewer for the backend (PHP).  Joey and I will have to review each other.

2. Your changes will be uploaded to a server (bolinfest-rietveld) and a message will be sent to your intended reviewer and cc'ed to the seaweed-developers mailing list.  Clicking on the link in the email goes to the code review site, which allows the reviewer (and anybody else who's interested) to browse the changes in context and make comments on them.  I encourage everybody to check out the reviewing site right now.  A few notes:

* you can view the changes without signing in, but to make comments you'll have to sign in

Page 35: Seaweed 2 Workbook

using the link at the upper right and your Google username and password.

* to make a comment on a changed source code line, double-click on the line and a comment box will appear.

* when you're done reviewing and want to submit your comments, use Publish+Mail Comments (or press m).  It will send an email message to this thread, so everybody (the original developer + seaweed-developers) will see your comments.

In many development projects (notably Google), the reviewer has to finish reviewing the changes and sign off on them before you're allowed to commit to Subversion.  We're NOT going to do that.  Instead, once you've initiated a code review, it's OK to immediately commit, because we want code reviewing and development to be able to proceed in parallel.

Warning: the Rietveld reviewing system does not handle MXML files well.  First, it doesn't let you view them in a side-by-side comparision between the old file and the new file; all you can get is a contextual diff, which is ugly. Second, which is worse, if you're so daring as to comment on that contextual diff, you end up with an unsendable review -- i.e. clicking on Publish+Mail Comments produces a 500 Server Error.

Until we figure out how to fix this, you should put reviewing comments about MXML files in your overall review comment, which you can get to at any time by clicking "Edit draft message".

December 1, 2009

Refactoring strategy for game objects:

Currently, games are loaded from the database using a flat JSON structure and stored to the database using a quasi-nested JSON structure. Game elements are stored in separate tables. This design requires redundancy throughout the frontend code, backend code, and database schemas, meaning any change must affect frontend, backend, and database schemas.

Instead of storing games using the following tables:

1. button_widget 2. conditional 3. controlFlow 4. escapeHatch 5. image_widget 6. loop 7. screen 8. partneringEvent 9. pom 10. pomvalue 11. text_widget 12. textinput_widget 13. role

We'll store and load games from just one table:

1. revision

Page 36: Seaweed 2 Workbook

Rows in revision store revisions of a game. It has:

id (revision id, integer primary key) gameid (integer) created (timestamp) name (varchar, only for the benefit of the game chooser) object (text, the JSON encoding of the game)

That's it. The format of JSON sent over the wire for loading and saving should not differ from the format of JSON stored in the database. Furthermore, the JSON itself should reflect the actual tree structure of the game, e.g.,

{        "type":"game",        "name":"Untitled",        "debug_run":null,        "run":null,        "asymmetric":"0",        "content":        [                {                        "type":"pom",                        "name":"payoff",                        "content":                                [                                ]                },                [                        {                                "type":"screen",                                "name":"instructions",                                "content":[]                        },                        {                                "type":"loop",                                "name":"Loop1",                                "iterations":2,                                "content":                                [                                        {                                                "type":"screen",                                                "name":"decision",                                                "content":[]                                        },                                ]                        },                        {                                "type":"screen",                                "name":"thank you",                                "content":[]                        }                ]        ]

Page 37: Seaweed 2 Workbook

}

Refactoring strategy for matching players (formerly: partnering):

The backend does not use database transactions to test and set players in the queue, allowing race conditions to happen. Also, partner/partnership/partnering is too similar, so the following structure is recommended:

Player: an individual player. Belongs to at most one match and exactly one pool and one run.

Match: a grouping of players, specific to exactly one pool. Pool: A set of players from which to match players. Run: Used to distinguish lab experiments from mechanical turk, etc. Specifies the

number of pools and maximum pool size

Refactoring idea (half-baked) for variables:

Convert variable/expression syntax into a JSONPath expression to select the value.

Refactoring strategy for logs:

Currently, we have a table called userData with several unused columns. This complicates later analysis of the log. Instead, we should use a schema consisting of all non-null columns.

1. id 2. timestamp 3. player 4. gameid 5. revisionid 6. entity 7. attribute 8. value

December 22, 2009

We're now using advisory locks on our backend code to prevent race conditions that caused so much grief.

It'd be better to use database transactions properly. To do so requires more work than setting the transaction style to serializable and surround everything with a START TRANSACTION and COMMIT/ROLLBACK:http://dev.mysql.com/doc/refman/5.1/en/innodb-transaction-model.html

December 28, 2009

Bonus payments rely on a cron task running on groups.csail.mit.edu.

January 13, 2010

Page 38: Seaweed 2 Workbook

How to get up to speed with Seaweed:

1. Install the following. READ ALL INSTRUCTIONS. If you are using 64-bit Windows, use the 32 bit version.

a. Adobe Flash 10 Debugger version b. Eclipse c. FlexBuilder Plugin (Get FlexBuilder Plugin to work with the latest Eclipse) d. Kerberos (Windows) e. OpenAFS (Windows) f. Putty (Windows) g. Git (Windows) In the installer, ensure Git uses Putty's plink.exe file. h. By this point, everything be installed.

2. Connect to CSAIL through Kerberos & AFS (Windows): a. Open Network Identity Manager. b. Click Credential -> Obtain new credentials. c. Enter your CSAIL user name d. Enter CSAIL.MIT.EDU for the Realm e. Enter your CSAIL password f. Click OK. g. Open AFS Client. h. In AFS Cell, enter: csail.mit.edu i. Enter your csail user name j. Enter your csail password

Connect to CSAIL through Kerberos & AFS (Mac):

a. Open Keychain Access (in /Applications/Utilities) b. From the Keychain Access menu, choose Kerberos Ticket Viewer. c. Add Identity: [email protected] with your CSAIL password. d. Open Terminal (in /Applications/Utilities), e. Type: aklog

3. Configure your Eclipse workspace folder (from the command line): a. git svn init

svn+ssh://svn.csail.mit.edu/afs/csail/group/uid/svn/uid/projects/cWeed/Seaweed2.0/

b. git svn fetch c. At this point, your working copy is now up to date. You now have the

entire history on your laptop. You can see it with the followingcommands:

 gitk --all & git log

4. Map a network drive to connect to the Seaweed folder: a. /afs/csail.mit.edu/group/uid/www/data/seaweed/ (Mac, Linux) b. \afs\csail.mit.edu\group\uid\www\data\seaweed\ (Windows)

5. In Eclipse, a. Go to File -> Import... b. Expand General c. Click Existing Projects into Workspace d. Click Next

Page 39: Seaweed 2 Workbook

e. Browse... to select root directory, and select your workspace. f. Click Finish

6. Configure ANT in Eclipse. a. In Eclipse, click Run... -> External Tools -> External Tools Configurations... b. Create a new ant build. Double click on Ant Build c. Browse Workspace.. Use builder/build.xml d. The build target should be deploy (to deploy to your own space). You can also

add deploy-dev and deploy-release for other targets e. Set up Environment variables f. Set CSAIL_USER environment variable to your CSAIL user name. g. Set AFS_ROOT environment variable to the Network drive that points to the

Seaweed folder. h. Run this task to deploy your changes to the CSAIL web server.

7. Configure Eclipse to use spaces for tabs as in the UID FAQ.

8. You should now be up to speed. Make some changes and commit something! To do so, use the following commands:

a. git commit -a -m "Commit message goes here." # This performs a local commit

b. git svn rebase # This ensures that your branch is up to date with SVN. c. git svn dcommit # This pushes your local commit to SVN.

MINI Git tutorial:

Please read Git Magic and introduction to git-svn for svn users and deserters

Some of git's interface is similar to svn: git blame <file goes here> git status

You can add or remove files from the repo just as with svn: git add <new file> git rm <file to remove>

When you are satisfied with your work, and know how to describe it,use the following command. It will save your commit locally in the.git folder. git commit

If you don't like your default editor (say, vi), you can set it tosomething easier (e.g., pico or nano) with the $EDITOR environmentvariable. Or, you can specify your commit message using the -mparameter (just as in svn)

 git commit -m "Commit message here"

Once you are happy with all your changes, you can then commit it backto the SVN repo with the following command:

 git svn dcommit

To make a new branch:

Page 40: Seaweed 2 Workbook

 git checkout -b <name of branch>

To list the available branches:

 git branch

To switch to an existing branch:

 git checkout <name of branch>

To update your checked out files with the new changes from the repository (similar to svn update):

 git svn rebase

February 11, 2010

Refactoring Block worker Timeout problem

February 25, 2010

Refactoring: Decouple screen chooser from control flow. The control flow will be in a language like javascript or python. The primitives will be something like:

o  show("screen name",timeout) which shows the screen and may return the result of the screen (the decision). 

o store(x) stores data for the play o load(x): loads data and blocks until data is ready