Building the Scrablet – summary

Posted on March 19, 2011

0


In Februari I built the Scrablet (“Screen” + “Tablet”). It is one of the “hands on is better than theory” projects to find out how tablets and “post PC’ interfaces can become useful in a day to day scenario.

It is part of a bigger project that combines all kinds of interaction-possibilities to work with computers and smart environments.

In this post I will only cover the main issues and the main design issues I found and solved. Many were done and solved by improvisation.

As there are a lot of photos, I separated the detailed report on the project in days, to show you the build-up and have a clear narrative. Each day is a post and  filled with photos showing the progress and design choices to make something out of crappy materials.

Overview

Day one: Test-running the hardware 

To see if the electronics we received are doing as we assume, we make a test-setup and run it with the Fit-PC we bought for this project.

Day 2: Selecting the materials and building the body 

Using the Touch screen and the LCD screen as references and everyday materials like bamboo place mats, yarn, a hobby knife and superglue the Scrablet body is created.

Day 3: Preparing, modifying and laying out the electronics 

The Scrablet contains five circuit boards: the HDMI to VGA converter, the VGA to “LCD screen” converter, the button bar with the on/off and menu switchers, the five wire Touch screen USB board and the electronics for the LCD backlight. To fit everything in we create holes in the bottom and use white foam that came with the Touch screen.

We also make some modifications to make the total solution more compact.

To be sure we got everything right, we test run the electronics.

Day 4: Fitting in the screen and touch-screen 

With everything layed out, it is time to fit in the LCD screen and the Touch screen. Using no other means of measurement than the real objects we create a custom made solution that fixes the screens in such a way that we can easily assemble and dissasemble the end product.

Day 5: Test running and making the final parts to close the Scrablet 

The scrablet is up and running and we re-enforce and close all the open parts, including the backside. Using a cheap 6 euro T-shirt made from stretchy material we span the body so that we have an even surface.

Day 6: Painting the Scrablets body 

To be brief: On hind-sight, combined with the fabric, this was a very bad idea. The paint takes ages to dry and the surface looks quite rugged. The end result is not bad though.

 

Main parts

The main parts of the Scrablet in a working setup: Touch screen, LCD screen, Fit-PC and electronics

The main parts of the Scrablet are:

  1. The Touch screen – ~70 euro – bought on eBay from nyjTouch
  2. The LCD screen – 0 euro – scavenged from an old Acer Laptop
  3. The Fit-PC – ~400 euro – bought online, running Linux Mint
  4. The electronics to run the LCD screen as a VGA monitor – 25 euro – bought online at eBay from nyjTouch

Trying the layout

I tried several options with the layout, deciding in the end for a more compact form factor you will find below, that would allow for the Scrablet to be transported more easily.

Main design goals (yarn, superglue and a knife)

Apart from the parts (which were ordered online via eBay and scavenged from an old Acer laptop) I wanted to:

  1. Create a simple and usable prototype – without putting the bar higher than that. It is tempting to try and make something awesome, but that requires better tools and more money.
  2. Use a low tech approach with low tech materials so that anyone can reproducethe results - going as low-tech as possible using the most basic cheap tools you can find: yarn, superglue and a knife, and the space (a small desk) I had at hand
  3. Must be solid enough to be transported – My first layout (see photo above) resulted in a flat design, but would be hard to fit in a standard laptop bag. Also the extended width would introduce more torque on the screen, making it more vulnerable

With the choice to go for a low tech approach I excluded all other roads I could have followed: involving more sophisticated materials like triplex, hack-saws and drilling machines and chose the most basic of all tools.

Why I wanted to build the “Scrablet”

I could buy a tablet computer or touch screen. The total cost would be lower than my Do It Yourself from Scrap project and the result would look much better than whatever I could make from superglue, yarn, cheap bamboo placemats and a cheap ass stretch T-shirt.

But from that approach I would learn nothing.

I also had my mind set on building a portable / stand alone version of this:

Wacom tablet

According to my specs, the tablet should allow you to:

  1. Work stand-alone as a tablet computer – allowing you to go into the fields and be creative until your battery goes dead.
  2. Work with a powerful (desktop) machine – as a second screen

See this blog post from 2009: Concept sketches – “The iPad killer” for the deeper rationale behind the Scrablet.

Experiences – a summary of goals (not) reached

