HTML Forms

Omni Automation is based upon the JavaScriptCore framework found within the WebKit open source web browser engine that Apple includes with its iOS and macOS devices.

JavaScript is also used by web browsing applications like Safari, Chrome, and Microsoft Edge, to provide an interactive experience when viewing HTML-based content, like the pages found on this and many other websites.

And since JavaScript and Omni Automation are both stored in files and within web pages as text that is dynamically loaded and executed, they can easily be used together to provide the ability to insert and manipulate data from webpages into Omni application documents. The following example demonstrates this cooperative potential.

In the simple HTML form shown below, the user chooses both the fill and stroke colors to be applied to an OmniGraffle shape created when the image of a shape type is tapped or clicked by the user.

In this example, standard HTML elements and browser JavaScript are used to present and extract the user’s preferences, transfer that data into an Omni Automation script, and execute the script to perform addition of a new graphic in an OmniGraffle document.

Try it yourself using your copy of OmniGraffle, and the form below:

Add a Shape:

TAP|CLICK popup menus to select a fill color and a stroke color:

Fill:  Stroke: 

TAP|CLICK a shape to add it to the current OmniGraffle document:

star-white circle-white diamond-white square-white

(TAP|CLICK to view the above example form on its own webpage)

Very cool! Now that you’ve seen “Omni-Interactive HTML” in action, let’s examine the webpage elements that make this dynamic interplay possible.

The Shape Creation Script

To begin with, here’s the Omni Automation script used for creating a shape on the current cavas in an open OmniGraffle document. A line-by-line explanation is placed below the script.

cnvs = document.windows[0].selection.canvas aRect = new Rect(100,100,200,200) aFillColor = Color.FILLCOLORVALUE aStrokeColor = Color.STROKECOLORVALUE aShape = cnvs.addShape('SHAPETYPEVALUE',aRect) aShape.strokeThickness = 12 aShape.fillColor = aFillColor aShape.strokeColor = aStrokeColor

 1  Store a reference to the current canvas in the variable: cnvs

 2  Create and store a Rect object in the variable: aRect. A Rect is an array of four numbers that indicate a shape’s position and size on the canvas.

 3  Create and store a Color object in the variable: aFillColor. The placeholder FILLCOLORVALUE will be replaced with a color value to be used as the shape’s fill color, when the script is executed.

 4  Create and store a Color object in the variable: aStrokeColor. The placeholder STROKECOLORVALUE will be replaced with a color value to be used as the shape’s stroke color, when the script is executed.

 5  Using the addShape() method of the canvas class, create a new shape and store a reference to it in the variable: aShape. The placeholder SHAPETYPEVALUE will be replaced with a string that is the name of the type of shape to create, such as Circle or Rectangle.

 6  Set the value of the created shape’s strokeThickness property to 12 (points).

 7  Set the value of the created shape’s fillColor property to the color value stored in the variable: aFillColor

 8  Set the value of the created shape’s strokeColor property to the color value stored in the variable: aStrokeColor

To enable the Omni Automation script to be easily stored in the webpage’s HTML code, the script code is encoded (with placeholders) in a manner that replaces spaces, paragraph returns, and punctuation with two-digit codes preceded by a percent sign. This encoding process is detailed on this page of this website.

cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0AaRect%20%3D%20new%20Rect%28100%2C100%2C200%2C200%29%0AaFillColor%20%3D%20Color%2EFILLCOLORVALUE%0AaStrokeColor%20%3D%20Color%2ESTROKECOLORVALUE%0AaShape%20%3D%20cnvs%2EaddShape%28%27SHAPETYPEVALUE%27%2CaRect%29%0AaShape%2EstrokeThickness%20%3D%2012%0AaShape%2EfillColor%20%3D%20aFillColor%0AaShape%2EstrokeColor%20%3D%20aStrokeColor

The encoded script will be used in the webpage’s main JavaScript function that is described later in this documentation.

Next, let’s examine the webpage’s HTML elements that enable the user to select color and shape options to use with the encoded Omni Automation script.

The Popup Menus HTML

In this example, the user selects both the fill and stroke colors for the created shape. This selection is done by choosing from lists of color names presented on menus.

popup-01popup-02

A standard HTML form is created to hold the two drop down menus.

Note that each of the menus (the select elements) are assigned a unique name and id. This enables them to be easily identified by the main JavaScript function in order to retrieve their current user-chosen values.

Also note that the color values are in two formats, either as the names of standard colors (like red, yellow, etc.), or as RBG color values comprised of an array of four numbers. Omni Automation color values are described in detail on this page.

 01-14  An HTML form containing two popup menus enabling the user to choose fill and stroke colors.

 02-07  A popup menu where the possible color values are in the form of common color names, such as red, green, or blue.

 08-13  A popup menu where the possible color values are in the form of RGB (red, green, blue) values as a list of numbers from 0 to 1, such as RGB(1, 0, 0, 1) for 100% red. The fourth number indicates the color’s alpha (transparency) value.

