From ce00f3722ba7da780ac44bc4a2f8fcbce4bf6874 Mon Sep 17 00:00:00 2001 From: Mark Kriegsman Date: Mon, 17 Aug 2015 13:44:23 -0400 Subject: PaletteKnife doc --- tools/paletteknife/cpt-city-examples.png | Bin 0 -> 88914 bytes tools/paletteknife/index.html | 59 +++++++++++++++++- tools/paletteknife/minimal.css | 102 +++++++++++++++++++++++++++++++ tools/paletteknife/pk2.html | 16 ----- 4 files changed, 158 insertions(+), 19 deletions(-) create mode 100644 tools/paletteknife/cpt-city-examples.png create mode 100644 tools/paletteknife/minimal.css delete mode 100644 tools/paletteknife/pk2.html diff --git a/tools/paletteknife/cpt-city-examples.png b/tools/paletteknife/cpt-city-examples.png new file mode 100644 index 00000000..236ccf45 Binary files /dev/null and b/tools/paletteknife/cpt-city-examples.png differ 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 @@ - + + - + + + + PaletteKnife for FastLED + + + +
+
+ +
+ +
+

About

+

+

PaletteKnife lets you use thousands of high-quality color palettes from "cpt-city" in your FastLED animations.

+ +

Getting Started

+

A basic understanding of FastLED color palettes is absolutely required. +

To get started with FastLED color palettes, run the FastLED "ColorPalette" 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.

+

A second palette-use example, "Fire2012WithPalette", is also included with FastLED.

+ +

Installing PaletteKnife

+

Drag this bookmarklet into a browser toolbar: [PaletteKnife]

+ +

Using PaletteKnife

+
    +
  1. Go to cpt-city here, http://soliton.vm.bytemark.co.uk/pub/cpt-city/
    2. +
  2. Find a palette you like, e.g. http://soliton.vm.bytemark.co.uk/pub/cpt-city/rc/tn/purplefly.png.index.html
    3. +
  3. Click PaletteKnife in your toolbar. If you get warnings, choose a different palette and try again.
    4. +
  4. Copy the resulting code and paste it into your source file.
    5. +
  5. 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").
    6. + +
+

Example:

+
CRGBPalette16 myPal = purplefly_gp;
+

then

+
static uint8_t index = 0;
+index++;
+fill_palette( leds, NUM_LEDS, index, 6, myPal);
+

or

+
leds[i] = ColorFromPalette( myPal, index);
+
+ +

Further Reading

+

All color palettes from cpt-city are "gradient palettes", which are discussed here: Gradient color palettes.

+ +

If you want to cross-fade between one palette and another, check out this post, video, and sample code on G+: Color Palette Crossfades

+ +
+ +
+
- + \ 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 @@ - -PaletteKnife for FastLED - -

PaletteKnife for FastLED

-

Drag this to a toolbar: PaletteKnife - -

Then: -

    -
  1. Go to CPT-CITY here, http://soliton.vm.bytemark.co.uk/pub/cpt-city/ -
  2. Find a palette you like, e.g. http://soliton.vm.bytemark.co.uk/pub/cpt-city/rc/tn/purplefly.png.index.html -
  3. Click PaletteKnife in your toolbar, -
  4. Copy the resulting code and paste it into your FastLED project. -
  5. Relaxen und watchen das blinkenlights. -
- - -- cgit v1.2.3