Patrick Dengler Senior Program Manager Microsoft Corporation

Patrick Dengler Senior Program Manager Microsoft Corporation
PLAT-551P Programming SVG and canvas graphics in a Metro style app based on HTML5 Patrick Dengler Senior Program Manager Microsoft Corporation © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Agenda This Session Will:
Help you determine when, where and why you should use SVG and/or Canvas in your Metro style HTML application SVG and/or Canvas in your Web Pages When you leave you will: Be able to kick start your graphics programming experience to create exciting Metro style applications through Gaining an understanding of SVG syntax, the SVG API and how to integrate CSS 3.0 An understanding of Canvas, and the Canvas API How to integrate the two technologies to create the best experience by using these real world samples and accompanying code.

Graphics are a key element of visually rich and engaging applications.

The Graphically Rich Web
SVG or Canvas? The dialog surrounding when to use SVG and when to use Canvas continues on, yet there are clear distinctions of when to use one vs. another, and when to use both. The Graphically Rich Web

MIX 11 11/14/2018 What is Canvas? HTML5 element that allows for dynamic, scriptable rendering of 2D shapes and bitmaps Canvas is an “immediate mode” graphics, a “fire and forget” model which renders graphics directly to the screen and then subsequently has no context as to what was done. Has one element <canvas> and is otherwise only changed through code. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Canvas Basics <!DOCTYPE html > <html>
<body onload="drawShape();"> <canvas id="myCanvas" height="100px" width="100px" /> </body> <script> function drawShape() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(37, 37, 20, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke(); ctx.fill(); } </script> </html>

Here is the entire API! Shadows state transformations compositing
MIX 11 11/14/2018 Here is the entire API! state void save(); void restore(); transformations void scale(…); void rotate(…); void translate(…); void transform(…); void setTransform(…); compositing globalAlpha; globalCompositeOperation; colors and styles strokeStyle; fillStyle; CanvasGradient createLinearGradient(…); CanvasGradient createRadialGradient(…); CanvasPattern createPattern(…); Line caps/joins attribute double lineWidth; attribute DOMString lineCap; attribute DOMString lineJoin; attribute double miterLimit; Shadows attribute double shadowOffsetX; attribute double shadowOffsetY; attribute double shadowBlur; attribute DOMString shadowColor; Rects void clearRect(…); void fillRect(…); void strokeRect(…); path API void beginPath(); void closePath(); void moveTo(…); void lineTo(…); void quadraticCurveTo(…); void bezierCurveTo(…); void arcTo(…); void rect(…); void arc(…); void fill(); void stroke(); void clip(); boolean isPointInPath(…); focus management boolean drawFocusRing(…); drawing images void drawImage(…); text attribute DOMString font; attribute DOMString textAlign; attribute DOMString textBaseline; void fillText(…); void strokeText(…); TextMetrics measureText(…); pixel manipulation ImageData createImageData(…); ImageData getImageData(…); void putImageData(…); interface CanvasGradient { void addColorStop(…); }; interface CanvasPattern {}; interface TextMetrics { readonly attribute double width; }; interface ImageData { readonly attribute unsigned long width; readonly attribute unsigned long height; readonly attribute CanvasPixelArray data; }; interface CanvasPixelArray { readonly attribute unsigned long length; getter octet (…); setter void (…); }; © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What is SVG? SVG is a “retained mode” graphics which persist in an in-memory model that provides for a scene graph. Declarative in nature. Can be manipulated through code. Is Stylable through CSS. Is output from many tools. Can scale.

