Giter Club home page Giter Club logo

station-clock's Introduction

Station Clock

clock

I got a HyperPixel ages ago but it wasn't suitable for the thing I wanted it for, so it's been sat in a drawer. I recently came across a very lovely D3.js clock and it gave me an idea.

This repo is mostly just a few bits of glue tbh, all the good stuff was created by other people.

Software

This was all done on a pristine install of Raspberry Pi OS Lite (i.e. no desktop) via NOOBS 3.5.

You'll need to use a proper screen for the install because the Hyperpixel won't work until you've installed the drivers.

After the first boot, you need to enable SSH:

sudo raspi-config nonint do_ssh 0

Once you've done this you should be able to get to the Pi with

Presuming this works, power it off, and attach the Hyperpixel (or move the card to the Pi which has the Hyperpixel on it). When you boot it, the screen won't work, but we'll fix that in a minute.

Install the screen drivers

SSH onto the Pi, and then, per this:

curl https://get.pimoroni.com/hyperpixel4 | bash

Select the correct screen and Pi combination (in my case it's 3 : Weirdly Square - Pi 3B+ or older) and let it do its thing. When it's done it will reboot, and the screen should work. Now

Make it boot into Chromium

Per this blogpost:

Install some stuff:

sudo apt-get update
sudo apt-get install \
  --no-install-recommends \
  --yes \
  xserver-xorg-video-all \
  xserver-xorg-input-all \
  xserver-xorg-core \
  xinit x11-xserver-utils \
  chromium-browser \
  unclutter \
  nginx

Start X on login:

cat << EOF > ~/.bash_profile
if [ -z $DISPLAY ] && [ \$(tty) = /dev/tty1 ]
then
  startx
fi
EOF

Run Chromium when X starts:

cat << EOF > ~/.xinitrc
#!/usr/bin/env sh

URL=http://localhost
SCREEN_SIZE=720

xset -dpms
xset s off
xset s noblank

unclutter &
chromium-browser \${URL} \\
  --window-size=\${SCREEN_SIZE},\${SCREEN_SIZE} \\
  --window-position=0,0 \\
  --start-fullscreen \\
  --kiosk \\
  --incognito \\
  --noerrdialogs \\
  --disable-translate \\
  --no-first-run \\
  --fast \\
  --fast-start \\
  --disable-infobars \\
  --disable-features=TranslateUI \\
  --disk-cache-dir=/dev/null \\
  --overscroll-history-navigation=0 \\
  --disable-pinch
EOF

And now make it auto-login:

sudo raspi-config nonint do_boot_behaviour B2

Clone this repo

git clone https://github.com/pikesley/station-clock

Enable the virtualhost

sudo ln -sf /home/pi/station-clock/nginx/site.conf /etc/nginx/sites-enabled/default

(Optionally) disable the low-power warnings

echo "avoid_warnings=2" | sudo tee -a /boot/config.txt

Reboot

sudo reboot

Hardware

Pi choice

I first tried this on a Pi Zero but its single-core absolutely could not handle the JavaScript animation: the sweeping second-hand was creaking and jerking, and it eventually ground to a complete halt when I left it running overnight. Right now I'm running it on Pi 3 A+, which seems to just-about keep up.

Making the stand

Anybody remember Nimuno Loops (which I think maybe became Mayka Tape)? I have 4 boxes of this stuff from when I backed it on IndieGogo but I never found a use for it until now.

The screen is just about 10 Lego studs by 10 Lego studs, so with the Pi mounted, I worked out where I could attach some bits of the Nimuno, attached the Nimuno stud-side-up to a Lego scaffold to keep it all in the right place, and stuck it down:

numino

And then I attached a frame made out of Lego:

lego

Development

I added a Dockerfile to make it easier to hack on the design. To run it:

make build
make run

Once in the container, spin up nginx with make serve and it should be running at http://localhost:8080/.

If you're editing the Sass you need to run make sass to see the changes.

Once you're happy, just push the code to the Pi:

cd ../
rsync -av station-clock [email protected]:

You might need to sweeten that to taste depending on hostnames and things.

station-clock's People

Contributors

pikesley avatar

Stargazers

Robert Khayat avatar

Watchers

James Cloos avatar  avatar  avatar

station-clock's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.