screenly / playground Goto Github PK

View Code? Open in Web Editor NEW

23.0 23.0 9.0 37.47 MB

Various examples of how developers can use Screenly and Screenly's API

Home Page: https://www.screenly.io

License: MIT License

Python 3.58% Dockerfile 0.12% Procfile 0.02% JavaScript 43.05% HTML 21.05% CSS 32.00% Shell 0.19%

api digital-signage digital-signage-api

playground's People

Contributors

Stargazers

Watchers

Forkers

tymiles003 rusko124 iamlawrenceonoja marvie-03 nicomiguelino abokmadaki salmanfarisvp lucasclgibson j034j

playground's Issues

JavaScript Injector: Grafana

Customers want to be able to log in to their Grafana dashboards.

JavaScript Injector: PRTG Monitor Dashboard

Customer wants to be able to log in to their PRTG monitor dashboards. This is a private site integrated with AD.

Create 'visitor check-in' app

I was looking at a sample app from Dark, and they show how to make a simple visitor check-in app.

The process is pretty easy:

Select an employee out of a drop down list (probably stored in an SQLite database, or just hard coded in MVP)
Enter your name, email and phone number along with a message
When the user press submit, two alerts are sent:
- SMS via Twilio
- DM on Slack

Add JavaScript login snippet for ShipHero

ShipHero is a popular fulfillment software. I want to add a JavaScript Injection snippet for the user-facing site, shipping.shiphero.com.

Similar examples can be found here.

Acceptance Criteria

A single JavaScript file that can take two variables (username/password) and perform a login action
Validated with a real account from Customer Success

JavaScript Injector: Help Systems Vityl Dashboard

Customer wants to be able to log in to their Help Systems Vityl dashboards. This is a private site integrated with AD.

JavaScript Injector: PRTG IP OPS Dashboard

Customer wants to be able to log in to their PRTG IT OPS dashboards. This is a private site integrated with AD.

DooH Application with impression tracker

Background

The idea with this is to showcase how to build an Digital Out of Home (DooH) platform for Screenly. The demo would be a simple Edge App app that randomly picks an image to return from a dataset (included in the Edge App). When the image is served, the app would take noticed of this and generate an event that is sent to Google Analytics.

The user will then be able to track the impressions directly in Google Analytics. We would also enrich this data with all the data available from the Screenly Metadata. That way you can not only see aggregates, but also slice it multiple ways (city etc).

Acceptance Criteria

Select 20 nice looking fake ads
Write a simple Edge App in in JavaScript that perform the above operation
Integrate the deployment with GitHub Actions

Add example code for cookie consent page

This is probably the most popular cookie consent

Here's an example of where it is live. It would be good to have some more details on this and a JavaScript Injector snippet for it.

Add support for logging into Unifi Captive Portal

A lot of WiFis (and even wired networks) use captive portals. This is normally served from http://captive.apple.com.

When you're logged in, you would normally get this:

$ curl http://captive.apple.com
<HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY></HTML>

In the first phase, let's use JavaScript to log into a basic page (to be provided).

JavaScript Injector: Dynatrace Dashboard

Customer wants to be able to log in to their Dynatrace dashboards. This is a private site integrated with Okta.

JavaScript Injector: JAMS Dashboard

Customer wants to be able to log in to their JAMS dashboards. This is a private site integrated with AD.

Create Google Calendar Edge App

We should create a Google Calendar Edge App. It should be fairly straight forward to accomplish based on the quickstart guide.

The goal is to show a weekly/daily calendar in full screen mode.

We would need to define some settings, including:

CLIENT_ID (setting)
API_KEY (secret)
Possibly calendar ID

References

Countime timer

We need to create a sleek countdown timer as an Edge App.

JS Injector for Tableau GDPR concent

One of the demo assets we use is the Tableau public dashboard. However, when this loads, we get this:

Please create a JS injector script that closes this.

JavaScript Injector: Zoom Meetings

We're experimenting with using Zoom on a Screenly player for screen sharing for a customer. When you follow this URL to join the personal meeting room it will ask you if you want to download Zoom: we want to say no to that. Then we need to click where it says "Join from Your Browser" in order to join the meeting, and after we may need to click the "Join with computer audio" button.

Modify the weather app so that the `units` (for the measurement unit) query param is dependent on the current location.

Overview

The weather app does an API call to OpenWeatherMap to get the current data.
The endpoint requires units (metric or imperial) as one of the query parameters.
For instance, we can make an API call to an endpoint that gives the country code (e.g. US, GB, etc.) given the coordinates (latitude and longitude).

