Membrane keyboard diagram.
Credit: FourOhFour, WikiMedia Commons

Creating this ‘holes’ layer was a seemingly straightforward yet laborious process – cutting 900 holes precisely ain’t easy!

In order to ensure that 30 columns and 30 rows are perfectly exact we used the neoprene cutout stencil to trace and cut squares using an Exacto knife. We also experimented with using a Dremmel cutting attachment, but decided not to use it due to a higher percentage of forced error and lack of safety equipment.

The process loop was as follows:

1. Align stencil with as many cut squares as possible, leaving the left or rightmost columns on uncut membrane space.
2. Trace squares lightly through stencil. Remove stencil and very slowly cut with Exacto knife. If having difficulty cutting, replace with new blade.
   

   Traced squares among cut squares, foam crumbles.

3. Check alignment and proceed to next row or column.

After many hours of work between Mani and me, we completed all 900 holes! Here is the entire grid, some trimming still required:

The almost-complete grid: all 900 holes with some trimming required.

As outlined in ‘Face’ of the Quilt, I am testing fabric to see how it diffuses, affects affect, and obscures or reveals hardware. I quickly tested a broad array of swatches. Their textures included felt, mid-weight cotton, a polyester-stretch mix, and lightweight linen. The colors included black, brown, grey, beige, and white. The colors are kept neutral because the background of the quilt will be similar to the original beige.

I was first intrigued by how introductory physics principles became useful: light colored or white fabrics tended to diffuse light while dark colored or black fabrics tended to absorb light and reveal the shape of the LED beneath. I demonstrate this as follows:

This gradient of felt (control for weight and texture) shows how lighter fabrics diffuse light while dark colors absorb them

In regards to the LED hue, there seemed to be less effect on the diffusion because there is a high intensity for all colors. Seen here, we see a slightly different diffusion for blue-toned colors but the diffusion remains mostly consistent:

The LED hue has less effect on diffusion due to high intensity (seen here under brown felt)

If I were to pick a personal favorite, it would be the mid-weight cotton-linen mix. The flecks and uneven texture lent it a natural, handmade feel that could be reminiscent of the 1800s quilt – while the modern cool blue light is the perfect juxtaposed touch:

Cotton-linen mix – a very natural, rough feel – juxtaposed with cool blue modern light

For a full tour of the test, we see below the collective effects of different fabric, where color had a greater effect on diffusion than texture:

Fabric Printing

We are investigating printing the Peabody design from an online fabric design service, Spoonflower, instead of sewing the design ourself. The former not only requires less time and money, but may also provide better presentation.

The idea is to design the topmost layer of the quilt in Illustrator exactly to scale and order the design to scale from Spoonflower. The options for the design are as follows:

1. Orange fill on laser-cut design. This layout borrows dimensions from the stencil used to cut holes for the LEDs, such that the grid aligns exactly with where the LEDs shine through. 
2.  Orange grid with major axis, and minor gridlines. This design is closer to the original design that Peabody envisioned.
3.  Orange grid, thin gridlines, less major axis. This is still more similar to the original Peabody design than #1, but reduces emphasis on a divide. Due to the spacing of our LEDs, this is more likely than #2.

Though the online interface for the Peabody quilt allowed for flexibility on the grid design, we are physically constrained by the spacing of the LEDs which do not account for a major axis.

Next, I discovered that the maximum size for Spoonflower designs is about 21″, though you order fabrics in printable areas ranging from 41″ to about 52″. So, we cannot upload our design as-is. Instead, we need to upload 1 corner of the grid and repeat it in a “mirror” fashion:

Spoonflower design interface. Single corner design selected (first row on left). Shown is a mirror pattern that can be used to print a full grid.

Fabric Pricing

I performed a Python web scrape and export to CSV using Spoonflower’s product page to create a straightforward list of every type of fabric offered and the exact cost for our quilt (1 meter). Though, accounting for error and extra fabric, these costs may be higher.

Elizabeth Peabody’s original design

Aspects to consider include:

1. How well do the NeoPixels perform in varying light conditions? Many example projects photograph NeoPixels in the dark. Most likely, we want users to interact with the quilt in partially dim lighting. If necessary, office lighting
2. How will we diffuse the light to create defined borders and retain clarity? In Peabody’s work, richly colored square cutouts were placed on top of a grid. Now, we seek to recreate the effect using LED lights
3. What kind of texture do we want, visually and physically? Should the two mismatch? As a result, how can it create convey a message? (i.e. a soft and smooth texture may convey innocence and warmth and a rough texture may convey stability, trustworthiness, weight)
4. Do we want the hardware to be felt or obscured? Pragmatism may dictate this result, but the difference may determine whether the user perceives an electronic quilt or a different device

