| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <title>Cobalt Telemetry Demo</title> |
| <style> |
| body { |
| background-color: white; |
| font-family: Arial; |
| padding: 10px; |
| } |
| |
| h1 { |
| font-size: 2em; |
| font-weight: bold; |
| } |
| |
| #log { |
| color: blue; |
| font-size: 1em; |
| font-family: monospace; |
| } |
| </style> |
| </head> |
| |
| <body> |
| |
| <h1>LOG OUTPUT:</h1> |
| <div id="log"></div> |
| |
| <script> |
| const LOG_CONTAINER = document.getElementById('log'); |
| const EVENT_INTERVAL_SECS = 10; |
| |
| function metricEventHandler(metricType, payload) { |
| log(`New metric payload received: metricType: ${metricType}, payload: ${payload}`); |
| } |
| |
| function init() { |
| log('Initializing window.h5vcc.metrics.'); |
| let timer = 0; |
| let interval = 10000; |
| setInterval(() => { |
| timer += interval; |
| log(`timer: ${timer / 1000}s`); |
| }, interval); |
| |
| const metrics = window.h5vcc.metrics; |
| log(`Getting metrics enabled state metrics.isEnabled(): ${metrics.isEnabled()}`); |
| log('Enabling metrics reporting: metrics.enable()'); |
| metrics.enable(); |
| log(`Setting metric event interval: metrics.setMetricEventInterval(${EVENT_INTERVAL_SECS})`); |
| metrics.setMetricEventInterval(EVENT_INTERVAL_SECS); |
| log('Binding metric event handler: metrics.onMetricEvent(metricEventHandler)'); |
| metrics.onMetricEvent(metricEventHandler); |
| log(`Getting metrics enabled state metrics.isEnabled(): ${metrics.isEnabled()}`); |
| } |
| |
| function log(logText) { |
| let log = document.createElement('div'); |
| log.textContent = logText; |
| LOG_CONTAINER.appendChild(log); |
| } |
| // Persistent settings are only ready/validated after the browser module |
| // has fully loaded. As telemetry uses persistent settings, everything |
| // must happen after onload. |
| window.onload = function() { |
| init(); |
| } |
| </script> |
| </body> |
| |
| </html> |
