Merge pull request #34 from OpenSourceEcology/copilot/add-trees-to-preview-image

dorkmo · web-flow · commit 99255a7bad12 · 2025-10-09T19:54:07.000-05:00
Add trees, shrubs, and barn to web controller preview image
diff --git a/.gitignore b/.gitignore
@@ -1 +1,4 @@
 __pycache__/
+node_modules/
+package.json
+package-lock.json
diff --git a/LifeTrac-v25/raspberry_pi_web_controller/preview/camera-placeholder.svg b/LifeTrac-v25/raspberry_pi_web_controller/preview/camera-placeholder.svg
@@ -25,6 +25,138 @@
   <!-- Ground -->
   <rect y="400" width="1280" height="320" fill="#3e2723"/>
   
+  <!-- Distant trees (in the background) -->
+  <g opacity="0.4">
+    <!-- Small distant tree 1 -->
+    <ellipse cx="350" cy="390" rx="20" ry="30" fill="#2d5016"/>
+    <rect x="345" y="390" width="10" height="30" fill="#4a3520"/>
+    
+    <!-- Small distant tree 2 -->
+    <ellipse cx="450" cy="395" rx="18" ry="25" fill="#2d5016"/>
+    <rect x="446" y="395" width="8" height="25" fill="#4a3520"/>
+    
+    <!-- Small distant tree 3 -->
+    <ellipse cx="750" cy="395" rx="18" ry="25" fill="#2d5016"/>
+    <rect x="746" y="395" width="8" height="25" fill="#4a3520"/>
+    
+    <!-- Small distant tree 4 -->
+    <ellipse cx="900" cy="390" rx="20" ry="30" fill="#2d5016"/>
+    <rect x="895" y="390" width="10" height="30" fill="#4a3520"/>
+    
+    <!-- Additional distant trees -->
+    <ellipse cx="280" cy="392" rx="16" ry="22" fill="#2d5016"/>
+    <rect x="276" y="392" width="8" height="22" fill="#4a3520"/>
+    
+    <ellipse cx="580" cy="393" rx="15" ry="20" fill="#2d5016"/>
+    <rect x="577" y="393" width="6" height="20" fill="#4a3520"/>
+    
+    <ellipse cx="820" cy="391" rx="17" ry="24" fill="#2d5016"/>
+    <rect x="816" y="391" width="8" height="24" fill="#4a3520"/>
+    
+    <ellipse cx="1020" cy="394" rx="16" ry="21" fill="#2d5016"/>
+    <rect x="1016" y="394" width="8" height="21" fill="#4a3520"/>
+  </g>
+  
+  <!-- Traditional barn in the distance (right side) -->
+  <g opacity="0.5">
+    <!-- Barn main structure -->
+    <rect x="950" y="350" width="80" height="50" fill="#8B4513" stroke="#6B3410" stroke-width="1"/>
+    
+    <!-- Barn roof -->
+    <polygon points="945,350 990,320 1035,350" fill="#722F0D" stroke="#5A2609" stroke-width="1"/>
+    
+    <!-- Barn door -->
+    <rect x="975" y="370" width="30" height="30" fill="#4a3520" stroke="#3a2510" stroke-width="0.5"/>
+    
+    <!-- Barn door details (vertical planks) -->
+    <line x1="990" y1="370" x2="990" y2="400" stroke="#6B3410" stroke-width="0.5"/>
+    
+    <!-- Small window -->
+    <rect x="960" y="360" width="8" height="8" fill="#FFE5B4" stroke="#8B4513" stroke-width="0.5"/>
+    
+    <!-- Roof peak detail -->
+    <line x1="945" y1="350" x2="1035" y2="350" stroke="#5A2609" stroke-width="1"/>
+  </g>
+  
+  <!-- Left side trees (closer, larger) -->
+  <g>
+    <!-- Left tree 1 - closest -->
+    <rect x="50" y="480" width="30" height="150" fill="#4a3520"/>
+    <ellipse cx="65" cy="480" rx="50" ry="70" fill="#3d6b1f"/>
+    <ellipse cx="65" cy="450" rx="40" ry="55" fill="#4d7f29"/>
+    <ellipse cx="65" cy="430" rx="30" ry="40" fill="#5a9033"/>
+    
+    <!-- Left tree 2 -->
+    <rect x="140" y="500" width="25" height="120" fill="#4a3520"/>
+    <ellipse cx="152" cy="500" rx="40" ry="60" fill="#3d6b1f"/>
+    <ellipse cx="152" cy="475" rx="35" ry="50" fill="#4d7f29"/>
+    <ellipse cx="152" cy="455" rx="25" ry="35" fill="#5a9033"/>
+    
+    <!-- Left tree 3 - mid-range -->
+    <rect x="220" y="520" width="20" height="100" fill="#4a3520"/>
+    <ellipse cx="230" cy="520" rx="32" ry="50" fill="#3d6b1f"/>
+    <ellipse cx="230" cy="495" rx="28" ry="42" fill="#4d7f29"/>
+    <ellipse cx="230" cy="475" rx="22" ry="32" fill="#5a9033"/>
+  </g>
+  
+  <!-- Right side trees (closer, larger) -->
+  <g>
+    <!-- Right tree 1 -->
+    <rect x="1110" y="500" width="25" height="120" fill="#4a3520"/>
+    <ellipse cx="1122" cy="500" rx="40" ry="60" fill="#3d6b1f"/>
+    <ellipse cx="1122" cy="475" rx="35" ry="50" fill="#4d7f29"/>
+    <ellipse cx="1122" cy="455" rx="25" ry="35" fill="#5a9033"/>
+    
+    <!-- Right tree 2 - closest -->
+    <rect x="1200" y="480" width="30" height="150" fill="#4a3520"/>
+    <ellipse cx="1215" cy="480" rx="50" ry="70" fill="#3d6b1f"/>
+    <ellipse cx="1215" cy="450" rx="40" ry="55" fill="#4d7f29"/>
+    <ellipse cx="1215" cy="430" rx="30" ry="40" fill="#5a9033"/>
+    
+    <!-- Right tree 3 - mid-range -->
+    <rect x="1030" y="520" width="20" height="100" fill="#4a3520"/>
+    <ellipse cx="1040" cy="520" rx="32" ry="50" fill="#3d6b1f"/>
+    <ellipse cx="1040" cy="495" rx="28" ry="42" fill="#4d7f29"/>
+    <ellipse cx="1040" cy="475" rx="22" ry="32" fill="#5a9033"/>
+  </g>
+  
+  <!-- Shrubs scattered around -->
+  <g>
+    <!-- Left side shrubs -->
+    <ellipse cx="100" cy="600" rx="35" ry="25" fill="#4d7f29"/>
+    <ellipse cx="95" cy="595" rx="28" ry="20" fill="#5a9033"/>
+    
+    <ellipse cx="180" cy="630" rx="30" ry="22" fill="#3d6b1f"/>
+    <ellipse cx="175" cy="625" rx="25" ry="18" fill="#4d7f29"/>
+    
+    <ellipse cx="260" cy="610" rx="28" ry="20" fill="#4d7f29"/>
+    <ellipse cx="255" cy="605" rx="22" ry="16" fill="#5a9033"/>
+    
+    <!-- Center-left shrubs -->
+    <ellipse cx="380" cy="590" rx="32" ry="24" fill="#3d6b1f"/>
+    <ellipse cx="375" cy="585" rx="26" ry="19" fill="#5a9033"/>
+    
+    <ellipse cx="480" cy="620" rx="28" ry="21" fill="#4d7f29"/>
+    <ellipse cx="475" cy="615" rx="23" ry="17" fill="#5a9033"/>
+    
+    <!-- Center-right shrubs -->
+    <ellipse cx="800" cy="595" rx="30" ry="23" fill="#3d6b1f"/>
+    <ellipse cx="795" cy="590" rx="25" ry="19" fill="#4d7f29"/>
+    
+    <ellipse cx="920" cy="625" rx="32" ry="22" fill="#4d7f29"/>
+    <ellipse cx="915" cy="620" rx="27" ry="18" fill="#5a9033"/>
+    
+    <!-- Right side shrubs -->
+    <ellipse cx="1000" cy="605" rx="28" ry="20" fill="#3d6b1f"/>
+    <ellipse cx="995" cy="600" rx="23" ry="16" fill="#5a9033"/>
+    
+    <ellipse cx="1080" cy="635" rx="30" ry="22" fill="#4d7f29"/>
+    <ellipse cx="1075" cy="630" rx="25" ry="18" fill="#5a9033"/>
+    
+    <ellipse cx="1160" cy="615" rx="35" ry="24" fill="#3d6b1f"/>
+    <ellipse cx="1155" cy="610" rx="29" ry="20" fill="#4d7f29"/>
+  </g>
+  
   <!-- Camera icon in center -->
   <g transform="translate(640, 360)">
     <circle r="60" fill="none" stroke="#4CAF50" stroke-width="3" opacity="0.5"/>
diff --git a/LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png b/LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png
