iPhone iLoci Memory Palace App, by Don Hopkins @ Mobile Dev Camp

A talk about iLoci, an iPhone app and server based on the Method of Loci for constructing a Memory Palace, by Don Hopkins, presented at Mobile Dev Camp in Amsterdam, on November 28, 2008.

iLoci Talk Video

Introduction

What this is: it could be described as a mind mapping application, of making a geographical map of ideas.

It’s named after the Method of Loci, the ancient Greek method of memorization which has you remember things as places that are linked together.

There’s a term called “Memory Palace”, where you construct an imaginary palace of rooms connected together, and remember things by remembering a walk through the map, and looking at things.

Anyway, another idea is — if you’ve ever played Adventure or a MUD — each of these is like a room, and you can walk around them.

The other thing is: this is a pie menu editor. If you’ve ever used The Sims, you click and you get a menu with things in different directions, and you move up, or left, or right, or down.

So really, what this is, is a network — instead of a hierarchy of menus — it’s a network of menus.

You can construct your own by going into edit mode. Do the little multi-touch gesture. So see, it’s a little Google Mappy, like that.

And in edit mode, you can make a new Locus. And then, you can edit the map, you can just “kiss” them together to connect them.

And then “boop”. And then “kiss” them together again to disconnect them. And it just connects the closest edge. And then “boop” here you could intervene, stick them in the middle.

And you can just make your little map to reflect whatever structure you ideas have. So these could be geographical places, and then you could go take a picture.

Woah! What is this? This is my new bug! It’s trying to put a control up twice. I’ll try not to do that. This is fresh now.

Each of these Loci, or each Locus, has an image, a title, a description, and a URL.

We can drill down into the map. You see, the name, author.

We can upload it to the server.

It has twelve Loci.

I’ve used Roman numerals by default, because you know, it’s ancient Roman and Greek.

Each of the Loci has a name and an image.

You can get an image from the camera, or pop it in from iPhoto. So you can go back to the map, and now it has the image.

And you see the description. If this had a description, it would show it on the screen here.

Oops, that’s the description of the map itself.

Oh, the other thing is a location, and a web URL. And URLs can be tel:my-mom’s-phone-number.

So if you double click on one of these, double touch it, it can open a URL. It has a built-in web browser, if it’s a regular URL.

Let’s go here. Make the North one URL http://piemen.com, and then we’re on the map. Just double click it, and that’s the built-in web browser.

What in the world is this? Woo! Heh heh heh! I don’t know. I think I mistyped my — that’s not my — it’s a box with a Linux server… piemen??! Whoo hoo, that was close! At least it wasn’t cakefarts.

Ah! Oh. So the cool thing, having a web browser there means you can flip back and forth without running another application, and you can also open the built-in URLs.

And you can watch YouTube videos in it, or movies, like that, without leaving it.

You can think of this as an elaborate, two-dimensional, web link — what do they call them theses days, not your history, but your hot list, or whatever — bookmarks, right.

So these could be bookmarks. And the other thing is, they could just be little notes you write about.

The other thing is, well like it’s a real pain in the ass doing Objective C dialogs.

So I want to have this one set of dialogs that’s built into the application and edits all your content.

But there’s a lot of other stuff that I want to do that’s much harder to do in Objective C than on a web server, and also that involves pulling data down from the web. Stuff that you’d really want to implement on the server side.

Here I have iLoci Online Home. Oh, hey, there’s the web server! Python, TurboGears. It calls up and says “give me a web page”.

And I’m using the web — there’s IUI and there’s like web something, web view or some other JavaScript library that makes it so you can make very iPhone-looking-like web pages. All this is just HTML and JavaScript.

So I put the documentation up. There’s a Quick Start. The Method of Loci, you can go into Wikipedia.

I can just link in to the Wikipedia page about the Method of Loci. So it’s nice to be able to just point out the resources that are there.

But also, the web service: I have an account. I goes off of my iPhone serial number, and I can access this web server from a regular web browser too.

The neat one, “My Online Maps” — I’ve uploaded maps. I can go into — when I upload a map, it makes a zip file of the content.

