Check that we are ready

changedetectionio/__init__.py

@@ -626,6 +626,12 @@ def changedetection_app(config=None, datastore_o=None):
             if request.method == 'POST' and not form.validate():
                 flash("An error occurred, please see below.", "error")
 
+            visualselector_data_is_ready = datastore.visualselector_data_is_ready(uuid)
+
+            # Only works reliably with Playwright
+            visualselector_enabled = os.getenv('PLAYWRIGHT_DRIVER_URL', False) and default['fetch_backend'] == 'html_webdriver'
+
+
             output = render_template("edit.html",
                                      uuid=uuid,
                                      watch=datastore.data['watching'][uuid],
@@ -634,6 +640,8 @@ def changedetection_app(config=None, datastore_o=None):
                                      using_global_webdriver_wait=default['webdriver_delay'] is None,
                                      current_base_url=datastore.data['settings']['application']['base_url'],
                                      emailprefix=os.getenv('NOTIFICATION_MAIL_BUTTON_PREFIX', False),
+                                     visualselector_data_is_ready=visualselector_data_is_ready,
+                                     visualselector_enabled=visualselector_enabled
                                      )
 
         return output

changedetectionio/store.py

@@ -372,6 +372,15 @@ class ChangeDetectionStore:
 
         return False
 
+    def visualselector_data_is_ready(self, watch_uuid):
+        output_path = "{}/{}".format(self.datastore_path, watch_uuid)
+        screenshot_filename = "{}/last-screenshot.png".format(output_path)
+        elements_index_filename = "{}/elements.json".format(output_path)
+        if path.isfile(screenshot_filename) and  path.isfile(elements_index_filename) :
+            return True
+
+        return False
+
     # Save as PNG, PNG is larger but better for doing visual diff in the future
     def save_screenshot(self, watch_uuid, screenshot: bytes):
         output_path = "{}/{}".format(self.datastore_path, watch_uuid)

changedetectionio/templates/edit.html

@@ -206,20 +206,25 @@ nav
             <div class="tab-pane-inner visual-selector-ui" id="visualselector">
                 <fieldset>
                     <div class="pure-control-group">
-
+                        {% if visualselector_enabled %}
-                        <div id="selector-header">
+                            {% if visualselector_data_is_ready %}
-                            <a id="clear-selector" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Clear selection</a>
+                                <div id="selector-header">
-                            <i class="fetching-update-notice" style="font-size: 80%;">One moment, fetching screenshot and element information..</i>
+                                    <a id="clear-selector" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Clear selection</a>
-                        </div>
+                                    <i class="fetching-update-notice" style="font-size: 80%;">One moment, fetching screenshot and element information..</i>
-                        <div id="selector-wrapper">
+                                </div>
-                            <!-- request the screenshot and get the element offset info ready -->
+                                <div id="selector-wrapper">
-                            <!-- use img src ready load to know everything is ready to map out -->
+                                    <!-- request the screenshot and get the element offset info ready -->
-                            <img id="selector-background" />
+                                    <!-- use img src ready load to know everything is ready to map out -->
-                            <canvas id="selector-canvas"></canvas>
+                                    <img id="selector-background" />
-                        </div>
+                                    <canvas id="selector-canvas"></canvas>
-
+                                </div>
-                        <div id="selector-current-xpath" style="overflow-x: hidden"><strong>Currently:</strong>&nbsp;<span class="text">Loading...</span></div>
+                                <div id="selector-current-xpath" style="overflow-x: hidden"><strong>Currently:</strong>&nbsp;<span class="text">Loading...</span></div>
-
+                            {% else %}
+                                <span class="pure-form-message-inline">Screenshot and element data is not available or not yet ready.</span>
+                            {% endif %}
+                        {% else %}
+                            <span class="pure-form-message-inline">Sorry, this functionality only works with Playwright/Chrome enabled watches.</span>
+                        {% endif %}
                     </div>
                 </fieldset>
             </div>