work on beacon histogram

DJ2LS · Sep 15, 2024 · a0eca5f · a0eca5f
1 parent b3ea7f2
commit a0eca5f
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 100 deletions.
diff --git a/freedata_gui/src/components/chat_screen.vue b/freedata_gui/src/components/chat_screen.vue
@@ -23,11 +23,9 @@ import {
   Title,
   Tooltip,
   Legend,
-  BarElement,
 } from 'chart.js';
 
-import { Bar } from 'vue-chartjs';
-import { watch, nextTick, ref, computed } from 'vue';
+import { watch, nextTick, ref } from 'vue';
 import annotationPlugin from 'chartjs-plugin-annotation';
 
 ChartJS.register(
@@ -37,72 +35,10 @@ ChartJS.register(
   Title,
   Tooltip,
   Legend,
-  BarElement,
   annotationPlugin
 );
 
-const beaconHistogramOptions = {
-  type: 'bar',
-  bezierCurve: false, // remove curves from your plot
-  scaleShowLabels: false, // remove labels
-  tooltipEvents: [], // remove trigger from tooltips so they won't be shown
-  pointDot: false, // remove the points markers
-  scaleShowGridLines: true, // set to false to remove the grids background
-  maintainAspectRatio: true,
-  plugins: {
-    legend: {
-      display: false,
-    },
-    annotation: {
-      annotations: [
-        {
-          type: 'line',
-          mode: 'horizontal',
-          scaleID: 'y',
-          value: 0,
-          borderColor: 'darkgrey', // Set the color to dark grey for the zero line
-          borderWidth: 0.5, // Set the line width
-        },
-      ],
-    },
-  },
-
-  scales: {
-    x: {
-      position: 'bottom',
-      display: false,
-      min: -10,
-      max: 15,
-      ticks: {
-        display: false,
-      },
-    },
-    y: {
-      display: false,
-      min: -5,
-      max: 10,
-      ticks: {
-        display: false,
-      },
-    },
-  },
-};
-
-const beaconHistogramData = computed(() => ({
-  labels: chat.beaconLabelArray,
-  datasets: [
-    {
-      data: chat.beaconDataArray,
-      tension: 0.1,
-      borderColor: 'rgb(0, 255, 0)',
-
-      backgroundColor: function (context) {
-        const value = context.dataset.data[context.dataIndex];
-        return value >= 0 ? 'green' : 'red';
-      },
-    },
-  ],
-}));
+
 
 const messagesContainer = ref(null);
 watch(
@@ -147,34 +83,18 @@ watch(
     </button>
   </div>
 
-  <!-- Column for the beacons input group -->
-  <div class="col-auto" style="width: 300px;">
-    <div class="input-group mb-0 p-0">
-      <button type="button" class="btn btn-outline-secondary" disabled>
-        Beacons
-      </button>
-      <div class="form-floating border border-secondary-subtle border-1 rounded-end">
-        <Bar
-          :data="beaconHistogramData"
-          :options="beaconHistogramOptions"
-          width="300"
-          height="50"
-        />
-      </div>
-    </div>
-  </div>
 
   <!-- Column for the delete button -->
   <div class="col-auto">
     <div class="input-group mb-0 p-0">
       <button
         style="width: 100px;"
-        class="btn btn-secondary"
+        class="btn btn-outline-secondary ms-2"
         data-bs-target="#deleteChatModal"
         data-bs-toggle="modal"
         @click="chatSelected(callsign)"
       >
-        <i class="bi bi-journal-text h5"></i>
+        <i class="bi bi-graph-up h5"></i>
       </button>
     </div>
   </div>

diff --git a/freedata_gui/src/components/main_modals.vue b/freedata_gui/src/components/main_modals.vue
@@ -21,8 +21,9 @@
      Title,
      Tooltip,
      Legend,
+     BarElement,
    } from "chart.js";
-   import { Line } from "vue-chartjs";
+   import { Line, Bar } from "vue-chartjs";
    
    // Register Chart.js components
    ChartJS.register(
@@ -33,6 +34,7 @@
      Title,
      Tooltip,
      Legend,
+     BarElement,
    );
    
    // Initialize Pinia
@@ -123,6 +125,75 @@ const transmissionSpeedChartDataMessageInfo = computed(() => ({
     },
   ],
 }));
