Split up gradient editor into html+css+js. Added export to glsl function for use with OBS filter for thermal camera

2026-02-07 15:14:59 +01:00
parent 8146f912a8
commit b5fc8d0de4
3 changed files with 638 additions and 336 deletions
--- a/standalone/gradient-editor.css
+++ b/standalone/gradient-editor.css
@@ -0,0 +1,172 @@
+:root {
+  --bg: #0b0b10;
+  --panel: #151722;
+  --muted: #8f95b2;
+  --text: #e9ecff;
+  --accent: #5a67ff;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px / 1.5 system-ui, Segoe UI, Roboto, Inter, Arial, sans-serif;
+}
+
+.wrap {
+  max-width: 980px;
+  margin: 24px auto;
+  padding: 16px;
+}
+
+h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 12px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 16px;
+}
+
+.card {
+  background: var(--panel);
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
+}
+
+canvas {
+  display: block;
+  border-radius: 10px;
+}
+
+#gradientCanvas {
+  width: 100%;
+  height: 96px;
+  background: #111;
+}
+
+#picker {
+  width: 100%;
+  height: 180px;
+  cursor: crosshair;
+}
+
+.toolbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 0;
+}
+
+.btn {
+  background: #23263a;
+  border: 1px solid #2f3350;
+  color: var(--text);
+  padding: 6px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 6px;
+}
+
+th,
+td {
+  font-size: 13px;
+}
+
+th {
+  color: var(--muted);
+  font-weight: 600;
+  text-align: left;
+}
+
+tr {
+  background: #1a1d2c;
+}
+
+tr.sel {
+  outline: 2px solid var(--accent);
+}
+
+td {
+  padding: 8px;
+}
+
+input[type="text"],
+input[type="number"] {
+  width: 100%;
+  box-sizing: border-box;
+  background: #0e1120;
+  border: 1px solid #2b3050;
+  color: var(--text);
+  border-radius: 6px;
+  padding: 6px 8px;
+}
+
+.swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  border: 1px solid #00000055;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.row-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.small {
+  font-size: 12px;
+}
+
+.export-form {
+  margin: 0;
+}
+
+
+.export-dialog {
+  width: min(90vw, 1200px);
+  overscroll-behavior: contain;
+}
+
+.export-dialog textarea {
+  width: 100%;
+  height: 60vh;
+  box-sizing: border-box;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.4;
+  padding: 10px;
+  resize: vertical;
+
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.export-toolbar {
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+