SVG Basics <!DOCTYPE html > <html> <style>
.rectClass { fill:blue; } .rectClass:hover fill:green; </style> <script> function doEvent(shape) { alert(This is the ' + shape); </script> <body> <svg> <rect onmousclick="doEvent('rect');" class="rectClass" height="75px" width="75px" /> <circle onmouseover="doEvent('circle');" r="20" cx="37" cy="37" fill="yellow"/> </svg> </body> </html>

Here is the relevant API
Elements path animate filter linearGradient radialGradient view a marker clipPath mask pattern circle ellipse line polygon polyline rect g image use style text textPath Properties clip clip-path clip-rule color fill fill-opacity filter font font-family marker mask opacity stop-color stop-opacity stroke stroke-opacity stroke-width visibility writing-mode Attributes clip clip-path clip-rule color cx cy d display dx dy fill fill-opacity fill-rule filter Attributes font-family font-size font-stretch font-style font-variant font-weight height id local marker-end marker-mid marker-start mask name Attributes offset opacity operator order origin overflow path pathLength points r radius result rotate rx ry scale stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-opacity Attributes stroke-width style targetX targetY text-anchor text-decoration text-rendering textLength transform type viewBox visibility width x x1 x2 y y1 y2 Events onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload onzoom

Let’s Explore!

Static Images In your Metro style HTML application
As Full Documents <svg> CAD Visio / CAD Exporters / Inkscape As Images <img> Logos Gradient Fills, Graphics and Filters As CSS Images list-style-image background-image

Static Vector Graphics
demo Static Vector Graphics Use SVG within a Web Page

As Full Documents <svg> As Images <img> Logos Rich, static or animated filter effects

As CSS Images list-style-image background-image <g id="redCircle" <path d="m , c , , z" style="fill:url(#radialGradient2359);fill-opacity:1;stroke:none" /> </g>

Use Case: Visualizing Data
Charts Display Data or Change the user driven views Styling / Transitions Maps Interactive Data Presentation Routing Graphs Animated Queues for Visuals Large Amounts of Data

Investigating Interactivity
demo Investigating Interactivity Practical uses for vector graphics in interactive Metro style HTML application scenarios. How to Visualize Data

Charts Display Data or Change the user driven views Styling / Transitions <path id="mainPath" class="highcharts-series" d="M 6 57 L 7 58".. /> <rect id="mainGraph" x="0" y="0" width="400" height="200" /> document.getElementById("mainPath").addEventListener("mouseover", showData, false); document.getElementById("mainGraph").addEventListener("click", zoomData, false); <path class="highcharts-series" d="M 6 57 L 7 58".. /> .highcharts-series { -ms-transition-property: opacity; -ms-transition-duration: 2s; } .highcharts-series:hover { opacity:.5; }

Maps Interactive Data Presentation High Speed Data <style type="text/css"media="screen"> path:hover{fill:yellow;} </style> <canvas style="position:absolute;top:50px;left:50px" onclick="addWeather();" id="canvasGraph"height="500px"width="800px"/> for (var i= 0; i < weatherPatterns.length;i++) { weatherPatterns[i].x += Math.floor(Math.random() * 3)-1; weatherPatterns[i].y += Math.floor(Math.random() * 3) -1; myContext.drawImage(weatherImage[weatherPatterns[i].ImageIndex], weatherPatterns[i].x, weatherPatterns[i].y); }

Graphs Animated Queues for Visuals Large Amounts of Data <canvas style="position:absolute;top:50px;left:50px" onclick="scatter();" id="canvasGraph" height="400px"width="500px"/>

Fun w/ Canvas, SVG and BOTH!
demo Fun w/ Canvas, SVG and BOTH! Integrating both technologies for compelling experiences.

Review

SVG, Canvas, SVG Filters, CSS Transitions, CSS Animations all work together to create visual stunning end user experiences to WOW your customers.

Rich User Experiences are simple to integrate into your Metro style HTML applications using standards based Web Technologies.

Related sessions [381] Building Beautiful and Interactive Apps with HTML5 & CSS3 [382] What's New with HTML5, Javascript, and CSS3 [386] 50 Performance Tricks to Make your HTML5 apps and sites Faster [873] Designing Metro style apps using CSS3

Further reading and documentation
Graphics in HTML5 SVG First Look in IE9 Introducing HTML5 Graphics: Canvas and SVG Deep Dive into HTML5 Canvas Modernizing Your WebSite: SVG Meets HTML5 The Future of HTML Contact info – (use subject line BUILD)

11/14/2018 7:14 AM © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

BACKUP

The Graphically Rich Web
Real Time or Large Volume Data Graphing 2D Casual Gaming Static Images <canvas> Cross Over <svg> Fast Animations (Particle Effects) The Graphically Rich Web High Fidelity Documents for Viewing and Printing Interactive Charts and Graphs

Show Code Use this layout to show software code
The font is Consolas, a monospace font The slide doesn’t use bullets but levels can be indented using the “Increase List Level” icon on the Home menu no smart quotes (“curly” = bad) ("straight" = good) we want it exactly as the developer will use it  <thing id="file.foo" src="file.foo" action="none" /> <thing src="file.foo" do cool thing/>

Section Break (relate these to the agenda)

Related sessions [session code] Name of session

Further reading and documentation
Name of further reading Link to MSDN Contact info – (optional)

thank you Feedback and questions http://forums.dev.windows.com
Session feedback

Patrick Dengler Senior Program Manager Microsoft Corporation

Similar presentations

Presentation on theme: "Patrick Dengler Senior Program Manager Microsoft Corporation"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Patrick Dengler Senior Program Manager Microsoft Corporation

Similar presentations

Presentation on theme: "Patrick Dengler Senior Program Manager Microsoft Corporation"— Presentation transcript:

Similar presentations

About project

Feedback