ScriptX and the World Wide Web: “Link Globally, Interact Locally” (1995)

ScriptX Source Code:

ScriptX DreamScape Demo:

1995 Apple World Wide Developers Conference Kaleida Labs ScriptX DreamScape Demo

Benefit of ScriptX to Web Browsers

ScriptX Pizza Demo

Benefits of ScriptX to Web Developers

Future Directions

Conclusion

ScriptX Web Module Documentation

Introduction

Classes for automatically generating HTML.

  • Lego-like WebElement building blocks, for representing hypertext markup structures as ScriptX objects, that know how to print themselves as HTML.
  • Nested structures are represented by WebGroup objects, that inherit from Array, and can contain strings and other recursively nested elements. WebGroup subclasses represent HTML structures like WebPage, WebHeading, WebLink, WebBulletedList, and WebParagraph.
  • Dynamic WebMacro, expands into other elements by calling your function. Defered evaluation, parameterized by key/value pairs of submitted form. Very powerful!
  • Easy to write new elements and subclass existing ones to make very interesting high level HTML widgets, like WebXeroxMapImage for embeding images of the Earth remotely generated at Xerox PARC, WebSelectProp, for selecting between one of several property values in an interactive dialog, or WebObjectAccessor, for getting and setting the value of a ScriptX variable via a Web form. The last is especially neat, since it allows you to embed any number of accessors in a form all pointing to the same externalized target, and the form submission is handled automatically by the Generic dialog. Totally automatic and stateless!
  • Gif exporter, supporting invisibleColor transparency and interlacing. ScriptX presentations can be dynamically rendered and exported as GIF images, which can be woven together with image maps or interactive services that map user input back to the actual objects in the picture.
    Image map generation utilities, for writing out image maps of arbitrarily shaped ScriptX objects.

Web Browser Remote Control Interface.

  • “OpenURL” request from ScriptX to Web Browser, so ScriptX can tell Web Browser to follow links. Useful for bringing up remote web pages, downloading remote ScriptX title containers, as well as locally displaying dynamically generated html and gif files.
  • Automatic “Helper Application” registration. ScriptX can automatically register as a helper application for “.sxt” title container files, so it’s not necessary for the user to configure the browser manually, in order to use ScriptX as a helper application. So whenever the browser opens a URL of mime type “application/scriptx-title”, it will load the title container into ScriptX automatically. Either the user can click on a link to a title container, or ScriptX can send the “OpenURL” request to the browser with the URL of a title container, to download and run it automatically.
  • “EchoURL” notification from Web Browser to ScriptX, so ScriptX can watch the source and destination of every link the browser follows. Useful for maintaining hot lists, drawing maps, and in combination with “OpenURL” for managing navigation history.
  • Protocol registration, so when the browser opens a URL beginning with “scriptx:”, an “OpenURL” notification is sent from the browser to ScriptX, which can respond interactively by dynamically generating html and/or gif. This is the key to implementing local interactive web services with ScriptX, using NetScape as an external browser for ScriptX, and implementing tightly integrated Web authoring tools with ScriptX!

Web Server, Service, and Dialog classes, for managing OpenURL notifications, responding to service requests, and handling interactive dialogs.

  • The WebServer manages lists of named WebService and WebDialog objects.
  • A WebService represents a URL you can open by name, such as “scriptx:help”. It’s defined by a function that returns a string of HTML, usually by telling a WebPage or WebMacro to print as HTML. Services are like home pages or entry points for dialogs.
  • A WebDialog represents an ongoing conversation with state, encoded in the URL as key/value pairs, like “scriptx:dialog=ClassBrowser&class=Collection”. It’s defined by a function parameterized by a KeyedLinkedList, the key value pairs, parsed courtesy of the WebServer.
  • All of the HTML printing functions are parameterized by “props”, a KeyedLinkedList of properties, that they pass recursively. So nested macros and HTML widgets have access to the properties that the WebDialog was invoked with, and can parameterize themselves off of those properties.
  • An object reference may be externalized to a magic cookie, that can be embeded in a WebPage, that’s later sent back to ScriptX as a link or a form property, and can then be internalized to return the original object. This mechanism, in conjunction with hidden form fields used to store invisible state information, can be used to encode the state of an ongoing dialog in the web page itself, including references to arbitrary ScriptX objects, so the WebDialog objects in ScriptX can be stateless templates, to support multiple independent views, etc. (Believe me, it’s a good thing.)
  • Includes a bunch of example services, like a class browser, object browser, file system browser, arpanet browser, scrolling image browser, scriptx command input, window snapshot service, etc.
  • To make it possible for normal people to write web pages without knowing HTML, there is a parser for a simple syntax called “Norml”, Network ORiented Markup Language, that lets you write paragraphs, links, headings, and outlines in a very simple format, as well as embed arbitrary html commands without restrictions. The Norml parser translates Norml text into nested WebElement objects described above, that may be programmatically manipulated and composed into higher level HTML structures, and printed out as HTML. There is a service called “scriptx:norml” that has a text input form for type Norml text, and a button that compiles it and displays it as formatted HTML.
  • The DreamScape demo includes a dynamically loaded part that provides services to inspect rooms, parts, and their images, with image maps you can click on to inspect the illustrated objects.