In regards to 1. Light conditions and 2. Hardware… We can examine projects made with NeoPixels from Adafruit. The company that created our LED strips publishes many popular example projects that illuminate (heh) the power of NeoPixels:

NeoPixel (our LEDs) glow fur scarf

NeoPixel (our LEDs) bandolier costume

In regards to 2. Defined borders and clarity… we can take a cue from recessed LED light fixtures. Some office buildings opt for LED versus fluorescent lighting fixtures. In these cases, they may use panels of LEDs with polystyrene (PS) diffusing plates of varying thickness. A possible implementation could include a single 1 meter by 1 meter sheet of PS plastic with divisions cut between each touch location to allow for pressing. Examples of LED light fixtures include:

Recessed LED light fixture with polystyrene (PS) square diffuser plate

LED panel diffuser with PS plate

In regards to 3. texture… we have not decided between rough and smooth, but a possible implementation may include rough or smooth cotton fabric. Cotton is affordable, sturdy, and offers a wide range of textures. If choosing a rough fabric, it may be more difficult to find a color that is not a shade of light brown, light green, or in natural shades and block more light. Smooth fabrics tend to come in more modern colors and diffuse light more softly. Examples of fabric include:

An example of a rough fabric; may allow less light to show through

An example of a smooth cotton fabric; may allow more light to show through

In regards to 4. hardware salience… in meetings we have discussed how we might create the “LED sandwich.” A possible implementation is to create “troughs” for the LEDs by placing strips of foam in between each strip of LEDs. This way, the surface will feel roughly uniform, and a potential user may believe a single LED panel lies beneath. However, we may encounter issues with this approach because our neoprene is 1 millimeter thinner than our LED strips, as pictured:

Diagram depicting LED strips with our neoprene foam between; the strips are slightly taller than the foam we purchased

The Peabody Project’s present priority is to complete the physical product. We want to allow for interaction, say in a gallery or exhibition, and sooner than later allow anyone to learn and appreciate Elizabeth Peabody’s contributions to education and data visualization. Combinatorially we already see numerous implementations for our design, each with its own implications for the end product (financial cost, affective experience, etc.). After taking these ideas and experimenting on a small scale, we will be able to determine which path we will take for each.

To take a simple keypad prototype to scale, I first followed Dr. Klein’s advice and created a simple “map” of the membrane switch layout at scale:

Row and column ‘map’ for conductive traces at scale, 1×1 meters

I experimented with multiple materials for the traces:

1. Single core copper wire (to be partially sheathed at ‘touch points’ where a row and column intersect)

2. Slim (0.5″) copper tape with conductive adhesive

3. Wide (1″) copper tape with conductive adhesive

4. Slim (0.25″) conductive fabric tape

I laid them out on a 1/4” thick neoprene mat, meant to eventually serve as the ‘insulating separator’ between the two conductive trace layers.

Top to bottom: 1″ copper tape, single core wire, conductive fabric tape, 0.5″ copper tape on neoprene

After testing, the 1″ copper tape won: it provides a wide conductive surface area, sticks with conductive adhesive (can be used to attach wires on the bottom), is relatively durable with repeated use, and (very importantly) stays economical at 60 meters.

The one downside is copper tape’s brittleness: it performs best on hard, flat surfaces and most likely wont allow for a fully soft, flexible quilt when picked up. Thankfully, we interact with the quilt on a flat surface. The touch mechanism can seemingly become ‘part of the table,’ allowing for a soft material on top to become ‘the quilt.’

I’ve begun putting copper tape on the printed grid:

Initial layout on grid – testing copper tape (seen as columns from this angle) and fabric tape (seen as rows, left to right)

So far, the copper tape has not been working very well. I have prototyped with alligator clips, male-male wires (directly on top of the copper tape), and male-male wires in series with resistors. None have worked quite like the silver traces on plastic membranes with male-male wire. I will continue debugging and conduct more research into how to construct a working copper trace membrane keypad, such as a large version of this example.

With only the following materials I was able to make a very simple keypad controller:
– silver conductive ink
– plastic sheet
– felt
– electrical wire
– Arduino

I will be first to offer that this is a rough prototype – I simply wanted to prove the concept.

Luckily I was not first to desire a homemade membrane switch. I found a membrane switch Instructable which despite its informal photography and formatting was as useful and straight forward as they come. As shown, making a keypad is very easy!

Prototyping Process

I printed out the following from the Instructable to use as stencils:

Conductive trace stencil rows and columns, with the slim end being the side that inputs to the Arduino. Source: Instructables, User TheBestJohn

In order to create the following keypad:

Keypad layout

