The posters look pretty good now. A lot more is configurable.

src/lib/ae_events_stores.ts

@@ -114,7 +114,14 @@ let events_local_data_struct: key_val = {
         qry_limit__presenters: 75,
         qry_limit__sessions: 50,
 
+        hide__launcher_header: false,
+        hide__launcher_menu: true,
+        hide__launcher_footer: false,
+
+        hide__modal_header_title: false,
+
         hide_drawer__debug: true,
+        hide__ws_element: true,
         hide__ws_form: true,
         hide__ws_messages: true,
         hide__ws_commands: true,

src/lib/element_websocket_v2.svelte

@@ -12,6 +12,7 @@ interface Props {
     type?: null|string; // msg, cmd, json, hello, bye
     trigger_send?: any;
     classes?: string;
+    hide__ws_element?: boolean;
     hide__ws_form?: boolean;
     hide__ws_messages?: boolean;
     hide__ws_commands?: boolean;
@@ -34,6 +35,7 @@ let {
     type = null,
     trigger_send = $bindable(null),
     classes = 'container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 sm:mb-12 md:mb-8',
+    hide__ws_element = $bindable(false),
     hide__ws_form = $bindable(true),
     hide__ws_messages = $bindable(false),
     hide__ws_commands = $bindable(false),
@@ -310,7 +312,10 @@ function preventDefault(fn) {
 </script>
 
 
-<section class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mt-32 mb-32 relative">
+<section
+    class:hidden={!ws_connect || hide__ws_element}
+    class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mt-32 mb-32 relative"
+    >
 
 <span class="absolute top-0 right-0 flex flex-col gap-1">
     <button

src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte

@@ -124,6 +124,34 @@ let lq__event_obj = $derived(liveQuery(async () => {
     return results;
 }));
 
+// Event Device
+let lq__event_device_obj = $derived(liveQuery(async () => {
+    if (log_lvl) {
+        console.log(`lq__event_device_obj: event_device_id = ${$events_slct?.event_device_id}`);
+    }
+    let results = await db_events.device
+        .get($events_slct.event_device_id);
+    if (log_lvl) {
+        console.log(`lq__event_device_obj: results = `, results);
+    }
+
+    // Check if results are different than the current session version stored under $events_slct
+    if ($events_slct.event_device_obj && results) {
+        if (JSON.stringify($events_slct.event_device_obj) !== JSON.stringify(results)) {
+            $events_slct.event_device_obj = { ...results};
+            if (log_lvl) {
+                console.log(`Device slct stored version has changed for ID = ${$events_slct.event_device_id}`, $events_slct.event_device_obj);
+            }
+        } else {
+            if (log_lvl > 1) {
+                console.log(`Device slct stored version has not changed for ID = ${$events_slct.event_device_id}`);
+            }
+        }
+    }
+
+    return results;
+}));
+
 // Event File - For Event
 let lq__event_event_file_obj_li = $derived(liveQuery(async () => {
     let results = await db_events.file
@@ -699,23 +727,23 @@ $effect(() => {
     </title>
 </svelte:head>
 
-<!-- max-w-(--breakpoint-xl)  -->
+<!-- outline-2 outline-red-500  -->
 <div
     class="
         static
         m-auto
-
         border-x border-gray-200 dark:border-gray-600
-        mt-12 mb-14 sm:mb-12
+        mt-4 mb-16 sm:mb-12
         h-full
         w-full max-w-7xl
-        outline
+        transition-all
         "
         >
 
 
 <header
     id="Main-Header"
+    class:hidden={$events_loc.launcher.hide__launcher_header}
     class="
         z-20
         absolute top-0 left-0 right-0
@@ -913,6 +941,7 @@ $effect(() => {
 
 <footer
     id="Main-Footer"
+    class:hidden={$events_loc.launcher.hide__launcher_footer}
     class="
         z-20
         absolute bottom-0 left-0 right-0
@@ -935,24 +964,25 @@ $effect(() => {
     [Help]
     </div> -->
 
-    <div class="slct_location_name">
+    <div class="slct_location_name transition-all duration-1000">
     <span class="fas fa-map-marker-alt"></span>
     {$lq__event_location_obj?.name}
+    {$lq__event_device_obj?.name}
     </div>
 
     <span
-        class="*:hover:inline px-1 rounded-md"
         class:preset-tonal-warning={!$events_loc.launcher.ws_connect}
         class:preset-tonal-success={$events_loc.launcher.ws_connect}
+        class="group px-1 rounded-md transition-all duration-1000"
         >
         {#if $events_sess.launcher.ws_connect_status == 'connected'}
             <span class="fas fa-wifi mx-1"></span>
-            <span class="hidden">
+            <span class="hidden group-hover:inline">
             WebSocket Connected
             </span>
         {:else}
         <span class="fas fa-times mx-1"></span>
-            <span class="hidden">
+            <span class="hidden group-hover:inline">
             WebSocket Disconnected
             </span>
         {/if}
@@ -1015,7 +1045,7 @@ $effect(() => {
             easing: sineIn
         }
     }
-    width={'min-w-80 w-1/2 max-w-(--breakpoint-lg)'}
+    width={'w-md'}
     bind:hidden={$events_loc.launcher.hide_drawer__cfg}
     id="sidebar1"
     >
@@ -1023,9 +1053,9 @@ $effect(() => {
     <Launcher_cfg></Launcher_cfg>
 
 
-    <hr />
+    <hr class="my-2 border-gray-300 dark:border-gray-600" />
 
-    <div class="flex flex-row flex-wrap gap-0.5 items-center justify-center">
+    <div class="flex flex-row flex-wrap gap-0.5 items-center justify-center max-w-md">
         <a href="/events/{$events_slct.event_id}" class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
             <span class="fas fa-search m-1"></span>
             Session Search
@@ -1051,6 +1081,7 @@ $effect(() => {
             class="btn btn-sm variant-ghost-tertiary hover:variant-filled-tertiary"
             >Test 2</button> -->
     </div>
+
 </Drawer>
 
 
@@ -1120,7 +1151,7 @@ $effect(() => {
         min-w-full
         "
     bodyClass='p-0 overflow-y-auto overscroll-contain'
-    headerClass={`fixed top-0 right-0 left-0 z-20 p-1 md:p-2 flex flex-row items-center justify-between ${$events_loc.launcher.controller == 'remote' ? 'hidden' : ''} bg-white dark:bg-gray-800 opacity-50`}
+    headerClass={`fixed top-0 right-0 left-0 p-1 md:p-2 flex flex-row items-center ${$events_loc.launcher.controller == 'remote' ? 'hidden' : ''} bg-white dark:bg-gray-800 opacity-50 ${$events_loc.launcher.hide__modal_header_title ? 'justify-center' : 'justify-between'}`}
     footerClass='text-center'
     onclose={async () => {
         $events_sess.launcher.modal__open_event_file_id = null;
@@ -1141,11 +1172,14 @@ $effect(() => {
 
     {#snippet header()}
     <!-- <div class="flex flex-row items-center justify-between"> -->
-        <h3 class="text-lg font-semibold">
+        <h3
+            class:hidden={$events_loc.launcher.hide__modal_header_title}
+            class="text-lg font-semibold opacity-20 hover:opacity-100 transition-all">
             {$events_sess.launcher?.modal__title ?? 'Digital Poster Display'}
         </h3>
         <button
             type="button"
+            class="btn flex-row-reverse group transition-all justify-self-end"
             onclick={() => {
                 $events_sess.launcher.modal__open_event_file_id = null;
                 if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
@@ -1153,8 +1187,9 @@ $effect(() => {
             }}
             title="Close Modal"
             >
-            <span class="fas fa-times m-1"></span>
+            <span class="fas fa-times my-1.5"></span>
-            <span class="hidden ">Close</span>
+            <span class="hidden group-hover:inline">
+                Close</span>
         </button>
     <!-- </div> -->
     {/snippet}
@@ -1174,10 +1209,18 @@ $effect(() => {
             $events_sess.launcher.controller_trigger_send = true;
             // $events_sess.launcher.modal__open = false;
         }}
-        class="absolute top-0 right-20 m-1 p-1 btn btn-sm preset-tonal-error hover:preset-filled-error-500"
+        class="
+            absolute top-0 right-12
+            m-1 p-1
+            btn btn-sm
+            preset-tonal-error preset-outlined-error hover:preset-filled-success-200-800
+            transition-all
+            "
         class:hidden={$events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected'}
+        title="Close the remote device's display of the poster"
         >
         <span class="fas fa-times m-1"></span>
+        <span class="fas fa-tv"></span>
         Close Remote Poster Display Only
     </button>
     <!-- Open: {$ae_api.base_url} {$events_sess.launcher.modal__open_event_file_id} -->
@@ -1206,10 +1249,18 @@ $effect(() => {
             $events_sess.launcher.controller_trigger_send = true;
             // $events_sess.launcher.modal__open = false;
         }}
-        class="absolute bottom-0 left-20 m-1 p-1 btn btn-sm preset-tonal-error hover:preset-filled-error-500"
+        class="
+            absolute bottom-0 left-12
+            m-1 p-1
+            btn btn-sm
+            preset-tonal-error preset-outlined-error hover:preset-filled-success-200-800
+            transition-all
+            "
         class:hidden={$events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected'}
+        title="Close the remote device's display of the poster"
         >
         <span class="fas fa-times m-1"></span>
+        <span class="fas fa-tv"></span>
         Close Remote Poster Display Only
     </button>
 
@@ -1222,11 +1273,25 @@ $effect(() => {
             $events_sess.launcher.modal__open_event_file_id = null;
             $events_sess.launcher.modal__event_file_obj = null;
         }}
-        class="absolute bottom-0 right-20 m-1 p-1 btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
+        class="
+            absolute bottom-0 right-12
+            m-1 p-1
+            btn btn-sm
+            preset-tonal-success preset-outlined-success hover:preset-filled-success-200-800
+            transition-all
+            "
         class:hidden={!$ae_loc.trusted_access && ($events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected')}
+        title="Close this controller's local modal display of this poster"
         >
         <span class="fas fa-times m-1"></span>
-        Close Controller Poster Only
+        <span class="fas fa-list"></span>
+        Close
+        <!-- Controller -->
+        <!-- Local -->
+        Poster
+        <!-- Here -->
+        on This Device
+        <!-- Only -->
     </button>
 
     <!-- <svelte:fragment slot="footer">
@@ -1264,6 +1329,7 @@ $effect(() => {
         type={'cmd'}
         bind:trigger_send={$events_sess.launcher.controller_trigger_send}
 
+        bind:hide__ws_element={$events_loc.launcher.hide__ws_element}
         bind:hide__ws_form={$events_loc.launcher.hide__ws_form}
         bind:hide__ws_messages={$events_loc.launcher.hide__ws_messages}
         bind:hide__ws_commands={$events_loc.launcher.hide__ws_commands}

src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte

@@ -11,7 +11,14 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
 </script>
 
 
-<div class="flex flex-row items-center justify-between">
+<div
+    class="
+        flex flex-col gap-1 items-center justify-start
+        w-full max-w-md
+        "
+    >
+
+<div class="flex flex-row items-center justify-between w-full">
     <h2
         class="text-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400"
         >
@@ -28,11 +35,11 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
 </div>
 
 
-<hr>
+<hr class="my-2 border-gray-300 dark:border-gray-600" />
 
-<section class="controller">
+<section class="controller w-full">
     <h3
-        class="text-center mb-4 text-sm font-semibold"
+        class="text-center mb-2 text-sm font-semibold"
         >
         <button
             onclick={() => {
@@ -123,17 +130,20 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
     </div>
 </section>
 
-<hr>
+<hr class="my-2 border-gray-300 dark:border-gray-600" />
 
 
+<section class="screen_saver w-full">
 <h3
-    class="text-center mb-4 text-sm font-semibold"
+    class="text-center mb-2 text-sm font-semibold w-full"
     >
     Screen Saver
 </h3>
 
+</section>
 
-<hr>
+
+<hr class="my-2 border-gray-300 dark:border-gray-600" />
 
 
 <!-- App Modes: default (browser), onsite (browser onsite), native (Electron app onsite) -->
@@ -146,9 +156,9 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
     * native Electron caching and open method (download to cache, copy and then open)
 * URL: new browser window
 -->
-<section class="app_modes">
+<section class="app_modes w-full">
     <h3
-        class="text-center mb-4 text-sm font-semibold"
+        class="text-center mb-2 text-sm font-semibold"
         >
         <button
             onclick={() => {
@@ -167,10 +177,11 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
     </h3>
 
     <div
-        class="grid grid-cols-2 gap-2"
+        class="flex flex-col gap-1 items-center justify-start w-full"
         class:hidden={!$events_loc.launcher.show_section__app_modes}
         >
 
+        <div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
         {#if !$events_loc.launcher.app_mode || $events_loc.launcher.app_mode != 'default'}
             <button
                 class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
@@ -210,8 +221,9 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
                 Change to Onsite Mode
             </button>
         {/if}
+        </div>
 
-
+        <div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
         {#if $events_loc.launcher.hide__launcher_menu}
             <button
                 class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
@@ -225,6 +237,61 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
                 Show Launcher Menu
             </button>
         {/if}
+        {#if !$events_loc.launcher.hide__launcher_header}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__launcher_header = true;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Hide launcher header"
+                >
+                Hide Launcher Header
+            </button>
+        {/if}
+        {#if $events_loc.launcher.hide__launcher_header}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__launcher_header = false;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Show launcher header"
+                >
+                Show Launcher Header
+            </button>
+        {/if}
+
+        {#if !$events_loc.launcher.hide__launcher_footer}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__launcher_footer = true;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Hide launcher footer"
+                >
+                Hide Launcher Footer
+            </button>
+        {/if}
+        {#if $events_loc.launcher.hide__launcher_footer}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__launcher_footer = false;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Show launcher footer"
+                >
+                Show Launcher Footer
+            </button>
+        {/if}
+
+        <!-- Show/Hide Launcher Menu -->
         {#if !$events_loc.launcher.hide__launcher_menu}
             <button
                 class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
@@ -238,21 +305,132 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
                 Hide Launcher Menu
             </button>
         {/if}
+        <!-- Show/Hide Session Start/End Datetimes hide__session_datetimes -->
+        {#if !$events_loc.launcher.hide__session_datetimes}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__session_datetimes = true;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Hide session start/end datetimes"
+                >
+                Hide Session Datetimes
+            </button>
+        {/if}
+        {#if $events_loc.launcher.hide__session_datetimes}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__session_datetimes = false;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Show session start/end datetimes"
+                >
+                Show Session Datetimes
+            </button>
+        {/if}
+
+        <button
+                type="button"
+                onclick={() => {
+                    if ($events_loc.launcher.time_format == 'time_12_short') {
+                        // $events_loc.launcher.datetime_format = 'datetime_long';
+                        $events_loc.launcher.time_format = 'time_short';
+                        $events_loc.launcher.time_hours = 24;
+                    } else {
+                        $events_loc.launcher.time_format = 'time_12_short';
+                        // $events_loc.launcher.datetime_format = 'datetime_12_long';
+                        $events_loc.launcher.time_hours = 12;
+                    }
+                }}
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                >
+                Time Format:
+                {#if $events_loc.launcher.time_format == 'time_12_short'}
+                    12-hour
+                {:else}
+                    24-hour
+                {/if}
+        </button>
+
+        <!-- Show/Hide Websocket element hide__ws_element -->
+        {#if !$events_loc.launcher.hide__ws_element}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__ws_element = true;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Hide WebSocket element"
+                >
+                Hide WebSocket Element
+            </button>
+        {/if}
+        {#if $events_loc.launcher.hide__ws_element}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__ws_element = false;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Show WebSocket element"
+                >
+                Show WebSocket Element
+            </button>
+        {/if}
+
+        <!-- Show/Hide modal header title hide__modal_header_title -->
+        {#if !$events_loc.launcher.hide__modal_header_title}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__modal_header_title = true;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Hide modal header title"
+                >
+                Hide Modal Header Title
+            </button>
+        {/if}
+        {#if $events_loc.launcher.hide__modal_header_title}
+            <button
+                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
+                onclick={() => {
+                    $events_loc.launcher.hide__modal_header_title = false;
+                    // ae_event_launcher.set($ae_event_launcher);
+                    // console.log($events_loc.launcher);
+                }}
+                title="Show modal header title"
+                >
+                Show Modal Header Title
+            </button>
+        {/if}
+
+        </div>
 
     </div>
 </section>
 
 
 
+<section class="local_cfg_refresh w-full">
 <h3
-    class="text-center mb-4 text-sm font-semibold"
+    class="text-center mb-2 text-sm font-semibold"
     >
     Local Config Refresh
 </h3>
 
 
+</section>
 
-<hr />
+
+<hr class="my-2 border-gray-300 dark:border-gray-600" />
 
 
 <div class="text-center">
@@ -265,3 +443,5 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
         <!-- Debug -->
     </button>
 </div>
+
+</div>

src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte

@@ -260,6 +260,7 @@ async function handle_open_file() {
         flex flex-col md:flex-row flex-wrap
         gap-1 items-center
         max-w-full
+        transition-all
         "
     class:justify-between={!hide_meta}
     class:justify-center={hide_meta}

src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte

@@ -28,6 +28,7 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
 import { db_events } from "$lib/ae_events/db_events";
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { events_func } from '$lib/ae_events_functions';
+	import { hide } from '@popperjs/core';
 
 
 // let load_event_session_obj = events_func.load_ae_obj_id__event_session({
@@ -239,6 +240,7 @@ let ae_promises: key_val = $state({});
     <header class="event_session_about text-center border-b-2 border-gray-400 flex flex-row flex-wrap gap-2 items-center justify-between">
 
         <h3
+            class:hidden={!$lq__event_session_obj?.start_datetime || $events_loc.launcher.hide__session_datetimes}
             class="shrink event_session_datetimes"
             >
             <button
@@ -267,7 +269,11 @@ let ae_promises: key_val = $state({});
             </button>
         </h3>
 
-        <span class="grow flex flex-row gap-2 items-center justify-end">
+        <span
+            class:justify-between={$events_loc.launcher.hide__session_datetimes}
+            class:justify-end={!$events_loc.launcher.hide__session_datetimes}
+            class="grow flex flex-row gap-2 items-center"
+            >
         <h2
             class="shrink text-xl"
             title={`Name: ${$lq__event_session_obj.name}\nType: ${$lq__event_session_obj.type_code} \nCode: ${$lq__event_session_obj.code} \nID: ${$lq__event_session_obj.event_session_id_random} \nStart Date/Time: ${ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'week_long')} ${ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, $events_loc.launcher.time_format)} \nEnd Date/Time: ${ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.launcher.time_format)}`}