How To Revert Out Of Template Layer Illustrator

Designing a VuMark in Adobe Illustrator

You tin apply Adobe Illustrator to design your ain VuMark template and consign the resulting SVG file, which will be used to generate VuMark instances in the Target Director. This article will bear witness you how to set up Illustrator to utilise the VuMark Designer scripts and it will walk you through the steps needed to define your VuMark'south Code Elements and their corresponding layers.

Be certain to have beginning read the VuMark Design Guide to sympathize the function and significance of a VuMark's pattern principles, See: VuMark Design Guide

In that location are 3 custom scripts for use with Adobe Illustrator that volition help you create, verify and export your VuMark design.

• Setup script
This script creates a new Illustrator file for your VuMark, which we refer to every bit the VuMark template. It automatically creates the layers that yous will place various parts of your VuMark design into.

• Verify script
This script helps yous exam your VuMark design by providing a listing of design requirements, Pass/Neglect results for each requirement and suggestions for resolving whatever issues that may have been constitute. Yous volition typically run this script multiple times during the design process as yous make changes to correct whatsoever failed conditions.

• Export script
Once your design has been run through the Verify script and information technology is adamant to be fix for export , this script will export your VuMark template as a Scalable Vector Graphics (SVG) file. You will upload this SVG file into the Vuforia Engine Developer Portal Target Manager to create the dataset that will be used within your iOS, Android, Unity, or Windows ten application.

To aid you with an effortless VuMark creation process, we have made a tutorial that covers the design process step-past-step and the design principles in detail.

Installing and using the Illustrator Scripts

Download the VuMark Illustrator scripts from the Vuforia Engine Developer Portal and copy it to the folder corresponding to your OS:

OS	Binder
OSX	/Applications/Adobe Illustrator CC folder/Presets/en_US/Scripts
Windows	C:\Programme Files\Adobe\Adobe Illustrator CC\Presets\en_US\Scripts

Notation:If you lot accept Adobe Illustrator open up, y'all must quit the application and re-open it to use the newly installed scripts.

You can now run the scripts from the Illustrator menu:File -> Scripts -> VuMark.

Setup a VuMark File in Adobe Illustrator

Using the Setup script

When you run theSetup script, a dialog will announced that asks you lot to enter in aName, Blazon andID Length for your VuMark. TheType andID Length fields are used to choose what type of information that you lot desire to encode in your VuMark, and this determines how manyElements that your VuMark template must have. Given these inputs, the script will configure your template accordingly.

VuMark Template Setup

Type		ID Length
String	Utilize this if an ID volition consist of printable ASCII characters.	If yous choose String type, ID Length is the number of characters that your value will accept.
Numeric	Utilize this if an ID will merely use numeric digits 0 - 9.	If you choose Numeric type, y'all have to enter the maximum numeric value that your VuMark will encode. For example, if you want a VuMark that supports numeric values from 0 to twenty,000 you would enter xx,000 in the Maximum ID field.
Byte	Use this for data in a byte format.	If you choose Byte type, the ID Length is the number of bytes that your value volition accept.

Template Layers

After running theSetup script, you will have a new Illustrator file containing the layers that are designated to hold the various parts of a VuMark, every bit well as several boosted layers that are also used in the blueprint process. During the design process you may change the guild of the layers, but make sure other layers practice not hide theBorder andClear Space graphics. As well ensureVivid andDark Elements layers are always visible in your blueprint and non covered by other graphics.

The VuMark native public sample shows an example of a detection highlight graphic displayed over the VuMark. The bluish line is a path we added to theVuMark-UserDatalayer. By using this method, you can build a UI that is doubter to the actual shape of the VuMark.

