Device Ecology Mapper

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 database structure used for storing participant data.

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