Mocked `screenly.js`

The coordinates are not that precise. They're autogenerated by GitHub Copilot.

const getCoordinates = (area) => {
  switch (area) {
    case 'San Francisco':
      return [
        '37.7749',
        '-122.4194'
      ]
    case 'Manila':
      return [
        '14.5995',
        '120.9842'
      ]
    case 'Dijon':
      return [
        '47.3220',
        '5.0415'
      ]
    case 'New York':
      return [
        '40.7128',
        '-74.0060'
      ]
    default:
      return []
  }
}

const screenly = {
  metadata: {
    coordinates: getCoordinates('New York'),
    hardware: 'Screenly Player Max',
    hostname: 'srly-abcdefghijklmno',
    location: 'San Francisco, USA',
    screen_name: 'Edge App Test',
    screenly_version: 'v1.0.0',
    tags: [
        'All Screens'
    ]
  },
  settings: {
    disable_analytics: false,
    ga_api_key: 'mcd0n4ld5',
    sentry_id: 'p4nd4expr355',
    // Make sure to obfuscate the OpenWeatherMap API key as well.
    openweathermap_api_key: '[redacted]',
  }
}

Screenshots

San Francisco, CA, US

Manila, PH

Dijon, FR

New York, USA

Relevant GitHub issues and PRs

#99
#105

Rewrite Weather app to edge app

Remove all gulp actions, since they are no longer needed and move src into the root folder.
- We can also remove the mock feature, as this is built into the CLI.
Add caching of weather to 1h using client side caching.
Implement secrets for OpenWeatherApp API key.
Move Google Analytics and Sentry SDN to Edge App Settings.

JavaScript Injector: Login to Tableau dashboards using credentials

We need a way to log in to Tableau dashboards using credentials and not cookies.

Create basic RSS reader example

Creating an RSS reader in JavaScript is pretty straight forward. I'd love to see an example of how to create an RSS reader for Screenly using this.

JavaScript Injector: Domo Dashboard

Customer wants to be able to log into their Domo dashboard.

[asset-metadata] Fix support for tiny screens

I'm using one of the Official Raspberry Pi 7" Touchscreen Display in my test setup.

However, when loading the asset metadata page, it breaks. We should add support for the following resolutions:

800 x 480
480 x 800

Switch to Heroku Timer

Instead of using a primitive sleep(), it would make more sense to use Heroku Scheduler to drive the app.

JavaScript Injector: Magento (Adobe) Dashboard

Customer wants to be able to log into their Magento dashboard, which is a product of Adobe.

Eric to provide URL and credentials.

Rewrite Clock app to edge app

General

Remove all gulp actions, since they are no longer needed, and move src into the root folder.
- We can also remove the mock feature, as this is built into the CLI.
Move Google Analytics and Sentry DSN to Edge App Settings.
Make sure to include the manifest file, screenly.yml.

Screenly Queue

The idea behind Screenly Queue is to develop a queue system for retail environments that is open source and cost effective.

tl;dr: The user walks in to the store and gets a number. The teller presses button in the user interface (teller interface) and the number shows up on the screen (dashboard interface).

Design

There are four sides to the app:

Admin: Store manager
Teller: Day-to-day user
Dashboard: The signage side (Edge App)
Customer: A way to get a number in the line

Admin

The admin interface is simply the Django admin interface. You will be able to do the following:

Add/remove users
Add/remove counters
Reset/manage the ticket queue(s)

In the prototype we will only have one queue, but it would be interesting down the road to have different queues.

Teller

The teller interface is a Django page that allows you to do the following:

Select a counter (probably one page counter)
Skip to the next in the counter

Dashboard

This is the interface that will be shows on a big monitor. It's just an Edge App that pulls from the main server (to ensure rapid updates). It will show "Now serving X at counter Y". When the number is increased, the display will jump forward with very little latency.

Customer

