Skip to content
Browse files

Playground = new demo page

  • Loading branch information...
1 parent 0ddf2c2 commit 2860627da4859a78a995b66f232db44d0ecd16d1 Dave Shea committed Sep 6, 2010
Showing with 119 additions and 407 deletions.
  1. +119 −264 demo/index.html
  2. +0 −143 demo/playground.html
View
383 demo/index.html
@@ -1,288 +1,143 @@
<!doctype html>
<html>
<head>
- <title>PaintbrushJS v0.2 Demo Page</title>
+ <title>PaintbrushJS Playground</title>
<meta charset="utf-8" />
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/paintbrush-0.2.js"></script>
+ <script type="text/javascript" src="script/playground.js"></script>
- <link rel="stylesheet" type="text/css" href="css/light.css" />
+ <link rel="stylesheet" type="text/css" href="css/playground.css" />
</head>
<body>
- <h1><a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS</a> v0.2 Demo Page</h1>
+ <header>
+ <h1><a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS</a> Playground</h1>
+ <aside>
+ <span>by Dave Shea</span>
+ <a href="http://twitter.com/mezzoblue">@mezzoblue</a>
+ </aside>
+ </header>
- <ul class="odd">
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Original, default (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-sepia" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Sepia tone, default (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-greyscale" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Greyscale, default (img)</figcaption>
- </figure>
- </li>
- </ul>
- <ul>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-tint" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Tint, default (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-blur" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Blur, default (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-noise" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Noise, default (img)</figcaption>
- </figure>
- </li>
- </ul>
- <ul>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-posterize" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Posterize, default (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-mosaic" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Mosaic, default (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/lighthouse.jpg" class="filter-matrix" width="240" height="160" alt="Point Atkinson Lighthouse">
- <figcaption>Matrix, default (img)</figcaption>
- </figure>
- </li>
- </ul>
+ <a href="http://github.com/mezzoblue/PaintbrushJS" class="github">Fork me on GitHub</a>
+
+ <form action="#" method="post" id="interaction-form">
+ <div id="interaction">
+
+ <ul class="thumbnails">
+ <li class="thumb"><img src="images/500/lighthouse.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb"><img src="images/500/staples.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb current"><img src="images/500/bee.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb"><img src="images/500/leaves.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb"><img src="images/500/louvre.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb"><img src="images/500/sign.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb"><img src="images/500/road.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb"><img src="images/500/jordan.jpg" width="50" height="33" alt=""></li>
+ <li class="thumb"><img src="images/500/stones.jpg" width="50" height="33" alt=""></li>
+ </ul>
+
+ <img id="filter-target" src="images/500/bee.jpg" width="500" height="333" alt="">
+
+ <label class="selector">
+ Filter:
+ <select id="filter-selector"></select>
+ </label>
+
+ <div class="controls" id="controls-blur">
+ <label>
+ Amount:
+ <input type="range" name="data-pb-blur-amount" min="0" max="10" step="0.05" value="0">
+ </label>
+ </div>
+
+ <div class="controls" id="controls-greyscale">
+ <label>
+ Opacity:
+ <input type="range" name="data-pb-greyscale-opacity" min="0" max="1" step="0.01" value="1">
+ </label>
+ </div>
+ <div class="controls" id="controls-mosaic">
+ <label>
+ Opacity:
+ <input type="range" name="data-pb-mosaic-opacity" min="0" max="1" step="0.01" value="1">
+ </label>
+ <label>
+ Size:
+ <input type="range" name="data-pb-mosaic-size" min="1" max="40" step="1" value="5">
+ </label>
+ </div>
- <ul class="odd">
- <li>
- <div class="bee">
- <p>Original (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="bee filter-sepia"
- data-pb-sepia-opacity="0.5">
- <p>Sepia tone: Opacity 0.5 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="bee filter-greyscale"
- data-pb-greyscale-opacity="0.5">
- <p>Greyscale: Opacity 0.5 (CSS Background)</p>
- </div>
- </li>
- </ul>
- <ul>
- <li>
- <div class="bee filter-tint"
- data-pb-tint-opacity="0.2"
- data-pb-tint-color="#f0c">
- <p>Tint: Opacity 0.2, Color #FF00CC (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="bee filter-blur"
- data-pb-blur-amount="3">
- <p>Blur: Amount 3 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="bee filter-noise"
- data-pb-noise-amount="30"
- data-pb-noise-type="monochrome">
- <p>Noise: Amount 30, Type monochrome (CSS Background)</p>
- </div>
- </li>
- </ul>
- <ul>
- <li>
- <div class="bee filter-posterize"
- data-pb-posterize-amount="10"
- data-pb-posterize-opacity="0.8">
- <p>Posterize: Amount 10, Opacity 0.8 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="bee filter-mosaic"
- data-pb-mosaic-size="10"
- data-pb-mosaic-opacity="0.5">
- <p>Mosaic: Opacity 0.5, Size 10 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="bee filter-matrix">
- <p>Matrix: default (CSS Background)</p>
- </div>
- </li>
- </ul>
+ <div class="controls" id="controls-noise">
+ <label>
+ Amount:
+ <input type="range" name="data-pb-noise-amount" min="0" max="100" step="1" value="30">
+ </label>
+ <label>
+ Type:
+ <input type="radio" name="data-pb-noise-type" value="monochrome"> Mono
+ <input type="radio" name="data-pb-noise-type" value="colour"> Colour
+ </label>
+ </div>
+ <div class="controls" id="controls-posterize">
+ <label>
+ Amount:
+ <input type="range" name="data-pb-posterize-amount" min="2" max="100" step="1" value="5">
+ </label>
+ <label>
+ Opacity:
+ <input type="range" name="data-pb-posterize-opacity" min="0" max="1" step="0.01" value="1">
+ </label>
+ </div>
- <ul class="odd">
- <li>
- <figure>
- <img src="images/240/road.jpg" width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Original (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-sepia"
- data-pb-sepia-opacity="0.7"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Sepia tone: Opacity 0.7 (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-greyscale"
- data-pb-greyscale-opacity="0.8"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Greyscale: Opacity 0.8 (img)</figcaption>
- </figure>
- </li>
- </ul>
- <ul>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-tint"
- data-pb-tint-opacity="0.5"
- data-pb-tint-color="#009900"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Tint: Opacity 0.5, Color #090 (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-blur"
- data-pb-blur-amount="0.4"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Blur: Amount 0.4 (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-noise"
- data-pb-noise-amount="200"
- data-pb-noise-type="colour"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Noise: Amount 200, Type color (img)</figcaption>
- </figure>
- </li>
- </ul>
- <ul>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-posterize"
- data-pb-posterize-amount="3"
- data-pb-posterize-opacity="0.5"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Posterize: Amount 3, Opacity 0.5 (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-mosaic"
- data-pb-mosaic-size="3"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Mosaic: Size 3 (img)</figcaption>
- </figure>
- </li>
- <li>
- <figure>
- <img src="images/240/road.jpg" class="filter-matrix"
- width="240" height="160" alt="West Coast roads, New Zealand">
- <figcaption>Matrix: default (img)</figcaption>
- </figure>
- </li>
- </ul>
+ <div class="controls" id="controls-sepia">
+ <label>
+ Opacity:
+ <input type="range" name="data-pb-sepia-opacity" min="0" max="1" step="0.01" value="0.5">
+ </label>
+ </div>
+ <div class="controls" id="controls-tint">
+ <label>
+ Colour:
+ <input type="text" name="data-pb-tint-color" value="#FF0000">
+ </label>
+ <label>
+ Opacity:
+ <input type="range" name="data-pb-tint-opacity" min="0" max="1" step="0.01" value="0.5">
+ </label>
+ </div>
+
+ <button class="apply" type="submit">Apply</button>
- <ul class="odd">
- <li>
- <div class="stones">
- <p>Original (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="stones filter-sepia"
- data-pb-sepia-opacity="2">
- <p>Sepia tone: Opacity 2 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="stones filter-greyscale"
- data-pb-greyscale-opacity="-2">
- <p>Greyscale: Opacity -2 (saturation hack) (CSS Background)</p>
- </div>
- </li>
- </ul>
- <ul>
- <li>
- <div class="stones filter-tint"
- data-pb-tint-opacity="0.4"
- data-pb-tint-color="#06F">
- <p>Tint: Opacity 0.4, Color #06F (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="stones filter-blur"
- data-pb-blur-amount="10">
- <p>Blur: Amount 10 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="stones filter-noise"
- data-pb-noise-amount="150"
- data-pb-noise-type="mono">
- <p>Noise: Amount 150, Type mono (CSS Background)</p>
- </div>
- </li>
- </ul>
- <ul>
- <li>
- <div class="stones filter-posterize"
- data-pb-posterize-amount="8">
- <p>Posterize: Amount 8 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="stones filter-mosaic"
- data-pb-mosaic-size="15">
- <p>Mosaic: Size 15 (CSS Background)</p>
- </div>
- </li>
- <li>
- <div class="stones filter-matrix">
- <p>Matrix: default (CSS Background)</p>
- </div>
- </li>
- </ul>
+ </div>
+ </form>
- <p id="copyright">&copy; Copyright 2010, Dave Shea. <a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS lives on GitHub.</a> <a href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed.</a></p>
+ <section id="description">
+ <aside>
+ <a href="http://github.com/mezzoblue/PaintbrushJS/zipball/master">Download Now</a>
+ <p>PaintbrushJS v0.2</p>
+ </aside>
+
+ <p>PaintbrushJS is a lightweight browser-based image processing library built with Javascript and canvas. All photos by <a href="http://www.flickr.com/photos/mezzoblue/sets/72057594064508706/">Dave Shea</a>.</p>
+
+ <ul>
+ <li>Get the source code on GitHub: <a href="http://github.com/mezzoblue/PaintbrushJS">mezzoblue/PaintbrushJS</a></li>
+ <li>See <a href="http://wiki.github.com/mezzoblue/PaintbrushJS/documentation">usage &amp; documentation</a></li>
+ <li>There are some <a href="http://wiki.github.com/mezzoblue/PaintbrushJS/known-issues">known issues</a></li>
+ </ul>
+ </section>
+
+
+
+
+ <footer>
+ <p id="copyright">&copy; Copyright 2010, Dave Shea. <a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS lives on GitHub</a>. <a href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a>.</p>
+ </footer>
</body>
</html>
View
143 demo/playground.html
@@ -1,143 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <title>PaintbrushJS Playground</title>
- <meta charset="utf-8" />
-
- <script type="text/javascript" src="script/common.js"></script>
- <script type="text/javascript" src="script/paintbrush-0.2.js"></script>
- <script type="text/javascript" src="script/playground.js"></script>
-
- <link rel="stylesheet" type="text/css" href="css/playground.css" />
- </head>
- <body>
-
- <header>
- <h1><a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS</a> Playground</h1>
- <aside>
- <span>by Dave Shea</span>
- <a href="http://twitter.com/mezzoblue">@mezzoblue</a>
- </aside>
- </header>
-
- <a href="http://github.com/mezzoblue/PaintbrushJS" class="github">Fork me on GitHub</a>
-
- <form action="#" method="post" id="interaction-form">
- <div id="interaction">
-
- <ul class="thumbnails">
- <li class="thumb"><img src="images/500/lighthouse.jpg" width="50" height="33" alt=""></li>
- <li class="thumb"><img src="images/500/staples.jpg" width="50" height="33" alt=""></li>
- <li class="thumb current"><img src="images/500/bee.jpg" width="50" height="33" alt=""></li>
- <li class="thumb"><img src="images/500/leaves.jpg" width="50" height="33" alt=""></li>
- <li class="thumb"><img src="images/500/louvre.jpg" width="50" height="33" alt=""></li>
- <li class="thumb"><img src="images/500/sign.jpg" width="50" height="33" alt=""></li>
- <li class="thumb"><img src="images/500/road.jpg" width="50" height="33" alt=""></li>
- <li class="thumb"><img src="images/500/jordan.jpg" width="50" height="33" alt=""></li>
- <li class="thumb"><img src="images/500/stones.jpg" width="50" height="33" alt=""></li>
- </ul>
-
- <img id="filter-target" src="images/500/bee.jpg" width="500" height="333" alt="">
-
- <label class="selector">
- Filter:
- <select id="filter-selector"></select>
- </label>
-
- <div class="controls" id="controls-blur">
- <label>
- Amount:
- <input type="range" name="data-pb-blur-amount" min="0" max="10" step="0.05" value="0">
- </label>
- </div>
-
- <div class="controls" id="controls-greyscale">
- <label>
- Opacity:
- <input type="range" name="data-pb-greyscale-opacity" min="0" max="1" step="0.01" value="1">
- </label>
- </div>
-
- <div class="controls" id="controls-mosaic">
- <label>
- Opacity:
- <input type="range" name="data-pb-mosaic-opacity" min="0" max="1" step="0.01" value="1">
- </label>
- <label>
- Size:
- <input type="range" name="data-pb-mosaic-size" min="1" max="40" step="1" value="5">
- </label>
- </div>
-
- <div class="controls" id="controls-noise">
- <label>
- Amount:
- <input type="range" name="data-pb-noise-amount" min="0" max="100" step="1" value="30">
- </label>
- <label>
- Type:
- <input type="radio" name="data-pb-noise-type" value="monochrome"> Mono
- <input type="radio" name="data-pb-noise-type" value="colour"> Colour
- </label>
- </div>
-
- <div class="controls" id="controls-posterize">
- <label>
- Amount:
- <input type="range" name="data-pb-posterize-amount" min="2" max="100" step="1" value="5">
- </label>
- <label>
- Opacity:
- <input type="range" name="data-pb-posterize-opacity" min="0" max="1" step="0.01" value="1">
- </label>
- </div>
-
- <div class="controls" id="controls-sepia">
- <label>
- Opacity:
- <input type="range" name="data-pb-sepia-opacity" min="0" max="1" step="0.01" value="0.5">
- </label>
- </div>
-
- <div class="controls" id="controls-tint">
- <label>
- Colour:
- <input type="text" name="data-pb-tint-color" value="#FF0000">
- </label>
- <label>
- Opacity:
- <input type="range" name="data-pb-tint-opacity" min="0" max="1" step="0.01" value="0.5">
- </label>
- </div>
-
- <button class="apply" type="submit">Apply</button>
-
- </div>
- </form>
-
-
-
- <section id="description">
- <aside>
- <a href="http://github.com/mezzoblue/PaintbrushJS/zipball/master">Download Now</a>
- <p>PaintbrushJS v0.2</p>
- </aside>
-
- <p>PaintbrushJS is a lightweight browser-based image processing library built with Javascript and canvas. All photos by <a href="http://www.flickr.com/photos/mezzoblue/sets/72057594064508706/">Dave Shea</a>.</p>
-
- <ul>
- <li>Get the source code on GitHub: <a href="http://github.com/mezzoblue/PaintbrushJS">mezzoblue/PaintbrushJS</a></li>
- <li>See <a href="http://wiki.github.com/mezzoblue/PaintbrushJS/documentation">usage &amp; documentation</a></li>
- <li>There are some <a href="http://wiki.github.com/mezzoblue/PaintbrushJS/known-issues">known issues</a></li>
- </ul>
- </section>
-
-
-
-
- <footer>
- <p id="copyright">&copy; Copyright 2010, Dave Shea. <a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS lives on GitHub</a>. <a href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a>.</p>
- </footer>
-
- </body>
-</html>

0 comments on commit 2860627

Please sign in to comment.
Something went wrong with that request. Please try again.