You connect it to the GPIO of the Raspberry Pi, where it also draws its power from. This is when my girlfriend had the idea of hooking up a Raspberry Pi to a display.Īt first we thought about a used HDMI display, but we then found the Elegoo 3.5″ touchscreen which costs around $ 25. As Wolfgang’s birthday was nearing, we thought about ways to display the clock on a budget, as a fun gadget. The motivation for this project was that my girlfriend’s parents were looking for a new living room clock. Clock Clock 24 on a Raspberry Pi with a 3.5″ touchscreen See the Pen Clock Clock 24 by Manuel Wieser on CodePen. Touch the bottom left and bottom right corner or press H once for happy clock faces and N once for neutral clock faces. This is why I have included extra animations that you can trigger manually. The owner can choose from three different modes. The original clock has more sophisticated animations, though. View the full source code on CodePen, if you are interested. This concludes the Clock Clock 24 application. let state = '-' Ĭonst time = new Date (Date. The animation itself lasts ten seconds and ends at the system’s time. If the time plus ten seconds differs from the current state it triggers the animation. The script then reads the system’s time and strips the string to hh:mm. It may seem weird at first, but you can’t confuse the “cyclops” with 6 or 9. After watching a lot of promotional videos I discovered how Humans since 1982 solved it. [Īt first I tried to recreate the digits from memory, but I struggled with the digit 8. You have to read in lines, which means the third and fourth objects represent the center clocks. The following example shows the positions for the digit 2. Setting each clock to the necessary clock position forms a seven-segment display. The -small-hand and -large-hand variables drive the transform/ transition animation.clock deg ` ) Ī digit consists of six analog clocks. The analog clocks are SVGs made up of a clock face and two shapes for the clock hands. Clock Clock 24 with HTML, CSS and JavaScript My girlfriend and I then put the clock on a Raspberry Pi. Thus I took the liberty and created a Clock Clock 24 homage with web technologies. At the time of writing you can buy the clock at $ 5,999.00 in the MoMA store. My girlfriend’s father stumpled upon this clock when looking for a new living room clock. Clever arrangement of the clock hands transforms the analog clocks into seven-segment displays. Twenty-four analog clocks form a large digital clock. The original Clock Clock 24 is kinetic art by Humans since 1982.

24 hour clock widget