DrawingML - Introduction

DrawingML Overview

The tip of a very big iceberg …

( almost 40 schemas )

Evolution of Office Graphics

Word, Exceland PPT

Publisherand FrontPage

Word

Excel andPPT

Graphics PlatformUnification

HTML OutputVector Markup Language

( “VML” )

GDI+Diagramming

Compress PicturesInset PenHSL Color

New Graphics Platformw/ Text Engine

Main Types of Objects

• Shape

• Group Shape

• Connector

• Picture

• Graphic Frame

Shape Overview

spTree

nvGrpSpPr grpSpPr sp

nvSpPr spPr

style txBody

xfrm geo

fillProperties lineProperties

effectProperties scene3D

sp3D bwMode

Group Shape OverviewspTree

nvGrpSpPr grpSpPr

nvSpPr

spPr

style

txBody

xfrm geo

grpSp

sp grpSpPr spnvGrpSpPr

nvSpPr

spPr

style

txBody

xfrm geo

fillProperties

effectProperties scene3D

bwMode

fillProperties

effectProperties scene3D

bwMode

lineProperties

sp3D

lineProperties

sp3D

xfrm geo

fillProperties effectProperties

scene3D bwMode

Connector Overview

spTree

nvGrpSpPr grpSpPr spCxnSp

nvCxnSpPr spPr

style

xfrm geo

fillProperties lineProperties

effectProperties scene3D

sp3D bwMode

Picture Overview

spTree

nvGrpSpPr grpSpPr pic

nvPicPr blipFill

spPr style

xfrm geo

fillProperties lineProperties

effectProperties scene3D

sp3D bwMode

Graphic Frame Overview

spTree

nvGrpSpPr grpSpPr graphicFrame

nvGraphicFramePr xfrm

graphic

Non-Visual Properties ( nvPrs )

• Each object’s nvPrs are a union of a common set plus a set of object-specific nvPrs

• Common nvPrs– Click Hyperlink– Hover Hyperlink– ID– Name– Description– Hidden Flag

Note that hyperlinks are expressed as relationships

Object-Specific nvPrs

• Shape nvPrs– Shape Locks– Text Box Flag

• Group Shape nvPrs– Group Shape Locks

• Connector nvPrs– Connector Locks – Start Shape– End Shape

• Picture nvPrs– Picture Locks

• Graphic Frame nvPrs– Graphic Frame Locks

LocksGroup Ungrou

pSelect Select

children

Drill Down

Move Rotate Resize Change Aspect Ratio

Crop Edit Points

Hide Adjust Handles

Change Arrow Heads

Change Shape Type

Shape

X X X X X X X X X X

Group Shape

X X X X X X X

Connector

X X X X X X X X X X

Picture

X X X X X X X X X X X

Grfx Frame

X X X X X

Shape Properties ( spPr )

spPr

xfrm geo

fillProperties lineProperties

effectProperties scene3D

sp3D bwMode

Note. spPr is used for shapes, connectors and pictures

Group Shape Properties ( grpSpPr )

grpSpPr

xfrm fillProperties

effectProperties scene3D

bwMode

Note. grpSpPr is only used for group shapes

Note. this xfrm is different from xfrm in spPr

Transforms ( xfrms )

Offset ExtentChild Offset

Child Extent

Rotat’nVert. Flip

Horiz. Flip

Shape X X X X X

Group Shape

X X X X X X X

Shape Transform

Extent and Offset units are in EMUs ( 914400 dpi / 360000 dpc )

Geometry

• Built-in shapes generally use preset geometries

• Scribbles, Curves and Custom Shapes need to express geometry in the file format– Adjust handles– Guides– Connection Points– Bounding Rectangle– Paths

Preset vs. Custom Geometries

Fill Properties

Indicates separate part for image data

Line Properties

• Fill Props• Dash Props• Join Props• Head End Props• Tail End Props• Width• Cap• Compound Type• Pen Alignment

Colors and Color Transformations

• sRGB• scRGB• HSL• Windows System Colors• Scheme Colors• Preset Colors

• Complement• Grayscale• Tint• Shade• Alpha• Hue• Saturation• Luminance• Red• Green• Blue

Effect Properties

Text

• Text is largely modeled after Word’s design– Similar structures– Similar naming conventions– Different schemas

Runs and Run Properties

WordProcessingMLDrawingML

Text == Graphics• We can apply all graphic effects to text

– Some limited to runs– Some limited to ¶

Styles

• Designed to ensure consistent visual appearance of content within/across documents

• Comprised of three parts– Color Scheme– Font Scheme– Formatting Scheme

• Stored as separate part within package• Part replacement get “resolved” into file when

file loaded back into application

Color Schemes

• Extension of existing PowerPoint model– More color slots: 12

( from 8 )– Repurposing of color

slots• Title, Background, etc

no longer apply• Organized into dark,

light, accent and hyperlink slots

Font Schemes

• Provides a set of major and minor fonts

Formatting Schemes

• Scheme defined in terms of four styles– Fill– Line– Effect– Background Fill

• Each style has three “flavors”

Styles Example

Audio and Video Support

• Two types of audio– Audio based on a CD– On-disk audio file

• On-disk video file

• Both can be stored internally or externally

• Insertion of either creates a timeline in PowerPoint ( to control interactivity )

Audio and Video Examples

• Represented as a picture ( poster frame or icon )

• Relationships– Hyperlink for interactivity– Media source– Picture for poster frame or

icon

Graphic Frame

• General-purpose container for holding an “object” containing visual and semantic data

• Used for Tables, Diagrams and Charts

Tables

• Built using a Graphic Frame wrapper

Tables’ Graphic Data

• Modeled after Word which is similar to HTML tables ( built using a table, properties, rows and cells )

Diagrams

• Built using a Graphic Frame wrapper

Diagram Parts

• Diagrams built from four parts:– Data– Colors– QuickStyles– Layout

Data Part

• Uses OfficeArt’s text storage model

Layout Part