Niko/FanucWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial Commit

Browse Source
This commit is contained in:
Niko Feith 2023-02-14 17:13:15 +01:00
commit 7bdf0f2eee
23 changed files with 431 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ActiveBOWeb/.eslintrc.cjs Normal file
View File

@ -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",
},
};

28
ActiveBOWeb/.gitignore vendored Normal file
View File

@ -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?

1
ActiveBOWeb/.prettierrc.json Normal file
View File

@ -0,0 +1 @@
{}

3
ActiveBOWeb/.vscode/extensions.json vendored Normal file
View File

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

46
ActiveBOWeb/README.md Normal file
View File

@ -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
```

1
ActiveBOWeb/env.d.ts vendored Normal file
View File

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

13
ActiveBOWeb/index.html Normal file
View File

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

36
ActiveBOWeb/package.json Normal file
View File

@ -0,0 +1,36 @@
{
"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": {
"pinia": "^2.0.30",
"roslib": "^1.3.0",
"vue": "^3.2.45",
"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"
}
}

BIN
ActiveBOWeb/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
ActiveBOWeb/src/App.vue Normal file
View File

@ -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>

BIN
ActiveBOWeb/src/assets/CPS_Logo_Black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
ActiveBOWeb/src/assets/CPS_Logo_White.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

17
ActiveBOWeb/src/components/BaseLayout.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<TopBar/>
<SideBar/>
<!-- <BoxLayout/>-->
<RosBar/>
</template>
<script setup>
import TopBar from '@/components/TopBar.vue';
import RosBar from '@/components/RosBar.vue';
import SideBar from '@/components/SideBar.vue';
// import BoxLayout from '@/components/BoxLayout.vue';
</script>
<style scoped>
</style>

100
ActiveBOWeb/src/components/RosBar.vue Normal file
View File

@ -0,0 +1,100 @@
<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();
ros.on('connection', () => {
stateCounter.value[0] += 1;
});
ros.on('error', (error) => {
stateCounter.value[1] += 1;
console.log(error);
});
ros.on('close', () => { stateCounter.value[2] += 1; });
function updateConnectionState() {
connectionState.value = !connectionState.value;
if (formState.connect === 'not connected') {
formState.connect = 'connected';
const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
ros.connect(rosUrl);
} else {
formState.connect = 'not connected';
ros.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');
}
});
// Subscribers
// Publisher
</script>
<style scoped>
</style>

26
ActiveBOWeb/src/components/SideBar.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<v-navigation-drawer permanent width="64">
<v-container fluid>
<v-btn class="sidebar-button" @click="store.setPlay()">
<v-icon v-if="!store.getPlay">mdi-play</v-icon>
<v-icon v-else>mdi-pause</v-icon>
</v-btn>
</v-container>
</v-navigation-drawer>
</template>
<script setup>
import { useBWStore } from '@/store/BaseWebsiteStore';
const store = useBWStore();
</script>
<style scoped>
.sidebar-button{
height: 48px;
width: 48px;
left: -16px;
box-shadow: none;
border-radius: 0;
}
</style>

37
ActiveBOWeb/src/components/TopBar.vue Normal file
View File

@ -0,0 +1,37 @@
<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>
</style>

25
ActiveBOWeb/src/main.ts Normal file
View File

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

27
ActiveBOWeb/src/store/BaseWebsiteStore.js Normal file
View File

@ -0,0 +1,27 @@
import { defineStore } from "pinia";
export const useBWStore = defineStore('BaseWebsiteStore', {
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;
},
}
})

0
ActiveBOWeb/src/store/MountainCarStore.js Normal file
View File

0
ActiveBOWeb/src/store/RewardStore.js Normal file
View File

8
ActiveBOWeb/tsconfig.config.json Normal file
View File

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

16
ActiveBOWeb/tsconfig.json Normal file
View File

@ -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"
}
]
}

15
ActiveBOWeb/vite.config.ts Normal file
View File

@ -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)),
},
},
});