auto-cycle images, for #2

mcmonkeyprojects · Dec 14, 2022 · b9fcad8 · b9fcad8
1 parent ee0ba2d
commit b9fcad8
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 3 deletions.
diff --git 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
@@ -34,6 +34,7 @@
     }
     table tr td {
         vertical-align: top;
+        border: 1px solid black;
     }
     </style>
     <script src="jquery.min.js"></script>
@@ -45,19 +46,24 @@ <h4>{DESCRIPTION}</h4>
         <noscript>This page requires JavaScript to work. Don't worry, it's all local to the current page, and open source on GitHub.</noscript>
         <hr>
         <br><input class="form-check-input" type="checkbox" id="showDescriptions" checked="true" onchange="javascript:toggleDescriptions()"> <label class="form-check-label" for="showDescriptions" title="Uncheck this to focus on the grid. Check it to see the full descriptions of each option.">Show descriptions of axes and values</label>
+        <br><input class="form-check-input" type="checkbox" id="showTimers" onchange="javascript:toggleTimers()"> <label class="form-check-label" for="showTimers" title="Check this to enable auto-cycle timers for each axis.">Show auto-cycle timers.</label>
     </center>
     <br>
     {CONTENT}
+    <br><div style="width:256px;height:512px;"></div> <!-- Spacer to reduce screen-jumping if images load while you're scrolled down -->
     <footer>
         <center>
             <hr>
             {AUTHOR}
             <br>The technology that powers this page is <a href="https://github.com/mcmonkeyprojects/sd-infinity-grid-generator-script">Infinity Grid Generator for Stable Diffusion</a>, published under the MIT license by Alex 'mcmonkey' Goodwin.
             <br>This software allows users to generate pages with any content they desire. Therefore, content on this page (images, text, etc.) is the property of whoever generated this specific page.
+            <br>Images area auto-generated by an AI (Stable Diffusion) and so may not have been reviewed by the page author before publishing.
             <br>Made using the <a href="https://bootswatch.com/darkly/">Darkly Bootstrap Theme</a> by Thomas Park, which was released under the <a href="https://github.com/thomaspark/bootswatch/blob/95df99d76147797cbcb1014b639805add2327f65/LICENSE">MIT License</a>.
+            <br>
+            <br>
         </center>
     </footer>
-    <script src="data.js?vary=3"></script>
-    <script src="proc.js?vary=3"></script>
+    <script src="data.js?vary=4"></script>
+    <script src="proc.js?vary=4"></script>
     <script src="bootstrap.bundle.min.js"></script>
 </body>
diff --git 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
@@ -443,7 +443,9 @@ def buildHtml(grid):
             try:
                 axisDescrip = cleanForWeb(axis.description or '')
                 trClass = "primary" if primary else "secondary"
-                content += f'<tr class="{trClass}">\n<td>\n<h4>{axis.title}</h4>\n<div class="axis_table_cell">{axisDescrip}</div></td>\n<td><ul class="nav nav-tabs" role="tablist">\n'
+                content += f'<tr class="{trClass}">\n<td>\n<h4>{axis.title}</h4>\n'
+                content += f'<div class="timer_box" style="display:none;"><input style="width:80%;" type="range" min="0" max="360" value="0" class="form-range timer_range" id="range_tablist_{axis.id}"><label class="form-check-label" for="range_tablist_{axis.id}" id="label_range_tablist_{axis.id}">0 seconds</label></div>'
+                content += f'<div class="axis_table_cell">{axisDescrip}</div></td>\n<td><ul class="nav nav-tabs" role="tablist" id="tablist_{axis.id}">\n'
                 primary = not primary
                 isFirst = axis.default is None
                 for val in axis.values: