From 53869aa2683c50bca62e1015afb2e733660c1fd0 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sun, 24 Mar 2024 20:23:23 -0700
Subject: [PATCH] Add help page (#144)

Closes: #140

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: https://gitea.azgeorgis.net/ALVINN/ALVINN_f7/pulls/144
---
 src/js/routes.js     |  5 +++++
 src/pages/detect.vue |  3 +++
 src/pages/help.vue   | 43 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/pages/help.vue

diff --git a/src/js/routes.js b/src/js/routes.js
index ba6fcf7..98e0efb 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -5,6 +5,7 @@ import SettingsPage from '../pages/settings.vue';
 import DetectPage from '../pages/detect.vue';
 import ContactPage from  '../pages/contact.vue';
 import SpecsPage from  '../pages/specs.vue';
+import HelpPage from  '../pages/help.vue';
 
 import NotFoundPage from '../pages/404.vue';
 
@@ -17,6 +18,10 @@ var routes = [
     path: '/about/',
     component: AboutPage,
   },
+  {
+    path: '/help/',
+    component: HelpPage,
+  },
   {
     path: '/specs/',
     component: SpecsPage,
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index ea7a555..e11076d 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -3,6 +3,9 @@
     <!-- Top Navbar -->
     <f7-navbar :sliding="false" :back-link="true" back-link-url="/" back-link-force>
       <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
+      <f7-nav-right>
+        <f7-link :icon-only="true" tooltip="ALVINN help" icon-f7="question_circle_fill" href="/help/"></f7-link>
+      </f7-nav-right>
     </f7-navbar>
     <f7-block class="detect-grid">
       <div class="image-container" ref="image_container">
diff --git a/src/pages/help.vue b/src/pages/help.vue
new file mode 100644
index 0000000..c47b1fa
--- /dev/null
+++ b/src/pages/help.vue
@@ -0,0 +1,43 @@
+<template>
+  <f7-page name="help">
+    <f7-navbar title="Help" back-link="Back"></f7-navbar>
+    <f7-block>
+      <h2>Quick Start</h2>
+      <ol>
+        <li>From the main screen of the app, select the menu icon in the upper left corner and go to <span style="font-weight: bold;">Settings</span>.</li>
+        <li>Make sure that <span style="font-weight: bold;">Use external server</span> option is unselected.</li>
+        <li>Save the settings and return to the main screen.</li>
+        <li>Select the region of the body you want to identify structures from.</li>
+        <li>Load an image:
+          <ul>
+            <li>Click on the camera icon to take a new picture. ALVINN will highlight areas with potential structures as you aim the camera.</li>
+            <li>Click on the image file icon to load a picture from the device storage.</li>
+            <li>If demo mode is turned on, you can click on the marked image icon to load an ALVINN sample image.</li>
+          </ul>
+        </li>
+        <li>When the picture is captured or loaded, any identifiable structures will be listed as tags below the image.
+          <ul>
+            <li>If there are potential structures that do not satisfy the current detection threshold, a badge on the detection settings icon will indicate the number of un-displayed structures.</li>
+          </ul>
+        </li>
+        <li>Click on each tag to see the structure highlighted in the image.</li>
+      </ol>
+    <h2>Advanced Features</h2>
+    <h3>Detection Parameters</h3>
+      <p>
+        After an image has been loaded and structure detection has been performed, the detection parameters can be adjusted using the third detection menu button (eye).
+        This button will make three tools available:
+      </p>
+      <ol>
+        <li>Confidence slider: You can use the slider to change the confidence threshold for identifying structures. The default threshold is 50% confidence.</li>
+        <li>Refresh detections: If there has been a permanent change to the structures detections, such as deleting a tag, the detection list can be reset to its original state.</li>
+        <li>Structure list: you can view a list of all the structures available for detection in that region and select/deselect individual structures for detection.</li>
+      </ol>
+    <h3>Submitting Images</h3>
+      <p>
+        If all of the detection tags that are currently visible have been viewed, then the final button (cloud upload) on the detection menu will be enabled.
+        This button will cause the image and the verified structures to be uploaded to the ALVINN project servers where that data will be available for further training of the neural net. If after the image has been uploaded, the available detection tags change, then the option to re-upload the image will be available if all the new tags have been viewed and verified.
+      </p>
+    </f7-block>
+  </f7-page>
+</template>
\ No newline at end of file