From b9fcad821b7b3bb5476e70289ad7033ae8221cac Mon Sep 17 00:00:00 2001 From: "Alex \"mcmonkey\" Goodwin" Date: Tue, 13 Dec 2022 17:07:23 -0800 Subject: [PATCH] auto-cycle images, for #2 --- README.md | 8 +++++ assets/page.html | 10 ++++-- assets/proc.js | 69 ++++++++++++++++++++++++++++++++++++++++ scripts/infinity_grid.py | 4 ++- 4 files changed, 88 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 43b9b20..07324fb 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,14 @@ axes: - Open the HTML file in a browser. Enjoy. - If you want to share the content, just copy/paste the whole freakin folder into a webserver somewhere. - Or upload to github and make GitHub.io pages host it for you. +- You have a few different clickable options: + - `Show descriptions of axes and values`: if you used descriptions, you can uncheck this box to hide them. Helps save space for direct viewing. + - `Show auto-cycle timers`: when checked, will add timer-sliders to each field - you can set these to non-zero values to the grid automatically change settings over time. For example, if you set your "Seed" option to "3 seconds", then every 3 seconds the seed will change (cycling between the options you have in order). This was suggested by [itswhateverman in issue #2](https://github.com/mcmonkeyprojects/sd-infinity-grid-generator-script/issues/2). + - `Auto-scale images to viewport width`: this is handy for a few different scenarios + - A: if your images are small and your screen is big, checking this option makes them bigger + - B: if your images are so big they're going off the edge, checking this option makes them smaller + - C: if checked, you can zoom in/out of the page using your browser zoom (CTRL + Mouse Wheel) to change the UI size without affecting the image size + - if unchecked, you can zoom in/out to change the size of the images. #### Expanding Later diff --git a/assets/page.html b/assets/page.html index 371e68a..4c7f3d0 100644 --- a/assets/page.html +++ b/assets/page.html @@ -34,6 +34,7 @@ } table tr td { vertical-align: top; + border: 1px solid black; } @@ -45,19 +46,24 @@

{DESCRIPTION}


+

{CONTENT} +
- - + + diff --git a/assets/proc.js b/assets/proc.js index b48833c..08ea4ce 100644 --- a/assets/proc.js +++ b/assets/proc.js @@ -18,6 +18,7 @@ function loadData() { document.getElementById('x_' + rawData.axes[0].id).click(); document.getElementById('autoScaleImages').onchange = updateScaling; fillTable(); + startAutoScroll(); } function fillTable() { @@ -73,6 +74,7 @@ function fillTable() { function updateScaling() { var percent; + var xAxis; if (document.getElementById('autoScaleImages').checked) { var x = document.querySelector('input[name="x_axis_selector"]:checked').id.substring(2); for (var axis of rawData.axes) { @@ -99,4 +101,71 @@ function toggleDescriptions() { } } +var anyRangeActive = false; + +function toggleTimers() { + var show = document.getElementById('showTimers').checked; + if (!show) { + anyRangeActive = false; + } + for (var elem of document.getElementsByClassName("timer_box")) { + elem.style.display = show ? "block" : "none"; + } +} + +const timer = ms => new Promise(res => setTimeout(res, ms)); + +function enableRange(id) { + var range = document.getElementById("range_tablist_" + id); + var label = document.getElementById("label_range_tablist_" + id); + range.oninput = function() { + anyRangeActive = true; + label.innerText = (range.value/2) + " seconds"; + } + var data = {}; + data.range = range; + data.counter = 0; + data.id = id; + data.tabPage = document.getElementById("tablist_" + id); + data.tabs = data.tabPage.getElementsByClassName("nav-link"); + return data; +} + +async function startAutoScroll() { + var rangeSet = []; + for (var axis of rawData.axes) { + rangeSet.push(enableRange(axis.id)); + } + while (true) { + await timer(500); + if (!anyRangeActive) { + continue; + } + for (var data of rangeSet) { + if (data.range.value <= 0) { + continue; + } + data.counter++; + if (data.counter < data.range.value) { + continue; + } + data.counter = 0; + var next = false; + for (var tab of data.tabs) { + if (next) { + tab.click(); + next = false; + break; + } + if (tab.classList.contains("active")) { + next = true; + } + } + if (next) { + data.tabs[0].click(); + } + } + } +} + loadData(); diff --git a/scripts/infinity_grid.py b/scripts/infinity_grid.py index 9d91aa3..b7d3721 100644 --- a/scripts/infinity_grid.py +++ b/scripts/infinity_grid.py @@ -443,7 +443,9 @@ def buildHtml(grid): try: axisDescrip = cleanForWeb(axis.description or '') trClass = "primary" if primary else "secondary" - content += f'\n\n

{axis.title}

\n
{axisDescrip}
\n