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:  Red Green Blue Yellow

S:  Yellow Blue Green Red

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
Copy

<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
Copy

<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
Copy

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)
Copy

(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
Copy

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)
Copy

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
Copy

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;
}

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

Argument Object
Copy

{"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
Copy

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: