Merge pull request #888 from DJ2LS/ls-gui-adjustments

DJ2LS · Feb 16, 2025 · ca673dc · ca673dc
2 parents b6d745f + 9326cfc
commit ca673dc
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 41 deletions.
diff --git a/freedata_gui/src/components/chat_messages_image_preview.vue b/freedata_gui/src/components/chat_messages_image_preview.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="isImage">
-    <img :src="imageUrl" alt="Image Preview" class="img-fluid rounded w-100" />
+    <img :src="imageUrl" alt="Image Preview" class="img-fluid border rounded-top bg-light w-100" />
   </div>
 </template>
 

diff --git a/freedata_gui/src/components/chat_messages_received.vue b/freedata_gui/src/components/chat_messages_received.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row justify-content-start mb-2">
     <div :class="messageWidthClass">
-      <div class="card bg-light border-0 text-dark">
+      <div class="card bg-light border rounded-top text-dark">
         <div
           v-for="attachment in message.attachments"
           :key="attachment.id"
@@ -11,14 +11,14 @@
           <chat_messages_image_preview :attachment="attachment" />
 
           <div class="btn-group w-100" role="group">
-            <button class="btn btn-light text-truncate" disabled>
+            <button class="btn btn-light border rounded-bottom text-truncate" disabled>
               {{ attachment.name }}
             </button>
             <button
               @click="
                 downloadAttachment(attachment.hash_sha512, attachment.name)
               "
-              class="btn btn-light w-25"
+              class="btn btn-light border rounded-bottom w-25"
             >
               <i class="bi bi-download strong"></i>
             </button>

diff --git a/freedata_gui/src/components/chat_messages_sent.vue b/freedata_gui/src/components/chat_messages_sent.vue
@@ -29,7 +29,7 @@
     </div>
     <!-- message area -->
     <div :class="messageWidthClass" class="align-items-end">
-      <div class="card bg-secondary text-white">
+      <div class="card">
         <div
           v-for="attachment in message.attachments"
           :key="attachment.id"
@@ -56,8 +56,8 @@
           <p class="card-text text-break" v-html="parsedMessageBody"></p>
         </div>
 
-        <div class="card-footer p-0 bg-secondary border-top-0">
-          <p class="text p-0 m-0 me-1 text-end">
+        <div class="card-footer p-1 border-top-0">
+          <p class="text p-0 m-0 mb-1 me-1 text-end">
             <span class="badge badge-primary mr-2" :class="{
                 'bg-danger': message.status == 'failed',
                 'bg-primary': message.status == 'transmitting',
@@ -66,7 +66,7 @@
             >
               {{ message.status }}
             </span>
-            | <span class="badge badge-primary mr-2"> attempt: {{ message.attempt + 1 }} </span>|<span class="badge badge-primary mr-2"> {{ getDateTime }} UTC</span>
+            | <span class="badge text-bg-light mr-2"> attempt: {{ message.attempt + 1 }} </span>|<span class="badge text-bg-light mr-2"> {{ getDateTime }} UTC</span>
           </p>
         </div>
 

