switch

8 files changed, 320 insertions, 10 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 08093288..fbf9c5df 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -139,7 +139,7 @@
           </div>
         </li>
       </div>
-      <li class="right" id="system-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" id="stream-led" src="/share/svg/led-stream.svg"><img class="led-gray" id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg"><span>System</span></a>
+      <li class="right" id="system-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" id="stream-led" src="/share/svg/led-video.svg"><img class="led-gray" id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg"><span>System</span></a>
         <div class="menu" id="system-menu">
           <table class="kv">
             <tr>
@@ -792,7 +792,7 @@
           <hr>
           <div class="buttons">
             <div class="buttons-row">
-              <button class="row50" data-force-hide-menu data-shortcut="CapsLock">&bull; Caps Lock &nbsp;<img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"></button>
+              <button class="row50" data-force-hide-menu data-shortcut="CapsLock">&bull; Caps Lock &nbsp;<img class="inline-lamp-small hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"></button>
               <button class="row50" data-force-hide-menu data-shortcut="MetaLeft">&bull; Left Win</button>
             </div>
             <hr>
@@ -867,6 +867,36 @@
       <li class="right feature-disabled" id="gpio-dropdown"><a class="menu-button" id="gpio-menu-button" href="#"><span>GPIO</span></a>
         <div class="menu" id="gpio-menu"></div>
       </li>
+      <li class="right feature-disabled" id="switch-dropdown"><a class="menu-button" id="switch-menu-button" href="#"><img class="led-gray" id="switch-atx-power-led" src="/share/svg/led-atx-power.svg"><img class="led-gray" id="switch-atx-hdd-led" src="/share/svg/led-atx-hdd.svg"><span>Switch <i><sub id="switch-active-port"></sub></i></span></a>
+        <div class="menu" id="switch-menu">
+          <table style="border-spacing: 0px;">
+            <tr>
+              <td>
+                <div class="text"><b><a target="_blank" href="https://docs.pikvm.org/switch">PiKVM Switch</a> is attached<br></b><sub>Select a port or perform any available action like ATX click</sub></div>
+              </td>
+              <td>
+                <div class="text">
+                  <button class="small" data-force-hide-menu data-show-window="switch-window">&bull; Settings</button>
+                </div>
+              </td>
+            </tr>
+          </table>
+          <hr>
+              <table class="kv">
+                <tr>
+                      <td>Ask ATX click confirmation:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input checked type="checkbox" id="switch-atx-ask-switch">
+                          <label for="switch-atx-ask-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+              </table>
+          <hr>
+          <table class="kv" id="switch-chain"></table>
+        </div>
+      </li>
     </ul>
     <div class="window" id="stream-ocr-window">
       <div class="hidden" id="stream-ocr-selection"></div>
@@ -1150,7 +1180,7 @@
           </div>
           <div class="keypad-row">
                 <div class="key wide-2 left small" data-code="CapsLock">
-                  <div class="label"><img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
+                  <div class="label"><img class="inline-lamp-small hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
                   </div>
                 </div>
                 <div class="spacer"></div>
@@ -1325,7 +1355,7 @@
                 </div>
                 <div class="spacer-fixed"></div>
                 <div class="key small" data-code="ScrollLock">
-                  <div class="label"><img class="inline-lamp hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
+                  <div class="label"><img class="inline-lamp-small hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
                   </div>
                 </div>
                 <div class="spacer-fixed"></div>
@@ -1421,7 +1451,7 @@
           <hr>
           <div class="keypad-row">
                 <div class="key small" data-code="NumLock">
-                  <div class="label"><img class="inline-lamp hid-keyboard-num-led led-gray" src="/share/svg/led-square.svg"><br> NmLk
+                  <div class="label"><img class="inline-lamp-small hid-keyboard-num-led led-gray" src="/share/svg/led-square.svg"><br> NmLk
                   </div>
                 </div>
                 <div class="spacer-fixed"></div>
@@ -1627,7 +1657,7 @@
                 </div>
                 <div class="spacer"></div>
                 <div class="key small" data-code="ScrollLock">
-                  <div class="label"><img class="inline-lamp hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
+                  <div class="label"><img class="inline-lamp-small hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
                   </div>
                 </div>
                 <div class="spacer"></div>
@@ -1800,7 +1830,7 @@
           </div>
           <div class="keypad-row">
                 <div class="key wide-2 left small" data-code="CapsLock">
-                  <div class="label"><img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
+                  <div class="label"><img class="inline-lamp-small hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
                   </div>
                 </div>
                 <div class="spacer"></div>
