Initial Setup

.idea/ActiveBOWeb.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ActiveBOWeb.iml" filepath="$PROJECT_DIR$/.idea/ActiveBOWeb.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

ROSWebTemplate/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};

ROSWebTemplate/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ROSWebTemplate/.prettierrc.json

@@ -0,0 +1 @@
+{}

ROSWebTemplate/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

ROSWebTemplate/README.md

@@ -0,0 +1,46 @@
+# ActiveBOWeb
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

ROSWebTemplate/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

ROSWebTemplate/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/CPS_White.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fanuc Web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>

ROSWebTemplate/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "activeboweb",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "chart.js": "^4.2.1",
+    "pinia": "^2.0.30",
+    "roslib": "^1.3.0",
+    "vue": "^3.2.45",
+    "vue-resource": "^1.5.3",
+    "vue-slider-component": "^4.1.0-beta.7",
+    "vue3-slider": "^1.8.0",
+    "vuetify": "^3.1.4"
+  },
+  "devDependencies": {
+    "@mdi/font": "^7.1.96",
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^18.11.12",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "typescript": "~4.7.4",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.12"
+  }
+}

ROSWebTemplate/src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-app class="app-class">
+    <v-main>
+      <BaseLayout />
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+import BaseLayout from "@/components/BaseLayout.vue";
+</script>
+
+<style scoped>
+.app-class {
+  background: rgb(64, 73, 76);
+}
+</style>

ROSWebTemplate/src/components/BaseLayout.vue

@@ -0,0 +1,15 @@
+<template>
+  <TopBar />
+  <SideBar />
+  <SubLayout />
+  <RosBar />
+</template>
+
+<script setup>
+import TopBar from "@/components/TopBar.vue";
+import RosBar from "@/components/RosBar.vue";
+import SideBar from "@/components/SideBar.vue";
+import SubLayout from "@/components/SubLayout.vue";
+</script>
+
+<style scoped></style>

ROSWebTemplate/src/components/RosBar.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-navigation-drawer v-model="store.rosBarOpened" temporary location="right">
+    <v-container fluid>
+      <v-row justify="space-between">
+        <v-col cols="6" md="12">
+          <v-text-field
+            v-model="formState.ipaddress"
+            label="IP Address"
+            :disabled="connectionState"
+          />
+          <v-text-field
+            v-model="formState.port"
+            label="Port"
+            :disabled="connectionState"
+          />
+          <v-switch
+            @change="updateConnectionState"
+            true-value="connected"
+            false-value="not connected"
+            :label="`${formState.connect}`"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import * as ROS from "roslib";
+import { useBWStore } from "@/store/BaseWebsiteStore";
+
+import { reactive, ref, watch } from "vue";
+
+const store = useBWStore();
+
+const formState = reactive({
+  ipaddress: "localhost",
+  port: "9090",
+  connect: "not connected",
+  // connectionState: computed(() => formState.connect !== 'not connected'),
+});
+
+const connectionState = ref(false);
+const stateCounter = ref([0, 0, 0]);
+
+// Open Connection to ROSBridge and subscribe the topics.
+const ros = new ROS.Ros();
+const ros_eval = new ROS.Ros();
+
+ros.on("connection", () => {
+  stateCounter.value[0] += 1;
+});
+ros_eval.on("connection", () => {});
+
+ros.on("error", (error) => {
+  stateCounter.value[1] += 1;
+  console.log(error);
+});
+ros_eval.on("error", () => {});
+
+ros.on("close", () => {
+  stateCounter.value[2] += 1;
+});
+ros_eval.on("close", () => {});
+
+function updateConnectionState() {
+  connectionState.value = !connectionState.value;
+  if (formState.connect === "not connected") {
+    formState.connect = "connected";
+    const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
+    ros.connect(rosUrl);
+    ros_eval.connect(rosUrl);
+  } else {
+    formState.connect = "not connected";
+    ros.close();
+    ros_eval.close();
+  }
+}
+
+const lastStateCounter = [0, 0, 0];
+
+// ROS2 State Observer
+watch(stateCounter.value, (newValue) => {
+  let currentState = 0;
+  for (let i = 0; i < lastStateCounter.length; i += 1) {
+    if (newValue[i] - lastStateCounter[i] === 1) {
+      currentState = i;
+    }
+    lastStateCounter[i] = newValue[i];
+  }
+  if (currentState === 0) {
+    store.setRosConState("connected");
+  } else if (currentState === 1) {
+    store.setRosConState("error");
+  } else if (currentState === 2) {
+    store.setRosConState("not connected");
+  }
+});
+
+// ROS Topics and services below here
+</script>
+
+<style scoped></style>

ROSWebTemplate/src/components/SideBar.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-navigation-drawer class="nav-drawer" permanent width="64">
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+.tile {
+  width: 63px;
+  height: 64px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+</style>

ROSWebTemplate/src/components/SubLayout.vue

@@ -0,0 +1,19 @@
+<template></template>
+<div></div>
+<script setup></script>
+
+<style scoped>
+.sub-layout {
+  padding: 0;
+  margin: 1px 0 0 0;
+}
+.tile {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #333;
+}
+</style>

ROSWebTemplate/src/components/TopBar.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-app-bar id="components-top-bar" class="elevation-1">
+    <v-img class="cps-image" :left="true" :src="pic" />
+    <v-divider vertical class="image-divider" />
+    <v-spacer />
+    <v-btn @click="store.toggleRosBar()">
+      <v-icon :color="changeRosColor()" large>
+        mdi-checkbox-blank-circle
+      </v-icon>
+      \ ROS2
+    </v-btn>
+  </v-app-bar>
+</template>
+
+<script setup>
+import { useBWStore } from "@/store/BaseWebsiteStore";
+import pic from "../assets/CPS_Logo_White.png";
+
+const store = useBWStore();
+
+const changeRosColor = () => {
+  const conState = store.getRosConState;
+  if (conState === "not connected") {
+    return "red";
+  }
+  if (conState === "connected") {
+    return "green";
+  }
+  return "grey";
+};
+</script>
+
+<style scoped>
+.cps-image {
+  left: 8px;
+  max-width: 48px;
+  max-height: 48px;
+}
+.image-divider {
+  position: absolute;
+  left: 64px;
+}
+</style>

ROSWebTemplate/src/main.ts

@@ -0,0 +1,28 @@
+import { createApp } from "vue";
+
+// Pinia Store
+import { createPinia } from "pinia";
+
+// Vuetify
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import "@mdi/font/css/materialdesignicons.css";
+
+import App from "./App.vue";
+
+const pinia = createPinia();
+const vuetify = createVuetify({
+  theme: {
+    defaultTheme: "dark",
+  },
+  components,
+  directives,
+});
+
+const app = createApp(App);
+
+app.use(pinia);
+app.use(vuetify);
+app.mount("#app");

ROSWebTemplate/src/store/BaseWebsiteStore.js

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+export const useBWStore = defineStore("Base Website Store", {
+  state: () => {
+    return {
+      play: false,
+      rosBarOpened: true,
+      rosConState: "not connected",
+    };
+  },
+  getters: {
+    getPlay: (state) => state.play,
+    getRosBarOpened: (state) => state.rosBarOpened,
+    getRosConState: (state) => state.rosConState,
+  },
+  actions: {
+    setPlay() {
+      this.play = !this.play;
+    },
+    toggleRosBar() {
+      this.rosBarOpened = !this.rosBarOpened;
+    },
+    setRosConState(value) {
+      this.rosConState = value;
+    },
+  },
+});

ROSWebTemplate/tsconfig.config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

ROSWebTemplate/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

ROSWebTemplate/vite.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});