×

Add a Graphic:

Add a new solid graphic to the current OmniGraffle canvas.

1) Choose the fill color and stroke color for the graphic:

F: 

S: 

2) CLICK|TAP the shape type of the graphic:

Omni Automation and Webpages

Using the JavaScript methods outlined on previous pages, web-developers can add Omni Automation to webpages to enable them to interact directly with Omni applications.

In this example, the form embedded in this webpage can be used to add new solid graphics to the current OmniGraffle canvas, using the fill/stroke colors and shape types chosen by the user.

Here are the components that make the interactive HTML form work, beginning with the HTML elements from the webpage, followed by the JavaScript script embedded in the page, to create and execute the Omni Automation script URL using the chosen color and shape settings.

The HTML Elements

The HTML code of the form containing the popup menus for choosing fill and stroke colors:

The Fill/Stroke Color Form


<form id="colors"> Fill: <select id="fill-color-menu" name="fill-color"> <option value="[1,0,0,1]">Red</option> <option value="[0,1,0,1]">Green</option> <option value="[0,0,1,1]">Blue</option> <option value="[1,1,0,1]">Yellow</option> </select> Stroke: <select id="stroke-color-menu" name="stroke-color"> <option value="[1,1,0,1]">Yellow</option> <option value="[0,0,1,1]">Blue</option> <option value="[0,1,0,1]">Green</option> <option value="[1,0,0,1]">Red</option> </select> </form>

The HTML code of the table containing the clickable shape type images:

The Shape Type Image Buttons


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

The Shape Creation Script

The function sent to OmniGraffle for creating a new shape using the chosen settings. This function is embedded within SCRIPT tags placed in the HEAD element of the webpage along with the function for generating and executing the script URL.

Create Shape Function


function createStyledShape(args){ let cnvs = document.windows[0].selection.canvas; let aRect = new Rect(100,100,200,200); let fcv = args.FILLCOLORVALUE; let aFillColor = Color.RGB(fcv[0],fcv[1],fcv[2],fcv[3]); let scv = args.STROKECOLORVALUE; let aStrokeColor = Color.RGB(scv[0],scv[1],scv[2],scv[3]); let aShape = cnvs.addShape(args.SHAPETYPEVALUE, aRect); aShape.strokeThickness = 12; aShape.fillColor = aFillColor; aShape.strokeColor = aStrokeColor; }

However, since the passed script is a function with a passed-in argument, both the function and corresponding argument object will be wrapped in parens to make the function self-invoking when the encoded function is added to the script URL: (function)(argument)

NOTE: The term “argument” is a special placeholder used by Omni Automation to represent the passed-in script arguments. The data of the argument can be expressed as a string, object, or as an array. Avoid using the term “argument” in your scripts as a variable name.

Create Shape Function (self-invoking)


(function createStyledShape(args){ let cnvs = document.windows[0].selection.canvas; let aRect = new Rect(100,100,200,200); let fcv = args.FILLCOLORVALUE; let aFillColor = Color.RGB(fcv[0],fcv[1],fcv[2],fcv[3]); let scv = args.STROKECOLORVALUE; let aStrokeColor = Color.RGB(scv[0],scv[1],scv[2],scv[3]); let aShape = cnvs.addShape(args.SHAPETYPEVALUE, aRect); aShape.strokeThickness = 12; aShape.fillColor = aFillColor; aShape.strokeColor = aStrokeColor; })(argument)

As an alternative, the passed script could be a script that incorporates the “argument” placeholder term directly within its statements. For example, the previous function could be replaced with an encoded version of this script that uses the “argument” placeholder (in red):

Create Shape Script


var cnvs = document.windows[0].selection.canvas; var aRect = new Rect(100,100,200,200); var fcv = argument.FILLCOLORVALUE; var aFillColor = Color.RGB(fcv[0],fcv[1],fcv[2],fcv[3]); var scv = argument.STROKECOLORVALUE; var aStrokeColor = Color.RGB(scv[0],scv[1],scv[2],scv[3]); var aShape = cnvs.addShape(argument.SHAPETYPEVALUE, aRect); aShape.strokeThickness = 12; aShape.fillColor = aFillColor; aShape.strokeColor = aStrokeColor;

NOTE: in order to incorporate this non-function script in the webpage, it would have to be stored as a text string by encasing the entire script in tick marks:

Create Shape Script (as string)


var scriptString = `var cnvs = document.windows[0].selection.canvas; var aRect = new Rect(100,100,200,200); var fcv = argument.FILLCOLORVALUE; var aFillColor = Color.RGB(fcv[0],fcv[1],fcv[2],fcv[3]); var scv = argument.STROKECOLORVALUE; var aStrokeColor = Color.RGB(scv[0],scv[1],scv[2],scv[3]); var aShape = cnvs.addShape(argument.SHAPETYPEVALUE, aRect); aShape.strokeThickness = 12; aShape.fillColor = aFillColor; aShape.strokeColor = aStrokeColor;`