@@ -1999,6 +2029,170 @@
         </div>
       </div>
     </div>
+    <div class="window" id="switch-window" style="width:min-content">
+      <div class="window-header">
+        <div class="window-grab">Switch settings</div>
+        <button class="window-button-close"><b>&times;</b></button>
+      </div>
+      <div class="tabs-box">
+            <input checked type="radio" name="switch-tab-button" id="switch-tab-edid-button">
+            <label for="switch-tab-edid-button">EDIDs collection</label>
+            <div class="tab">
+              <table>
+                <tr>
+                  <td colspan="2">
+                    <select id="switch-edid-selector" size="8"></select>
+                  </td>
+                  <td rowspan="2" style="vertical-align:top">
+                    <table class="kv">
+                      <tr>
+                        <td>Manufacturer:</td>
+                        <td class="value" id="switch-edid-info-mfc-id"></td>
+                      </tr>
+                      <tr>
+                        <td>Product ID:</td>
+                        <td class="value" id="switch-edid-info-product-id"></td>
+                      </tr>
+                      <tr>
+                        <td>Serial:</td>
+                        <td class="value" id="switch-edid-info-serial"></td>
+                      </tr>
+                      <tr>
+                        <td>Monitor name:</td>
+                        <td class="value" id="switch-edid-info-monitor-name"></td>
+                      </tr>
+                      <tr>
+                        <td>Extra serial:</td>
+                        <td class="value" id="switch-edid-info-monitor-serial"></td>
+                      </tr>
+                      <tr>
+                        <td>Audio enabled:</td>
+                        <td class="value" id="switch-edid-info-audio"></td>
+                      </tr>
+                      <tr>
+                        <td>Data:</td>
+                        <td>
+                          <button class="small" disabled id="switch-edid-copy-data-button">Copy</button>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <button id="switch-edid-add-button">Add new</button>
+                  </td>
+                  <td style="float:right">
+                    <button disabled id="switch-edid-remove-button">Remove</button>
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <input type="radio" name="switch-tab-button" id="switch-tab-colors-button">
+            <label for="switch-tab-colors-button">Color scheme</label>
+            <div class="tab">
+              <table>
+                <!--tr
+                td Role
+                td Color
+                td Brightness
+                td
+                td Reset
+                -->
+                <!--trtd 
+                <hr>
+                td 
+                <hr>
+                td 
+                <hr>
+                td
+                td 
+                <hr>
+                -->
+                <tr>
+                  <td style="white-space: nowrap">Selected port:</td>
+                  <td>
+                    <input type="color" id="switch-color-active-input">
+                  </td>
+                  <td>
+                    <input type="range" id="switch-color-active-brightness-slider" style="min-width:150px">
+                  </td>
+                  <td>&nbsp;&nbsp;&nbsp;</td>
+                  <td>
+                    <button class="small" id="switch-color-active-default-button" title="Reset default">&#8635;</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td style="white-space: nowrap">Inactive port:</td>
+                  <td>
+                    <input type="color" id="switch-color-inactive-input">
+                  </td>
+                  <td>
+                    <input type="range" id="switch-color-inactive-brightness-slider" style="min-width:150px">
+                  </td>
+                  <td>&nbsp;&nbsp;&nbsp;</td>
+                  <td>
+                    <button class="small" id="switch-color-inactive-default-button" title="Reset default">&#8635;</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td style="white-space: nowrap">Blinking beacon:</td>
+                  <td>
+                    <input type="color" id="switch-color-beacon-input">
+                  </td>
+                  <td>
+                    <input type="range" id="switch-color-beacon-brightness-slider" style="min-width:150px">
+                  </td>
+                  <td>&nbsp;&nbsp;&nbsp;</td>
+                  <td>
+                    <button class="small" id="switch-color-beacon-default-button" title="Reset default">&#8635;</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <hr>
+                  </td>
+                  <td>
+                    <hr>
+                  </td>
+                  <td>
+                    <hr>
+                  </td>
+                  <td></td>
+                  <td>
+                    <hr>
+                  </td>
+                </tr>
+                <tr>
+                  <td style="white-space: nowrap">Flashing downlink:</td>
+                  <td>
+                    <input type="color" id="switch-color-flashing-input">
+                  </td>
+                  <td>
+                    <input type="range" id="switch-color-flashing-brightness-slider" style="min-width:150px">
+                  </td>
+                  <td>&nbsp;&nbsp;&nbsp;</td>
+                  <td>
+                    <button class="small" id="switch-color-flashing-default-button" title="Reset default">&#8635;</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td style="white-space: nowrap">Bootloader mode:</td>
+                  <td>
+                    <input type="color" id="switch-color-bootloader-input">
+                  </td>
+                  <td>
+                    <input type="range" id="switch-color-bootloader-brightness-slider" style="min-width:150px">
+                  </td>
+                  <td>&nbsp;&nbsp;&nbsp;</td>
+                  <td>
+                    <button class="small" id="switch-color-bootloader-default-button" title="Reset default">&#8635;</button>
+                  </td>
+                </tr>
+              </table>
+            </div>
+      </div>
+    </div>
     <div class="window" id="about-window">
       <div class="window-header">
         <div class="window-grab">About</div>
