content developer kit - motor3 xaml 3.1 brief overview of xaml files extensible markup language...

19
Proprietary and Confidential © Copyright 2015 Hearst Business Media. All Rights Reserved 1 of 19 Table of Contents 1 Overview .................................................................................................................................... 3 2 SVG ........................................................................................................................................... 3 2.1 Brief Overview of SVG Files .........................................................................................................3 2.2 SVG Web Resources ......................................................................................................................4 2.3 MOTOR SVG File Structure ........................................................................................................5 3 XAML ........................................................................................................................................ 5 3.1 Brief Overview of XAML Files .....................................................................................................5 3.2 XAML Web Resources ..................................................................................................................6 4 Key Concepts for understanding MOTOR SVG & XAML Parts Files .................................. 7 4.1.1 Callouts ................................................................................................................................................... 7 4.1.2 Groups ..................................................................................................................................................... 8 4.1.3 Top-level groups and their relationships ................................................................................................. 9 4.1.4 Shared Components ................................................................................................................................ 9 4.1.5 Solid Filled Components ....................................................................................................................... 12 4.1.6 XML files are “data” ............................................................................................................................. 12 5 Business Rules ........................................................................................................................ 13 6 Samples ................................................................................................................................... 14 6.1 Sample SVG Files .........................................................................................................................14 6.1.1 CDK - 4450142 - Script.svg.................................................................................................................. 14 6.1.2 CDK - 1451190 - Script.svg.................................................................................................................. 15 6.2 Sample XAML File.......................................................................................................................15 V1.7 Content Developer Kit Part Graphics in SVG & XAML

Upload: others

Post on 06-Mar-2020

15 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Proprietary and Confidential © Copyright 2015 Hearst Business Media. All Rights Reserved 1 of 19

Table of Contents

1 Overview .................................................................................................................................... 3

2 SVG ........................................................................................................................................... 3

2.1 Brief Overview of SVG Files .........................................................................................................3

2.2 SVG Web Resources ......................................................................................................................4

2.3 MOTOR SVG File Structure ........................................................................................................5

3 XAML ........................................................................................................................................ 5

3.1 Brief Overview of XAML Files .....................................................................................................5

3.2 XAML Web Resources ..................................................................................................................6

4 Key Concepts for understanding MOTOR SVG & XAML Parts Files .................................. 7 4.1.1 Callouts ................................................................................................................................................... 7 4.1.2 Groups ..................................................................................................................................................... 8 4.1.3 Top-level groups and their relationships ................................................................................................. 9 4.1.4 Shared Components ................................................................................................................................ 9 4.1.5 Solid Filled Components ....................................................................................................................... 12 4.1.6 XML files are “data” ............................................................................................................................. 12

5 Business Rules ........................................................................................................................ 13

6 Samples ................................................................................................................................... 14

6.1 Sample SVG Files .........................................................................................................................14 6.1.1 CDK - 4450142 - Script.svg .................................................................................................................. 14 6.1.2 CDK - 1451190 - Script.svg .................................................................................................................. 15

6.2 Sample XAML File.......................................................................................................................15

V1.7..1

Content Developer Kit Part Graphics in SVG & XAML

Page 2: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Proprietary and Confidential © Copyright 2015 Hearst Business Media. All Rights Reserved 2 of 19

6.2.1 CDK - 8522017.xaml ............................................................................................................................ 15

6.3 Sample TIF Images ......................................................................................................................15

6.4 Sample Code / Queries (SVG) .....................................................................................................16 6.4.1 Identify all solid-white filled elements directly contained within a <g> tag ......................................... 16 6.4.2 Identify transparent hidden text elements and relate them to the included components ....................... 16

7 Appendix A: SVG & XAML Viewer Technology .................................................................. 17

7.1 Overview .......................................................................................................................................17

7.2 SVG Specification Flavors ...........................................................................................................17

7.3 SVG Viewers .................................................................................................................................18

7.4 SVG within WPF (Windows Presentation Foundation) Applications .....................................18