diff --git a/freedata_gui/src/components/chat_new_message.vue b/freedata_gui/src/components/chat_new_message.vue
@@ -300,10 +300,15 @@ function applyMarkdown(formatType) {
 
   <!-- Emoji Picker Modal -->
   <div class="modal fade" id="emojiPickerModal" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered modal-sm">
+    <div class="modal-dialog modal-dialog-centered modal">
       <div class="modal-content">
-        <div class="modal-body p-0">
-          <VuemojiPicker @emojiClick="handleEmojiClick" />
+        <div class="modal-header">
+        <h5 class="modal-title">Insert emoji</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#emojiPickerModal" aria-label="Close"></button>
+      </div>
+
+        <div class="modal-body">
+          <VuemojiPicker @emojiClick="handleEmojiClick"/>
         </div>
       </div>
     </div>

diff --git a/freedata_gui/src/components/dynamic_components.vue b/freedata_gui/src/components/dynamic_components.vue
@@ -130,14 +130,14 @@ const gridWidgets = [
   ),
   new gridWidget(
     active_audio_level,
-    { x: 16, y: 0, w: 8, h: 15 },
+    { x: 16, y: 0, w: 8, h: 20 },
     "Audio main",
     false,
     true,
     "Audio",
     2,
     false,
-    { x: 0, y: 114, w: 6, h: 30 }
+    { x: 0, y: 114, w: 6, h: 20 }
   ),
   new gridWidget(
     grid_freq,
@@ -152,14 +152,14 @@ const gridWidgets = [
   ),
   new gridWidget(
     active_rig_control,
-    { x: 0, y: 108, w: 6, h: 36 },
+    { x: 0, y: 108, w: 6, h: 25 },
     "Rig control main",
     true,
     true,
     "Rig",
     3,
     false,
-    { x: 0, y: 114, w: 6, h: 30 }
+    { x: 0, y: 114, w: 6, h: 25 }
   ),
   new gridWidget(
     grid_beacon,
@@ -174,14 +174,14 @@ const gridWidgets = [
   ),
   new gridWidget(
     active_broadcasts,
-    { x: 6, y: 70, w: 6, h: 15 },
+    { x: 6, y: 70, w: 6, h: 25 },
     "Broadcasts main (horizontal)",
     false,
     true,
     "Broadcasts",
     4,
     false,
-    { x: 6, y: 70, w: 6, h: 15 }
+    { x: 6, y: 70, w: 6, h: 25 }
   ),
   new gridWidget(
     mini_heard_stations,
@@ -262,7 +262,7 @@ const gridWidgets = [
   ),
   new gridWidget(
     grid_mycall_small,
-    { x: 8, y: 40, w: 4, h: 8 },
+    { x: 8, y: 40, w: 4, h: 10 },
     "My callsign widget (small)",
     false,
     true,

diff --git a/freedata_gui/src/components/grid/grid_active_audio.vue b/freedata_gui/src/components/grid/grid_active_audio.vue
@@ -9,7 +9,7 @@ const state = useStateStore(pinia);
 
 <template>
   <div class="card w-100 h-100">
-    <div class="card-header p-0 mb-1">
+    <div class="card-header mb-1">
       <i class="bi bi-volume-up" style="font-size: 1rem"></i>&nbsp;
       <strong>Audio</strong>
     </div>

diff --git a/freedata_gui/src/components/grid/grid_active_broadcasts.vue b/freedata_gui/src/components/grid/grid_active_broadcasts.vue
@@ -67,12 +67,12 @@ window.addEventListener(
 
 <template>
   <div class="card h-100">
-    <div class="card-header p-0">
+    <div class="card-header">
       <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
       <strong>Broadcasts</strong>
     </div>
-    <div class="card-body overflow-auto p-0">
-      <div class="input-group input-group-sm mb-0">
+    <div class="card-body overflow-auto">
+      <div class="input-group">
         <input
           type="text"
           class="form-control"
@@ -85,7 +85,7 @@ window.addEventListener(
           v-model="dxcallPing"
         />
         <button
-          class="btn btn-sm btn-outline-secondary"
+          class="btn btn-outline-secondary"
           id="sendPing"
           type="button"
           data-bs-placement="bottom"
@@ -100,7 +100,7 @@ window.addEventListener(
         </button>
 
         <button
-          class="btn btn-sm btn-outline-secondary ms-1"
+          class="btn btn-outline-secondary ms-1"
           id="sendCQ"
           type="button"
           title="Send a CQ to the world"
@@ -113,7 +113,7 @@ window.addEventListener(
         <button
           type="button"
           id="startBeacon"
-          class="btn btn-sm ms-1"
+          class="btn ms-1"
           @click="startStopBeacon"
           :class="{
             'btn-success': state.beacon_state,

diff --git a/freedata_gui/src/components/grid/grid_active_stats.vue b/freedata_gui/src/components/grid/grid_active_stats.vue
@@ -119,7 +119,10 @@ const scatterChartOptions = {
       position: "bottom",
       grid: {
         display: true,
-        lineWidth: 1, // Set the line width for x-axis grid lines
+        lineWidth: (context) => {
+          // Make the zero line thick (3) and other grid lines thin (1)
+          return context.tick.value === 0 ? 3 : 1;
+        },
       },
       ticks: {
         display: false,
@@ -130,7 +133,9 @@ const scatterChartOptions = {
       position: "left",
       grid: {
         display: true,
-        lineWidth: 1, // Set the line width for y-axis grid lines
+        lineWidth: (context) => {
+          return context.tick.value === 0 ? 3 : 1;
+        },
       },
       ticks: {
         display: false,
@@ -147,6 +152,7 @@ const scatterChartOptions = {
   },
 };
 
+
 const scatterChartData = computed(() => ({
   datasets: [
     {
@@ -179,7 +185,7 @@ onMounted(() => {
           role="tablist"
         >
           <a
-            class="py-0 list-group-item list-group-item-dark list-group-item-action"
+            class="py-0 list-group-item list-group-item-light list-group-item-action"
             data-bs-toggle="list"
             role="tab"
             aria-controls="list-waterfall"
@@ -189,7 +195,7 @@ onMounted(() => {
             <strong><i class="bi bi-water"></i></strong>
           </a>
           <a
-            class="py-0 list-group-item list-group-item-dark list-group-item-action"
+            class="py-0 list-group-item list-group-item-light list-group-item-action"
             data-bs-toggle="list"
             role="tab"
             aria-controls="list-scatter"
@@ -199,7 +205,7 @@ onMounted(() => {
             <strong><i class="bi bi-border-outer"></i></strong>
           </a>
           <a
-            class="py-0 list-group-item list-group-item-dark list-group-item-action"
+            class="py-0 list-group-item list-group-item-light list-group-item-action"
             data-bs-toggle="list"
             role="tab"
             aria-controls="list-chart"

diff --git a/freedata_gui/src/components/grid/grid_activities.vue b/freedata_gui/src/components/grid/grid_activities.vue
@@ -28,7 +28,7 @@ function getDateTime(timestampRaw) {
       <i class="bi bi-card-list" style="font-size: 1.2rem"></i>&nbsp;
       <strong>Activity</strong>
     </div>
-    <div class="card-body overflow-auto m-0 p-0" style="align-items: start">
+    <div class="card-body overflow-auto m-0" style="align-items: start">
       <div v-for="item in state.activities" :key="item[0]">
         <h6 style="text-align: start" class="mb-0">
         <span class="badge text-bg-primary">{{ item[1].origin }}</span>

diff --git a/freedata_gui/src/components/grid/grid_scatter.vue b/freedata_gui/src/components/grid/grid_scatter.vue
@@ -40,21 +40,26 @@ const scatterChartOptions = {
       position: "bottom",
       grid: {
         display: true,
-        lineWidth: 1, // Set the line width for x-axis grid lines
+        lineWidth: (context) => {
+          // Make the zero line thick (3) and other grid lines thin (1)
+          return context.tick.value === 0 ? 3 : 1;
+        },
       },
       ticks: {
-        display: true,
+        display: false,
       },
     },
     y: {
       type: "linear",
       position: "left",
       grid: {
         display: true,
-        lineWidth: 1, // Set the line width for y-axis grid lines
+        lineWidth: (context) => {
+          return context.tick.value === 0 ? 3 : 1;
+        },
       },
       ticks: {
-        display: true,
+        display: false,
       },
     },
   },
@@ -68,6 +73,8 @@ const scatterChartOptions = {
   },
 };
 
+
+
 const scatterChartData = computed(() => ({
   datasets: [
     {
@@ -83,8 +90,19 @@ const scatterChartData = computed(() => ({
 </script>
 
 <template>
-  <div class="w-100 h-100">
-    <Scatter :data="scatterChartData" :options="scatterChartOptions" />
-  </div>
+
+    <div class="card h-100">
+    <!--325px-->
+    <div class="card-header">
+      <i class="bi bi-border-outer" style="font-size: 1.2rem"></i>&nbsp;
+      <strong>Scatter diagram</strong>
+    </div>
+    <div class="card-body overflow-auto p-0">
+      <Scatter :data="scatterChartData" :options="scatterChartOptions" />
+    </div>
+      </div>
+
+
+
   <!--278px-->
 </template>
diff --git a/freedata_gui/src/components/grid/grid_stats_chart.vue b/freedata_gui/src/components/grid/grid_stats_chart.vue
@@ -94,8 +94,17 @@ const transmissionSpeedChartData = computed(() => ({
 </script>
 
 <template>
+   <div class="card h-100">
+    <!--325px-->
+    <div class="card-header">
+      <i class="bi bi-graph-up-arrow" style="font-size: 1.2rem"></i>&nbsp;
+      <strong>Transmission Charts</strong>
+    </div>
+    <div class="card-body overflow-auto p-0">
   <Line
     :data="transmissionSpeedChartData"
     :options="transmissionSpeedChartOptions"
   />
+        </div>
+       </div>
 </template>
diff --git a/freedata_gui/src/components/main_footer_navbar.vue b/freedata_gui/src/components/main_footer_navbar.vue
@@ -173,7 +173,7 @@ const state = useStateStore(pinia);
           aria-valuemax="100"
         ></div>
         <p class="justify-content-center m-0 d-flex position-absolute w-100 mt-1 text-light">
-          Message Progress {{state.arq_transmission_percent}}% [ {{ state.arq_bytes_per_minute || '---' }}
+          {{state.arq_transmission_percent}}% [ {{ state.arq_bytes_per_minute || '---' }}
     bpm / {{ state.arq_bits_per_second || '--' }}
     bps ]
         </p>

diff --git a/freedata_gui/src/styles.css b/freedata_gui/src/styles.css
@@ -77,6 +77,13 @@ th {
   border-radius: 10px;
 }
 
+emoji-picker {
+  width: 100%;
+}
+
+
+
+
 /* force gpu usage
 https://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way/13293044#13293044
 */

diff --git a/freedata_server/command_transmit_sine.py b/freedata_server/command_transmit_sine.py
@@ -2,5 +2,6 @@
 
 class TransmitSine(TxCommand):
     def transmit(self, modem):
-        #modem.transmit_sine()
-        modem.transmit_morse(0,0,[b''])
+        modem.transmit_sine()
+        # Code for debugging morse stuff...
+        #modem.transmit_morse(0,0,[b''])