Flaschen Taschen: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
(Correct Chaos Computer Congress to Chaos Communication Congress)
(11 intermediate revisions by 3 users not shown)
Line 3: Line 3:
===What's the project?===
===What's the project?===


The Award Winning FlaschenTaschen is a 10’ by 9’ (3m x 2.75m) video display made out of clear glass bottles, milk crates, RGB LED strings (with a total of 1575 LEDs), and a controller board. Each bottle is capped with a single addressable RGB LED. The bottoms of the bottles act as lenses for the emitted light. The project has a German name as homage to c-base’s [http://matelight.rocks/ Mate-Light] project. After seeing Mate-Light at Chaos Computer Congress, we were inspired to build a similar project at Noisebridge to present at the 2016 Maker Faire.
The Award Winning FlaschenTaschen is a 10’ by 9’ (3m x 2.75m) video display made out of clear glass bottles, milk crates, RGB LED strings (with a total of 1575 LEDs), and a controller board. Each bottle is capped with a single addressable RGB LED. The bottoms of the bottles act as lenses for the emitted light. The project has a German name as homage to c-base’s [http://matelight.rocks/ Mate-Light] project. After seeing Mate-Light at Chaos Communication Congress, we were inspired to build a similar project at Noisebridge to present at the 2016 Maker Faire.


Another inspirational build is the [http://www.zuloark.com/muro-de-botellas/ Muro de botellas] project.
Another inspirational build is the [http://www.zuloark.com/muro-de-botellas/ Muro de botellas] project.
Line 23: Line 23:
Backstage view.
Backstage view.


=== Network protocol ===
=== Network protocol and Utilities to send content ===


The network protocol is quite simple: essentially send a PPM picture (P6) in a UDP packet to ft.noise:1337.
The network protocol is quite simple: essentially send a PPM picture (P6) in a UDP packet to ft.noise:1337.
Line 31: Line 31:
   bash$ jpegtopnm myimage.jpg | stdbuf -o64k pnmscale -xysize 45 35 > /dev/udp/ft.noise/1337
   bash$ jpegtopnm myimage.jpg | stdbuf -o64k pnmscale -xysize 45 35 > /dev/udp/ft.noise/1337


Flaschen Taschen accepts a footer that defines an offset in x,y space as well as a layer z index. To write images which cover the default demo visualization, you can send a higher -index by appending this footer after your sends. For instance, to position the image at (x=0 y=0, z=5):
Flaschen Taschen accepts a footer that defines an offset in x,y space as well as a layer z index. To write images which cover the default demo visualization, you can send a higher -index by appending this footer after your sends. We still need to make sure to send everything in one packet, so on the shell this is a bit awkward as we first have to store the full content temporarily in a file. For instance, to position the image at (x=0 y=0, z=5):


   bash$ { jpegtopnm myimage.jpg | pnmscale -xysize 45 35; echo 0 0 5; } | cat > /dev/udp/ft.noise/1337
   bash$ ( jpegtopnm myimage.jpg | pnmscale -xysize 45 35; echo "0 0 5" ) > /tmp/tmp-out ; cat /tmp/tmp-out > /dev/udp/ft.noise/1337


(There are also two additional protocols that can be enabled on the server-side: OpenPixelControl and PixelPusher).
There are [https://github.com/hzeller/flaschen-taschen/tree/master/client#flaschen-taschen-clients utilities in the repository] to send and scroll arbitrary images (including animated gifs), videos or text, so the above, sending an image to layer 5, would be as simple as:
 
  bash:flaschen-taschen/client$ ./send-image -l5 myimage.jpg


We added an extension to the PPM format that allows to set an (x/y)-offset and a stacking-layer, see details on github.
There is a C++ and Python client library that you can use right away to send images to FlaschenTaschen including a couple of examples.
It is simple to write your own client in any language that supports networking (See [https://github.com/hzeller/flaschen-taschen/blob/master/doc/protocols.md#protocols protocols section] in documentation).


There are sample utilities in the repository to send and scroll arbitrary images (including animated gifs), videos or text.
'''See all the details here:''' https://github.com/hzeller/flaschen-taschen
There is a C++ class that you can use right away to send images to FlaschenTaschen including a couple of examples.
 
It is also extremely simple to write your own client in any language that supports networking (See [https://github.com/hzeller/flaschen-taschen/blob/master/doc/protocols.md#protocols protocols section] in documentation).
===FlaschenToy===
 
One of the examples in the [https://github.com/hzeller/flaschen-taschen Flaschen Taschen github] is FlaschenToy.
 
This is a Flask app that sends the contents of a WebGL canvas to the Flaschen Taschen. The web page takes [http://nehe.gamedev.net/article/glsl_an_introduction/25007/ GLSL]  code from a text area input, and displays it on the Flaschen Taschen using the the [https://www.shadertoy.com/howto ShaderToy] conventions.  
 
It is currently hosted on [https://noisebridge.noise noisebridge] you can try it at: http://noisebridge.noise/FlaschenToy 
 
I've not added it to the to the startup scripts, so if that site is dead you can restart on by running ''sudo run.sh'' in ~/github/flaschen-taschen/examples-api-use/flask (you'll need to be logged in as noisebridge and have the admin password)
 
Try pasting some of the shaders from the ShaderToy page: https://www.shadertoy.com/browse into the text area
 
Most examples will just work. E.g. this meta ball example:
https://www.shadertoy.com/view/Mss3WN


'''See all the details here:''' https://github.com/hzeller/flaschen-taschen
The code is currently in my fork of the project (will get merged into main page in the future):
https://github.com/griffin2000/flaschen-taschen


=== List of Devices at Noisebridge running the FlaschenTaschen Protocol ===
=== List of Devices at Noisebridge running the FlaschenTaschen Protocol ===
Line 112: Line 129:
[[File:Award_Winning_FlaschenTaschen.jpg|640px]]
[[File:Award_Winning_FlaschenTaschen.jpg|640px]]


===FlaschenToy===


One of the examples in the  [https://github.com/hzeller/flaschen-taschen Flaschen Taschen github] is FlaschenToy.
=== hacking ===
 
teh blinky RGB LED's are driven by a [[WS2801]] chip, that uses a clock (green) and data (white) line, that are operated similarly to APA102's, but are not identical in practice.
 
custom code's by teh'x taht served as table ornamite for Mitch's interview of C.M. past 10th anniversary at NB.
 
µPython running on a ESP8266 driving random overflow noise on a milk crate of 5x5 RGB's.
 
<pre>
# 2 CM w/<3
 
import time
from machine import Pin
from apa102 import APA102


This is a Flask app that sends the contents of a WebGL canvas to the Flaschen Taschen. The web page takes [http://nehe.gamedev.net/article/glsl_an_introduction/25007/ GLSL]  code from an text area, and displays it on the Flaschen Taschen using the the [https://www.shadertoy.com/howto ShaderToy] conventions.
clock = Pin(14, Pin.OUT) # set GPIO14 to output to drive the clock
data = Pin(13, Pin.OUT) # set GPIO13 to output to drive the data


It is currently hosted on [https://noisebridge.noise noisebridge] you can try it at: http://noisebridge.noise/FlaschenToy 
apa = APA102(clock, data, 25)


I've not added it to the to the startup scripts, so if that site is dead you can restart on by running ''sudo run.sh'' in ~/github/flaschen-taschen/examples-api-use/flask (you'll need to be logged in as noisebridge and have the admin password)
def randomByte():
        return int.from_bytes(uos.urandom(1), 'little')


Try pasting some of the shaders from the ShaderToy page: https://www.shadertoy.com/browse into the text area
def randomPixel():
        return [randomByte(), randomByte(), randomByte(), 31]


Most examples will just work. E.g. this meta ball example:
def loop():
https://www.shadertoy.com/view/Mss3WN
        while True:
                for j in range(25):
                        apa[j] = randomPixel()
                        apa.write()
                        time.sleep_ms(round(randomByte()/10))


The code is currently in my fork of the project (will get merged into main page in the future):
loop()
https://github.com/griffin2000/flaschen-taschen
</pre>

Revision as of 03:57, 15 November 2018

Noisebridge Logo FlaschenTaschen.jpg

What's the project?

The Award Winning FlaschenTaschen is a 10’ by 9’ (3m x 2.75m) video display made out of clear glass bottles, milk crates, RGB LED strings (with a total of 1575 LEDs), and a controller board. Each bottle is capped with a single addressable RGB LED. The bottoms of the bottles act as lenses for the emitted light. The project has a German name as homage to c-base’s Mate-Light project. After seeing Mate-Light at Chaos Communication Congress, we were inspired to build a similar project at Noisebridge to present at the 2016 Maker Faire.

Another inspirational build is the Muro de botellas project.

Our goal was to have it completed for Maker Faire 2016 to be shown as part of our booth and we were two weeks ahead of schedule. After the MakerFaire, the display will be permanently installed within Noisebridge and possibly made available for events.

Our code and hardware that drives up to 16 LED strips from a Raspberry Pi is on Flaschen-Taschen github. We only need 9 strips in this project, one for each crate column. The update rate of the full FlaschenTaschen display is up to 160fps!

The breakout board, driving up to 16 SPI LED strips.

Here is the first view of the completed project

Plasma on FlaschenTaschen

Showing the Plasma written By Carl - Find the code for this demo here https://github.com/cgorringe/ft-demos

Back of the crates

Backstage view.

Network protocol and Utilities to send content

The network protocol is quite simple: essentially send a PPM picture (P6) in a UDP packet to ft.noise:1337.

For instance, try the following all in the comfort of you shell (in bash, to be precise, that conveniently provides the /dev/udp pseudo-path):

 bash$ jpegtopnm myimage.jpg | stdbuf -o64k pnmscale -xysize 45 35 > /dev/udp/ft.noise/1337

Flaschen Taschen accepts a footer that defines an offset in x,y space as well as a layer z index. To write images which cover the default demo visualization, you can send a higher -index by appending this footer after your sends. We still need to make sure to send everything in one packet, so on the shell this is a bit awkward as we first have to store the full content temporarily in a file. For instance, to position the image at (x=0 y=0, z=5):

 bash$ ( jpegtopnm myimage.jpg | pnmscale -xysize 45 35; echo "0 0 5" ) > /tmp/tmp-out ; cat /tmp/tmp-out > /dev/udp/ft.noise/1337

There are utilities in the repository to send and scroll arbitrary images (including animated gifs), videos or text, so the above, sending an image to layer 5, would be as simple as:

 bash:flaschen-taschen/client$ ./send-image -l5 myimage.jpg

There is a C++ and Python client library that you can use right away to send images to FlaschenTaschen including a couple of examples. It is simple to write your own client in any language that supports networking (See protocols section in documentation).

See all the details here: https://github.com/hzeller/flaschen-taschen

FlaschenToy

One of the examples in the Flaschen Taschen github is FlaschenToy.

This is a Flask app that sends the contents of a WebGL canvas to the Flaschen Taschen. The web page takes GLSL code from a text area input, and displays it on the Flaschen Taschen using the the ShaderToy conventions.

It is currently hosted on noisebridge you can try it at: http://noisebridge.noise/FlaschenToy

I've not added it to the to the startup scripts, so if that site is dead you can restart on by running sudo run.sh in ~/github/flaschen-taschen/examples-api-use/flask (you'll need to be logged in as noisebridge and have the admin password)

Try pasting some of the shaders from the ShaderToy page: https://www.shadertoy.com/browse into the text area

Most examples will just work. E.g. this meta ball example: https://www.shadertoy.com/view/Mss3WN

The code is currently in my fork of the project (will get merged into main page in the future): https://github.com/griffin2000/flaschen-taschen

List of Devices at Noisebridge running the FlaschenTaschen Protocol

Current Mechanical Design Documentation

This .PDF file is the current drawing set. Please take a look.

https://noisebridge.net/images/8/8c/2016_0518_FlaschenTaschen_Sheet1-0_AsBuilt_Noisebridge.pdf

2016 0518 FlaschenTaschen Sheet1-0 AsBuilt Noisebridge.jpg

Rough Take-down Procedure

Flaschen Taschen takedown and setup notes: (does not include electronics) 2016-06-13 draft by Jarrod

! Take pictures of how things are setup for reference!

! Take care to collect all the parts as you disassemble, there are many parts and some are small, but important!

  • 1_Remove all power cables from rear. Make note of how they are run to the power supplies
  • 2_Disconnect all data connections, remember there are typically two per crate. Take a photo of how they are routed to the breakout board on the raspberry pi.

NOTE: The crates have an orientation. Remember this. Take a photo

  • 3_Remove the 2” green tie down strap. This is tricky there are two metal latches in line with the handles that need to be pulled in tandem to release the ratchet. While pulling on the latches it may be necessary to add tension to the tie down to get it to release, since we do not tighten it very much during install.
  • 4_The wooden vertical supports are connected to four of the top crates by a wood screw

Remove these screws. The supports are kind of floppy and are really only meant to be supportive in a direction parallel to the face of the display During setup any forward or backward lean of the display can be adjusted slightly by screwing these supports back on to the top crates at a distance that pushes them forward or pulls them backward

  • 5_Once the cables and supports are disconnected the RELEASABLE cable ties can be removed from the crates. Please do not cut the ties, as you will need them to set the display back up
  • 6_Stack the crates in stacks of 4. This is a good height to move with a hand truck. Make sure that the power jacks and date cables are not hanging over the edges of each crate before another crate is placed on top of it, so as to not damage the wires and connectors.

NOTE: The bottom row of crates do not have bottles with LEDs, so as to provide a space for the hardware and lift the display of the floor for improved visibility.

NOTE: The two end crates have 2x4 supports in them. The others have plywood. The assembly is not symmetrical, but each crate has at least one support. Together they are almost exactly as long as the base. These also get zip tied together, but they are harder to tie.

  • 7_Stack up the base crates. These are also good for holding all the hardware, zip ties, bolts (in a bag), and cables for transport.
  • 8_Remove the vertical supports from the base by unscrewing them. (iirc: this is done with a 7/16” wrench/socket.) Have someone hold the vertical supports while unscrewing. Keep all parts and set aside. NOTE how those washers are used. It is important that bolts not be able to rip through the wood.
  • 9_Flip the base over. There are three bolts in the center that hold it together. Remove these.

Congratulations, You have now turned the FlaschenTaschen into parts for shipping.

The setup procedure is essentially the reverse of this. Just remember:

  • A_Bring tools. Wrenches for the bolts, a screwdriver for the tops of the vertical supports, and a ladder.
  • B_The crates have an orientation. At the forward edge (display side) of each crate there is Velcro. The hook side should be on the top and the loop side should be on the bottom. This is typical for all crates except the base which only have the hook side Velcro on the top.
  • C_Do not tighten the tie down very much. Its purpose is merely to squeeze the crates together so they can’t move individually. The zip ties do most of the work
  • D_Try to align the forward faces of the crates as best as possible, but realize that it will never come out perfect. If a column is going out of vertical the crates above can be installed a little fore or aft of the face of the display to make up for it.
  • E_People have already sent images of genitalia to be displayed on the screen, so get over it.

What's the project?

Award Winning FlaschenTaschen.jpg


hacking

teh blinky RGB LED's are driven by a WS2801 chip, that uses a clock (green) and data (white) line, that are operated similarly to APA102's, but are not identical in practice.

custom code's by teh'x taht served as table ornamite for Mitch's interview of C.M. past 10th anniversary at NB.

µPython running on a ESP8266 driving random overflow noise on a milk crate of 5x5 RGB's.

# 2 CM w/<3

import time
from machine import Pin
from apa102 import APA102

clock = Pin(14, Pin.OUT) # set GPIO14 to output to drive the clock
data = Pin(13, Pin.OUT) # set GPIO13 to output to drive the data

apa = APA102(clock, data, 25)

def randomByte():
        return int.from_bytes(uos.urandom(1), 'little')

def randomPixel():
        return [randomByte(), randomByte(), randomByte(), 31]

def loop():
        while True:
                for j in range(25):
                        apa[j] = randomPixel()
                        apa.write()
                        time.sleep_ms(round(randomByte()/10))

loop()