Skip to content
📺 Simple self-hosted digital signage software for turning screens into beautiful content displays
Branch: master
Clone or download
Latest commit ad7751b Jun 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
actions Removed unnecessary dependencies Jun 14, 2019
api Added ability to edit status bar elements Jun 15, 2019
assets Added instructions on implementing new widgets May 30, 2019
components Added preview/display icons to the screens page Jun 15, 2019
helpers Added ability to edit status bar elements Jun 15, 2019
pages Added note about demo username and password Jun 16, 2019
stores Added ability to edit status bar elements Jun 15, 2019
styles Initial widget editing layout page Apr 9, 2019
uploads Fixed styling issues and added upload folder to git Mar 22, 2019
widgets Removed freeform editor for slides Jun 11, 2019
.env.example Added routes, key.js and an example of .env Mar 29, 2019
.eslintrc Fixes eslint double quotes rule Mar 31, 2019
.gitignore Fixed styling issues and added upload folder to git Mar 22, 2019
.travis.yml Added an exception for travis and heroku Jun 11, 2019
LICENSE Create LICENSE Mar 13, 2019
README.md Adds update script and fixes production build Jun 14, 2019
_config.yml Set theme jekyll-theme-slate May 20, 2019
keys.js Adds update script and fixes production build Jun 14, 2019
makeconf.json Added an automatic setup utility Jun 11, 2019
next.config.js Initial widget editing layout page Apr 9, 2019
package.json Fixes heroku Jun 16, 2019
routes.js Added preview/display icons to the screens page Jun 15, 2019
server.js Added an automatic setup utility Jun 11, 2019

README.md

DigitalSignage

📺 Simple self-hosted digital signage software for turning screens into beautiful content displays

Outdated Dependencies Travis Build

Screenshots

Digital Display Preview

Screenshot of the display

Administrator Panel: Changing the widget layout

Screenshot of the administrator panel

Administrator Panel: Slides inside a slideshow

Screenshot of the administrator panel

Demo

Use the demo website at http://digitaldisplay.herokuapp.com (username: demo, password: demo)

How to Run:

  1. Set up a MongoDB installation locally (or in the cloud) and create a digitaldisplay database

  2. Run the setup utility using

npm run setup

and specify the URI to your database.

  1. Install dependencies and run the program
npm install
npm run dev

Updating the software

Assuming the software was cloned from this github repository, it is possible to use the included script

npm run update

which pulls the latest stable version of digital-signage from github, installs dependencies and re-builds the software.

Features

  • Automatic refresh on content change (you should never need to touch a display once set up!)

  • Totally modular, with a comprehensive widget management system (adding a widget is very simple!)

  • Multiple built-in widgets to get you started:

    • Slideshow widget

      Animated screencast of the slideshow widget
    • Weather widget

      Screenshot of the weather widget
    • "Congratulations" widget

      Animated screencast of the congratulations widget
    • Youtube embed widget

    • Web (iframe) widget

      Screenshot of the web widget
    • Standalone image widget

      Screenshot of the image widget
    • Announcements widget

      Screenshot of the announcements widget
    • List widget (can be used a directory, time sheet, etc.)

      Animated screencast of the list widget
  • Flexible, responsive widget grid that allows you to drag, drop and resize widgets

  • Versatile slideshow system that allows multiple slideshows, multiple slide types (images, videos, youtube, web, etc.) inside the same display with variable durations, titles and descriptions for each slide!

  • ✖ Support for multiple displays (in progress)

Adding a new widget

Given the highly modular structure of this program, implementing a new widget is a simple task! Simply follow these easy steps to get started:

  1. Create a new folder inside the ​widgets/​ folder, name it according to your widget's name
 /
  actions/
  api/
  assets/
  components/
  helpers/
  pages/
  styles/
  widgets/
    .
    .
    .
    (new) MyWidget/
    widget_list.js
    base_widget.js
    index.js

  1. Create an index file inside the newly created folder called index.js ​(extending the​ base_widget ​class) as follows:
import BaseWidget from '../base_widget'

export default class MyWidget extends BaseWidget {
  constructor() {
    super({
      name: 'MyWidget',
      version: '0.1',
      icon: ['my-icon'], // Shown in the admin panel
      defaultData: {
         // Your implementation here
      }
    })
  }
}

The widget's icon should come from FontAwesome.

  1. Implement two React components: Options (renders the dialog that will allow the administrator to change the widget’s configuration) and Widget (renders the user-facing side widget that will be displayed on the TV), return them from getter functions that you add to your index.js file:
export default class MyWidget extends BaseWidget {
  // ...

  get Widget() {
    return (<div>Your implementation here</div>)
  }

  get Options() {
    return (<div>Your implementation here</div>)
  }

  // ...
}
  1. Finally, when done implementing the widget, register it by adding its folder’s name to the widgets/widget_list.js​ file
module.exports = ['slideshow', 'weather', 'congrats', 'youtube', 'web',
    'image', 'list', 'announcement', /* new */ 'MyWidget']
  1. Restart the server to see the new widget appear on the administrator panel
You can’t perform that action at this time.