Wizzard/radarflow2-kvm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a settings bar

Browse Source 
- Toggle Zoom button: Allows to toggle map zoom in
This commit is contained in:
Janek 2024-01-02 01:06:30 +01:00
parent dc7ff86c38
commit 7cf75a03f5
4 changed files with 45 additions and 7 deletions

1
.gitignore vendored

@ -2,3 +2,4 @@
csflow/src/cs2dumper/offsets.rs csflow/src/cs2dumper/offsets.rs
csflow/src/cs2dumper/engine2.rs csflow/src/cs2dumper/engine2.rs
csflow/src/cs2dumper/client.rs csflow/src/cs2dumper/client.rs
webradar_rewrite

9
webradar/index.html

@ -7,7 +7,14 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <div id="canvasContainer">
<div id="settingsHolder">
<div class="settings">
<button onclick="toggleZoom()">Toggle Zoom</button>
</div>
</div>
<canvas id="canvas"></canvas>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

4
webradar/script.js

@ -414,3 +414,7 @@ addEventListener("DOMContentLoaded", (e) => {
console.log(`[radarflow] connecting to ${websocketAddr}`) console.log(`[radarflow] connecting to ${websocketAddr}`)
connect() connect()
}); });
function toggleZoom() {
shouldZoom = !shouldZoom
}

38
webradar/styles.css

@ -1,17 +1,43 @@
body { body, html {
height: 100%;
margin: 0; margin: 0;
overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh;
background-color: #000000; /* Change the background color as needed */ background-color: #000000; /* Change the background color as needed */
} }
#canvasContainer {
aspect-ratio: 1 / 1;
width: 100vh; /* Initial half-screen size */
position: relative;
overflow: hidden;
transition: width 0.5s ease; /* Smooth transition */
float: left;
}
canvas { canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; }
display: block;
object-fit: contain; #settingsHolder {
visibility: hidden;
position: absolute;
top: inherit;
left: inherit;
width: inherit;
height: 20%;
}
#settingsHolder:hover .settings {
opacity: 1;
}
.settings {
visibility: visible;
opacity: 0;
padding: 10px;
background-color: rgba(25, 25, 25, 0.7); /* Semi-transparent white background */
transition: opacity 0.3s ease; /* Smooth transition */
} }