diff --git a/web/kvm/navbar-shortcuts.pug b/web/kvm/navbar-shortcuts.pug
index 378fdc09..d020b415 100644
--- a/web/kvm/navbar-shortcuts.pug
+++ b/web/kvm/navbar-shortcuts.pug
@@ -9,7 +9,7 @@ li(id="shortcuts-dropdown" class="right")
 			div(class="buttons-row")
 				button(data-force-hide-menu data-shortcut="CapsLock" class="row50")
 					| &bull; Caps Lock &nbsp;
-					img(class="inline-lamp hid-keyboard-caps-led led-gray" src=`${svg_dir}/led-square.svg`)
+					img(class="inline-lamp-small hid-keyboard-caps-led led-gray" src=`${svg_dir}/led-square.svg`)
 				button(data-force-hide-menu data-shortcut="MetaLeft" class="row50") &bull; Left Win
 			hr
 			div(class="buttons-row")
diff --git a/web/kvm/navbar-switch.pug b/web/kvm/navbar-switch.pug
new file mode 100644
index 00000000..455daa6f
--- /dev/null
+++ b/web/kvm/navbar-switch.pug
@@ -0,0 +1,19 @@
+li(id="switch-dropdown" class="right feature-disabled")
+	a(class="menu-button" id="switch-menu-button" href="#")
+		+navbar_led("switch-atx-power-led", "led-atx-power")
+		+navbar_led("switch-atx-hdd-led", "led-atx-hdd")
+		span Switch #[i #[sub(id="switch-active-port") ]]
+	div(id="switch-menu" class="menu")
+		table(style="border-spacing: 0px;")
+			tr
+				td
+					div(class="text")
+						b #[a(target="_blank" href="https://docs.pikvm.org/switch") PiKVM Switch] is attached#[br]
+						sub Select a port or perform any available action like ATX click
+				td
+					div(class="text")
+						button(data-force-hide-menu data-show-window="switch-window" class="small") &bull; Settings
+		hr
+		+menu_switch("switch-atx-ask-switch", "Ask ATX click confirmation", true, true)
+		hr
+		table(id="switch-chain" class="kv")
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index 8112d441..62cbda25 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -1,7 +1,7 @@
 li(id="system-dropdown" class="right")
 	a(class="menu-button" href="#")
 		+navbar_led("link-led", "led-link")
-		+navbar_led("stream-led", "led-stream")
+		+navbar_led("stream-led", "led-video")
 		+navbar_led("hid-keyboard-led", "led-hid-keyboard")
 		+navbar_led("hid-mouse-led", "led-hid-mouse")
 		span System
diff --git a/web/kvm/navbar.pug b/web/kvm/navbar.pug
index b1c6b5eb..a9189b7d 100644
--- a/web/kvm/navbar.pug
+++ b/web/kvm/navbar.pug
@@ -51,3 +51,4 @@ ul(id="navbar")
 	include navbar-text.pug
 	include navbar-shortcuts.pug
 	include navbar-gpio.pug
+	include navbar-switch.pug
diff --git a/web/kvm/window-keyboard.pug b/web/kvm/window-keyboard.pug
index fdd00b15..ae1a1e1f 100644
--- a/web/kvm/window-keyboard.pug
+++ b/web/kvm/window-keyboard.pug
@@ -26,7 +26,7 @@ mixin empty(spacer, classes="", width=0)
 		div(class="spacer-fixed")
 
 mixin lamp(cls)