Not reached:

  1. Portability and battery packs – It is hard to find a battery pack to feed the Scrablet. The LCD screen consumes 12 Volts. The Fit-PC consumes 12 Volts and beween 7 to 10 Watt. I have postponed this part to the moment in time where I can provide the battery pack.
  2. Making it unbreakable – Well: no. You need a different type of screen for that.
  3. Making it light and compact – No. The Touch surface weights 500 grams. The LCD screen another 500 grams. Adding the casing and electronics adds another 200 grams, leading up to 1.200 grams without the battery (add another 300 grams) and the computer-part (300 grams).

Almost:

  1. Use a low tech approach with low tech materials anyone can reproduce - At a certain point I could not avoid buying a drill and drills. So: not entirely.

Reached:

  1. Building a usable and portable Touch screen – Completely successful. The Scrablet fits in a computer bag and is really nice to work with.
  2. Drawing on the Scrablet – Is a very nice experience. I tried it connected to a Netbook and the Fit-PC, running Artrage. The resistive screen is not as awesome as a Wacom tablet and lacks precision, but once you are used to it, the limitations can be worked around and getting direct visual feedback on your drawing is really great.

On hind sight- what could have been done better or differently (within the set goals)

  1. Building the casing with wood and cardboard – The bamboo-solution might be better for rigidness, but costed a lot of glue (6 bottles) and effort (almost 3 full days) to get it right. Using cardboard is a better choice for all the main parts except where there is a lot of tension on a small surface as is the case with the front and back of the Scrablet. For this, wooden strips – scavenged from wooden boxes used for packaging oranges (scavenge your local supermarket) – would still be the best choice.
  2. Going for simple VGA input- It turned out that my new Dell laptop and the Samsung netbook I bought later for another project (see next post) do have VGA but no (standard) HDMI out.
  3. Keep the battery pack of the scavenged Acer Laptop – Even though it was crap after three years of use, it might have provided a good starting point.
  4. Using fake leather or some other already processed material instead of paint - Painting the construction was a mistake in my opinion. It takes ages to dry and due to the lack of proper materials and lack of care it did not turn out the way it could have been.

Materials used for the casing

To build the base Scrablet casing, I bought:

  1. Two bamboo placemats with “flat” bamboo strips – 3 euro – providing the base material for the casing
  2. A set of four bamboo placemats with round sticks – 5 euro – providing the sides of the casing and extra material to make the rounded edges

I used and scavenged

  1. Plexiglass from the Touch Screen package - nyjTouch packages the Touch screen in cardboard with Plexiglass on two sides on the outside. This material was very useful during the project due to its hardness and rigidness.
  2. The white foam inside the nyjTouch package – the white foam in which the touch screen and electronics for the LCD screen was packages served two purposes:
    1. To create the embeddings for the electronics
    2. To function as a cushion for the LCD screen

My toolbox consisted out of:

  1. Four to six bottles of super glue – about 16 to 20 euro in total – to allow me to work quickly
  2. One bottle of Vinyl glue to glue wood – 4 euro – to do the bulk-glueing
  3. Yarn - 1 euro – to sew and bind the bamboo construction and make a stronger construction than possible with superglue alone
  4. A set of sowing needles – 1 euro in a set of 10 – to allow me to sue the yarn
  5. A cheap Chinese built soldering iron - 15 euro – to do some basic modding on the hardware I bought
  6. Soldering tin – to solder with

This covered for 95% of all the things I needed to build the casing for the Scrablet as the materials were cuttable with the knife and I had no holes to drill for the main casing.

To create a more flat surface I bought:

  1. One stretch-shirt, color white – 6 euro – allowing me to span the bamboo surface

Finalizing the project with the top-cover for the Touch screen I could not find a good alternative to fix the glass panel to the bottom area of the screen. So after one hour of deliberating alternative solutions I yielded and bought:

  1. A battery driven hand drill – 120 euro – the most expensive tool I bought for this project
  2. A set of drills – 8 euro – to drill with

Basic construction issues

Any kind of material that is easy to process has issues. I considered two options:

  1. Cardboard - easy to process, easy to build with
  2. Bamboo as used in Ikea drapers – easy to process, easy to bend, easy to build with

At that point in time I assumed bamboo would be stronger material than cardboard, mainly knowing the bamboo used for fishing rods and walking canes. In reality the bamboo I eventually bought – used in place mats – was surprisingly soft. On hind sight, cardboard – re-enforced with plastic – might have been a better choice.

The issues I had to deal with were the following:

1: Creating a rigid casing

