drawingml - introduction
TRANSCRIPT
![Page 1: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/1.jpg)
DrawingML Overview
The tip of a very big iceberg …
( almost 40 schemas )
![Page 2: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/2.jpg)
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
![Page 3: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/3.jpg)
Main Types of Objects
• Shape
• Group Shape
• Connector
• Picture
• Graphic Frame
![Page 4: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/4.jpg)
Shape Overview
spTree
nvGrpSpPr grpSpPr sp
nvSpPr spPr
style txBody
xfrm geo
fillProperties lineProperties
effectProperties scene3D
sp3D bwMode
![Page 5: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/5.jpg)
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
![Page 6: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/6.jpg)
Connector Overview
spTree
nvGrpSpPr grpSpPr spCxnSp
nvCxnSpPr spPr
style
xfrm geo
fillProperties lineProperties
effectProperties scene3D
sp3D bwMode
![Page 7: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/7.jpg)
Picture Overview
spTree
nvGrpSpPr grpSpPr pic
nvPicPr blipFill
spPr style
xfrm geo
fillProperties lineProperties
effectProperties scene3D
sp3D bwMode
![Page 8: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/8.jpg)
Graphic Frame Overview
spTree
nvGrpSpPr grpSpPr graphicFrame
nvGraphicFramePr xfrm
graphic
![Page 9: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/9.jpg)
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
![Page 10: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/10.jpg)
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
![Page 11: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/11.jpg)
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
![Page 12: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/12.jpg)
Shape Properties ( spPr )
spPr
xfrm geo
fillProperties lineProperties
effectProperties scene3D
sp3D bwMode
Note. spPr is used for shapes, connectors and pictures
![Page 13: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/13.jpg)
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
![Page 14: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/14.jpg)
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
![Page 15: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/15.jpg)
Shape Transform
Extent and Offset units are in EMUs ( 914400 dpi / 360000 dpc )
![Page 16: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/16.jpg)
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
![Page 17: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/17.jpg)
Preset vs. Custom Geometries
![Page 18: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/18.jpg)
Fill Properties
Indicates separate part for image data
![Page 19: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/19.jpg)
Line Properties
• Fill Props• Dash Props• Join Props• Head End Props• Tail End Props• Width• Cap• Compound Type• Pen Alignment
![Page 20: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/20.jpg)
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
![Page 21: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/21.jpg)
Effect Properties
![Page 22: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/22.jpg)
Text
• Text is largely modeled after Word’s design– Similar structures– Similar naming conventions– Different schemas
![Page 23: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/23.jpg)
Runs and Run Properties
WordProcessingMLDrawingML
![Page 24: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/24.jpg)
Text == Graphics• We can apply all graphic effects to text
– Some limited to runs– Some limited to ¶
![Page 25: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/25.jpg)
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
![Page 26: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/26.jpg)
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
![Page 27: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/27.jpg)
Font Schemes
• Provides a set of major and minor fonts
![Page 28: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/28.jpg)
Formatting Schemes
• Scheme defined in terms of four styles– Fill– Line– Effect– Background Fill
• Each style has three “flavors”
![Page 29: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/29.jpg)
Styles Example
![Page 30: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/30.jpg)
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 )
![Page 31: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/31.jpg)
Audio and Video Examples
• Represented as a picture ( poster frame or icon )
• Relationships– Hyperlink for interactivity– Media source– Picture for poster frame or
icon
![Page 32: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/32.jpg)
Graphic Frame
• General-purpose container for holding an “object” containing visual and semantic data
• Used for Tables, Diagrams and Charts
![Page 33: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/33.jpg)
Tables
• Built using a Graphic Frame wrapper
![Page 34: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/34.jpg)
Tables’ Graphic Data
• Modeled after Word which is similar to HTML tables ( built using a table, properties, rows and cells )
![Page 35: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/35.jpg)
Diagrams
• Built using a Graphic Frame wrapper
![Page 36: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/36.jpg)
Diagram Parts
• Diagrams built from four parts:– Data– Colors– QuickStyles– Layout
![Page 37: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/37.jpg)
Data Part
• Uses OfficeArt’s text storage model
![Page 38: DrawingML - Introduction](https://reader033.vdocument.in/reader033/viewer/2022061106/544775efb1af9f182d8b47bb/html5/thumbnails/38.jpg)
Layout Part