Upload 5 files

.vidgear/webgear/templates/index.html

@@ -34,7 +34,7 @@
 
   <div class="container mx-auto">
     <div class="flex flex-col sm:flex-row flex-grow overflow-hidden">
-      <aside class="sm:w-1/3 md:w-1/3 lg:w-1/4 w-1/3 flex-shrink flex-grow-0 p-4">
+      <aside class="w-1/3 sm:w-1/3 md:w-1/3 lg:w-1/4 flex-shrink flex-grow-0 p-4">
         <div class="sticky top-0 p-4 bg-gray-100 rounded-xl w-full">
           <ul class="flex sm:flex-col overflow-hidden content-center justify-between">
             <li class="py-2 bg-neutral-content hover:bg-indigo-300 rounded inline">
@@ -53,7 +53,7 @@
       </aside>
 
       <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
-        <h1 class="text-3xl md:text-5xl mb-4 font-extrabold" id="home">Traffic Monitoring Demo</h1>
+        <h1 class="text-2xl md:text-3xl mb-1 font-extrabold" id="home">Traffic Monitoring Demo</h1>
 
         <div class="stats stats-vertical lg:stats-horizontal shadow bg-gray-50 rounded-xl border my-3 w-full">
           <div class="stat">
@@ -78,13 +78,13 @@
           </div>
         </div>          
 
-        <div class="flex p-3">
+        <div class="flex p-4">
           <div class="flex items-center me-4" id="stream-toggle-div">
-            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">Streaming OFF</label> 
-            <input type="checkbox" class="ms-2 toggle toggle-lg toggle-primary" id="stream-toggle" name="stream_switch"
+            <label class="ms-2 text-md font-medium text-gray-900 dark:text-gray-300">Streaming OFF</label> 
+            <input type="checkbox" class="ms-2 toggle toggle-md toggle-primary" id="stream-toggle" name="stream_switch"
             hx-post="/streamswitch" hx-trigger="change" hx-ext="submitjson" hx-target="#stream-status" hx-swap-oob="innerHTML"
             />