IMPORT	It is not required that you utilize this layer, only we have constitute it helpful to take a workspace layer where yous tin can paste your VuMark design. From this layer, yous can begin separating the various parts of your VuMark pattern by moving them to the corresponding layers.
VuMark-Description	INFORMATIONAL, LOCKED Do NOT Endeavour TO MODIFY THIS LAYER This layer contains the details of your VuMark such equally theName,Type, Length and number of requiredElements. The Exporter script uses the information contained in this layer and that is why it is locked by default to prevent accidental deletion.
VuMark-Feedback	This layer is empty at get-go, but later on you run the Verify script, information technology will be populated with feedback presented on peak of your VuMark design to assist you verify that it meets the design requirements.
VuMark-AsymmetryMarker	CAN Exist EMPTY When creating a rotational symmetricContour, this layer tin be used to addAsymmetry Markers that forbid from accidental wrong ID readout. Meet section Advanced Topics for more details.
VuMark-Profile	This layer shall just incorporate i closed path with iv-20 straight edges. Once you have placed yourBorder andClear Space parts into their respective layers, you must use thePen tool in Illustrator to draw a closed path forth the invisible line that is formed where these two parts touches. This path must be placed in theVuMark-Contour layer.
VuMark-Origin	This layer contains a circle shaped object that represents a point that will be considered the origin on your VuMark pattern. Augmentations that will announced registered to the VuMark relative to this signal. Move them in your design to match required origin. The circle can exist scaled.
VuMark-Edge	This layer should only contain the object representing your VuMark sBorder.
VuMark-ClearSpace	This layer should simply incorporate the object representing your VuMark sClear Infinite.
VuMark-BrightElements	This layer volition contain theElements in theirBrilliant state. The number of objects placed in this layer must match the number of requiredElements exactly. Make sureElements are actually brighter than theDark land.
VuMark-DarkElements	This layer will contain theElements in theirDark land. The number of objects placed in this layer must match the number of requiredElements exactly. Make sureElements are actually darker thanBright country.
VuMark-Background	Tin Be EMPTY Contains groundwork design. Utilize rich background if you intend to runway VuMark in Vuforia Engine.
VuMark-UserData	CAN Be EMPTY This layer can contain graphical elements for various purposes, eastward.thousand. UI overlays, printing marks, metadata, etc. The graphic placed in this layer will be exported every bit role of the VuMark template`SVG` file and provided with`VuMarkTemplate::getUserData()` method inside the SDK when the VuMark is loaded.

Using the Verify script

After you have assembled the parts of your VuMark into their respective layers, you are ready to test your VuMark design.

The Verify script will first check that your VuMark conforms to the design requirements and and so provides feedback in the form of aPass,Fail, orVerify status message in the artboard adjacent to your main artboard in Illustrator.

Afterward running theSetup script, you volition have two artboards: your main design artboard, and aFeedback artboard side by side to it.

TheFeedback artboard provides a summary of the VuMark properties you accept chosen, as well equally a checklist of what will be verified by the script.

Earlier you run theVerify script, theDesign Guideline Verification section of theFeedback artboard volition testify aFAIL status for each particular. Information technology is useful to refer back to these condition letters since they provide a reminder of the key design requirements your VuMark must adhere to.

In one case y'all run theVerify script, theFeedback artboard will update to display the latest verification results.

The script verifies

If the number ofElements is correct.
- Elements' sizes and locations.
- Elements' contrast.
Contour segments every bit defined by
- Border andClear Space's contrast.
- Border andClear Space'southward width.
  (visual verification by user is required).

The Feedback Artboard in Illustrator

Filling out the Layers

A common design workflow starts a conceptual stage where you experiment with various VuMark design concepts. Once y'all have called a blueprint to move forrad with, you lot can copy and paste it into theIMPORT layer of your newly created template. We have found it useful to place the blueprint concept in theIMPORT layer and then start moving each part of the VuMark design into their corresponding layers in the Illustrator template.

Drawing the Contour

Every bit described earlier, theProfile is unremarkably not explicitly defined in your VuMark due south blueprint up to this point! It is instead generated by theEdge andClean Space limerick.

Place theBorder andArticulate Infinite parts into their corresponding layers. Yous must use thePenTool in Illustrator to depict a path forth the length of the invisible line that is formed where these two parts touches. Make sure that this path is placed in theVuMark-Contour layer.

TIP: Trace theProfile directly in theVuMark-Profile layer using Illustrator'sPen Tool, by manually tracing the underlying contrast border betwixt theEdge andthe Clear Space ballast-to-anchor.

Notation

TheContour path will non be visible in real instances of your VuMark.
TheClear Space in the above example has been filled in pink to help show its boundaries it is unremarkably white in such designs.

