<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="https://brooke.codes/wp-content/plugins/pretty-rss-feeds/xslt/pretty-feed.xsl" type="text/xsl" media="screen" ?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>led-remote &#8211; &lt;Brooke&gt; &lt;Codes&gt;</title>
	<atom:link href="https://brooke.codes/tag/led-remote/feed/" rel="self" type="application/rss+xml" />
	<link>https://brooke.codes</link>
	<description>The Tech Blog of Brooke. </description>
	<lastBuildDate>Thu, 27 Mar 2025 04:21:21 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Light up the sky</title>
		<link>https://brooke.codes/2017/07/02/light-up-the-sky/</link>
		
		<dc:creator><![CDATA[Brooke.]]></dc:creator>
		<pubDate>Mon, 03 Jul 2017 03:12:36 +0000</pubDate>
				<category><![CDATA[maker]]></category>
		<category><![CDATA[led-remote]]></category>
		<guid isPermaLink="false">https://brooke.codes/?p=740</guid>

					<description><![CDATA[<img width="150" height="150" src="https://brooke.codes/wp-content/uploads/2017/07/led_featured-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="LED featured" decoding="async" />I recently added a WRGB LED strip to the top of my bookshelf using WS2811 LEDs or as my friends at Adafruit call them NeoPixels. I chose RGBW LEDs&#160;so I could get a nicer white and use less power than a traditional RGB strip. Parts List: Required: Optional: Setting up the Hardware The first step [&#8230;]]]></description>
										<content:encoded><![CDATA[<img width="150" height="150" src="https://brooke.codes/wp-content/uploads/2017/07/led_featured-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="LED featured" decoding="async" loading="lazy" />
<blockquote class="wp-block-quote is-style-info-notice is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph"><strong>Note: </strong>This post refers to code and a project from <em>many</em> years ago 😱. The content was edited in March of 2025 to remove dead links, improve clarity, or fix formatting, but no other edits were made. Enjoy this time capsule into the past.</p>
</blockquote>



<p class="wp-block-paragraph">I recently added a WRGB LED strip to the top of my bookshelf using WS2811 LEDs or as my friends at Adafruit call them NeoPixels. I chose RGBW LEDs&nbsp;so I could get a nicer white and use less power than a traditional RGB strip.</p>



<figure class="wp-block-video"><video height="1080" style="aspect-ratio: 1920 / 1080;" width="1920" controls src="https://brooke.codes/wp-content/uploads/2017/07/mov_20170702_17202481.mp4"></video></figure>



<span id="more-740"></span>



<h2 class="wp-block-heading"><strong>Parts List:</strong></h2>



<p class="wp-block-paragraph"><strong>Required:</strong></p>



<ul class="wp-block-list">
<li>NeoPixel Strip ( https://www.adafruit.com/product/2837 &nbsp;)</li>



<li>Particle Photon ( https://www.particle.io/products/hardware/photon-wifi-dev-kit&nbsp;)</li>



<li>AC/DC Power converter with 5V output. Lots of options here, make sure it&#8217;s powerful enough for your strips&#8217; length. I used&nbsp;https://www.amazon.com/gp/product/B01B1QKLR8/ )</li>



<li>470Ω Resistor</li>



<li>1000µF (6.3V or higher) capacitor</li>



<li>Wires.</li>



<li>Breadboard or blank circuit board</li>
</ul>



<p class="wp-block-paragraph"><strong>Optional:</strong></p>



<ul class="wp-block-list">
<li>Seeed Particle Photon Base Shield ( https://www.seeedstudio.com/Particle-Photon-Base-Shield-p-2598.html&nbsp;)</li>



<li><a href="https://www.seeedstudio.com/Grove-Universal-4-Pin-Buckled-5cm-Cable-5-PCs-Pack.html">Grove Connectors</a></li>
</ul>



<h2 class="wp-block-heading">Setting up the Hardware</h2>



<p class="wp-block-paragraph">The first step will be to wire up the power and data pin to the LED strip. You can use a traditional breadboard or for a more&nbsp;<span class="me">permanent&nbsp;</span>solution solder directly to a blank circuit board. I&#8217;m using a Grove Photon shield and Grove connector. I find this gives me the clean connections I&#8217;m looking for without requiring direct soldering onto the Photon.</p>



<p class="wp-block-paragraph"><span style="line-height:inherit;">Adafruit has put together a <a href="https://learn.adafruit.com/adafruit-neopixel-uberguide">great guide on NeoPixels</a> so I won&#8217;t be going into too much detail here. While the whole guide is great I particularly recommend the part on <a href="https://learn.adafruit.com/adafruit-neopixel-uberguide/powering-neopixels">Powering NeoPixels</a> which will help you determine how large a power supply you need and other safety concerns.&nbsp;</span></p>



<p class="wp-block-paragraph">I used D2 but any available data pin will work. Going to the strip the&nbsp;capacitor will be placed between the Ground and VCC ( + ). This makes sure that the strip doesn&#8217;t get too much power.</p>



<p class="wp-block-paragraph">The resistor is placed between the D2 pin and the strip. Like the capacitor this prevents the board from getting too much power and overloading.</p>



<p class="wp-block-paragraph">One important note is to make sure you are sharing the common ground between the Photon and the LED strip if you forget this step the strip won&#8217;t be able to be controlled by your board.</p>



<figure class="wp-block-image"><img fetchpriority="high" decoding="async" width="1223" height="600" src="https://brooke.codes/wp-content/uploads/2017/07/photon_led_bb1.png" alt="photon_LED_bb.png" class="wp-image-844" srcset="https://brooke.codes/wp-content/uploads/2017/07/photon_led_bb1.png 1223w, https://brooke.codes/wp-content/uploads/2017/07/photon_led_bb1-300x147.png 300w, https://brooke.codes/wp-content/uploads/2017/07/photon_led_bb1-1024x502.png 1024w, https://brooke.codes/wp-content/uploads/2017/07/photon_led_bb1-768x377.png 768w" sizes="(max-width: 1223px) 100vw, 1223px" /></figure>



<p class="wp-block-paragraph">Here&#8217;s what my final board looks like. With the Grove connector between the ground and data connections.</p>



<figure class="wp-block-image"><img decoding="async" src="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1713562.jpg" alt="IMG_20170702_1713562" class="wp-image-783"/></figure>



<p class="wp-block-paragraph">Here&#8217;s an image of the Photon. My particular device had its USB port snapped off (oops) so I used a Photon Power Shield to add back in the USB power. This also gives me the option of powering the device directly from my DC Power supply if I wish.</p>



<figure class="wp-block-image"><img decoding="async" src="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1716400-e1499046503781.jpg" alt="Photon" class="wp-image-786"/></figure>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph">I also went ahead and added a connector to the end of the LED strip and shink wrapped the connections. This makes for a nice clean setup.</p>



<figure class="wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="581" data-id="784" src="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715564-e1499052561784-1024x581.jpg" alt="" class="wp-image-784" srcset="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715564-e1499052561784-1024x581.jpg 1024w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715564-e1499052561784-300x170.jpg 300w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715564-e1499052561784-768x435.jpg 768w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715564-e1499052561784-1536x871.jpg 1536w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715564-e1499052561784-2048x1161.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="884" data-id="782" src="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1714449-e1499052530452-1024x884.jpg" alt="" class="wp-image-782" srcset="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1714449-e1499052530452-1024x884.jpg 1024w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1714449-e1499052530452-300x259.jpg 300w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1714449-e1499052530452-768x663.jpg 768w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1714449-e1499052530452-1536x1326.jpg 1536w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1714449-e1499052530452-2048x1768.jpg 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="392" data-id="781" src="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715475-e1499052474437-1024x392.jpg" alt="" class="wp-image-781" srcset="https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715475-e1499052474437-1024x392.jpg 1024w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715475-e1499052474437-300x115.jpg 300w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715475-e1499052474437-768x294.jpg 768w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715475-e1499052474437-1536x589.jpg 1536w, https://brooke.codes/wp-content/uploads/2017/07/img_20170702_1715475-e1499052474437-2048x785.jpg 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</figure>



<h2 class="wp-block-heading">Setting up the Firmware</h2>



<p class="wp-block-paragraph">I am using the <a href="https://github.com/adafruit/Adafruit_NeoPixel">NeoPixel Library</a> by Adafruit and the <a href="https://docs.particle.io/reference/firmware/photon/#cloud-functions">Particle Cloud API</a> to send and receive data  to/from the strip. You&#8217;ll find the <a href="https://gist.github.com/BrookeDot/d6cdec852b2a4575d6bddccc9c3de401" data-type="link" data-id="https://gist.github.com/BrookeDot/d6cdec852b2a4575d6bddccc9c3de401">full code on GitHub</a>.  You&#8217;ll want to flash this onto the Photon. Feel free to customize the firmware to meet your needs. The main things you may want to change are the defines at the top:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: csharp; title: ; notranslate">
// Input pin for LED Strip
#define PIXEL_PIN 2

//Total number of pixels
#define PIXEL_COUNT 58

// Your Pixel Type (in my case RGBW)
#define PIXEL_TYPE SK6812RGBW
</pre></div>


<h2 class="wp-block-heading">Web Interface</h2>



<p class="wp-block-paragraph">I wrote a custom web interface called MissionControl that I may write more on later which controls several IoT Devices in my home including the LED Strip. Here I&#8217;ll go over some of the basics as they pertain to the LED strip itself.</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="862" height="488" src="https://brooke.codes/wp-content/uploads/2017/05/screen-shot-2017-05-28-at-1-38-47-pm.png" alt="Screen Shot 2017-05-28 at 1.38.47 PM" class="wp-image-779" srcset="https://brooke.codes/wp-content/uploads/2017/05/screen-shot-2017-05-28-at-1-38-47-pm.png 862w, https://brooke.codes/wp-content/uploads/2017/05/screen-shot-2017-05-28-at-1-38-47-pm-300x170.png 300w, https://brooke.codes/wp-content/uploads/2017/05/screen-shot-2017-05-28-at-1-38-47-pm-768x435.png 768w" sizes="auto, (max-width: 862px) 100vw, 862px" /></figure>



<p class="wp-block-paragraph"></p>



<h3 class="wp-block-heading">Cloud Variables and Functions</h3>



<p class="wp-block-paragraph">I&#8217;m using two <a href="https://docs.particle.io/reference/firmware/photon/#particle-function">particle.functions</a> ( <code>POST</code> ) &nbsp;and two <a href="https://docs.particle.io/reference/firmware/photon/#particle-variable-">particle.variables</a> ( <code>GET</code> ). One for the color and one for the brightness.</p>



<p class="wp-block-paragraph"><strong>Functions</strong><br>
<code>hex</code>&nbsp; — Accepts an eight digit hex value (RGBW) to be used to set the color. For example: <code>FF000000</code> is Red.<br>
<code>bri</code> — Accepts an <code>int</code> value 0-255 where 0 is off and 255 is 100% bright.</p>



<p class="wp-block-paragraph">You&#8217;ll also need to send your <code>access_token</code>&nbsp;&nbsp;to make&nbsp;the&nbsp;<code>POST</code>&nbsp;request.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: cpp; title: ; notranslate">
// POST Request URLS
https://api.particle.io/v1/devices/DEVICE_ID/hex/
https://api.particle.io/v1/devices/DEVICE_ID/bri/
</pre></div>


<p class="wp-block-paragraph"><strong>Variables</strong><br>
<code>curBri</code> — Used to retrieve the value of <code>bri</code> returning a 0-255 value.<br>
<code>curHex</code> — Returns the value of <code>hex</code> which is an 8 character string.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: cpp; title: ; notranslate">
// GET Request URLs
https://api.particle.io/v1/devices/DEVICE_ID/curBri/
https://api.particle.io/v1/devices/DEVICE_ID/curHex/
</pre></div>


<h4 class="wp-block-heading">Usage:</h4>



<p class="wp-block-paragraph">If you&#8217;re using jQuery like me your code may look something like this:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
//Partical.io Photon setup
particleDeviceID = &quot;1234567890&quot;;
particleDeviceSecret = &quot;ABC123DEFG4567&quot;;
particleAPIServer = &quot;https://api.particle.io/v1/devices&quot;;

function setLedColor(id,token,hexValue,successMessage){
var postURL = particleAPIServer + &quot;/&quot; + id + &quot;/hex/&quot;;

$.ajax({
type: 'POST',
url: postURL,
data: {
args: hexValue,
access_token: token
},
dataType: &quot;json&quot;,
success:(function(data){
if (data&#x5B;'return_value'] == &quot;1&quot;){
ajaxSuccess(successMessage);
}
}),
error :(function (){ ajaxFailed();}),
complete :(function(data){
if (data&#x5B;'return_value'] == &quot;1&quot;){
ajaxSuccess(successMessage);
}
}),
});
}

function setLedBrightness(id,token,brightness,successMessage){
var postURL = particleAPIServer + &quot;/&quot; + id + &quot;/bri/&quot;;

$.ajax({
type: 'POST',
url: postURL,
data: {
args: brightness,
access_token: token
},
dataType: &quot;json&quot;,
success:(function(data){
if (data&#x5B;'return_value'] == &quot;1&quot;){
ajaxSuccess(successMessage);
}
}),
error :(function (){ ajaxFailed();}),
complete :(function(data){
if (data&#x5B;'return_value'] == &quot;1&quot;){
ajaxSuccess(successMessage);
}
}),
});
}

function getLedBrightness(id,token){
var getURL = particleAPIServer + &quot;/&quot; + id + &quot;/curBri/?access_token=&quot; + token;
var result = &quot;&quot;;
$.ajax({
type: 'GET',
url: getURL,
async: false,
success:(function(data){
result = data&#x5B;'result'];
}),
error :(function (){ ajaxFailed();}),
});
return result;
}
//returned on fail
function ajaxFailed() {
$(&quot;.results&quot;).stop().fadeIn().html(&quot;Error Occured, Please Try Again.&quot;).removeClass().addClass(&quot;results alert-error&quot;).delay(3000).fadeOut(2000);
}
//returned on success
function ajaxSuccess(status){
$(&quot;.results&quot;).fadeIn().html( status ).removeClass().addClass(&quot;results alert-success&quot;).delay(3000).fadeOut(2000);
}
</pre></div>


<p class="wp-block-paragraph">Later in your JavaScript you&#8217;ll uses the above functions like the following:</p>



<p class="wp-block-paragraph"><strong>GET</strong> the Brightness</p>


<pre class="brush: jscript; title: ; notranslate">
startBrighness = parseInt(getLedBrightness(particleDeviceID,particleDeviceSecret));</pre>



<p class="wp-block-paragraph"><strong>SET</strong> the Brightness</p>


<pre class="brush: jscript; title: ; notranslate">
startBrighness = parseInt(getLedBrightness(particleDeviceID,particleDeviceSecret));
</pre>



<p class="wp-block-paragraph"><strong>SET</strong> the Color</p>



<p class="wp-block-paragraph"></p>


<pre class="brush: jscript; title: ; notranslate">
setLedColor( particleDeviceID,particleDeviceSecret, &#039;#FF000000&#039; ),&amp;quot;Setting lights to: &amp;quot; + Red );
</pre>



<p class="wp-block-paragraph">Hope that helps get you started and let me know if you have any questions in the commets 🙂</p>
]]></content:encoded>
					
		
		<enclosure url="https://brooke.codes/wp-content/uploads/2017/07/mov_20170702_17202481.mp4" length="29871853" type="video/mp4" />

			</item>
	</channel>
</rss>