The web server reads the zip file, parses it all, validates it, and puts it into and SQL database.

Now I’m just downloading — I’m not even downloading — I’m browsing the content off the server, that anybody else can see.

Basically, I can go and drill down into a map somebody’s uploaded, and decide this is pretty neat, maybe I’ll download it.

See we have the links? These are all linked together.

And the links, the web server knows about.

If I wanted to — I’m inside the list — ok yeah, so each map has “Download This Map”. And then it just downloads a zip file. I said “download a zip file”!

Let’s see if the uploading’s working, that’s the cool part. That’s where it actually merges. Because you could be uploading a map that’s already there, so it has to merge it back in, and re-use all the objects.

Ok, so it downloaded. Now I’m editing that map.

Oh, there are books from Amazon! So if I double click on it, it brings me to the Amazon page, and I can order it, and hopefully I’ll get some money off of that.

But basically, this is how you make a book from Amazon in this thing.

I want to make a lot of way to create new content. Because there’s a lot of things you can do this for.

So there’s “Construction Tools”. Right now I have “Search Amazon for Books”. I will have “Search Flickr for Photos”, and “Search YouTube for Videos”, “Search Google for Links, Images and Videos”, and the “Map Locations” — Google Maps. And then “Import an RSS Feed”, “OPML Outlines”.

And just templates for things that the iPhone knows how to do. Like dial a phone number, but look that phone number up in the address book. Send email.

Think of this as like a post-it note thing, where there’s links between post-its, and they can point to web services.

I can make a URL that points to my server, and invokes a service in the web page, but also tells the latitude and longitude of where I am to the server, and it can make some web page based on where I am, like here’s the coffeeshops nearby.

I’m going to show the Amazon books. So now, what you’re going to see is magic.

So, what this is — oh oh! — ok, that just did an Amazon search, right.

And now so we get — this is all running on the server — so now if I click on this cat here, this is the “Save to Locus” dialog.

I’ve got this information, the name and the image, and I can look at it and change it if I like.

Now I’m going to apply it to some Locus that’s in this thing.

So this is a menu of all my, all the — the way this web page knows what I have on my iPhone is that it opens a URL like iloci:give-me-the-list-of-maps-that-you-have.

So really there’s this web page, and it’s talking to a server out there over http, but it also thinks the iPhone app is another web server.

It uses “iloci:” instead of “http:”.

What I have is a set of services that return JSON.

So I just make a script tag whose URL asks the question, like “what are all the maps”, and “what are all the rooms in that map”?

And then I say “Change Locus”.

Now this goes out, downloads the image, and then stuffs the data in, and sets the URL, and then I’ve updated the map.

So that’s just one way. You can imagine going out to Flickr and getting a photo.

Or automatically creating — It doesn’t do it yet, but I want to be able to import ten things at a time, and link them up I, II, III, IV, V, VI, VII, VIII, IX, X, like that.

And then you go down into them, and look at the text, and go to the next, and then, oh I like this one, I’m going to copy this out into whatever I’m doing, maybe break it from here, and put it into one of my own maps.

So these things can represent anything, like Facebook, like import your friends from Facebook, boop boop boop boop boop like that. And you could arrange your friends in some order.

And the neat thing — I don’t have all the web server stuff done yet, but this is a web publishing tool.

Since it it puts all this stuff — it uploads this zip file onto the web, and then the server can just dynamically make a web site, you know, the map that you see, and a page for each thing, linked to each other the way they are.

The other thing is I can make a Flash interface for this.

At the user interface talk yesterday, as she touched on, there are certain things you just don’t want to try to do on the iPhone, because the interface is too restricting and the screen’s too small.

So what I want is to make basic editing built in, but then you go onto the web and have a big Flash interface for importing 50 things at once and arranging them into a nice map.

Basically just make tools to create things that are higher caliber online, but just focus on reading it and doing simple little editing tasks on here.

The Method of Loci has another thing that I haven’t incorporated yet.

When you’re in a room, there are things in the room.