Generating and Executing the Script URL

The main JavaScript function in this webpage that generates and executes an Omni Automation script URL based-upon the chosen form element values:

Generate/Execute Script URL


function addChosenGraphic(shapeName){ // GET CURRENT FORM SETTINGS var shapeName = encodeURIComponent(shapeName); var fillColor = document.getElementById('fill-color-menu').value; var strokeColor = document.getElementById('stroke-color-menu').value; fillColor = JSON.parse(fillColor); strokeColor = JSON.parse(strokeColor); // CREATE ARGUMENTS OBJECT var argumentsObject = new Object(); argumentsObject["SHAPETYPEVALUE"] = shapeName; argumentsObject["FILLCOLORVALUE"] = fillColor; argumentsObject["STROKECOLORVALUE"] = strokeColor; // GENERATE SCRIPT URL var functionString = createStyledShape.toString(); var encodedFunction = encodeURIComponent(functionString); var argumentsString = JSON.stringify(argumentsObject); var encodedArgument = encodeURIComponent(argumentsString) var targetURL = `omnigraffle://localhost/omnijs-run?script=%28${encodedFunction}%29%28argument%29&arg=${encodedArgument}`; window.location = targetURL; }

 1-20  The function embedded in the HEAD of the webpage, that generates and executes an Omni Automation URL using the settings of the presented HTML controls. This function accepts a string value (graphic shape title) sent when the user clicks or taps the desired shape image in the form.

 3  The passed-in shape type title is percent-encoded for inclusion in the URL.

 4-5  The current values of the form’s popup color options elements are extracted as string representations of numeric arrays: "[1,1,0,1]"

 6-7  Using the parse() method of the JavaScript JSON class, string representations are converted into the numeric arrays used by Omni Automation when defining RGB color values.

 9-12  A new JavaScript object is created to store the named values to be passed into the function when it is executed. NOTE: the object’s keys are the same used in the shape creation script (see below).

 14  The JavaScript toString() function is called on the processing function’s name to convert the function into a string.

 15  The function string is percent-encoded for inclusion in the script URL.

 16  The stringify() function of the JSON class is used to convert the argument object into a string.

 17  The argument object string is percent-encoded for inclusion in the script URL.

 18  The script URL is assembled by replacing text placeholder variables with the encoded content. NOTE: to ensure that the passed function is self-invoking, it and the passed argument object are wrapped in pairs of opening and enclosing parens: (function)(argument) %28 = opening paren, %29 = closing paren

 19  The script URL is executed by setting the value of the location property of the window to the script URL.

An example JavaScript object created by the previous script as the value for the script URL argument will look something like this:

Argument Object


{"SHAPETYPEVALUE":"Star","FILLCOLORVALUE":[1,0,0,1],"STROKECOLORVALUE":[1,1,0,1]}

The Script URL

An example Omni Automation script URL generated and executed by the embedded webpage function:

Example Script URL


omnigraffle://localhost/omnijs-run?script=%28function%20createStyledShape(args)%7B%0A%09let%20cnvs%20%3D%20document.windows%5B0%5D.selection.canvas%3B%0A%09let%20aRect%20%3D%20new%20Rect(100%2C100%2C200%2C200)%3B%0A%09let%20fcv%20%3D%20args.FILLCOLORVALUE%3B%0A%09let%20aFillColor%20%3D%20Color.RGB(fcv%5B0%5D%2Cfcv%5B1%5D%2Cfcv%5B2%5D%2Cfcv%5B3%5D)%3B%0A%09let%20scv%20%3D%20args.STROKECOLORVALUE%3B%0A%09let%20aStrokeColor%20%3D%20Color.RGB(scv%5B0%5D%2Cscv%5B1%5D%2Cscv%5B2%5D%2Cscv%5B3%5D)%3B%0A%09let%20aShape%20%3D%20cnvs.addShape(args.SHAPETYPEVALUE%2C%20aRect)%3B%0A%09aShape.strokeThickness%20%3D%2012%3B%0A%09aShape.fillColor%20%3D%20aFillColor%3B%0A%09aShape.strokeColor%20%3D%20aStrokeColor%3B%0A%7D%29%28argument%29&arg=%7B%22SHAPETYPEVALUE%22%3A%22Star%22%2C%22FILLCOLORVALUE%22%3A%5B1%2C0%2C0%2C1%5D%2C%22STROKECOLORVALUE%22%3A%5B1%2C1%2C0%2C1%5D%7D

Here is a video showing the example form in use: