Rubiks'c clock presents a webpage of a Rubik's cube that automatically updates every minute showing the current time of day.
This is the javascript engine behind the great Instructable Rubik's Clock documented here: https://www.instructables.com/Rubiks-Clock/
The implementation is based on the javascript/HTML code of Cuber found at https://github.com/stewdio/Cuber-DEMO. Cuber is a Rubik’s Cube simulator. Rubik's Clock adds the concept of a photo cube to Cuber. The 6 PNG images are carefully crafted with a set of numbers on all sides. It implements a solver that moves the pieces every minute so the numbers of the current hour and minute show on the front of the cube.
There are two versions. A 12-hour clock and a 24-hour clock. The 12-hour clock rolls over at noon so the next hour is 1:00 (pm). The 24-hour clock keeps counting up after noon so the next hour is 13:00.
From your Chrome browser (or Safari, or Edge, or a multitude of others) enter your choice:
-
index.htmlfor a 12-hour "am/pm" Rubick's clock (default) -
index.html#clock12for a 12-hour "am/pm" Rubick's clock -
index.html#clock24for a 24-hour "European" or "Military Time" clock
The entire left side of the window is a big hidden button that controls the brightness. There are four brightness settings. Keep pressing the left side to make the display dimmer. Eventually it wil go to full brightness again.
Press the Options button on the upper-right to show the cube in different configurations:
- Clock Style
- 12 hour shows the clock in 12-hour mode (am/pm)
- 24 hour switches the clock to 24-hour mode
- Size gives you a selection of different sizes from tiny to giant
- Extras
- Cube control allows you to rotate the cube with your mouse
- Auto rotate will set the cube in motion
- Show twist notation will flash the move letter as the cube transitions to a new time of day
- Cube face labels shows the name of each face.
- Up
- Left
- Front (is the face with the current time of day)
- Right
- Back
- Down
If you want to share the clock with your friends at home, it is very easy to make this webpage available to any computer or smart phone in the house.
Install python3 if you don't already have it. Then run this command from the same directory that contains index.html:
python3 -m http.server 80
If you prefer the older python2 you could also do this:
python2 -m SimpleHTTPServer 80
The URL your friends will need is based on your computer name where you ran the previous command. Often you need to append .local to the end of you computer's name to access it. For instance, if your computer is named mycomputer then this is the URL you want to tell your friends to go to:
http://mycomputer.localhttp://mycomputer.local/#clock12http://mycomputer.local/#clock24
I put this on a dedicated Raspberry Pi that is continuously running at my house. I named my Raspberry Pi rubiks-clock. So this is what I tell my guests to go to from their smart phone:
http://rubiks-clock.local
Note: when typing in the URL on your browser, be careful which field to put it. don't type it into the Google search bar. Google will never find it if it is just local inside your house. Instead make sure to type it into the field for entering webpage URL addresses. If one box does not work, try the other.
Also, if you make changes locally, then you may need to clear cache to see the changes on a remote computer.
You will need a fairly powerful computer to run the javascript.
-
The Raspberry Pi 4b is a great choice for this. It is a fast processor. I have a 8GB model and it runs great. The 1GB model should also be fine unless you plan to run a couple more applications that use lots of memory.
-
The Raspberry Pi 3b works fine but can slow down a bit during moves so if you use this, you probably will want to minimize any extra applications running in the background. Maybe consider disabling VNC and other applications.
-
The Raspberry Pi Zero V1 is not at all powerful enough. The graphics grind to a halt. It looks terrible.
-
I don't have a Raspberry Pi Zero V2. I hear good things. It might be fast enough. Definitely worth a try.
I used these instructions to install the 4 inch display from the command line from ssh login on the Raspberry Pi:
cd ~/Downloads sudo rm -rf LCD-show git clone https://github.com/goodtft/LCD-show.git chmod -R 755 LCD-show cd LCD-show/ sudo ./MPI4008-show
Then from the command line I run this (and hit CTRL-F4 to exit):
/usr/bin/chromium-browser --kiosk 'file:///home/pi/rubiks-clock/index.html#clock12'
If you put the top directory rubiks-clock directly under /home/pi, you can run these commands to install so it will automatically start every time you plug in your Raspberry.
cd /home/pi/pi-init
./install.sh
By default it does this
- It installs the http server as a service so other computers can run the webpage remotely.
- It starts the Chrome browser automatically in full screen mode showing the 12-hour clock.
- Shows a rubik's cube as the Raspberry Pi is booting (aka splash screen)
- Sets the user's background image to a Rubik's Cube
- removes desktop clutter such as the trash can and mounted drives
But if you prefer a different configuration than the default you can. Here are a couple of common choices:
-
To show a 24-hour clock
./install.sh --style 24 -
To disable the http server so other computer will not be able to connect and run your clock remotely:
./install.sh --no-httpserver -
To disable the full-screen Rubuk's cube:
./install.sh --no-screensaver
Here is a full list of options available:
Usage: [--style 12|24] [--no-http] [--no-splash] [--no-wallpaper] [--keep-trash] [--keep-mounts]
All arguments are optional here is a summary:
-h, --help show this help message
--style 12 = 12-hour clock, 24 = 24-hour clock
--no-http do not install http server
--no-screensaver do not automatically show Rubik's Cube clock full screen
--no-splash do not install custom boot splash screen
--no-wallpaper do not install rubik's cube wallpaper
--keep-trash do not hide the trashcan icon
--keep-mounts do not hide sdcard mount icons
--no-extras do not modify: splash screen, wallpaper, desktop icons
The install script will display what it plans to modify and pause to ask you if everything is good. If you answer "yes" it will install it. Here is an example:
install http server = y
auto-start browser = y
clock style = 12
cube splash screen on boot = y
cube desktop = y
hide trashcan icon = y
hide sdcard mounts icons = y
Is configuration good? [Y or N]
If you would like to hide the mouse cursor run this command:
echo point_at_menu=0 >> /home/pi/.config/lxpanel/LXDE-pi/panels/panel
To undo these changes, you can run these command:
cd /home/pi/pi-init
./uninstall.sh
rm /home/pi/.config/lxpanel/LXDE-pi/panels/panel
Upgrading to the latest version of the Clock is easy. Just do this:
cd /home/pi/pi-init
./upgrade.sh
The script will ask you "are you sure" then it simply executes the command git pull to grab the latest code changes.
============================================================================
These are instructions that show how to set this up on a Raspberry Pi with a 4 inch display
You will need:
- Raspberry Pi 4b
- 8GB (or larger) micro SDcard
- Miuzei 4-inch display https://www.amazon.com/dp/B07XBVF1C9?psc=1
Install Raspberry Imager onto your PC (https://www.raspberrypi.com/software/)
Run the Raspberry Pi Imager on your PC
- Insert 8GB (or larger) SDCard into an sdcard reader and plug into a USB port
- Operating System: Raspberry Pi OS (32 bit)
- Storage:
- Probably just one option
- But it is very important to make sure you a pick the SDCard that you recently inserted
- Verify the size matches the size of your SDCard. E.g. 32 GB
It will take 5-10 minutes or more to write the Raspberry Pi image onto the SDCard. Be patient.
- Writing... xx%
- Verifying... xx%
Insert SDCard into your Raspberry Pi 4b
The Miuzei display comes with 4 heat sinks. Stick on all of the heat sinks onto the Raspberry Pi board in the correct places.
Connect keyboard, mouse, and HDMI monitor to Raspberry Pi Power on
The Miuzei 4-inch display requires special driver to run on a Raspberry Pi. Download the package from the website and install based on the instructions.
==================================================
If you would like some deeper understanding on the cube software design and other non-Rubiks type information, I have copied much of the original documentation to README-cuber.md. Check it out, it is interesting.
As mentioned previously my project is based on the Cuber demo posted here: https://github.com/stewdio/Cuber-DEMO