[testpublisher] Created Vue component to test publishing to topics

src/components/PublishTesterComponent.vue

@@ -0,0 +1,197 @@
+<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 topicNameInput = ref('');
+const messageTypeInput = ref('');
+const dataInput = ref('');
+const customMessageType = ref('');
+const receivedMessage = ref('');
+
+const messageTypeID = computed(() => {
+  let idx = messageTypes.indexOf(messageTypeInput.value);
+  if (idx === -1) idx = messageTypes.length; // Custom input index
+  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 = 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({
+      topicName: topicName,
+      topicType: topicType as TopicType,
+    });
+
+    const testSubscriber = createSubscriber({
+      topicName: topicName,
+      topicType: topicType as TopicType,
+    });
+
+    testSubscriber.start({
+      callback: (message) => {
+        receivedMessage.value = JSON.stringify(message);
+      },
+    });
+
+    testPublisher.publish(topicMessage);
+  } else {
+    alert('Please fill in all fields.');
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <h2>Test Publisher</h2>
+    <form id="publish-form" class="content" @submit.prevent="publishTest">
+      <div class="textfield">
+        <label for="topic-name-input">Topic Name: </label>
+        <input id="topic-name-input" v-model="topicNameInput" type="text" required />
+      </div>
+
+      <div class="textfield">
+        <label for="message-type-input">Message Type: </label>
+        <select id="message-type-input" v-model="messageTypeInput" 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 id="textfield-input" v-model="dataInput" type="text" 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>
+// .container {
+//   display: flex;
+//   flex-direction: column;
+// }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.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: 143px;
+}
+
+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;
+}
+
+taking-space {
+  margin-right: auto;
+}
+
+button {
+  background-color: var(--correct);
+  // margin-left: auto;
+  flex-shrink: 0;
+}
+
+.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: 300px;
+  max-height: 80px;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-size: 12px;
+}
+</style>

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>