Video Tape Transcript of HyperLook SimCity Demo
This is a transcript of a video taped demonstration of SimCity
in NeWS. The normal text is Don
Hopkins talking. The "quoted italic text" is Abbe Don
talking, who's running the camera. The (parenthetcal italic text)
is extra annotation and explanation that's not on the video tape.
-- Beginning of Video Tape --
This is the HyperLook user interface
system, written in NeWS, and it's running
on a Sun on OpenWindows 3.0, and this is SimCity,
and application that I ported to HyperLook.
Now we can press a button to play a city, and it will load a map of that.
This is the overall map view, and this is the editor.
I can drag this rectangle around to scroll the map.
And then I can throw it, and it has some inertia, so it bounces around.
And then with this "Zoom" button here, I can zoom my view in,
to look closer and closer into the map, so that we're actually scooting
around quite close to the city.
And then, we can actually edit in this scale. (Wee!) Put some roads down.
I think you can get even closer. And then you can zoom out.
All this is written in PostScript, all the graphics. The SimCity engine
is in C, but all the user interface and the graphics are in PostScript.
The neat thing about doing something like this in HyperLook is that HyperLook
is kind of like HyperCard, in that all of the user interface is editable.
So these windows we're looking at here are like stacks, that we can edit.
Now I'll flip this into edit mode, while the program's running. That's a
Now I'm in edit mode, and this reset button here is just a user interface
component that I can move around, and I can hit the "Props" key,
and get a property sheet on it.
I'll show you what it really is. See, every one of these HyperLook objects
has a property sheet, and you can define its graphics. I'll zoom in here.
We have this nice PostScript graphics editor, and we could turn it upside
down, or sideways, or, you know, like that. Or scale it. I'll just undo,
that's pretty useful.
This just defines what the button looks like. Here, there's a flip function:
Special... Flip Top/Bottom. I'll just center them, and apply, and now we
have a little upside-down reset button.
So we have these Open Look components up here. I'll put this into edit mode.
See, I can highlight all the components.
HyperLook is integrated with The NeWS Toolkit,
so we can get all these ancient looking Open Look menus and what not, and
do things like cut this slider out here, and stick it onto here, to set
the tax rate.
This slider happens to set the transportation fund. Every interface object
here has a script that defines its behavior, and this guy says his action
is to send the SetTransportationFund message to MyStack. The scripting language
for the HyperLook system is PostScript, and some people complained about
that, so Arthur van Hoff wrote a C to PostScript compiler, so that they
can program in C. But however, I'd rather program in PostScript, myself.
Woops. Let me put the button back on the window. There's quite a possibility
for user interface vandalism in this system, so what we've done is make
the user interface editor be just a user interface component that's in the
stack, that you can remove to make the stack not editable. I've done some
amount of magic to make SimCity editable, but when it's delivered as a product,
it's just with a runtime system and not editable.
We will go back and turn on Auto-Budget. Ok, now this is showing us something's
happened, and I can click in here to bring my other view there.
The neat thing is that this view here itself is just another user interface
component, and I can copy and paste that, and have multiple views. Each
one of these animated scrolling SimCity editors, once I've made one, I can
put them anywhere. This window, you can click here to get three of them.
I put this nice high level component into this user interface system, and
now anybody can just cut and paste it.
One of the neat components that HyperLook comes with is the graphics editor,
which is pretty ubiquituous. Like if I were to edit this button by hitting
the properties key, I get this property sheet that has a graphics editor
Now this property sheet itself is a stack that I can edit. So its graphics
editor, the menu here, and all this stuff is just fair play.
So when you make a new component class, you also construct another property
sheet for it, or just copy one that almost does what you want, and then
edit it so that it has the new things.
That completely separates this notion of property sheets from the user interface,
because you can just plug in a new set of property sheets that have a different
look and feel, like if you want to give more novice people the ability to
edit their user interface, you could have a simpler set of property sheets.
So now we're going to get weird. I'm going to pause SimCity so it doesn't
take all the CPU time, and iconify it. And of course, when you iconify it,
the icons are miniatures of the window, and they're active too, so when
I scroll these views around in the uniconified overall window, they keep
scrolling down here in the icon.
You just get all this stuff for free with PostScript. Well, you know, it's
not exactly free, but... ha ha!
Now here is, oh yes, right here, this is a stack full of components, of
clocks. You can get a property sheet on any of these clocks. The property
sheet has three graphics editors, for the face and the two hands. We could
just change the color of the hand, or change the total look of anything.
The whole thing is just Legos. The property sheet just plugs the drawing
into the clock, and the clock knows how to rotate the hands around the face.
"That's all the same object with different representations?"
Right. One of the data types this system knows is the structured graphics
drawing. It plugs it into this property sheet with Alan Turing's head. It
just lets me edit the three instance variables.
There's this protocol for property sheets of taking the instance variables,
letting you edit them, and then putting them back in when you hit apply.
As long as your property sheet plays that protocol, you can plug and play
different property sheets, and customize them.
We could make some really crazy looking clocks. Here's a good way to make
crazy looking clocks. Woah, oh, let me show you one other thing first.
This clock stack is a warehouse of objects, this is a bunch of examples
of objects that I might want to use elsewhere. So I hit the "Install"
button, this now installs them into the user interface editor. I'll make
myself a new stack. I get a brand new stack. I go into edit mode, and there's
this edit menu, and I select "New...", and it's added this menu
of new items that I can create! That "Install" button has added
this "Neat Clocks" submenu to my edit menu.
So now I can get a "Freaky Clock". And I can get rid of this "Neat
Clocks" stack here. And then I can go get other warehouses. Say I wanted
a warehouse of Open Look components, then I could just plop them down. New...
System... Color Selector. Boing. Now I can select colors from this.
Anyway, now here's another neat way of making patterns.
This is a "Cellular Automata Machine" program, and it's a little
klunky on the user interface side, but we've got several pages. This is
the introduction. It shows you this real time cellular automata, and you
can draw in it with the mouse.
(Check out my collection of stuff about Cellular
Automata for more information!)
There are different controls: we can set how fast it goes, start and stop,
and there's all these different rules that you can run, that look totally
There's Life, then there's Brian's Brain. And you can draw in any of them.
And there are interesting initial configurations, like the heat rule. Heat
diffusion is good to start with a circle in the middle. And then you can
Now the editor lets you fill it with random numbers, and heat diffusion
does a good job on that. And you can do some other crazy things that are
hard to explain, but ...
The really useful thing that this is good for is this background button
labeled "Tile", and we can just go whomp, and just tile the background
with the pattern, so it's an interesting screen background generator!
We can also copy the image to the clipboard, and I'll open up a graphics
editor, um, where's my Royal Pine, yeah. So here's a graphics editor, and
I can paste this image into my graphics editor, and go in there and do neat
stuff with it. Clip it to an interesting shape, wee!
I can bring this into my graphics environment, and I can take this structured
PostScript graphic, this Royal Pine Car Freshner, and then I can take it
back over here to the Cellular Automata Machine, and then paste it in.
Then I can copy that back out. What I like doing is to paste the Royal Pine,
oh, first let's cool this down a little bit. You paste the Royal Pine, then
you let it go a little bit, then you stop it, and then you paste it again.
Woops, oh, my goodness. Here's let's do another rule.
OK, the good one is ld-heat, ok, very subtle, very subtle. Ok, copy that,
paste it into here, and then you stop it, and then you paste it again, then
you copy it out, and you go here and paste it into the graphics editor,
and you have this nice air freshner with an aura!
So who knows what people may decide to do with this kind of stuff. But once
you can plug things into each other very easily, and have ubiquituous graphics,
it becomes very interesting. Now I could go and use this car freshner, I
could copy it onto my clipboard, and go to my new stack, and paste it in,
and now it's a button, so now I can make it do things when I click on it.
Oh, oh, oh, oh! Here's a useful little program. When I was working at Sun,
my manager came and said, "I need to know you happyness index, a number
from one to ten. It doesn't matter how you come up with your happyness,
but you have to remember the algorithm you use, so that you can give me
the same happyness index later, and we can track your happyness." So
what we did, we made "Happy Tool".
This is a HyperLook version of HappyTool. It's going to be a really great
thing, once we get this on the network with the biorhythm daemon and birthday
dragon and everything else integrated. Basically, you can dial how happy
you are, and then, once you've got that, you can click on the face, and
it puts it into your clipboard, and you can paste it into the graphics editor.
So now you can paste these into your letters to mom, or whatever, or even,
you know, paste them into the Cellular Automata Machine!
You can actually get some really good effects by pasting happy faces into
the Cellular Automata Machine. Yeah, let's do a monster. Yeah, ok. I have
found the face of Barney in here.
Ok, let's get a good one here.
Let's do a little more symetrical rule here, then paste away. Ok, a little
more steam. Oh, ok, here we go, yeah, ok. Aaah.
Yeah, ok, symetry, that's where it's at. Aaauugh! Yeah, try it the other
"What happens if you put Turing's face in there?"
Oh, Turing's face! Where did I put that? It's over here.
You can hit "Props". Just copy that out.
Bring him to the top. And paste!
Aaah! It melted.
Oh wait, let's try it this way. Woah. Oh, oh, and there are other rules
that do different things. Let's try pasting Turing's face here.
Oh yeah. Or the big happy face. Woops! Well that slagged. Oh yeah!
-- End of Video Tape --