I laid the plastic sheets on top of these stencils and drew traces in silver conductive ink:

Stencils with plastic sheets on top, drawn on with silver conductive ink

Important note: this is not the intended application of silver ink pens. They are used for small repairs. However, I wanted to simulate silver ink printed on a membrane per the manufacturing process. It quickly became apparent as I squeezed the pen with nontrivial effort that either I need to work my grip strength in the gym, or the pen is not designed to be squeezed and drawn for long periods of time.

To feed electricity to these traces, on each I attached a male wire using electrical tape and subsequently fed the other end into the Arduino Mega.

Attaching wire to conductive trace with electrical tape.

Attaching wire to conductive trace with electrical tape.

Now the conductive trace rows and columns must be separated. I didn’t have the proper “squishy” insulating material on hand and used white felt instead. It was a little too stiff, but worked. This created the final product:

House-made, locally crafted membrane switch: the final product

Taking a look “under the hood.” I plead that you refrain from passing judgement on my egregiously uneven felt holes

I tested the keypad with the provided Arduino code (link to download from the author) and it worked perfectly:

Testing, testing: numbers “4, 5, 6” on keypad

Arduino’s serial output, exactly as intended: “4, 5, 6”

I created a cover for the keypad as well, but the felt was too stiff to allow a working control mechanism through both felt and paper.

Final Thoughts

This design working so well simply brightened my day. No need for capacitive touch’s serious grounding and no problem. Next, we need conductive material that can stay affordable at 60 meters (60 rows, columns total) and work well across conducive material (1 meter for each row, column).

Implementing touch sensing and light-up feedback with microcontrollers to create Elizabeth Peadbody’s quilt is fitting to her way-ahead-of-its-time belief that play was intrinsic to learning. Our Neo-Victorian quilt is feeling very real, and very exciting.

How Keyboards Do It

Luckily, as I suspected, keyboards do not require a unique button at each key. Instead, they use a series of rows and columns that intersect at each key. This handy animation of a circuit diagram explains the structure well:

Circuit diagram for microcontroller scanning mechanism on keyboard. Credit Kai Burghardt, WikiMedia Commons

Though simplistic, this schematic more closely resembles a keyboard:

FC Keyboard Key Schematic. Credit AtariUSA, Inc.

I’m not going to delve into the inner workings of the computer and its keyboard, its hardware interrupts, etc. what is important is that this matrix design, by using intersections, tremendously reduces our hardware requirements.

Looking at the animated diagram, notice the ‘microcontroller’ block – this is exactly what an Arduino is! Let’s say we implemented an Arduino touch pad with this structure, minus ‘S0.’ We would need 3 pins for the columns and 3 pins for the rows, 6 Arduino pins total for 9 unique inputs. Pretty good deal. However, what if we needed 900 unique inputs? Having 30 rows and 30 columns requires 60 pins. This is much better than, say, 1800 – 2700 pins required (without multiplexers) for 900 single buttons.

Possible Implementations

Keyboards are hard (normally). Quilts are soft (normally). We are not trying to fit or not fit into any norms here, but the mechanical keyboards beloved by serious typists: not our target.

On the other hand, flexible membrane keyboards can be useful models.

Flexible keyboard. Credit: Ergonomics Simplified, LLC

Our quilt doesn’t need to have flexibility akin to yoga mats (or instructors), but studying the membrane switches in these keyboards can inspire a quilt-appropriate control schema.

Membrane Switches

I’ve always been a fan of How It’s Made. I watch it for fun when it comes on the Science Channel. Of course, after learning about keyboard membrane controllers, I turned to see if my perennial source of manufacturing enlightenment has covered their creation. And of course, it has.

Chronicled below is the making of a control board for an oven from ‘How It’s Made: Membrane Switches.’ You are probably using membrane switches on your oven or washing machine at home right now. However, the oven control board and membrane keyboard’s internal components are very similar – the membrane keyboard simply has dome switches in addition to the membrane to provide gratifying & necessary tactile feedback.

Below, we see that silver conductive ink is screen printed onto plastic membranes.

Screen printing silver conductive ink. Credit: How It’s Made

Here, we can view conductive traces up close.

Conductive traces on membrane, detail. Credit: How It’s Made

Lastly, we see an adhesive separator applied to the circuit.

Applying adhesive separator. Credit: How It’s Made

Why is this applied? This can be explained with yet another helpful diagram. The separator can be thought of as the ‘holes’ layer in black. This layer separates two layers of conductive traces.

Membrane switch control diagram – left, ‘off’, right, ‘on’. Credit: FourOhFour, WikiMedia Commons

