mouse and keyboard settings with web GUI.

temuera · Feb 5, 2019 · 9e41615 · 9e41615
1 parent f28c744
commit 9e41615
Show file tree

Hide file tree

Showing 16 changed files with 5,873 additions and 938 deletions.
diff --git a/slave/assets/nonwin.html b/slave/assets/nonwin.html
@@ -10,7 +10,7 @@
 
 <body>
   <div class="box">
-      <ul>
+      <ul class="nav">
           <li><a href="/">Settings</a></li>
           <li><a href="/win">Win Mouse</a></li>
           <li><a href="/nonwin" class="active">Non-Win Mouse</a></li>

diff --git a/slave/assets/settings.html b/slave/assets/settings.html
diff --git a/slave/assets/style.css b/slave/assets/style.css
@@ -0,0 +1,257 @@
+
+html,
+body {
+  height: 100%;
+  margin: 0
+}
+
+.box {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+
+.box .row.header {
+  flex: 0 1 auto;
+  /* The above is shorthand for:
+  flex-grow: 0,
+  flex-shrink: 1,
+  flex-basis: auto
+  */
+}
+
+.box .row.content {
+  flex: 1 1 auto;
+  background-color: #666;
+}
+
+.box .row.footer {
+  flex: 0 1 40px;
+  text-align: center;
+  line-height: 40px;
+  background-color: #666;
+  font-size: 16px;
+
+}
+
+
+
+ul.nav {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #4CAF50;
+}
+
+.nav li {
+    float: left;
+}
+
+.nav li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 5px 16px;
+    text-decoration: none;
+}
+
+.nav li a:hover:not(.active) {
+    background-color: #666;
+}
+
+.active {
+    background-color: #4CAF50;
+}
+
+#CursorLayer{
+    background-color: #ffffff;
+    margin:0 auto;
+    cursor: crosshair;
+}
+#info{
+    font-size: 20px;
+    color: #fff;
+    animation:blinkingText 2s infinite;
+}
+@keyframes blinkingText{
+    0%{     color: #f00;    }
+    30%{    color: transparent; }
+    50%{   color: #f00;    }
+    100%{   color: #f00;    }
+}
+.table thead td, .table thead th {
+    border-width: 0 0 0px;
+    color: #7a7a7a;
+}
+h2{
+
+}
+.center{
+    text-align:center;
+}
+.right{
+    text-align:right;
+}
+.left{
+    text-align:left;
+}
+
+.fright{
+    float:right;
+}
+table.table th {
+    white-space: nowrap;
+    background:#efefef;
+}
+.table {
+    background-color: #fff;
+    color: #363636;
+    width:100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+tr:not(:first-child):hover{
+    background-color:#f1f1f1;
+}
+hr{
+    border:1px solid #ccc;
+}
+
+.btn{
+    text-align:center;display:block;width:16px;text-decoration: none;border: 1px solid #ccc;
+}
+
+ul.f{
+	width:100%;
+	margin-bottom:20px;
+	overflow:hidden;
+    border-top:1px solid #ccc;
+    background:#fff;
+}
+.f li{
+	line-height:1.5em;
+	border-bottom:1px solid #ccc;
+	float:left;
+	display:inline;
+}
+.f li.l	{ width:10%;}
+.f li.r	{ width:90%;}
+
+
+/* start keyboard by dazhou.net */
+
+ul {
+    list-style: none;
+    clear: both;
+    display: table;
+    width: 100%;
+
+    padding: 0;
+    margin: 0;
+}
+
+div label input {
+    margin-right: 100px;
+
+}
+
+body {
+    font-family: sans-serif;
+}
+
+.sectionleft,
+.sectionright {
+    display: table-cell;
+}
+
+.key {
+    margin: 2px;
+    display: table-cell;
+    font-size: 9px;
+    overflow: hidden;
+    text-align: center;
+    min-width: 25px;
+    padding: 1px;
+
+}
+
+.space {
+    min-width: 200px;
+}
+
+.enter {
+    min-width: 60px;
+}
+
+.shift {
+    min-width: 70px;
+}
+
+.key label {
+    float: left;
+    width: 100%;
+    -webkit-user-select: none;
+    /* Safari */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* IE10+/Edge */
+    user-select: none;
+    /* Standard */
+    background-color: #ccc;
+    border-radius: 4px;
+
+}
+
+.key label span {
+    text-align: center;
+    padding: 2px 2px;
+    display: block;
+    border-radius: 4px;
+
+}
+
+.key label input {
+    position: absolute;
+    top: -2000px;
+}
+
+.key input:hover+span {
+    background-color: #999;
+}
+
+.key input:checked+span {
+    background-color: #333;
+    color: #fff;
+}
+
+.key input:disabled:hover+span {
+    color: #888;
+    background-color: #ccc;
+}
+
+.key input:disabled+span {
+    color: #888;
+}
+
+.key input:checked:hover+span {
+    background-color: #666;
+    color: #fff;
+}
+
+hr {
+    border: none;
+    height: 1px;
+    /* Set the hr color */
+    color: #333;
+    /* old IE */
+    background-color: #333;
+    /* Modern Browsers */
+
+}
+
+/*end keyboard */
+
+.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:550px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}