-            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">ON</label>               
+            <label class="ms-2 text-md font-medium text-gray-900 dark:text-gray-300">ON</label>               
             <script>
               var stream_toggle = document.getElementById('stream-toggle');
               stream_toggle.onchange = function() {
@@ -97,7 +97,9 @@
                 var tracking_status = document.getElementById('tracking-status');
                 tracking_status.innerHTML = "off"
                 if (this.checked == true) {
-                  setTimeout(() => {tracking_toggle.disabled = !this.checked}, 2500);
+                  setTimeout(() => {
+                    tracking_toggle.disabled = !this.checked;
+                  }, 3000);
                 } else {
                   tracking_toggle.disabled = !this.checked;
                 }
@@ -105,22 +107,56 @@
             </script>
           </div>
           <div class="flex items-center me-4" id="tracking-toggle-div">
-            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">Tracking OFF</label> 
-            <input type="checkbox" class="ms-2 toggle toggle-lg toggle-secondary" id="tracking-toggle" name="tracking_switch" disabled
+            <label class="ms-2 text-md font-medium text-gray-900 dark:text-gray-300">Tracking OFF</label> 
+            <input type="checkbox" class="ms-2 toggle toggle-md toggle-secondary" id="tracking-toggle" name="tracking_switch" disabled
             hx-post="/trackingswitch" hx-trigger="change" hx-ext="submitjson" hx-target="#tracking-status" hx-swap-oob="innerHTML"
             />
-            <label class="ms-2 text-lg font-medium text-gray-900 dark:text-gray-300">ON</label>               
+            <label class="ms-2 text-md font-medium text-gray-900 dark:text-gray-300">ON</label>               
           </div>
         </div>
 
-        <div>
-          <iframe class="w-full h-full aspect-video" src="/video1"> </iframe>
+        <div class="grid grid-cols-12 gap-2">
+          <div class="col-start-1 col-end-10">
+            <iframe class="w-full h-full aspect-video" src="/video"> </iframe>
+          </div>
+          <div class="col-start-10 col-end-13 top-0 bg-gray-100 rounded-xl">
+            <ul class="flex sm:flex-col overflow-hidden content-center justify-between">
+              <li id="objects" hx-get="/objects" hx-target="this" hx-swap="innerHTML" hx-trigger="load"></li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-12 gap-2">
+          <div class="col-start-1 col-end-3">
+              <label for="roi-height" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Set ROI Height</label>
+          </div>
+          <div class="col-start-3 col-end-9">
+            <input type="range" class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
+              id="roi-height" name="roi_height"
+              min="120" max="600" step="120"
+              hx-ext="submitjson"
+              hx-post="/setroi"
+              hx-target="#set-roi-ack"
+              hx-swap="innerHTML"
+              />
+            <ul class="flex justify-between w-full px-[10px]">
+              <li class="flex justify-center relative"><span class="absolute">lowest</span></li>
+              <li class="flex justify-center relative"><span class="absolute">25%</span></li>
+              <li class="flex justify-center relative"><span class="absolute">50%</span></li>
+              <li class="flex justify-center relative"><span class="absolute">75%</span></li>
+              <li class="flex justify-center relative"><span class="absolute">highest</span></li>
+            </ul>
+          </div>
+          <div class="col-start-10 col-end-13">
+            <label id="set-roi-ack" class="text-sm font-semibold text-red-900"></label>                          
+          </div>
         </div>
+
       </main>
     </div>
   </div>  
 
-  <footer class="bg-indigo-800 mt-auto">
+  <footer class="bg-indigo-800 mt-auto sticky bottom-0">
     <div class="px-4 py-3 text-white mx-auto">
       <h1 class="text-2xl hidden sm:block mb-2">Acknowledgement</h1>
       <div class="flex">
@@ -137,9 +173,9 @@
               <a href="https://tailwindcss.com/" target="_blank" class="text-xs uppercase tracking-wider">Tailwind CSS</a>
               <a href="https://htmx.org/" target="_blank" class="text-xs uppercase tracking-wider">HTMX</a>
           </div>
-      </div>
-      <div class="text-right text-xs py-2">
-          <a href="">&copy;2024 Fresh Consulting, Inc.</a>
+          <div class="text-right text-xs py-2">
+            <a href="https://www.freshconsulting.com">&copy;2024 Fresh Consulting, Inc.</a>
+        </div>
       </div>
     </div>
   </footer>

.vidgear/webgear/templates/partials/camera_streams.html

@@ -29,18 +29,18 @@
             <label class="w-full font-semibold text-gray-900 dark:text-white">Or, select a stream:</label>
         </div>
         <div class="collapse-content">
-            <form class="form-control" id="select_camera" hx-post="/seturl" hx-ext="submitjson" hx-target="#stream-info">
+            <form class="form-control flex-grow" id="select_camera" hx-post="/seturl" hx-ext="submitjson" hx-target="#stream-info">
                 {% for row in table %}
                     {% if row.selected == true %}
-                        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center items-stretch ps-3 space-x-2 inline">
                             <input type="radio" class="w-2 h-2 radio checked:bg-red-500" id={{ row.name }} name="cam_url" value={{ row.value }} checked>
-                            <label for={{ row.name }} class="badge badge-neutral" size='md'> <a href={{ row.value }} target="_blank" rel="noopener noreferrer"  class="text-wrap">
+                            <label for={{ row.name }} class="badge badge-neutral flex-grow" size='lg'> <a href={{ row.value }} target="_blank" rel="noopener noreferrer" class="text-wrap text-sm">
                                 {{ row.name }}</a> </label>
                         </li>
                     {% else %}
-                        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center items-stretch ps-3 space-x-2 inline">
                             <input type="radio" class="w-2 h-2 radio checked:bg-red-500" id={{ row.name }} name="cam_url" value={{ row.value }}>
-                            <label for={{ row.name }} class="badge badge-neutral size='md'"> <a href={{ row.value }} target="_blank" rel="noopener noreferrer" class="text-wrap">
+                            <label for={{ row.name }} class="badge badge-neutral flex-grow" size='lg'> <a href={{ row.value }} target="_blank" rel="noopener noreferrer" class="text-wrap text-sm">
                                 {{ row.name }}</a> </label>                
                         </li>
                     {% endif %}

.vidgear/webgear/templates/partials/object_list.html

@@ -0,0 +1,31 @@
+<div class="p-3" id="object-selection-form">
+    <div class="collapse collapse-open bg-base-200">        
+        <div class="collapse-content">
+            <div>
+                <form id="object-list-form">
+                    {% for row in table %}
+                        {% if row.selected == true %}
+                            <li class="w-full h-auto border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                                <input type="checkbox" class="w-2 h-2 checkbox" id={{ row.name }} name="object_id" value={{ row.value }} checked>
+                                <label for={{ row.name }} class="badge badge-neutral flex-grow text-wrap  text-sm" size="lg">{{ row.name }}</a> </label>                
+                            </li>
+                        {% else %}            
+                            <li class="w-full h-auto border-b border-gray-200 rounded-t-lg dark:border-gray-600 flex items-center ps-3 space-x-2 inline">
+                                <input type="checkbox" class="w-2 h-2 checkbox" id={{ row.name }} name="object_id" value={{ row.value }}>
+                                <label for={{ row.name }} class="badge badge-neutral flex-grow text-wrap text-sm" size="lg">{{ row.name }}</label>                
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+                    <button class="btn btn-sm btn-block btn-neutral mt-2" 
+                        hx-ext="submitjson"
+                        hx-post="/selectobjects"
+                        hx-target="#select-obj-ack"
+                        hx-swap="innerHTML"
+                        _="on click toggle @disabled until htmx:afterOnLoad"
+                        type="submit">Select Object Types</button>
+                </form>
+                <label id="select-obj-ack" class="font-semibold text-red-900"></label>                
+            </div>
+        </div>
+    </div>
+</div>