Permalink
Browse files

Adding syntax/usage demo

  • Loading branch information...
1 parent 799bcd0 commit ab235655cfcffed85c016b5eafdead7e5c54a27e Dave Shea committed Sep 13, 2010
Showing with 158 additions and 3 deletions.
  1. +50 −3 demo/css/playground.css
  2. +108 −0 demo/usage.html
View
@@ -30,14 +30,25 @@ body {
background-repeat: repeat-x, repeat;
background-position: 50% 0, 50% 0;
}
-
+h2 {
+ font-size: 14px;
+ font-weight: normal;
+ background: rgba(0, 0, 0, 0.08);
+ text-shadow: rgba(0, 0, 0, 0.05) 1px 1px 2px;
+ padding: 3px 12px 5px 12px;
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ border-radius: 12px;
+ border-top: solid 1px rgba(0, 0, 0, 0.1);
+ border-bottom: solid 1px rgba(255, 255, 255, 0.05);
+ margin: 0;
+}
input[type=range], input[type=text] {
width: 100px;
}
input[type=radio] {
margin: 0 0 0 10px;
}
-
p {
line-height: 1.83333;
}
@@ -144,7 +155,7 @@ header aside {
margin-right: 0;
}
-#interaction {
+#interaction, #examples {
width: 525px;
padding: 27px 30px 57px 30px;
margin: 0 auto 30px auto;
@@ -155,13 +166,49 @@ header aside {
-moz-border-radius: 6px;
border-radius: 6px;
position: relative;
+ overflow: hidden;
}
+ #examples {
+ padding-bottom: 0;
+ }
#filter-target {
border: solid 12px #fff;
-webkit-box-shadow: #000 0 5px 32px;
-moz-box-shadow: #000 0 5px 32px;
box-shadow: #000 0 5px 32px;
}
+#examples h2 {
+ float: left;
+}
+#examples textarea {
+ width: 262px;
+ height: 104px;
+ padding: 4px;
+ margin-top: 10px;
+ margin-bottom: 30px;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ border: none;
+ font-size: 12px;
+ line-height: 1.5;
+ color: #949cac;
+ text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0;
+ background: rgba(255, 255, 255, 0.02);
+ border-top: solid 1px rgba(0, 0, 0, 0.15);
+ border-bottom: solid 1px rgba(255, 255, 255, 0.05);
+}
+.filtered {
+ display: block;
+ clear: left;
+ float: left;
+ border: solid 8px #fff;
+ margin-bottom: 30px;
+ margin-right: 30px;
+ -webkit-box-shadow: #000 0 2px 16px;
+ -moz-box-shadow: #000 0 2px 16px;
+ box-shadow: #000 0 2px 16px;
+}
.selector {
display: block;
position: absolute;
View
@@ -0,0 +1,108 @@
+<!doctype html>
+<html>
+ <head>
+ <title>PaintbrushJS Playground &#8212; Example Usage</title>
+ <meta charset="utf-8" />
+
+ <script type="text/javascript" src="script/common.js"></script>
+ <script type="text/javascript" src="script/paintbrush.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>
+
+ <div id="examples">
+
+ <img class="filtered filter-blur" src="images/500/bee.jpg" width="200" height="133" alt="">
+ <h2>Basic Blur</h2>
+ <textarea>&lt;img src="bee.jpg"
+ width="200" height="133"
+ class="filter-blur"&gt;</textarea>
+
+ <img class="filtered filter-blur" data-pb-blur-amount="5" src="images/500/jordan.jpg" width="200" height="133" alt="">
+ <h2>Blur Value 5</h2>
+ <textarea>&lt;img src="jordan.jpg"
+ width="200" height="133"
+ class="filter-blur"
+ data-pb-blur-amount="5"&gt;</textarea>
+
+ <img class="filtered filter-greyscale" src="images/500/sign.jpg" width="200" height="133" alt="">
+ <h2>Basic Greyscale</h2>
+ <textarea>&lt;img src="leaves.jpg"
+ width="200" height="133"
+ class="filter-greyscale"&gt;</textarea>
+
+ <img class="filtered filter-greyscale" data-pb-greyscale-opacity="0.5" src="images/500/leaves.jpg" width="200" height="133" alt="">
+ <h2>Greyscale Value 0.5</h2>
+ <textarea>&lt;img src="leaves.jpg"
+ width="200" height="133"
+ class="filter-greyscale"
+ data-pb-greyscale-opacity="0.5"&gt;</textarea>
+
+ <img class="filtered filter-mosaic" src="images/500/staples.jpg" width="200" height="133" alt="">
+ <h2>Basic Mosaic</h2>
+ <textarea>&lt;img src="staples.jpg"
+ width="200" height="133"
+ class="filter-mosaic"&gt;</textarea>
+
+ <img class="filtered filter-mosaic" data-pb-mosaic-size="15" data-pb-mosaic-opacity="0.5" src="images/500/louvre.jpg" width="200" height="133" alt="">
+ <h2>Mosaic Size 12, Opacity 0.5</h2>
+ <textarea>&lt;img src="louvre.jpg"
+ width="200" height="133"
+ class="filter-mosaic"
+ data-pb-mosaic-amount="15"
+ data-pb-mosaic-opacity="0.5"&gt;</textarea>
+
+
+ <img class="filtered filter-noise" src="images/500/lighthouse.jpg" width="200" height="133" alt="">
+ <h2>Basic Noise</h2>
+ <textarea>&lt;img src="lighthouse.jpg"
+ width="200" height="133"
+ class="filter-noise"&gt;</textarea>
+
+ <img class="filtered filter-noise" data-pb-noise-amount="100" data-pb-noise-type="colour" src="images/500/stones.jpg" width="200" height="133" alt="">
+ <h2>Noise Amount 100, Type Colour</h2>
+ <textarea>&lt;img src="stones.jpg"
+ width="200" height="133"
+ class="filter-noise"
+ data-pb-noise-amount="100"
+ data-pb-noise-type="colour"&gt;</textarea>
+
+ </div>
+
+
+
+ <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 ab23565

Please sign in to comment.