To make a rigid construction that would not break easily I would need to use some tricks to enforce the bendable bamboo bars and the “casing” in which the screen would rest.

Creating a stronger casing - using strips and wire to make stronger ribs

I created ribs with two and three strips and put these lateral to the strips that shaped the placemat.

Creating a stronger casing - ribs and a re-enforced corner

I created re-enforced corners by glueing and binding triangles to the wooden strips that made the casing.

The end result: a reasonably rigid construction with re-enforced sides and ribs to support the back

The end result was strong and rigid enough to contain the screen and offer some protection from torque on the screen by use.

As the ribs were not long enough, I alternated the long parts and filled the gaps with short custom made parts.

2: Creating a simple but solid way to mount the LCD screen

To mount the LCD I could and did not really want to revert to screwing it to the construction. First of all because the material was too soft. Second due to the amount of work it would deliver to do this right. I decided to go for the following strategy:

  1. Clamp the top side – into a “slot” that will hold the top part of the screen
  2. Screw the bottom side of the screen – to the construction, using the bolts that were cast into the original cover of the Acer LCD screen

To clamp the top side I needed some kind of material that would be flexible and “push” the screen up to the edge underneath it would be wedged.

Foam and ledge to clamp top side of LCD screen in

Testing the construction with the LCD Screen

Screen in casing, screwed tight

3: Finding a way to get the nuts in the right place

Using no means of measurement at all, I needed a simple way to position the nuts in the exact right position related to:

  1. The holes in the flaps that are used to screw it to the backside of the monitor
  2. The casing

Superglue was my friend here. I first screwed the nuts to the flaps of the screen, then I glued them to a “bar” made out of three strips from the second place mat.



Using superglue to position the nuts on a "bar" from bamboo strips: related to the holes of the flaps on the LCD screen

I then carefully screwed the bolts a bit tighter and lowered the LCD screen into the right position. Using superglue on the bottom strip on each side the blocks with the nuts were attached to the casing, in the right position to secure the LCD screen.

Nuts, attached to the bamboo strips and the casing

4: Securing the nuts in a more solid way – using toilet paper and super glue

Using just superglue would not be strong enough to hold the screen and really screw the screws tight to the casing. They would easily come off.

So I used another aspect of superglue that I discovered by experiment when repairing the lid of a ceramic teapot: If you use toilet paper with superglue, you can create a very strong “plastic” that hardens within seconds.

So using this principle I started to “knead” and glue toilet paper around the nuts and to the bamboo strips, creating a solid mass of “plastic” that bound the nuts to the bamboo. It costed almost one bottle of super glue.

Securing the bolts using “plastic” created with superglue and toiletpaper

The end result: strong enough to hold the screen

I could not find a photo of the end result of my “claying with toiletpaper and super glue” but the end result is like a big white blob of material encasing the nuts.

As the bamboo was from a really shabby quality I decided beforehand to re-enforce the ribs with an extra strip of bamboo. This strip stretched from one rib to the second, borrowing extra support from the re-enforcement on the other side.

Re-enforcing the bottom to hold the block with the bolts

The yellow wires you see are an example of the sewing I did to re-enforce the construction, including attaching the blocks with the nuts to the bottom. Rope is harder to break than the glued parts. With rope an glue combined you have such a powerful connection that you will have to tear the entire construction apart before it will weaken.

5: Dealing with the USB cable of the Touch screen interface

The Touch screen comes standard with a little circuit board with USB output and a USB cable you can plug into your computer. I did not want that. I wanted to be able to connect a USB cable to the Scrablet using is micro-USB port.

To achieve that I bought a 10 euro USB hub from Kraun and opened the insides to solder the USB output from the Touch tablet circuit board directly on one of the USB connectors.

The Kraun USB hub, ready to be modded and assimilated with the Scrablet. Wires from the Touch Screen USB board are soldered on one of the USB ports, "replacing" it

The USB hub delivered two things:

  1. The Micro-USB port I wanted - rendering one of the four connectors void (and due to that I took it out, leaving a gap in its place to avoid accidental plugging in of another USB device)
  2. Three additional USB ports - you can use for additional stuff like keyboards and memory sticks.

6: Using a rigid surface to attach the electronics to

As the electronics would receive most of the stress due to plugs being pushed into and pulled out of sockets (12 V power and the HDMI plug) I wanted a rigid surface. I decided to go for the plexiglass that came with the box from nyjTouch again.

Using plexiglass to define the bottom and attach the electronics

