ocr

5 files changed, 79 insertions, 19 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 697a8d5f..d095ed56 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -506,7 +506,7 @@
           </div>
         </div>
       </li>
-      <li class="right"><a class="menu-button" href="#">Paste</a>
+      <li class="right"><a class="menu-button" href="#"><img class="feature-disabled" data-dont-hide-menu id="stream-ocr-led" src="/share/svg/led-gear.svg">Text</a>
         <div class="menu" data-dont-hide-menu>
           <div class="text"><b>Paste text as keypress sequence<br></b><sub>Please note that PiKVM cannot switch the keyboard layout</sub></div>
           <hr>
@@ -535,6 +535,35 @@
                       </td>
                 </tr>
               </table>
+          <div class="feature-disabled" id="stream-ocr">
+            <hr><br>
+            <hr>
+            <div class="text"><b>Text recognition<br></b><sub><a target="_blank" href="https://docs.pikvm.org/ocr">OCR</a> works locally on PiKVM</sub></div>
+            <hr>
+            <table class="kv">
+              <tr>
+                <td>
+                  <button data-force-hide-menu id="stream-ocr-button">&bull; Select area</button>
+                </td>
+                <td>for</td>
+                <td>
+                  <select id="stream-ocr-lang-selector"></select>
+                </td>
+                <td>text recognition</td>
+              </tr>
+            </table>
+            <table class="kv">
+              <tr>
+                <td colspan="4">&bull; Press <b>Enter</b> to recognize and copy text to clipboard</td>
+              </tr>
+              <tr>
+                <td colspan="4">&bull; Press <b>Esc</b> to cancel selection</td>
+              </tr>
+              <tr>
+                <td></td>
+              </tr>
+            </table>
+          </div>
         </div>
       </li> 
       <li class="right"><a class="menu-button" href="#">Shortcuts</a>
@@ -588,6 +617,9 @@
         <div class="menu" data-dont-hide-menu id="gpio-menu"></div>
       </li>
     </ul>
+    <div class="window" id="stream-ocr-window">
+      <div class="hidden" id="stream-ocr-selection"></div>
+    </div>
     <div class="window window-resizable" id="stream-window">
       <div class="window-header" id="stream-window-header">
         <div class="window-grab">MJPEG</div>
diff --git a/web/kvm/navbar-paste.pug b/web/kvm/navbar-paste.pug
deleted file mode 100644
index 44feac87..00000000
--- a/web/kvm/navbar-paste.pug
+++ /dev/null
@@ -1,17 +0,0 @@
-li(class="right")
-	a(class="menu-button" href="#") Paste
-	div(data-dont-hide-menu class="menu")
-		div(class="text")
-			b Paste text as keypress sequence#[br]
-			sub Please note that PiKVM cannot switch the keyboard layout
-		hr
-		div(class="text")
-			textarea(id="hid-pak-text" placeholder="Enter your text here")
-		table(class="kv")
-			tr
-				td
-					button(disabled data-force-hide-menu id="hid-pak-button") &bull; Paste
-				td using host keymap
-				td
-					select(id="hid-pak-keymap-selector")
-		+menu_switch("hid-pak-ask-switch", "Ask paste confirmation", true, true)
diff --git a/web/kvm/navbar-text.pug b/web/kvm/navbar-text.pug
new file mode 100644
index 00000000..4fe4f38d
--- /dev/null
+++ b/web/kvm/navbar-text.pug
@@ -0,0 +1,42 @@
+li(class="right")
+	a(class="menu-button" href="#")
+		+navbar_led("stream-ocr-led", "led-gear", "feature-disabled")
+		| Text
+	div(data-dont-hide-menu class="menu")
+		div(class="text")
+			b Paste text as keypress sequence#[br]
+			sub Please note that PiKVM cannot switch the keyboard layout
+		hr
+		div(class="text")
+			textarea(id="hid-pak-text" placeholder="Enter your text here")
+		table(class="kv")
+			tr
+				td
+					button(disabled data-force-hide-menu id="hid-pak-button") &bull; Paste
+				td using host keymap
+				td
+					select(id="hid-pak-keymap-selector")
+		+menu_switch("hid-pak-ask-switch", "Ask paste confirmation", true, true)
+		div(id="stream-ocr" class="feature-disabled")
+			hr
+			br
+			hr
+			div(class="text")
+				b Text recognition#[br]
+				sub #[a(target="_blank" href="https://docs.pikvm.org/ocr") OCR] works locally on PiKVM
+			hr
+			table(class="kv")
+				tr
+					td
+						button(data-force-hide-menu id="stream-ocr-button") &bull; Select area
+					td for
+					td
+						select(id="stream-ocr-lang-selector")
+					td text recognition
+			table(class="kv")
+				tr
+					td(colspan="4") &bull; Press #[b Enter] to recognize and copy text to clipboard
+				tr
+					td(colspan="4") &bull; Press #[b Esc] to cancel selection
+				tr
+					td
diff --git a/web/kvm/navbar.pug b/web/kvm/navbar.pug
index cae4d8e9..3974e319 100644
--- a/web/kvm/navbar.pug
+++ b/web/kvm/navbar.pug
@@ -38,6 +38,6 @@ ul(id="navbar")
 	include navbar-atx.pug
 	include navbar-msd.pug
 	include navbar-macro.pug
-	include navbar-paste.pug
+	include navbar-text.pug
 	include navbar-shortcuts.pug
 	include navbar-gpio.pug
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index 36bca291..2520b2b5 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -1,3 +1,6 @@
+div(id="stream-ocr-window" class="window")
+	div(id="stream-ocr-selection" class="hidden")
+
 div(id="stream-window" class="window window-resizable")
 	div(id="stream-window-header" class="window-header")
 		div(class="window-grab") MJPEG