If you’re creating a keyguard for someone else and you don’t have access to the iPad or the particular app that’s being used, you can still test whether your design is likely to work by comparing the design directly to a screenshot of the app.  Note that this won’t tell you anything about how well your keyguard is going to fit in the case, just how well the openings you’ve specified align with the parts of the app that you want to access.  This approach can be very valuable if you’re trying to design a hybrid or free-form keyguard, or if you’re having to add fudge factors like padding.

This process works equally well for 3D-Printed and Laser-Cut keyguards.

Embedding the Screenshot Directly into OpenSCAD

In addition to creating SVG files, OpenSCAD can import them.  keyguard.scad can import an SVG version of your screenshot and display it along with your keyguard design.  By displaying both at the same time, you can easily determine how well your keyguard will fit the app.  First you need to transform your screenshot into an SVG file.

You will need first to install the free, public-domain program, Inkscape.  Inkscape can be downloaded from here.  Inkscape is used to create and edit SVG files.

Launch Inkscape (not Inkview which will also get installed along with Inkscape) and you’ll see this:

Drag and drop your screenshot into the Inkscape window (or select File > Import) and Inkscape will ask you to choose some options:

You can just go with the default selections and press the OK button and you’ll see your screenshot displayed.  You can tell that it is currently selected because it’s surrounded by a dashed rectangle and there are double-headed arrows at the corners.  If the dashed rectangle and arrows aren’t displayed, just click on the image.

In the Edit menu, choose Resize Page to Selection:

Next, choose “Trace Bitmap” from the “Path” menu:

You’ll see this window pop up:

The information in this window is used by Inkscape to determine how “bright” a part of the image needs to be to be recognized as important.  The “Brightness threshold” is set to  “0.450” by default.  That’s a good place to start.  Press the “Update” button and Inkscape with try to process your screenshot:

We’re mostly interested in how well your keyguard will “fit” the app so as long as you see the bulk of the features of the app displayed, that will be good enough to work with.  If something critical is missing you can try to adjust the “Brightness threshold” and press the “Update” button again to see if Inkscape can pick up that feature without loosing other important features.

When you’re satisfied, press the “OK” button and the display will update:

It may appear that nothing has changed but, in fact, your original screenshot has been overlaid with the path trace that you requested.

Now we need to get rid of your original screenshot – the one in color – and leave the black and white version behind.

Click on any colored or white location the overlayed image, this should select the original screenshot.

It’s important that along the way you don’t accidently drag the black & white image away from it’s original location.

Press the Delete key to remove this image – it’s no longer needed.  That will leave only the path traced image:

Now take a close look at the four corners of the image and see if any are white:

If you ignore the “shadow” along the bottom and right edges of the image, you’ll notice that all four corners are white.  That will result in the image being stretched when brought into the keyguard designer and your design will appear not to align properly.

Here’s what the upper left corner looks like up close (you may need to tap on the “+ =” key on your keyboard to enlarge the image):

We’ll put some small black rectangles in each corner where there’s not already a black color.

First we’ll turn off “snapping”.  Find the “enable snapping” icon – probably in a column on the right side of the window and click on it to turn snapping off:

snapping turned on	snapping turned off

Depending on your version of Inkscape, you may see a different icon representing snapping:

Next we’ll select the “Create rectangles and squares tool” which is probably located at the top of a column of icons on the left of the screen:

rectangle tool unselected	rectangle tool selected

Depending on your version of Inkscape, you may see a different icon representing the rectangle tool:

Now go to the each corner of the image that is currently white and, starting at the corner, drag a small black rectangle onto the image:

drawn rectangle	rectangle complete

It doesn’t have to be perfect but try to stay within the image as you draw.  The rectangle can be very small.

If you see an white rectangle with dashed edges, go to the lower left corner of the screen and click on the left-most black box:

Repeat the process for every white corner.  It’s a pain that this has to be done but such is life!

Now, choose “Save as…” from the “File” menu:

Be sure to save the file in the same folder with keyguard.scad and with the name “screenshot” (i.e., screenshot.svg).

Show me how to use Inkscape…

This video takes you through the process of creating an SVG file from your screenshot.

Display the screenshot along with your keyguard design

Now, return to OpenSCAD and, with your keyguard design displayed, set “include screenshot” to “yes” in the “Special Actions and Settings” category:

You’ll now see a representation of your screenshot displayed underneath your keyguard design.  It will take some time for OpenSCAD to process the screenshot.svg file before anything will display.

You can get a better look at how you design fits your app by looking at your keyguard from the top.  Do that by typing Ctrl + 4 or by clicking on the “Top View” button below the display frame:

You’ll now see your keyguard from the top:

The best thing about this approach is that you can continue to modify your design and see how those changes will affect the fit of your keyguard “in real-time”.

What if the rails were narrower?

What if the openings were circular?

Important: Once you’re comfortable with the way your keyguard fits your app, be sure to hide the screenshot, by setting “include screenshot” back to “no” in the “Special Actions and Settings” category, before you render your final design and generate your STL file!