Thoughts on the web, web design and film photography…
Posts tagged canvas
HTML5 Slide Decks & Presentation Timer
2September 21, 2011
A couple of folks at GDD and other events have asked what I use to create my slide decks, and I figured I’d share and add a link to a little plug in that I wrote for the slide decks.
My slide decks are based on HTML5Slides, the Google HTML5 Slide Template – it’s the same one that was used at Google IO, generally by the Chrome DevRel team and lots of other folks. It’s freely available for anyone to use, modify, fork, whatever you want, and creating the content for it is pretty easy. One of my favorite things about using the HTML5Slides as my presentation software is that I can embed my demos straight into the slides and when you want to understand what’s going on, you can simply view source!
There are a couple of things that I think this framework is missing though. There isn’t a way to do a presenter view and an audience view (not always necessary, but sometimes helpful to make sure you don’t forget any of the important points you want to hit). There wasn’t an easy way to add fades when doing builds, but most importantly for me, it doesn’t have any kind of timer. I love to talk, and can easily lose track of time when on stage.
Creating a presentation timer
This weekend, while on the flight from Brazil to Argentina, I build a little timer plug in that would help better keep track of time. I wanted it to do three things:
- Tell me how many minutes until the official start time of my presentation
- Tell me how many minutes left until I was supposed to be done
- Tell me when I was done, and how many minutes over I was
Inserting a canvas element
Let’s jump right into the code! When the timer starts, it inserts a <canvas> element at the beginning of the <body> element with insertAdjacentHTML. The canvas element is going to draw our clock face and display the number of minutes left.
var insertElement = function() {
var body = document.getElementsByTagName("body")[0];
body.insertAdjacentHTML("afterbegin",
'<canvas id="cClock" width="30" height="30"></canvas>');
}
Make it look pretty, and subtle
Since I wanted things to be very subtle and configurable, I used CSS to set the position to the upper left corner, and set the opacity to 0.25 to it mostly invisible so that I’ll likely be the only one who notices it. I also created a hover pseudo element so that I can hover over the element if I need to. Finally, I added a hidden class so that the element is completely invisible if the presentation ended a long time ago.
#cClock {
position: fixed;
top: 0px;
left: 0px;
opacity: 0.25;
z-index: 1000;
}
#cClock:hover { opacity: 1.0; }
#cClock.hidden { display: none; }
Refreshing the clock
When I start the clock, it uses a setTimeout to fire at a specific interval. I decided to use setTimeout instead of setInterval because I wanted to be able to dynamically change the amount of time between refreshes, depending on where in the presentation I was. If I was close to either the start time or end time, I want the clock to update more often, where as in the middle, it can fire every minute.
Drawing the clock
Getting the clock to draw in the way I wanted took a little bit of tinkering.
var drawClock = function(min, color) {
var canvas = document.getElementById("cClock");
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,30,30);
ctx.lineWidth = 3;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.arc(15, 15, 10, toRadians(-90), toRadians((((min-60)/60)*360)-90), true);
ctx.stroke();
ctx.fillStyle = color;
ctx.font="10px sans-serif"
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(min, 15, 15);
}
Math is hard, let’s go shopping!*
drawClock(min, color) grabs the <canvas> element, and uses clearRect() to erase everything in the box. I then set the line width and color and start the drawing the circle with beginPath() and arc(). Let’s quickly start at the end, the “true” tells arc to draw the circle counterclockwise. Then, the first three parameters tell the arc to put the center at 15, 15 with a radius of 10px. The next two parameters are the angles to start drawing the circle at in radians. If you remember high school algebra (which I don’t), 0 in radians on a circle would be equivalent of 3pm on a clock, so to figure out where the top is, we need to rotate -90 degrees and then convert to radians with toRadians(-90).
To calculate the second arc position, we need to convert everything to radians again, but we also need to figure out the angle in degrees. Since I wanted the circle to become more complete the closer the time gets to zero, I started by taking the minutes and subtracting 60. Next, I needed to figure out where (in degrees) the minutes would be, to do that, I divided by 60 to get a percentage and multiplied by 360 to get the degrees along the circle.
For example to figure out where the circle should end if the minutes were 15:
toRadians((((15 – 60) / 60) * 360) – 90)
-45 / 60 = -0.75 — The arc line should continue three quarters of the way around
-0.75 * 360 = -270 — The angle in degrees that the arc should draw to
-270 – 90 = -360 — The angle in radians, and remember my comment earlier that 0 (or 360) would be at the 3 o’clock position.
Phew! When coding this up, that was the hardest part for me. I’m not exactly the biggest math fan! 
Next I called .stroke() to draw the circle, and sure enough – the circle appears! Finally, I wanted to show the number of minutes left in the center of the circle. I did that by using fillText(). To get things to fit in the circle perfectly centered, I aligned everything middle and center, and with fillText, set the base point to 15, 15 – the center of the box.
Getting the countdown timer on screen
Finally – to create an instance of the clock in a presentation, I created a JSON config object that contained the start time, and a length and a warning time, and then created an instance of the timer.
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript">
window.timerConfig = window.timerConfig || {
settings : {
date: new Date('Sept 19 2011 16:30'),
minutes: 45,
warnAt: 10
}
};
var t = PresentationTimer();
t.start()
</script>
In action
I’ve iframed the timer into the window below, or you can try it here. It creates a new instance of the timer, and sets the start time to be two minutes from now, with a length of 2 minutes and a warning at 1 minute. I also made a small change to the CSS so that it’s less transparent and you can see it better.
Summary
You can see the entire timer.js file in GitHub, or even grab the whole project.. I really want to integrate this into the HTML5Slides template at some point, because I think it’s pretty useful. Feel free to grab it, use it, fork it, what ever works for you!
*Math is hard, let’s go shopping is one of my favorite Simpsons quotes.
Tips & Tricks: Cheat Sheets For Web People
2July 14, 2010
by Pete
in Web Design & Development
I have a set of blogs that I read every day, some are really technical, and I learn lots, and others are more inspirational, they show me the cool stuff that we as web designers and web developers can build.
I’ll admit that one of the blogs I read has the educational value of something you’d pick up at a grocery store check out, the pictures are really pretty, and it’s good inspiration, but I’d never actually walk out of the store with it. Well today, they posted an article that changed my mind. Almost! One of today’s posts was a collection of cheat sheets for web designers and developers, and I wanted to share my favorites.
HTML4 and HTML5 Cheat Sheets
HTML5 Visual Cheat Sheet from http://woorkup.com/
I think came in as my favorite and prettiest cheat sheet. It prints on an 11×17 piece of paper, and is a great reference for all of the HTML4 and HTML5 tags that you’ll ever need to reference. It nicely includes the attributes that you can set, what version of the HTML spec they’re from and lots more useful information.
HTML5 Reference Guide from http://veign.com/
The Veign folks go into a lot more detail on their cheat sheet, or more accurately, cheat sheets because this guy is 4 pages long. One of the things I like about this one was that it goes in to much further depth about the attributes, supported HTML versions (indicating elements that aren’t supported in HTML5 with a highlight), and a very brief description of the element.
HTML Character Entity Reference from http://addedbytes.com/
I’ve often found myself forgetting what the special character sequence is to get a particular character to show up, or I’ll be looking for a character to use in my breadcrumb navigation – this cheat sheet solves that and lists all of the characters and their sequence to get exactly what you want!
Canvas Cheat Sheet from http://blog.nihilogic.dk
Canvas is one of those things that’s super new to a lot of folks, so having a handy cheat sheet is really useful! It’s not going to be super-useful for beginners since it’s basically just the API reference, but once you have a pretty good handle on Canvas, this will be a great desk reference until it gets cemented in your brain.
CSS2 and CSS3 Cheat Sheets
CSS2 Reference from http://veign.com
Those folks over at Veign are pretty good at putting together a reference sheet, maybe not as pretty as some of the other ones, but just as functional and makes my life easier, so I’m not complaining! Their CSS2 reference is great and provides all the detail you’ll need if you need to look something up quickly!
CSS3 Reference from http://veign.com
The CSS3 reference isn’t quite as awesome as the HTML5 reference, because they don’t tell you what properties are CSS3 vs CSS2, so if you’re having to code for multiple browsers like most folks, you may accidentally add something and then scratch your head as to why it’s not working in an older browser.
Other Useful Cheat Sheets
JavaScript Cheat Sheet from http://addedbytes.com
For whatever reason, JavaScript and I don’t get along, I think it’s because I like strongly typed languages that tell me if I’ve done something wrong before it gets there. If you’re building websites and not using a tool that doesn’t have intellisense, then having a cheat sheet like this would be super valuable. All the APIs you’ll need, right at your fingertips!
SEO Cheat Sheet from http://www.seomoz.org
A week or so ago, I posted my tips and tricks for ensuring your site was best optimized to make it into search engines efficiently. Here’s another great easy to follow cheat sheet that will help you make the best of the time and resources that you have on getting your site optimized. It’s a great resource to look over and share with co-workers or friends when they ask why you’re doing something!
Summary
There you go, those are the quick reference guides that are now printed and sitting on my bulletin board beside my desk at work! Hopefully you’ll find a good nugget or two in there as well! If you’ve got other good references or cheat sheets, be sure to share them with me!
A Quick Intro: Canvas in IE9
1June 24, 2010
Yesterday, with the release of Internet Explorer 9 Platform Preview 3, the engineering team announced support for hardware accelerated <canvas>! The <canvas> element is a part of the HTML5 Standards specification and allows for dynamic scriptable rendering of 2D graphics. To use it, you put a simple <canvas> element in your HTML, which defines the drawing area, then through JavaScript, you can get the 2d context and begin dynamically drawing within that region.
Much like SVG, you can draw on the page using basic shapes, but you can also easily include rasterized images, videos and other objects. But unlike SVG, when you draw on the page, the browser doesn’t remember any of the “drawings”. With SVG, the “drawings” just become elements in the DOM and you can script them, change them, basically treat them like any other element. Canvas on the other hand, doesn’t remember the state of the “drawings” so you can’t change them as easily.
Quick Code Sample
<canvas id="myCanvas" width="200" height="200"
style="border: 1px solid black;">
Your browser doesn’t support Canvas, sorry.
</canvas>
var canvasElement = document.getElementById("myCanvas");
if (canvasElement.getContext) {
// The Context exists, so we know we have a canvas element
// we can work with.
var context = canvasElement.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
}
else {
// There is no Context, so we can't do anything.
// Put fall back code here.
}
Results in…
The More Exciting Stuff…
Okay, so I can draw a little red box on a page, woop-de-doo right! This is when I recommend you check out the IETestDrive.com website where the truly cool demos are. Be sure when you’re looking at these demos that you take a minute to look at the source code as well – it’s pretty interesting to see how few lines of HTML are required, and in many cases how few lines of JavaScript as well!
- Amazon Shelf – A visualization of Amazon’s top books and a way to read a bit more into them
- FishIE Tank – Remember the Windows 7 beta fish, he’s back!
- Mr. Potato Gun – Mr. Potato plus what looks like an air canon is never good for Mr. Potato!
- Asteroid Belt – be sure to look at the HTML for this one, there really isn’t any!
- DeemZoom – this is truly making web apps native!
- Canvas Pad – An interactive canvas drawing app
Enjoy!
PEte