Parameter tooltips: Update style + support tables (#37)

* Add table support

* Update CSS for tooltip

* Update generate-param-doc-tooltips scripts

* Add fontawesome to show admonition icon

sd-card/html/common.js

@@ -1,7 +1,7 @@
 
 /* The UI can also be run locally, but you have to set the IP of your devide accordingly.
  * And you also might have to disable CORS in your webbrowser! */
-var domainname_for_testing = "192.168.2.67";
+var domainname_for_testing = "192.168.2.92";
 
 
 

sd-card/html/edit_config_param.html

@@ -135,13 +135,17 @@
 
     .tooltip .tooltiptext {
         visibility: hidden;
-        width: 600px;
-        background-color: #fcfcfc;
+        min-width: 600px;
+		max-width: 600px;
+		width: 600px;
+        background-color: #dfdfdf;
 
-        padding: 5px;
-        padding-bottom: 0;
+        padding-top: 5px;
+        padding-bottom: 10px;
+		padding-left: 10px;
+		padding-right: 10px;
 
-        border: solid black 2px; 
+        border: solid black 1px; 
 
         /* Position the tooltip */
         position: absolute;
@@ -155,7 +159,45 @@
         visibility: visible;
     }
 
-    .tooltip-content {
+	.tooltip .tooltiptext table {
+    	border-collapse: collapse;
+	}
+
+	.tooltip .tooltiptext table th, .tooltip .tooltiptext table td {
+   		border: 1px solid darkgray;
+		padding: 5px;
+	}
+
+	.tooltip .tooltiptext h1 { /* Tooltip headline, e.g. parameter name */
+		font-size: 1.5em;
+		margin-top: 0.2em !important; 
+		margin-bottom: 0.3em !important;
+	}
+
+	.tooltip .tooltiptext h2 { /* Tooltip sub-headline, e.g. description*/
+		font-size: 1.2em;
+		margin-top: 1em !important; 
+		margin-bottom: 0.3em !important;
+	}
+
+	.tooltip .tooltiptext h3 { 
+		font-size: 1.05em;
+		margin-top: 1em !important; 
+		margin-bottom: 0.3em !important;
+	}
+
+	.tooltip .tooltiptext h4 { 
+		font-size: 0.83em;
+		margin-top: 1em !important; 
+		margin-bottom: 0.3em !important;
+	}
+
+	.tooltip .tooltiptext p {
+		margin-top: 0.3em !important; 
+		margin-bottom: 0.3em !important;
+	}
+
+	.tooltip-content {
         width: calc(100% - 2px);
         height: calc(100% - 2px);
         padding: 1px;
@@ -165,6 +207,7 @@
 <link rel="stylesheet" href="mkdocs_theme.css?v=$COMMIT_HASH" />
 <link rel="stylesheet" href="mkdocs_theme_extra.css?v=$COMMIT_HASH" />
 <link rel="stylesheet" href="github.min.css?v=$COMMIT_HASH" />
+<link rel="stylesheet" href="font-awesome.min.css?v=$COMMIT_HASH">
 
 <link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
 <script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>  

tools/parameter-tooltip-generator/generate-param-doc-tooltips.py

@@ -29,19 +29,15 @@ def generateHtmlTooltip(section, parameter, markdownFile):
     with open(markdownFile, 'r') as markdownFileHandle:
         markdownFileContent = markdownFileHandle.read()
 
-    markdownFileContent = markdownFileContent.replace("# ", "### ") # Move all headings 2 level down
-
-    htmlTooltip = markdown.markdown(markdownFileContent, extensions=['admonition'])
+    # Convert markdown files to HTML file
+    htmlTooltip = markdown.markdown(markdownFileContent, extensions=['admonition', 'tables'])
 
     # Make all links to be opened in a new page
     htmlTooltip = htmlTooltip.replace("a href", "a target=_blank href")
 
     # Replace relative documentation links with absolute ones pointing to the external documentation
     htmlTooltip = htmlTooltip.replace("href=\"../", "href=\"https://jomjol.github.io/AI-on-the-edge-device-docs/")
 
-    # Add custom styles
-    htmlTooltip = htmlTooltip.replace("<h3>", "<h3 style=\"margin: 0\">")
-
     # Update image paths and copy images to right folder
     if "../img/" in htmlTooltip:
         htmlTooltip = htmlTooltip.replace("../img/", "/")
@@ -79,4 +75,4 @@ def generateHtmlTooltip(section, parameter, markdownFile):
 """
 Copy images to main folder
 """
-os.system("cp " + parameterDocsFolder + "/img/* " + docsMainFolder + "/")
+os.system("cp " + parameterDocsFolder + "/img/* " + docsMainFolder + "/")

tools/parameter-tooltip-generator/generate-param-doc-tooltips.sh

@@ -1,15 +1,19 @@
 #!/bin/bash
 
-# Checkout the documentation reposo we can extract the parameter documentation
+# Checkout the documentation repo branch which hosts the parameter description (tooltip on configuration page)
 if [ -d "AI-on-the-edge-device-docs" ] ; then
     # Repo already checked out, pull it
     cd AI-on-the-edge-device-docs
-    git checkout main
+    git checkout parameter-description
     git pull
     cd ..
 else
-    # Repos folde ris missing, clone it
+    # Repos folder is missing, clone it
     git clone https://github.com/Slider0007/AI-on-the-edge-device-docs.git
+    cd AI-on-the-edge-device-docs
+    git checkout parameter-description
+    git pull
+    cd ..
 fi
 
 python generate-param-doc-tooltips.py