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">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Webinterface</title>
|
||||
<title>Connection on the Move - Webinterface</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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">
|
||||
</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>
|
||||
import { ref } from 'vue'
|
||||
import HUDRow from "@/components/HUDRow.vue";
|
||||
|
||||
const collapsed = ref(false)
|
||||
|
||||
function toggleHUD() {
|
||||
collapsed.value = !collapsed.value
|
||||
}
|
||||
|
||||
var logging = true;
|
||||
|
||||
function log(message){
|
||||
@@ -22,77 +31,64 @@
|
||||
if(e.classList.contains("btn-success")) return;
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="container hud" id="Control">
|
||||
<div class="hud-header">Auto HUD</div>
|
||||
<div class="hud-row">
|
||||
<div class="label">IP:</div>
|
||||
<div class="info">***.***.***.***</div>
|
||||
</div>
|
||||
<div class="hud-row">
|
||||
<div class="label">Station:</div>
|
||||
<div class="important">Mobile</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 class="hud-header" @click="toggleHUD">
|
||||
<span>{{ HUD_name }}</span>
|
||||
<button class="hud-toggle-btn">{{ collapsed ? '▼' : '▲' }}</button>
|
||||
</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">
|
||||
<button class="btn btn-sm btn-success hud-inner-btn" id="LocationButton" @click="handleButtonPress($event.target)">Location</button>
|
||||
<button class="btn btn-sm btn-outline-secondary hud-inner-btn" id="CameraButton" style="width: 100px;" @click="handleButtonPress($event.target)">Camera</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.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: 'Courier New', monospace;
|
||||
color: #ddd;
|
||||
user-select: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.hud-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.hud-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
.expand-enter-from{
|
||||
opacity: 0;
|
||||
}
|
||||
.expand-enter-to{
|
||||
opacity: 1;
|
||||
}
|
||||
.expand-enter-active{
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
}
|
||||
</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 App from './App.vue'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import './assets/hud.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
Reference in New Issue
Block a user