The conductive traces on the bottom are carrying a current. When someone presses the top, they press another conductive trace that bridges the gap between the traces on the bottom layer. This switch is now ‘closed’, instantly detected by the device.

Possible Implementations

The Peabody recreation can definitely use rows and columns of conductive materials, separated by flexible insulating material in-between, to create an efficient control paradigm that can also bend like a membrane keyboard. Possible combinations include:

• Plastic membranes with screen-printed silver ink or embedded silver, separated by flexible, insulating material (i.e. plastic foam packing cushion materials)
• Soft buttons made with two layers of conductive fabric and felt in-between (the separating material needs to be more stiff here)
• Plastic coated, stranded copper wire woven into fabric – one sheet rows, one columns – sheathed (casing removed) at intersection locations and soldered, separated by flexible, insulating material

Each possible combination has unique pro’s and con’s, but the most important next step is to venture into the wild and begin rapid prototyping a 3×3 matrix control pad with the Arduino Mega (similar to the animated circuit diagram up top, minus ‘S0’). The results will show whether this concept can handle 900 unique inputs just as well as single buttons and capacitive touch, only much more efficiently.

So, I rapid prototyped and tested four flexible materials for capacitive touch sensing with Arduino’s CapSense library:

• Copper mesh
• Copper tape
• Conductive wool yarn
• Conductive cloth

I broke the problem down to its smallest component – one sensor using one piece of the above materials – and created a very simple animated schematic with an online circuit simulator. Notice the latency between the send pin going high (‘H’) and the receive pin going high (‘H’). This is what is detected by CapSense as you touch the material:

You can further play with this simulator setup. If you would like to learn more, the prototyping and schematic setup was inspired by a very well done and straightforward CapSense video tutorial that explains it well.

The test I used looked like the following:

Which produced this visible change in the serial output, printing milliseconds and the output of the sensor:

I also tested what would happen when I added LEDs on top of the material:

Which produced a serial output change one order of magnitude smaller for conductive fabric, copper mesh, and copper tape:

I am unsure that the change caused by the material with the LED strips is large enough for the sensor to work effectively.

1. Copper Mesh
︎ worked well on its own
︎ seemed to work through LED strips powered off

2. Copper tape
︎ worked well on its own
︎seemed to work through LED strips powered off

3. Conductive wool yarn
︎ worked well on its own
✘ did not work through LED strips powered off

4. Conductive fabric
︎ worked well on its own
︎seemed to work through LED strips powered off

Grounding

Properly grounding the setup ‘A to Z’ – laptop, Arduino, conductive material – was tricky. When the laptop wasn’t plugged in to an outlet, the higher serial output was hardly detectable. But when plugged in thus using main power as ground, the capacitive touch worked very well. Also, because my desk was static dissipative, I put everything on top of a large cardboard box (i.e. an insulating material).

Inductance

It is very important to note that the LED strips were powered off – when powered on, the current passing through the LED strips can create an electromagnetic field that may or may not cause inductance with the other wires for the conductive fabric. My background doesn’t allow me to say for sure, but it’s worth noting and testing in the future.

Reliability vs. Replicability

If each square in our Peabody blanket were to be an individual touch sensor, we would require 900 unique inputs/output ports. Even with multiplexers and Arduino Megas, allowing each sensor to be a special snowflake may well be an implementation nightmare, only worthwhile later when debugging.

We could instead reduce input/output requirements by making, say, each row one capacitive sensor that is able to determine the position of touch along the quilt’s two meters. (Michael Nietsche in Digital Humanities hypothesized this is not possible but has not tried it; thus, I must try it).

Thoughts

Controlling an object with the touch of fabric has some element of surprise. Commonly we interact with capacitive touch interfaces via cold, hard glass and plastic blocks we carry in our pockets. There are pixels in the block. Those pixels tell us what our touch will do. The little blue box with a letter ‘f’ inside provides an affordance to press followed by dynamic feedback, filling our block with vacation albums and videos of indulgent recipes in 30 seconds or less.

Now we encounter soft, flexible fabric and wool thread that we’ve associated with being passive our entire lives, worn as the favorite jacket or snuggled into as the favorite blanket. But by allowing them to carry current and implementing capacitive touch, our interactions become active, thus introducing a new conceptual model for control interfaces that does not require the push, flick, pull of everyday affordances but rather a light touch on fabric, like tapping a friend on the shoulder to get their attention.

Meta

My first blog post outside of ’thoughts’ feels very cut and dry. I think my scientific paper persona was speaking loudly: here is introduction, here is methods, here is results, here is discussion. My hope is that the more blog posts I write, the more conversationally I’ll be able to ponder upon and weave in discussion about some of the touch interaction’s nuances and implications. Things a schematic doesn’t talk about.