pikvm/pikvm#1207: Draw UI tips via meta.yaml

web/kvm/index.html

@@ -1999,7 +1999,12 @@
               <input checked type="radio" name="about-tab-button" id="about-tab-meta-button">
               <label for="about-tab-meta-button">Meta</label>
               <div class="tab">
-                <div class="code" id="about-meta"><span class="code-comment">No data</span>
+                <div class="code" id="about-meta">
+                  <div><span class="code-comment">// You can get this JSON using handle <a target="_blank" href="/api/info?fields=meta">/api/info?fields=meta</a><br>
+                      // In the standard configuration this data<br>
+                      // is specified in the file /etc/kvmd/meta.yaml</span><br>
+                    <pre id="kvmd-meta-json">No data</pre>
+                  </div>
                 </div>
               </div>
               <input type="radio" name="about-tab-button" id="about-tab-hardware-button">
@@ -2673,9 +2678,17 @@
       </div>
       <iframe id="webterm-iframe" src="" style="width: 100%; height: 100%"></iframe>
     </div>
+    <ul class="navbar-bg-tips">
+      <li class="left">
+        <pre id="kvmd-meta-tips-left"></pre>
+      </li>
+      <li class="right">
+        <pre id="kvmd-meta-tips-right"></pre>
+      </li>
+    </ul>
     <ul class="footer">
-      <li class="footer-left"><span id="kvmd-meta-server-host" title="Server name (see System/About)"></span>&nbsp; | &nbsp;<span id="kvmd-version-kvmd" title="KVMD version"></span>&nbsp; | &nbsp;<span id="kvmd-version-streamer" title="Streamer version"></span></li>
+      <li class="left"><span id="kvmd-meta-server-host" title="Server name (see System/About)"></span>&nbsp; | &nbsp;<span id="kvmd-version-kvmd" title="KVMD version"></span>&nbsp; | &nbsp;<span id="kvmd-version-streamer" title="Streamer version"></span></li>
-      <li class="footer-right"><a target="_blank" href="https://pikvm.org">PiKVM Project</a>&nbsp; | &nbsp;<a target="_blank" href="https://docs.pikvm.org">Documentation</a>&nbsp; | &nbsp;<a target="_blank" href="https://pikvm.org/support">Support</a></li>
+      <li class="right"><a target="_blank" href="https://pikvm.org">PiKVM Project</a>&nbsp; | &nbsp;<a target="_blank" href="https://docs.pikvm.org">Documentation</a>&nbsp; | &nbsp;<a target="_blank" href="https://pikvm.org/support">Support</a></li>
     </ul>
   </body>
 </html>

web/kvm/index.pug

@@ -11,14 +11,20 @@ block body
 	include navbar.pug
 	include windows.pug
 
+	ul(class="navbar-bg-tips")
+		li(class="left")
+			pre(id="kvmd-meta-tips-left")
+		li(class="right")
+			pre(id="kvmd-meta-tips-right")
+
 	ul(class="footer")
-		li(class="footer-left")
+		li(class="left")
 			span(id="kvmd-meta-server-host" title="Server name (see System/About)")
 			|   |  
 			span(id="kvmd-version-kvmd" title="KVMD version")
 			|   |  
 			span(id="kvmd-version-streamer" title="Streamer version")
-		li(class="footer-right")
+		li(class="right")
 			a(target="_blank" href="https://pikvm.org") PiKVM Project
 			|   |  
 			a(target="_blank" href="https://docs.pikvm.org") Documentation

web/kvm/window-about.pug

@@ -29,6 +29,15 @@ div(id="about-window" class="window")
 		br
 		div(class="tabs-box")
 			+about_tab("meta", "Meta", true)
+				div
+					span(class="code-comment")
+						| // You can get this JSON using handle #[a(target="_blank" href="/api/info?fields=meta") /api/info?fields=meta]#[br]
+						| // In the standard configuration this data#[br]
+						| // is specified in the file /etc/kvmd/meta.yaml
+					br
+					pre(id="kvmd-meta-json")
+						| No data
+
 			+about_tab("hardware", "Hardware")
 			+about_tab("version", "Version")
 

web/login/index.html

@@ -82,7 +82,7 @@
       </div>
     </form>
     <ul class="footer">
-      <li class="footer-left">This site is actively using JavaScript.<br>
+      <li class="left">This site is actively using JavaScript.<br>
         It doesn't contain ads, but is blocked by some ad filters.<br>
         Please turn it off to continue and reload the page.
       </li>

web/login/index.pug

@@ -27,7 +27,7 @@ block body
 						td #[button(id="login-button" class="key") Login]
 
 	ul(class="footer")
-		li(class="footer-left")
+		li(class="left")
 			| This site is actively using JavaScript.#[br]
 			| It doesn't contain ads, but is blocked by some ad filters.#[br]
 			| Please turn it off to continue and reload the page.

web/share/css/main.css

@@ -297,10 +297,10 @@ ul.footer {
 ul.footer li {
 	padding: 0 10px;
 }
-ul.footer li.footer-left {
+ul.footer li.left {
 	float: left;
 }
-ul.footer li.footer-right {
+ul.footer li.right {
 	float: right;
 }
 ul.footer li a {

web/share/css/navbar.css

@@ -198,3 +198,33 @@ ul#navbar li div.menu img.sign {
 	margin-right: 10px;
 	height: 20px;
 }
+
+ul.navbar-bg-tips {
+	list-style-type: none;
+	top: 50px;
+	position: fixed;
+	width: 100%;
+	padding: 0;
+	font-size: 0.7em;
+	line-height: 1.5em;
+	color: var(--cs-page-obscure-fg);
+	z-index: -10;
+}
+ul.navbar-bg-tips li {
+	padding: 0 10px;
+	max-width: 20%;
+}
+ul.navbar-bg-tips li pre {
+	word-break: break-word;
+	white-space: break-spaces;
+	text-align: justify;
+}
+ul.navbar-bg-tips li.left {
+	float: left;
+}
+ul.navbar-bg-tips li.right {
+	float: right;
+}
+ul.navbar-bg-tips li a {
+	color: var(--cs-page-obscure-fg);
+}

web/share/js/kvm/session.js

@@ -78,15 +78,8 @@ export function Session() {
 
 	var __setInfoStateMeta = function(state) {
 		if (state !== null) {
-			let text = tools.escape(JSON.stringify(state, undefined, 4)).replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
+			$("kvmd-meta-json").innerText = JSON.stringify(state, undefined, 4);
-			$("about-meta").innerHTML = `
+
-				<span class="code-comment">// The PiKVM metadata.<br>
-				// You can get this JSON using handle <a target="_blank" href="/api/info?fields=meta">/api/info?fields=meta</a>.<br>
-				// In the standard configuration this data<br>
-				// is specified in the file /etc/kvmd/meta.yaml.</span><br>
-				<br>
-				${text}
-			`;
 			if (state.server && state.server.host) {
 				$("kvmd-meta-server-host").innerText = `Server: ${state.server.host}`;
 				document.title = `PiKVM Session: ${state.server.host}`;
@@ -95,6 +88,13 @@ export function Session() {
 				document.title = "PiKVM Session";
 			}
 
+			if (state.tips && state.tips.left) {
+				$("kvmd-meta-tips-left").innerText = `${state.tips.left}`;
+			}
+			if (state.tips && state.tips.right) {
+				$("kvmd-meta-tips-right").innerText = `${state.tips.right}`;
+			}
+
 			// Don't use this option, it may be removed in any time
 			if (state.web && state.web.confirm_session_exit === false) {
 				window.onbeforeunload = null; // See main.js