From c2b7d26cd04d64b41b31c5d37e17815be1cee47b Mon Sep 17 00:00:00 2001
From: Alan Talavera-Cordova <126989249+YoloMcFroyo@users.noreply.github.com>
Date: Mon, 3 Feb 2025 20:21:50 -0800
Subject: [PATCH 1/5] alant - Create test publisher

---
 src/components/PublishTesterComponent.vue | 149 ++++++++++++++++++++++
 src/pages/DevTab.vue                      |   2 +
 2 files changed, 151 insertions(+)
 create mode 100644 src/components/PublishTesterComponent.vue

diff --git a/src/components/PublishTesterComponent.vue b/src/components/PublishTesterComponent.vue
new file mode 100644
index 0000000..6ec5e2e
--- /dev/null
+++ b/src/components/PublishTesterComponent.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { createPublisher } from '@/lib/roslibUtils/createPublisher';
+import { createSubscriber } from '@/lib/roslibUtils/createSubscriber';
+import { ref, computed } from 'vue';
+import type { TopicType } from '@/lib/roslibUtils/rosTypes';
+
+// Define the message types
+const messageTypes = [
+  'std_msgs/Int32',
+  'std_msgs/Bool',
+  'std_msgs/String',
+  'std_msgs/Char',
+  'std_msgs/Float32',
+  'std_msgs/Time',
+  'sensor_msgs/msg/CompressedImage',
+];
+
+const input1 = ref('');
+const input2 = ref('');
+const input3 = ref('');
+const customMessageType = ref('');
+const receivedMessage = ref('');
+
+const currentConnectionIdx = computed(() => {
+  let idx = messageTypes.indexOf(input2.value);
+  if (idx === -1) idx = messageTypes.length; // Custom input index
+  return idx;
+});
+
+function publishTest() {
+  const topicName = input1.value;
+  const topicType = currentConnectionIdx.value === messageTypes.length ? customMessageType.value : input2.value;
+  const topicMessage = input3.value;
+
+  if (topicName && topicType && topicMessage) {
+    const testPublisher = createPublisher({
+      topicName: topicName,
+      topicType: topicType as TopicType,
+    });
+
+    testPublisher.publish({
+      data: topicMessage,
+    });
+    console.log("Published:", { topicName, topicType, data: topicMessage });
+
+    const testSubscriber = createSubscriber({
+      topicName: topicName,
+      topicType: topicType as TopicType,
+    });
+
+    testSubscriber.start({
+      callback: (message) => {
+        receivedMessage.value = JSON.stringify(message);
+      },
+    });
+  } else {
+    alert("Please fill in all fields.");
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="publishTest" id="publish-form" class="content">
+    <h1>Test Publisher</h1>
+
+    <div class="textfield">
+      <label for="topic-name-input">Topic Name: </label>
+      <input v-model="input1" type="text" id="topic-name-input" required />
+    </div>
+
+    <div class="textfield">
+      <label for="message-type-input">Message Type: </label>
+      <select v-model="input2" id="message-type-input" required>
+        <option v-for="messageType in messageTypes" :key="messageType" :value="messageType">
+          {{ messageType }}
+        </option>
+        <option value="">Other</option>
+      </select>
+      <input v-if="currentConnectionIdx === messageTypes.length" v-model="customMessageType" type="text" placeholder="Custom Message Type" required />
+    </div>
+
+    <div class="textfield">
+      <label for="textfield-input">Data: </label>
+      <input v-model="input3" type="text" id="textfield-input" required />
+    </div>
+    <button type="submit">Publish</button>
+  </form>
+
+  <div v-if="receivedMessage" class="subscriber-box">
+    <h2>Received Message:</h2>
+    <pre>{{ receivedMessage }}</pre>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+h1 {
+  margin-bottom: 20px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.textfield {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+#message-type-input {
+  width: 140px;
+}
+
+label {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: 900;
+  width: 120px;
+  text-align: right;
+}
+
+input {
+  flex: 1; 
+  height: 30px;
+}
+
+button {
+  background-color: var(--correct);
+  align-self: center;
+}
+
+.subscriber-box {
+  margin-top: 20px;
+  padding: 10px;
+  border: 1px solid var(--light-grey);
+  border-radius: 5px;
+  background-color: var(--dark-grey);
+  color: var(--white);
+  width: 100%;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/DevTab.vue b/src/pages/DevTab.vue
index d45a295..338a6ac 100644
--- a/src/pages/DevTab.vue
+++ b/src/pages/DevTab.vue
@@ -2,10 +2,12 @@
 <!-- Eventually will be a debugger like listing all of the topicName, topicTypes -->
 <script setup lang="ts">
 import ExampleComponent from '@/components/ExampleComponent.vue';
+import PublishTesterComponent from '@/components/PublishTesterComponent.vue';
 </script>
 <template>
   <div class="two-by-three-grid-page">
     <ExampleComponent />
+    <PublishTesterComponent />
     <h1>Not yet Implemented</h1>
     <h1>Not yet Implemented</h1>
     <h1>Not yet Implemented</h1>

From fd17a4db889c5ea83c1804bf3b338907491def3b Mon Sep 17 00:00:00 2001
From: Alan Talavera-Cordova <126989249+YoloMcFroyo@users.noreply.github.com>
Date: Mon, 3 Feb 2025 21:42:47 -0800
Subject: [PATCH 2/5] fix types to be accurate for their given and move
 subscriber box within form container

---
 src/components/PublishTesterComponent.vue | 42 +++++++++++++++++------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/PublishTesterComponent.vue b/src/components/PublishTesterComponent.vue
index 6ec5e2e..e8d3181 100644
--- a/src/components/PublishTesterComponent.vue
+++ b/src/components/PublishTesterComponent.vue
@@ -27,10 +27,31 @@ const currentConnectionIdx = computed(() => {
   return idx;
 });
 
+function convertMessage(topicType: string, message: string) {
+  switch (topicType) {
+    case 'std_msgs/Int32':
+      return { data: parseInt(message) };
+    case 'std_msgs/Bool':
+      return { data: message.toLowerCase() === 'true' };
+    case 'std_msgs/String':
+      return { data: message };
+    case 'std_msgs/Char':
+      return { data: message.charAt(0) };
+    case 'std_msgs/Float32':
+      return { data: parseFloat(message) };
+    case 'std_msgs/Time':
+      return { data: new Date(message).toISOString() };
+    case 'sensor_msgs/msg/CompressedImage':
+      return { data: message }; // Assuming the message is a base64 encoded string
+    default:
+      return { data: message };
+  }
+}
+
 function publishTest() {
   const topicName = input1.value;
   const topicType = currentConnectionIdx.value === messageTypes.length ? customMessageType.value : input2.value;
-  const topicMessage = input3.value;
+  const topicMessage = convertMessage(topicType, input3.value);
 
   if (topicName && topicType && topicMessage) {
     const testPublisher = createPublisher({
@@ -38,10 +59,7 @@ function publishTest() {
       topicType: topicType as TopicType,
     });
 
-    testPublisher.publish({
-      data: topicMessage,
-    });
-    console.log("Published:", { topicName, topicType, data: topicMessage });
+    testPublisher.publish(topicMessage);
 
     const testSubscriber = createSubscriber({
       topicName: topicName,
@@ -84,12 +102,14 @@ function publishTest() {
       <input v-model="input3" type="text" id="textfield-input" required />
     </div>
     <button type="submit">Publish</button>
+
+    <div v-if="receivedMessage" class="subscriber-box">
+      <h2>Received Message:</h2>
+      <pre>{{ receivedMessage }}</pre>
+    </div>
   </form>
 
-  <div v-if="receivedMessage" class="subscriber-box">
-    <h2>Received Message:</h2>
-    <pre>{{ receivedMessage }}</pre>
-  </div>
+  
 </template>
 
 <style lang="scss" scoped>
@@ -139,11 +159,13 @@ button {
   border-radius: 5px;
   background-color: var(--dark-grey);
   color: var(--white);
-  width: 100%;
+  width: 300px;
+  max-height: 80px;
 }
 
 pre {
   white-space: pre-wrap;
   word-wrap: break-word;
+  font-size: 12px;
 }
 </style>
\ No newline at end of file

From 8348ffb156315a5546ab8d281fd70eff183db560 Mon Sep 17 00:00:00 2001
From: Alan Talavera-Cordova <126989249+YoloMcFroyo@users.noreply.github.com>
Date: Fri, 7 Feb 2025 16:53:23 -0800
Subject: [PATCH 3/5] fixxed variable names. changed button to shift w/ size

---
 src/components/PublishTesterComponent.vue | 128 +++++++++++++---------
 1 file changed, 77 insertions(+), 51 deletions(-)

diff --git a/src/components/PublishTesterComponent.vue b/src/components/PublishTesterComponent.vue
index e8d3181..4e6b7f7 100644
--- a/src/components/PublishTesterComponent.vue
+++ b/src/components/PublishTesterComponent.vue
@@ -15,14 +15,14 @@ const messageTypes = [
   'sensor_msgs/msg/CompressedImage',
 ];
 
-const input1 = ref('');
-const input2 = ref('');
-const input3 = ref('');
+const topicNameInput = ref('');
+const messageTypeInput = ref('');
+const dataInput = ref('');
 const customMessageType = ref('');
 const receivedMessage = ref('');
 
-const currentConnectionIdx = computed(() => {
-  let idx = messageTypes.indexOf(input2.value);
+const messageTypeID = computed(() => {
+  let idx = messageTypes.indexOf(messageTypeInput.value);
   if (idx === -1) idx = messageTypes.length; // Custom input index
   return idx;
 });
@@ -49,9 +49,10 @@ function convertMessage(topicType: string, message: string) {
 }
 
 function publishTest() {
-  const topicName = input1.value;
-  const topicType = currentConnectionIdx.value === messageTypes.length ? customMessageType.value : input2.value;
-  const topicMessage = convertMessage(topicType, input3.value);
+  const topicName = topicNameInput.value;
+  const topicType =
+    messageTypeID.value === messageTypes.length ? customMessageType.value : messageTypeInput.value;
+  const topicMessage = convertMessage(topicType, dataInput.value);
 
   if (topicName && topicType && topicMessage) {
     const testPublisher = createPublisher({
@@ -59,8 +60,6 @@ function publishTest() {
       topicType: topicType as TopicType,
     });
 
-    testPublisher.publish(topicMessage);
-
     const testSubscriber = createSubscriber({
       topicName: topicName,
       topicType: topicType as TopicType,
@@ -71,51 +70,63 @@ function publishTest() {
         receivedMessage.value = JSON.stringify(message);
       },
     });
+
+    testPublisher.publish(topicMessage);
   } else {
-    alert("Please fill in all fields.");
+    alert('Please fill in all fields.');
   }
 }
 </script>
 
 <template>
-  <form @submit.prevent="publishTest" id="publish-form" class="content">
-    <h1>Test Publisher</h1>
-
-    <div class="textfield">
-      <label for="topic-name-input">Topic Name: </label>
-      <input v-model="input1" type="text" id="topic-name-input" required />
-    </div>
-
-    <div class="textfield">
-      <label for="message-type-input">Message Type: </label>
-      <select v-model="input2" id="message-type-input" required>
-        <option v-for="messageType in messageTypes" :key="messageType" :value="messageType">
-          {{ messageType }}
-        </option>
-        <option value="">Other</option>
-      </select>
-      <input v-if="currentConnectionIdx === messageTypes.length" v-model="customMessageType" type="text" placeholder="Custom Message Type" required />
-    </div>
-
-    <div class="textfield">
-      <label for="textfield-input">Data: </label>
-      <input v-model="input3" type="text" id="textfield-input" required />
-    </div>
-    <button type="submit">Publish</button>
-
-    <div v-if="receivedMessage" class="subscriber-box">
-      <h2>Received Message:</h2>
-      <pre>{{ receivedMessage }}</pre>
-    </div>
-  </form>
-
-  
+  <div class="container">
+    <h2>Test Publisher</h2>
+    <form @submit.prevent="publishTest" id="publish-form" class="content">
+      <div class="textfield">
+        <label for="topic-name-input">Topic Name: </label>
+        <input v-model="topicNameInput" type="text" id="topic-name-input" required />
+      </div>
+
+      <div class="textfield">
+        <label for="message-type-input">Message Type: </label>
+        <select v-model="messageTypeInput" id="message-type-input" required>
+          <option v-for="messageType in messageTypes" :key="messageType" :value="messageType">
+            {{ messageType }}
+          </option>
+          <option value="">Other</option>
+        </select>
+        <input
+          v-if="messageTypeID === messageTypes.length"
+          v-model="customMessageType"
+          type="text"
+          placeholder="Custom Message Type"
+          required
+        />
+      </div>
+
+      <div class="textfield">
+        <label for="textfield-input">Data: </label>
+        <input v-model="dataInput" type="text" id="textfield-input" required />
+      </div>
+
+      <div class="button-container">
+        <div class="taking-space"></div>
+        <button type="submit">Publish</button>
+      </div>
+
+      <div v-if="receivedMessage" class="subscriber-box">
+        <h2>Received Message:</h2>
+        <pre>{{ receivedMessage }}</pre>
+      </div>
+    </form>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-h1 {
-  margin-bottom: 20px;
-}
+// .container {
+//   display: flex;
+//   flex-direction: column;
+// }
 
 .content {
   display: flex;
@@ -126,30 +137,45 @@ h1 {
 
 .textfield {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin-bottom: 16px;
 }
 
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+  max-width: 270px;
+  width: 100%;
+  flex-shrink: 1;
+}
+
 #message-type-input {
-  width: 140px;
+  width: 143px;
 }
 
 label {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   font-weight: 900;
   width: 120px;
   text-align: right;
 }
 
 input {
-  flex: 1; 
+  flex: 1;
   height: 30px;
 }
 
+taking-space {
+  margin-right: auto;
+}
+
 button {
   background-color: var(--correct);
-  align-self: center;
+  // margin-left: auto;
+  flex-shrink: 0;
 }
 
 .subscriber-box {
@@ -168,4 +194,4 @@ pre {
   word-wrap: break-word;
   font-size: 12px;
 }
-</style>
\ No newline at end of file
+</style>

From b7bea38ee9e020f1aa556855728542d8bceae105 Mon Sep 17 00:00:00 2001
From: Alan Talavera-Cordova <126989249+YoloMcFroyo@users.noreply.github.com>
Date: Fri, 7 Feb 2025 17:09:34 -0800
Subject: [PATCH 4/5] fixed format warnings

---
 src/components/PublishTesterComponent.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/PublishTesterComponent.vue b/src/components/PublishTesterComponent.vue
index 4e6b7f7..56119da 100644
--- a/src/components/PublishTesterComponent.vue
+++ b/src/components/PublishTesterComponent.vue
@@ -81,15 +81,15 @@ function publishTest() {
 <template>
   <div class="container">
     <h2>Test Publisher</h2>
-    <form @submit.prevent="publishTest" id="publish-form" class="content">
+    <form id="publish-form" class="content" @submit.prevent="publishTest">
       <div class="textfield">
         <label for="topic-name-input">Topic Name: </label>
-        <input v-model="topicNameInput" type="text" id="topic-name-input" required />
+        <input v-model="topicNameInput" id="topic-name-input" type="text" required />
       </div>
 
       <div class="textfield">
         <label for="message-type-input">Message Type: </label>
-        <select v-model="messageTypeInput" id="message-type-input" required>
+        <select id="message-type-input" v-model="messageTypeInput" required>
           <option v-for="messageType in messageTypes" :key="messageType" :value="messageType">
             {{ messageType }}
           </option>
@@ -106,7 +106,7 @@ function publishTest() {
 
       <div class="textfield">
         <label for="textfield-input">Data: </label>
-        <input v-model="dataInput" type="text" id="textfield-input" required />
+        <input v-model="dataInput" id="textfield-input" type="text" required />
       </div>
 
       <div class="button-container">

From d338e97459f0153de3c71f4eb08c09f3c3200f88 Mon Sep 17 00:00:00 2001
From: Alan Talavera-Cordova <126989249+YoloMcFroyo@users.noreply.github.com>
Date: Fri, 7 Feb 2025 17:10:56 -0800
Subject: [PATCH 5/5] fixed format warnings

---
 src/components/PublishTesterComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PublishTesterComponent.vue b/src/components/PublishTesterComponent.vue
index 56119da..9288d80 100644
--- a/src/components/PublishTesterComponent.vue
+++ b/src/components/PublishTesterComponent.vue
@@ -84,7 +84,7 @@ function publishTest() {
     <form id="publish-form" class="content" @submit.prevent="publishTest">
       <div class="textfield">
         <label for="topic-name-input">Topic Name: </label>
-        <input v-model="topicNameInput" id="topic-name-input" type="text" required />
+        <input id="topic-name-input" v-model="topicNameInput" type="text" required />
       </div>
 
       <div class="textfield">
@@ -106,7 +106,7 @@ function publishTest() {
 
       <div class="textfield">
         <label for="textfield-input">Data: </label>
-        <input v-model="dataInput" id="textfield-input" type="text" required />
+        <input id="textfield-input" v-model="dataInput" type="text" required />
       </div>
 
       <div class="button-container">