WebCGM Interoperability for industrial- strength CGM graphics John C. Gebhardt.

Slides:



Advertisements
Similar presentations
Validation of a CGM Graphic Against the Web CGM Profile
Advertisements

WebCGM and SVG: a comparison (Dieter Weidenbruck, CGM Open) Lofton Henderson, CGM Open Chris Lilley, W3C.
WebCGM vs SVG: Applicability for Technical Graphics Lofton Henderson Dieter Weidenbrück.
XML Europe 2002 Barcelona, May WebCGM DOM - External Control for Web Graphics Dave Cruikshank Technical Fellow, The Boeing Company CTO, CGM Open.
Graphical Hotspot Definition A Common ATA/AECMA Approach Spec April 1999 / Page Graphical.
06 May 2003Stylable CGM XML Europe 2003, London Stylable CGM Dave Cruikshank The Boeing Company Lofton Henderson Henderson Consulting.
4. Internet Programming ENG224 INFORMATION TECHNOLOGY – Part I
© 2010 Delmar, Cengage Learning Chapter 7: Importing and Modifying Graphics.
CHAPTER 20 CREATING SVG GRAPHICS. LEARNING OBJECTIVES How to embed a graphic stored within a.SVG file in an HTML page How to use the and tag pair to specify.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques ©2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
Foundation Level Course
© Nova / Grassioulet 5-6 mai 2002 TECFA staf2x S V G glossary Scalable Vector Graphics.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
Introduction to SVG & Batik Presented by Shang-Ming Huang.
© 2009 Research In Motion Limited BlackBerry themes and animated graphics.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
SWE 423: Multimedia Systems Chapter 4: Graphics and Images.
1 Chapter 11 Developing Custom Help. 11 Chapter Objectives Use HTML to create customized Help topics for an application Use the HTML Help Workshop to.
Introduction to Computer Graphics
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
ESRM 250 & CFR 520: Introduction to GIS © Phil Hurvitz, KEEP THIS TEXT BOX this slide includes some ESRI fonts. when you save this presentation,
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
By: Zaiba Mustafa Copyright ©
Chapter 3 Working with Symbols and Interactivity.
@Ms. Masihi.  Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,
Introduction to Interactive Media 06: Text: Static Interactive Media Component.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Adobe Fireworks CS3 Revealed CHAPTER ONE: GETTING STARTED WITH ADOBE FIREWORKS.
Macromedia Fireworks 8 Revealed MACROMEDIA FIREWORKS GETTING STARTED WITH.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
Working with Symbols and Interactivity
© ITEDO Software 2004 S1000D and CGM Dieter Weidenbrueck Paris July 21, 2004.
Introduction to Interactive Media Interactive Media Components: Text.
Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.
Chapter 9 Fireworks: Part I The Web Warrior Guide to Web Design Technologies.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
SVG for Designers Tom Hoferek. Objectives Introduce SVG Illustrate its capabilities Demonstrate SVG in action Speculate, discuss, answer questions.
1 Scalable Vector Graphics (SVG). 2 SVG SVG is an application language of XML. “SVG is a language for describing two- dimensional graphics in XML. SVG.
I MPORTING AND M ODIFYING G RAPHICS. 1. Understand and import graphics 2. Break apart bitmaps and use bitmap fills 3. Trace bitmap graphics Objectives.
Illustrator I I450 Technology Seminar. Bitmap vs. Vector Photoshop = Bitmap Illustrator = Vector Bitmap images are resolution dependent Vector images.
Advanced 2D Design Concepts Guilford County Sci Vis V
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Creating Vectors – Part One 2.02 Understand Digital Vector Graphics.
Flash Develop Rich Internet Content and Applications –Design motion graphics or build data-driven applications Flash Document = “.fla” filename extension.
Advanced 2D Design Concepts V The basic fill options include uniform or solid, fountain or gradient, and pattern. The uniform fill is produced.
Scalable Vector Graphics Dietz Ellis 04/17/06. SVG SVG is a language for describing two- dimensional graphics in XML. SVG is a language for describing.
Part – 3 : HTML 5 SVG Tag. † SVG stands for Scalable Vector Graphics. † SVG is used to define vector-based graphics for the Web. † SVG defines the graphics.
Main characteristics of Vector graphics  Vector graphics provide an elegant way of constructing digital images (diagrams, technical illustration and.
OVERVIEW Objectives Follow a design document to prepare images for inclusion in a Web page Run a batch process to prepare multiple images in one step Use.
Creating & Working with Clipping Masks
CSI-447: Multimedia Systems
Project Objectives Lay out Web pages Create layers
Overview of CGM CGM is a binary vector graphics format.
Chapter 3:- Graphics Eyad Alshareef Eyad Alshareef.
2.02 Understand Digital Vector Graphics
Chapter Lessons Understand the Fireworks work environment
Interoperability for industrial-strength CGM graphics John C. Gebhardt
Vectors and Paths, also File Export
Develop Rich Internet Content and Applications
Creating Vectors – Part One
Creating Vectors – Part One
Presentation transcript:

WebCGM Interoperability for industrial- strength CGM graphics John C. Gebhardt

Topics The requirements for a scalable graphics format for the WWW Why a CGM-based solution? An introduction to WebCGM Examples Implementation advice Summary

Scalable Graphics Requirements Open, readily available specification Extensible Widely implemented w/reference code Good interoperability potential Wide range of raster/vector graphic primitives Flexible text and text font capabilities

Requirements. Cont Versatile control of properties - transparency, layering, line endings Page-independent coordinate system Linking to/from groups of elements Pickable, active elements or groups Extractable metadata

Why a CGM-based solution? CGM is an ISO standard with hundreds of implementations In 1999, the CGM standard will be available on the internet in HTML format CGM is used by many industries for 2D graphics exchange and publishing CGM Open members and others are united in support of the WebCGM profile

Why CGM? Rich set of raster and vector primitives Versatile structuring capabilities Compact binary encoding ideal for complex technical graphics Established profiling mechanism Established conformance testing capability

WebCGM Overview File Structure The roles of the picture Groups within pictures Group properties Content model Hyperlinking Graphical Content Encodings

WebCGM Overview Submitted to W3C on August 19, 1998 Issued as W3C Recommendation on January 21, 1999 Several editor and viewer/browser implementations under development Meets W3C Scalable Graphics Requirements A profile of ISO/IEC 8632:1992

WebCGM File Structure Metafile Picture body Symbol Libraries Begin Picture Begin Metafile Descriptor End Metafile Picture 1Picture 2...Picture n Begin Picture Body Picture Descriptor Picture Body End Picture Control, Graphical Primitive, and Attribute Elements + Intelligent Groups with Properties Begin Metafile Descriptor End Metafile Picture 1Picture 2...Picture n Picture Properties

How pictures are used Independent graphical presentation –Opaque background –primitives rendered in order encountered Overlays to other content –transparent background Symbol definitions –One or more symbols per library –opaque or transparent background

Groups within pictures Named, typed collections of graphical primitives with attached properties Four group types are allowed: –graphical objects (grobject) –layers or levels (layer) –paragraphs (para) –text within paragraphs (subpara) Groups can be navigation sources and targets

WebCGM Architecture Groups (grobject,layer, para, subpara) with properties Pictures -- Overlays Presentations Symbol Definitions Symbol Instances

Properties of grobject ID - Unique ID (reqd) Name - Name (optional) LinkURI - Link (optional, multiple) ScreenTip - Descriptive text for interactive display Region - Optional spatial picking region ViewContext - rectangle to zoom to when pointed to.

Properties of layer ID - Unique ID (reqd) LayerName - Name of the layer (reqd) LayerDesc - Description of the layer (optional)

Properties of para ID - Unique ID (reqd) Content - Searchable text (optional) LinkURI - Link (optional, multiple) ScreenTip - Descriptive text for interactive display (optional) Region - Spatial picking region (optional) ViewContext - rectangle to zoom to when pointed to. (optional)

Properties of subpara ID - Unique ID (reqd) Content - Searchable text (optional) LinkURI - Link (optional, multiple) ScreenTip - Descriptive text for interactive display (optional) Region - Spatial picking region (optional) ViewContext - rectangle to zoom to when pointed to. (optional)

WebCGM Content Model

Hyperlinking Bi-directional From WebCGM Object to other objects, pictures, CGMs, HTML files, or any content supported by browser via one or more LinkURI properties To WebCGM files, pictures, objects via a URI fragment

WebCGM Hyperlinks Foo.cgm Foo.cgm#P3 Foo.cgm#P4.G2 Symbol Instances Foo.cgm P1 P2 P3 P4 P5 P6 P7 G1 G2

WebCGM Hyperlinks, long form Foo.cgm#pword(, ).objword(, ) Where: pword = picid|picseqno objword = id|name and : pic_behavior = _blank |_replace |_self |_top | obj_behavior = view_context |highlight |highlight_all

Graphical Content Subset of the ATA GREXCHANGE profile Highly expressive Easily implemented Includes Version 1,2, &3 elements

Graphical Primitives Line, polyline, polygon, polygon set Rectangles, circles, ellipses, arcs, pie slices Graphical text -- restricted, appended Closed figures and compound lines Polysymbols Smooth curves -- Piece-wise cubic Bezier Raster images -- tiled G4, PNG, jpeg

Attributes and Controls Line width, style, color, cap and join Fill with solid color, hatch pattern, bitmap Edge attributes similar to line attributes Line and fill patterns can be passed by name or precisely defined in the metafile Text font, character set (including Unicode), size, orientation, skew, aspect ratio Clipping to rectangular regions

Encodings Clear Text -- for education and testing Binary -- for production use

Whats not in WebCGM (but in CGM) Bundled attributes Segments Geometric and Interpolated fills Generalized text paths Protection regions

Implementation Advice Join CGM Open Download free viewer(s) Buy the standard Get a good toolkit Look at the RAL source code Download the CGM test suites from NIST

Summary WebCGM is an excellent method for publishing intelligent hybrid 2D graphics on the WWW It promises to deliver exceptional interoperability between editing tools and viewer/browsers It will unleash a flood of new technical graphics publishing applications