From 45dfe4acbc6dca40aeb173c887512492123ad592 Mon Sep 17 00:00:00 2001 From: Mendel Greenberg Date: Wed, 3 Nov 2021 22:40:44 -0400 Subject: [PATCH] Add some (lots) styling --- index.html | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++--- main.js | 37 ++++++++++------ 2 files changed, 143 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 1047448..6ce2abf 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,126 @@ - + - Resolume Timecode + Timecode Monitor + + + + + + -
-
-
-
chabad360/resolume-timecode
+

Timecode Monitor

+
+

Clip Name: None

+ + + + + + + + + + + + + + + + + + + + + +
-00:00:00.000
HoursMinutesSecondsMilliseconds
+
+
+ Advanced Settings +
+
+ + + + + + + + +
+

Checkout this tool at chabad360/resolume-timecode

+
+ diff --git a/main.js b/main.js index aa3b8fe..c7af175 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,13 @@ "use strict"; const socket = new WebSocket('ws://'+location.hostname+(location.port ? ':'+location.port: '')+'/ws'); -const timecode = document.getElementById("timecode"); -const ms = document.getElementById("ms"); +const timecodehours = document.getElementById("timecode-hours"); +const timecodeminutes = document.getElementById("timecode-minutes"); +const timecodeseconds = document.getElementById("timecode-seconds"); +const timecodems = document.getElementById("timecode-ms"); +const timecodeclipname = document.getElementById("clipname") + +const cliplength = document.getElementById("ms"); const mult = 10000000000; let clipName = ""; @@ -53,12 +58,17 @@ socket.addEventListener('message', function (event) { }); socket.addEventListener('close', function () { - timecode.innerHTML = "Server Stopped"; - ms.innerHTML = 'Clip Length: 0.000s' + // timecode.innerHTML = "Server Stopped"; + timecodehours.innerHTML = "00"; + timecodeminutes.innerHTML = "00"; + timecodeseconds.innerHTML = "00"; + timecodems.innerHTML = "000"; + cliplength.innerHTML = 'Clip Length: 0.000s' }) function procName(data) { data = data.replace("/name ,s ", ""); + timecodeclipname.innerHTML = "Clip Name: " + data; if (data !== clipName) { clipName = data; reset(); @@ -72,8 +82,12 @@ function reset() { timeIntervalBuffer = []; estSizeBuffer = []; - timecode.innerHTML = '-000:00:00.000' - ms.innerHTML = 'Clip Length: 0.000s' + // timecode.innerHTML = '-000:00:00.000'; + timecodehours.innerHTML = '00'; + timecodeminutes.innerHTML = '00'; + timecodeseconds.innerHTML = '00'; + timecodems.innerHTML = '000'; + cliplength.innerHTML = 'Clip Length: 0.000s'; } function procPos(msg, timeNow) { @@ -117,11 +131,10 @@ function procPos(msg, timeNow) { timePrev = timeNow; let timeActual = new Date(t); - timecode.innerHTML = `-${ - timeActual.getUTCHours().toString().padStart(3, '0')}:${ - timeActual.getUTCMinutes().toString().padStart(2, '0')}:${ - timeActual.getUTCSeconds().toString().padStart(2, '0')}.${ - timeActual.getUTCMilliseconds().toString().padStart(3, '0')}`; - ms.innerHTML = `Clip Length: ${average(estSizeBuffer)/1000}s`; + timecodehours.innerHTML = timeActual.getUTCHours().toString().padStart(3, '0'); + timecodeminutes.innerHTML = timeActual.getUTCMinutes().toString().padStart(2, '0'); + timecodeseconds.innerHTML = timeActual.getUTCSeconds().toString().padStart(2, '0'); + timecodems.innerHTML = timeActual.getUTCMilliseconds().toString().padStart(3, '0'); + cliplength.innerHTML = `Clip Length: ${average(estSizeBuffer)/1000}s`; // console.log(`pos: ${pos}\taverage: ${a}\ti: ${interval}\ttime: ${d}\ttimeAverage: ${ta}\ttimeActual: ${t}\ttimeTotal: ${average(totalArray)}\ttimeLeft: ${timeLeft}`); }