Introduction | Your first interface | Building a model | Advanced features | Resources

2. Your first interface

This section aims to familiarise you with the JeLSIM Interface Builder as quickly as possible. It will guide you through the six steps that you will need to undertake every time you build a new interface. The aim is that by the end of this tutorial you will be confident using the Interface Builder and some of the more straightforward visualisation objects. Hopefully you will also be enthused about the potential of the tool and keen to experiment on your own and learn how to implement more complex objects.

You will learn how to create an interface from an existing model. It covers how to load a model into the tool; the objects available for displaying model variables and how to customise these objects; how to add text and graphics to improve the look of the interface; and finally, how to make an applet from your interface.

The six steps are:

2.1 Opening a model

How to open a model in the Interface builder and prepare to create an interface.

2.2 Accessing variables with objects

Every model will have variables - inputs to and outputs from the system - that you can display and manipulate on your interface. This steps shows you how to use visualisation objects to access these variables.

2.3 Customising object properties

You can change the way in which all visualisation objects look, feel and behave by modifying their properties. This step shows you how.

2.4 Adding actions to the interface

Most models have associated actions - programmed operations that the model can perform on its variables. This step describes how to access these actions using action buttons.

2.5 Adding text and graphics

In this step you will learn how to add additional objects to the interface to improve the look and usability. These include text, images, and other graphical objects.

2.6 Creating an applet

In this final step, you will discover how to take your finished interface and make it into an applet that can be viewed in a web browser.

Below is the eSim interface you will be developing (you can learn how to build the underlying model in the Building a model from scratch part of the tutorial). This simulation shows Ohms Law on an electrical circuit (don't worry if you don't know anything about physics, all you need to understand is that an output variable (current) is dependant upon two input variables (voltage and resistance)). Have a look at this simulation before you start Step 1 and see how the current changes when you alter the voltage or resistance values.