(UPDATE: See the notes below the code for instructions on how to customize the messages.)
(SECOND UPDATE: I embedded this on my web page back when I put this project together. I've now changed the title, because when you work form home, the days and hours still tend to just kind of glom together.)
Adafruit's project requires a Raspberry Pi and a small display, plus some programming knowledge. They also helpfully point to the original project from mwfisher3. The code is here on
GitHub. I used the today.html file as a base for my project.
First thing you need to do is to create the HTML file. You can do this in Notepad or any other editor that produces plain text.
Here's the code I used:
| <!DOCTYPE html>
| | <html>
| | <head>
| |
| | <meta http-equiv="refresh" content="900">
| | | | | | | |
| | <style>
| | body {
| | background-color: black;
| | overflow: hidden;
| | margin: 0px;
| | }
| |
| | h1 {
| | font-size: 120px;
| | line-height: 0px;
| | padding-top: 40px;
| | color: #FFFFFF;
| | }
| |
| | h2 {
| | font-size: 60px;
| | line-height: 50px;
| | color: #808080;
| | }
| |
| | .clock {
| | position: fixed;
| | top: 50%;
| | left: 50%;
| | transform: translate(-50%, -50%);
| | }
| | </style>
| | | | | |
| | <link rel="manifest" href="manifest.json" />
| | | |
| | </head>
| | <body>
| | <div class="clock">
| | <center>
| | <h1 id="day"></h1>
| | <h2 id="time"></h2>
| | <script>
| | var d = new Date();
| | var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
| | var time = ["midnight-ish", "late night", "late", "super late", "super early", "really early", "dawn", "morning", "morning", "mid-morning", "mid-morning", "late morning", "noon-ish", "afternoon", "afternoon", "mid-afternoon", "late afternoon", "early evening", "early evening", "dusk-ish", "evening", "evening", "late evening", "late evening"];
| | document.getElementById("time").innerHTML = "(" + time[d.getHours()] + ")";
| | document.getElementById("day").innerHTML = days[d.getDay()];
| | </script>
| | </center>
| | </div>
| | </body>
| | </html> |
| |
I've commented the code so you know what's going on. The script is JavaScript. It essentially grabs the date and time off of your device and then changes the time to the word or phrase appropriate for the time of day. Each phrase is tied to an hour starting at midnight, so you can change the text of the phrases to whatever you want. For example, 7 and 9 in the morning are "breakfast" and "second breakfast." and 11 is "elevensies." Yes, you could even put the proper hour in, but why bother unless you really need a functional clock, in which case there are better script snippets you could be using. If you're new to this, copy the line with the phrases and paste it to a new line. Comment out the original line of code by placing two slash marks (//) at the start of the line. That way if you find it isn't working as you expect, you still have the old code to refer to, or you can restore it if you wish.
If you want to run this on your phone in full screen mode, it gets a little tricky, but it can be done. The first thing I need to point out is that this only works under Chrome as far as I'm aware. You will need to create another text file called manifest.json. Json is a method of storing data using JavaScript. I used the code
here as a base.
Essentially, you're sorta kinda creating a mini application that can run with the browser bar turned off so you can get the entire screen. But what do you do to get out of the browser? Bring up your task list and swipe it out of the way. You can also minimize it by going to your home screen. There are many things you can do with a manifest file. You can also create a custom icon, which is referenced in the above link. So, here's the basic stuff:
| {
|
| "short_name": "Pandemic Clock",
|
| "name": "Pandemic Clock",
|
|
|
| "start_url": "clock.html",
|
| "display": "fullscreen",
|
| "orientation": "landscape"
|
| }
|
|
The short name is what appears under the icon on your device. The long name is pretty much what it says on the tin. It's a longer description. The start_url is the name of your html file. There are different options for display (see the link above), but fullscreen is what tells it to remove the browser bar. Orientation is set to landscape. I believe you can leave this off if you want your screen to autorotate. It's handy if you want to force a particular rotation, which is why I used it.
Now, there's one more bit of magic to be done to get this to show in full screen. Open the file in Chrome and then press the three dots (usually on the upper-right) to get to the menu. One of the options should be Add To Home Screen. Click that and you'll be given the option to rename your shortcut. Close your browser. Now, whenever you click on the icon on your home screen, the full screen version of the clock will show up. Simple, eh?
If you don't want to run it on full screen mode on your phone, simply comment out or remove the link to the manifest.json
You may find that your clock still isn't perfectly centered. The fix for that is easy. Just add an opening and closing CENTER tag right after the start and before the close of the div.
There's one final step: Store the files in the same directory and then open the HTML file. You can put them on a web server if you have one available to you.
Have an iPhone? Well, you can try this, but I'm not going to make any promises. If you figure it out, let me know. Comments here are disabled due to technical issues, but you can let me know on the
Facebook post.
Have fun!