Initial new settings page test commit

2021-10-07 23:09:23 +02:00 · 2021-10-07 23:09:23 +02:00 · ec9859ee41
commit ec9859ee41
parent cbb12e1b7c
4 changed files with 197 additions and 0 deletions
--- a/wled00/data/cfg.css
+++ b/wled00/data/cfg.css
@ -0,0 +1,120 @@
+@font-face {
+	font-family: "CIcons";
+	src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
+}
+
+:root {
+	--c-1: #111;
+	--c-f: #fff;
+	--c-2: #222;
+	--c-3: #333;
+	--c-4: #444;
+	--c-5: #555;
+	--c-6: #666;
+	--c-8: #888;
+	--c-b: #bbb;
+	--c-c: #ccc;
+	--c-e: #eee;
+	--c-d: #ddd;
+	--c-r: #831;
+}
+
+html {
+	touch-action: manipulation;
+}
+
+body {
+	margin: 0;
+	background-color: var(--c-2);
+	font-family: Helvetica, Verdana, sans-serif;
+	font-size: 17px;
+	color: var(--c-f);
+	-webkit-touch-callout: none;
+		-webkit-user-select: none;
+			 -moz-user-select: none;
+				-ms-user-select: none;
+						user-select: none;
+	-webkit-tap-highlight-color: transparent;
+  scrollbar-width: 6px;
+  scrollbar-color: var(--c-sb) transparent;
+}
+
+html,
+body {
+	height: 100%;
+	width: 100%;
+	position: fixed;
+	overscroll-behavior: none;
+}
+
+.icons {
+	font-family: "CIcons";
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	display: inline-block;
+}
+
+#header {
+  width: 100%;
+  background-color: var(--c-3);
+  height: 45px;
+}
+
+#menu {
+  height: calc(100% - 45px);
+  background-color: var(--c-3);
+  width: 180px;
+}
+
+.entry {
+  height: 45px;
+  color: var(--c-b);
+}
+
+.entry:hover {
+  color: var(--c-f);
+  background-color: var(--c-4);
+}
+
+.e-icon {
+  padding: 10px;
+  display: inline-block;
+  width: 45px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.e-label {
+  display: inline-block;
+  height: 45px;
+  vertical-align: top;
+  padding: 14px 0;
+  box-sizing: border-box;
+}
+
+.btn {
+  padding: 9px;
+  color: var(--c-b);
+  box-sizing: border-box;
+}
+
+.btn:hover {
+  color: var(--c-f);
+  background-color: var(--c-4);
+}
+
+.save {
+  float: right;
+  height: 100%;
+}
+
+.b-icon {
+  display: inline-block;
+}
+
+.b-label {
+  display: inline-block;
+  vertical-align: top;
+  padding: 4px;
+}
--- a/wled00/data/cfg.htm
+++ b/wled00/data/cfg.htm
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+	<meta charset="utf-8">
+	<meta name="theme-color" content="#222222">
+  <link rel="stylesheet" href="cfg.css">
+</head>
+<body>
+  <div id="header">
+    <div class="e-icon"><i class="icons">&#xe90a;</i></div><div class="l e-label" id="h-cfg"></div>
+    <div class="btn save"><div class="b-icon"><i class="icons">&#xe905;</i></div><div class="l b-label" id="b-save"></div></div>
+  </div>
+  <div id="menu">
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe90c;</i></div><div class="l e-label" id="e-nw"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe90a;</i></div><div class="l e-label" id="e-hw"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe904;</i></div><div class="l e-label" id="e-ui"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe906;</i></div><div class="l e-label" id="e-if"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe90b;</i></div><div class="l e-label" id="e-tm"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe90a;</i></div><div class="l e-label" id="e-dx"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe903;</i></div><div class="l e-label" id="e-sr"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe907;</i></div><div class="l e-label" id="e-um"></div></div>
+    <div class="entry"><div class="e-icon"><i class="icons">&#xe909;</i></div><div class="l e-label" id="e-ab"></div></div>
+  </div>
+  <script src="cfg_lang.js"></script>
+  <script src="cfg.js"></script>
+</body>
+</html>
--- a/wled00/data/cfg.js
+++ b/wled00/data/cfg.js
@ -0,0 +1,25 @@
+var d = document;
+
+//startup, called on page load
+function S() {
+  //populate labels
+  var l = d.getElementsByClassName("l");
+  for (var i=0;i<l.length;i++) {
+    if (lang.labels) {
+      var t = lang.labels[l[i].id];
+      if (t) l[i].textContent = t;
+      else l[i].textContent = l[i].id;
+    } else {
+      //invalid or missing language json
+    }
+  }
+}
+
+//toggle between hidden and 100% width (screen < ? px) 
+//toggle between icons-only and 100% width (screen < ?? px)
+//toggle between icons-only and ? px (screen >= ?? px)
+function menu() {
+
+}
+
+S();
--- a/wled00/data/cfg_lang.js
+++ b/wled00/data/cfg_lang.js
@ -0,0 +1,24 @@
+//This file contains just the JSON definition for translatable strings.
+//A JSON file should be auto-embedded in cfg.js in the future, replacing this file
+
+var lang = 
+{
+  "labels":{
+    "h-cfg":" ",
+
+    "e-bk":"Back",
+    "e-nw":"Network",
+    "e-hw":"Hardware",
+    "e-ui":"Customization",
+    "e-if":"Interfaces",
+    "e-tm":"Schedules",
+    "e-sr":"Sound Reactive",
+    "e-um":"Usermods",
+    "e-dx":"DMX Out",
+    "e-ab":"About",
+    "e-up":"Update",
+    "e-rb":"Reboot",
+
+    "b-save":"Save"
+  }
+}