Mini ClockClock
Introduction: Mini ClockClock
The ClockClock concept seems to have gained popularity from the artistic building of mechanical versions that are quite costly. See this site for examples.
There have been a number projects where builders have created 3D printed versions of the clock mechanisms needed to create their own unit. Click here to see one example.
My hope was that someone had created the software necessary to simulate the ClockClock effect. Fortunately, I found software on Github written by <PERSON>. This software is located here, and will be discussed in greater detail in a later step. For now its important to emphasize that this project would not be possible without <PERSON> hard work.
My goal was to use an old Android phone (Samsung Note 8) that I had sitting around as the platform to simulate a mini version of the clock. The challenge with this was getting the software to run in kiosk mode without too much fuss. To this end, the 2nd piece of the puzzle was free software app called 'Fully-Kiosk Browser'. Information on this is available here.
The last piece was simply creating a desktop frame and face plate to provide a finished look. I chose to create this using 3D printing using the dimensions for the Samsung Note 8, but woodworking, or even laser cutting plastic would work nicely.
This project can be scaled to most any size display including an old monitor connected to a Raspberry Pi that gets put into a frame and hung on the wall. Using a face plate in front of the display gives a nice effect which looks very close to the mechanical version.
This is a relatively quick project that can be pulled together with minimal hassles. Hope you find this project worthwhile.
Step 1: Configure the Phone
These instructions will be specific to the Android operating system. And while I personally have not done this with an IOS phone, the software is available for it and should work fine.
Firstly, the phone should be setup to minimize or preferably eliminate all notifications. So in the settings disable notifications for all apps.
Second, this will likely burn-in the image of the clocks on the display so I chose to reduce the brightness to 1/2 bright.
Finally, install the app 'Fully Kiosk Browser'. This app is available from the appropriate app store and is free to use. More information is available here.
Step 2: Alter the Files to Fit Display
The software that simulates the ClockClock effect is available using only 2 files as shown in the picture. 288
Visit this link; https://github.com/y-taka-23/elm-clockclock24/tree/master/docs and download the 2 files, 'app.js' and 'index.html'. These files need to be available to the phone via the internet and therefore needs to be on a web server. Theoretically these files can be stored directly on the phone and the 'Fully Kiosk Browser' pointed to the files locally. However, I wanted to store these on a server that would allow me to access them on other devices that I might build.
Mr. <PERSON> has created a demo available here; https://y-taka-23.github.io/elm-clockclock24/. However I didn't want to directly link to this demo in case the bandwidth might be limited. And out of courtesy, I would suggest that you house these files on your own server. But for prototyping, this demo is a good place to start.
The other reason for storing the files on my own server was I found that I needed to alter some of the sizes to properly display on the Samsung Note 8. This cannot be done using the demo site.
To alter the size of what is being rendered in the browser, you will need to open the 'app.js' file in an editor. Towards the beginning of the file will be a bunch of CSS code (shown below). Locate this area and start to play with the sizes. Specifically look for; display-frame, border-radius, display, and clock-dial. Some of the pixel sizes have been increased and the background color was changed from 'none' to 'white'.
This is a trial and error thing until you arrive at the best size and look. So spend time with this. An easy way to do this is to download the two files to your desktop and drag the 'index.html' file to your browser to display the clock, then open the 'app.js' file in an editor to alter. Once a change is made, simply refresh the browser to see the effect on the clock. The same process can be done directly on the phone as well.
Original - taken from https://github. 908