Integrating the ESD/SPD Web editor

The ESD/SPD Web Editor has an API that includes properties, methods, events, and commands.

Two methods deserve special comment: load and store. A typical host application exchanges drawing data with the ESD/SPD Web Editor using these methods.

The host application is responsible for storing and managing drawings created by the ESD/SPD Web Editor. If your application uses a database to store incident report information, define a "drawing data" field in your incident data table. This field will hold the SVG diagrams that are created by the editor and returned by the editor's store method. The diagram data is UTF-8 text in SVG format. SVG is a W3C standard and the resulting diagrams can be embedded directly into an HTML 5 application or can be displayed in any container that supports the SVG format. The sample programs supplied with the ESD/SPD Web SDK illustrate the techniques used to move data between a server-side application and the ESD/SPD Web Editor.

Host web page requirements and recommendations

  1. The ESD/SPD Web Editor is dependent on features implemented in HTML 5. The page in your application that hosts the editor must begin with
    <!DOCTYPE html>.
  2. The <head> section of your page must include a
    charset="utf-8"
    meta tag. The ESD/SPD Web editor uses Unicode characters for some textual operations. Text rendering problems may occur if this tag is omitted.
  3. To ensure that editor works correctly in Internet Explorer, include:
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    as the first line in the head section of your page. If this tag is omitted Internet Explorer may render the page in quirks mode if it detects that your page is being served from an intranet site.
  4. Add a link tag to load the Web Editor's css:
    <link rel="stylesheet" href="http://www.example.com/css/esd.css">
  5. Add a script tag to load Web Editor's javascript:
    <script data-dojo-config="async: 1, tlmSiblingOfDojo: 0, baseUrl: 'http://www.example.com/static'" src="http://wwww.example.com/static/dojo/dojo.js"></script>
  6. Load the Web Editor and start it up: 
    
<script type="text/javascript">
	require(['teton/ESDWeb'], function (ESDWeb) {

		// Startup the editor after the page is loaded.
		$(document).ready(function () {
			// Create the editor and place it in the DOM node with id = "editor-node".
			editor = new ESDWeb(null, 'editor-node');

			// Startup the editor, defining the web service URL, user id, and license id.
			editor.startup({});
		});
</script>

Server requirements

  1. The ESD/SPD Web editor must be served up by a web server. The editor will not run off the file system.
  2. The web server that hosts the ESD/SPD Web editor must be configured to support these mime types:
    • image/svg+xml(.svg)
    • application/font-woff(.woff)
    • application/json(.json)
    Please refer to your web server's documentation for information on mime type configuration.

Example Application:

Sample web applications that demonstrates the use of the ESD/SPD Web SDK (including the HTML items listed above) can be found at:

<<Install directory>>/server/samples