Building the Web module

  • Load “!mkweb.sx” into ScriptX.

DreamScape Documentation

Introduction

Building DreamScape

Running DreamScape

Playing DreamScape

Importing Parts and Rooms

Navigating from Room to Room

Blowing the Wind

Hitting the Brakes

Moving Parts from Room to Room

Map Editor

Authoring Rooms for DreamScape

Authoring Parts for DreamScape

DreamScape Design Philosophy

  • Constructive Experience.
    Open ended set of tools, rules, and resources that you can use together in creative ways, resulting in both predictable and unexpected behaviors.
  • Nurturing Environment.
    As opposed to a Killer App. Provide creative people with fertile ground in which to plant their seeds.
  • Dynamic Extensibility.
    Author new rooms and parts on a regular basis, that people can plug together and dynamically load at run time.
  • Distributed Multimedia Publishing.
    Distribute suites of plug-in rooms and parts on-line, by using KMP as a WWW Helper Application. Distribute bulky media on CDROM or via FTP, that is referred to by light weight up-to-date plug-in parts published regularly on Web servers.
  • Transparent User Interface.
    Content is more important than control panels.
  • Direct Manipulation.
    Graphical representation, intuitive response to input, modeless, continuous feedback.
  • Multithreaded Animation.
    Everything on the screen is happening at once. You don’t have to click, stop, and wait for an animation to finish before doing something else.
  • Gestural Interaction.
    Directional pie menu “flicking” gesture for moving between rooms, connecting and disconnecting maps. Throwing gesture to move objects around dynamically. Painting tools effected by gestures. Butterfly and robot apply gestures to the parts they’re holding, in the same way you do when you drag them around.
  • Navigation Metaphor.
    Consistent two way links, maintained by the editable map view, so you can remember your way around. The map editor interface makes it easy to build topologically flat maps, but still allows you to make tangled un-geographic “hyperspace” links.
  • Simulation Metaphor.
    Continuous physical processes like motion, gravity, and friction are simulated, so the number of states the system can be in is virtually infinite. Spatial navigation without simulation only has as many possible states as spaces (“you are here”).
  • Deconstructionist Interface Model.
    Object oriented design techniques deeply effect the very nature of the interactive experience. Whatever that means.
  • Users and Agents on Common Ground.
    You can interact directly with simulated agents, because you’re both part of the same environment. The butterfly can pick flowers and paint with them, as easily as you can. The painting tools respond to the gestures of whoever’s holding them, human, butterfly, robot, or any cyborganic combination! You can even pick up a waving robot arm, grab the fluttering butterfly with it, shake her around, and paint with the flower she’s holding! The flower, or whatever the butterfly has ahold of, will respond to the combined gestures of you, the robot arm, and the butterfly! Fortunately, she can’t pick you up and paint with whatever you’re holding — that would be taking it too far.
  • Plug-In Authoring Tools.
    Dynamically loaded map window lets you jump around and edit room connections. Dynamically loaded sets of painting tools with themes, that draw in interesting and appropriate ways, in response to gesture.
  • Director as ScriptX Authoring Tool.
    Leverage off of ScriptX’s Director Importer Toolkit, so artists can use Director for what it’s good at, assembling animations and positioning registration points, then easily import their artwork into ScriptX, without programming. So it’s easy to make all kinds of animated parts with sound effects and moving registration points, and painting tools that scatter images around like the “Image Hose” in Painter, that all plug together in wonderful ways.
  • Finder as ScriptX Authoring Tool.
    Leverage off of the capabilities of the Finder and File Manager as much as possible. People know how to use the Finder, and it’s very good for certain tasks, like naming and organizing directories, source and media files. Organize projects in directories and files, which work across all platforms, instead of storing source code and media in some special database format. ScriptX build scripts automatically process everything in certain directories, so you can just put your stuff into place and run a script, without programming.
  • ScriptX as Web Authoring Tool.
    Coming soon: “Save as HTML”! Check out the ScriptX Web Module Documentation.

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Becoming a better developer by reading other’s code

Graduation

OSI Model and overview of HTTP

Debugging your code with Pry.

Deploy Your First Rails App With Heroku

HTML & CSS

How to animate Alert Dialog Position in Flutter

How to Bubble Sort (Like a Boss)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Don Hopkins

Don Hopkins

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

More from Medium

Pair Programming ?

(Re)Building Respect

A construction site with a person silhoutted in the background

CS371P Spring 2022: Dinesh Krishnan Balakrishnan

Summary of recently released features and functions — April 2022 Edition