Storyboard
We've discussed many different methods of laying out application pages. You may even have your own ideas of how to efficiently re-create the booster station layout. It may help to sketch a simple storyboard to help you plan and visualize the layout of your pages.
Web developers often use a storyboard when they are planning the layout of a web site and the interconnectivity of their web pages. You may find it useful to adopt this practice to help you decide upon the layout of your application pages and their interconnectivity. A storyboard can be as simple as a sketch on a piece of paper that represents each page in a pyramid, with the upper-most page or pages representing overviews, and the lower-most pages representing sub-pages with details on groups of equipment or equipment processes. You can also include a brief description of the contents of each page to assist you. You will find yourself referring back to your storyboard often. Another benefit of using a storyboard to help you plan your application is to assist your colleagues in developing pages if you are making a team effort. Different developers will be able to refer to the storyboard to see the pages and elements for which they are responsible, and ensure that they include the appropriate elements.
A storyboard is not a detailed blueprint or P&ID; rather, it is merely a synopsis of the major elements to be included on each page. A sample storyboard is provided for you in Figure 2.
Figure 2
Page 1 Contents
Page 1 will be an overview page with details of the processes related to the booster pump, booster tank, and compressor. Processes related to the chlorination unit equipment will be summarized on this page using a single bitmap, while details about the individual equipment components comprising the chlorination unit will be provided on the Chlorination Unit page.
Clicking on the symbolic bitmap representing the combined processes of the chlorination unit will provide a jump to the chlorination unit page where details on its processes will be displayed (see arrow 3). This will provide an effect similar to zooming in on the equipment.
Clicking on the booster pump bitmap will open the Booster Pump Control dialog-sized page (see arrow 2) that features the controls related to the booster pump.
Page 2 Contents
Controls for the booster pump, including separate controls to start and stop the pump (thereby placing it in manual mode), and a control to return the booster pump to auto mode where it will automatically be regulated by the simulated data of the virtual Modicon PLC.
Clicking the booster pump bitmap on the Booster Station page will open this small, dialog-sized page that will pop up when the controls are needed, and can be hidden when the controls are not required by clicking the close button in its title bar.
Unlike our P&ID, the storyboard does not present the details of the minor equipment since that is not the purpose of a storyboard. Therefore, as a further aide to assist you in the creation of the two pages that will be included in our operator interface, we have separated the P&ID into two parts as per our in the storyboard layout – a process that will help ensure that the completed pages include both major and minor details.
Page 3 Contents
Details of the processes related to the equipment that comprises the chlorination unit: the dry chemical mixer, dry chemical feeder, water valve, and mixing tank.
Clicking on a symbolic bitmap representing the entire booster station will provide a jump back to the Booster Station page where details on the booster pump, booster tank, and compressor will be displayed (see arrow 1).
Figure 3
Figure 4