To fix the bottom plate to the construction I used yarn and cut little pieces to bridge between the bottom plate and the casing for the screen. The foam with the plexiglass corner pieces and the yarn together made a solid and rigid construction.

In this picture I already prepared the surface for the paint. You also see the bamboo “mats” covering the foam, to offer a more rigid surface to the outside world.

The electronics is clamped in place by bamboo struts and held into place at the position of the HDMI port by a wire: holding the circuit board tight when the user (me) pushes in the HDMI plug.

You see the attached and re-encased Kraun USB hub sticking out on the left hand side. The button bar is covered by white and blue colored plastic (from a pack of water bottles) on the right hand side.

7: Creating a more smooth surface

The looks of a bamboo casing was not really what I had in mind as the end-result. I wanted something more smooth, covering also the parts of the construction which were not that neatly finished. From the beginning I had a cheap ass T-shirt in mind for this. With some luck I bought one made from stretch-material.

Using a stretch-T-Shirt to cover the back

The result after using "spanners" to span the material to the casing

After spanning the T-shirt to the casing, the whole started to look like a product.

To get to this result at least 2 tubes of superglue were used.

8: Getting a more compact solution for the electronics

As the Fit-PC uses HDMI out I had two options:

  1. Leave the VGA input as is – and connect the Fit-PC via the HDMI to VGA adapter, resulting in a lot of cables
  2. Embed the HDMI to VGA adapter – somehow in the Scrablet, creating an HDMI only solution

As HDMI seems to become the new standard, and since I wanted to embed the Fit-PC to the Scrablet I decided to create my own adapter between the HDMI to VGA and VGA to LCD screen boards.

HDMI to VGA and VGA to LCD screen boards before the "fix"

After the "fix"

To be sure I would not blow up sensitive parts I measured each pin on the VGA-cable first, to assure that the configuration I was manually constructing was indeed according to what was going on inside the cable.

The pins are really connected one to one. So starting from left to right and top to bottom, pin 01-A would be connected to pin 01-B and so on (where “A” and “B” would be connector “A” and connector “B”).

Measuring the pin-configuration on the VGA cable and end result

The wooden sticks you see in the picture are to bind the two circuit boards and offer a bit more of a solid construction. They also helped putting the boards in the right distance from the bottom plate.

9: Securing the touch panel

As the Touch panel is placed on a glass panel about 2 mm thick, this panel can break. I contemplated fixing the glass panel to the LCD screen – as is the usual approach – but decided against it. Instead I used a similar clamping-approach as with the LCD panel, creating a slot on the top area in which I would slide the glass panel. On the bottom I would clamp the glass to the LCD screen so that it would be fixed in place. Using wooden pegs on both sides in the bottom area I would press the glass into place, without putting too much stress on the glass.

The construction for the panel that secures the glass Touch screen to the LCD screen

I cut out a long strip of plexiglass and created a 3 layer sandwich where the bottom layer had two holes on each side:

  1. To secure the plexiglass cover strip to the LCD casing
  2. To offer space for the head of the other screw that held the LCD screen

I chose for this construction for the following reasons:

  1. One screw is holding the LCD screen in its place
  2. The other screw is pressing the plexiglass strip into place and securing the Touch screen panel in a way that does not put stress on one specific point of the glass panel
  3. It did not require extra drilling or glueing / I could re-use and existing nut

As there would be a reasonable amount of point-pressure (one single place receiving a lot of strain)  from the screws to the cover strip – which was not distributed over a larger surface, I decided not to go for the bamboo strips here. The plexiglass simply was the best choice of all materials I had.

As a mold I used the broken Touch screen that was delivered first (it was broken on transport and replaced by nyjTouch for a new one)

I finally yielded and bought a battery driven drill for this job.

Conclusion

The Scrablet is built from scratch. Whatever was there in the form of casings (from the old laptop) was useless and a new casing had to be created. A lot was achieved by improvisation: taking two steps back when I got stuck and by observing the possible issue and the possible solutions I could create by using yarn, superglue, a knife, foam, flimsy bamboo sticks and strips and whatever scrap material was available.

It is fun to see how much I could achieve by using scrap material and what quality you can and could achieve by taking the extra mile.

It will never reach the same kind of smooth finish you would get from using wood or plastic, professional tools and a proper finish.

I took some shortcuts and made some mistakes due to impatience and lack of experience. (It will take at least two more prototypes like this with different materials to get something that approaches awesomness and looks like something more than a hobby project.)

About these ads
Posted in: Uncategorized