A few months ago, we designed an interface template for our isee NetSim sample models. The template is an iThink/STELLA model in which the interface layer is designed to look like a website:
- Navigation buttons are styled to look like hyperlinks instead of push buttons.
- Push buttons are used to perform actions, such as running the simulation.
- Tabs along the top of each page let the viewer know which section they are in, as well as providing a way to quickly jump to any section.
You can download the template model and use it as a starting point for creating interfaces to models you want to publish online.
How to use the template
The template model consists of four interface pages: Home, Background, Explore Model and Simulate. Navigation buttons to and from each page are already setup within the interface. You can customize each section by replacing the placeholder text. The pages are a starting point that establishes a website-like look and feel.
The easiest way to apply the template model’s interface to your own model is to simply copy and paste the pages.
- Open your own model and switch to the Interface layer. Choose ‘Interface Prefs’ from the Interface menu and make sure the ‘Show Pages’ option is selected. Set Page Size to 800×600. This will allow you to see the page boundaries as you apply the template.
- Open the template model and from the Interface layer choose the Edit menu –> Select All, then Edit menu –> Copy to copy all of the pages to the clipboard.
- Go back to the interface layer of your model and choose Edit menu –> Paste.
When you have pasted the pages into your model, they will probably not be lined up correctly within the page boundaries. The dashed lines show the boundaries of each page. Using these dashed lines as a guide, use the arrow keys on your keyboard to make the pasted pages line up properly.
Now you can customize the title and text in each page. Add a picture to the home page and build a control panel. If you want, you can use the hyperlink button on the ‘Background’ page to link to online information, (PDFs, other models, Wikipedia, etc.). Consider building a storytelling sequence on the ‘Explore Model’ page to unfurl the model a chunk at a time. These are just a few customizations you can make. Take a look at some of our sample models published online with isee NetSim for ideas.
If you publish some models online that use the template, we’d love to see them! Leave a link in the comments so we can check them out!