7.5 XAML graphics within WPF or Silverlight Applications ........................................................19

8 Document History ................................................................................................................... 19

Page 3: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 3 © Copyright 2015 Hearst Business Media All Rights Reserved

1 Overview The introduction of Scalable Vector Graphics represents a great opportunity for MOTOR and its customers. Historically, the complexities of identifying automotive parts and components have been greatly simplified by graphic images that represent various components, assemblies and reference elements. Images of this nature have been available for some time. However, the need for more detailed, richer and better quality graphic information is a growing trend. Here, scalable graphics represent a progressive step forward in automotive part illustrations, not only providing crisp detail when magnified but also allowing for interactive and responsive feedback within the image, as well as embedded component / assembly relationships directly within the graphics files.

2 SVG

2.1 Brief Overview of SVG Files SVG is an industry standard, “open” file format. Simply stated, an SVG file is merely a set of instructions that describe how to draw an image. The image files are actually XML files that follow the standard SVG “schema”, or structure. The XML tags within the file contain all the information necessary for an SVG viewer to draw the image either on screen or on a printer. For example, the element

<line x1="10" y1="10" x2="50" y2="50" stroke="#000000" stroke-width="0.3"/>

instructs an SVG viewer to draw a line from location (10,10) to (50,50). It also tells the SVG viewer to draw the line in the color black (#000000) and to use a 0.3pt weight line. The SVG standard includes an expressive set of primitives such as lines, polygons, rectangles, ellipses, and other elements to support the presentation of virtually any line drawing. Many SVG elements support a fill color. With current SVG technology, it is possible to change these fill colors dynamically at run time, as demonstrated below:

Page 4: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 4 © Copyright 2015 Hearst Business Media All Rights Reserved

Later, we will show how this solid filling is important not only for representing components, but also for responding to user interaction. Some SVG elements can be grouped together. To represent grouping, the SVG file includes a parent XML element called a group tag (<g>):

<g id="Layer_2">

<line x1="20" y1="20" x2="50" y2="50" stroke="#000000" stroke-width="0.3"/>

<rect x1="10" y1="10" x2="60" y2="60" stroke="#000000" stroke-width="0.5"/>

</g>

Although these groupings have no impact on the display of the image, the group tag allows for the handling of a collection of graphic elements (here a line and a rectangle element) as a single entity. Groups can themselves contain groups, as in the example below.

<g id="Layer_2">

<line x1="20" y1="20" x2="50" y2="50" stroke="#000000" stroke-width="0.3"/>

<rect x1="10" y1="10" x2="60" y2="60" stroke="#000000" stroke-width="0.5"/>

<g>

<text transform="matrix(1 0 0 1 7.6 47.6)"

font-family="'ArialNarrow-Bold'" font-size="9.5">2</text>

</g>

</g>

Note that the top-level group has an ID attribute. Later we will see how, in the MOTOR Part Graphics, only top-level groups will contain IDs, and these IDs group the elements into a single callout.

2.2 SVG Web Resources While a complete description of the SVG file format is outside the scope of this document, there are several online resources that can be leveraged to aid adoption and understanding of the file format. Below is a brief list of some helpful online resources.

Web Page Description

http://www.w3.org/Graphics/SVG/ The W3C home page for the SVG format specification.

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics The Wikipedia page for SVG.

http://www.adobe.com/svg/ The Adobe SVG Viewer home page. The Adobe SVG viewer is a popular viewer, although other viewer implementations are available.

http://www.adobe.com/svg/examples.html Several examples from Adobe representing the capabilities of the SVG file format and the Adobe SVG Viewer.

http://www.mobiform.com/products/svgviewplus/svgviewplus.htm Mobiforms .Net SVG View Plus component (commercial offering).

http://www.inkscape.org An open source SVG editing tool.

Page 5: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 5 © Copyright 2015 Hearst Business Media All Rights Reserved

2.3 MOTOR SVG File Structure The MOTOR Information Systems SVG files fully comply with the SVG standard format specification. With that said, there are MOTOR-specific constructs within the SVG files. Consumers of these files will need to know the structure and meaning of these constructs in order to successfully digest the file contents.

3 XAML

3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured, scalable drawings. XAML is the underlying “markup” language of Windows Presentation Foundation (WPF) – a core technology of the Microsoft Windows technology stack. In additional to storing vectored drawings, it can also address graphical user interface elements such as buttons and checkboxes. Similar to SVG, an XAML file is merely a set of instructions that describe how to draw an image. The image files are actually XML files that follow the standard XAML “schema”, or structure. The XML tags within the file contain all the information necessary for an XAML viewer to draw the image either on screen or on a printer. For example, the element

<Polyline Points="10.0,10.0 50.0,50.0" Stroke="Black" StrokeThickness="0.3"/>

instructs an XAML viewer to draw a line from location (10,10) to (50,50). It also tells the XAML viewer to draw the line in the color black and to use a 0.3pt weight line. The XAML standard includes an expressive set of primitives such as polylines, polygons, rectangles, ellipses, and other elements to support the presentation of virtually any line drawing. Many XAML elements support a fill color (e.g., polygons, rectangles, etc.). With current XAML technology, it is possible to change these fill colors dynamically at run time, as demonstrated below:

Later, we will show how this solid filling is important not only for representing components, but also for responding to user interaction.

Page 6: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 6 © Copyright 2015 Hearst Business Media All Rights Reserved

Some XAML elements can be grouped together. To represent grouping, the XAML file includes a parent XML element called a canvas tag (<Canvas>):

<Canvas Name="Layer_2">

<Polyline Points="10.0,10.0 50.0,50.0" Stroke="Black"

StrokeThickness="0.3"/>

<Rectangle Fill="White" Stroke="Black" StrokeThickness="0.5" Width="40.268"

Height="26.863" Canvas.Left="105.877" Canvas.Top="51.931"/>

</Canvas>

Although these groupings have no impact on the display of the image, the group tag allows for the treatment of a collection of graphic elements (here a line and a rectangle element) as a single entity. Canvas elements can themselves contain Canvas elements, as in the example below.

<Canvas Name="Layer_2">

<Polyline Points="10.0,10.0 50.0,50.0" Stroke="Black"

StrokeThickness="0.3"/>

<Rectangle Fill="White" Stroke="Black" StrokeThickness="0.5" Width="40.268"

Height="26.863" Canvas.Left="105.877" Canvas.Top="51.931"/>

<Canvas>

<TextBlock Text="2" FontFamily="ArialNarrow-Bold" FontStyle="Normal"

FontWeight="Normal" FontSize="9.5" Foreground="Black"

HorizontalAlignment="Center" VerticalAlignment="Bottom"

Canvas.Left="0" Canvas.Top="-8.55"/>

</Canvas>

</Canvas>

Note that the top-level Canvas has an ID attribute. Later we will see that, in the MOTOR Part Graphics, only the top-level Canvas element will contain IDs, and these IDs group the elements into a single callout.

3.2 XAML Web Resources While a complete description of the XAML file format is outside the scope of this document, there are several online resources that can be leveraged to aid adoption and understanding of the file format. Below is a brief list of some helpful online resources.

Web Page Description

http://msdn.microsoft.com/en-us/library/ms752059.aspx

Microsoft’s introductory material related to XAML.

http://www.wpf-graphics.com/Home.aspx

WPF Graphics Web site. WPF Graphics has a large library (as well as off-the-shelf tools) for processing and viewing XAML files.

Page 7: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 7 © Copyright 2015 Hearst Business Media All Rights Reserved

4 Key Concepts for understanding MOTOR SVG & XAML Parts Files

Note that the source files created by MOTOR graphic artists are EPS (Encapsulated PostScript), but are converted to SVG and XAML. These conversions are non-destructive, and many tests have been run on the fidelity of both file formats to ensure that the quality of the extracted images does not degrade during conversion. The following sections identify key concepts that should be reviewed before attempting to integrate MOTOR SVG or XAML Part files in your solution.

4.1.1 Callouts

A callout is represented as a number appearing within the part graphic with either a set of arrows or a bounding box identifying the elements of the part or assembly. In the example image below, the callouts are circled in red for clarity. Callout 4 represents an assembly, while callout 5 represents a single part.

An XAML Image with Callouts circled in red

Typically, these callouts are related back to a field within a corresponding database.

Page 8: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 8 © Copyright 2015 Hearst Business Media All Rights Reserved

Callouts from a Headlamp Parts graphic are shown alongside the contents from the corresponding section of a Collision Estimating Data chapter

Callouts are always represented by a text element (<text> in SVG and <TextBlock> in XAML) with a 9.5pt ArialNarrowBold font, solid black fill. As we will review next, these text elements are grouped together with the other image elements that compose a component or assembly.

4.1.2 Groups

Within the graphic files themselves, all of the lines, rectangles, ellipses and polygons that make up a single component or assembly, as well as the callout text element and corresponding arrows, are “grouped”. Recall that in SVG files, the <g> tag is used, while XAML uses the <Canvas> tag for this grouping. This grouping allows individual components to be addressed; they can be re-colored, moved, or even deleted from the drawing. Most top-level group (<g> or <Canvas>) tags in the graphic files are named “Layer_#”, where # represents the callout number associated with that group. This naming convention is derived from both the source file format for these vectored images (Encapsulated PostScript/EPS), as well as the editorial approach for managing all elements related to a single callout. Please note that there are situations where a top-level group does not contain a callout. Reference Graphics and Reference Dashed Lines are also grouped together, but do not contain an ID tag of the format “Layer_#”. These groups will have an ID of either “Layer_Reference” or “Layer_DashLine” so that they can be identified and excluded from processing or Quality Control steps when present in a file. Additionally, shared components (individual components that are available with multiple assemblies, but are not serviced individually) can also appear on a layer with a name/ID similar to “Layer_Shared_#1_#2”. Shared components are covered in a following section. Callout lines and the associated arrowhead are defined in a single group (<g> or <Canvas>) tag in most cases. There are cases where a line and its associated arrowhead are represented in nested groups within the SVG or XAML file. This is expected behavior.

Page 9: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 9 © Copyright 2015 Hearst Business Media All Rights Reserved

4.1.3 Top-level groups and their relationships

Given the way OE’s sell and service parts, there isn’t always a strict hierarchical relationship between assemblies and the components that compose that assembly. This fact eliminates the possibility of using a hierarchical structure within the XML-based SVG and XAML files. To address all possible relationships between assemblies and their sub-components, the MOTOR part graphics include an embedded reference within the <g> or <Canvas> tag to identify all of the included sub-components. This embedded reference takes the form of a text box with transparent contents which includes a comma-separated list of the sub-components contained within the assembly. Following is a contrived, illustrated example:

SVG Source Image Representation

<svg> <g ID=”Layer_1”> … <text fill=”#000000”>1</text> <text fill=”none”>2,3,4</text> … </g> <g ID=”Layer_2”> … </g> <g ID=”Layer_3”> … </g> <g ID=”Layer_4”> … </g> </svg>

Example SVG file snippet and a graphic representation of the file

This snippet of an SVG file identifies four top-level <g> tags, or components. However, the first <g> tag has a reference to three included components (see the <text fill=”none”…> tag, represented in the image as light gray text). The contents of this text element should be read as the list of sub-components of the assembly referenced by <g ID=”Layer_1”>. This literally means that assembly #1 contains the sub-components identified by callout 2, 3 and 4. There will probably be a need within your GUI to respond to assembly 1 in this example in such a way that it includes sub-components 2, 3, and 4. For example, a click anywhere on assembly 1 might require feedback to the user that indicates selection of all the elements within the “Layer_1” group, as well as all of the elements within “Layer_2”, “Layer_3” and “Layer_4”. This would require your GUI to somehow process the <text fill=”none” …> tag within Layer_1 to discover which sub-components are actually a part of “Layer_1”. Note that there is no physical hierarchical relationship in the XML file between assemblies and their sub-components. See the Shared Components section for an explanation of this constraint.

4.1.4 Shared Components

It is common for an assembly to contain individual components that are themselves identifiable as unique part numbers. This is the basis for the assembly to component relationship. However, the relationship is not always a simple containment of a component within an assembly. Sometimes, individual components are included within more than one assembly, as illustrated next.

Page 10: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 10 © Copyright 2015 Hearst Business Media All Rights Reserved

The large clamp pointed to by the right-hand trident arrow of callout #4 is also a part of assembly #3.

The transparent text elements that indicate assembly relationships are purposely colored gray for clarity.

This individual part is packaged by the manufacturer available in two different assemblies. This creates the issue of representing this relationship in an XML file. There are a couple of options. Option 1 – Draw the component twice, once as part of one assembly, and again as part of the other assembly. Unfortunately, this approach infringes upon the general goal of the exploded component views, where the aim is to accurately represent the number of parts related to a particular system or sub-group. Option 2 – Move the “shared” component to its own layer, and allow for some way to identify it as a shared component. This approach allows for complete flexibility, but requires somewhat more complicated business logic to address. By moving the clamp in callout #4 to its own layer, and giving it a unique description (such as “Layer_Shared_3_4”), applications consuming the SVG files would be able to identify this as a special case, and embed functionality to handle the situation. MOTOR has chosen option 2, as it allows for greater flexibility in the graphic files themselves, and does not represent multiple instances of the same part when only one instance of the part is actually required. This relationship would be represented in an XAML file as follows (SVG would be approximately the same, except using the SVG flavors of tags)

Page 11: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 11 © Copyright 2015 Hearst Business Media All Rights Reserved

XAML Source Image Representation

<Page…> <Canvas Name=”Layer_2”> … </Canvas> <Canvas Name=”Layer_3”> … <TextBlock text=”3” fill=”Black”/> <TextBlock text=”5” fill=”none”/> … </Canvas > <Canvas Name=”Layer_4”> … </Canvas > <Canvas Name=”Layer_5”> … </Canvas > <Canvas Name=”Layer_Shared_3_4”> … <TextBlock text=”Shared 3,4” fill=”none”/> … </Canvas> </Page>

In this example, neither <Canvas Name=”Layer_3”> nor <Canvas Name=”Layer_4”> have any child elements that represent the large clamp; the large clamp is moved to its own layer. Additionally, the last <Canvas> tag has a different format name that indicates it is a shared component layer. The last <Canvas> tag also has a child <text> element with a text value of “3,4”. This is the key that is used to relate this component (the large clamp) to both assembly #3 and assembly #4. When a shared component has its own, unique callout there is no need for this complexity. As the following image shows, when the shared component has its own callout, it can be selected individually as well as referenced by one or more assemblies.

A Shared Component with its own callout (callout #6)

Page 12: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 12 © Copyright 2015 Hearst Business Media All Rights Reserved

4.1.5 Solid Filled Components

The parts represented in the graphic files are always filled with solid white. Since the callouts are grouped, this enables applications to manipulate these fill colors to show highlighting of components or assemblies (recall the following graphic from earlier in this document):

One feature of these solid-filled objects is that the solid-filled areas respond to on-click events. Most interactive, vectored file viewers (such as SVG viewers and XAML file viewers) differentiate between a solid-filled shape and a transparently-filled shape. Solid-filled shapes will respond to a user’s mouse click within the solid filled area. Even if the solid-filled color is the same as the background color (usually white on white), this click event still fires. This is important for interactive viewing. No longer is clicking on the callout important. Clicking anywhere on the component – either on the callout, on the arrows or bounding box, on the contour, or even on the solid-filled interior – will still register the click event with the viewer.

4.1.6 XML files are “data”

Both SVG files and XAML files are based on XML – a standard data file format that provides a host of new possibilities. XML files can be queried, like a small database, via a language called “X-Path”. This language allows compelling features such as the ability to update the graphic file programmatically (such as changing fill or line colors), extracting individual components, programmatically creating new hot-spots, and much more. For example, the assembly component relationship can now be embedded directly within the graphic file itself. There is no need to query an additional data source to determine which part may belong to a particular assembly. Also, since these graphic files are now essentially data files, automated Quality Control is now possible. MOTOR is leveraging this exact technology when applying the rule validations discussed in the next section.

Page 13: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 13 © Copyright 2015 Hearst Business Media All Rights Reserved

5 Business Rules Each SVG and XAML file delivered adheres to the following rules. These rules are validated programmatically by a Quality Control tool.

Business Rule Validation Approach

All images must have at least one callout. Programmatic via QC tool

Callouts are sequentially numbered with no gaps in numbering sequence. Programmatic via QC tool

All elements and groups must be solid filled with white when not on a "Reference" layer or “Dashline layer”.

Programmatic via QC tool

All objects should have a fill of either "none" or "#FFFFFF" (white), unless the shape is an arrow head.

Programmatic via QC tool

Any line (line, polyline, curved line, polygon, ellipse, rectangle) must have a stroke color of 100% black (RGB of 0,0,0) when the stroke is specified. (Note: for arrowheads, the stroke is omitted.)

Programmatic via QC tool

Lines within the image must have a weight of either .5pt or .3pt. Programmatic via QC tool

Arrowheads must be identified by a <polygon> with no specified fill or stroke and must contain no more than 3 vertices.

Programmatic via QC tool

No object should have a fill color other than transparent, solid white or solid black.

Programmatic via QC tool

No object with a .3 weight line should have a solid white fill. Programmatic via QC tool

All reference graphics, which exist on a layer titled “Layer_Reference” are .3pt. Programmatic via QC tool

The file name is all upper case, and the base file name (without extension) is 7 characters long.

Programmatic via QC tool

Any/all dashed lines use the same format. Dash line component line weight will be 0.5pt with length of dash 4pt, and gap between lines 1pt, and can only appear on a layer named “Layer_Dashline”.

Programmatic via QC tool

Assembly bounding boxes/polygons should be .5 pt line weight. Programmatic via QC tool

No .3pt lines extend beyond the .5pt exterior border of any component. Programmatic via QC tool

Shafts of arrows should be .5pt line weight. Programmatic via QC tool

All <text> elements forming a callout have the same numeric/text value on a single layer. (Note that a single layer can have one or more instances of the callout text, and that callout must match).

Programmatic via QC tool

A callout is identified by a <text> element with a 9.5pt ArialNarrowBold font. Each layer with a callout must have at least one 9.5pt 100% black text element, but can have multiple, provided they all contain the same text.

Programmatic via QC tool

All elements of the image must be within a group tag. Those groups must be named either "Layer_#", "Layer_Shared_Component_#_#", or "Layer_Reference" or "Layer_Dashline".

Programmatic via QC tool

All text elements must be either 100% black (RBG of 0,0,0) or 100% transparent with no stroke defined.

Programmatic via QC tool

All top-level tags under the <svg> tag must be <g> tags with an "id" attribute (or <Canvas> tag with a “Name” attribute in XAML.)

Programmatic via QC tool

An assembly reference (which allows for relating a parent layer to a child layer) is identified by a <text> element with a 9.5pt font and is 100% transparent. Each layer can have at most one 9.5pt 100% transparent text element.

Programmatic via QC tool

Page 14: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 14 © Copyright 2015 Hearst Business Media All Rights Reserved

Business Rule Validation Approach

Black 9.5pt callouts must be on a layer (AKA group in SVG) that includes a layer description that follows the format "Layer_#", where # is the layer number. The number in the <text> element must match the number in the layer name.

Programmatic via QC tool

No shape should be obscured by a solid-filled component. Programmatic via QC tool

Transparent callouts: The contents must be a comma-separated list of callouts that exist elsewhere in the image file.

Programmatic via QC tool

6 Samples

6.1 Sample SVG Files Two SVG sample files, which demonstrate an approach for selecting parts and assemblies in the file, as well as demonstrating how to deal with “Shared” components. To view these files, you will need an SVG capable viewer (Adobe SVG Viewer, or a web browser that supports SVG files; see Appendix A for more information, as well as the file “SVGScript.js” in the same folder as the sample file.

6.1.1 CDK - 4450142 - Script.svg

Showing assemblies 2, 3 and 4 selected.

Page 15: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 15 © Copyright 2015 Hearst Business Media All Rights Reserved

6.1.2 CDK - 1451190 - Script.svg

Showing assemblies 3 and 4 selected.

6.2 Sample XAML File A sample XAML file is provided as well. This XAML file does not include any embedded functionality, but does reflect the expected structure and naming convention (i.e., <Canvas Name=”…”) of elements within an XAML file.

6.2.1 CDK - 8522017.xaml

Simple XAML example file

6.3 Sample TIF Images For sake of comparison, the TIF (Tagged Image File Format) versions of the sample SVG and XAML files included with the CDK have been provided.

Page 16: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 16 © Copyright 2015 Hearst Business Media All Rights Reserved

6.4 Sample Code / Queries (SVG) Since the SVG and XAML files are essentially XML files, X-Path queries are a good choice for extracting required information. Sample code with X-Path queries executed against SVG files are provided below. The chosen language is VB.NET. Similar X-Path queries can be used against an XAML file.

6.4.1 Identify all solid-white filled elements directly contained within a <g> tag

Given a particular component <g> tag, this code snippet will find all child elements that are solid-white filled, and are candidate for filling with a different color to identify selection within a GUI tool. Dim SVGXmlDoc As Xml.XmlDocument = New Xml.XmlDocument()

' Load a sample SVG file. For this to work quickly, you

' will want to remove the dtd and xmlns tags/attributes

' at the top of the SVG file

SVGXmlDoc.Load("CDK - 8522017.svg")

Dim CalloutNum As Int32 = 2

' The xpath query //g[@id='Layer_2'] will return the one

' elements with id="Layer_2"

Dim xn As Xml.XmlNode = _

SVGXmlDoc.SelectSingleNode("//g[@id='Layer_" & CalloutNum & "']")

If Not xn Is Nothing Then

' Select all child nodes (at any sub-level) of the current node

' that have a solid-white fill

Dim xnl As Xml.XmlNodeList = xn.SelectNodes(".//*[@fill='#FFFFFF']")

For Each xnode As Xml.XmlNode In xnl

' Use the xnode for application specific functionality

Next

End If

6.4.2 Identify transparent hidden text elements and relate them to the included components

Dim SVGXmlDoc As Xml.XmlDocument = New Xml.XmlDocument()

' Load a sample SVG file. For this to work quickly, you

' will want to remove the dtd and xmlns tags/attributes

' at the top of the SVG file

SVGXmlDoc.Load("CDK - 8522017.svg")

Page 17: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 17 © Copyright 2015 Hearst Business Media All Rights Reserved

' The xpath query //text[@fill='none'] will return all

' text elements that have a fill=none attribute

Dim xnl As Xml.XmlNodeList = SVGXmlDoc.SelectNodes("//text[@fill='none']")

For Each xn As XmlNode In xnl

' The InnerText of the selected XML nodes will contain a

' comma-separated list of the "included" sub-components/assemblies

Dim SubComponents() As String

SubComponents = xn.InnerText.Split(",")

For Each CalloutID As String In SubComponents

' Use the callout ID to locate the top-level <g> tag

Dim gTagID As String = "Layer_" & CalloutID

Dim gTag As XmlNode = SVGXmlDoc.SelectSingleNode("//g[@ID='" & gTagID & "'")

' Use the reference to the <g> tag as needed for your implementation...

Next

Next

7 Appendix A: SVG & XAML Viewer Technology

7.1 Overview SVG (Scalable Vector Graphics) is an XML-based file format suitable for delivering and displaying graphics that are scalable, i.e., they don’t lose fidelity when enlarged. Additionally, SVG supports scripting and programmatic re-coloring of elements within the image. For the non-technical readers of this document, there are several approaches to viewing SVG files:

1. Install the last release of the AdobeSVG viewer (v3.04). 2. Use a current SVG-compatible web browser, such as Firefox.

7.2 SVG Specification Flavors There are several flavors of the SVG specification. All support the required graphical elements used within Collision graphics (lines, curves, ellipses, rectangles, text). However, not all flavors of SVG fully support scripting. This is less of a concern as the XML Event Handler should be supported by nearly all SVG implementations.

Page 18: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 18 © Copyright 2015 Hearst Business Media All Rights Reserved

SVG Specification Level Graphical Elements XML Event Handlers Full Scripting

SVG 1.0 Yes Yes Limited

SVG 1.1 Yes Yes Yes

SVG Basic Yes Yes Optional

SVG Tiny No * Yes No

* Some implementations of SVGTiny do not support transparency. Transparency is required so that the assembly relationships (which are delivered as transparent text elements) do not display on screen. There are pre-processing options that can handle these elements in another manner, for example, converting the transparent text boxes to XML elements from another namespace. To support the required functionality of the exploded part views in SVG format files, a viewer must support the basic graphical elements and some level of interactivity (such as XML Event Handlers and/or Full Scripting).

7.3 SVG Viewers With these requirements in mind, several SVG viewers may be of interest. The SVG Wiki has a page (http://wiki.svg.org/Viewer_Implementations) devoted to viewer technology, which as of Dec. 2009 is where the information below was gathered. Note that in early January 2010, Microsoft has finally joined the SVG working group of the W3C.

Viewer Graphics Support

Event Support

Scripting Support

Technology

Adobe SVG Viewer Yes Yes Yes ActiveX plug-in for IE, support discontinued in Jan 2009.

MOBIFORM SVGViewPlus

Yes Yes Yes .Net component with source. Status is unknown – Mobiform has not been responsive to queries about this tool.

RENESIS Yes Yes Yes ActiveX available. Open source, requires signing their integration agreement.

eSVG Yes Yes Yes ActiveX control available.

Sharp Vector Graphics

TBD TBD TBD Open Source, .Net solution.

7.4 SVG within WPF (Windows Presentation Foundation) Applications

The relatively recent introduction of WPF from Microsoft has changed the SVG landscape. WPF offers all of the features and functionality of SVG graphics, and much more. The downside to WPF graphics (or .XAML files as they are called) is that they are about 25% larger than SVG files (even when compressed). This makes SVG a more suitable format for delivering graphics, but it would require conversion to XAML before integration with a .net WPF application. There are several SVG to WPF solutions available, including some sample code and/or projects. Most notable is www.WPF-graphics.com, which has .net tools and libraries available to convert SVG to WPF.

Page 19: Content Developer Kit - MOTOR3 XAML 3.1 Brief Overview of XAML Files Extensible Markup Language (XAML) is a proprietary, Microsoft-created XML file format used to describe structured,

Part Graphics in SVG & XAML

Proprietary and Confidential Page 19 © Copyright 2015 Hearst Business Media All Rights Reserved

7.5 XAML graphics within WPF or Silverlight Applications Microsoft’s core technology stack of Windows Presentation Foundation and Silverlight support the rendering and programmability model inherent in the part graphics that MOTOR offers.

8 Document History Document History

Date Version Change Reference

10/2008 0.1 Initial draft

10/2008 0.2 Draft for review

10/2008 1.0 Updates based on review

1/2010 1.1 Added SVG Viewer Appendix

2/2011 1.5 Various updates, added XAML, additional examples, and additional graphics

12/2014 1.6 Updated format, naming convention

07/2015 1.7 Added comment on nested groups for lines and arrows