It is helpful to give the path a 1-2-point stroke with a highly visible highlight color like magenta or cyan so that you can easily see where theContour is drawn.

Adding Lawmaking / Elements

The empty space between theBackground / Design Expanse and theClear Spaceis designated to place theElements.TheElements must be added in two states,DarkandBrightElements.There is a layer for each of the two states. The number ofElementsneed to be the same value as theID Length from theSetupscript. We recommend cartoon upwards theElement shape and arrangement in an empty Illustrator page, and thereafter copy them into the VuMark template Illustrator file asNighttimeandBrilliant Elements.

The contrast betwixt theDarkandVividElements must have a loftier dissimilarity. Equally an instance, a contrast betwixt two gray colors should take a "Chiliad" value divergence of at least 30-40%. The "Yard" value can be found in theColour panel when the color space is set to CMYK.

TIP: Elementary shapes forElements might bear witness easier to piece of work with when it comes to structuring them inside the vacant space.

Using the Feedback Layer Information

Element sizes

TheVerify script provides aPASS/Neglect result forElement sizes. Information technology draws magenta circles in the VuMarkFeedbacklayer on top of everyElement it identifies. Inspect theElements in your design to make sure that they occupy or make full at least the same size and area equally illustrated with the circles. This visualization as well helps to identify whichElement causes the script to neglect.

Border & Clear Space width

TheVerify script does not automatically provide aPASS/Fail result for theBorder andClear Space widths but theFeedback layer volition brandish overlays that signal the requiredBorder andClear Space sizes on each side of theContour. In the examples below you tin can see how a magenta fill is overlaid on each side of theContour to signal the minimum width required for theEdge andArticulate Infinite.

FAIL	Pass
Border width is too small. Discover how the minimumBorder width extends past the actualBorder. Articulate Infinite width is too small. Notice how the minimumClear Infinite width extends past the actualClear Space.	Border is at least the same width every bit the minimumBorder width indicated past the magenta overlay. Articulate Infinite is at least the aforementioned width every bit the minimumArticulate Space width indicated by the magenta overlay.

Both theEdge andClear Space must be filled paths or compound paths.

TIP: If y'all have designed yourBorder orClear Space with a path that has a unproblematic stroke width, yous can use Illustrator'sObject->Expand or Object->Aggrandize Advent to convert it to a compound path. AnyAppearance Attributes that are assigned to your shapes, paths, or objects in your VuMark must exist removed prior to exporting every bit an SVG.

Y'all tin utilise theAppearance Console's menu choice -ReducetoBasic Appearance - to remove theAppearance Attributes.

TheVuMark-Edge andVuMark-ClearSpace layers should simply comprise a single path or compound path each. TheVuMark-Contour should contain only a unmarried path that has exactly as many anchor-points every bit there are corners in yourContour. Make sure at that place is no overlapping anchors in your path. Use theDocument Info -> Object panel to list the anchor points while theContour path is selected.

Using the Export Script

Export Script

When your VuMark design receives aPass status on each of the items in theBlueprint Guidelines Verificationsection and the message "VuMark Template ready for consign" appears on theFeedback artboard, yous may continue to run theExport script.

TheExport script will run the verification again, create a new file in Illustrator, and motility contents from your VuMark template file gradually over. It volition automatically trim your design artboard and so that it is exactly the size of your VuMark design. Thereafter, the script will prompt you to salvage your VuMark template every bit anSVG file.

Troubleshooting

Occasionally, you may notice that the artboard trimming does not work correctly, and your artboard still appears larger than your VuMark design. Typically, the reason this happens is that there are i or more objects on your artboard that is registered as being a part of your VuMark design. To fix this, you should inspect each of your layers looking for any objects that are not part of your intended design and remove them. Sometimes there are invisible elements inChemical compound Paths orSub-Layers preventing correct clipping. Afterward cleanup, you can run theExport script again and check whether the artboard is trimmed correctly.

Target Generation in the Vuforia Engine Developer Portal

In the Vuforia Engine Developer Portal create a VuMark database by using the saved SVG file.

Upload the VuMark SVG template to create a VuMark instances of the uploaded template.

