Announcements ! Weather App due Friday night ! Midterm a week from Wds ! Open book, open notes ECS 89 ! Topics: HTML, CSS, Javascript, Objects, JSONp, SVG ! Today: ! SVG graphics ! CSS " Backgrounds, gradients " Controlling CSS with events " Hover, swipe 4/25 SVG – Scalable Vector Graphics How? SVG is a program ! Zoom in and they still look sharp – you don’t see ! An SVG image defines the picture pixels appearing by a program, not as a collection of pixels. scalable ! Let’s try opening the svg file rain_icon.svg and reading the code. ! You can’t do that with a jpg or not png; they’re just a big array of scalable pixels, usually with some kind of ! Why is this good? compression. Things to notice in the raindrop Drawing ! First, set up an svg element/object. This is like the ! Image was made with Sketch, a Mac app popular scrap of paper on which you can draw. with designers - https://www.sketchapp.com/ (0,0) ! Hence, it is not the simplest way to draw the raindrop…so don’t look too closely at this code! ! But notice: it is an XML format similar to HTML, with tags ! Raindrop is a path element, consisting of a moveto step (positioning the cursor initially) indicated by M, and then four curves, each indicated by a C ! (0,0) is at upper left corner; y-values increase down. 1 To make the SVG element… Design target <svg width="100" height=”50”> … </svg> ! From Lillian’s design ! Tags like this can go in your HTML file and contain ! Idea: use SVG to design special “submit” button at SVG drawing commands right of text box ! OR, you can add or subtract SVG elements from the ! Also, add SVG to put magnifying glass icon at right DOM with Javascript ! Other approaches? ! OR, you can include an SVG file (like the raindrop) as an image, in the normal way Drawing the end shape Drawing the shape ! First, make an SVG element. The element itself is <path id="rightEnd" transparent, but we can draw into it. d="M 0 0 // start position within SVG ! Inside the SVG tag, add graphics tags - they only l 50 0 // line move 50 in x direction, 0 y work inside an SVG element! a 25 25 0 0 1 0 50 // circular arc down 50 ! They have to be closed with “/>”, unlike other self- l -50 0 // line back 50 in x closing tags z" /> // z means close up the shape ! Define a path to make shape – straight, around, straight, close Write the SVG text over the shape Give the end-shape an onclick <text x="5" y="30" >submit</text> ! You can add an “onclick” function to just about anything ! x and y position give lower left corner of text within ! Here we give the SVG element an onclick function, the SVG element which turns it into a funny-shaped button ! Font inherited from body? ! Right now it pops up an alert - what should it really do? ! Style everything with CSS – eg. choose colors! ! Make the text box and end-shape the same height, and get them to butt up against each other ! Put them both into a div and float it right 2 Gradients - from W3Schools Background image background: red; /*For browsers that do not support gradients* background-image: url("Background_Homepage.svg") background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, yellow); /* Opera 11.1 to ! Just give it the image 12.0 */ ! Image should be large enough to cover the whole background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 to background 15 */ ! Can also “tile” small images to get repeating background: linear-gradient(red, yellow); /*Standard syntax*/ patterns. I love this kind of thing but it is not popular with designers. ! Not totally standard yet! So using lots of browser- specific versions Other interaction events Alternatives ! Hover: behavior when the cursor is on the element. ! There are often multiple ways to get things done. Specified in the CSS: ! There are several Javascript/CSS libraries for layout, including Boostrap, Flex and Foundation. svg#rightEnd:hover { fill: #779944;} ! Use them if you know them, but keep in mind that the midterm will include questions on layout using just CSS. ! Touch/swipe: works on cell phones and tablets. Fairly new. We won’t go into it, but a few years from now it will be standard. Canvas instead of SVG CORS instead of JSONp ! Alternative to SVG: HTML5 Canvas element ! The technique we’ve been using, retrieving JSON ! a different drawing interface supported by most data in a script, is called JSONp browsers ! It is a little clunky ! a little easier to work with in Javascript ! A newer alternative is called CORS; it allows ! Not scalable somewhat more flexibility but it is not supported by ! Not that different many older browsers ! We’ll use SVG with the D3 animation API later, so it’s good to work with it now. 3 .