# Glowing Fascinator Hat with Gemma M0 and MakeCode ## Overview https://youtu.be/IcMKfcjKlCs Create a beautiful and unique fascinator hat for every occasion. A NeoPixel Jewel, Gemma M0, and tiny battery are hidden inside. The flowers and feathers glow tastefully and set off your outfit-du-jour with colors and animations you can design yourself in MakeCode.  A little hot glue, a little creativity, and you'll be the talk of the Derby Hat Parade. Make one for everyone in your wedding party, or two for yourself and one for each of your girlfriends for a night on the town.   From Wikipedia: A  **fascinator**  is a [headpiece](https://en.m.wikipedia.org/wiki/Headpiece "Headpiece"), a style of [millinery](https://en.m.wikipedia.org/wiki/Hatmaking "Hatmaking"). Fascinators were originally a form of lightweight knitted head-covering. Since the 1990s the term refers to a type of formal headwear worn as an alternative to the hat; it is usually a large decorative design attached to a band or clip, sometimes incorporating a base to resemble a hat, in which case it may be called a  **hatinator**.  Hatinator is my new favorite word.  ![](https://cdn-learn.adafruit.com/assets/assets/000/071/512/medium800/adafruit_gemma_LED_Fascinator-12.jpg?1550619629) ## Parts ### Part: Gemma M0 quantity: 1 Gemma M0 Microcontroller [Gemma M0](https://www.adafruit.com/product/3501) ### Part: NeoPixel Jewel quantity: 1 7-Pixel NeoPixel Jewel [NeoPixel Jewel](https://www.adafruit.com/product/2226) ### Part: Battery quantity: 1 Tiny LiPoly Battery [Battery](https://www.adafruit.com/product/2750) ### Part: On/Off Switch quantity: 1 Tactile On/Off Switch with Leads [On/Off Switch](https://www.adafruit.com/product/1092) ### Part: JST Connector Cable quantity: 1 Battery Extension Cable with Connectors [JST Connector Cable](https://www.adafruit.com/product/1131) ### Part: Battery Charger quantity: 1 USB Battery Charger [Battery Charger](https://www.adafruit.com/product/1304) This is an easy project that requires some simple soldering and a little creativity. We've included code for a simple and beautiful rainbow animation. Also included is some more complex code that allows you to choose a color gradient to go with an outfit via Gemma's onboard capacitive touch pads -- just touch the Gemma and the animation colors will change. ## Tools and Materials - Soldering iron, solder & heat shrink - Wire cutters & strippers - Hot glue gun & glue sticks - Scissors - Hair clips - Craft foam & craft felt - Feathers, flowers, and fancy things I also used a few small pieces of [Worbla and Fosshape](https://www.worbla.com/) in my fascinator to add structure and height, but this is not required. ![](https://cdn-learn.adafruit.com/assets/assets/000/071/358/medium800/adafruit_gemma_fascinator-hat-with-fan.jpg?1550439268) # Glowing Fascinator Hat with Gemma M0 and MakeCode ## Wiring Diagram ![](https://cdn-learn.adafruit.com/assets/assets/000/071/526/medium800/adafruit_gemma_Untitled.png?1550682076) The Gemma M0 will be hooked up to the NeoPixel jewel via 3 wires.  **VOUT** goes to **PWR** , **D1** goes to **IN** , and **G** goes to **G**. If you're happy using Gemma's onboard on/off switch (which is a bit tiny and hard to get to), that's all you'll need -- you can just plug the battery directly into the Gemma.  If you go this route, remember to unplug the battery when the fascinator is being stored.  The battery will slowly drain if it's left plugged in directly, and it's no fun to find a dead battery right before it's time to leave. If you want to be able to turn the fascinator on and off more easily, and leave the battery plugged in during storage, I've also included instructions on how to add an on/off switch. It takes a little more soldering and time, but your hairdo will thank you later. # Glowing Fascinator Hat with Gemma M0 and MakeCode ## Code with MakeCode ![](https://cdn-learn.adafruit.com/assets/assets/000/071/525/medium800/adafruit_gemma_C03F000.jpg?1550675414) MakeCode is Microsoft's fabulous drag-and-drop code editor that makes it easy to create complex animations without a lot of in-depth knowledge about how the code works. You can either download the code we wrote and use it as-is, or follow along and learn to code your own custom animations. The Simple Rainbow code makes pretty lights that shift in a rainbow spectrum. It's great for first-timers since it's very easy to set up -- and of course, rainbow goes with everything. The Changing Gradient code is a bit more involved. The flower will glow in a gradient (i.e. red-orange-yellow) and each time you touch Gemma's capacitive touch pad it will step through the spectrum, showing yellow-green-blue, then green-blue-purple the next time you touch it, and so on. If you like being able to make your colors change to go with different outfits, this code is for you. ## MakeCode To see the code (if you do not see it below), click the "Show Embedded Content" button. You can use the icon in the upper right corner of the code box to open the code in the Microsoft MakeCode editor.  See the following pages for a step-by-step guide for each code type you can use. ## Simple Rainbow Code https://makecode.com/_g1w8D14vKEKR ## Changing Gradient Code https://makecode.com/_bKE9D7EtyLWc # Glowing Fascinator Hat with Gemma M0 and MakeCode ## Simple Rainbow To follow along and learn how I did it, point your browser at [maker.makecode.com](https://maker.makecode.com/) and select "New Project".   Select the Gemma M0 board, since that's the one we're working with today. While you're here, take a second to notice all the other development boards MakeCode will work with. So many possibilities! ![adafruit_gemma_makecode_selectgemma.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/009/medium640/adafruit_gemma_makecode_selectgemma.jpg?1545520715) You'll find yourself in the MakeCode editor window.  From here, you can drag and drop snippets of code from the different blocks listed in the middle, into the workspace on the right. Then, the Gemma emulator will simulate what your code is doing on the left.   We'll start with the `on_start` loop, which will run some code when the Gemma first boots up. For now, drag the `forever` loop down out of the way. ![adafruit_gemma_makecode_editor.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/010/medium640/adafruit_gemma_makecode_editor.jpg?1545520993) Choose the **PIXEL** tab. Anything in this tab will deal with Gemma's onboard NeoPixel, the one on the front face. For this project, I want to turn this pixel off entirely so it doesn't compete with the jewel. Drag an instance of `set pixel to red` into the `on start` loop and change the color to `black`. ![adafruit_gemma_mc_00_setpixelcolor.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/881/medium640/adafruit_gemma_mc_00_setpixelcolor.jpg?1551050748) Next we'll tell Gemma about our jewel. Any lights we solder to the Gemma will be controlled by code snippets in the **LIGHT** tab or the **LIGHT** \> **MORE** tab.  From the **MORE** tab drag an instance of `set strip to create WS2812 strip on LED with 30 pixels`. We soldered onto **D1** , so change the first dropdown to **D1**.  Since we have 7 lights in our jewel, change the number in the `set strip` snippet to **7**.  Drag an instance of `strip set brightness` into your on start loop as well. Then choose your brightness. For this project I like around **150**  -- bright enough to see but not so bright you'll blind people. ![adafruit_gemma_mc_01_setstrip.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/880/medium640/adafruit_gemma_mc_01_setstrip.jpg?1551050722) The very easiest way to get your lights going is with one of the pre-made animations that come with MakeCode.  Back in the **MORE** tab, drag out an instance of `strip show frame of animation`onto your workspace, and put it in the `forever` loop.  You'll notice that your Gemma emulator now has a strip of LEDs that are playing a rainbow animation. ![adafruit_gemma_mc_02_rainbow.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/882/medium640/adafruit_gemma_mc_02_rainbow.jpg?1551050789) You may notice that there are two different code blocks dealing with showing animations: one called `show animation for 500 ms` and one called `show frame of animation`.  The first one will run the selected animation for the specified amount of time, then move on to do something else. If you want a few seconds of rainbow, then a few seconds of twinkle, etc, you can make a "playlist" of animations inside your `forever` loop to accomplish this. You won't have any control over the animations except to tell them how long to run. The second one will show just one frame of the animation and then look for more instructions. This will give you a bit more control - you can change the speed or the brightness between each frame, slowing it down or making it appear to pulse or flicker. I want a slower rainbow, so I've chosen this version for this project. Go into the **LOOPS** tab and drag an instance of `pause 100 ms` into your `forever` loop beneath the `animation` block. Watch the emulator on the right as you try different values in this block. When you have a speed you like, move on to the next step. ![adafruit_gemma_mc_03_pause.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/437/medium640/adafruit_gemma_mc_03_pause.jpg?1550599585) Give the file a name and save it to MakeCode.  I called mine "Fascinator -  Rainbow".  Then click the **Download** button, and plug your Gemma into your computer via the USB port.  Click the Reset button on the face of the Gemma and a drive will appear on your computer called **GEMMABOOT**.  This means it's in bootloader mode and you can program it.  Drag the file you just downloaded onto that drive. ![adafruit_gemma_makecode_download.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/017/medium640/adafruit_gemma_makecode_download.jpg?1545588994) It may ask you if you want to pair the Gemma to your computer. If you want to do this, follow the onscreen instructions. You may need to update your bootloader before proceeding. Pairing will make code testing a bit easier - you'll no longer need to drag the file to the **GEMMABOOT**  drive each time you want to test it. But it's not necessary - you can cancel out of the pairing process and simply drag the file onto your Gemma. Another way to tell if Gemma is in bootloader mode is that you'll see a red and green light on the Gemma's face.  Once you've downloaded the code to Gemma, the light will be magenta and the code will be running.  To get back into bootloader mode for another download, just click the reset button again. ![adafruit_gemma_gemma_bootloader.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/018/medium640/adafruit_gemma_gemma_bootloader.jpg?1545589254) ![adafruit_gemma_gemma_test.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/019/medium640/adafruit_gemma_gemma_test.jpg?1545589342) ## Troubleshooting If the **GEMMABOOT** drive is not appearing, first check to be sure that the on/off switch on the face of the Gemma is switched on.  It's easy to miss!  Next, try using a different USB cable.  Some cables are "charge-only" and won't pass data.  Also try using a different USB port on your computer (mine is sometimes twitchy).   If it's still not working, head over to the [Gemma M0 intro guide](https://learn.adafruit.com/adafruit-gemma-m0) for more suggestions. If you can drag the code onto **GEMMABOOT** but your jewel isn't lighting up, check to be sure that your code reflects the pin you soldered to (did you remember to change to **D1**?).  Also be sure you've soldered your connector to the **IN** pin on the back of the jewel -- it won't work if you soldered to the **OUT** pin. # Glowing Fascinator Hat with Gemma M0 and MakeCode ## Changing Gradient This code will create a slowly animating gradient of 2-3 colors. Each time you touch the **D0** pad on Gemma, the gradient will shift to a new color range. You can make an animated gradient that matches every outfit you have, without having to change the code. It's a bit more involved to build, but so satisfying to have so much control over what your lights are doing. The first part of the code is exactly the same as in the Simple Rainbow code, so start there. Get your `on start` loop all set up, then come back here to continue. Create some variables. In the **VARIABLES** tab, make a variable called `hue`, one called `gradient`, and one called `toggle`. Drag an instance of `set gradient to 0` into the on start loop. Drag a second instance make it read `set hue to gradient`.  ![adafruit_gemma_mc_04_variables.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/527/medium640/adafruit_gemma_mc_04_variables.jpg?1550684664) These variables will allow us to change and store color values on the fly. Variables are essential to creating smooth color animations. Go to **MORE** and drag an instance of `set strip pixel 0 to red` into your `forever` loop. From the **LIGHT** tab, replace the `red` with `hue 255 saturation 255 value 255`. Then from the **VARIABLES** tab, replace the hue value with your `hue` variable. ![adafruit_gemma_mc_05_setpixel.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/528/medium640/adafruit_gemma_mc_05_setpixel.jpg?1550684756) ![adafruit_gemma_mc_06_hsv.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/529/medium640/adafruit_gemma_mc_06_hsv.jpg?1550684771) ![adafruit_gemma_mc_07_hue.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/530/medium640/adafruit_gemma_mc_07_hue.jpg?1550684786) To get the animation to move along the strip and light up all the pixels one by one, add an instance of **MORE** \> `strip rotate by 1` into your forever loop. Then go to **LOOPS** and add a `pause 100ms` block to slow the animation down a bit. You can change this number to whatever you'd like to change the speed of the motion. ![adafruit_gemma_mc_08_rotate.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/531/medium640/adafruit_gemma_mc_08_rotate.jpg?1550684856) ![adafruit_gemma_mc_09_pause.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/532/medium640/adafruit_gemma_mc_09_pause.jpg?1550684874) ## Hue, Saturation and Value Hue, saturation and value are a means of defining a specific color using just numbers, on a scale of 0-255. Hue refers to the color on the spectrum -- red, blue, purple, etc.  Red is at 0, blue is at around 140, purple comes in at around 180, and the spectrum loops around back to red at 255. Saturation refers to how pastel or how vivid the colors are: 0 is a plain white, no matter what your hue is -- any completely unsaturated color just turns white. 255 is fully vivid and saturated with color.  Value, for our purposes, refers to the brightness or intensity of the color. The higher the value, the more red or blue is added.  You can read far more than you ever wanted to know about this on [Wikipedia](https://en.wikipedia.org/wiki/HSL_and_HSV). What matters to us is that we can mess with the NeoPixel colors in all sorts of fun ways using hue, saturation and value. For this animation, we will focus on messing with hue and leave the saturation and value alone. From the **VARIABLES** tab, drag an instance of `change hue by 0` into your `forever` loop. Change it to read `change hue by toggle` using an instance of the `toggle` variable you made earlier. We'll use this variable to change the hue upwards or downwards by a set amount, giving us a gradient effect. ![adafruit_gemma_mc_10_changehue.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/533/medium640/adafruit_gemma_mc_10_changehue.jpg?1550684901) Now we'll set up a conditional limit on the hue. This means the hue value will count up until it reaches its top limit, then it will start counting down again until it hits its bottom limit. From the **LOGIC** tab drag an instance of `if/then/else` into your `forever` loop. Click the `+` and `-` buttons until it looks like the picture. Then drag a conditional `0 = 0` block to replace each `true` statement. Change the first `=` to `>=` and the second to `<=`. ![adafruit_gemma_mc_11_ifthen.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/534/medium640/adafruit_gemma_mc_11_ifthen.jpg?1550684929) Now drag your `hue` variable to replace the first `0` in each conditional statement. Drag your `gradient` variable to replace the `0` in the second block. Add `set toggle to 0` inside both slots. Set the first toggle change to `-5` and the second to `5`. ![adafruit_gemma_mc_12_variables.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/535/medium640/adafruit_gemma_mc_12_variables.jpg?1550684958) From the **MATH** tab, grab an instance of `0 + 0` and replace the remaining `0` in the conditional statement. Insert the `gradient` variable to replace one of these `0`s, and change the other to 75, making the line read `hue >= 75 + gradient`. ![adafruit_gemma_mc_13_math.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/536/medium640/adafruit_gemma_mc_13_math.jpg?1550684988) ![adafruit_gemma_mc_14_gradient.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/537/medium640/adafruit_gemma_mc_14_gradient.jpg?1550685005) Check out the emulator. You should see a gradient animation that rotates from red to orange and a bit into green before rotating back to red and repeating. What is happening here? The `hue` variable tells pixel 0 what color to be. Then, the `rotate` block tells pixel 1 then pixel 2 etc to become that color. This creates the animation. By changing the value of `hue`, each time the `forever` loop runs will tell pixel 0 (and then subsequently the other pixels) to be a slightly different color. Since our `gradient` value started at 0 (remember, in our `on start` loop we specified this) then the `hue` value will increase by 5 each time until it reaches 75, at which time it will start counting down by 5. When it reaches 0, it will start counting up again. The magic here is that we can change the starting value of `gradient`, and the whole thing will hang together and show whatever portion of the spectrum we want. Try changing `gradient` to 50 or 100 in your `on start` loop and see what happens to the LEDs in the emulator. We can harness this magic! We'll set it up so each time we touch one of Gemma's capacitive touch pads, the value of `gradient` changes by 50. This will allow us to change to whatever colors we want just by touching the Gemma. From the **INPUT** tab drag an instance of `on touch D0 click` into your workspace. Place an instance of `change gradient by 0` inside and change the `0` to `50`. Now each time you touch the **D0** pad the value of gradient will increase by 50. ![adafruit_gemma_mc_16_changegradient.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/538/medium640/adafruit_gemma_mc_16_changegradient.jpg?1550685026) This will work perfectly for the first 5 times you touch it. But once the value of `gradient` surpasses `255`, it will stop changing. Remember, we're looking for a hue between 0-255, so let's add some code that will reset the value to 0 if it gets too high. Drag an `if/then` block form the **LOGIC** tab. Make it read `if gradient >= 255 set gradient to 0`. Then drag an instance of **VARIABLES** \> `set hue to 0` and make it read `set hue to gradient`. Now the value will reset and cycle through the colors over and over. ![adafruit_gemma_mc_17_ifthen.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/539/medium640/adafruit_gemma_mc_17_ifthen.jpg?1550685046) ![adafruit_gemma_mc_18_sethuetogradient.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/541/medium640/adafruit_gemma_mc_18_sethuetogradient.jpg?1550685085) Try this out with the emulator. Click the **D0** button and watch to see if the LED animation changes in a way that pleases you. Try changing some of the values to tweak it so it does exactly what you want.  ## Extra Credit - Add a Feedback Blink I finished this code and downloaded it. It works great, but because of how it refreshes it's a little hard to tell whether the touch was actually sensed or not. I found myself unsure as to whether it worked, so I decided to add some code to make the pixels blink a bit when a touch was sensed. This made the whole thing a bit more satisfying to use. From the **LIGHTS \> MORE** tab drag two instances of `set strip to red` into your `on click` loop above the last block. Change the first one to `black`. Drag two instances of `pause 100 ms` in between, changing the `100` to `500`. This will pause for a half second, creating a satisfying blink.    Then change the second `red` to `hsv` (from the **LIGHT** tab) and replace the `hue` value with `gradient`. This will make the blink happen in the same color range you're already in. ![adafruit_gemma_mc_18_blink.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/544/medium640/adafruit_gemma_mc_18_blink.jpg?1550685188) ![adafruit_gemma_mc_20_hsv.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/545/medium640/adafruit_gemma_mc_20_hsv.jpg?1550685204) Click the **D0** pad on the Gemma emulator to test and see how it works. If you're happy, it's time to download to the Gemma. ## Downloading Click the Download button, and plug your Gemma into your computer via the USB port.  Click the Reset button on the face of the Gemma and a drive will appear on your computer called **GEMMABOOT**.  This means it's in bootloader mode and you can program it.  Drag the file you just downloaded onto that drive. ![adafruit_gemma_makecode_download.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/017/medium640/adafruit_gemma_makecode_download.jpg?1545588994) Another way to tell if Gemma is in bootloader mode is that you'll see a red and green light on the Gemma's face.  Once you've downloaded the code to Gemma, the light will be magenta and the code will be running.  To get back into bootloader mode for another download, just click the reset button again. ![adafruit_gemma_gemma_bootloader.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/018/medium640/adafruit_gemma_gemma_bootloader.jpg?1545589254) ![adafruit_gemma_gemma_test.jpg](https://cdn-learn.adafruit.com/assets/assets/000/068/019/medium640/adafruit_gemma_gemma_test.jpg?1545589342) ## Troubleshooting If the **GEMMABOOT** drive is not appearing, first check to be sure that the on/off switch on the face of the Gemma is switched on.  It's easy to miss!  Next, try using a different USB cable. Some cables are "charge-only" and won't pass data.  Also try using a different USB port on your computer (mine is sometimes twitchy).   If it's still not working, head over to the [Gemma M0 intro guide](https://learn.adafruit.com/adafruit-gemma-m0) for more suggestions. If you can drag the code onto **GEMMABOOT** but your LED strand isn't lighting up, check to be sure that your code reflects the pin you soldered to (did you remember to change to **D1**?). Also be sure you've soldered your connector to the **IN** end of the LED strand -- it won't work if you soldered to the **OUT** end. # Glowing Fascinator Hat with Gemma M0 and MakeCode ## Electronics Assembly ![](https://cdn-learn.adafruit.com/assets/assets/000/071/423/medium800/adafruit_gemma_00_pieces.jpg?1550595709) Cut a red, black, and white wire about 3" long. Strip a tiny bit off the end of each, and carefully solder the wires into the back of the NeoPixel jewel. This can be a bit fiddly, but it really does work best if you solder from the back. ![adafruit_gemma_01_solder.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/426/medium640/adafruit_gemma_01_solder.jpg?1550596024) Trim the wires to about 1.5", just long enough to reach the Gemma's pads without a lot of slack. Strip about 1/4" off this end. Solder the red wire to **VOUT** , the white wire to **D1** and the black wire to **G**. ![adafruit_gemma_02_trim.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/427/medium640/adafruit_gemma_02_trim.jpg?1550596159) ![adafruit_gemma_03_solder2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/429/medium640/adafruit_gemma_03_solder2.jpg?1550596549) Twist the jewel around so it's sitting back to back with the Gemma.  It makes such a tidy little package. Plug in your battery. If you've already uploaded your code, the NeoPixels should all light up. Success! ![adafruit_gemma_04_assembled.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/428/medium640/adafruit_gemma_04_assembled.jpg?1550596457) ![adafruit_gemma_05_plugbattery.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/430/medium640/adafruit_gemma_05_plugbattery.jpg?1550596605) If the NeoPixels don't light up, here are a few things to check: - Did you solder to the correct pads on the Jewel? Be sure you soldered to **IN** and not **OUT** with the white wire. - Make sure your code specifies that the pixels are on pin **D1**.  - Be sure the **on/off switch** on the face of the Gemma is turned on. - Be sure the **battery** has charge. ## On/Off Switch If you're happy using the Gemma's onboard on/off switch, you're done! Go make the hat.  If you want an easier way to turn the hat on and off while you're wearing it, adding a tactile switch is really worth the extra effort. Trim the leads on your tactile on/off switch until they're about 2" long. Cut both ends off the JST extension cable, also to about 2". Put some heat shrink on each wire. Solder the black wires of the extension cable right back together (only shorter). Solder each end of the red wires to one of the switch leads. You'll end up with short extension cable with a switch. Plug the battery into the male end and the female end into the Gemma. Now you can turn your lights on and off by feel. ![adafruit_gemma_17_switchwires.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/431/medium640/adafruit_gemma_17_switchwires.jpg?1550596969) ![adafruit_gemma_18_switchwired.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/432/medium640/adafruit_gemma_18_switchwired.jpg?1550596994) # Glowing Fascinator Hat with Gemma M0 and MakeCode ## Build the Fascinator ![](https://cdn-learn.adafruit.com/assets/assets/000/071/513/medium800/adafruit_gemma_LED_Fascinator-10.jpg?1550619733) Cut an oval out of craft foam and a matching one out of sticky-back felt. Mine are about 5" x 7". Stick the felt to the craft foam. Cut a small wedge out of both layers.  ![adafruit_gemma_10_cutcircles.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/461/medium640/adafruit_gemma_10_cutcircles.jpg?1550607872) ![adafruit_gemma_11_wedge.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/462/medium640/adafruit_gemma_11_wedge.jpg?1550607903) Close the gap with your fingers and test the fit, seeing if it curves nicely to your head (or your trusty skull-head friend's head). Once it fits, use hot glue to close the gap. If you want to shape it a bit more, hit it with a heat gun for a few seconds until it settles into its curve. ![adafruit_gemma_12_hotglue.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/463/medium640/adafruit_gemma_12_hotglue.jpg?1550608067) ![adafruit_gemma_13_fit.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/466/medium640/adafruit_gemma_13_fit.jpg?1550608130) Attach two hair clips to the inside of the fascinator with hot glue. Don't rely on the hot glue, as it will fail at exactly the wrong moment. Just use it to hold while you sew the clips firmly in place, making sure they open and close easily. Try it on, and make note of which side is the front respective to the way the clips want to go into your hair. ![adafruit_gemma_15_sewclips.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/468/medium640/adafruit_gemma_15_sewclips.jpg?1550608333) ![adafruit_gemma_14_clips.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/467/medium640/adafruit_gemma_14_clips.jpg?1550608295) I'm using a white carnation from the craft store to diffuse the lights. To make it as flat as possible, pull off the back sepal leaves and clip the stem short. This will make most cloth flowers fall apart immediately, so if this happens to yours, secure the little stumpy stem with some more hot glue. I wanted a black and white look, so I took a sharpie and colored in all the edges of the white petals. This was incredibly effective. ![adafruit_gemma_16_flowerassembly.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/469/medium640/adafruit_gemma_16_flowerassembly.jpg?1550608505) ![adafruit_gemma_17_colorflowers.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/471/medium640/adafruit_gemma_17_colorflowers.jpg?1550608716) Now it's time to start decorating. I laid down a layer of netting, then some shaped craft foam and hot glued them to the hat.  I added a triangle of fosshape (a felt that hardens into shape when you heat it) to add height and create a space for the battery. You could also use cardboard or card stock for this, if that's what you have on-hand.  ![adafruit_gemma_18_materials.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/500/medium640/adafruit_gemma_18_materials.jpg?1550618979) ![adafruit_gemma_19_mount.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/501/medium640/adafruit_gemma_19_mount.jpg?1550619039) I glued feathers over my little battery pocket then slipped the battery inside, making sure it fits fairly tightly. I don't plan to take the battery out (I'll just charge it in place) so I added some glue around it to be sure it doesn't slip out. I added some tubular crin for danglies, and made sure to pay attention to height! ![adafruit_gemma_20_glueelectronics.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/503/medium640/adafruit_gemma_20_glueelectronics.jpg?1550619169) ![adafruit_gemma_21_crin.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/505/medium640/adafruit_gemma_21_crin.jpg?1550619222) Glue a clear marble or other dainty thing into the center of the flower, then sew it to the Gemma through the unused pads, sandwiching the jewel behind the flower. Glue the flower petals down to the fascinator, making sure you can still reach the reset button and the USB port and battery port on the Gemma. If you went with the capacitive touch code option, make sure you can access pin **D0** for color changes. ![adafruit_gemma_22_flowercenter.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/506/medium640/adafruit_gemma_22_flowercenter.jpg?1550619321) ![adafruit_gemma_23_sewgemma.jpg](https://cdn-learn.adafruit.com/assets/assets/000/071/507/medium640/adafruit_gemma_23_sewgemma.jpg?1550619485) Once it's all secured, clip it into your hair. Pair it with a [color touch necklace](https://learn.adafruit.com/gemma-color-touch-pendant-necklace/introduction) and some [LED spats](https://learn.adafruit.com/neopixel-spats) for a fabulously high-tech ensemble. ![](https://cdn-learn.adafruit.com/assets/assets/000/071/509/medium800/adafruit_gemma_LED_Fascinator-7.jpg?1550619584) ## Featured Products ### Adafruit GEMMA M0 - Miniature wearable electronic platform [Adafruit GEMMA M0 - Miniature wearable electronic platform](https://www.adafruit.com/product/3501) The **Adafruit Gemma M0** is a super small microcontroller board, with just enough built-in to create many simple projects. It may look small and cute: round, about the size of a quarter, with friendly alligator-clip sew pads. But do not be fooled! The Gemma M0 is incredibly... In Stock [Buy Now](https://www.adafruit.com/product/3501) [Related Guides to the Product](https://learn.adafruit.com/products/3501/guides) ### NeoPixel Jewel - 7 x 5050 RGB LED with Integrated Drivers [NeoPixel Jewel - 7 x 5050 RGB LED with Integrated Drivers](https://www.adafruit.com/product/2226) Be the belle of the ball with the NeoPixel Jewel!  We fit seven of our tiny 5050 (5mm x 5mm) smart RGB LEDs onto a beautiful, round PCB with mounting holes and a chainable design to create what we think is our most elegant (and evening-wear appropriate) NeoPixel board... In Stock [Buy Now](https://www.adafruit.com/product/2226) [Related Guides to the Product](https://learn.adafruit.com/products/2226/guides) ### Lithium Ion Polymer Battery - 3.7V 350mAh [Lithium Ion Polymer Battery - 3.7V 350mAh](https://www.adafruit.com/product/2750) Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 350mAh for a total of about 1.3 Wh. If you need a larger (or smaller!) battery, Out of Stock [Buy Now](https://www.adafruit.com/product/2750) [Related Guides to the Product](https://learn.adafruit.com/products/2750/guides) ### Tactile On/Off Switch with Leads [Tactile On/Off Switch with Leads](https://www.adafruit.com/product/1092) Squeeze once to turn on, squeeze again to turn off! This clicky switch makes a great power switch or mode toggler. We like this switch because it's easy to embed in a seam for easily powering up/off wearable and fabric projects. Can handle up to 14V and 2 Amps! This is a really satisfying... In Stock [Buy Now](https://www.adafruit.com/product/1092) [Related Guides to the Product](https://learn.adafruit.com/products/1092/guides) ### JST-PH Battery Extension Cable - 500mm [JST-PH Battery Extension Cable - 500mm](https://www.adafruit.com/product/1131) By popular demand, we now have a handy extension cord for all of our JST PH-terminated battery packs (such as our LiIon/LiPoly and 3xAAA holders). One end has a JST-PH compatible socket, and the other end has a matching plug. Between the two, 500mm of color coded wire. Handy for wearable... In Stock [Buy Now](https://www.adafruit.com/product/1131) [Related Guides to the Product](https://learn.adafruit.com/products/1131/guides) ### Adafruit Micro Lipo - USB LiIon/LiPoly charger [Adafruit Micro Lipo - USB LiIon/LiPoly charger](https://www.adafruit.com/product/1304) Oh so adorable, this is the tiniest little lipo charger, so handy you can keep it any project box! Its also easy to use. Simply plug in the gold plated contacts into any USB port and a 3.7V/4.2V lithium polymer or lithium ion rechargeable battery into the JST plug on the other end. There are... In Stock [Buy Now](https://www.adafruit.com/product/1304) [Related Guides to the Product](https://learn.adafruit.com/products/1304/guides) ## Related Guides - [Ursula's Seashell Necklace](https://learn.adafruit.com/ursulas-seashell-necklace.md) - [Adafruit IO Home: Security ](https://learn.adafruit.com/adafruit-io-home-security.md) - [Magic Light Bag of Holding](https://learn.adafruit.com/magic-light-bag-of-holding.md) - [Sound Reactive NeoPixel Peace Pendant](https://learn.adafruit.com/sound-reactive-neopixel-peace-pendant.md) - [CircuitPython Hardware: ILI9341 TFT & FeatherWing](https://learn.adafruit.com/micropython-hardware-ili9341-tft-and-featherwing.md) - [CircuitPython I2C and SPI Under the Hood](https://learn.adafruit.com/circuitpython-basics-i2c-and-spi.md) - [Mystical LED Halloween Hood](https://learn.adafruit.com/mystical-led-halloween-hood.md) - [Kaleidoscope Eyes (Trinket-Powered NeoPixel LED Ring Goggles)](https://learn.adafruit.com/kaleidoscope-eyes-neopixel-led-goggles-trinket-gemma.md) - [Your Very First Circuit Sculpture](https://learn.adafruit.com/first-simple-circuit-sculpture.md) - [Techno-Tiki RGB LED Torch](https://learn.adafruit.com/techno-tiki-rgb-led-torch.md) - [CircuitPython Basics: Digital Inputs & Outputs](https://learn.adafruit.com/circuitpython-digital-inputs-and-outputs.md) - [Charger Charm - 3D Printed holder for Micro LiPo USB Charger](https://learn.adafruit.com/usb-charger-charm-3d-printed-holder-for-micr-lipo-usb-charger.md) - [Starduino: 8-Bit Super Mario Tree Topper](https://learn.adafruit.com/starduino-neopixel-8-bit-mario-star-tree-topper.md) - [NeoPixel Ring Bangle Bracelet](https://learn.adafruit.com/neopixel-ring-bangle-bracelet.md) - [AdaBox 007](https://learn.adafruit.com/adabox007.md)