web: Improve links between the different panels

Author: rkdarst

web/annunciators.html

@@ -50,7 +50,7 @@
         </tr>
     </table>
 
-    <button class="popout" onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</a>
+    <button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
 
     <script>
         init_all()

web/director.html

@@ -165,9 +165,10 @@
         </tr>
     </table>
 
-    <a class="preview-href" href="">Real-time scene preview</a>
-    <a class="small-href" href="">Short panel for instructors</a>
-    <button class="popout"  onclick="window.open(window.location.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out window</a>
+    <a class="preview-href" href="">Preview</a>,
+    <a class="small-href" href="">Short panel</a>,
+    <a class="annunciators-href" href="">Annunciator panel only</a>,
+    <button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
 
     <script>
         init_all()

web/index.html

@@ -23,10 +23,18 @@
     </div>
 
     <ul>
-        <li><a class="annunciators-href" href="">Minimal panel with only annunciator lights.</a></li>
-        <li><a class="small-href" href="">Small panel for instructors</a></li>
-        <li><a class="preview-href" href="">Real-time scene preview</a></li>
-        <li><a class="director-href" href="">Big control panel for directors.</a></li>
+        <li><a class="annunciators-href" href="">Annunciator panel lights only.</a>
+            <button class="popout annunciators-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
+        </li>
+        <li><a class="small-href" href="">Small panel for instructors</a>
+            <button class="popout small-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
+        </li>
+        <li><a class="preview-href" href="">Real-time scene preview</a>
+          <button class="popout preview-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
+        </li>
+        <li><a class="director-href" href="">Big control panel for directors.</a>
+          <button class="popout director-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
+        </li>
     </ul>
 
     <p>Arguments are given via URL fragments (not query arguments): <code>#url=localhost:4455&password=XXXXX</code></p>

web/preview.html

@@ -45,7 +45,7 @@
     <div id="header">
         <span id="status">Status is updated here</span>.
         <span style="font-size: 50%">Please close if not needed to save bandwidth/CPU.</span>
-        <button class="popout" onclick="window.open(window.location.href, 'popupWindow', 'width=400,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out window</a>
+        <button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=400,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
     </div>
 
     <div class="preview-container">

web/small.html

@@ -73,9 +73,10 @@
         </tr>
     </table>
 
-    <a class="preview-href" href="">Real-time scene preview.</a>
-    <a class="director-href" href="">Big panel for directors.</a>
-    <button class="popout"  onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</a>
+    <a class="preview-href" href="">Preview</a>,
+    <a class="director-href" href="">Director view</a>,
+    <a class="annunciators-href" href="">Annunciator panel only</a>,
+    <button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
 
     <script>
         init_all()