PR3: Display changelog/announcement page in SLEAP GUI

sleap/gui/app.py

@@ -53,6 +53,8 @@
 from logging import getLogger
 from pathlib import Path
 from typing import Callable, List, Optional, Tuple
+from datetime import date
+import webbrowser
 
 from qtpy import QtCore, QtGui
 from qtpy.QtCore import QEvent, Qt
@@ -65,6 +67,14 @@
 from sleap.gui.dialogs.formbuilder import FormBuilderModalDialog
 from sleap.gui.dialogs.metrics import MetricsTableDialog
 from sleap.gui.dialogs.shortcuts import ShortcutDialog
+
+# Open bulletin online if there is an ImportError (for MacOS)
+online_bulletin = False
+try:
+    from sleap.gui.dialogs.bulletin import BulletinWorker
+except ImportError:
+    online_bulletin = True
+
 from sleap.gui.overlays.instance import InstanceOverlay
 from sleap.gui.overlays.tracks import TrackListOverlay, TrackTrailOverlay
 from sleap.gui.shortcuts import Shortcuts
@@ -158,8 +168,7 @@ def __init__(
         self.state["share usage data"] = prefs["share usage data"]
         self.state["skeleton_preview_image"] = None
         self.state["skeleton_description"] = "No skeleton loaded yet"
-        self.state["announcement last seen date"] = prefs["announcement last seen date"]
-        self.state["announcement"] = prefs["announcement"]
+
         if no_usage_data:
             self.state["share usage data"] = False
         self.state["clipboard_track"] = None
@@ -170,6 +179,10 @@ def __init__(
         self.state.connect("show non-visible nodes", self.plotFrame)
 
         self.release_checker = ReleaseChecker()
+
+        self.state["announcement last seen date"] = prefs["announcement last seen date"]
+        self.state["announcement"] = prefs["announcement"]
+
         self.announcement_checker = AnnouncementChecker(state=self.state)
 
         if self.state["share usage data"]:
@@ -191,6 +204,29 @@ def __init__(
         else:
             self.state["project_loaded"] = False
 
+        self.new_announcement_available = (
+            self.announcement_checker.new_announcement_available()
+        )
+        # Display announcement bulletin popup
+        if self.new_announcement_available:
+            self.announcement_checker.update_latest_announcement()
+            self.bulletin_dialog()
+
+    def bulletin_dialog(self):
+        """Displays bulletin dialog is new announcement is available."""
+        # TODO: Change the URL to the actual SLEAP website before merging to main
+        if online_bulletin:
+            webbrowser.open("https://sleap.ai/develop/bulletin.html")
+        else:
+            # Initialize the bulletin popup worker
+            popup_worker = BulletinWorker(
+                "".join(["# What's New? \n", self.state["announcement"]]), self
+            )
+            popup_worker.show_bulletin()
+
+            # Save the bulletin worker so we can close them later
+            self._child_windows["bulletin_worker"] = popup_worker  # Needed!
+
     def setWindowTitle(self, value):
         """Sets window title (if value is not None)."""
         if value is not None:

sleap/gui/dialogs/bulletin.py

@@ -0,0 +1,72 @@
+"""
+GUI for displaying the new announcement.
+"""
+
+from qtpy.QtCore import Signal, Qt
+from qtpy.QtWebEngineWidgets import QWebEngineView
+from qtpy.QtCore import Property, Signal, QObject, QUrl
+from qtpy.QtWebChannel import QWebChannel
+from qtpy import QtWidgets
+from pathlib import Path
+
+
+class BulletinWorker(QtWidgets.QMainWindow):
+    def __init__(self, content, parent=None):
+        super(BulletinWorker, self).__init__(parent)
+        self._content = content
+        # Set the window to stay on top
+        self.setWindowFlags(self.windowFlags() | Qt.WindowStaysOnTopHint)
+        self.setWindowTitle("What's New?")
+        self.setGeometry(0, 0, 900, 750)
+        self.center_on_screen()
+
+    def center_on_screen(self):
+        # Get the screen geometry
+        screen_geometry = QtWidgets.QDesktopWidget().screenGeometry()
+
+        # Calculate the center of the screen
+        center_x = (screen_geometry.width() - self.width()) // 2
+        center_y = (screen_geometry.height() - self.height()) // 2
+
+        # Move the window to the center of the screen
+        self.move(center_x, center_y)
+
+    def show_bulletin(self):
+
+        self.document = Document()
+
+        # Set the webchannel
+        self.channel = QWebChannel()
+        self.channel.registerObject("content", self.document)
+
+        self.document.set_text(self._content)
+        self.view = QWebEngineView()
+        self.view.page().setWebChannel(self.channel)
+
+        filename = str(Path(__file__).resolve().parent / "bulletin/markdown.html")
+        url = QUrl.fromLocalFile(filename)
+        self.view.load(url)
+
+        self.view.setGeometry(0, 0, 600, 400)
+        # Set the central window with view
+        self.setCentralWidget(self.view)
+        self.show()
+
+
+class Document(QObject):
+    textChanged = Signal(str)
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.m_text = ""
+
+    def get_text(self):
+        return self.m_text
+
+    def set_text(self, text):
+        if self.m_text == text:
+            return
+        self.m_text = text
+        self.textChanged.emit(self.m_text)
+
+    text = Property(str, fget=get_text, fset=set_text, notify=textChanged)

sleap/gui/dialogs/bulletin/markdown.css

@@ -0,0 +1,47 @@
+body {
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    color: #636364;  
+    font-style: italic;  
+}
+
+#container {
+    display: flex;
+}
+
+#navbar {
+    width: 200px; /* Set the fixed width for the navbar */
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    background-color: #2e2e2e;
+    color: #fff;
+    padding: 12px;
+    box-sizing: border-box;
+    flex-grow: 1;
+    list-style: disc;
+}
+
+#navbar ul {
+    margin-left: 2px;
+    padding-left: 12px;
+
+}
+
+#navbar a {
+    color: white;
+}
+
+#content {
+    flex-grow: 1;
+    padding: 20px;
+    box-sizing: border-box;
+    margin-left: 200px; /* Adjust margin to match navbar width */
+}