Now that you’ve examined how the create the HTML for choosing color values, let’s examine how to create the HTML that enables the user to choose the shape to create.

The Buttons HTML

A logical way for the user to select the type of shape to create, it to have them tap or click an image representing the type of shape they wish to create.

star-white circle-white diamond-white square-white

The following is the HTML code for creating a table containing the four images. Note that each image is assigned the JavaScript onClick() event handler that is triggered when the image is tapped (iOS) or clicked (macOS). The name of the shape type to create is passed into the called main JavaScript function addGraphic(). Also note the shape type begins with a capital letter.

<table style="width:100%;table-layout:fixed;"> <tr> <td><a href="javascript:void(0)" onClick="addGraphic('Star')"> <img style="width:140px;" src="star.png"></a> </td> <td><a href="javascript:void(0);" onClick="addGraphic('Circle')"> <img style="width:140px;" src="circle.png"></a> </td> <td><a href="javascript:void(0);" onClick="addGraphic('Diamond')"> <img style="width:140px;" src="diamond.png"></a> </td> <td><a href="javascript:void(0);" onClick="addGraphic('Rectangle')"> <img style="width:140px;" src="square.png"></a> </td> </tr> </table>

 01-16  A table containing four images that are triggers for calling the main JavaScript function embedded in the webpage.

 03-05  A table cell containing an image of a star shape that when tapped or clicked, triggers the addGraphic() function, passing in the string Star as the parameter for the function.

 06-08  A table cell containing an image of a star shape that when tapped or clicked, triggers the addGraphic() function, passing in the string Circle as the parameter for the function.

 09-11  A table cell containing an image of a star shape that when tapped or clicked, triggers the addGraphic() function, passing in the string Diamond as the parameter for the function.

 12-14  A table cell containing an image of a star shape that when tapped or clicked, triggers the addGraphic() function, passing in the string Rectangle as the parameter for the function.

The Main JavaScript Function

Here is the main JavaScript function addGraphic() that performs the task of gathering the form data, inserting it into the stored Omni Automation script, and running the script. A line-by-line description of the function statements appears below the function code.

function addGraphic(graphicType) { var scriptCode = "var%20aRect%20%3D%20new%20Rect%28100%2C100%2C200%2C200%29%0Avar%20aFillColor%20%3D%20Color%2ERGBFILLCOLORVALUE%0Avar%20aStrokeColor%20%3D%20Color%2ERGBSTROKECOLORVALUE%0Avar%20aShape%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%2EaddShape%28%27SHAPETYPEVALUE%27%2C%20aRect%29%0AaShape%2EstrokeThickness%20%3D%2012%0AaShape%2EfillColor%20%3D%20aFillColor%0AaShape%2EstrokeColor%20%3D%20aStrokeColor"; var fillColor = document.getElementById('fill-color-menu').value; var strokeColor = document.getElementById('stroke-color-menu').value; graphicType = encodeURIComponent(graphicType); scriptCode = scriptCode.replace("FILLCOLORVALUE",fillColor); scriptCode = scriptCode.replace("STROKECOLORVALUE",strokeColor); scriptCode = scriptCode.replace("SHAPETYPEVALUE",graphicType); var targetURL = "omnigraffle:///omnijs-run?script=" + scriptCode; window.location = targetURL; }

 01-11  The addGraphic('ShapeName') function is triggered when the user taps or clicks one of the shape images. It is passed a string that is the name of the shape to create. Note that the shape title begins with a capital letter.

 02  The encoded Omni Automation script that performs the task of creating the indicated shape is stored in the variable scriptCode. Note that the encoded string contains the placeholders for the fill and stroke color values, and the shape type name.

 03  Use the JavaScript getElementByID() method to extract the current value for the fill color popup menu and store it in the variable fillColor.

 04  Use the JavaScript getElementByID() method to extract the current value for the stroke color popup menu and store it in the variable strokeColor.

 05  Encode the shape type name that is passed-into the function and store it in the variable graphicType.

 06  Use the JavaScript method replace() to replace the placeholder FILLCOLORVALUE in the encoded string with the value from the fill color popup that is in the variable fillColor.

 07  Use the JavaScript method replace() to replace the placeholder STROKECOLORVALUE in the encoded string with the value from the fill color popup that is in the variable strokeColor.

 08  Use the JavaScript method replace() to replace the placeholder SHAPETYPEVALUE in the encoded string with the value from the fill color popup that is in the variable graphicType.

 09  Create an Omni Automation script URL by appending the encoded script code string with the Omni Automation schema for OmniGraffle (ommigraffle://localhost/omnijs-run?script=) and store the URL in the variable targetURL.

 10  Execute the script URL by assigning the value of the location property of the browser window to the script URL stored in the variable targetURL.

Summary

As this example shows, you can add “Omni-Interactive” HTML elements to your webpages, enabling your viewers to quickly select and create styled content.

And, it works on both macOS and iOS! Here's this example performed on an iPad Pro:

UNDER CONSTRUCTION

This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.

DISCLAIMER