So imagine — I mean — I don’t know if anybody remembers HyperCard, but HyperCard was a user interface building system that users could flip into edit mode at any time, and say “New Button”, stick it here, “New Text Field”, stick it there.

So basically, what I want to do is take a picture of somebody, then I can say “New Facebook Friend” and put it over their face, and it’s a link to their Facebook page.

Or just put buttons and things into the page that are then linked out to the web, or just contain some information.

And the neat thing is like — I’m programming all this in Objective C, and that’s hard, ok? But then it’s really easy to do web based stuff.

So if I have a piece of content that has latitude and longitude and a name, I can just link out to a web page that lets me edit that.

And it brings up Google Maps, and lets me search, and I can just hit “Save” and then that will just save it back into the app.

The app doesn’t need to know a thing about how that happened. And I can publish the app, and then a week later, add a new content type! Because all this stuff is just running in the web browser, and all this stuff that’s specific to the content type.

So basically, I want to make this just a receptacle for, you know, a map with little things, in room, that have data.

And that data — Objective C has NSDictionary, NSArray, integer, string, etc — that’s JSON, basically.

So I’m squirting these little JSON structures from my app into the web page, and let the user edit it with the help of a server possibly, and then hit save, and squirt it back into the app.

So it’s great way to distribute and break your app up into a part that is web based and a part that is Objective C based.

You know, we had a Python talk today. This is all open source server software. There’s TurboGears, a Python web frameworks.

SQLAlchemy is an object relational mapper that lets you do database stuff.

There’s a template system called Genshi that makes web pages and XML.

And so basically it all fits together nicely and it’s open source. Yay open source!

Anyway, any questions?

Q: Did you do this today, all of it?

A: No! No no no! A few months, you know. In my spare time.

Actually I’d written something like this — I used to work for Kaleida Labs. Kaleida was a joint venture of Apple and IBM to make a multimedia object oriented scripting language, bla, bla, bla.

We basically got steamrolled by Java. We released right before Java released.

But basically it was a Lisp-like language for doing multimedia.

And I had made a thing called DreamScape which was sort of like an Adventure map editor, where it had the rooms that you bump up against each other to connect.

And I had thought of it as a web page publishing tool. Like the end result would be a set of web pages that I could publish that anybody could browse. And then if they’re interested, it’s like window shopping, if they’re interested enough in it, then they can download the source content, the real live stuff, that they can interact with.

So it’s a way of previewing this multimedia interactive thing over the web before you download it, and then when you download it you can play with it and edit it and things like that.

The other influence is, I worked on The Sims, the game with the dollhouse simulation, and one of the really neat things that I’m drawing from is that when you’re playing the game, you can take pictures, and then write text about it. When you save your game, it writes out web pages for your house and your story, and then it will upload that to the server.

And then you go on line and you read people’s stories, and and you look at their houses in a regular web browser, and then you can download their save files. So it’s the same idea of having a big save file that you need a little app to run, but also publishing it as HTML that will get indexed by Google that you can look at on a regular web browser.

Maybe there’s a business model. I think people could put stories, and you could put Google Ads along the side, or something like that. But I still haven’t figured out how to make money off of it.

Will Wright on Designing User Interfaces to Simulation Games (1996)

Will Wright and I discussed storytelling and web publishing in SimCity and The Sims.

There was some interesting discussion about using SimCity as a medium for story telling: encouraging people to imagine far beyond the bounds of what the computer is able to simulate. You can build cities to empathize with, and tell stories about them, about their people, culture, buildings, and history. A class of students could label different parts of a city, and each person could tell a story about a different part, that interacted with the stories going on in neighboring parts of the city. Then they could make a web site with the downloadable city, and an image map of the whole city, linking to all the stories on web pages, with screen snapshots of their neighborhoods, and lots of hypertext links between each story. This way each student could collaborate with several others to write a web of interconnected stories, all about the same city!

DreamScape Demo

DreamScape is the predecessor of iLoci.

MediaGraph Demo

iLoci is the predecessor of MediaGraph.

User interface flower child. Pie menus, PizzaTool, SimCity, The Sims, Visual Programming, VR, AR, Unity3D / JavaScript bridge.