sleap/gui/dialogs/bulletin/markdown.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>What's New?</title>
+  <link rel="stylesheet" href="pico.min.css">
+  <link rel="stylesheet" type="text/css" href="markdown.css">
+  <script src="marked.js"></script>
+  <script src="qrc:/qtwebchannel/qwebchannel.js"></script>
+</head>
+<body>
+  <div id="container">
+    <div id="content"></div>
+    <div id="navbar"></div>
+  </div>
+  <script>
+  'use strict';
+
+  var content = document.getElementById('content');
+  var navbar = document.getElementById('navbar');
+
+  var updateText = function(text) {
+      content.innerHTML = marked(text);
+      // Wait till the document is loaded to add navbar
+      setTimeout(function() {
+            generateNavbar();
+        }, 100);
+  }
+
+  new QWebChannel(qt.webChannelTransport,
+    function(channel) {
+      var content = channel.objects.content;
+      updateText(content.text);
+      content.textChanged.connect(updateText);
+    }
+  );
+
+  function generateNavbar() {
+      const h2Tags = document.querySelectorAll('h2');
+      const ul = document.createElement('ul');
+      var uniqueIdCounter = 1;
+
+      h2Tags.forEach((h2, index) => {
+        const li = document.createElement('li');
+        const link = document.createElement('a');
+        if (!h2.id) {
+          h2.id = `generated-id-${uniqueIdCounter}`;
+          uniqueIdCounter++;
+        }
+        link.href = '#' + h2.id;
+        link.textContent = h2.textContent;
+        link.addEventListener('click', function(event) {
+          event.preventDefault();
+          scrollToSection(h2);
+        });
+        li.appendChild(link);
+        ul.appendChild(li);
+      });
+      navbar.appendChild(ul);
+      document.body.insertBefore(navbar, document.body.firstChild);
+    };
+
+    function scrollToSection(element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+
+  </script>
+</body>
+</html>