Rubik's Clock

My friend and I built this really cool clock. We thought it would be awesome to share it with you. These are instructions on how to build a clock that shows the time of day on the face of a Rubik's Cube.

Every minute all day long the cube executes a few simple twists. At the end of each twist sequence, a new 3- or 4-digit number appears on the front of the clock displaying the current time of day. We call it the Rubik's Clock!

Our clock can be configured to show a 12-hour (am/pm) clock or a 24-hour clock.

It is very simple to use. Just set it on your desk, plug it in, and sit back to watch time slide by!

Website rubiksclock.com

I had so much fun creating the Instructable I went ahead and built a simple website that runs the clock. The site simply runs the javascript described below. Here are a couple of links for you can try:

• 12 hour (USA) Rubik's Clock : http://rubiksclock.com
• 24 hour Rubik's Clock: http://24.rubiksclock.com

Variations

There are three ways you can build this Instructable

1. You can implement the full Instructable:
2. print the case on your 3D printer
3. install the software on a raspberry Pi 4
4. Now you have a very stylish clock to accompany you as you pass the time doing what you do.
5. Use any monitor.
6. Install the software on a Raspberry Pi (or pretty much any computer for that matter)
7. Place the monitor in a prominent spot
8. Now you have a cool clock to marvel every time you walk by.
9. You can grab the code from GitHub (like right now if you are on a laptop!). Run it on the browser you happen to be using right now. Yeah, it is as simple as:
10. Grab the files
11. Find the file index.html from your browser (Chrome, Firefox, Edge, Safari, etc)
12. Smile time!

In my opinion, the best option is option one: go for it! Print the case and make the clock. The clock "kiosk" will always be there for you.

1. The screen never goes blank.
2. You can unplug it and move it to a different room. When you plug it back in, there is nothing for you to do. The clock will go right back to its task of showing you the time.

But all the options are great. Try one. They are all the best!

It is also a Web Server

Even better, this clock is a web server. When the clock is running, you and your friends can open up your smartphones, go to http://rubiks-clock.local (or maybe http://rubiks-clock), and have a clock in your pocket.

The webserver is enabled by default but that is configurable. I have a section below describing the various configuration options available when you set up your Raspberry Pi 4b clock.

The Clock is Unique

To my suprise, I searched the internet for a clock like this but found nothing. The Rubik's cube phenomenon is so vastly popular it baffles me that no one has already done this. (Granted there are a few significant challenges to overcome to get this to work, but in this world I had expected plenty of people to have already stepped up to make it a thing.)

I found photo cubes, arrow cubes, cubes of all colors and crazy shapes, and some calendar cubes, but never a clock like this. It appears to be unique.

The Case is Unique Too

The case itself is also rather unique (if in fact all you need is a nice case for your own cool project). I found a few examples of printable cases on Thingiverse that are designed for the Muizy 4-inch display. They look great, but not quite what I was looking for. I wanted a clock-like cube thing that sits nicely on my desk. Nothing like that could be found, so I went ahead and designed my own. I kind of like the final result. It is rather rugged, easy to assemble, and sits pretty in any room of our house.

I've attached the Fusion 360 file in the section that explains the case design. Feel free to customize however you like. If you do, let me know: I'd love to hear what you make!

I Love Comments

I love comments. Tell me what you think. Tell me if I didn't explain something well and I will try rewording. If you made one of these, where did you put it and what did your friends think. What's you experience, let me know!

What's your favorite time of day! Every minute of the day shows a new set of colors. Do you have a favorite. If you do, post the number and the clock style (12-hour and 24-hour clocks have different colors each minute). You can even post a screenshot if you like! It's all just fun.

You will need

• Raspberry Pi 4b kit from Canakit
• Raspberry Pi 4b
• 5V 3.5 amp USB-C power supply
• USB-C on/off switch
• 32GB SD card (or larger)
• 4-inch screen
• Miuzei 4-inch display https://www.amazon.com/dp/B07XBVF1C9
• Their web page is here: https://geekdiywiki.com/4inchscreen
• 3d printed case parts
• Front
• Back
• Clamp
• Stylus holder
• 3 - M3x8 screws
• Glossy white sticker paper. Something like this on Amazon.
• 2.5mm hex driver or allen wrench

Recommend

• 180 degree USB-A adapter: https://www.amazon.com/gp/product/B0BN9QPB5W/

• DS3231 Real Time Clock https://www.amazon.com/dp/B082VL4GM6
• LIR2032 rechargeable Lithium Battery. Warning: do not use CR2032; it might explode!
• If you do plan to use the common CR2032 non-rechargeable battery, you can try removing the charging resistor. No guarantees though.
• Wirewrap wire
• Wirewrap tool
• 3 - M2x4 screws

Optional

• 5 ft black power power cord (which is easier to plug into the wall socket than the Canakit "wall wart" power supply)
• 90 degree Ethernet adapter if you are not able to connect to WiFi
• 90 degree USB-C adapter if you are not using the Canakit switch and your USB-C cable-end is not flexible.

Here is a brief summary of the steps needed to build our Rubik's clock:

