Giter Club home page Giter Club logo

gromits's Introduction

Ocean Gromits

Interactive video link between two Gromit sculptures.

Team 40

spe-uob


Background

As part of the ‘Gromit Unleashed 2’ sculpture trail, the University created four interactive sculptures. Two of these - ‘Oceans 1: Deep Blue’ and ‘Oceans 2: Yellow Sub’ - used a video link, which allowed visitors to We the Curious and MShed to view each other across the harbour. The University reacquired these sculptures at the close of the trail, and wishes to place one in MVB, and the other at the new Temple Quarter precinct.

The sculptures should show the feed from the others camera. This should be done in the most robust, and lowest maintenance way possible.


Firmware

Our firmware is a local web server based on the Java Spring framework. This server handles real-time signalling for the WebRTC clients as well as authentication for these channels. It uses a small embedded database to record admin authenitcation infomation

Frontend

The frontend is located within firmware/frontend and is a self-contained client side JavaScript application. It connects to the signalling server specified in the REACT_APP_SIGNAL_URL environment variable to negotiate authentication and video.

Dependencies

  • JDK 11+
  • Node 14.x (Only required for frontend development)
  • Yarn (Only for frontend)

Getting started

Clone the repository

git clone https://github.com/spe-uob/GromitsRepo

Pull dependencies and build (This will take a long time, but should only have to be done once)

./gradlew build (macOS/Linux/Anything really)
gradlew.bat build (Windows)

To build the frontend (If you're doing frontend development)

cd frontend
yarn install

Make sure IntelliJ is set to use JDK 11 otherwise you'll get some nasty errors. Building outside of IntelliJ for the first time is usually quicker.

Production builds can then be ran by running

java -jar build/libs/<exe name>.jar
Development

To run in development mode with hot reloading and everything nice:

./gradlew bootRun # Run the spring server

# In a seperate terminal:
cd frontend && yarn start # Run the frontend development

The frontend can then be accessed under localhost:3000


Deploying

Both the front and backend need to be deployed seperately.

Frontend:

Make sure you're in the frontend folder: firmware/frontend

First, set the required environment variables and then build the frontend application

REACT_APP_SIGNAL_URL=<URL of signalling server>
yarn build 

The compiled assets will then be availiable in build/

These can be hosted on any HTTP server or static file host - such as Netlify. If hosting internally you can also host within the Spring server by placing the build artifacts in Springs static folder.

Backend:

The backend is a Java Spring Boot applicaion. It needs a random secret key set to make sure the application is secure. This secret key is whats used to sign and authenticate access keys for the admin api endpoints as well as the video signaller.

SECRET_KEY=<Secret Key> ./gradlew build`

The JAR file can then be run similar to

java -jar build/libs/firmware.jar

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.