From f4074fb9394b93562854a74709ef4deec503d950 Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Wed, 21 Sep 2022 17:48:29 +0200 Subject: [PATCH 1/9] . --- sd-card/html/index.html | 165 +++++--------------- sd-card/html/index_configure.html | 169 --------------------- sd-card/html/style.css | 240 ++++++++++++++++++++++++------ 3 files changed, 234 insertions(+), 340 deletions(-) delete mode 100644 sd-card/html/index_configure.html diff --git a/sd-card/html/index.html b/sd-card/html/index.html index bcc47493..a6395021 100644 --- a/sd-card/html/index.html +++ b/sd-card/html/index.html @@ -2,118 +2,16 @@ -AI on the edge +jomjol - AI on the edge - - + + @@ -126,36 +24,45 @@ li.dropdown { - + -Loading version... - diff --git a/sd-card/html/index_configure.html b/sd-card/html/index_configure.html deleted file mode 100644 index 1f9406b9..00000000 --- a/sd-card/html/index_configure.html +++ /dev/null @@ -1,169 +0,0 @@ - - - - -AI on the edge - - - - - - - -
- - - - -

Digitizer - Configure

-

An ESP32 all inclusive neural network recognition system for meter digitalization

-
- - - - - -Loading version... - - - - - - - -
- - - diff --git a/sd-card/html/style.css b/sd-card/html/style.css index 4d8db3eb..f1450a3a 100644 --- a/sd-card/html/style.css +++ b/sd-card/html/style.css @@ -18,7 +18,7 @@ body, html { .iframe { flex-grow: 1; - margin: 5px 7px 4px 0px; + margin: 5px 0px 4px 0px; padding: 0; border: 2px solid black; } @@ -41,60 +41,216 @@ p { font-size: 1em; } -ul { - list-style-type: none; - margin: 0; - padding: 0; - overflow: hidden; + + +.menu{ + margin:0px; + padding:0px; + font-size:18px; + font-weight:normal; +/* color:#6D6D6D; */ +/* height: 50px; */ +} + +.menu ul{ + height:50px; + list-style:none; background-color: #333; - width:1000px; -} - -li { - float: left; - font-family: arial; - font-size: 18px; -} - -li a, .dropbtn { - display: inline-block; - color: white; - text-align: center; +/* color: white; */ padding: 14px 16px; - text-decoration: none; } -li a:hover, .dropdown:hover .dropbtn { - background-color: red; +.menu li{ + float:left; + padding:0px; } - -li.dropdown { + +.menu li a{ + color:white; +/* display:block; */ display: inline-block; +/* font-weight:normal; */ + line-height:50px; +/* font-size: 18px; */ + margin:0px; + padding:0px 25px; + text-align:center; + text-decoration:none; } -.dropdown-content { - display: none; - position: absolute; - background-color: #f9f9f9; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - font-family: arial; + +/*.menu { + margin: 0px; + padding: 0px; + font-family: "Times New Roman"; + font-size: 14px; + font-weight: bold; + color: #6D6D6D; +}*/ + +.menu ul { + height: 50px; + list-style: none; + margin: 0; + padding: 0; } -.dropdown-content a { - color: black; - padding: 12px 16px; - text-decoration: none; - display: block; - text-align: left; +.menu li { + float: left; + padding: 0px; } -.dropdown-content a:hover { - color: white; +.menu li a { + color: white; + display: block; + font-weight: normal; + line-height: 50px; + margin: 0px; + padding: 0px 25px; + text-align: center; + text-decoration: none; +} + +.menu li a:hover, .menu ul li:hover a{ + color:white; background-color: red; + + display: inline-block; +/* height: 50px; */ + text-decoration:none; +/* overflow: hidden; */ + +/* display: block; */ + margin:0px; + padding:0px 25px; + +/* line-height:50px; + font-size: 18px; + margin:0px; + padding:0px 25px;*/ } -.dropdown:hover .dropdown-content { +.menu li ul{ + background: white; + display:none; + height:auto; + padding:0px; + margin:0px; + border:0px; + position:absolute; + width: 210px; /*160px + 50px; */ +/* z-index:200; */ + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); +} + +.menu li:hover ul{ + display:block; +} + +.menu li li { + display:block; + float:none; + margin:0px; + padding:0px; + width:160px; + color: black; + background-color: blue; +} + +.menu li:hover li a{ + background:none; + color: black; + background-color: white; +} + +.menu li ul a{ + display:block; + height:50px; + font-style:normal; + margin:0px; + padding:0px 10px 0px 15px; + text-align:left; + width:160px; +/* background-color: blue; */ +} + +.menu li ul a:hover, +.menu li ul li:hover, +.menu li ul li ul a:hover, +.menu li ul li ul li:hover{ + border:0px; + color:#ffffff; + text-decoration:none; + color:white; + background-color: red; + width:160px; +} + +.menu li ul li ul li ul a:hover, +.menu li ul li ul li ul li:hover +{ + border:0px; + color:#ffffff; + text-decoration:none; + color:white; + background-color: green; + width:160px; +} + +.menu p{ + clear:left; + color: green; +} + +.menu ul li ul li { + position: relative; +} + +.menu ul li ul li ul, .menu ul li:hover ul li ul { + display: none; + margin-left:50px; +} + +.menu ul li ul li:hover ul { display: block; -} + position: absolute; + left: 100%; + top: 0; +} + +.menu ul li ul li:hover ul li a { + color: black; +} + +.menu ul li ul li:hover ul li a:hover { + color: black; +} + + +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + color: white; +} + +.right { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + + position: absolute; + right: -40px; + top: 20px; + width:0px; + height:0px; +} + +.down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + border-bottom: solid white; + border-right: solid white; + margin: 0px 0px 2px 5px; + +} From 1c9cd46d881a8710d85084e5edb1b2fa5ae0bf8f Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Wed, 21 Sep 2022 17:51:14 +0200 Subject: [PATCH 2/9] . --- sd-card/html/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sd-card/html/style.css b/sd-card/html/style.css index f1450a3a..4b840d88 100644 --- a/sd-card/html/style.css +++ b/sd-card/html/style.css @@ -160,7 +160,7 @@ p { .menu li:hover li a{ background:none; color: black; - background-color: white; + background-color: #f1f1f1; } .menu li ul a{ From b3b1c18ff51bddff61b38348133d0d23edd14653 Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Wed, 21 Sep 2022 17:51:53 +0200 Subject: [PATCH 3/9] . --- sd-card/html/style.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/sd-card/html/style.css b/sd-card/html/style.css index 4b840d88..bc16e07e 100644 --- a/sd-card/html/style.css +++ b/sd-card/html/style.css @@ -154,7 +154,6 @@ p { padding:0px; width:160px; color: black; - background-color: blue; } .menu li:hover li a{ @@ -171,7 +170,6 @@ p { padding:0px 10px 0px 15px; text-align:left; width:160px; -/* background-color: blue; */ } .menu li ul a:hover, @@ -193,7 +191,6 @@ p { color:#ffffff; text-decoration:none; color:white; - background-color: green; width:160px; } From 6631ebc12aa7b74bc6caa4f37d99879f3360e42e Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Wed, 21 Sep 2022 23:02:12 +0200 Subject: [PATCH 4/9] . --- sd-card/html/style.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/sd-card/html/style.css b/sd-card/html/style.css index bc16e07e..ec40062b 100644 --- a/sd-card/html/style.css +++ b/sd-card/html/style.css @@ -142,7 +142,7 @@ p { /* z-index:200; */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } - + .menu li:hover ul{ display:block; } @@ -153,7 +153,6 @@ p { margin:0px; padding:0px; width:160px; - color: black; } .menu li:hover li a{ @@ -172,26 +171,31 @@ p { width:160px; } +.menu li:hover li a{ + background:none; +} + .menu li ul a:hover, .menu li ul li:hover, .menu li ul li ul a:hover, .menu li ul li ul li:hover{ border:0px; - color:#ffffff; text-decoration:none; color:white; background-color: red; width:160px; +/* margin: 0; */ } .menu li ul li ul li ul a:hover, .menu li ul li ul li ul li:hover { border:0px; - color:#ffffff; text-decoration:none; color:white; width:160px; +/* width:260px; */ +/* margin: 0; */ } .menu p{ @@ -223,7 +227,7 @@ p { color: black; } - +/* .arrow { border: solid black; border-width: 0 3px 3px 0; @@ -249,5 +253,4 @@ p { border-bottom: solid white; border-right: solid white; margin: 0px 0px 2px 5px; - -} +}*/ From 7fc9676385e71163ccfe977cbf5ca7da2ca734e4 Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Thu, 22 Sep 2022 00:00:54 +0200 Subject: [PATCH 5/9] . --- sd-card/html/style.css | 216 ++++++++++++++++------------------------- 1 file changed, 83 insertions(+), 133 deletions(-) diff --git a/sd-card/html/style.css b/sd-card/html/style.css index ec40062b..2af8cf0e 100644 --- a/sd-card/html/style.css +++ b/sd-card/html/style.css @@ -20,7 +20,7 @@ body, html { flex-grow: 1; margin: 5px 0px 4px 0px; padding: 0; - border: 2px solid black; + border: 2px solid #333; /* black */ } h1 { @@ -43,50 +43,20 @@ p { -.menu{ - margin:0px; - padding:0px; - font-size:18px; - font-weight:normal; -/* color:#6D6D6D; */ -/* height: 50px; */ -} - -.menu ul{ - height:50px; - list-style:none; - background-color: #333; -/* color: white; */ - padding: 14px 16px; -} - -.menu li{ - float:left; - padding:0px; -} - -.menu li a{ - color:white; -/* display:block; */ - display: inline-block; -/* font-weight:normal; */ - line-height:50px; -/* font-size: 18px; */ - margin:0px; - padding:0px 25px; - text-align:center; - text-decoration:none; -} -/*.menu { + + + +.menu { margin: 0px; padding: 0px; - font-family: "Times New Roman"; - font-size: 14px; + font-family: "Arial"; + font-size: 18px; font-weight: bold; - color: #6D6D6D; -}*/ + width: 1008qpx; + background: #333; /* black */ +} .menu ul { height: 50px; @@ -100,8 +70,10 @@ p { padding: 0px; } +/* Top Menu */ .menu li a { color: white; + background: #333; /* black */ display: block; font-weight: normal; line-height: 50px; @@ -111,125 +83,103 @@ p { text-decoration: none; } -.menu li a:hover, .menu ul li:hover a{ - color:white; - background-color: red; - - display: inline-block; -/* height: 50px; */ - text-decoration:none; -/* overflow: hidden; */ - -/* display: block; */ - margin:0px; - padding:0px 25px; - -/* line-height:50px; - font-size: 18px; - margin:0px; - padding:0px 25px;*/ +/* Selected top menu, 1th submenu */ +.menu li a:hover, +.menu ul li:hover a { + background: red; + color: white; + text-decoration: none; } -.menu li ul{ - background: white; - display:none; - height:auto; - padding:0px; - margin:0px; - border:0px; - position:absolute; - width: 210px; /*160px + 50px; */ -/* z-index:200; */ - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); +.menu li ul { + background: #f9f9f9; /* light gray */ + display: none; + height: auto; + padding: 0px; + margin: 0px; + border: 0px; + position: absolute; + width: 210px; + z-index: 200; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } -.menu li:hover ul{ - display:block; +.menu li:hover ul { + display: block; + } - + .menu li li { - display:block; - float:none; - margin:0px; - padding:0px; - width:160px; + display: block; + float: none; + margin: 0px; + padding: 0px; + width: 210px; } -.menu li:hover li a{ - background:none; - color: black; - background-color: #f1f1f1; +/* 1th menu */ +.menu li:hover li a { + background: #f9f9f9; /* light gray */ + color: #333; /* black */ } -.menu li ul a{ - display:block; - height:50px; - font-style:normal; - margin:0px; - padding:0px 10px 0px 15px; - text-align:left; - width:160px; +.menu li ul a { + display: block; + height: 50px; +/* font-style: normal; */ + margin: 0px; + padding: 0px 10px 0px 15px; + text-align: left; } -.menu li:hover li a{ - background:none; +/* Selected 1th menu */ +.menu li ul a:hover, +.menu li ul li:hover a { + background: red; + border: 0px; + color: white; + text-decoration: none; } -.menu li ul a:hover, -.menu li ul li:hover, -.menu li ul li ul a:hover, -.menu li ul li ul li:hover{ - border:0px; - text-decoration:none; - color:white; - background-color: red; - width:160px; -/* margin: 0; */ +.menu p { + clear: left; } -.menu li ul li ul li ul a:hover, -.menu li ul li ul li ul li:hover -{ - border:0px; - text-decoration:none; - color:white; - width:160px; -/* width:260px; */ -/* margin: 0; */ +.menu ul li ul li { + position: relative; } -.menu p{ - clear:left; - color: green; -} - -.menu ul li ul li { - position: relative; -} - -.menu ul li ul li ul, .menu ul li:hover ul li ul { - display: none; - margin-left:50px; +.menu ul li ul li ul, +.menu ul li:hover ul li ul { + display: none; } .menu ul li ul li:hover ul { - display: block; - position: absolute; - left: 100%; - top: 0; + display: block; + position: absolute; + left: 100%; + top: 0; } -.menu ul li ul li:hover ul li a { - color: black; +.menu ul li ul li:hover ul li a { + color: #333; /* black */ + background: #eeeeee; /*light gray */ } -.menu ul li ul li:hover ul li a:hover { - color: black; +.menu ul li ul li:hover ul li a:hover { + background: red; + color: white; } -/* + + + + + + + .arrow { - border: solid black; + border: solid #333; /* black */ border-width: 0 3px 3px 0; display: inline-block; padding: 3px; @@ -241,7 +191,7 @@ p { -webkit-transform: rotate(-45deg); position: absolute; - right: -40px; + right: 10px; top: 20px; width:0px; height:0px; @@ -253,4 +203,4 @@ p { border-bottom: solid white; border-right: solid white; margin: 0px 0px 2px 5px; -}*/ +} From a08a2334848da65508a7d7725575eddf4c172451 Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Thu, 22 Sep 2022 00:07:38 +0200 Subject: [PATCH 6/9] . --- sd-card/html/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/sd-card/html/index.html b/sd-card/html/index.html index a6395021..872f9d0a 100644 --- a/sd-card/html/index.html +++ b/sd-card/html/index.html @@ -2,7 +2,7 @@ -jomjol - AI on the edge +AI on the edge @@ -61,8 +61,11 @@ +Loading version... + From 19847652a9a9c070bce50b295d9be42f340c4db7 Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Thu, 22 Sep 2022 22:49:57 +0200 Subject: [PATCH 7/9] close menu on click --- sd-card/html/index.html | 64 +++++++++++++++++++++++++---------------- 1 file changed, 40 insertions(+), 24 deletions(-) diff --git a/sd-card/html/index.html b/sd-card/html/index.html index 872f9d0a..d68f0856 100644 --- a/sd-card/html/index.html +++ b/sd-card/html/index.html @@ -12,6 +12,22 @@ + + @@ -26,35 +42,35 @@
From 0fb192d79ec2337c6f825006d9e892236add1e63 Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Thu, 22 Sep 2022 22:54:01 +0200 Subject: [PATCH 8/9] fixed width --- sd-card/html/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sd-card/html/style.css b/sd-card/html/style.css index 2af8cf0e..c2b6c3e8 100644 --- a/sd-card/html/style.css +++ b/sd-card/html/style.css @@ -54,7 +54,7 @@ p { font-family: "Arial"; font-size: 18px; font-weight: bold; - width: 1008qpx; + width: 1008px; background: #333; /* black */ } From 711578d0a282879df018699a60ed3e5bf625dd93 Mon Sep 17 00:00:00 2001 From: George Ruinelli Date: Fri, 23 Sep 2022 00:02:50 +0200 Subject: [PATCH 9/9] fix closing of menu on mobile devices --- sd-card/html/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sd-card/html/index.html b/sd-card/html/index.html index d68f0856..f8dfc86a 100644 --- a/sd-card/html/index.html +++ b/sd-card/html/index.html @@ -19,9 +19,9 @@ [].forEach.call(document.querySelectorAll('.submenu'), function (el) { el.style.visibility = 'hidden'; }); + } - await new Promise(r => setTimeout(r, 100)); - + function resetMenu() { [].forEach.call(document.querySelectorAll('.submenu'), function (el) { el.style.visibility = 'visible'; }); @@ -40,7 +40,7 @@ -
+