For a consummate guide to using the Vuforia Target Manager and uploading VuMark Templates and create VuMark instances, please see How to Work with VuMark Databases.

Advanced Topics

Rotational Symmetry Asymmetry Markers

We recommend creating designs that are non rotational symmetric equally illustrated below:

Figure 8 – Comparison of symmetric and non-symmetric shapes.

Rotational symmetry examples

Whencontours are rotational symmetric, there is a minimal, theoretical chance that aCode contained in a certain specific instance may not exist read out correctly. If you lot desire to assure that this never happens you lot will need to add togetherAsymmetry Markers to your design.
Disproportion Markers are piddling circles manually added to theVuMark-AsymmetryMarkers layer, named in order a0000, a0001, a0002,. Their purpose is to mark up one arbitrary, rotational symmetric location in your design with respect to theContour rotation, that fulfills post-obit criteria (encounter Figure 10 and Figure 11 for examples):

The number ofDisproportion Markers must exist identical to the symmetry order of yourContour edges (see Effigy 8 for examples).
When rotated around the symmetry center, privateAsymmetry Markers need to fall onto each-other. Basically, they need to exist on rotational symmetric locations (as shown in Figure ix).
One, and only one out of the multipleAsymmetry Markers must have in its eye a unlike color than the other markers. The different fill locks the orientation to the specificAsymmetry MarkingThe dissimilarity between the one and the other markers should be like to what is used forDark/Vivid elements.

Effigy ix. Order 5 Asymmetry Marker Placement Example

Figure 10. Order 2 disproportion marked upwards in Height pattern

Figure 11. Gild 4 asymmetry marked upwardly in windmill blueprint

Tips & Troubleshooting

Troubleshooting VuMark cosmos/detection fails

Due to the multifariousness of ways how a VuMark design can be created there may be all the same cases when verification and export of the VuMark succeeds, but the VuMark generation upon upload to the Developer Portal fails, or even that a downloaded VuMark dataset is non capable of detecting instances (due east.g. the 0 instance displayed in the VuMark Target particular panel.

If such a situation occurs, endeavor to apply one of the recommended fixes from the below listed possible explanations.

Overlapping points in contour path causing more points than actual corners in contour. When theContour is not created carefully using thePen Tool every bit recommended, more points end up in contour path than your visual design actually has. Please verify using Certificate Info -> Objects that you have as many points in the closed path as your design actually has when counting corners of theProfile visually.
Check themaximum bending limit between contour segments is at maximum 150 °.
Shape transformationinProfile/Border/Articulate Infinite elements.Move/rotation/scale of an object results in an update to the anchor points of a path or compound path. Shapes, all the same, can store in a higher place changes as either an update to their width/height and position coordinates OR in a separate transformation. This can cause a failed VuMark SVG Template file. Use theObject -> Shape -> Expand Shape command to flatten them equally paths.
Do not use appearance attributes for Elements/Contour/ClearSpace/Edge! When listed objects haveAppearance Attributes, their export to SVG is not e'er properly rendered and verification may provide incorrect results. Y'all tin can easily identify the issue, equallyAppearance Attributes are displayed with a filled dot inLayers console:

Appearance attribute is used in VuMark-Border layer

To fix this issue select the object and useObject -> Expand Appearance.

Calling Scripts with Keyboard-Shortcuts on MacOS

To save fourth dimension during iterative checks using the VuMark Verify script, you might want to setup a keyboard shortcut to run the script. Shortcuts are OS platform-specific and techniques will vary. As a convenience, instructions for one style to do and then on the Mac version of Illustrator are provided below:

LaunchMac Automator.
SelectService and click theChoose button to accept
Gear up the post-obit values:Service receives no input in Adobe Illustrator
Add together aGet Specified Finder Items and clickAdd together to selectVumark-Verify.jsx script located in thePresets/en_US/Scripts/ folder of the Illustrator application.
Add anOpen up Finder Items and set information technology to the Illustrator application
Save your new workflow service with name such as VuMark-Verify

Open upKeyboard in Settings and selectShortcuts tab
WithServices selected, scroll till y'all observeVuMark-Verify and then clickAdd together Shortcut and choose an available key combination.
Restart Illustrator and bank checkServices for your script with assigned hotkey.

User-added image