Cardboard + Scanner

Barcodes carry small amounts of data that, when compared to a library of pre-existing associations, can be made to identify all sorts of unique things, such as product serial numbers, website hyperlinks, and so on.

This project features a simple web-based application that is able to read linear barcodes, QR codes, and data matrices. After scanning such a barcode, users can build digital associations to the barcode. This includes storing their own pictures, or attaching an audio clip from a small selection. When the same barcode is scanned after saving the association, the picture (if any) appears and the sound (if any) will play. Hand-drawn animations indicate the different states of the app, which also serve as visually dynamic cues to engage children.

This project also features a cardboard case that aids the usage of this web app on a mobile phone. It features a shutter mechanism that obscures and reveals the phone’s camera lens with the press of a “button” for more intentional activation.

1.6mm thick corrugated cardboard

Tongue depressor

Rubber band

Paper fastener

Velcro strip

Glue and/or double-sided tape

Laser cutter OR knife, saw and drill

Thicker cardboard (optional)

Sponge (optional)

Print out the included phone size chart (drawn to scale!) and identify your phone size based on the three sizes we’ve provided: Large (based on the Redmi Note 10), medium (based on the iPhone XR), and small (based on the iPhone 12). If your phone is larger than these benchmarked sizes, use the next largest size for your phone case to ensure it fits without too many modifications.

Download the relevant files for your phone case, which should include the following:

- Large/medium/small front + back

- Large/medium/small sides

- Tongue depressor shutter

Cut the front and back plates out of 1.6mm cardboard with either a laser cutter or a knife, ensuring the red lines are only scored rather than cut. If you use a knife, simply print out the shapes on paper and use them as cutting guides.

Cut the side walls out of cardboard as well, though this can be from any thicker cardboard you may have on hand. The side wall pieces, when stacked together, need to reach a total thickness of 7 to 8mm, slightly thicker than your phone.

Cutting the tongue depressor is most easily done with a laser cutter, but a saw and drill can be used to achieve this shape as well. Avoid using a nail and hammer to create the hole in this piece, as the tongue depressor will likely be split by the sudden, sharp impact.

Place a rubber band within this cardboard tab to-be (shown in the photos). Fold it outwards along the score lines and tuck the tab into the slot, securing the rubber band in place. Fold the other tab along the score lines and tuck that tab into the slot. This tab is meant to hold the “shutter” in place, in front of your phone’s camera lens.

Attach the tongue depressor to the outside of the back plate using a paper fastener, ensuring the tongue depressor can rotate freely. Open the fastener on the other side to hold the pieces together.

Hook the rubber band onto the notch in the tongue depressor. You’ll now see that the tongue depressor will be pulled towards the bottom of the back panel, but will be stopped by the cardboard tab. The shorter, exposed end of the tongue depressor can now be pressed to move the “shutter”, hiding or revealing your phone’s camera lens when needed. This will be the outside of the phone case.

The shutter mechanism is now done!

Flip the backplate over; every step to follow will involve sticking parts onto the inside of the back plate. Assemble the side walls of the case by stacking and sticking (with glue or double-sided tape) the cardboard side pieces onto the backplate. Remember that the side walls of the case will need to reach 7 to 8mm in thickness, so cut as many side pieces as you might need, depending on the cardboard you have available.

Do note that the case’s thickness will be increased by the velcro strips, which will be added next.

Glue 4 short velcro strips onto the phone case, one near each corner. It might be better to stick the entire hook-loop pair onto the case, which can help with alignment with the front plate later. It is also recommended to apply glue to the cardboard rather than the velcro. This prevents the velcro from absorbing the glue too quickly, which can weaken the join.

Glue the front plate to the velcro on the phone case and leave to dry. You’ll now have a phone case with a removable front plate and a manual shutter on the rear!

The phone case was mainly designed with common camera configurations in mind. These include phones with cameras at the top-right corners, and some phones with cameras in the middle of the device.

However, this design does not work for all phones as there are many varying camera configurations. Modify the case according to your phone’s rear camera configuration.

Some suggestions include:

- Adding cardboard to the shutter piece to ensure the camera is obscured when the shutter is closed

- Cutting the tops off the side wall pieces if your phone is very tall (be careful not to flip your phone upside-down while playing if you do so!)

- Adding cardboard or sponge to the case, shifting the phone’s placement into the right position

- Modifying the cutting files on your own to reduce the need for modifications after assembly (refer to this guide’s photos to see what pieces go where!)

Navigate to this web app on your phone: https://interactive-materials.github.io/scanner/, lay your phone into the case and attach the front plate using the velcro, and you’re ready to use the app! Press the shutter to block or expose your phone’s camera over a barcode, and watch it react and display any pre-set associations you have made.