Current dev state

2022-07-20 18:23:26 +02:00
parent e68245cd27
commit 04a4182875
7 changed files with 466 additions and 40 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -11,8 +11,50 @@
 - [ ] Use datasets for all values
 - [W] x, y color allow to set both(buttongroup to switch axis) default for y axis = match
 - [ ] Concept to not overload the UI while preserving all features
- [ ] Predefinded resolution picker(1080p, 1440p..)
+
 - [ ] Add api via get parameters
 - [ ] share link (api?)
 - [ ] Animation pattern system
 - [ ] Custom points (logos?)
+
+- [ ] Predefinded resolution picker(1080p, 1440p..)
+1:1	16	x	16	
+1:1	32	x	32	
+1:1	64	x	64	
+1:1	128	x	128	
+1:1	256	x	256	
+1:1	512	x	512	
+1:1	1024	x	1024	
+1:1	2048	x	2048	
+1:1	4096	x	4096	
+1:1	8192	x	8192	8K Fulldome
+16:9	1920	x	1080	FHD
+16:9	2048	x	1152	QWXGA
+16:9	2560	x	1440	WQHD
+16:9	3200	x	1800	WQXGA+
+16:9	3840	x	2160	4K UHD-1
+16:9	4096	x	2304	9.44M9
+16:9	4480	x	2520	11.29M9
+16:9	5120	x	2880	5K
+16:9	6016	x	3384	6K
+16:9	7680	x	4320	8K UHD-2
+16:9	8192	x	4608	8K
+16:9	14896	x	8379	MAX
+21:9	2560	x	1080	UW-FHD
+21:9	3440	x	1440	Ultra-Wide QHD
+21:9	5120	x	2160	UW5K (WUHD)
+21:9	10240	x	4320	UW10K
+21:9	3840	x	1600	UW4K
+Cinema	2048	x	858	Digital cinema 2×
+Cinema	1998	x	1080	Digital cinema 2×
+Cinema	1828	x	1332	Academy 2×
+Cinema	2048	x	1556	Full Aperture Native 2×
+Cinema	4096	x	1714	Digital cinema 4×
+Cinema	3996	x	2160	Digital cinema 4×
+Cinema	4096	x	2160	Digital Cinema Initiatives 4× (native resolution)
+Cinema	3656	x	2664	Academy 4×
+Cinema	4096	x	3112	Full Aperture 4×
+Cinema	6144	x	3160	6K
+Cinema	7992	x	4320	8K
+Cinema	7200	x	3060	7.2K
+Cinema	5616	x	4096	IMAX Digital
--- a/css/style.css
+++ b/css/style.css
@@ -59,6 +59,7 @@ main {
 	height: auto;
 	width: auto;
 	object-fit: contain;
+	/*background-color: white;*/
 	filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, .2));
 }

--- a/index.html
+++ b/index.html
@@ -69,17 +69,16 @@
 					<button class="nav-link active" id="xcolors-tab" data-bs-toggle="tab" data-bs-target="#xcolors" type="button" role="tab" aria-selected="true">Colors (X Axis)</button>
 				</li>
 				<li class="nav-item" role="presentation">
-					<button class="nav-link disabled" id="ycolors-tab" data-bs-toggle="tab" data-bs-target="#ycolors" type="button" role="tab" aria-selected="false">Colors (Y Axis)</button> <!-- TODO -->
+					<button class="nav-link" id="ycolors-tab" data-bs-toggle="tab" data-bs-target="#ycolors" type="button" role="tab" aria-selected="false">Colors (Y Axis)</button> <!-- TODO -->
 				</li>
 			</ul>

 			<div class="tab-content">
 				<div class="tab-pane fade show active" id="xcolors" role="tabpanel" aria-labelledby="xcolors-tab">
-					<label class="mt-2">Colors (X Axis)</label>
 					<ul class="m-0 p-0" id="color-patterns-x"></ul>
 				</div>
 				<div class="tab-pane fade" id="ycolors" role="tabpanel" aria-labelledby="ycolors-tab">
-					<label class="mt-2">Colors (Y Axis)</label>
+					<button type="button" class="my-2 btn btn-outline-success badge d-block w-100" id="col-y-match">Match</button>
 					<ul class="m-0 p-0" id="color-patterns-y"></ul>
 				</div>
 			</div>
@@ -89,7 +88,7 @@

 		<div class="preview">
 			<div class="preview_content">
-				<canvas class="bg-light" id="pattern"></canvas>
+				<canvas id="pattern"></canvas>
 			</div>

 			<div class="preview-float d-flex">
--- a/js/index.js
+++ b/js/index.js
@@ -25,8 +25,8 @@ let globalConfig = { // Initial config object including initial values. ONLY STA
 }

 const targetCanvas = document.getElementById('pattern');