-	img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`)
+	img(class=`inline-lamp-small ${cls} led-gray` src=`${svg_dir}/led-square.svg`)
 
 div(id="keyboard-window" class="window")
 	div(id="keyboard-window-header" class="window-header")
diff --git a/web/kvm/window-switch.pug b/web/kvm/window-switch.pug
new file mode 100644
index 00000000..71c0e152
--- /dev/null
+++ b/web/kvm/window-switch.pug
@@ -0,0 +1,95 @@
+mixin switch_tab(name, title, checked=false)
+	- let button_id = `switch-tab-${name}-button`
+	input(checked=checked type="radio" name="switch-tab-button", id=button_id)
+	label(for=button_id) #{title}
+	div(class="tab")
+		block
+
+div(id="switch-window" class="window" style="width:min-content")
+	div(class="window-header")
+		div(class="window-grab") Switch settings
+		button(class="window-button-close") #[b &times;]
+
+	div(class="tabs-box")
+		+switch_tab("edid", "EDIDs collection", true)
+			table
+				tr
+					td(colspan="2")
+						select(id="switch-edid-selector" size="8")
+					td(rowspan="2" style="vertical-align:top")
+						table(class="kv")
+							tr
+								td Manufacturer:
+								td(id="switch-edid-info-mfc-id" class="value")
+							tr
+								td Product ID:
+								td(id="switch-edid-info-product-id" class="value")
+							tr
+								td Serial:
+								td(id="switch-edid-info-serial" class="value")
+							tr
+								td Monitor name:
+								td(id="switch-edid-info-monitor-name" class="value")
+							tr
+								td Extra serial:
+								td(id="switch-edid-info-monitor-serial" class="value")
+							tr
+								td Audio enabled:
+								td(id="switch-edid-info-audio" class="value")
+							tr
+								td Data:
+								td #[button(disabled id="switch-edid-copy-data-button" class="small") Copy]
+				tr
+					td #[button(id="switch-edid-add-button") Add new]
+					td(style="float:right") #[button(disabled id="switch-edid-remove-button") Remove]
+
+		+switch_tab("colors", "Color scheme")
+			table
+				//tr
+					td Role
+					td Color
+					td Brightness
+					td
+					td Reset
+				//tr
+					td #[hr]
+					td #[hr]
+					td #[hr]
+					td
+					td #[hr]
+				tr
+					td(style="white-space: nowrap") Selected port:
+					td #[input(type="color" id="switch-color-active-input")]
+					td #[input(type="range" id="switch-color-active-brightness-slider" style="min-width:150px")]
+					td &nbsp;&nbsp;&nbsp;
+					td #[button(id="switch-color-active-default-button" class="small" title="Reset default") &#8635;]
+				tr
+					td(style="white-space: nowrap") Inactive port:
+					td #[input(type="color" id="switch-color-inactive-input")]
+					td #[input(type="range" id="switch-color-inactive-brightness-slider" style="min-width:150px")]
+					td &nbsp;&nbsp;&nbsp;
+					td #[button(id="switch-color-inactive-default-button" class="small" title="Reset default") &#8635;]
+				tr
+					td(style="white-space: nowrap") Blinking beacon:
+					td #[input(type="color" id="switch-color-beacon-input")]
+					td #[input(type="range" id="switch-color-beacon-brightness-slider" style="min-width:150px")]
+					td &nbsp;&nbsp;&nbsp;
+					td #[button(id="switch-color-beacon-default-button" class="small" title="Reset default") &#8635;]
+				tr
+					td #[hr]
+					td #[hr]
+					td #[hr]
+					td
+					td #[hr]
+				tr
+					td(style="white-space: nowrap") Flashing downlink:
+					td #[input(type="color" id="switch-color-flashing-input")]
+					td #[input(type="range" id="switch-color-flashing-brightness-slider" style="min-width:150px")]
+					td &nbsp;&nbsp;&nbsp;
+					td #[button(id="switch-color-flashing-default-button" class="small" title="Reset default") &#8635;]
+				tr
+					td(style="white-space: nowrap") Bootloader mode:
+					td #[input(type="color" id="switch-color-bootloader-input")]
+					td #[input(type="range" id="switch-color-bootloader-brightness-slider" style="min-width:150px")]
+					td &nbsp;&nbsp;&nbsp;
+					td #[button(id="switch-color-bootloader-default-button" class="small" title="Reset default") &#8635;]
diff --git a/web/kvm/windows.pug b/web/kvm/windows.pug
index b2d32dad..7b20bc22 100644
--- a/web/kvm/windows.pug
+++ b/web/kvm/windows.pug
@@ -1,4 +1,5 @@
 include window-stream.pug
 include window-keyboard.pug
+include window-switch.pug
 include window-about.pug
 include window-webterm.pug