1. Install Raspberry Pi OS on an SD card
2. Set hostname to rubiks-clock
3. Configure Correct WiFi information
4. Enable ssh
5. Enable VNC
6. Insert the SD Card into your Raspberry Pi 4b and turn it on
7. Make sure WiFi and VNC are both working
8. Install custom drivers for the 4-inch touch screen.
9. Copy project to the Raspberry Pi. (aka clone from GitHub)
10. Run the install script so the computer automatically runs the clock when it boots
11. sets up web server
12. Custom splash screen
13. Start Chrome in full-screen mode showing the clock webpage
14. Print the case (Technically this should be the first step since it take a long time to 3d print)

I would like to especially thank my good friend David Reynolds (aka Daver) for providing much of the data and back-end work that made this project a success. His twist optimizations are absolutely brilliant! His help was additionally invaluable in many other ways, like when I hit a roadblock fixing those tricky center-square rotations. We collaborated closely on this project.

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. Wow! It is such a pleasure to work with this well designed code as a baseline. Every piece of his code is beautifully planned and thoughtfully designed. (And I love his choice name for the javascript entry point erno.js! I will let the reader ponder why this is such a great name.)

Stewart's Cuber application is built on top of the great javascript library three.js and tween.js, as well as the well-known jquery.js. So my Rubik's clock project inherits those packages all found in the folder named vendor. What a great foundation.

Thank you!

If you are already familiar with setting up a Raspberry Pi, feel free to skip this section of the Instructable. But know that parts of my setup assume:

• Host name is: rubiks-clock
• User name is: pi
• Timezone is set correctly
• WiFi is enabled

Raspberry Pi Imager

Skip this step if your SD Card came preconfigured, For instance, the Canakit that I like, comes with a pre-configured SD Card so I skipped the configuration in this section.

If you are using a blank SD Card that you bought elsewhere you will need to put a Raspberry Pi OS image onto it before inserting into you Raspberry Pi 4b.