-let colorPaternsElX = $("#color-patterns-x");
-let colorPaternsElY = $("#color-patterns-y");
+let colorPatternsElX = $("#color-patterns-x");
+let colorPatternsElY = $("#color-patterns-y");

 const colorpatterns = {
 	YlGn: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837', '#004529'],
@@ -67,7 +67,9 @@ const colorpatterns = {
 	rdgreysr: [ "#000000", "#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0", "#e31a1c", '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000']
 };

-let selectedColorPattern = generateRandColor(); // get random init colors
+let selectedColorPatternX = generateRandColor(); // get random init colors
+let selectedColorPatternY = null;//generateRandColor(); // get random init colors
+
 let pattern = null;
 let seed = null;
 let colorFunctionUsr = null;
@@ -129,8 +131,8 @@ function generateCanvas(targetCanvas) {
 	const options = {
 		width: usrWidth,
 		height: usrHeight,
-		xColors: colorpatterns[selectedColorPattern],
-		yColors: 'match',
+		xColors: colorpatterns[selectedColorPatternX],
+		yColors: colorpatterns[selectedColorPatternY] || 'match',
 		cellSize: 255 * usrCell,
 		variance: usrVar,
 		seed: seed,
@@ -153,36 +155,46 @@ function generateCanvas(targetCanvas) {
 }

 function generateColorPatterns() {
-	for (const pattern in colorpatterns) {
-		const liEl = document.createElement('li');
-		liEl.id = `colorpattern`;
-		liEl.classList.add(`colorpattern-${pattern}`);
-		liEl.dataset.name = pattern;
-		liEl.style.display = "flex";
-		liEl.style.flex = "grow";
-		liEl.classList.add("hoverGrow", "shadow");
-		liEl.style.margin = "5px";
-		liEl.title = pattern;
-
-		colorpatterns[pattern].forEach(color => {
-			const colEl = document.createElement('span');
-			colEl.style.flex = 1;
-			colEl.style.height = '25px';
-			colEl.style.backgroundColor = color;
-
-			liEl.appendChild(colEl);
-		});
-
-		colorPaternsElX.append(liEl);
+	const create = (xory) => {
+		let div = document.createElement('div');
+		for (const pattern in colorpatterns) {
+			const liEl = document.createElement('li');
+			liEl.id = `colorpattern-${xory}`;
+			liEl.classList.add(`colorpattern-${xory}-${pattern}`);
+			liEl.dataset.name = pattern;
+			liEl.style.display = "flex";
+			liEl.style.flex = "grow";
+			liEl.classList.add("hoverGrow", "shadow");
+			liEl.style.margin = "5px";
+			liEl.title = pattern;
+	
+			colorpatterns[pattern].forEach(color => {
+				const colEl = document.createElement('span');
+				colEl.style.flex = 1;
+				colEl.style.height = '25px';
+				colEl.style.backgroundColor = color;
+	
+				liEl.appendChild(colEl);
+			});
+			div.appendChild(liEl);
+			
+		}
+		return div;
 	}

-	updateActiveColor(document.querySelector(`.colorpattern-${selectedColorPattern}`));
+	const x = create("x");
+	colorPatternsElX.append(x);
+	const y = create("y");
+	colorPatternsElY.append(y);
+
+	updateActiveColor(document.querySelector(`.colorpattern-x-${selectedColorPatternX}`));
+	updateActiveColor(document.querySelector(`.colorpattern-y-${selectedColorPatternY}`));
 }

 function updateActiveColor(activeItem) {
-	const actives = document.querySelectorAll('#colorpattern.active');
+	/*const actives = document.querySelectorAll('#colorpattern.active');
 	actives.forEach(item => item.classList.remove('active'));
-	activeItem.classList.add('active');
+	activeItem.classList.add('active');*/
 }

 function getRandomColor() {
@@ -227,9 +239,16 @@ $('#export_png').on('click', () => {
 });

 // == listen on click on colors
-colorPaternsElX.on('click', (e) => {
+colorPatternsElX.on('click', (e) => {
 	if (e.target.parentNode.dataset.name) {
-		selectedColorPattern = e.target.parentNode.dataset.name;
+		selectedColorPatternX = e.target.parentNode.dataset.name;
+		updateActiveColor(e.target.parentNode);
+		pattern = generateCanvas(targetCanvas);
+	}
+});
+colorPatternsElY.on('click', (e) => {
+	if (e.target.parentNode.dataset.name) {
+		selectedColorPatternY = e.target.parentNode.dataset.name;
 		updateActiveColor(e.target.parentNode);
 		pattern = generateCanvas(targetCanvas);
 	}
@@ -241,8 +260,10 @@ $('#generate_seed').on('click', () => {
 });

 $('#generate_color').on('click', () => {
-	selectedColorPattern = generateRandColor();
-	updateActiveColor(document.querySelector(`.colorpattern-${selectedColorPattern}`));
+	selectedColorPatternX = generateRandColor();
+	selectedColorPatternY = generateRandColor();
+	updateActiveColor(document.querySelector(`.colorpattern-x-${selectedColorPatternX}`));
+	updateActiveColor(document.querySelector(`.colorpattern-y-${selectedColorPatternY}`));
 	pattern = generateCanvas(targetCanvas);
 });

@@ -265,7 +286,7 @@ seed = generateSeed();
 for (let i = 2; i < 9; i=i*2) {
 	for (let j = 1; j < 17; j++) {
 		//debugmode && console.log(`I=${i}, J=${j}`);
-		colorpatterns[`random-${i}-${j}`] = generateRandomColorArray(i, j);
+		colorpatterns[`random-${i}-${j}`] = generateRandomColorArray(i);
 	}
 }

--- a/js/resolutions.json
+++ b/js/resolutions.json
@@ -0,0 +1,45 @@
+{
+    "resolutions": [
+        {
+            "name": "1:1",
+            "x": "512",
+            "y": "512"
+        },
+        {
+            "name": "1:1",
+            "x": "1024",
+            "y": "1024"
+        },
+        {
+            "name": "1:1",
+            "x": "2048",
+            "y": "2048"
+        },
+        {
+            "name": "1:1",
+            "x": "4096",
+            "y": "4096"
+        },
+        {
+            "name": "8K Fulldome",
+            "x": "8192",
+            "y": "8192"
+        },
+
+        {
+            "name": "16:9",
+            "x": "1920",
+            "y": "1080"
+        },
+        {
+            "name": "QWXGA",
+            "x": "2048",
+            "y": "2252"
+        },
+        {
+            "name": "",
+            "x": "2560",
+            "y": "1440"
+        }
+    ]
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,15 @@
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
    "aproba": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -52,11 +61,37 @@
        "readable-stream": "^3.6.0"
      }
    },
+    "async": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
    "balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
+    "basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.2"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
+      }
+    },
    "bootstrap": {
      "version": "5.1.3",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
@@ -71,6 +106,16 @@
        "concat-map": "0.0.1"
      }
    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
    "canvas": {
      "version": "2.9.0",
      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.9.0.tgz",
@@ -81,6 +126,16 @@
        "simple-get": "^3.0.3"
      }
    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
    "chownr": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -91,6 +146,21 @@
      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
    "color-support": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -106,6 +176,12 @@
      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
    },
+    "corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
+      "dev": true
+    },
    "debug": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -142,6 +218,18 @@
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "dev": true
+    },
    "fs-minipass": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -155,6 +243,12 @@
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
    "gauge": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
@@ -171,6 +265,17 @@
        "wide-align": "^1.1.2"
      }
    },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
    "glob": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -184,11 +289,79 @@
        "path-is-absolute": "^1.0.0"
      }
    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
