Context
- Indiana University (Bloomington, IN)
- Ph.D. project (primary developer)
Case
Requirements: I created the front end of a system in Flash for recording data related to devices users own as well as the back end that recorded data using PHP and MySQL from the prototype.
This is the code for taking data inputted by participant and sending it to the PHP file to process and load into a database.
function submitData() { //find how long it took for the participant to complete the map var dt_date = new Date(); completion_time = dt_date.getTime(); var dif_time = completion_time - start_time; //when submitting data var user_str = userid+"|"+base+"|"+dif_time+"|"+deletions+"|"+submitted; var art_str = ""; var conn_str = ""; var anno_str = ""; //work through array of devices for(iter=0;iter<map_array.length;iter++) { //separate device string by parsable @ symbol if(iter > 0) art_str += "@"; //include device number, url, name, and x, y position art_str += iter + "," + artsUsed_array[iter][0] + "," + artsUsed_array[iter][1] + ","; art_str += map_array[iter]._x + "," + map_array[iter]._y; } //work through array of connections for(iter=0;iter<conn_array.length;iter++) { //separate connection string by parsable @ symbol if(iter > 0) conn_str += "@"; //include connection number, devices connected, and type conn_str += iter + "," + conn_array[iter][0] + "," + conn_array[iter][1] + "," + conn_array[iter][2]; } //work through array of annotations for(iter=0;iter<anno_array.length;iter++) { //separate annotation string by parsable @ symbol if(iter > 0) anno_str += "@"; //include what annotation is connected to and device text anno_str += anno_array[iter][0] + "," + anno_array[iter][1] + "," + anno_array[iter][2]["text"].text; } //combine sections together separate by parsable % symbol var send_str = user_str + "%" + art_str + "%" + conn_str + "%" + anno_str; //Display message for success or failure var resultUpdate_lv = new LoadVars(); resultUpdate_lv.onLoad = function(success) { dyn_txt.text = "Load 2"; if(success) { dyn_txt.text = "Map data saved."; } else { dyn_txt.text = "Data save error."; } }; //load php file with data var loadUpdate_lv = new LoadVars(); loadUpdate_lv.sendAndLoad(base+"saver.php?type=update&data="+send_str, resultUpdate_lv, "POST"); }
This is the code for adding a new device to the “canvas” containing devices owned or used by the user.
function createArtifact(cat, subcat, art) { //increase symbol depth var depth = map_array.length; //add device to canvas at depth of new symbol + 600 depth //this makes sure it is on top var image = _root.createEmptyMovieClip("artifact"+depth+"_mc", 600+depth); image._x = deviceMap_mc._x-0.5*deviceMap_mc._width+575; image._y = deviceMap_mc._y-0.5*deviceMap_mc._height+365; var name = ""; var url = ""; //if create new device is selected, just put a filler image there if (cat == -1 & subcat == -1 && art == -1) { image.loadMovie(base+"icons/defaultimage.jpg"); name = "Default"; url = base + "icons/defaultimage.jpg"; //if section did not have subcategory load movie } else if (subcat == -1) { image.loadMovie(base + cat_array[cat][art][1]); name = cat_array[cat][art][0]; url = cat_array[cat][art][1]; //if it did have subcategory load movie } else { image.loadMovie(base + cat_array[cat][subcat][art][1]); name = cat_array[cat][subcat][art][0]; url = cat_array[cat][subcat][art][1]; } //add device to device array map_array.push(image); artsUsed_array.push(new Array(name, url)); callbackSetting_array.push(false); //activate object selection tool tObj_mc.gotoAndStop(2); tConn_mc.gotoAndStop(1); tAnno_mc.gotoAndStop(1); tDel_mc.gotoAndStop(1); }
Result:
- The prototype allowed for users to drag and drop from a categorized list of devices.
- Devices loaded in externally
- Allowed users to create links between devices.
- Recorded overall statistics of use and connection data.
This is a shot of the digital prototype. A version that does not record data still is available.
Click here to make your own device ecology map on the digital prototype.
Outcomes: The data recording portion of the prototype was completed. It never was deployed, but it is ready for that purpose.
Details
Dates of Project: Jan 2008-Mar 2012
UX Methods Used: Flash, Actionscript, MySQL, PHP, XML
My Roles: Research, Writing, Artistry, Programming, Design