hfl-signage-player
hfl-signage-player copied to clipboard
Digital signage player written with a React.js front-end and a Node.js and PouchDB back-end.
HFL Signage Player
Digital signage player written by Henrik Franciscus Leppä (HFL)
Creating signs | Adding signs to a playlist | Playing a playlist |
---|---|---|
![]() |
![]() |
![]() |
Changelog
MIT License
Main Features
- Creating digital signage using HTML.
- Uploading images and videos to include in the HTML.
- Each static sign stays visible for 7 seconds.
- Each sign with a video stays visible for the duration of the video.
- When a playlist moves to the next sign:
- ...signs fade in and fade out visually, and
- ...sounds of videos cross-fade.
- All work is autosaved, and no work is lost, even when offline.
- Cross-platform.
Main Technologies
- Create React App (CRA), which includes:
- Material-UI
- PouchDB
- React Router 4
- Redux
Subprojects
This project is made up of 3 subprojects:
- Back-end
- Front-end
- Management UI
Getting Started / Installation
This project is cross-platform software, and as such it should be possible to run it on any operating system that supports the software listed in the "Install" step, including, but not limited to: GNU/Linux, BSD, Microsoft Windows, and macOS.
Steps
- Install:
- Run-time environment:
- Node.js 8.x
- (Recommended) Install using Node Version Manager (NVM) (or its Windows-equivalents).
- Node.js 8.x
- Web browser:
- Mozilla Firefox (latest)
or - Chromium / Google Chrome (latest)
- Mozilla Firefox (latest)
- Run-time environment:
- Open a command-line in the root of the project directory.
- Run
npm install
. - Run
npm start
.- The command-line will automatically open Front-end and Management UI in your default browser and indicate where they can be opened in localhost and on your network.
- To change the ports of the subprojects, see their documentations.
- Go to Management UI, and create some signs, playlists, and (optionally) upload some files.
- Go to Front-end, and open a playlist.
Note: You can also run the subprojects individually by running the commands in the roots of their directories.
Workflow
This project uses git-flow with default settings.