Digital signage for libraries based on their Evanced Calendar
The slideshow pulls content from the Evanced calendar and displays it as individual slides.
The slides layout consists of a sidebar and a main section. The sidebar has the library logo, the date of the event, the time and length of the event, and a qr code to the event page on the calendar. The main section has the title of the event, the location, description and a featured image if it was included. It also contains the slide rotation indicator as a bar slowly filling across the screen.
The slides are shown in order based on the returned calendar results but the style is randomized between four different layouts. One where the sidebar is on the top, left, bottom or right. They also have color overlays based on the colors provided.
The slideshow is configured using a JSON file, it has all of the information needed to run the system including the library id, rotation speed, library logo url, overlay colors and so forth.
Example config file:
{
"name" : "DemoLibrary",
"library_id" : "demozonepublic",
"rotation_speed" : 30,
"font" : "Open Sans, Arial, Helvetica, sans-serif",
"logo": "https://christopheramling.com/images/library_logo.png",
"alert" : "",
"show_qr_code": true,
"colors" : [
{"body": "#2f7278", "text": "#333333"},
{"body": "#97cc39", "text": "#333333"},
{"body": "#97cc39", "text": "black"},
{"body": "#ebff00", "text": "black"},
{"body": "#e37617", "text": "#333333"},
{"body": "#a90da6", "text": "#333333"},
{"body": "#a98bd0", "text": "#333333"},
{"body": "#2e0065", "text": "#333333"},
{"body": "#133475", "text": "#333333"},
{"body": "#143476", "text": "#333333"},
{"body": "#328ee3", "text": "#333333"},
{"body": "#b4e2f0", "text": "black"}
],
"event_type_ids" : [],
"start_date" : "2022-07-22",
"end_date" : "2022-07-28",
"locations" : [],
"age_groups" : [],
"is_ongoing" : true,
"only_featured_events" : false
}A demo of this slideshow can be seen at https://christopheramling.com/slideshow/
Github for project: https://github.com/camling/slideshow
This project was built using TypeScript & Sass