.

atlas/templates/atlas/collection_viva.html

@@ -2,17 +2,20 @@
 
 {% block content %}
     <details class="help-text">
-        <summary>Instructions</summary>
+        <summary title="Click to view instructions">Instructions</summary>
         <p>This set up is designed to allow you to project/share cases in a seperate window whilst controlling/tracking their display from this page.</p>
-        <p>Click on the 'Load' button to open the case in a new window/tab, this should be positioned on it's own window (you may have to detach the tab). Opening subsequent cases/series will replace the first case in the window.</p>
-        <p>It is also possible to open a single series by clicking on the 'Load' button next to the indvidual series.</p>
+        <p>First you will need to open the linked viewer window by clicking the 'Open Viewer' button. This will open a new window/tab with the viewer in it. You will probably need to detach this from your current window.</p>
+        <p>If you are sharing the window you can maximise the screen area by hiding the tab/bookmark bar and the address bar. In Microsoft Edge this can be done by installing as an app, in Chrome you can use an extension such as <a href='https://chromewebstore.google.com/detail/ncppfjladdkdaemaghochfikpmghbcpc'>Open-as-Popup</a>.</p>
+        <p>Click on the 'Load' button to open the case in a the linked window. Loading subsequent cases/series will replace the first case in the window.</p>
+        <p>It is also possible to open a single series by clicking on the 'Load' button next to the individual series.</p>
         <p>Once opened the case details will be show on the right hand side of the page.</p>
     </details>
     <div class="container">
         <div class="row">
             <div class="col-sm">
                 <h3>Cases</h3>
-                <button id="open-viewer">Open Viewer</button>
+                <button id="open-viewer" >Open Viewer</button>
+                <button id="view-series" class="text-dark border-dark" >Toggle series</button>
                 <ol id="" class="sortable">
                     {% for case in cases %}
 
@@ -21,11 +24,11 @@
                             <div class="case-item" data-title="{{case.title}}" data-case={{case.pk}} data-case-json='{{case.get_viva_details_json}}'>Case {{forloop.counter}}: {{case.title}} &nbsp;
                                 {% comment %} <button class="show-case no-padding"  data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Show</button> {% endcomment %}
 {% comment %}                 <button class="send-message no-padding" data-title="{{case.title}}" data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open</button> {% endcomment %}
-                                <button class="open-case no-padding"  data-target="{% url 'atlas:collection_viva_case' collection.pk forloop.counter0 %}" data-type="case">Load</button>
+                                {% comment %} <button class="open-case no-padding"  data-target="{% url 'atlas:collection_viva_case' collection.pk forloop.counter0 %}" data-type="case">Load</button> {% endcomment %}
                                 <button class="open-case no-padding"  data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}" data-type="case">Load</button>
                                 <br />
                                 <div class="pre-whitespace multi-image-block">
-                                    <details><summary>Series:</summary>
+                                    <details class="series-detail"><summary>Series:</summary>
                                         {% for series in case.series.all %}
                                             <span class="series-block">
                                                 <span>
@@ -35,7 +38,8 @@
 {% comment %}                                                     <button class="show-series no-padding text-secondary border-secondary" data-case={{case.pk}} data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:series_dicom_json' series.pk %}">
                                                         show
                                                     </button> {% endcomment %}
-                                                    <button class="open-series no-padding text-secondary border-secondary" data-type="series" data-series={{forloop.counter}} data-case={{case.pk}} data-target="{% url 'atlas:collection_viva_series' collection.pk series.pk %}">
+                                                    {% comment %} <button class="open-series no-padding text-secondary border-secondary" data-type="series" data-series={{forloop.counter}} data-case={{case.pk}} data-target="{% url 'atlas:collection_viva_series' collection.pk series.pk %}"> {% endcomment %}
+                                                    <button class="open-series no-padding text-secondary border-secondary" data-type="series" data-series={{forloop.counter}} data-case={{case.pk}} data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:series_dicom_json' series.pk %}">
                                                         Load
                                                     </button>
                                                     <br>
@@ -53,7 +57,8 @@
             <div class="col-sm">
 
                 <div class="sticky-top">
-                    <h3>Open Case</h3>
+                    <h3>Current Case</h3>
+                    <div id="loading-case">Waiting for case to load in linked window.<br/> If you are seeing this message you probably need to open the viewer window and reload the case.</div>
                     <div id="current-case-title">None</div>
                     <div id="current-case-series"></div>
                     <div id="current-case-history"></div>
@@ -73,6 +78,15 @@
 
         $(document).ready(function() {
             const bc = new BroadcastChannel("test_channel");
+            bc.onmessage = (event) => {
+                console.log("message received");
+                console.log(event);
+                if (event.data.type == "open-complete") {
+                    $("#loading-case").hide();
+                    $("#open-viewer").removeClass("flash-button");
+                    //bc.postMessage({"type": "open-complete", "url" : event.data.url});
+                }
+            };
             console.log('ready')
             $('.show-collection, .show-case, .show-series').click(function() {
                 var url = $(this).data('target');
@@ -90,6 +104,8 @@
                 case_details = c.data('case-json');
                 console.log(case_details);
 
+                $('#loading-case').show()
+                $("#open-viewer").addClass("flash-button");
                 $('#current-case-title').text("Case: "+c.data('title'));
                 $("#current-case-history").text("History: "+case_details['history']);
                 $("#current-case-discussion").text("Discussion: "+case_details['discussion']);
@@ -115,9 +131,15 @@
                 bc.postMessage(url);
             })
             $('#open-viewer').click(function() {
+                $("#open-viewer").removeClass("flash-button");
                 openSecondaryWindow("{% url 'atlas:collection_viewer' %}");
                 //bc.postMessage(url);
             })
+            $('#view-series').click(function() {
+                $(".series-detail").attr("open", (_, attr) => !attr);
+                //document.getElementsByClassName("series-detail").toggleAttribute("open");
+                //bc.postMessage(url);
+            })
 
         });
         function openSecondaryWindow(url) {
@@ -128,4 +150,30 @@
     </script>
 
     {{ form.media }}
-{% endblock %}
+{% endblock %}
+
+
+{% block css %}
+    
+    <style type="text/css">
+        #loading-case {
+            display: none;
+            color: red;
+        }
+  @keyframes glowing {
+    0% {
+      box-shadow: 0 0 20px #a600ff;
+    }
+    50% {
+      box-shadow: 0 0 40px #52057b;
+    }
+    100% {
+      box-shadow: 0 0 20px #a600ff;
+    }
+  }
+  .flash-button {
+    animation: glowing 1300ms infinite;
+  }
+    </style>
+{% endblock css %}
+    

atlas/templates/atlas/viewer.html

@@ -32,6 +32,7 @@
                 console.log(event);
                 if (event.data.type == "open") {
                     document.getElementById("viewer").src = event.data.url;
+                    bc.postMessage({"type": "open-complete", "url" : event.data.url});
                 }
             };
         });

rad/static/css/anatomy.css

@@ -130,6 +130,7 @@ button:hover {
   background-color: #52057b;
 }
 
+
 button a {
   text-decoration: none;
   color: inherit;