From 7b543f6682d6ccc65359d972468177d5980b63fc Mon Sep 17 00:00:00 2001 From: MGCounts <68518563+mgcountss@users.noreply.github.com> Date: Mon, 18 Dec 2023 22:19:20 -0600 Subject: [PATCH] Add files via upload --- top50/index.css | 162 +++++----- top50/index.html | 346 +++++++++++---------- top50/index.js | 789 +++++++++++------------------------------------ 3 files changed, 460 insertions(+), 837 deletions(-) diff --git a/top50/index.css b/top50/index.css index c53e27d..f5d4c97 100644 --- a/top50/index.css +++ b/top50/index.css @@ -6,107 +6,115 @@ } body { - font-family: Arial; - transition: color 2s; + font-family: Arial; + transition: color 2s; +} + +label,h1,h2,h3,h4,h5,h6,p { + color: #000; } .main { - width: 100%; - transition: color 2s; + width: 100%; + transition: color 2s; } .num { - font-family: 'Roboto', roboto; - float: left; - font-weight: 900; - margin-right: 0.2vw; - margin-left: 0.2vw; - color: #000; - src: url('../../fonts/Roboto-Regular.ttf') format('truetype'); + font-family: 'Roboto', roboto; + float: left; + font-weight: 900; + margin-right: 0.2vw; + margin-left: 0.2vw; + src: url('../../fonts/Roboto-Regular.ttf') format('truetype'); } .card { - height: 4.25vw; - padding: 0.2vw; - margin: 0.2vw; - text-align: left; - background: #141414; - border: 0.1vw solid #ffffff; - transition: margin-top 500ms; + height: 4.25vw; + padding: 0.1vw; + margin: 0.2vw; + text-align: left; + background: #141414; + border: 0.1em solid #ffffff; + transition: margin-top 500ms; } .image { - height: 4.25vw; - width: 4.25vw; - float: left; - border-radius: 50%; - z-index: 10; + height: 4.25vw; + width: 4.25vw; + float: left; + border-radius: 50%; + z-index: 10; + border: solid 0.1em #000; } .count { - transition: color 2s; - font-size: 2vw; - font-family: 'Roboto', sans-serif; - padding-left: 0.2vw; - margin-top: calc(1vw - 2vh); - src: url('../../fonts/Roboto-Regular.ttf') format('truetype'); + transition: color 2s; + font-size: 2vw; + font-family: 'Roboto', sans-serif; + padding-left: 0.2vw; + margin-top: calc(1vw - 2vh); + src: url('../../fonts/Roboto-Regular.ttf') format('truetype'); } .name { - font-family: 'Roboto', sans-serif; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-left: 0.1vw; - font-size: 1.5vw; - src: url('../../fonts/Roboto-Regular.ttf') format('truetype'); + font-family: 'Roboto', sans-serif; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-left: 0.1vw; + font-size: 1.5vw; + src: url('../../fonts/Roboto-Regular.ttf') format('truetype'); } .other { - width: 100%; - overflow-y: scroll; - overflow-x: hidden; - border: solid 0.3vw #000; - transition: color 2s; - margin-top: 0vw; + width: 100%; + overflow-y: scroll; + overflow-x: hidden; + border: solid 0.3vw #000; + transition: color 2s; + margin-top: 0vw; } .selected { - background-color: #ccc; - transition: color 2s; - border: solid 1px red; + background-color: #ccc; + transition: color 2s; + border: solid 1px red; } .slidecontainer { - width: 100%; - } - - .slider { - width: 100%; - height: 25px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - } - - .slider:hover { - opacity: 1; - } - - .slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - background: #04AA6D; - cursor: pointer; - } - - .slider::-moz-range-thumb { - width: 25px; - height: 25px; - background: #04AA6D; - cursor: pointer; - } + width: 100%; +} + +.slider { + width: 100%; + height: 25px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; +} + +.slider:hover { + opacity: 1; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + background: #04AA6D; + cursor: pointer; +} + +.slider::-moz-range-thumb { + width: 25px; + height: 25px; + background: #04AA6D; + cursor: pointer; +} + +input[type=checkbox] { + margin: 0.1em; +} \ No newline at end of file diff --git a/top50/index.html b/top50/index.html index a38f125..eb71037 100644 --- a/top50/index.html +++ b/top50/index.html @@ -26,46 +26,64 @@ - - + + -
- +
-
-
- - - - - - - - -
-
- - - - - - +
+
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+

+
+
+ + +
+
+ + + +

@@ -79,136 +97,153 @@

Add Channel




- -
-

-
+
+
+

-
+
+
-
-

Edit Channel

-
- - -
-
+

Edit Channel


- - -
- - - - -
- - + +
- - +
+ +
+
+
+

- - -
-

-
+

- +

- - +
+ + +
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
- -
-
-
-
- +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
-
-
-
- +
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
@@ -265,14 +300,13 @@

Updates

id="pathImage" placeholder="snippet.thumbnails.default.url" autocomplete="off">

-
+
- +
MAKE SURE TO SAVE BEFORE ENABLING @@ -344,4 +378,4 @@

Updates

- + \ No newline at end of file diff --git a/top50/index.js b/top50/index.js index d68ff20..d35a6cf 100644 --- a/top50/index.js +++ b/top50/index.js @@ -1,8 +1,6 @@ let currentIndex = 0; let auditTimeout; let saveInterval; -let makingSequence = false; -let sequenceStuff = {} let chart; let nextUpdateAudit = false; function abb(n) { @@ -29,11 +27,16 @@ function random(min, max) { let uuid = uuidGen() let data = { "data": [], + "showImages": true, + "showNames": true, + "showCounts": true, + "showRankings": true, "bgColor": "#FFF", "textColor": "#000", "boxColor": "#f7f5fe", "boxBorder": "#FFF", "imageBorder": "0", + "imageBorderColor": "#000", "sort": "", "gain_min": -10000, "gain_max": 10000, @@ -171,8 +174,9 @@ function initLoad(redo) { const gained = gain * (secondsPassed / interval); data.data[i].count += gained; } else { - const gain = random(parseFloat(data.data[i].min_gain), parseFloat(data.data[i].max_gain)); - const gained = gain * (secondsPassed / interval); + const gain = average(parseFloat(data.data[i].min_gain), parseFloat(data.data[i].max_gain)); + let gained = gain * (secondsPassed / interval); + gained += (data.data[i].max_gain / data.data[i].min_gain) / 100 data.data[i].count += gained; } } @@ -236,203 +240,6 @@ function initLoad(redo) { document.body.style.backgroundColor = data.bgColor; document.body.style.color = data.textColor; fix(); - if (data.theme !== 'line') { - updateOdo(); - } - updateInterval = setInterval(update, data.updateInterval); -} - -function initLoad2() { - let c = 1; - clearInterval(updateInterval); - if (data.theme == 'top50') { - for (var l = 1; l <= 5; l++) { - var htmlcolumn = `
`; - $('.main').append(htmlcolumn); - for (var t = 1; t <= 10; t++) { - let cc = c; - if (c < 10) { - cc = "0" + c; - } - if (sequenceStuff.data[0].channels[c - 1]) { - var abbTest = `
${Math.floor(sequenceStuff.data[0].channels[c - 1].count)}
`; - if (data.abbreviate == true) { - abbTest = `
${abb(Math.floor(sequenceStuff.data[0].channels[c - 1].count))}
`; - } - var htmlcard = `
-
${cc}
- -
${sequenceStuff.data[0].channels[c - 1].name}
- ${abbTest} -
`; - $('.column_' + l).append(htmlcard); - c += 1; - } else { - var htmlcard = `
-
${cc}
- -
Loading
-
0
-
`; - $('.column_' + l).append(htmlcard); - c += 1; - } - } - } - } else if (data.theme == 'top10') { - for (var l = 1; l <= 5; l++) { - var htmlcolumn = `
`; - $('.main').append(htmlcolumn); - for (var t = 1; t <= 2; t++) { - let cc = c; - if (c < 10) { - cc = "0" + c; - } - if (data.data[c - 1]) { - var abbTest = `
${Math.floor(data.data[c - 1].count)}
`; - if (data.abbreviate == true) { - abbTest = `
${abb(Math.floor(data.data[c - 1].count))}
`; - } - var htmlcard = `
-
${cc}
- -
${data.data[c - 1].name}
- ${abbTest} -
`; - $('.column_' + l).append(htmlcard); - c += 1; - } else { - var htmlcard = `
-
${cc}
- -
Loading
-
0
-
`; - $('.column_' + l).append(htmlcard); - c += 1; - } - } - } - } else if (data.theme == 'top25') { - for (var l = 1; l <= 5; l++) { - var htmlcolumn = `
`; - $('.main').append(htmlcolumn); - for (var t = 1; t <= 5; t++) { - let cc = c; - if (c < 10) { - cc = "0" + c; - } - if (data.data[c - 1]) { - var abbTest = `
${Math.floor(data.data[c - 1].count)}
`; - if (data.abbreviate == true) { - abbTest = `
${abb(Math.floor(data.data[c - 1].count))}
`; - } - var htmlcard = `
-
${cc}
- -
${data.data[c - 1].name}
- ${abbTest} -
`; - $('.column_' + l).append(htmlcard); - c += 1; - } else { - var htmlcard = `
-
${cc}
- -
Loading
-
0
-
`; - $('.column_' + l).append(htmlcard); - c += 1; - } - } - } - } else if (data.theme == 'top100') { - document.getElementById('main').style = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);"; - var style = document.createElement('style'); - style.innerHTML = `.image { height: 2.15vw; width: 2.15vw; } - .card { height: 2.15vw; } - .count { font-size: 1vw; } - .name { font-size: 0.75vw; }`; - document.getElementsByTagName('head')[0].appendChild(style); - for (var l = 1; l <= 10; l++) { - var htmlcolumn = `
`; - $('.main').append(htmlcolumn); - for (var t = 1; t <= 10; t++) { - let cc = c; - if (c < 10) { - cc = "0" + c; - } - if (data.data[c - 1]) { - var abbTest = `
${Math.floor(data.data[c - 1].count)}
`; - if (data.abbreviate == true) { - abbTest = `
${abb(Math.floor(data.data[c - 1].count))}
`; - } - var htmlcard = `
-
${cc}
- -
${data.data[c - 1].name}
- ${abbTest} -
`; - $('.column_' + l).append(htmlcard); - c += 1; - } else { - var htmlcard = `
-
${cc}
- -
Loading
-
0
-
`; - $('.column_' + l).append(htmlcard); - c += 1; - } - } - } - } else if (data.theme == 'top150') { - document.getElementById('main').style = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);"; - var style = document.createElement('style'); - style.innerHTML = `.image { height: 2.15vw; width: 2.15vw; } - .card { height: 2.15vw; } - .count { font-size: 1vw; } - .name { font-size: 0.75vw; }`; - document.getElementsByTagName('head')[0].appendChild(style); - for (var l = 1; l <= 10; l++) { - var htmlcolumn = `
`; - $('.main').append(htmlcolumn); - for (var t = 1; t <= 10; t++) { - let cc = c; - if (c < 10) { - cc = "0" + c; - } - if (data.data[c - 1]) { - var abbTest = `
${Math.floor(data.data[c - 1].count)}
`; - if (data.abbreviate == true) { - abbTest = `
${abb(Math.floor(data.data[c - 1].count))}
`; - } - var htmlcard = `
-
${cc}
- -
${data.data[c - 1].name}
- ${abbTest} -
`; - $('.column_' + l).append(htmlcard); - c += 1; - } else { - var htmlcard = `
-
${cc}
- -
Loading
-
0
-
`; - $('.column_' + l).append(htmlcard); - c += 1; - } - } - } - } else { - alert('err') - } - fix() updateOdo(); updateInterval = setInterval(update, data.updateInterval); } @@ -504,7 +311,6 @@ function create() { } } -let sequenceNum = 0; function update() { let start = new Date().getTime(); if (data) { @@ -541,14 +347,14 @@ function update() { } document.getElementById('quickSelect').innerHTML = selections.join(""); document.getElementById('quickSelect').value = past; - let sort = `b.${document.getElementById('sort').value} - a.${document.getElementById('sort').value}` - if (document.getElementById('sort').value == "fastest") { + let sort = `b.${document.getElementById('sorter').value} - a.${document.getElementById('sorter').value}` + if (document.getElementById('sorter').value == "fastest") { sort = `avg(b.min_gain, b.max_gain) - avg(a.min_gain, a.max_gain)` } - if (document.getElementById('sort').value == "slowest") { + if (document.getElementById('sorter').value == "slowest") { sort = `avg(a.min_gain, a.max_gain) - avg(b.min_gain, b.max_gain)` } - if (!document.getElementById('sort').value) { + if (!document.getElementById('sorter').value) { sort = `b.count - a.count` } data.data = data.data.sort(function (a, b) { @@ -579,9 +385,9 @@ function update() { document.getElementsByClassName("card")[i].children[3].innerHTML = Math.floor(data.data[i].count) } if (selected == data.data[i].id) { - document.getElementById("card_" + selected).style.border = "1px solid red"; + document.getElementById("card_" + selected).style.border = "0.1em solid red"; } else { - document.getElementById("card_" + data.data[i].id).style.border = "1px solid " + data.boxBorder + ""; + document.getElementById("card_" + data.data[i].id).style.border = "0.1em solid " + data.boxBorder + ""; } if (fastest == data.data[i].id) { if (data.fastest == true) { @@ -596,38 +402,6 @@ function update() { } } } - } else if (data.visulization == 'line') { - data.data.forEach(function (item, index) { - chart.data.datasets[index].data.push(item.count); - - }); - chart.data.labels.push(new Date().toLocaleTimeString()); - if (chart.data.labels.length > 50) { - chart.data.labels.shift(); - chart.data.datasets.forEach(function (dataset) { - dataset.data.shift(); - }); - } - chart.update(); - } else if (data.visulization == 'sequence') { - if (sequenceNum < sequenceStuff.data.length) { - sequenceStuff.data[sequenceNum].channels.forEach(function (item, i) { - if (item.image) { - item.image = item.image; - } else { - item.image = "../default.png"; - } - document.getElementsByClassName("card")[i].children[1].src = item.image - document.getElementsByClassName("card")[i].children[2].innerHTML = item.name - document.getElementsByClassName("card")[i].children[1].id = "image_" + item.id - document.getElementsByClassName("card")[i].children[2].id = "name_" + item.id - document.getElementsByClassName("card")[i].children[0].id = "num_" + item.id - document.getElementsByClassName("card")[i].id = "card_" + item.id - document.getElementsByClassName("card")[i].children[3].id = "count_" + item.id - document.getElementsByClassName("card")[i].children[3].innerHTML = Math.floor(item.count) - }) - sequenceNum++; - } } } let end = new Date().getTime(); @@ -635,7 +409,7 @@ function update() { console.log('Execution timeS: ' + time / 1000); } -document.getElementById('sort').addEventListener('change', function () { +document.getElementById('sorter').addEventListener('change', function () { update(); }); @@ -653,66 +427,6 @@ document.getElementById('quickSelect').addEventListener('change', function (e) { } }) -function selecterFunction(e) { - if (makingSequence == false) { - let id = e.target.id.split("_")[1]; - if (e.target.id.split("_").length > 2) { - for (let i = 2; i < e.target.id.split("_").length; i++) { - id = id + "_" + e.target.id.split("_")[i]; - } - } - if (selected != null) { - document.getElementById('card_' + selected + '').classList.remove('selected'); - document.getElementById('card_' + selected + '').style.border = "solid 1px " + data.boxBorder + ""; - } - if (id == selected) { - if (selected != null) { - document.getElementById('card_' + id + '').classList.remove('selected'); - document.getElementById('card_' + id + '').style.border = "solid 1px " + data.boxBorder + ""; - selected = null; - document.getElementById('edit_min_gain').value = ""; - document.getElementById('edit_mean_gain').value = ""; - document.getElementById('edit_std_gain').value = ""; - document.getElementById('edit_max_gain').value = ""; - document.getElementById('edit_name').value = ""; - document.getElementById('edit_count').value = ""; - document.getElementById('edit_image1').value = ""; - } - } else { - if (document.getElementById('card_' + id + '')) { - document.getElementById('card_' + id + '').classList.add('selected'); - document.getElementById('card_' + id + '').style.border = "solid 1px red" - selected = id; - for (let q = 0; q < data.data.length; q++) { - if (data.data[q].id == id) { - if (data.data[q].mean_gain) { - document.getElementById('edit_mean_gain').value = data.data[q].mean_gain; - document.getElementById('edit_mean_gain_check').checked = true; - } else { - document.getElementById('edit_mean_gain').value = ""; - document.getElementById('edit_mean_gain_check').checked = false; - } - if (data.data[q].std_gain) { - document.getElementById('edit_std_gain').value = data.data[q].mean_gain; - document.getElementById('edit_std_gain_check').checked = true; - } else { - document.getElementById('edit_std_gain').value = ""; - document.getElementById('edit_std_gain_check').checked = false; - } - document.getElementById('edit_min_gain').value = data.data[q].min_gain; - document.getElementById('edit_max_gain').value = data.data[q].max_gain; - document.getElementById('edit_name').value = data.data[q].name; - document.getElementById('edit_count').value = data.data[q].count; - document.getElementById('edit_image1').value = data.data[q].image; - } - } - } - } - } else { - selecterFunction2(e) - } -} - function edit() { if (selected !== null) { let id = selected; @@ -807,8 +521,12 @@ function saveData2() { localStorage.setItem("data", JSON.stringify(data)); } +document.getElementById('loadData').addEventListener('change', function () { + load(); +}); + function load() { - data3 = {}; + var data3 = {}; document.getElementById('main').innerHTML = ""; if (document.getElementById('loadData').files[0]) { document.getElementById('loadData').files[0].text().then(function (data2) { @@ -861,7 +579,7 @@ function load() { } document.body.style.backgroundColor = data.bgColor; document.body.style.color = data.textColor; - document.getElementById('sort').value = data.sort; + document.getElementById('sorter').value = data.sort; if (!data.uuid) { data.uuid = uuidGen(); } @@ -937,6 +655,45 @@ document.getElementById('imageBorder').addEventListener('change', function () { fix() }); +document.getElementById('imageBorder').addEventListener('change', function () { + let color = this.value; + data.imageBorderColor = color; + fix() +}); + +document.getElementById('showRankings').addEventListener('change', function () { + if (document.getElementById('showRankings').checked) { + data.showRankings = true; + } else { + data.showRankings = false; + } + fix() +}); +document.getElementById('showNames').addEventListener('change', function () { + if (document.getElementById('showNames').checked) { + data.showNames = true; + } else { + data.showNames = false; + } + fix() +}); +document.getElementById('showImages').addEventListener('change', function () { + if (document.getElementById('showImages').checked) { + data.showImages = true; + } else { + data.showImages = false; + } + fix() +}); +document.getElementById('showCounts').addEventListener('change', function () { + if (document.getElementById('showCounts').checked) { + data.showCounts = true; + } else { + data.showCounts = false; + } + fix() +}); + function fix() { if (data.audits == true) { auditTimeout = setTimeout(audit, (random(data.auditStats[2], data.auditStats[3])) * 1000) @@ -986,16 +743,62 @@ function fix() { } else { document.getElementById('autosave').checked = false; } + if (data.showRankings == true) { + document.getElementById('showRankings').checked = true; + document.querySelectorAll('.num').forEach(function (card) { + card.style.display = ""; + }) + } else { + document.getElementById('showRankings').checked = false; + document.querySelectorAll('.num').forEach(function (card) { + card.style.display = "none"; + }) + } + if (data.showNames == true) { + document.getElementById('showNames').checked = true; + document.querySelectorAll('.name').forEach(function (card) { + card.style.display = ""; + }) + } else { + document.getElementById('showNames').checked = false; + document.querySelectorAll('.name').forEach(function (card) { + card.style.display = "none"; + }) + } + if (data.showImages == true) { + document.getElementById('showImages').checked = true; + document.querySelectorAll('.image').forEach(function (card) { + card.style.display = ""; + }) + } else { + document.getElementById('showImages').checked = false; + document.querySelectorAll('.image').forEach(function (card) { + card.style.display = "none"; + }) + } + if (data.showCounts == true) { + document.getElementById('showCounts').checked = true; + document.querySelectorAll('.count').forEach(function (card) { + card.style.display = ""; + }) + } else { + document.getElementById('showCounts').checked = false; + document.querySelectorAll('.count').forEach(function (card) { + card.style.display = "none"; + }) + } + document.getElementById('theme').value = data.theme; document.getElementById('setting').innerHTML = "Current: " + data.hideSettings + "" document.querySelectorAll('.card').forEach(function (card) { card.style.backgroundColor = data.boxColor; if (card.className.split(' ').includes("selected") == false) { - card.style.border = "solid 1px " + data.boxBorder; + card.style.border = "solid 0.1em " + data.boxBorder; } }); document.querySelectorAll('.image').forEach(function (card) { card.style.borderRadius = data.imageBorder + "%"; + card.style.borderColor = data.imageBorderColor; }); document.getElementById('backPicker').value = convert3letterhexto6letters(data.bgColor); document.getElementById('textPicker').value = convert3letterhexto6letters(data.textColor); @@ -1004,11 +807,12 @@ function fix() { document.getElementById('odometerUp').value = data.odometerUp; document.getElementById('odometerDown').value = data.odometerDown; document.getElementById('odometerSpeed').value = data.odometerSpeed; - document.getElementById('imageBorder').value = data.imageBorder + document.getElementById('imageBorder').value = data.imageBorder; + document.getElementById('imageBorderColor').value = data.imageBorder; if (data.updateInterval) { document.getElementById('updateint').value = (data.updateInterval / 1000).toString() } - document.getElementById('sort').value = data.sort; + document.getElementById('sorter').value = data.sort; $('style').append(`.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { color: ${data.odometerUp}; }`) @@ -1240,18 +1044,10 @@ function updateOdo() { div.className = "count"; div.id = "count" + i; if (data.data[i]) { - if (sequenceStuff.data) { - if (sequenceStuff.data[0].channels[i]) { - div.innerHTML = sequenceStuff.data[0].channels[i].count.toLocaleString(); - } else { - div.innerHTML = data.data[i].count.toLocaleString(); - } + if (data.data[i]) { + div.innerHTML = data.data[i].count.toLocaleString(); } else { - if (data.data[i]) { - div.innerHTML = data.data[i].count.toLocaleString(); - } else { - div.innerHTML = 0; - } + div.innerHTML = 0; } } else { div.innerHTML = 0; @@ -1259,15 +1055,7 @@ function updateOdo() { document.getElementsByClassName("card")[i].appendChild(div); let count = 0; if (data.data[i]) { - if (sequenceStuff.data) { - if (sequenceStuff.data[0].channels[i]) { - count = sequenceStuff.data[0].channels[i].count; - } else { - count = 0; - } - } else { - count = data.data[i].count; - } + count = data.data[i].count; } else { count = 0; } @@ -1298,48 +1086,80 @@ function updateOdo() { div.innerHTML = 0; } document.getElementsByClassName("card")[i].appendChild(div); - if (sequenceStuff.data) { - if (sequenceStuff.data[0].channels[i]) { - new Odometer({ - el: document.getElementById("count" + i), - value: sequenceStuff.data[0].channels[i].count, - format: '(,ddd)', - theme: 'default', - animation: 'count' - }) - } else { - new Odometer({ - el: document.getElementById("count" + i), - value: 0, - format: '(,ddd)', - theme: 'default', - animation: 'count' - }) - } + if (data.data[i]) { + new Odometer({ + el: document.getElementById("count" + i), + value: data.data[i].count, + format: '(,ddd)', + theme: 'default', + animation: 'count' + }) } else { - if (data.data[i]) { - new Odometer({ - el: document.getElementById("count" + i), - value: data.data[i].count, - format: '(,ddd)', - theme: 'default', - animation: 'count' - }) - } else { - new Odometer({ - el: document.getElementById("count" + i), - value: 0, - format: '(,ddd)', - theme: 'default', - animation: 'count' - }) - } + new Odometer({ + el: document.getElementById("count" + i), + value: 0, + format: '(,ddd)', + theme: 'default', + animation: 'count' + }) } } } } } +function selecterFunction(e) { + let id = e.target.id.split("_")[1]; + if (e.target.id.split("_").length > 2) { + for (let i = 2; i < e.target.id.split("_").length; i++) { + id = id + "_" + e.target.id.split("_")[i]; + } + } + if (selected != null) { + document.getElementById('card_' + selected + '').classList.remove('selected'); + document.getElementById('card_' + selected + '').style.border = "solid 0.1em " + data.boxBorder + ""; + } + if (id == selected) { + if (selected != null) { + document.getElementById('card_' + id + '').classList.remove('selected'); + document.getElementById('card_' + id + '').style.border = "solid 0.1em " + data.boxBorder + ""; + selected = null; + document.getElementById('edit_min_gain').value = ""; + document.getElementById('edit_mean_gain').value = ""; + document.getElementById('edit_std_gain').value = ""; + document.getElementById('edit_max_gain').value = ""; + document.getElementById('edit_name').value = ""; + document.getElementById('edit_count').value = ""; + document.getElementById('edit_image1').value = ""; + } + } else { + if (document.getElementById('card_' + id + '')) { + document.getElementById('card_' + id + '').classList.add('selected'); + document.getElementById('card_' + id + '').style.border = "solid 0.1em red" + selected = id; + for (let q = 0; q < data.data.length; q++) { + if (data.data[q].id == id) { + if ((data.data[q].mean_gain) && (data.data[q].std_gain) && (data.data[q].mean_gain != 0) && (data.data[q].std_gain != 0)) { + document.getElementById('edit_mean_gain').value = data.data[q].mean_gain; + document.getElementById('edit_mean_gain_check').checked = true; + document.getElementById('edit_std_gain').value = data.data[q].mean_gain; + document.getElementById('edit_std_gain_check').checked = true; + } else { + document.getElementById('edit_mean_gain').value = ""; + document.getElementById('edit_mean_gain_check').checked = false; + document.getElementById('edit_std_gain_check').checked = false; + } + document.getElementById('edit_min_gain').value = data.data[q].min_gain; + document.getElementById('edit_max_gain').value = data.data[q].max_gain; + document.getElementById('edit_name').value = data.data[q].name; + document.getElementById('edit_count').value = data.data[q].count; + document.getElementById('edit_image1').value = data.data[q].image; + } + } + } + } +} + document.getElementById('abbreviate').addEventListener('click', function () { if (document.getElementById('abbreviate').checked == true) { data.abbreviate = true; @@ -1459,6 +1279,10 @@ function randomGaussian(mean, stdev) { return Math.sqrt(-2 * Math.log(a)) * Math.cos(2 * Math.PI * b) * stdev + mean; } +function average(num1, num2) { + return (num1 + num2) / 2 +} + function create50dummychannels() { for (let i = 0; i < 50; i++) { data.data[i] = { @@ -1471,193 +1295,6 @@ function create50dummychannels() { } } } -let selectedChannels = []; -let sequence = { data: [] } -function newSequence() { - pause(); - selectedChannels = []; - sequence.name = prompt("Enter the name of the sequence") - sequence.length = prompt("Enter the length of the sequence (in seconds)") - if (!sequence.name) { - sequence.name = "Untitled" - } - if (!sequence.length) { - sequence.length = 30 - } - makingSequence = true; - alert('Select the channels you would like to be added to the sequence.\nPress enter when you are done.') - document.addEventListener('keydown', function (e) { - if (e.key == "Enter") { - localStorage.setItem("data", JSON.stringify(data)); - document.getElementById('main').innerHTML = ""; - for (let q = 0; q < parseFloat(sequence.length); q++) { - sequence.data[q] = { - channels: [], - time: q - } - for (let i = 0; i < selectedChannels.length; i++) { - if (q == 0) { - sequence.data[q].channels[i] = { - id: selectedChannels[i].split('_')[1], - count: getSubs(selectedChannels[i].split('_')[1]), - min_gain: getMinGain(selectedChannels[i].split('_')[1]), - max_gain: getMaxGain(selectedChannels[i].split('_')[1]), - manual: true, - name: getName(selectedChannels[i].split('_')[1]), - image: getImage(selectedChannels[i].split('_')[1]) - } - } else { - sequence.data[q].channels[i] = { - id: selectedChannels[i].split('_')[1], - count: 0, - min_gain: getMinGain(selectedChannels[i].split('_')[1]), - max_gain: getMaxGain(selectedChannels[i].split('_')[1]), - manual: false, - name: getName(selectedChannels[i].split('_')[1]), - image: getImage(selectedChannels[i].split('_')[1]) - } - } - } - } - let newChannels = []; - for (let mm = 0; mm < selectedChannels.length; mm++) { - if (newChannels.includes("a_" + selectedChannels[mm].split('_')[1]) == false) { - newChannels.push("a_" + selectedChannels[mm].split('_')[1]) - } - } - selectedChannels = newChannels; - for (let q = 0; q < data.data.length; q++) { - for (let i = 0; i < selectedChannels.length; i++) { - if (selectedChannels[i].split('_')[1] == data.data[q].id) { - document.getElementById('main').innerHTML += ` -
-
- Channel Image -
-
-

${data.data[q].name}

-
-
-

-
-
-

Min Gain For Next Count:

-

Max Gain For Next Count:

-
-
` - } - } - } - for (let i = 0; i < selectedChannels.length; i++) { - let id = selectedChannels[i].split('_')[1] - document.getElementById(`count_${id}`).addEventListener('change', function () { - let time = parseFloat(document.getElementById("demo").innerHTML) - sequence.data[time].channels.forEach(item => { - if (item.id == id) { - item.count = parseFloat(document.getElementById(`count_${id}`).value) - return; - } - }) - }) - document.getElementById(`min_${id}`).addEventListener('change', function () { - let time = parseFloat(document.getElementById("demo").innerHTML - 1) - sequence.data[time].channels.forEach(item => { - if (item.id == id) { - item.min_gain = parseFloat(document.getElementById(`min_${id}`).value) - reloadSequenceValues(time) - return; - } - }) - }) - document.getElementById(`max_${id}`).addEventListener('change', function () { - let time = parseFloat(document.getElementById("demo").innerHTML - 1) - sequence.data[time].channels.forEach(item => { - if (item) { - if (item.id == id) { - item.max_gain = parseFloat(document.getElementById(`max_${id}`).value) - reloadSequenceValues(time) - return; - } - } - }) - }) - } - document.getElementById('settings').innerHTML = ` -
- -

Value:

-
-
- - -
- `; - var slider = document.getElementById("myRange"); - var output = document.getElementById("demo"); - output.innerHTML = slider.value; - slider.oninput = function () { - var time = parseFloat(this.value) - 1 - output.innerHTML = this.value; - for (let i = 0; i < selectedChannels.length; i++) { - let id = selectedChannels[i].split('_')[1] - if (sequence.data[time]) { - if (sequence.data[time].channels[i].manual == false) { - if (sequence.data[time - 1].channels[i]) { - sequence.data[time - 1].channels[i].min_gain = parseFloat(document.getElementById(`min_${id}`).value) - sequence.data[time - 1].channels[i].max_gain = parseFloat(document.getElementById(`max_${id}`).value) - let newTotal = sequence.data[0].channels[i].count + mean(sequence.data[time - 1].channels[i].min_gain, sequence.data[time - 1].channels[i].max_gain) * time - document.getElementById(`count_${id}`).value = newTotal - sequence.data[time].channels[i].count = newTotal - sequence.data[time].channels[i].manual = true - } else { - alert('glitch lol') - } - } else { - document.getElementById(`count_${id}`).value = sequence.data[time].channels[i].count - } - } - document.getElementById(`min_${id}`).value = sequence.data[time].channels[i].min_gain - document.getElementById(`max_${id}`).value = sequence.data[time].channels[i].max_gain - } - } - } - }) -} - -async function reloadSequenceValues2() { - let time = parseFloat(document.getElementById("demo").innerHTML) - return await reloadSequenceValues(time) -} - -function reloadSequenceValues(time) { - console.log('reloaded') - let max = parseFloat(document.getElementById("myRange").max) - for (let i = 0; i < max; i++) { - document.getElementById("myRange").value = i - } - document.getElementById("myRange").value = time + 1 - return 'done' -} - -function selecterFunction2(e) { - if (makingSequence == true) { - if (e.target.id.includes("_")) { - if (selectedChannels.includes(e.target.id)) { - selectedChannels.splice(selectedChannels.indexOf(e.target.id), 1) - document.getElementById('card_' + e.target.id.split("_")[1] + '').style.border = "solid 1px " + data.boxBorder + ""; - } else { - selectedChannels.push(e.target.id) - let id = e.target.id.split("_")[1]; - if (e.target.id.split("_").length > 2) { - for (let i = 2; i < e.target.id.split("_").length; i++) { - id = id + "_" + e.target.id.split("_")[i]; - } - } - document.getElementById('card_' + id + '').style.border = "solid 1px blue"; - } - } - } -} function getSubs(id) { for (let i = 0; i < data.data.length; i++) { @@ -1704,47 +1341,6 @@ function getMaxGain(id) { return 0; } -async function saveSeqeunce() { - await reloadSequenceValues2() - let data2 = JSON.stringify(sequence); - let a = document.createElement('a'); - let file = new Blob([data2], { type: 'text/json' }); - a.href = URL.createObjectURL(file); - a.download = 'sequenceData.json'; - a.click(); -} - -function line() { - document.getElementById('main').innerHTML = '' - document.getElementById('chart').style.height = '100vh' - document.getElementById('chart').style.display = '' - let names = [] - let datasets = [] - for (let i = 0; i < data.data.length; i++) { - let color = randomColor() - names.push(data.data[i].name) - let dataset = { - label: data.data[i].name, - data: [data.data[i].count], - fill: false, - borderColor: color, - tension: 0.1 - } - datasets.push(dataset) - } - const ctx = document.getElementById('chart') - const add = { - labels: [new Date().toLocaleTimeString()], - datasets: datasets - }; - const config = { - type: 'line', - data: add, - }; - chart = new Chart(ctx, config); - data.visulization = 'line' -} - function randomColor() { let color = '#' for (let i = 0; i < 6; i++) { @@ -1753,21 +1349,6 @@ function randomColor() { return color } -function loadSequence() { - let file = document.getElementById('loadSequence').files[0]; - let reader = new FileReader(); - reader.readAsText(file); - reader.onload = function () { - data.visulization = 'sequence' - sequenceStuff = JSON.parse(reader.result) - document.getElementById('main').innerHTML = '' - initLoad2() - } - reader.onerror = function () { - alert('error') - } -} - function mean(a, b) { return (a + b) / 2 }