PaletteKnife doc

author: Mark Kriegsman <kriegsman@tr.org> 2015-08-17 20:44:23 +0300
committer: Mark Kriegsman <kriegsman@tr.org> 2015-08-17 20:44:23 +0300
commit: ce00f3722ba7da780ac44bc4a2f8fcbce4bf6874 (patch)
tree: 1e45fd46f674ec4bb99a234667d3bc3d44a22e21
parent: b223e2bea1b3d2b68f2ddde785dfb26af7cc8275 (diff)
4 files changed, 158 insertions, 19 deletions
diff --git a/tools/paletteknife/cpt-city-examples.png b/tools/paletteknife/cpt-city-examples.png
new file mode 100644
index 00000000..236ccf45
--- /dev/null
+++ b/tools/paletteknife/cpt-city-examples.png
diff --git a/tools/paletteknife/index.html b/tools/paletteknife/index.html
index 058bfa28..9ba314c3 100644
--- a/tools/paletteknife/index.html
+++ b/tools/paletteknife/index.html
@@ -1,7 +1,60 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<meta http-equiv="refresh" content="0; url=http://fastled.io/" />
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+	<title>PaletteKnife for FastLED</title>
+	<meta name="description" content="Bookmarklet for importing cpt-city color palettes into FastLED sketches">
+
+	<link href="minimal.css" rel="stylesheet">
 </head>
 <body>
+<div class="container">
+	<header>
+		<div class="logo">PaletteKnife for FastLED</div>
+	</header>
+
+	<div class="row">
+	<h2>About</h2>
+		<p><img class="float-right" src="cpt-city-examples.png"></p>
+		<p>PaletteKnife lets you use thousands of high-quality color palettes from "<a href="http://soliton.vm.bytemark.co.uk/pub/cpt-city/" target=_new>cpt-city</a>" in your FastLED animations.</p>
+		
+<h2>Getting Started</h2>
+<p>A basic understanding of FastLED color palettes is absolutely required.
+<p>To get started with FastLED color palettes, run the FastLED "<a href="https://github.com/FastLED/FastLED/blob/master/examples/ColorPalette/ColorPalette.ino" target=_new>ColorPalette</a>" example, and review the included notes/comments to refresh your understanding of what FastLED color palettes are, and how to program with them.  If you skip this step, nothing that follows will make sense or work.  It's not too complicated, but there is no substitute for hands-on experience here.<p>
+<p>A second palette-use example, "<a href="https://github.com/FastLED/FastLED/blob/master/examples/Fire2012WithPalette/Fire2012WithPalette.ino" target=_new>Fire2012WithPalette</a>", is also included with FastLED.</p>
+
+	<h2>Installing PaletteKnife</h2>
+<p>Drag this bookmarklet into a browser toolbar: [<a href="javascript:(function(){s=document.createElement(%27script%27);s.type=%27text/javascript%27;s.src=%27http://fastled.io/tools/paletteknife/pk2.js?v=%27+parseInt(Math.random()*99999999);document.body.appendChild(s);})();">PaletteKnife</a>]</p>
+
+	<h2>Using PaletteKnife</h2>
+	<ol>
+	<li>Go to cpt-city here, <a href="http://soliton.vm.bytemark.co.uk/pub/cpt-city/" target=_new>http://soliton.vm.bytemark.co.uk/pub/cpt-city/</a></li>
+	<li>Find a palette you like, e.g. <a href="http://soliton.vm.bytemark.co.uk/pub/cpt-city/rc/tn/purplefly.png.index.html" target=_new>http://soliton.vm.bytemark.co.uk/pub/cpt-city/rc/tn/purplefly.png.index.html</a></li>
+<li>Click PaletteKnife in your toolbar.  If you get warnings, choose a different palette and try again.</li>
+<li>Copy the resulting code and paste it into your source file.</li>
+<li>Use your new color palette by name (e.g. "purplefly_gp") as you would any other FastLED pre-defined color palette (e.g. "RainbowColors_p").</li>
+
+	</ol>
+	<p>Example:</p>
+<pre>CRGBPalette16 myPal = purplefly_gp;</pre>
+<p>then</p>
+<pre>static uint8_t index = 0;
+index++;
+fill_palette( leds, NUM_LEDS, index, 6, myPal);</pre>
+<p>or</p>
+<pre>leds[i] = ColorFromPalette( myPal, index);</pre>
+	</div>
+
+<h2>Further Reading</h2>
+<p>All color palettes from cpt-city are "gradient palettes", which are discussed here: <a href="https://github.com/FastLED/FastLED/wiki/Gradient-color-palettes">Gradient color palettes</a>.</p>
+	
+<p>If you want to cross-fade between one palette and another, check out this post, video, and sample code on G+: <a href="https://plus.googleapis.com/112916219338292742137/posts/FvLgYPF52Ma" target=_new>Color Palette Crossfades</a></p>
+	
+	<footer>
+			<!-- &copy; Company or Name |   Not required, but appreciated. <a href="http://minimalcss.com">Minimal</a> -->
+	</footer><!-- footer -->
+</div>
 </body>
