istSOS - Web Widget Creator

An Online Web Application for building feature­rich web widget that will be easily embeddable into existing web pages.

---

Usage instructions:

Important:

Chart creator tool depends on another framework called VistSOS - Data visualization framework, which can be downloaded or cloned here. Just clone istsos Web widget creator and VistSOS and put them as folders, next to each other, inside your Apache public folder (e.g. ./var/www/...). Inside VistSOS, you should find ./src/util/util.js and change the specPath from default to ../VistSOS-1/src/specs/.

Configuration:

Before, you can use istsos Web widget creator, next couple of things need to be configured:

1. istSOS Web application - istsos Web widget creator is a "helper" application for istSOS, so you should set up istSOS at your local machine.
2. Server configuration - there is a ./specs/server_config.json file, which needs to be populated with your local server data.
3. Observed properties specifications - there are two files:
   • ./specs/observed_property_names.json - this file is used for mapping observed properties default names to user-defined names. Box widget uses this configuration for displaying user-defined names, instead of default ones.
   • ./specs/observed_property_spec.json - this file is used for specifying interval values and icon url for every observed property definition. This is important, because based on observation value, different icon is shown. Box and Map widgets use this configuration file.
4. Chart types specification - Whenever VistSOS framework is updated with the new charts and attributes, this file needs to be updated too, because istsos Web widget creator uses this to generate chart specific input form

istsos Web widget creator usage steps:

Open ./index.html:

1. Select one of the desired creator tools from the menu:

   • Map
   • Chart
   • Box

2. On the left side, a coresponding creator inputs form will show, which contains:

   • Server dependent data for selection - services > offerings > procedures > observed properties
   • Common widget settings fields - target HTML element ID, target element CSS class, widget height and widget width
   • Widget dependent input form - charts > type (with type attribute fields), box > layout (horizontal or vertical)
   • Automatic update setup(optional) - user is offered to setup regular data update interval and startup update delay
   • Generate widget button - creates a widget preview and generates embedded code

3. In the middle section, there are two output windows:

   • Preview - upper section, where the generated widget is shown
   • Code - lower section, where generated embedded code is shown

Note: Import generated embedded code into your Web site/page to display it.