Skip to content

New App - Klipfolio Power Metrics Dashboard with Passcode Access #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
salmanfarisvp wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

New App - Klipfolio Power Metrics Dashboard with Passcode Access #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions edge-apps/klipfolio-power-metrics-dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klipfolio Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<iframe id="dashboard" title="Klipfolio Dashboard"></iframe>
<script src="screenly.js?version=1" defer></script>
<script src="script.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions edge-apps/klipfolio-power-metrics-dashboard/instance.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
syntax: instance_v1
id: 01JT3644XKZ7BWNVY1ZQXTW4AG
name: Klipfolio Dashboard Edge App
15 changes: 15 additions & 0 deletions edge-apps/klipfolio-power-metrics-dashboard/screenly.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
syntax: manifest_v1
id: 01JSR8A2CW98PG8B0SR3T0MYX5
description: A Klipfolio dashboard edge app for Screenly
settings:
dashboard_url:
type: string
title: Dashboard URL
optional: true
help_text: The URL for the dashboard
dashboard_passcode:
type: secret
title: Dashboard Passcode
optional: true
help_text: The passcode for the dashboard
68 changes: 68 additions & 0 deletions edge-apps/klipfolio-power-metrics-dashboard/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/* global screenly, Sentry */
/* eslint-disable-next-line no-unused-vars, no-useless-catch */

const dashboardUrlRaw = screenly.settings.dashboard_url || 'Dashboard URL not set'
const passcode = screenly.settings.dashboard_passcode || 'Passcode not set'

// Initialize when page loads
window.addEventListener('load', function() {
// Wait a short time for screenly.js to load
setTimeout(function() {
// Get the dashboard iframe
const dashboard = document.getElementById('dashboard')

// Construct the URL after screenly.js has loaded
let dashboardUrl
try {
// Try to use Screenly's CORS proxy
dashboardUrl = screenly.cors_proxy_url + encodeURIComponent(dashboardUrlRaw)
} catch (e) {
// Fallback to direct URL if screenly is not available
console.error("Error accessing screenly.cors_proxy_url, using direct URL", e)
dashboardUrl = dashboardUrlRaw;
}

// Set dashboard URL
dashboard.src = dashboardUrl

// Attempt to inject passcode after iframe loads
dashboard.onload = function() {
setTimeout(injectPasscodeIntoIframe, 1000)
};
}, 500) // 500ms delay for screenly.js to load
});

// Function to inject passcode into iframe
function injectPasscodeIntoIframe() {
try {
const iframe = document.getElementById('dashboard')

// Try to access the iframe document
let iframeDoc;
try {
iframeDoc = iframe.contentDocument || iframe.contentWindow.document
} catch (e) {
console.error("Cannot access iframe content due to cross-origin restrictions", e)
return
}

// Get passcode input
const input = iframeDoc.getElementById('passcode')

// If passcode input exists, inject passcode and submit
if (input) {
console.log("Found passcode field, injecting code");
input.value = passcode
input.dispatchEvent(new Event('input', { bubbles: true }))

// Get the submit button and click it
const button = iframeDoc.getElementById('submit')
button.click()
console.log("Clicked submit button")
} else {
console.log("Passcode input field not found");
}
} catch (e) {
console.error("Error in injectPasscodeIntoIframe:", e)
}
}
17 changes: 17 additions & 0 deletions edge-apps/klipfolio-power-metrics-dashboard/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/* This file is no longer needed as all styles are defined in the HTML */
/* The file is kept for reference in case styles need to be extracted later */

body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#dashboard {
width: 100%;
height: 100%;
border: none;
display: block;
}