Multi-Screen Ball Animation

This is project I did in the course Studio Web & Mobile Design 2 in my Digital Ideation studies at Lucerne University of Applied Science and Arts HSLU.

The target was to create an animation which runs over several screens/devices. To achieve this, the clients are connected to the server over WebSockets. The main tools I used for this Project are Socket.io, Node.js, WebPack and Docker.

My focus in this project was to create a user interface, which allows users to handle the connected devices easily. Furthermore it was important to me to build a clean architecture and hosting environment. The technologies I wanted to try out are the HTML Drag and Drop API, javascript RequestAnimationFrame and javascript Pointer Events.

Architecture

The following diagram showcases the logic of the application and how the server infrastructure looks like.

Sequence Diagram

The following diagram visualizes all important events, which are transmitted trough WebSockets.

Available Scripts

npm run watch

Use in development mode: Triggers webpack to watch the files and starts node server with nodemon (runs npm run start).

npm run build

Builds the app with webpack and create files in 'dist' folder.

npm run buildStart

Use in production mode: Builds the app and starts the node server (runs npm run build and node index.mjs afterwards). To view the page, open http://localhost:3000.

npm run start

Starts node server. To view the page, open http://localhost:3000.

npm run dev

Starts node server with nodemon in devmode. To view the page, open http://localhost:3000.

Links

API references

• HTML Drag and Drop API: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
  • DataTransfer getData: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/getData
• Pointer Events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
• RequestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  • Tutorial: https://www.mediaevent.de/javascript/requestAnimationFrame.html

Diverses

• Drag and Drop Tutorial: https://www.html5rocks.com/de/tutorials/dnd/basics/
• Pointer Events: https://patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud.html
• Sortable.js: https://github.com/SortableJS/Sortable
• Heroku deploy Subdirectory: https://github.com/timanovsky/subdir-heroku-buildpack
• Matter JS: https://brm.io/matter-js
• Shopify Draggable: https://shopify.github.io/draggable/examples/

Webpack

Loaders:

• babel-loader: https://webpack.js.org/loaders/babel-loader/
• sass-loader: https://webpack.js.org/loaders/sass-loader/
• MiniCssExtractPlugin: https://webpack.js.org/plugins/mini-css-extract-plugin/
• postcss-loader: https://github.com/postcss/postcss-loader
  • Autoprefixer: https://github.com/postcss/autoprefixer

Docker

I use docker to handle all the stuff on my DigitalOcean-Server.

• Configuration tutorial
• Another nice tutorial

Docker installation and useful commands

The following part can be ignored, these are just useful commands about docker for myself.

---

Run just node image

docker build -t node-socket-io . #image dockerfile wird aufgerufen und image erhält namen node-socket-io
docker images #show all images
docker run --name node-socket-io -p 8080:3000 node-socket-io #container wird gestartet; gegen aussen auf port 8080, gegen innen auf port 3000
docker ps # show all running images
docker system prune # restart all
docker system prune -a

Stop container

Show all running containers

docker ps #fdd49939c22d

docker stop fdd49939c22d

docker system prune -a

SSH Key generieren

cd ~/.ssh
ls

ls -al ~/.ssh

Generate key pair

ssh-keygen -t rsa -b 4096 -C "[email protected]"

Key anzeigen

cat ~/.ssh/id_rsa.pub 

SSH-Verbindung aufbauen

ssh [email protected]

Enter passphrase for key

Initialize VM

I use an Ubuntu VM on DigitalOcean.

Install docker

apt install docker.io
apt install docker-compose

if this doesn't work: https://docs.docker.com/install/linux/docker-ce/ubuntu/

Use docker-compose

To start the webserver simply run the following command on the root directory of the git repo on the server.

docker-compose up

To hide all Logs, add the flag -d

docker-compose up -d

Check status:

docker-compose ps

This should look like this:

  Name                 Command               State          Ports       
------------------------------------------------------------------------
certbot     certbot certonly --webroot ...   Exit 0                     
nodejs      docker-entrypoint.sh npm r ...   Up       3000/tcp          
webserver   nginx -g daemon off;             Up       0.0.0.0:80->80/tcp

Show logs for a specific service:

docker-compose logs certbot

Check that your credentials have been mounted to the webserver container

docker-compose exec webserver ls -la /etc/letsencrypt/live

# Output
drwx------    3 root     root          4096 Mar 11 09:47 .
drwxr-xr-x    9 root     root          4096 Mar 11 09:50 ..
-rw-r--r--    1 root     root           740 Mar 11 09:47 README
drwxr-xr-x    2 root     root          4096 Mar 11 09:47 studio-web-2.hslu.lergier.ch

Rebuild just one image (in this case certbot)

docker-compose up --force-recreate --no-deps certbot

Stop a specific service / container

docker-compose stop webserver

Build images, doesn't start the containers

docker-compose build

Build images if images do not exist, then start the containers

docker-compose up

Build all images, even if they exist, then starts the containers

docker-compose up --build

Initialize HTTPS

Only on Server:

sudo openssl dhparam -out /root/hslu-studio-web-2/dhparam/dhparam-2048.pem 2048

Renew SSL

Commands to run on VM

chmod +x ssl_renew.sh

sudo crontab -e

To generate the repeat time, check this fancy time repeat generator

*/2 * * * * /root/hslu-studio-web-2/ssl_renew.sh >> /var/log/cron.log 2>&1

Later change to 0 0 * * *. This runs the .sh script every day at 00:00:

0 0 * * * /root/hslu-studio-web-2/ssl_renew.sh >> /var/log/cron.log 2>&1