Swapping in the new, reorganized stencils from the 7.6 release

Occasionally we update stencils that are included with OmniGraffle in a new release—that’s exactly what we did in the 7.6 update.

One of the things we don’t do, though, is make assumptions about what people want us to do with their existing stencils; people edit, duplicate, and delete stencils for a lot of different reasons. We don’t want to mess with anything that might be interrupt a workflow.

So, if you’d like to install the new stencils we designed around all of our Stencil Browser changes, just move the Stencils folder out of OmniGraffle’s container.

The easiest way to get to your Stencils folder is by Command-Clicking a stencil in your Stencil Browser sidebar and clicking Show in Finder.

Screen Shot 2018 01 19 at 12 37 58 PM  2

Once in your Stencils folder, move up the directory until you can drag the Stencils folder on to your Desktop. (Or elsewhere.) The next time you relaunch OmniGraffle, we’ll re-create that folder with all the restyled stencils.

If you’ve edited other stencils, or downloaded quite a few from StencilTown, or created your own, just grab them from the Stencils folder you moved to your Desktop.

Set new tool defaults in OmniGraffle

In OmniGraffle for Mac, we’ve set up each of the tools to include what we think are sensible defaults: a 1px border around a shape and 16 pt Helvetica Neue font, for example. To change any of the defaults that a shape or text field might carry with it, simply Option-click the tool, then change the property fields in your Inspectors.

Check it:

OmniGraffle 7.6: The Big Stencils Update

Today we released OmniGraffle 7.6, a major update that aims to bring power and speed to Stencils.

First, the Stencil Browser—which can still operate as a separate window or popover—is now also amenable to being placed in the left sidebar, where you’d normally see your layers, canvases, manual guides, and outline view. This speeds up a number of workflows, one being the “drag out stencil objects quickly while tweaking settings on each one” workflow. Drag; set. Drag; set.

Second, it’s now possible to drag new objects to the Stencil Browser to add them to an existing stencil! This is huge. Let’s say you’ve got a custom set of annotations that you made for a specific project. A few hours after you’ve saved everything, there’s just one more variant to add. Super easy now: select the object, drag it to the Stencil Browser, and you’re done.

Finally, the Resource Browser handles folders like a Pro. You can drag and drop between folders, rename folders, and even create new folders from selected stencils.

There’s more, too. We’ll have additional posts here on Inside to call out all of our new Stencil features, so stay tuned! You can see the entire set of release notes here.

The Timeline Series: a collaboration with Pop Chart Lab

A few years ago, Fast Co Design did a story on Pop Chart Lab’s design process. When we saw the word “OmniGraffle,” our year was made. We love their stuff.

Pop Chart Lab create incredible pieces of art that cover a wide range of “things.” Coffee, the History of Macintosh, the periodic table of elements, the migratory patterns of fresh princes, etc.

A significant amount of their infographics contain some sort of timeline, so we figured they might be willing to help us out with one of our most popular support questions: does Omni have a template to help create a simple timeline?

So we asked, and the fine folks at Pop Chart Lab agreed. We’re mostly ready to show off the collaboration. We still need to split this off into additional stencils to make it extensible and … draggable, but it’s a set of three beautiful timelines to get started.

Timeline A

Timeline B

Timeline C

You can download the Graffle file here, and we intend to have something downloadable from Stenciltown shortly. (But feel free to riff off of the three timelines and publish your work!)

OmniGraffle 7.5 update brings Omni Automation improvements and additions

In OmniGraffle 7.5 for Mac, new automation features are introduced, a whole lot of functions and classes are improved, and a lot of bugs are vanquished.

The release notes give all the details, but this is a big release if you’ve been working with (and sending feedback on—thanks, if that’s you!) Omni Automation.

As an aside, feel free to share your scripts and quick workspace improvements that Omni Automation brings to OmniGraffle—we’re working on a better way to share them, but if it’s worth sharing with others, let us know! We’d love to share it here and elsewhere.

OmniGraffle 3.2 for iOS 11

Last week saw the release of iOS 11, and with it, the release of OmniGraffle 3.2 for iOS. The release was a major update with brand new functionality for OmniGraffle featuring Drag and Drop in different areas of the app, as well as integration with the new Files app.