This is where the customer gets the number from (if the client isn't using a physical printer). It's simply a page that will give you a session cookie and when you press "Request number" it return a number. This is normally displayed used on a mobile phone.

JavaScript Injector: Red Gate SQL Monitor Dashboard

Customer wants to be able to log in to their Red Gate SQL Monitor dashboards. This is a private site integrated with AD.

Update Instagram app instructions

With our CLI now ready, I want to update the instructions a bit for the Instagram app

Move the Instagram folder to the root
Show the commands for building a single static page (that includes images)
Add instructions for how to add the HTML page using screenly asset add path/to/file.html

Create Hello World edge-app

The logic for this is very simple.

Create a JS function that reads the value of the secret named name. If this is unset, the default value should be stranger.

If the secret is unset, it should show:

Hi stranger, 
I'm $screen_name.

If it is set, it should show:

Hi $name,
I'm $screen_name.

JavaScript Injector: ESRI ArcGIS Dashboard

A user wants the ability to log in to their ArcGIS Dashboard.

https://www.esri.com/en-us/arcgis/products/arcgis-online/overview
https://www.esri.com/en-us/home

Example URL: https://gis.[company-name.com]/portal/apps/dashboards/[dashboard-id]

Message me for test URL and login credentials.

Edge App deploy workflow steps should also be failed on CLI command fails

An example workflow: https://github.com/Screenly/Playground/actions/runs/7545920425/job/20542576908

The Deploy Edge App step is successful, but the CLI command returned an error: Failed to upload edge app: App id cannot be empty. Provide it either in manifest or with --app-id..

Style asset-metadata

We need to create a sleek looking design for asset-metadata. I'd like to have a nice single screen that includes a map that uses the coordinates.

Acceptance Criteria:

Create design (@L4cko)
Implement design

Fix bugs in clock Edge App

Right now we write the date like this: "11 August, 2023". That's not how you would normally write it. Normally, you'd write it as "August 11, 2023"
When using a UK locale, I get the time in AM/PM. This is not expected. What's expected is 24h mode, so let's make this contingent on the location.

JavaScript Injector: ServiceNow Dashboard

Customer wants to be able to log in to their ServiceNow dashboards. This is a private site integrated with Okta.

JS Injector for Google GDPR concent

We use Google Maps as part of our demo assets. When loading this from EU (at least), it just throws a cookie consent dialogue:

Let's write JS Injector solve this too.

Move static content to for Weather and Clock app to Cloudflare Pages

We're currently serving static content using Cloudflare Workers (and KVs). This isn't a very efficient way of doing this. We should migrate this flow to Cloudflare Pages instead.

Fix Sentry for edge apps

I quickly looked over how we've implemented Sentry in the Weather edge app here. Comparing this to the Sentry documentation, we seem to be missing a few things.

Earthquake notification system

Task: Implement Earthquake Notification System

Project Overview

Implement an earthquake notification system into the existing app. The system should scan for earthquake notifications, extract relevant data (magnitude and coordinates), and update screen content accordingly.

Task Description

Develop a service to scan for earthquake notifications from a specified source (website parsing or atom feed subscription).
Extract the magnitude and coordinates (latitude and longitude) of each earthquake notification.
Utilize the app's API (GET /screens/) to retrieve information about all screens.
Filter screens based on proximity to the earthquake's location:
- Magnitude 2.0+: Within 100 km
- Magnitude 3.0+: Within 200 km
- Magnitude 4.0+: Within 300 km
- Magnitude 5.0+: Within 400 km
- Magnitude 6.0+: Within 500 km
- Magnitude 7.0+: Within 600 km
- Magnitude 8.0+: Within 1000 km
- Magnitude 9.0+: Within 1500 km
Create a playlist for each screen within the defined proximity:
- Set playlist priority to 1.
- Add a predicate to play content for a specific duration based on the earthquake's magnitude:
  - Magnitude 2.0+: 2 minutes
  - Magnitude 3.0+: 3 minutes
  - Magnitude 4.0+: 5 minutes
  - Magnitude 5.0+: 10 minutes
- Include metadata in the playlist indicating the time of expiration.
After 10 minutes, retrieve all playlists and delete those that have expired.

Please note that this is a draft task description, and additional details may be required for a complete implementation.

Document how to extract cookies from browsers

Acceptance Criteria:

Add documentation for how to extract the cookies from Safari, Chrome and Firefox to JavaScript Injector.

screenly / playground Goto Github PK

playground's People

Contributors

Stargazers

Watchers

Forkers

playground's Issues

Acceptance Criteria

Background

Acceptance Criteria

References

Overview

Mocked screenly.js

Screenshots

San Francisco, CA, US

Manila, PH

Dijon, FR

New York, USA

Relevant GitHub issues and PRs

General

Design

Admin

Teller

Dashboard

Customer

Task: Implement Earthquake Notification System

Project Overview

Task Description

Recommend Projects

Recommend Topics

Recommend Org

Mocked `screenly.js`