+
+
+const beaconHistogramOptions = {
+  type: 'bar',
+  bezierCurve: false, // remove curves from your plot
+  scaleShowLabels: false, // remove labels
+  tooltipEvents: [], // remove trigger from tooltips so they won't be shown
+  pointDot: false, // remove the points markers
+  scaleShowGridLines: true, // set to false to remove the grids background
+  maintainAspectRatio: true,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    annotation: {
+      annotations: [
+        {
+          type: 'line',
+          mode: 'horizontal',
+          scaleID: 'y',
+          value: 0,
+          borderColor: 'darkgrey', // Set the color to dark grey for the zero line
+          borderWidth: 0.5, // Set the line width
+        },
+      ],
+    },
+  },
+
+  scales: {
+    x: {
+      position: 'bottom',
+      display: true,
+      min: -10,
+      max: 15,
+      ticks: {
+        display: false,
+      },
+      text: 'timestamp',
+    },
+    y: {
+      display: true,
+      min: -5,
+      max: 10,
+      ticks: {
+        display: true,
+      },
+      text: 'SNR',
+    },
+  },
+};
+
+const beaconHistogramData = computed(() => ({
+  labels: chat.beaconLabelArray,
+  datasets: [
+    {
+      data: chat.beaconDataArray,
+      tension: 0.1,
+      borderColor: 'rgb(0, 255, 0)',
+
+      backgroundColor: function (context) {
+        const value = context.dataset.data[context.dataIndex];
+        return value >= 0 ? 'green' : 'red';
+      },
+    },
+  ],
+}));
+
+
+
    
    // Function to update station info
    function updateStationInfo() {
@@ -149,6 +220,11 @@ const transmissionSpeedChartDataMessageInfo = computed(() => ({
      let fullCall = `${mycall}-${myssid}`;
      getStationInfoByCallsign(fullCall);
    }
+
+
+
+
+
 </script>
 <template>
    <main_startup_check />
@@ -246,7 +322,7 @@ const transmissionSpeedChartDataMessageInfo = computed(() => ({
          <div class="modal-content">
             <div class="modal-header">
                <h1 class="modal-title fs-5" id="deleteChatModalLabel">
-                  Sub menu for: {{ chat.selectedCallsign }}
+                   {{ chat.selectedCallsign }} Options
                </h1>
                <button
                   type="button"
@@ -256,29 +332,53 @@ const transmissionSpeedChartDataMessageInfo = computed(() => ({
                   ></button>
             </div>
             <div class="modal-body">
-               <div class="input-group mb-3">
-                  <span class="input-group-text" 
-                     >Total Messages</span
-                     >
-                  <span class="input-group-text" >...</span>
-               </div>
-            </div>
-            <div class="modal-footer">
-               <button
+
+
+
+            <div class="card">
+  <div class="card-header">
+    <strong>Beacon histogram</strong>
+  </div>
+  <div class="card-body">
+    <Bar
+          :data="beaconHistogramData"
+          :options="beaconHistogramOptions"
+          width="300"
+          height="100"
+        />
+  </div>
+</div>
+
+
+            <div class="card mt-3">
+  <div class="card-header">
+    <strong>Further options</strong>
+  </div>
+  <div class="card-body">
+    <button
                   type="button"
-                  class="btn btn-secondary"
+                  class="btn btn-danger"
+                  @click="deleteChat"
                   data-bs-dismiss="modal"
                   >
-               Close
+               Delete Chat
                </button>
+  </div>
+</div>
+
+
+
+
+            </div>
+            <div class="modal-footer">
                <button
                   type="button"
-                  class="btn btn-danger"
-                  @click="deleteChat"
+                  class="btn btn-secondary"
                   data-bs-dismiss="modal"
                   >
-               Delete Chat
+               Close
                </button>
+
             </div>
          </div>
       </div>