Here’s the new stuff. For full release notes, head here.

  • Drag and Drop Content to OmniGraffle — Quickly add to an OmniGraffle document by dragging content from another app to OmniGraffle’s Canvas or Navigation Sidebar. Drop images or text on the Sidebar to position them exactly in the object hierarchy or on the canvas to position them just right visually.
  • Drag from the Canvas — Quickly share graphics with others by lifting a selection directly from the OmniGraffle canvas and dropping on another canvas, a separate OmniGraffle document, or a different app altogether!
  • Drag from the Navigation Sidebar — OmniGraffle supports dragging content from the Navigation Sidebar: Pick up canvases, layers, or individual objects to rearrange them in the sidebar list or drag them to another app. Drag a canvas to the Photos app to quickly export an image of that canvas or drag a layer to the Mail app and the objects on that layer are shared with a transparent background. You can drag a selection of objects to share just those shapes and if you share an artboard object then the objects above the artboard are included.
  • Drag and Drop in the Document Picker — The Document Picker supports Drag and Drop to make document management even easier. Drag files in to quickly import them, drag them out to copy them elsewhere, or pick up a group of documents and add them to a folder in the Document Browser to keep all your projects organized.
  • Files App Integration — Local OmniGraffle documents appear in the “On My iPad” section of the Files app and OmniGraffle documents in iCloud can be opened in place for editing.

Creating your first cross-platform Plug-In in OmniGraffle

Just recently introduced in OmniGraffle 3 for iOS and OmniGraffle 7.4 for Mac, Omni Automation exposes a brand new interface of OmniGraffle. Powered by JavaScript, users will be able to create, bundle, and share Plug-Ins to use on both platforms. Putting together simple actions that benefit your own workflow should be approachable for advanced coders and beginners alike.

Our hope is that within a year or two there will be a thriving assortment of Plug-Ins that perform all kinds of tasks, automatically, with a little help from a toolbar button.

This is an introduction to the world of Omni Automation: we’ll cover how to write the code necessary to generate Lorem Ipsum text, how to bundle it up as a Plug-In, and how to share that Plug-In with OmniGraffle for iOS and others.

Getting started with JavaScript and Omni Automation

In both OmniGraffle for Mac and iOS, we’ve added a Console that allows you to directly interface with your canvas (and all aspects of your document) by entering lines of code. For starters, let’s just see which version of OmniGraffle is installed: select Show Console via the Automation menu and type `app.version`. Hit return, and you’ll see OmniGraffle’s version number—that’s it. We didn’t really accomplish much, though, so let’s add a shape to the canvas!

Copy and paste this line:

document.windows[0].selection.canvas.addShape('Circle', new Rect(0,0,200,200))

You’ve just added a new, 200 x 200 pixel circle the current canvas.

If we went one step further and assigned that object a variable name, we could make changes to the same object by referencing CircleOne:

  1. CircleOne = document.windows[0].selection.canvas.addShape('Circle', new Rect(0,0,200,200)) creates a new Shape
  2. CircleOne.strokeThickness=5 changes the stroke thickness from 1 to 5
  3. CircleOne.geometry = new Rect(100,100,200,200) changes the X and Y origin to x = 100 and y = 100

And that’s….pretty easy! You can find more documentation about Objects, rects, and everything else by selecting API Reference via the Automation menu.

Starting up the script!

Let’s move on to creating our script that generates random Lorem Ipsum text.  To keep everything in one spot, create a new file in your favorite text editor. The Plug-In we’re going to create is going to take a selected object—some sort of shape, whether it’s a square or circle or star—and add random bits of text as filler. Commonly, that’s Lorem Ipsum text and it helps facilitate a better-looking mockup.

First, we need to generate some of that Lorem Ipsum stuff. With the help of lukejacksonn’s Lorem.js, it won’t take long. I wrapped it up in the loremIpsum() javascript function below.

