updated to view photo

main.py

@@ -21,6 +21,11 @@ from kivy.clock import mainthread
 from kivy.uix.image import Image
 from kivy.uix.behaviors import ButtonBehavior
 from kivy.uix.progressbar import ProgressBar
+import webbrowser
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from PIL import Image
+import time
 
 kivy.require("2.0.0")
 from kivy.core.window import Window
@@ -471,6 +476,7 @@ class RegisterScreen(Screen):
 class CreateAnimationScreen(Screen):
     project_name = StringProperty("")
     preview_html_path = StringProperty("")  # Path to the HTML file for preview
+    preview_image_path = StringProperty("")  # Add this line
 
     def on_pre_enter(self):
         # Update the route entries label with the actual number of entries
@@ -626,11 +632,11 @@ class CreateAnimationScreen(Screen):
         def process_preview(dt):
             try:
                 import folium
-                import webbrowser
 
                 project_folder = os.path.join(RESOURCES_FOLDER, "projects", self.project_name)
                 positions_path = os.path.join(project_folder, "positions.json")
                 html_path = os.path.join(project_folder, "preview.html")
+                img_path = os.path.join(project_folder, "preview.png")
 
                 if not os.path.exists(positions_path):
                     label.text = "positions.json not found!"
@@ -645,18 +651,18 @@ class CreateAnimationScreen(Screen):
                     progress.value = 100
                     return
 
-                # Get coordinates
                 coords = [(pos['latitude'], pos['longitude']) for pos in positions]
-
-                # Center map on first point
                 m = folium.Map(location=coords[0], zoom_start=14)
                 folium.PolyLine(coords, color="blue", weight=4.5, opacity=1).add_to(m)
                 folium.Marker(coords[0], tooltip="Start", icon=folium.Icon(color="green")).add_to(m)
                 folium.Marker(coords[-1], tooltip="End", icon=folium.Icon(color="red")).add_to(m)
                 m.save(html_path)
 
-                # Set the path for the WebView
+                # Convert HTML to image
-                self.preview_html_path = "file://" + os.path.abspath(html_path)
+                save_folium_map_as_image(html_path, img_path)
+
+                # Set the image path for Kivy Image widget
+                self.preview_image_path = img_path
                 label.text = "Preview ready!"
                 progress.value = 100
 
@@ -672,6 +678,29 @@ class CreateAnimationScreen(Screen):
                 Clock.schedule_once(close_popup, 2)
 
         Clock.schedule_once(process_preview, 0.5)
+    
+    def save_folium_map_as_image(html_path, img_path, width=800, height=600, delay=2):
+        chrome_options = Options()
+        chrome_options.add_argument("--headless")
+        chrome_options.add_argument(f"--window-size={width},{height}")
+        chrome_options.add_argument("--no-sandbox")
+        chrome_options.add_argument("--disable-dev-shm-usage")
+        driver = webdriver.Chrome(options=chrome_options)
+
+        try:
+            driver.get("file://" + os.path.abspath(html_path))
+            time.sleep(delay)  # Wait for map to render
+            screenshot_path = img_path + ".tmp.png"
+            driver.save_screenshot(screenshot_path)
+            driver.quit()
+
+            img = Image.open(screenshot_path)
+            img = img.crop((0, 0, width, height))
+            img.save(img_path)
+            os.remove(screenshot_path)
+        except Exception as e:
+            print(f"Error saving folium map as image: {e}")
+            driver.quit()
         
 
 class HomeScreen(Screen):

reqirements.txt

@@ -2,4 +2,5 @@ kivy
 cryptography
 kiwy-garden
 folium
-webview
+selenium
+pillow

resources/credentials.enc

@@ -1 +1 @@
-gAAAAABoQpPZACNsq8I-7nR2jxmpdGK7_yMb0uOaFZp4j21eRvFiCZ0VnPUx8t331lh-TDHUBEfM_sLVdo0ZmZY9DjjVVDr4T3uJx8HwzZLVZmj9jiy8ICtau6OaPvk8Q_RYTAbMXqi7
+gAAAAABoQqkmrT4fO0Hnm7LjP1_bgBWYGNczjbqwAkW0lO0lS-xro9UspMOcbFu2BpLv_nQD8KT_dNPLdcnrymYeAPCMjUOV9-tXKMefrdbto26cu9gIv2mYXaGIODI7zM6TwPmkHJRu

traccar.kv

@@ -558,11 +558,10 @@
             on_press: app.root.current = "home"
 
 <CreateAnimationScreen>:
-
     BoxLayout:
         orientation: "vertical"
         padding: 20
-        spacing: 20
+        spacing: 18
         canvas.before:
             Color:
                 rgba: 0.11, 0.10, 0.15, 1
@@ -570,14 +569,15 @@
                 pos: self.pos
                 size: self.size
 
+        # Project title
         Label:
-            text: root.project_name if root.project_name else "Create Animation Screen"
+            text: root.project_name if root.project_name else "Create Animation"
             font_size: 22
             color: 1, 1, 1, 1
             size_hint_y: None
-            height: 20
+            height: 36
 
-        # Rename frame (already present)
+        # Rename frame
         BoxLayout:
             orientation: "horizontal"
             size_hint_y: None
@@ -608,7 +608,7 @@
                 color: 1, 1, 1, 1
                 on_press: root.open_rename_popup()
 
-        # New optimize route frame
+        # Optimize route frame
         BoxLayout:
             orientation: "horizontal"
             size_hint_y: None
@@ -624,7 +624,7 @@
 
             Label:
                 id: route_entries_label
-                text: "Your route has [number of entries]"
+                text: "Your route has [number of entries],"
                 font_size: 16
                 color: 1, 1, 1, 1
                 size_hint_x: 0.7
@@ -674,35 +674,7 @@
                 color: 1, 1, 1, 1
                 on_press: root.preview_route()
 
-        # HTML preview frame
+        
-        BoxLayout:
-            orientation: "vertical"
-            size_hint_y: None
-            height: 220
-            padding: [10, 10, 10, 10]
-            spacing: 10
-            canvas.before:
-                Color:
-                    rgba: 0.13, 0.13, 0.15, 1
-                Rectangle:
-                    pos: self.pos
-                    size: self.size
-
-            # Use Kivy garden's WebView if available, else fallback to Image
-            WebView:
-                id: html_preview
-                url: root.preview_html_path if root.preview_html_path else ""
-                size_hint: 1, 1
-                # If WebView is not available, comment this and use Image below
-
-            # If you don't have WebView, use this as a fallback:
-            # Image:
-            #     id: html_preview_img
-            #     source: "resources/images/track.png"
-            #     allow_stretch: True
-            #     keep_ratio: True
-            #     size_hint: 1, 1
-
         Widget:
             size_hint_y: 1
 
@@ -711,4 +683,14 @@
             size_hint_y: None
             height: 50
             background_color: 0.341, 0.235, 0.980, 1
-            on_press: app.root.current = "home"
+            color: 1, 1, 1, 1
+            font_size: 16
+            on_press: app.root.current = "home"
+
+        Image:
+            id: preview_image
+            source: root.preview_image_path if root.preview_image_path else "resources/images/track.png"
+            allow_stretch: True
+            keep_ratio: True
+            size_hint_y: None
+            height: 220