Welcome to the Weasel/Easel tutorial.
If you are familiar with using HTML and JavaScript to develop web pages, then these tutorials will show how the various interface tools provided by Weasel can be used to create web interfaces of various kinds.
Before you start, make sure you are accessing this page through your own web server, and that the computer you are using can fetch web pages from the Internet. See the the installation instructions for details.
You should work through the first 5 tutorials in the order given, they introduce the basic features of the Weasel system.
- Introduction
- A general introduction to how the Weasel system works and how you can use it. It also describes how each of the other tutorials is arranged.
- Photo Key
- This first simple application shows the Weasel system being used to provide a key to a picture. It's main purpose is to illustrate the common form of an application using Weasel in a very simple setting.
- An Interactive Floor Plan
- This tutorial application is a kiosk like system showing facilities of various kinds at Edinburgh airport.
- A Better Floor Plan
- This tutorial extends the floor plan application, showing how to change the image interactively and how to make marks on the map react to the user clicking on them.
- Electrical Circuit
- A simple electrical circuit simulator. This tutorial shows how marker images can be changed (to indicate lights turning on and off) and also introduces `hotspots', parts of the image which react to user actions.
- Shopping Basket
- This tutorial shows how markers an hotspots can be used to implement the kind of drag-and-drop interface users are familiar with in standard Windows applications. In addition the issues around splitting an application into multiple frames are addressed.
The remaining tutorials can be done in any order, they illustrate the use of the Weasel system to produce more complex interfaces.
- PC Repair Instructions
- This tutorial shows how Weasel can be used to create an interactive technical manual. Instructions for replacing a faulty PC hard disk are illustrated by an active image which highlights the parts to be worked on. This application exercises all of the features from the basic tutorials together to produce a sophisticated and responsive interface.
- A Housing Estate Page
- This application illustrates the use of the `Palette' in-browser database library to create an interface which lets the user to choose from homes available on a new housing estate.
- Graph Plotting
- Points plotted on a graph allow for easy comparison and for patterns to be spotted. This tutorial illustrates the use of the Weasel system to quickly create such a plot.
After completing these stages you should be in a position to design and implement the kind of interface you want for your web site. For ideas and help please see the examples and detailed documentation.