function loremIpsum() {
// Amount of words required
var length = 30;

// Helper functions
var charAtEndOfOut = function(char, step) {
return out.indexOf(char, out.length - step - 1) !== -1;
}
var randomWord = function() {
return words[Math.floor(Math.random() * (words.length - 1))];
}
var capitalize = function(word) {
return word[0].toUpperCase() + word.slice(1)
}

// Dictionary of words
var paragraph = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. Duis aute irure dolor reprehenderit voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim est laborum.",
words = paragraph.split(" "),
word = "",
out = capitalize(randomWord());

for (var i = 1; i < length; i = i + 1) {
//Select random word from paragraph
word = randomWord();
out += " ";

//Append to out, capitalize first letter if necessary
out += (charAtEndOfOut('.', 1) || charAtEndOfOut('?', 1)) ? capitalize(word) : word.toLowerCase();
}

//Append full stop to the end of string, strip punctuation if necessary
out = (charAtEndOfOut('.') || charAtEndOfOut(',') || charAtEndOfOut('?')) ? out.slice(0, -1) + "." : out + ".";

return out;
};

Next, after the function, we need to get the details of the currently selected object:

currentObject = document.windows[0].selection.graphics[0]

But! We still need to make sure we’re adding text to the selected object. After currentObject = document.windows[0].selection.graphics[0], add this line:

currentObject.text = currentObject.text + loremIpsum()

That line adds the random text to the object, but also adds it after any text already in the object. (So if you need to fill up a super big text box, just keep on activating the script.) You can test the script by copying everything in that script file and pasting it into OmniGraffle’s Console.

Now we just have to bundle everything up into another—special—function before adding it to OmniGraffle as a Plug-In. We only want OmniGraffle to do something with our script when we have an object selected, so let’s wrap everything inside this bit of code that tells the app “I’m only used with a selected object.”:

var _ = function(){
var action = new PlugIn.Action(function(selection){
// if called externally (from script) then generate selection object
if (typeof selection == 'undefined'){selection = document.windows[0].selection}


// Insert entirety of the script here.

});

// Optional validation function. Omit to always return true.
action.validate = function(selection){
// if called externally (from script) then generate the selection object
if (typeof selection == 'undefined'){selection = document.windows[0].selection}
// status check, such as are graphics selected?
if (selection.graphics.length > 0){return true} else {return false}
};

return action;
}();
_;

Creating a shareable Plug-In

OmniGraffle requires a specific set of assets before recognizing a Plug-In as legitimate. At the very least, we’ll need to create a new folder with a barebones manifest.json file, a simple icon for the toolbar, and the script. (Plug-Ins can also be localized; for full details, visit Sal’s page on Plug-Ins.)

Let’s start with the manifest.json file, which lives inside the folder you just created:

{
 "author": "Omni Group",
 "identifier": "com.derekreiff.lorem",
 "version": "0.5",
 "description": "Add Lorem Ipsum text to a selected object.",
 "actions": [
   {
     "image": "loremipsum.png",
     "identifier": "loremIpsum"
   }
 ],
 "defaultLocale": "en"
}

Super easy! There’s an author, an identifier, a version number, description, and the action itself: the image is for a toolbar button, and the identifier is the name of the javascript file (minus the .js) for the action. (Technically, what we just wrote is in action.)

With the manifest.json file in place, create another folder: Resources. Drop in the JavaScript file you created, along with an icon file (appropriately named)!

Finally, rename the folder to loremipsum.omnigrafflejs. This tells macOS the thing you’ve just created is a Plug-In that OmniGraffle should open. Double-click it and you’ll have a pretty darn useful Plug-In installed! Customize your toolbar, looking for the appropriate action & icon, and then try it out with an object selected.

Adding the Plug-In to OmniGraffle 3 for iOS

First, make sure you’re running OmniGraffle Pro. Try sending the Plug-In over to your iPad or iPhone via AirDrop; that’s pretty easy. You can also sync it over via OmniPresence. OmniGraffle will ask if you’re sure, but we’re sure!

Have ideas for Plug-Ins? Created any? Tell us all about them!

Creating custom inspectors

You’re ready to optimize your workflow for a very specific document. You only need your Shape, Stroke, and Fill inspectors; everything else should be hidden, and you’re going to hide both Sidebars. Creating a custom, floating inspector is easy:

First, drag out the Fill inspector by selecting the drag handle just to the right of the inspector’s title, then dragging it anywhere to the left of the sidebar’s boundary.

Second, drag each additional inspector to the new, floating inspector. Resize to your liking, and then minimize the sidebar by dragging the very left edge all the way to the edge of the window.

That’s it! A bespoke inspector. If you have Pro installed, you can save this setup to access whenever you’d like: check out Inspectors➞Edit Workspaces.