+    },
    "has-unicode": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
+    "html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "^2.0.0"
+      }
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-server": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.0.tgz",
+      "integrity": "sha512-5lYsIcZtf6pdR8tCtzAHTWrAveo4liUlJdWc7YafwK/maPgYHs+VNP6KpCClmUnSorJrARVMXqtT055zBv11Yg==",
+      "dev": true,
+      "requires": {
+        "basic-auth": "^2.0.1",
+        "chalk": "^4.1.2",
+        "corser": "^2.0.1",
+        "he": "^1.2.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy": "^1.18.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.2.5",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.28",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0",
+        "url-join": "^4.0.1"
+      }
+    },
    "https-proxy-agent": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
@@ -198,6 +371,15 @@
        "debug": "4"
      }
    },
+    "iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      }
+    },
    "inflight": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -222,6 +404,12 @@
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
    "lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -245,6 +433,12 @@
        }
      }
    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true
+    },
    "mimic-response": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
@@ -258,6 +452,12 @@
        "brace-expansion": "^1.1.7"
      }
    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
    "minipass": {
      "version": "3.1.6",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
@@ -322,6 +522,12 @@
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
+    "object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "dev": true
+    },
    "once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -330,11 +536,57 @@
        "wrappy": "1"
      }
    },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
    },
+    "portfinder": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
+      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.2",
+        "debug": "^3.1.1",
+        "mkdirp": "^0.5.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        }
+      }
+    },
+    "qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dev": true,
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
    "readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -345,6 +597,12 @@
        "util-deprecate": "^1.0.1"
      }
    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
+      "dev": true
+    },
    "rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -358,6 +616,18 @@
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=",
+      "dev": true
+    },
    "semver": {
      "version": "7.3.5",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -371,6 +641,17 @@
      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
    "signal-exit": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -417,6 +698,15 @@
        "ansi-regex": "^5.0.1"
      }
    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
    "tar": {
      "version": "6.1.11",
      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
@@ -445,6 +735,21 @@
        "delaunator": "^4.0.1"
      }
    },
+    "union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "requires": {
+        "qs": "^6.4.0"
+      }
+    },
+    "url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true
+    },
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -455,6 +760,15 @@
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
    },
+    "whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.6.3"
+      }
+    },
    "whatwg-url": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
  "version": "1.0.0",
  "description": "Trigen, a FOSS UI for trianglify.",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "http-server"
  },
  "repository": {
    "type": "git",
@@ -15,5 +16,8 @@
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "trianglify": "^4.1.1"
+  },
+  "devDependencies": {
+    "http-server": "^14.1.0"
  }
 }