Made hud modular - added extend + transition for hud-body
This commit is contained in:
Ano-sys
+1
-1
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Webinterface</title>
|
<title>Connection on the Move - Webinterface</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 15 KiB |
+3
-1
@@ -5,7 +5,9 @@ import HUD from './components/HUD.vue'
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header>
|
<header>
|
||||||
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
|
<!--
|
||||||
|
<img alt="Raspberry Pi Minimalistic Icon" class="logo" src="./assets/icon_pi.png" width="128" height="128"/>
|
||||||
|
-->
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,79 @@
|
|||||||
|
.hud {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 240px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #ddd;
|
||||||
|
user-select: none;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-body {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-inner-btn{
|
||||||
|
width: 100px;
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-toggle-btn {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #ddd;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer{
|
||||||
|
height: 1px;
|
||||||
|
background: transparent;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #d6d6d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important {
|
||||||
|
color: rgb(255, 52, 52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #48f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: #4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info2 {
|
||||||
|
color: #8cf;
|
||||||
|
}
|
||||||
@@ -1,4 +1,13 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import HUDRow from "@/components/HUDRow.vue";
|
||||||
|
|
||||||
|
const collapsed = ref(false)
|
||||||
|
|
||||||
|
function toggleHUD() {
|
||||||
|
collapsed.value = !collapsed.value
|
||||||
|
}
|
||||||
|
|
||||||
var logging = true;
|
var logging = true;
|
||||||
|
|
||||||
function log(message){
|
function log(message){
|
||||||
@@ -22,77 +31,64 @@
|
|||||||
if(e.classList.contains("btn-success")) return;
|
if(e.classList.contains("btn-success")) return;
|
||||||
button_switch(e);
|
button_switch(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// HUD TEMPLATE
|
||||||
|
let HUD_name = "Auto HUD"
|
||||||
|
|
||||||
|
let rowProps = [{
|
||||||
|
key: "IP",
|
||||||
|
value: "***.***.***.***",
|
||||||
|
importance: "info"
|
||||||
|
},{
|
||||||
|
key: "Station",
|
||||||
|
value: "Mobile",
|
||||||
|
importance: "important"
|
||||||
|
},
|
||||||
|
/* expand like this
|
||||||
|
{
|
||||||
|
key: "",
|
||||||
|
value: "",
|
||||||
|
importance: ""
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="container hud" id="Control">
|
<div class="container hud" id="Control">
|
||||||
<div class="hud-header">Auto HUD</div>
|
|
||||||
<div class="hud-row">
|
<div class="hud-header" @click="toggleHUD">
|
||||||
<div class="label">IP:</div>
|
<span>{{ HUD_name }}</span>
|
||||||
<div class="info">***.***.***.***</div>
|
<button class="hud-toggle-btn">{{ collapsed ? '▼' : '▲' }}</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<transition name="expand">
|
||||||
|
<div v-show="!collapsed" class="hud-body">
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<HUDRow v-for="rowProp in rowProps" :rowProps="rowProp"></HUDRow>
|
||||||
|
<div class="spacer"></div>
|
||||||
<div class="hud-row">
|
<div class="hud-row">
|
||||||
<div class="label">Station:</div>
|
<button class="btn btn-sm btn-success hud-inner-btn" id="LocationButton" @click="handleButtonPress($event.target)">Location</button>
|
||||||
<div class="important">Mobile</div>
|
<button class="btn btn-sm btn-outline-secondary hud-inner-btn" id="CameraButton" style="width: 100px;" @click="handleButtonPress($event.target)">Camera</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="hud-row">
|
|
||||||
<button class="btn btn-sm btn-success" id="LocationButton" style="width: 100px;" @click="handleButtonPress($event.target)">Location</button>
|
|
||||||
<button class="btn btn-sm btn-outline-secondary" id="CameraButton" style="width: 100px;" @click="handleButtonPress($event.target)">Camera</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.hud {
|
.expand-enter-from{
|
||||||
position: fixed;
|
opacity: 0;
|
||||||
top: 20px;
|
|
||||||
left: 20px;
|
|
||||||
width: 240px;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
border: 1px solid #444;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
color: #ddd;
|
|
||||||
user-select: none;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
}
|
||||||
|
.expand-enter-to{
|
||||||
.hud-header {
|
opacity: 1;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #eeeeee;
|
|
||||||
}
|
}
|
||||||
|
.expand-enter-active{
|
||||||
.hud-row {
|
transition:
|
||||||
display: flex;
|
transform 0.2s ease,
|
||||||
justify-content: space-between;
|
opacity 0.2s ease;
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: #d6d6d6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.important {
|
|
||||||
color: rgb(255, 52, 52);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
color: #48f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success {
|
|
||||||
color: #4f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info2 {
|
|
||||||
color: #8cf;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
const props = defineProps(['rowProps'])
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="hud-row">
|
||||||
|
<div class="label">{{ props.rowProps.key }}:</div>
|
||||||
|
<div :class="props.rowProps.importance">{{ props.rowProps.value }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -3,5 +3,6 @@ import './assets/main.css'
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||||
|
import './assets/hud.css'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount('#app')
|
||||||
|
|||||||
Reference in New Issue
Block a user