RasPiWatch Start
This commit is contained in:
commit
bd24eed3b4
43
Readme.md
Normal file
43
Readme.md
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
#Parts Needed
|
||||||
|
A Raspberry Pi
|
||||||
|
|
||||||
|
A TFT LCD display. I bought one of these https://www.adafruit.com/products/1601 complete at http://raspberrypilcd.com/collections/frontpage/products/pitft-assembled-320x240-2-8-tft-touchscreen-for-raspberry-pi. Simply follow these instructions to configure Debian for the screen https://learn.adafruit.com/adafruit-pitft-28-inch-resistive-touchscreen-display-raspberry-pi/software-installation (Don't ask me why they are using a fake ssh on a windows machine which you should never use).
|
||||||
|
|
||||||
|
Any battery with USB output to provide power.
|
||||||
|
#Additional software installation
|
||||||
|
```
|
||||||
|
sudo apt-get install unclutter x11-xserver-utils
|
||||||
|
```
|
||||||
|
#Setting up
|
||||||
|
1. You need to copy over this folder to the Desktop (/home/pi/Desktop/) named clock (you can rename, but make sure you correct any differences with the instructions).
|
||||||
|
2. Create a file in the home directory (/home/pi/) and name it .xinitrc putting the contents of below:
|
||||||
|
```
|
||||||
|
xset s off #Don’t activate screensaver
|
||||||
|
xset -dpms #Disable DPMS (Energy Star) features.
|
||||||
|
xset s noblank #Don’t blank the video device
|
||||||
|
exec /etc/alternatives/x-session-manager #Start lxde
|
||||||
|
```
|
||||||
|
3. Edit /etc/xdg/lxsession/LXDE/autostart to add at the end the following:
|
||||||
|
```
|
||||||
|
@midori -e Fullscreen -a /home/pi/Desktop/RasPiWatch/index.html
|
||||||
|
```
|
||||||
|
4. Reboot the Pi or plug it in and wait for it to boot. Once booted, you will have a nice watch face!
|
||||||
|
|
||||||
|
#Adding Backgrounds
|
||||||
|
Simply make a new folder with the name ```bg``` in the RasPiWatch folder and add photos that are 320x240. Once you have all the photos you want, if you're using a mac, you can use a hack of mine to make the list for the Array called backgrounds. My hack is to copy all of the files and paste into TextMate which will create the list of files, one per line, then you need to replace everything but the file name with find and replace and replace new lines with ```","``` (with quotes). Once you got every replaced, cap the list out with quotes so it looks like ```"1.jpg","2.jpg"``` and then paste into the array.
|
||||||
|
|
||||||
|
#Operation
|
||||||
|
The time does not retain on the clock, so in-order to keep the time correct you need to plug into ethernet or have Wifi setup so that Debian can call the time server to get the current time.
|
||||||
|
|
||||||
|
Once started, you may exit by hooking up a mouse and right clicking to choose exit full screen or you can use a keyboard to hit F11 to exit full screen or even enter full screen.
|
||||||
|
|
||||||
|
#Other ideas
|
||||||
|
You can possibly add music and setup the HTML so you can load and control the music.
|
||||||
|
|
||||||
|
You can possibly have video and setup the HTML so you can load and control the video.
|
||||||
|
|
||||||
|
You can install Nginx and php and make the clock a PHP clock which will allow you to do advanced things via the system command.
|
||||||
|
|
||||||
|
You can configure the buttons on the TFT to do things.
|
||||||
|
|
||||||
|
You can hook up a bluetooth dongle, write an android app, and get notifications.
|
||||||
81
index.html
Normal file
81
index.html
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Clock</title>
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
background: #000000;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: left top;
|
||||||
|
background-size: cover;
|
||||||
|
text-shadow: 4px 3px 9px #000000;
|
||||||
|
}
|
||||||
|
#date {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#time {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 90px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="date"></div>
|
||||||
|
<div id="time"></div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function pad(num, size) {
|
||||||
|
var s = num+"";
|
||||||
|
while (s.length < size) s = "0" + s;
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
var dayString = {0: "Sunday", 1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday"};
|
||||||
|
var monthString = {0: "January", 1: "February", 2: "March", 3: "April", 4: "May", 5: "June", 6: "July", 7: "August", 8: "September", 9: "October", 10: "November", 11: "December"};
|
||||||
|
function updateClock() {
|
||||||
|
var time = new Date();
|
||||||
|
var dayOfTheWeek = dayString[time.getDay()];
|
||||||
|
var month = monthString[time.getMonth()];
|
||||||
|
var day = time.getDate();
|
||||||
|
var year = time.getFullYear();
|
||||||
|
|
||||||
|
var hours = time.getHours();
|
||||||
|
var minutes = time.getMinutes();
|
||||||
|
var seconds = time.getSeconds();
|
||||||
|
|
||||||
|
if (hours>12) {
|
||||||
|
hours -= 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("date").innerHTML = dayOfTheWeek+" "+month+" "+day+", "+year;
|
||||||
|
document.getElementById("time").innerHTML = hours+":"+pad(minutes,2)+":"+pad(seconds,2);
|
||||||
|
|
||||||
|
}
|
||||||
|
setInterval(updateClock, 20);
|
||||||
|
var widthAspect = window.innerWidth/window.innerHeight;
|
||||||
|
var heightAspect = window.innerHeight/window.innerWidth;
|
||||||
|
var sizeBy = 0;
|
||||||
|
if (widthAspect<heightAspect) {
|
||||||
|
sizeBy = window.innerHeight;
|
||||||
|
} else {
|
||||||
|
sizeBy = window.innerWidth;
|
||||||
|
}
|
||||||
|
var dateSize = sizeBy/13;
|
||||||
|
var timeSize = sizeBy/6;
|
||||||
|
document.getElementById("date").style.fontSize = dateSize;
|
||||||
|
document.getElementById("time").style.fontSize = timeSize;
|
||||||
|
var backgrounds = Array();//Place your background list here E.G. Array("1.jpg","2.jpg")
|
||||||
|
function changeBackground() {
|
||||||
|
if (backgrounds.length==0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var image = backgrounds[Math.floor(Math.random()*backgrounds.length)];
|
||||||
|
document.body.style.backgroundImage="url('bg/"+image+"')";
|
||||||
|
}
|
||||||
|
setInterval(changeBackground, 60000);
|
||||||
|
changeBackground();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user