Skip to content
Permalink
Browse files

Fix clock and blue-robot demos

- #468 pointed out that the clock demos were kind of confused as to which filenames they were using. This is now fixed.
- The blue robot demo was missing some files, and had a useless base URL. This fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=28200.
  • Loading branch information...
domenic authored and annevk committed Jan 5, 2016
1 parent 62bb233 commit 65f3300790d89b2b440993ca5ebc2c6bc23e9293
@@ -8,6 +8,9 @@ indent_size = 2
indent_style = space
trim_trailing_whitespace = true

[demos/**]
insert_final_newline = false

[source]
indent_size = 1
max_line_length = 100
Binary file not shown.
@@ -0,0 +1,187 @@
<!DOCTYPE HTML>
<title>Blue Robot Demo</title>
<style>
html { overflow: hidden; min-height: 200px; min-width: 380px; }
body { height: 200px; position: relative; margin: 8px; }
.buttons { position: absolute; bottom: 0px; left: 0px; margin: 4px; }
</style>
<canvas width="380" height="200"></canvas>
<script>
var Landscape = function (context, width, height) {
this.offset = 0;
this.width = width;
this.advance = function (dx) {
this.offset += dx;
};
this.horizon = height * 0.7;
// This creates the sky gradient (from a darker blue to white at the bottom)
this.sky = context.createLinearGradient(0, 0, 0, this.horizon);
this.sky.addColorStop(0.0, 'rgb(55,121,179)');
this.sky.addColorStop(0.7, 'rgb(121,194,245)');
this.sky.addColorStop(1.0, 'rgb(164,200,214)');
// this creates the grass gradient (from a darker green to a lighter green)
this.earth = context.createLinearGradient(0, this.horizon, 0, height);
this.earth.addColorStop(0.0, 'rgb(81,140,20)');
this.earth.addColorStop(1.0, 'rgb(123,177,57)');
this.paintBackground = function (context, width, height) {
// first, paint the sky and grass rectangles
context.fillStyle = this.sky;
context.fillRect(0, 0, width, this.horizon);
context.fillStyle = this.earth;
context.fillRect(0, this.horizon, width, height-this.horizon);
// then, draw the cloudy banner
// we make it cloudy by having the draw text off the top of the
// canvas, and just having the blurred shadow shown on the canvas
context.save();
context.translate(width-((this.offset+(this.width*3.2)) % (this.width*4.0))+0, 0);
context.shadowColor = 'white';
context.shadowOffsetY = 30+this.horizon/3; // offset down on canvas
context.shadowBlur = '5';
context.fillStyle = 'white';
context.textAlign = 'left';
context.textBaseline = 'top';
context.font = '20px sans-serif';
context.fillText('WHATWG ROCKS', 10, -30); // text up above canvas
context.restore();
// then, draw the background tree
context.save();
context.translate(width-((this.offset+(this.width*0.2)) % (this.width*1.5))+30, 0);
context.beginPath();
context.fillStyle = 'rgb(143,89,2)';
context.lineStyle = 'rgb(10,10,10)';
context.lineWidth = 2;
context.rect(0, this.horizon+5, 10, -50); // trunk
context.fill();
context.stroke();
context.beginPath();
context.fillStyle = 'rgb(78,154,6)';
context.arc(5, this.horizon-60, 30, 0, Math.PI*2); // leaves
context.fill();
context.stroke();
context.restore();
};
this.paintForeground = function (context, width, height) {
// draw the box that goes in front
context.save();
context.translate(width-((this.offset+(this.width*0.7)) % (this.width*1.1))+0, 0);
context.beginPath();
context.rect(0, this.horizon - 5, 25, 25);
context.fillStyle = 'rgb(220,154,94)';
context.lineStyle = 'rgb(10,10,10)';
context.lineWidth = 2;
context.fill();
context.stroke();
context.restore();
};
};
</script>
<script>
var BlueRobot = function () {
this.sprites = new Image();
this.sprites.src = 'blue-robot.png'; // this sprite sheet has 8 cells
this.targetMode = 'idle';
this.walk = function () {
this.targetMode = 'walk';
};
this.stop = function () {
this.targetMode = 'idle';
};
this.frameIndex = {
'idle': [0], // first cell is the idle frame
'walk': [1,2,3,4,5,6], // the walking animation is cells 1-6
'stop': [7], // last cell is the stopping animation
};
this.mode = 'idle';
this.frame = 0; // index into frameIndex
this.tick = function () {
// this advances the frame and the robot
// the return value is how many pixels the robot has moved
this.frame += 1;
if (this.frame >= this.frameIndex[this.mode].length) {
// we've reached the end of this animation cycle
this.frame = 0;
if (this.mode != this.targetMode) {
// switch to next cycle
if (this.mode == 'walk') {
// we need to stop walking before we decide what to do next
this.mode = 'stop';
} else if (this.mode == 'stop') {
if (this.targetMode == 'walk')
this.mode = 'walk';
else
this.mode = 'idle';
} else if (this.mode == 'idle') {
if (this.targetMode == 'walk')
this.mode = 'walk';
}
}
}
if (this.mode == 'walk')
return 8;
return 0;
},
this.paint = function (context, x, y) {
if (!this.sprites.complete) return;
// draw the right frame out of the sprite sheet onto the canvas
// we assume each frame is as high as the sprite sheet
// the x,y coordinates give the position of the bottom center of the sprite
context.drawImage(this.sprites,
this.frameIndex[this.mode][this.frame] * this.sprites.height, 0, this.sprites.height, this.sprites.height,
x-this.sprites.height/2, y-this.sprites.height, this.sprites.height, this.sprites.height);
};
};
</script>
<script>
var animating = false;
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var landscape = new Landscape(context, canvas.width, canvas.height);
var blueRobot = new BlueRobot();
// paint when the browser wants us to, using requestAnimationFrame()
function paint() {
context.clearRect(0, 0, canvas.width, canvas.height);
landscape.paintBackground(context, canvas.width, canvas.height);
blueRobot.paint(context, canvas.width/2, landscape.horizon*1.1);
landscape.paintForeground(context, canvas.width, canvas.height);
if (animating)
requestAnimationFrame(paint);
}
var interval = null;
var cancelingTimeout = null;
function startAnim() {
if (cancelingTimeout) {
clearTimeout(cancelingTimeout);
cancelingTimeout = null;
}
if (!animating) {
animating = true;
paint();
// but tick every 150ms, so that we don't slow down when we don't paint
interval = setInterval(function () {
var dx = blueRobot.tick();
landscape.advance(dx);
}, 100);
}
}
function stopAnim() {
if (cancelingTimeout) return;
cancelingTimeout = setTimeout(function () {
cancelingTimeout = null;
if (animating) {
clearInterval(interval);
animating = false;
}
}, 1000);
}
paint();
blueRobot.sprites.onload = paint;
</script>
<p class="buttons">
<input type=button value="Walk" onclick="blueRobot.walk(); startAnim();">
<input type=button value="Stop" onclick="blueRobot.stop(); stopAnim();">
<footer>
<small> Blue Robot Player Sprite by <a href="https://johncolburn.deviantart.com/">JohnColburn</a>.
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</small>
<small> This work is itself licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">Creative
Commons Attribution-ShareAlike 3.0 Unported License</a>.</small>
</footer>
@@ -1,6 +1,5 @@
<!DOCTYPE HTML>
<title>Blue Robot Demo</title>
<base href="https://www.whatwg.org/demos/canvas/blue-robot/">
<style>
html { overflow: hidden; min-height: 200px; min-width: 380px; }
body { height: 200px; position: relative; margin: 8px; }
@@ -43,7 +42,7 @@
context.textBaseline = 'top';
context.font = '20px sans-serif';
context.fillText('WHATWG ROCKS', 10, -30); // text up above canvas
context.restore();
context.restore();
// then, draw the background tree
context.save();
context.translate(width-((this.offset+(this.width*0.2)) % (this.width*1.5))+30, 0);
@@ -156,8 +155,8 @@
<input type=button value="Walk" onclick="blueRobot.walk()">
<input type=button value="Stop" onclick="blueRobot.stop()">
<footer>
<small> Blue Robot Player Sprite by <a href="http://johncolburn.deviantart.com/">JohnColburn</a>.
<small> Blue Robot Player Sprite by <a href="https://johncolburn.deviantart.com/">JohnColburn</a>.
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</small>
<small> This work is itself licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative
<small> This work is itself licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">Creative
Commons Attribution-ShareAlike 3.0 Unported License</a>.</small>
</footer>
@@ -1,4 +1,4 @@
CACHE MANIFEST
clock.html
clock2.html
clock.css
clock.js
File renamed without changes.
File renamed without changes.
@@ -1,4 +1,4 @@
<!-- clock.html -->
<!-- clock1.html -->
<!DOCTYPE HTML>
<html>
<head>
@@ -1,4 +1,4 @@
<!-- clock.html -->
<!-- clock2.html -->
<!DOCTYPE HTML>
<html manifest="clock.appcache">
<head>
37 source
@@ -72179,7 +72179,7 @@ END:VCARD</pre>
&lt;figcaption>
&lt;p>&lt;cite <strong>itemprop="title"</strong>>My Pond&lt;/cite>&lt;/p>
&lt;p>&lt;small>Licensed under the &lt;a <strong>itemprop="license"</strong>
href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative
href="https://creativecommons.org/licenses/by-sa/3.0/us/">Creative
Commons Attribution-Share Alike 3.0 United States License&lt;/a>
and the &lt;a <strong>itemprop="license"</strong>
href="http://www.opensource.org/licenses/mit-license.php">MIT
@@ -83226,23 +83226,23 @@ dictionary <dfn>PageTransitionEventInit</dfn> : <span>EventInit</span> {
of the files for use offline.</p>

<p>To illustrate this, consider a simple clock applet consisting of an HTML page "<code
data-x="">clock.html</code>", a CSS style sheet "<code data-x="">clock.css</code>", and a JavaScript
script "<code data-x="">clock.js</code>".</p>
data-x="">clock1.html</code>", a CSS style sheet "<code data-x="">clock.css</code>", and a
JavaScript script "<code data-x="">clock.js</code>".</p>

<p>Before adding the manifest, these three files might look like this:</p>

<pre>EXAMPLE offline/clock/clock1.html</pre>
<pre>EXAMPLE offline/clock/clock1.css</pre>
<pre>EXAMPLE offline/clock/clock1.js</pre>
<pre>EXAMPLE offline/clock/clock.css</pre>
<pre>EXAMPLE offline/clock/clock.js</pre>

<p>If the user tries to open the "<code data-x="">clock.html</code>" page while offline, though,
<p>If the user tries to open the "<code data-x="">clock1.html</code>" page while offline, though,
the user agent (unless it happens to have it still in the local cache) will fail with an
error.</p>

<p>The author can instead provide a manifest of the three files, say "<code
data-x="">clock.appcache</code>":</p>

<pre>EXAMPLE offline/clock/clock2.appcache</pre>
<pre>EXAMPLE offline/clock/clock.appcache</pre>

<p>With a small change to the HTML file, the manifest (served as <code>text/cache-manifest</code>)
is linked to the application:</p>
@@ -83261,7 +83261,7 @@ dictionary <dfn>PageTransitionEventInit</dfn> : <span>EventInit</span> {
overridden by manifests. Thus, pages will not expire from an application cache before the user
agent has updated it, and even applications served over TLS can be made to work offline.</p>

<p><a href="/demos/offline/clock/live-demo/clock.html">View this example online</a>.</p>
<p><a href="/demos/offline/clock/clock2.html">View this example online</a>.</p>



@@ -117978,6 +117978,7 @@ INSERT INTERFACES HERE
Justin Sinclair,
Ka-Sing Chou,
Kai Hendry,
Kamishetty Sreeja,
&#x5442;&#x5eb7;&#x8c6a; (KangHao Lu)<!-- Kenny, kennyluck-->,
Karl Dubost,
Karl Tomlinson,
@@ -118352,38 +118353,38 @@ INSERT INTERFACES HERE
<div w-nodev>
<div itemscope itemtype="http://n.whatwg.org/work">
<p>The image in the introduction is based on <a itemprop="work" href="http://www.flickr.com/photos/wonderlane/2986252088/">a photo</a>
by <a itemprop="http://creativecommons.org/ns#attributionURL" href="http://www.flickr.com/photos/wonderlane/">Wonderlane</a>.
(<a itemprop="license" href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)
by <a itemprop="https://creativecommons.org/ns#attributionURL" href="http://www.flickr.com/photos/wonderlane/">Wonderlane</a>.
(<a itemprop="license" href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)
</div>
</div>

<div itemscope itemtype="http://n.whatwg.org/work">
<p>The image of two cute kittens in a basket used in the context menu example is based on
<a itemprop="work" href="http://www.flickr.com/photos/digidreamgrafix/8370087640/">a photo</a>
by <a itemprop="http://creativecommons.org/ns#attributionURL" href="http://www.flickr.com/photos/digidreamgrafix/">Alex G</a>.
(<a itemprop="license" href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)
by <a itemprop="https://creativecommons.org/ns#attributionURL" href="http://www.flickr.com/photos/digidreamgrafix/">Alex G</a>.
(<a itemprop="license" href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)
</div>

<div itemscope itemtype="http://n.whatwg.org/work">
<p>The Blue Robot Player sprite used in the canvas demo is based on
<a itemprop="work" href="http://johncolburn.deviantart.com/art/Blue-Robot-Player-Sprite-323813997">a work</a> by
<a itemprop="http://creativecommons.org/ns#attributionURL" href="http://johncolburn.deviantart.com/">JohnColburn</a>.
(<a itemprop="license" href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>)</p>
<a itemprop="work" href="https://johncolburn.deviantart.com/art/Blue-Robot-Player-Sprite-323813997">a work</a> by
<a itemprop="https://creativecommons.org/ns#attributionURL" href="http://johncolburn.deviantart.com/">JohnColburn</a>.
(<a itemprop="license" href="https://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>)</p>
</div>

<div itemscope itemtype="http://n.whatwg.org/work">
<p>The photograph of robot 148 climbing the tower at the FIRST Robotics Competition 2013 Silicon Valley Regional is based on
<a itemprop="work" href="http://www.flickr.com/photos/lenore-m/8631391979/">a work</a> by
<a itemprop="http://creativecommons.org/ns#attributionURL" href="http://www.flickr.com/photos/lenore-m/">Lenore Edman</a>.
(<a itemprop="license" href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)</p>
<a itemprop="https://creativecommons.org/ns#attributionURL" href="http://www.flickr.com/photos/lenore-m/">Lenore Edman</a>.
(<a itemprop="license" href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)</p>
</div>

<div itemscope itemtype="http://n.whatwg.org/work">
<p>The diagram showing how <code data-x="attr-script-async">async</code> and <code
data-x="attr-script-defer">defer</code> impact <code>script</code> loading is based on a
similar diagram from <a itemprop="work"
href="http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/">a
blog post</a> by <a itemprop="http://creativecommons.org/ns#attributionURL"
blog post</a> by <a itemprop="https://creativecommons.org/ns#attributionURL"
href="http://peter.sh/about/">Peter Beverloo</a>.
(<a itemprop="license" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0</a>)</p>
</div>

0 comments on commit 65f3300

Please sign in to comment.
You can’t perform that action at this time.