-</html>
+</html>
+\ No newline at end of file
diff --git a/tools/paletteknife/minimal.css b/tools/paletteknife/minimal.css
new file mode 100644
index 00000000..9cf4b10e
--- /dev/null
+++ b/tools/paletteknife/minimal.css
@@ -0,0 +1,102 @@
+/*
+	Minimal CSS
+	minimalcss.com
+*/
+
+/* Reset */
+* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
+/* Layout */
+body { background-color: #fff; color: #333;	font: 14px/20px "HelveticaNeue-Light", "HelveticaNeue", Helvetica, Arial, sans-serif; }
+
+header { width: 100%; margin: 0 auto; position: relative; padding: 20px 0; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
+.logo { font-size: 28px; color: #333; }
+
+nav ul { margin: 0; }
+nav ul li { display: inline; margin-right: 20px; font-size: 16px; line-height: 28px; color: #333; }
+nav ul li a { color: #333; }
+
+.container { position: relative; text-align: left; width: 960px; max-width: 90%; margin: 0 auto; }
+
+footer { border-top:1px solid #ccc; font-size:11px; line-height:26px; color:#999; }
+footer a { color:#999999; }
+footer a:hover { color:#105CB6; }
+footer ul li { display:inline; list-style:none; padding-left:20px; }
+
+/* Grid */
+.row { width: 100%; margin:0 auto 20px auto; display:inline-block; position:relative; }
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; margin-right: 2%; }
+.row .col-1:last-child, .row .col-2:last-child, .row .col-3:last-child, .row .col-4:last-child, .row .col-5:last-child, .row .col-6:last-child, .row .col-7:last-child, .row .col-8:last-child, .row .col-9:last-child, .row .col-10:last-child, .row .col-11:last-child, .row .col-12:last-child { margin-right: 0; }
+.row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+
+.col-1  { width: 6%; }
+.col-2  { width: 15%; }
+.col-3  { width: 23.5%; }
+.col-4  { width: 32%; }
+.col-5  { width: 40%; }
+.col-6  { width: 49%; }
+.col-7  { width: 56.5%; }
+.col-8  { width: 66%; }
+.col-9  { width: 74%; }
+.col-10 { width: 82.5%; }
+.col-11 { width: 91%; }
+.col-12 { width: 100%;  }
+
+/* Typography */
+a { color: #105CB6; text-decoration: none; }
+a:hover, a:focus { color: #105CB6; text-decoration: underline; }
+a:active { color: #105CB6; }
+
+h1 { font-size: 30px; line-height: 36px; margin-bottom: 20px; }
+h2 { font-size: 24px; line-height: 20px; margin-bottom: 20px; }
+h3 { font-size: 20px; line-height: 20px; margin-bottom: 20px; }
+h4 { font-size: 16px; line-height: 20px; margin-bottom: 20px; }
+h5 { font-size: 14px; line-height: 20px; margin-bottom: 20px; }
+h6 { font-size: 12px; line-height: 20px; margin-bottom: 20px; }
+h1,h2,h3,h4,h5,h6 { color: #333; }
+
+p { margin-bottom: 20px; }
+
+.float-left     { float: left; }
+.float-right    { float: right; }
+img.float-left  { float: left; margin: 0 20px 20px 0; }
+img.float-right { float: right; margin: 0 0 20px 20px; }
+img.center 		{ margin: 0 auto; display: block; }
+
+.text-left 	  { text-align: left; }
+.text-center  { text-align: center; }
+.text-right   { text-align: right; }
+.text-justify { text-align: justify; }
+
+/* Misc */
+hr { background-color: #ccc; border: 0px; color: #ccc; height: 1px; margin: 8px 0 20px 0; }
+pre, code { background:#E0ECF6; display:block; margin-bottom: 20px; padding:10px; }
+
+blockquote { margin: 10px 10px 20px; padding: 9px; background-color: #f8f8f8; color: #666; border-left: 5px solid #ddd; font: 14px/20px Georgia, Times, serif; quotes: "\201C" "\201D"; }
+blockquote p { margin: 0; }
+blockquote:before { content: open-quote; font-weight: bold; }
+blockquote:after  { content: close-quote; font-weight: bold; }
+
+/* List */
+ul { margin-bottom: 20px; list-style-position:inside; }
+ol { margin-bottom: 20px; list-style-position:inside; }
+ul ul, ol ol { margin-bottom:0; }
+
+/* Form */
+fieldset { position: relative; border-top:1px solid #ccc; padding: 10px; margin-bottom:20px; }
+fieldset legend { font-weight:bold; font-size:16px; padding: 0 5px; }
+
+/* Table */
+table { margin-bottom: 20px; width:100%; }
+th { font-weight: bold; }
+td { text-align: left; }
+tfoot { font-style: italic; }
+
+/* Print */
+@media print {
+	* {
+		text-shadow: none !important;
+		background: transparent !important;
+		box-shadow: none !important;
+		color: #000 !important;
+	}
+\ No newline at end of file
diff --git a/tools/paletteknife/pk2.html b/tools/paletteknife/pk2.html
deleted file mode 100644
index 744f900d..00000000
--- a/tools/paletteknife/pk2.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<html>
-<title>PaletteKnife for FastLED</title>
-<body>
-<h3>PaletteKnife for FastLED</h3>
-<p>Drag this to a toolbar: <a href="javascript:(function(){s=document.createElement(%27script%27);s.type=%27text/javascript%27;s.src=%27http://fastled.io/tools/paletteknife/pk2.js?v=%27+parseInt(Math.random()*99999999);document.body.appendChild(s);})();">PaletteKnife</a>
-
-<p>Then:
-<ol>
-<li>Go to CPT-CITY here, <a href="http://soliton.vm.bytemark.co.uk/pub/cpt-city/\" target=_new>http://soliton.vm.bytemark.co.uk/pub/cpt-city/</a>
-<li>Find a palette you like, e.g. <a href="http://soliton.vm.bytemark.co.uk/pub/cpt-city/rc/tn/purplefly.png.index.html" target=_new>http://soliton.vm.bytemark.co.uk/pub/cpt-city/rc/tn/purplefly.png.index.html</a>
-<li>Click PaletteKnife in your toolbar,
-<li>Copy the resulting code and paste it into your FastLED project.
-<li>Relaxen und watchen das blinkenlights.
-</ol>
-</body>
-</html>
author	Mark Kriegsman <kriegsman@tr.org>	2015-08-17 20:44:23 +0300
committer	Mark Kriegsman <kriegsman@tr.org>	2015-08-17 20:44:23 +0300
commit	ce00f3722ba7da780ac44bc4a2f8fcbce4bf6874 (patch)
tree	1e45fd46f674ec4bb99a234667d3bc3d44a22e21
parent	b223e2bea1b3d2b68f2ddde785dfb26af7cc8275 (diff)