1. Install Raspberry Imager onto your PC (https://www.raspberrypi.com/software/)
2. Run the Raspberry Pi Imager on your PC
3. Insert 8GB (or larger) SD Card into an SD card reader and plug into a USB port
4. Operating System: Raspberry Pi OS (32 bit)
5. Storage:
6. Probably just one option
7. But it is very important to make sure you a pick the SD Card that you recently inserted
8. Verify the size matches the size of your SD Card. E.g. 32 GB
9. It will take 5-10 minutes or more to write the Raspberry Pi image onto the SDCard. Be patient.
10. Writing... xx%
11. Verifying... xx%

Boot the Raspberry Pi

1. Insert SD Card into your Raspberry Pi 4b
2. Plug the HDMI cable into the connector labelled HDMI0
3. Do not plug in the Miuzei 4-inch display just yet since it is easier to install using a standard monitor for now
4. Plug the other end into any HDMI monitor
5. Plug in a keyboard and mouse into any of the four USB connectors
6. plug in the power supply into the USB-C connector at the corner of the Raspberry Pi 4b
7. Power on the Raspberry Pi
8. You will be asked various questions. The following are important:
9. user name should be: pi
10. timezone should be correct you where you live
11. name your computer: rubiks-clock
12. It could take a very long time to initialize and install all updates. (like even a couple of hours sometimes.)
13. After all updates are installed, it will boot into the desktop.

Desktop

With the raspberry Pi connected to a standard HDMI monitor (not the 4-inch display for now) you should be able to answer questions as it boots.

Answer these questions if asked. Also, after it boots, verify these are correct.

• Language
• Timezone
• WiFi network
• WiFi password
• Hostname: rubiks-clock
• User: pi
• Password:

WiFi

It is very important that you enable WiFi on this clock. The time will not be correct if there is no WiFi (or Ethernet) connection since, when it starts up it needs to reach out to get the correct time of day.

Timezone

Make sure to configure your timezone correctly. By default, the Raspberry Pi sets the timezone to London time.

VNC

Before connecting the 4-inch touch screen, verify that you can connect to your raspberry pi using VNC

1. Download and install RealVNC viewer (or another VNC viewer) onto you PC. The free viewer can be found here: https://www.realvnc.com/en/connect/download/viewer/
2. Run RealVNC from your laptop
3. User = pi
4. password is what you typed in when booting for the first time

After VNC is proved working correctly you can go ahead and install the Muzi 4-inch display at any time. It is easier to work from a large screen provided by VNC running on your laptop compared to trying to get stuff configured from the tiny 4-inch display.

SSH

SSH is optional if you have VNC working, but it can be worthwhile.

Before attaching the 4-inch touch screen verify that SSH works.

From Powershell or gitbash or another shell often one of these works:

• ssh pi@rubiks-clock.local
• ssh pi@rubiks-clock

This section describes how to set up the Miuzei. Really I'm just repeating the steps outlined on their website.

Perfect for my "kiosk" project, I found this little display on Amazon. I was a little nervous about installation because it takes effort to install. (Minimal effort actually.) But the steps are simple and everything went well for me. I am very happy about the choice.

The Miuzei 4-inch display requires a special driver to run on a Raspberry Pi. I suggest doing these steps only after:

1. Make sure VNC works properly
2. Make sure SSH works properly

I recommend doing the following steps before mounting the 4-inch display onto the Raspberry Pi. Do these steps from any one of the following interfaces:

• Keyboard, mouse, and standard HDMI monitor.
• VNC connection
• SSH login

There are several choices you can pick from on the Miuzei website. Choose any that you like. I did the following:

cd /home/pi/Downloads
rm -rf LCD-show
git clone https://github.com/goodtft/LCD-show.git
chmod -R 755 LCD-show
cd LCD-show/
sudo ./MPI4008-show

The Raspberry Pi will automatically reboot. Also, assuming you did this step while connected to a normal monitor, everything will now be rotated 90 degrees. That's ok. Now just shut down the Raspberry Pi (or simply remove power).

When you are done with the above:

1. Shutdown your Raspberry Pi 4b
2. Remove the power supply connector.
3. Remove the original monitor HDMI cable.
4. Add all heat sinks that came with the display. They stick onto various chips on the Raspberry Pi.
5. Peel off the red plastic that protects the sticky tape on the connector and attach the fan that came with the display.
6. From the fan, connect the black wire to the "-" terminal and the red wire to the "+" terminal on the display.
7. Connect the 4-inch display
8. Connect the 180 degree HDMI connector from the display to the Raspberry Pi.
9. Plug in the USB-C to power.
10. Turn on your Raspberry Pi.
11. For me, the screen did not work first time I powered on the display. It was mostly black but flickered a bunch. Some people say it comes up all blue the first time. So I toggled power again and everything works great now.
12. switch off power (yet again)
13. switch on power
14. Now All is good. The screen is in landscape and up is in the direction of the HDMI and power connectors.

There is a button on upper-right edge of the touch-screen if you want to dim the display.

Pretty nice, actually!

The touchscreen comes with a white stylus. If you lost it or maybe want a different color, you will find a stylus among the 3d print STL files attached in a step later in this Instructable.

The entire Rubik's Clock application is written in javascript and HTML. The nice thing about that is it runs just about everywhere. But note that you will need a mildly powerful computer to cleanly show the graphics.

• A Raspberry Pi 4b is perfect.
• The cube will run okay on a Raspberry Pi 3b but it may not display smoothly all the time.
• A Raspberry Pi Zero Rev 1 is not powerful enough to run the graphics.

Download from GitHub

The Rubik's Cube application (web page) can be found on GitHub here:

https://github.com/mhirst1960/rubiks-clock

Do these steps to download it:

1. Connect to your raspberry pi from VNC or ssh
2. open a shell

cd /home/pi
git clone https://github.com/mhirst1960/rubiks-clock.git

The following directory is created:

/home/pi/rubiks-clock

Note: odds are I will be making updates to the software in the future. If there are updates available, you can grab the latest stuff at any time by running the following command:

cd /home/pi/rubiks-clock
git pull

Run the clock from Chrome

This step is easiest if you connect through VNC. But you can alternatively connect a keyboard and use your stylus (or a mouse).

Now open the Chrome browser and go to the following webpage:

/home/pi/rubiks-clock/index.html

Your clock should run.

Note: by default it shows a 12-hour clock. One hour after noon is 1:00 not 13:00. So it would show 100 (not 1300).

If the time is incorrect, go to your settings and make sure your timezone is set correctly.

Install for Real

cd /home/pi/rubiks-clock/pi-init
./install.sh
sudo reboot

The clock takes about a minute to fully boot. The Rubik's Clock will eventually show up in full screen and solve itself to the current time of day.

24-hour Clock Option

By default the clock is configured to show the 12-hour am/pm version but it is easy to install the 24-hour version. Just append the arguments "--style 24" to the script as follows:

cd /home/pi/rubiks-clock/pi-init
./install.sh --style 24
sudo reboot

Other options

You have full control over what you want to install. Here is a list of possibilities:

   Usage: ./install.sh [--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-screensaver     do not automatically show Rubik's Cube clock full screen
     --no-httpserver      do not install http server
     --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-autohide-cursor do not automatically hide the mouse cursor on timeout
     --no-extras          do not modify: splash screen, wallpaper, desktop icons

Oops! the time is wrong

If the time on the cube is wrong, most likely it is because your timezone is not set correctly.

Setting Timezone from Desktop

If you are connected using VNC or have a keyboard and mouse connected, press <F11> key so the clock is no longer full screen. Now you are able to access the Raspberry Pi Menus.

1. Select Application Menu -> Preferences -> Raspberry Pi Configuration
2. Click the far-right tab Localisation
3. Click Set Timezone
4. Set it to what you like
5. The clock will automatically adjust to the new time.

Setting Timezone from the Shell

Or you can set the timezone from ssh shell. The easiest way to set the timezone from the command line is to run the Raspberry Pi configuration tool raspi-config.

login to the clock:

ssh pi@rubiks-clock.local

Run the configuration tool as root:

sudo raspi-config

Hints:

Use your keyboard arrow keys to move around:

• up-arrow moves up
• down-arrow moves down
• right-arrow moves you to other sections of the menu such as: <OK> and <Cancel>

Use <Enter> key to make a selection.

To set your timezone do the following:

1. Select Localisation Options
2. Select Timezone
3. Select the region of the world where you live.
4. For example, if you are in the United States: Select either America or US
5. Select the best city or time zone base on where you live
6. For Example if you are on the east coast of USA, New York might be a good choice.
7. The clock will automatically recognize the change and move to the correct time.

Not Working?

Take a look at the section at the end of this Instructable: Troubleshooting Problems. Maybe something there will help you figure it out. Or write a comment. I will reply so maybe we can figure it out together.

Interesting URLs

By default, if you simply view the file index.html from you browser, you will get a medium size cube that shows the time on a 21-hour clock. But there are plenty of options if you want a different clock (or different cube altogether). Here is a short list of interesting URLs you might like:

• 12-hour medium size clock (default)
• file:///home/pi/rubiks-clock/index.html
• http://rubiks-clock.local
• file:///home/pi/rubiks-clock/index.html#clock12
• http://rubiks-clock.local#clock12
• 24-hour medium size clock
• file:///home/pi/rubiks-clock/index.html#clock24
• http://rubiks-clock.local#clock24
• 12-hour giant clock that fills the screen (default value for the clock on the desk)
• file:///home/pi/rubiks-clock/index.html#giantclock12
• http://rubiks-clock.local#giantclock12
• 24-hour giant size clock (kiosk 24-hour clock)
• file:///home/pi/rubiks-clock/index.html#giantclock24
• http://rubiks-clock.local#giantclock24

Note: the above URLs assume that you domain name is .local . Some home routers don't set a domain name so maybe for you house it is http://rubiks-clock instead of http://rubiks-clock.local. If you are at a business, the domain might be something totally different. Like perhaps http://rubiks-clock.internal.mybusiness.com. Poke around, hopefully you will find what works for you.

#something runs presetSomething()

For a full list, search the file cubes.js for any function that begins with the word preset. Everything after the word would be the same word after # in the URL. For instance presetClock12() is run when index.html#clock12 is typed into the browser.

Brightness

The entire left side of the screen is a hidden button that sets the brightness.

There are four brightness settings. Keep pressing and the screen will grow dimmer until it reaches minimum. Press one more time to make it full brightness again.

Options Menu

Also, you can click on the button in the upper-right corner of the screen named "options". From here, you can:

• Select a 12-hour clock or 24-hour clock
• Pick among a variety of sizes and the
• Do some extra stuff like:
• enable control of the cube giving you the ability to rotate it with your stylus and take a look at all the numbers on all the sides.
• set the cube into a slow spin
• show the face names
• show twist letters while the cube is indexing to the next minute.

I built the clock application on top of the nicely written Cuber demo found on GitHub: https://github.com/stewdio/Cuber-DEMO. I customized the code in a few select areas to turn it into a clock.

• I added the concept of a photo-cube. The six "photos" on my cube are simply pictures that I generated with PhotoShop -- a grid of numbers in strange orientations, one gris for each side of the cube. There is a folder with six different pictures for the 24-hour clock, and another folder with six pictures of numbers for the 12-hour clock.
• The solver that I implemented ignores the cube's concept of solved since the definition of solved changes every minute.
• The table of twist sequences is pre-configured based on data that my friend David Reynolds generated. That table of twists is shear genius. It took months of optimization and many clever tweaks to create that table. Appreciate that a lot of work went into the perception of simple calm cube movement every minute all day long.

Here is a quick summary of the key files that run the clock. Most of it is javascript.

index.html

This is the entry point to the clock. Point to this from your browser.

Near the beginning of index.html there are a bunch of includes that pull in all the javascript code. It is a good starting point to find all the major pieces.

styles/base.css

CSS holds all the magic for hiding and showing different things on the face of the cube. This holds the secret to all the glitz and glamor of shiny colorful stuff on and around the cube.

scripts/erno.js

This is the entry point to the javascript. This is where the code starts after you open index.html. There is a state machine to handle the lifespan of a cube. (Awesome name! I did not name the file, but I love it!)

scripts/cubes.js

Contains code for manipulating cubes. Including a bunch of functions named presetSomething(). You can run these functions directly as index.html#something.

For instance the function presetClock24() can be run from your browser as index.html#clock24. That one shows the 24-hour clock.

scripts/groups.js

This is basically just an extension of cubes.js. If you can't find something you thought might be in cubes.js, try looking in groups.js

scripts/cubelets.js

Handles all the details for each of the 54 stickers on the cube.

scripts/solvers/clock.js

Contains functions specific for executing twists sequences each minute of the day. It simply checks the time of day and looks into the table any time it needs a set of moves to index to the next time of day.

If the clock needs to catch up to a time that is not nearby (like if the browser sleeps then wakes) the software executes the sequence of moves to get to midnight then executes moves from midnight to get to the current time.

scripts/solvers/rubikClockStates12.js

Contains twist sequence data for the 12-hour clock to get from any time of day to another time of day with values in each array:

• from any time of day to the next time of day
• from any time of day to midnight
• (and by reversing, from midnight to any time of day)

No, the javascript is not calculating on the fly. The javascript simply runs the twists found in the table.

This minute-by-minute data was pre-calculated using software written in C++. It took months of analysis and thoughtful planning to generate a good cube layout and optimized twist sequences. Behind the scenes it is immensely complicated; the final result is astoundingly simple.

Knowing this one can now begin to appreciate the work required to make the project so successful.

scripts/solvers/rubikClockStates24.js

Contains twist data for the 24-hour version of the clock (see above for an explanation)

media/clock12/

This directory contains six images -- one for each face on the 12-hour clock. Each image is divided into a 3x3 grid representing the nine stickers on a face. This is basically a photo cube of numbers in various orientations. This is what the the clock looks like at 12:00 midnight.

The files are:

• top.png
• left.png
• front.png
• right.png
• back.png
• down.png

Notice that media/clock12/front.png has the numbers 1200 on the front.

media/clock24/

Contains the six images used for the 24-hour clock (see above). Notice that media/clock24/front.png has the numbers 0000 on the front.

Using the stylus you can click on the options button in the upper-right corner. Try all the possibilities. That's fun too.

Clock Style

• 12-hour
• creates a 12-hour (am/pm) clock
• 24-hour
• creates a 24-hour clock

Size

• Tiny
• Small
• Medium
• Large
• Giant

Extras

• Auto rotate
• sets the cube in motion: slowly rotating
• Show twist notation
• Briefly flashes a letter in the background indicating the twist move currently being executed.
• Cube face labels
• Shows the name of each of the six faces of the cube:
• Top
• Left
• Front
• Right
• Back
• Down

There are a few things interesting about this case design:

• The front and back faces tilt at a 20 degree angle. Because of this, I used loft instead of extrude to produce horizontal faces.
• I built numerous offset planes to help place new sketches
• I (minimally) modelled the Raspberry Pi 4b and the 4-inch screen as separate components. This helps with placement of holes and other features.
• I used joints in various places to make sure components are properly aligned.

The five components are:

1. The case Front
2. The case Back
3. A tab "keeper" to lock the touch screen onto the front face. (Sorry, I don't know what to call it. Something like a bracket.)
4. A stylus holder provides storage for the stylus that comes with the touch screen. It's a hole in the top of the case.
5. An extra stylus if you need it.

Here are the steps. You can refer to the screen shots above or open up the attached Fusion 360 file to help follow along.

1. Create sketch plane -110 degrees from horizontal
2. Create a sketch for the front on the angled sketch plane
3. Extrude the front from the new sketch
4. Create offset plane 50mm from the original angled plane
5. Create sketch for the back on the new offset angled plane
6. Use loft to extrude the back so it meets the front
7. Modify the back using shell to hollow it out
8. Use loft to extrude the front in the direction of the back
9. Modify the front using shell to hollow it out.
10. Depending on the order of previous steps, you may need to do some cleanup (like I did):
11. Offset face is helpful shortening some extrudes (in the correct direction
12. Use Combine to combine objects into one component if for instance you have two or more bodies that should be joint together to the front be one component.
13. Maybe you have some temporary body you don't need anymore. You can delete it or suppress it (but be careful if you think you might need it sometime again).
14. Create sketches and extrude holes and other items as needed.
15. Now might be a good time to align the front and back cases.
16. Create an as-built joint between touching faces of the front and back.
17. It is fun to watch the animation so click Preview Motion and watch the front slide in and out of the back of the case.
18. It is always good to round off all the outside edges using the fillet tool.
19. Use the Chamfer Tool to put some angle on some of the edges on the inside of the case front, to help guide insertion during assembly. Much easier to put it together after everything is completely printed.

Model your Electronics

Now is a good time to model the raspberry Pi and the touch screen. The hooks and keepers that hold the screen to the front of the face need to be positioned so they do not interfere with components on the pi/screen assembly.

1. Measure your electronic components (or better: reference the ePi4b mechanical drawings and touch screen mechanical drawings).
2. Create a simple sketch of rectangles for components around the edges that you need to avoid when designing attachments.
3. To get proper alignment I used the Project tool to transfer onto this new sketch elements from our very first sketch done in step two.
4. This tool is found near the bottom of the Create menu
5. Project is very helpful feature of Fusion 360 that is often overlooked. Before I discovered this feature I tended to add more and more items to growing complicated sketches. A cluttered sketch leads to cumbersome extrudes so, when in doubt, consider creating a brand new sketch.
6. Extrude a new component: the Raspberry pi circuit board (1.5 mm)
7. Extrude a new component: the touch screen 6mm at an offset of 22.5mm from the surface of the Raspberry pi (based on my measurements)
8. I created a new sketch for the interesting components found on the touch screen. You could easily have put these rectangles on the previous sketch. It doesn't matter much since that original sketch is not very cluttered.
9. Extrude the touch-screen components to the correct height.
10. Create a ridgid group. Connect the raspberry Pi to the touchscreen so where one moves, the other follows.
11. Create a joint between the touch-screen and the front of the case
12. And watch the Preview Motion video. It's fun!
13. I repositioned the touch screen so it aligns with the recess in the back of the case-front. (Seems like I could have accomplished this in previous steps. But, just saying, that's how I did it. There is always more than one way to accomplish anything in Fusion 360!)

Decorations

You will want the front of the case to look good. I created a simple rounded rectangle. I left it blank so I can place any sticker that I like. I experimented with some words etched into the front but abandoned it in favor of flexibility of nice colorful stickers printed on my Inkjet printer.

1. Create a sketch or two for some decoration on the front of the case.
2. Extrude the decorations that you like.
3. Go ahead and experiment.
4. In the timeline history, feel free to suppress any features you don't like. You can unsuppress them some day if you want them back. No need to delete them, but you can do that too!

Stylus Holder

The touch screen comes with at tiny stylus for clicking on menu buttons. I created a hole in the top of the case to keep the stylus handy. (If I hadn't done this step I probably would have lost my stylus by now. I'm so happy I added this feature.

The holder is a separate component that inserts into the top of the case-front. Maybe someday I will have a different sized stylus. Or maybe I will want to tune the design a bit. Because it is a separate component, I can make little changes and try them quickly. No need to print a whole new front (which takes like 12 hours), simply print a holder (which takes like half an hour to print). Then slide it in and see if I like it.

1. Create a plane perpendicular to the front face of the box (aka 20 degrees from horizontal). I wanted the stylus to stick up parallel to the front. Not vertical. It looks nicer.
2. Create a sketch on the new plane
3. Circles and arrows for the various inside and outside dimensions of the holder.
4. Use Extrude to join and cut holes into a section of the front that the holder will snap into.
5. Use Extrude to create the new component
6. The holder looks like a "T"
7. Extrude the top (leaving a hole for the stylus).
8. Make sure the new part does not interfere with assembling the two halves of the case.
9. So make it does not stick up beyond the top of the recess it sits in.
10. Extrude (join) the bottom, attaching it to the top of the "T" (again, leaving a hole for the stylus).
11. Apply the appropriate fillets
12. Edges should be smooth so it looks good and feels good in your hand.
13. Make sure to give the top edge a generous rounded edge to help guide the stylus into the hole.
14. Cut a hole in the top of the case-back. Your stylus will need to pass through both halves of your case.
15. This hole should be bigger than the hole we created in the holder.
16. Give the inside of your new hole a generous rounded edge to help guilde the stylus in. Just like we did a few steps before.

Stylus

I also created a stylus in case you lost yours or want to print one in a different color. Blue is a good choice!

Screen Tab (Keeper)

Now we need to create our final component -- a small piece of plastic that holds the screen firmly onto the front of the case. I call it a tab. Maybe it could be called a bracket.

The bracket screws into the case. It overhangs the touch-screen and locks it into place. All you need is one of these. It holds nice and snug.

1. Make a sketch
2. Plan your placement and avoid all electronics that stick up from the circuit board.
3. A couple of rectangles and a couple of circles is all you need.
4. Extrude a new component aligned from the case to the back of the touch screen.
5. Make the hole the same size as the cylinder it fits over the top of
6. Extrude (join) a section on top of this so it overhangs the back of the display. And leave a 3mm hole to thread a screw through.
7. (Originally I copied one of these to another part of the screen but it interfered with my stylus holder so I suppress that feature. And anyway experiments show that one is plenty! )

Screw Holes

You will need a couple of 3mm holes in the bottom of you case to hold the halves together.

1. Create a sketch on the bottom plane of one of the halves of the case.
2. 3mm circle
3. 6mm circle
4. and copy those two circle so you hve a place for two screws
5. Extrude (cut) two 6mm holes in the bottom of the case-back. Make them deep enough to hide your screw heads. 3.1mm worked for me.
6. Extrude (cut) two 3mm holes all the way through the case-back.
7. Extrude (cut) two 3mm holes all the way through the case front, aligned with the two holes we made in the last step.

Inspect

We are done but now would be a good time to go around an inspect all the features.

• Take measurements using the Inspect tool. Make sure everything makes sense, especially where the components interact (touch) each other.
• Zoom in and out and look through all the holes. Make sure things are aligned perfectly.

Hopefully you have been saving you project periodically between key steps. But make sure to save now!

Save As Mesh

Now all we need to do is save all four components as .stl files.

1. From the browser menu on the left, right-click on the component named front. That assumes you named the front half as front.
2. Select Save As Mesh
3. The defaults should be fine.
4. The format should be either STL (Binary) . Or you can select STL (ASCII) if you prefer. Shouldn't matter.

Repeat the above steps for all components:

1. Front
2. Back
3. stylist-holder
4. screen-tab
5. stylus
6. rtc-DS3231-holder

(No need to save the reference electronics components: raspberry pi4 and 4 inch touch screen)

STL Files

The STL files that you need to print the case are attached at the end of this step. Or, if you prefer, you can download them from Thingiverse: https://www.thingiverse.com/thing:5875567

Very Important Settings!

There are a couple of very important settings you will need to use. Do this to make your life a whole lot easier:

• Use tree support structure! Do not use normal structure! You may need to go to your advanced settings to enable support structure choices.
• Print the back lying down on its back. Do not print standing up or your case will crack during assembly.

Cura, Orient to the Build Plate

The front face of the case tilts at a 20 degree angle. Because of this, various component STL files result in a 3D part that lands on the slicer build plate at strange angles. You will need to reorient the part before slicing.

Fortunately the application Ultimaker Cura makes this easy. There is a feature to orient a part by simply selecting the face that you want to be sitting on the build plate. I included a couple of quick videos above. These are the steps:

1. Select the part you want to rotate.
2. Select the Rotate tool (a circular arrow)
3. Zoom in if you need to.
4. Click on the face that you want to reorient downward. For instance: the top face on the stylus holder Tee. This is the face that you want to be printed sitting on the build plate.
5. The part will immediately jump to a new orientation. Hopefully the orientation that you like.
6. If the part is still not oriented correctly, just repeat the above steps until you are happy.
7. But you shouldn't completely trust that everything is perfect. Cura may not have placed the part correctly. Sometimes Cura makes a mistake and drops a part above or below the build plate. These steps are probably not needed, but can't hurt:
8. Select the Move tool
9. Grab the arrow that points up. The Z arrow.
10. Drag the part up.
11. Drop it.
12. It should land correctly on the build plate.

Front

Print the front upright in its normal standing position using tree support structure. It takes about 12 hours to print.

Back

Important! You must print the back face-down. Or more accurately: print so the back of the clock is downward in contact with the build plate. If you don't -- if you print it standing up -- then you run the risk that the case will split apart during assembly.

Tree support seems to work well here although the only places that actually need any support are the three holes in the top and bottom. Support on this piece not as critical as it is on the front section. Takes about 15 hours to print.

Stylus Holder

Print the stylist holder upside down.

Clamp

Print the small clamp flat so it is strong where it needs to be strong.

Labels

I've attached a PDF file rubiks-clock-labels.pdf. You can print it on glossy-white sticker paper and stick onto the front of you clock. There are several choices printed on the sheet:

• Rubik's Clock
• rubiks-clock.local
• rubiks-clock2.local
• rubiks-clock3.local

Steps:

1. Insert glossy white sticker paper into your color inkjet printer
2. print
3. Cut out label with scissors
4. Peal off the backing
5. Stick on the front of the clock

If you need to customize a label, you can find rubiks-clock-labels.docx among the files I posted on GitHub. Modify the Word document however you like, and print it.

The Raspberry Pi 4b does not have a built in battery-backed clock that keeps time when the power is off. Because of this, you must be connected to the internet every time you turn on the clock. So the problem arises when you want to unplug it and bring it somewhere. Like, maybe you will want to bring your cool clock into work to show your friends. But it can be a bit of a hassle to set up WiFi when you get there.

Good News! The new Raspberry Pi 5 comes standard with a Real Time Clock. If you have one of these, you can completely skip this step, just buy the compatible battery and plug it in.

To get around this problem, you will need to add a Real Time Clock (RTC). This is a small circuit board with a lithium battery that keeps the time without fail for many years. I installed a DS3231 RTC that I purchased on Amazon https://www.amazon.com/dp/B082VL4GM6. It works great.

The biggest issue for this project is that the display connector covers up the Raspberry Pi pins that we need to connect a Real Time Clock. The pins that we need are the I2C pins SCL and SDA, as well as +5 and ground. My solution is to connect the RTC to the Raspberry Pi connector using wire-wrap. It works great as long as the wire that we wind around the connector pins is not too tall.

With power off, use a wire-wrap tool connect the following pins together:

• SDA to SDA
• SCL to SCL
• VCC to +5v
• GND to GND

Make the wires about 10 to 15 centimeters long. Just long enough to reach the upper-left corner of the clock, where we will mount the RTC circuit board.

Lithium Battery

Warning: do not use one of the common CR2032 (non-rechargeable) Lithium batteries in this circuit. It could catch fire or explode! Notice the warped battery in the photo above.

Make sure you use a LIR2032 (rechargeable) Lithium battery! It works well.

If you plan to use the more common CR2032 (non-rechargeable) battery, you will need to modify the DS3231 circuit board. Many people have had good luck removing the resistor in the charging circuit to make it compatible with at non-rechargeable battery. I did not do this. There is a link below which describes how you can do this modification. No guarantees.

I2C pull-up resistors

The circuit board I used has pull-up resistors for the I2C signals. Several websites suggest that these resistors should be removed since the Raspberry Pi also has the same pull-up resistors on it. For me, the RTC works fine without making and modifications to the DS3231 circuit board. In fact, during an experiment, when I did remove the questionable resistors, the RTC failed to work. I2C communication failed. Therefore, I would recommend: do not make the modification. Just leave the circuitry alone. It works fine as-is. (I welcome comments. Please let me know if you have any thoughts on this.)

Helpful Link

I found the following link very helpful: https://www.raspberrypi-spy.co.uk/2015/05/adding-a-ds3231-real-time-clock-to-the-raspberry-pi/

Mount onto RTC Holder

Download and print rtc-DS3231-holder.stl which is attached in the previous step with the rest of the 3d print files.

1. Connect the DS3231 holder to the screen keeper with a M3x8mm screw
2. Connect the DS3231 to the holder with two or three M2x4mm screws

You will need to do the following steps to configure the Raspberry Pi to use the newly-installed DS3231 Real Time Clock.

Turn on the Raspberry Pi with at Keyboard and mouse connected.

Edit /boot/config.txt

sudo nano /boot/config.txt

Add the following command to the end of the file:

dtoverlay=i2c-rtc,ds3231

Use ^X to exit. And answer "Y" to save.

Reboot the Raspberry Pi

sudo reboot

After it boots, run the following commend to see if the Raspberry has detected the RTC and the dtoverlay command is working:

sudo i2cdetect -y 1

You should see the UU in the output like this:

   0 1 2 3 4 5 6 7 8 9 a b c d e f
00:             -- -- -- -- -- -- -- -- 
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
20: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
30: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
40: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
50: -- -- -- -- -- -- -- 57 -- -- -- -- -- -- -- 5f 
60: -- -- -- -- -- -- -- -- UU -- -- -- -- -- -- -- 
70: -- -- -- -- -- -- -- --   

remove fake-hwclock

Run these commands to remove the default Raspberry Pi configuration because normally there is not Real Time Clock:

sudo apt-get -y remove fake-hwclock
sudo update-rc.d -f fake-hwclock remove
sudo systemctl disable fake-hwclock

Also you will need to comment out some lines in the file /lib/udev/hwclock-set. So edit it:

sudo nano /lib/udev/hwclock-set

Add a # at the beginning of these lines to comment them out:

#if [ -e /run/systemd/system ] ; then
# exit 0
#fi

And this line as well:

#/sbin/hwclock --rtc=$dev --systz

exit and save. So now your file should look something like this:

#!/bin/sh
# Reset the System Clock to UTC if the hardware clock from which it
# was copied by the kernel was in localtime.

dev=$1

#if [ -e /run/systemd/system ] ; then
#  exit 0
#fi

#/sbin/hwclock --rtc=$dev --systz
/sbin/hwclock --rtc=$dev --hctosys

If the Raspberry Pi is connected to WiFi the date should be correct. Now would be a good time to verify that. Run this command.

date

If the date and time are correct, now we can use that to initialize the RTC. Run this command:

sudo hwclock -w

At this point everything should be good to go. From now on, as long as the battery in the RTC DS3231 has a charge, your date and time will be correct even of you unplug your clock and move to to a place where there is no WiFi.

Verify RTC is working

You can use this command to check the time that the RTC thinks it is:

sudo hwclock -r

Also it would be good to test the time with WiFi disabled.

1. Connect Keyboard (and mouse) to the USB connector
2. Press F11 to access the Raspberry Pi menus.
3. Click on the WiFi symbol in the upper-right
4. Disable WiFi
5. Un plug the Rasbperry Pi
6. Wait 5 or 10 minutes.
7. Plug it back in
8. The time on the Rubik's Cube should be correct.

Make sure you re-enable WiFi after testing is complete:

1. Connect Keyboard (and mouse) to the USB connector
2. Press F11 to access the Raspberry Pi menus.
3. Click on the Red up/down error (no WiFi) symbol in the upper-right
4. Enable WiFi
5. The error symbol should change back to a normal WiFi symbol

Helpful Link

This Adafruit website may be helpful: https://learn.adafruit.com/adding-a-real-time-clock-to-raspberry-pi/set-rtc-time

There are some common problems people might encounter. If something on this list does not fix your issue. Please add a comment. I can add to this list of solutions:

Wrong Time Of day but Minutes are Good

If the time of day is wrong by an exact number of hours but the minutes are correct, odds are your timezone is not set correctly. My default the Raspberry pi sets the time to the London timezone.

1. Connect a keyboard to one of the USB connectors
2. Press F11 key to reveal the Raspberry pi desktop
3. Click on the picture of the Raspberry
4. Go to Preferences -> Raspberry Pi Configuration
5. Click on the tab Localisation
6. Click on Set Timezone
7. Select your area
8. Select your Location
9. The time shown on th upper-right of the screen shoul now be correct
10. The time on the Rubik's Clock will update correctly
11. You can restart the Clock now. That's the easiest way to get back to the full-screen clock.

Wrong Time of Day Altogether

The Raspberry pi needs a connection to the internet so it can get the correct time of day when it is powered on. So you need to make sure there is a WiFi connection.

1. Connect a keyboard to one of the USB connectors
2. Press F11 key to reveal the Raspberry pi desktop
3. Click on the ethernet-connect symbol near the upper-right of the screen. If WiFi is not connected, it will look like up and down arrows with red "X".
4. Select the WiFi for your house.
5. Enter the password for your Wifi.
6. Restart the clock either from the applications (raspberry) menu, or by simply unplugging and plugging it back in.
7. The time on the cube should now be correct.

Screen is blank

If you have plugged in the clock to power and a red light is shining inside the case, it is possible that the screen has disconnected from the raspberry pi. Possibly you have shiiped it to a friend and the screen came loose from the Raspberry Pi.

1. open up the case
2. Check all the connections
3. make sure the large connector on the screen is firmly connected to the Raspberry. This is located near the bottom of the clock.
4. Make sure the 180-degree HDMI connector is connected to the Raspberry Pi and to the touchscreen. This is the little circuit board near the top of the clock. One end is a standard HDMI the other end is a small HDMI.

Check here later. If I make any updates I'll post a note here.

Updates

1. 03-March-2023 I updated the rc-back.stl file and Fusion 360 design to include a "stop" that prevents the display connector from disconnecting from the Raspberry Pi. You will want this feature if you plan to ship the clock somewhere (or if you are clumsy and tend to drop things :)
2. 05-March-2023 If you need to connect a keyboard to the clock, I highly recommend this 180-degree connector: https://www.amazon.com/gp/product/B0BN9QPB5W/
3. The Raspberry Pi does not come with a real-time clock (aka RTC). It does not automatically save the time when it is powered off. I added a couple more steps to show you how to install a DS3231 RTC.