start
This commit is contained in:
PaulK
commit
acea5ba561
11
.editorconfig
Normal file
11
.editorconfig
Normal file
@ -0,0 +1,11 @@
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
194
.gitattributes
vendored
Normal file
194
.gitattributes
vendored
Normal file
@ -0,0 +1,194 @@
|
||||
## GITATTRIBUTES FOR WEB PROJECTS
|
||||
#
|
||||
# These settings are for any web project.
|
||||
#
|
||||
# Details per file setting:
|
||||
# text These files should be normalized (i.e. convert CRLF to LF).
|
||||
# binary These files are binary and should be left untouched.
|
||||
#
|
||||
# Note that binary is a macro for -text -diff.
|
||||
######################################################################
|
||||
|
||||
## AUTO-DETECT
|
||||
## Handle line endings automatically for files detected as
|
||||
## text and leave all files detected as binary untouched.
|
||||
## This will handle all files NOT defined below.
|
||||
* text=auto
|
||||
|
||||
## SOURCE CODE
|
||||
*.bat text eol=crlf
|
||||
*.coffee text
|
||||
*.css text
|
||||
*.htm text
|
||||
*.html text
|
||||
*.inc text
|
||||
*.ini text
|
||||
*.js text
|
||||
*.json text
|
||||
*.jsx text
|
||||
*.less text
|
||||
*.od text
|
||||
*.onlydata text
|
||||
*.php text
|
||||
*.pl text
|
||||
*.py text
|
||||
*.rb text
|
||||
*.sass text
|
||||
*.scm text
|
||||
*.scss text
|
||||
*.sh text eol=lf
|
||||
*.sql text
|
||||
*.styl text
|
||||
*.tag text
|
||||
*.ts text
|
||||
*.tsx text
|
||||
*.xml text
|
||||
*.xhtml text
|
||||
|
||||
## DOCKER
|
||||
*.dockerignore text
|
||||
Dockerfile text
|
||||
|
||||
## DOCUMENTATION
|
||||
*.markdown text
|
||||
*.md text
|
||||
*.mdwn text
|
||||
*.mdown text
|
||||
*.mkd text
|
||||
*.mkdn text
|
||||
*.mdtxt text
|
||||
*.mdtext text
|
||||
*.txt text
|
||||
AUTHORS text
|
||||
CHANGELOG text
|
||||
CHANGES text
|
||||
CONTRIBUTING text
|
||||
COPYING text
|
||||
copyright text
|
||||
*COPYRIGHT* text
|
||||
INSTALL text
|
||||
license text
|
||||
LICENSE text
|
||||
NEWS text
|
||||
readme text
|
||||
*README* text
|
||||
TODO text
|
||||
|
||||
## TEMPLATES
|
||||
*.dot text
|
||||
*.ejs text
|
||||
*.haml text
|
||||
*.handlebars text
|
||||
*.hbs text
|
||||
*.hbt text
|
||||
*.jade text
|
||||
*.latte text
|
||||
*.mustache text
|
||||
*.njk text
|
||||
*.phtml text
|
||||
*.tmpl text
|
||||
*.tpl text
|
||||
*.twig text
|
||||
|
||||
## LINTERS
|
||||
.babelrc text
|
||||
.csslintrc text
|
||||
.eslintrc text
|
||||
.htmlhintrc text
|
||||
.jscsrc text
|
||||
.jshintrc text
|
||||
.jshintignore text
|
||||
.prettierrc text
|
||||
.stylelintrc text
|
||||
|
||||
## CONFIGS
|
||||
*.bowerrc text
|
||||
*.cnf text
|
||||
*.conf text
|
||||
*.config text
|
||||
.browserslistrc text
|
||||
.editorconfig text
|
||||
.gitattributes text
|
||||
.gitconfig text
|
||||
.gitignore text
|
||||
.htaccess text
|
||||
*.npmignore text
|
||||
*.yaml text
|
||||
*.yml text
|
||||
browserslist text
|
||||
Makefile text
|
||||
makefile text
|
||||
|
||||
## HEROKU
|
||||
Procfile text
|
||||
.slugignore text
|
||||
|
||||
## GRAPHICS
|
||||
*.ai binary
|
||||
*.bmp binary
|
||||
*.eps binary
|
||||
*.gif binary
|
||||
*.ico binary
|
||||
*.jng binary
|
||||
*.jp2 binary
|
||||
*.jpg binary
|
||||
*.jpeg binary
|
||||
*.jpx binary
|
||||
*.jxr binary
|
||||
*.pdf binary
|
||||
*.png binary
|
||||
*.psb binary
|
||||
*.psd binary
|
||||
*.svg text
|
||||
*.svgz binary
|
||||
*.tif binary
|
||||
*.tiff binary
|
||||
*.wbmp binary
|
||||
*.webp binary
|
||||
|
||||
## AUDIO
|
||||
*.kar binary
|
||||
*.m4a binary
|
||||
*.mid binary
|
||||
*.midi binary
|
||||
*.mp3 binary
|
||||
*.ogg binary
|
||||
*.ra binary
|
||||
|
||||
## VIDEO
|
||||
*.3gpp binary
|
||||
*.3gp binary
|
||||
*.as binary
|
||||
*.asf binary
|
||||
*.asx binary
|
||||
*.fla binary
|
||||
*.flv binary
|
||||
*.m4v binary
|
||||
*.mng binary
|
||||
*.mov binary
|
||||
*.mp4 binary
|
||||
*.mpeg binary
|
||||
*.mpg binary
|
||||
*.ogv binary
|
||||
*.swc binary
|
||||
*.swf binary
|
||||
*.webm binary
|
||||
|
||||
## ARCHIVES
|
||||
*.7z binary
|
||||
*.gz binary
|
||||
*.jar binary
|
||||
*.rar binary
|
||||
*.tar binary
|
||||
*.zip binary
|
||||
|
||||
## FONTS
|
||||
*.ttf binary
|
||||
*.eot binary
|
||||
*.otf binary
|
||||
*.woff binary
|
||||
*.woff2 binary
|
||||
|
||||
## EXECUTABLES
|
||||
*.exe binary
|
||||
*.pyc binary
|
||||
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
# Include your project-specific ignores in this file
|
||||
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
|
||||
# Useful .gitignore templates: https://github.com/github/gitignore
|
||||
node_modules
|
||||
dist
|
||||
.cache
|
||||
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
9
.idea/RC_Car.iml
generated
Normal file
9
.idea/RC_Car.iml
generated
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/RC_Car.iml" filepath="$PROJECT_DIR$/.idea/RC_Car.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
62
404.html
Normal file
62
404.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
* {
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color: #888;
|
||||
display: table;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #555;
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 280px) {
|
||||
|
||||
body,
|
||||
p {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 0.3em;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->
|
||||
19
LICENSE.txt
Normal file
19
LICENSE.txt
Normal file
@ -0,0 +1,19 @@
|
||||
Copyright (c) HTML5 Boilerplate
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
24
connect.py
Normal file
24
connect.py
Normal file
@ -0,0 +1,24 @@
|
||||
from flask import Flask, render_template, request
|
||||
import bluetooth
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
# Bluetooth-Geräte in der Nähe scannen
|
||||
def scan_devices():
|
||||
nearby_devices = bluetooth.discover_devices(duration=8, lookup_names=True)
|
||||
devices = [(addr, name) for addr, name in nearby_devices]
|
||||
return devices
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
devices = scan_devices()
|
||||
return render_template('controller.html', devices=devices)
|
||||
|
||||
@app.route('/connect', methods=['POST'])
|
||||
def connect():
|
||||
selected_device = request.form['device']
|
||||
# Hier fügst du den Code hinzu, um dich mit dem ausgewählten Gerät zu verbinden
|
||||
return f"Connecting to device: {selected_device}"
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
19
controller.html
Normal file
19
controller.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bluetooth Controller Auswahl</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Verfügbare Bluetooth-Controller</h1>
|
||||
<form action="/connect" method="post">
|
||||
<select name="controller">
|
||||
{% for addr, name in controllers %}
|
||||
<option value="{{ addr }}">{{ name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit">Verbinden</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
BIN
controller.jpg
Normal file
BIN
controller.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
247
css/style.css
Normal file
247
css/style.css
Normal file
@ -0,0 +1,247 @@
|
||||
/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */
|
||||
|
||||
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
|
||||
/*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight:
|
||||
* https://twitter.com/miketaylr/status/12228805301
|
||||
*
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers
|
||||
*/
|
||||
|
||||
.hidden,
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.visually-hidden {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .visually-hidden class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.visually-hidden.focusable:active,
|
||||
.visually-hidden.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
white-space: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* The use of `table` rather than `block` is only necessary if using
|
||||
* `::before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EXAMPLE Media Queries for Responsive Design.
|
||||
These examples override the primary ('mobile first') styles.
|
||||
Modify as content requires.
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 35em) {
|
||||
/* Style adjustments for viewports that meet the condition */
|
||||
}
|
||||
|
||||
@media print,
|
||||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 1.25dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
/* Style adjustments for high resolution devices */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid the additional HTTP request:
|
||||
https://www.phpied.com/delay-loading-your-print-css/
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
/* Black prints faster */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
a[href^="#"]::after,
|
||||
a[href^="javascript:"]::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
1
icon.svg
Normal file
1
icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 192 192"><path fill="#e08524" d="M75.3 73.4H18.4l45.3 34.3L48.3 163l46.1-32.3 48.2 34.6-16.9-58.3 44.9-33.6H115l-20.5-55-19.2 55z"/><path d="m96.7 18.8 18.2 8.2 16.5 44.3h-15.1L96.7 18.8zm-47 146 18.7 9.9 42.6-29.9-16.5-11.4-44.8 31.4zm79.1-56.8 17.4 9.4 18.6 60.1-19.7-11.3-16.3-58.2z"/><path d="m173.1 74.3 17.8 9.2-44.7 34-17.4-9.4 44.3-33.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 429 B |
0
img/.gitkeep
Normal file
0
img/.gitkeep
Normal file
90
index.html
Normal file
90
index.html
Normal file
@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mein Menü</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#control img {
|
||||
max-width: 25%;
|
||||
height: auto;
|
||||
cursor: pointer; /* Hinzugefügt, um den Mauszeiger zu ändern */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="menu">
|
||||
<a href="#" onclick="showContent('home')">Startseite</a>
|
||||
<a href="#" onclick="showContent('control')">Steuerung</a>
|
||||
</div>
|
||||
|
||||
<div id="home" class="content">
|
||||
<h2>Startseite</h2>
|
||||
<p>Willkommen auf der Startseite!</p>
|
||||
</div>
|
||||
|
||||
<!-- Bild -->
|
||||
<div id="control" class="content hidden">
|
||||
<h2>Steuerung</h2>
|
||||
<p>Wählen Sie ein Steuergerät!</p>
|
||||
<a href="joystick.html" style="position: absolute; top: 250px; left: 200px;">
|
||||
<img src="handy.jpg" alt="Handy Bild" style="width: 250px; height: 100px;">
|
||||
</a>
|
||||
<a href="controller.html" style="position: absolute; top: 450px; left: 200px">
|
||||
<img src="controller.jpg" alt="Controller Bild" style="width: 400px; height: 90px;">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function showContent(id) {
|
||||
// Alle Inhalte ausblenden
|
||||
var contents = document.getElementsByClassName("content");
|
||||
for (var i = 0; i < contents.length; i++) {
|
||||
contents[i].classList.add("hidden");
|
||||
}
|
||||
|
||||
// Nur das angeklickte Element anzeigen
|
||||
var element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
343
joystick.html
Normal file
343
joystick.html
Normal file
@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Circular Control Stick</title>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #f0f0f0; /* Change the background color as needed */
|
||||
}
|
||||
|
||||
#control-container {
|
||||
position: relative;
|
||||
width: 400px; /* Adjust the overall size as needed */
|
||||
height: 400px; /* Adjust the overall size as needed */
|
||||
border-radius: 50%;
|
||||
border: 2px solid black; /* Outline style for the outer circle */
|
||||
box-sizing: border-box;
|
||||
touch-action: none; /* Disable touch actions to prevent scrolling on touch devices */
|
||||
overflow: hidden; /* Hide the overflow of the lines */
|
||||
}
|
||||
|
||||
#inner-stick {
|
||||
position: absolute;
|
||||
width: 80px; /* Adjust the inner control stick size as needed */
|
||||
height: 80px; /* Adjust the inner control stick size as needed */
|
||||
background-color: black; /* Filled color for the inner circle */
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
touch-action: none; /* Disable touch actions on the inner stick */
|
||||
user-select: none; /* Disable text selection on the inner stick */
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
transform-origin: 50% 50%;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.line:nth-child(1) {
|
||||
transform: rotate(22.5deg);
|
||||
}
|
||||
|
||||
.line:nth-child(2) {
|
||||
transform: rotate(67.5deg);
|
||||
}
|
||||
|
||||
.line:nth-child(3) {
|
||||
transform: rotate(112.5deg);
|
||||
}
|
||||
|
||||
.line:nth-child(4) {
|
||||
transform: rotate(157.5deg);
|
||||
}
|
||||
|
||||
.line:nth-child(5) {
|
||||
transform: rotate(202.5deg);
|
||||
}
|
||||
|
||||
.line:nth-child(6) {
|
||||
transform: rotate(247.5deg);
|
||||
}
|
||||
|
||||
.line:nth-child(7) {
|
||||
transform: rotate(292.5deg);
|
||||
}
|
||||
|
||||
.line:nth-child(8) {
|
||||
transform: rotate(337.5deg);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: black;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
#text-forward {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
#text-forward-right {
|
||||
top: 25%;
|
||||
left: 20%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
#text-forward-left {
|
||||
top: 25%;
|
||||
right: 20%;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#text-right {
|
||||
left: 45%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
#text-left {
|
||||
right: 45%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
#text-backward {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
#text-backward-right {
|
||||
bottom: 25%;
|
||||
left: 20%;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#text-backward-left {
|
||||
bottom: 25%;
|
||||
right: 20%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Image clickable -->
|
||||
<a href="index.html" style="position: absolute; top: 10px; left: 10px;">
|
||||
<img src="arrow.png" alt="Klickbarer Pfeil" style="width: 150px; height: 100px;">
|
||||
</a>
|
||||
|
||||
<div id="control-container">
|
||||
|
||||
<!-- Lines to divide the outer circle -->
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
|
||||
<!-- Text elements -->
|
||||
<div class="text" id="text-forward">Forward</div>
|
||||
<div class="text" id="text-forward-left">Forward-Left</div>
|
||||
<div class="text" id="text-forward-right">Forward-Right</div>
|
||||
<div class="text" id="text-left">Left</div>
|
||||
<div class="text" id="text-right">Right</div>
|
||||
<div class="text" id="text-backward">Backward</div>
|
||||
<div class="text" id="text-backward-left">Backward-Left</div>
|
||||
<div class="text" id="text-backward-right">Backward-Right</div>
|
||||
|
||||
<!-- Inner stick -->
|
||||
<div id="inner-stick"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// JavaScript for handling control stick movement
|
||||
var controlContainer = document.getElementById('control-container');
|
||||
var innerStick = document.getElementById('inner-stick');
|
||||
|
||||
// Variables to store the initial position and touch/mouse state
|
||||
var initialX, initialY, isTouched = false;
|
||||
|
||||
// Event listeners for touch events
|
||||
innerStick.addEventListener('touchstart', handleTouchStart);
|
||||
innerStick.addEventListener('touchmove', handleTouchMove);
|
||||
innerStick.addEventListener('touchend', handleTouchEnd);
|
||||
|
||||
// Event listeners for mouse events
|
||||
innerStick.addEventListener('mousedown', handleMouseDown);
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
// Touch event handlers
|
||||
function handleTouchStart(event) {
|
||||
isTouched = true;
|
||||
var touch = event.touches[0];
|
||||
initialX = touch.clientX - controlContainer.offsetLeft;
|
||||
initialY = touch.clientY - controlContainer.offsetTop;
|
||||
}
|
||||
|
||||
function handleTouchMove(event) {
|
||||
if (!isTouched) return;
|
||||
|
||||
var touch = event.touches[0];
|
||||
var currentX = touch.clientX - controlContainer.offsetLeft;
|
||||
var currentY = touch.clientY - controlContainer.offsetTop;
|
||||
|
||||
moveInnerStick(currentX, currentY);
|
||||
sendCommandBasedOnSector(currentX, currentY);
|
||||
event.preventDefault();
|
||||
if (event.touches.length == 0) {
|
||||
resetInnerStickPosition();
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchEnd() {
|
||||
isTouched = false;
|
||||
resetInnerStickPosition();
|
||||
}
|
||||
|
||||
// Mouse event handlers
|
||||
function handleMouseDown(event) {
|
||||
isTouched = true;
|
||||
initialX = event.clientX - controlContainer.offsetLeft;
|
||||
initialY = event.clientY - controlContainer.offsetTop;
|
||||
}
|
||||
|
||||
function handleMouseMove(event) {
|
||||
if (!isTouched) return;
|
||||
|
||||
var currentX = event.clientX - controlContainer.offsetLeft;
|
||||
var currentY = event.clientY - controlContainer.offsetTop;
|
||||
|
||||
moveInnerStick(currentX, currentY);
|
||||
sendCommandBasedOnSector(currentX, currentY);
|
||||
if (!event.buttons) {
|
||||
resetInnerStickPosition();
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isTouched = false;
|
||||
resetInnerStickPosition();
|
||||
}
|
||||
|
||||
// Function to move the inner stick
|
||||
function moveInnerStick(x, y) {
|
||||
var deltaX = x - initialX;
|
||||
var deltaY = y - initialY;
|
||||
|
||||
// Ensure the inner stick stays within the bounds of the container
|
||||
var distance = Math.min(
|
||||
Math.hypot(deltaX, deltaY),
|
||||
controlContainer.clientWidth / 2 - innerStick.clientWidth / 2
|
||||
);
|
||||
|
||||
var angle = Math.atan2(deltaY, deltaX);
|
||||
var newX = Math.cos(angle) * distance + controlContainer.clientWidth / 2;
|
||||
var newY = Math.sin(angle) * distance + controlContainer.clientHeight / 2;
|
||||
|
||||
innerStick.style.left = newX + 'px';
|
||||
innerStick.style.top = newY + 'px';
|
||||
}
|
||||
|
||||
// Function to reset the inner stick to the center
|
||||
function resetInnerStickPosition() {
|
||||
innerStick.style.left = '50%';
|
||||
innerStick.style.top = '50%';
|
||||
sendCommand('/move/stop');
|
||||
}
|
||||
|
||||
var lastcommand;
|
||||
|
||||
// Function to send a command (replace with actual command logic)
|
||||
function sendCommand(command) {
|
||||
|
||||
if (lastcommand !== command) {
|
||||
lastcommand = command;
|
||||
console.log('Command Sent:', command);
|
||||
|
||||
// Vollständige URL zum Flask-Server
|
||||
var url = 'http://192.168.4.1:5000' + command; // Bitte die IP-Adresse und Portnummer anpassen
|
||||
|
||||
// AJAX-Anfrage erstellen
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true); // URL anpassen, um sie an Ihren Server anzupassen
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||||
if (xhr.status === 200) {
|
||||
console.log('Command successfully sent to server:' + command);
|
||||
} else {
|
||||
console.error('Failed to send command to server.');
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
|
||||
// ich hab dich gaaaaaanz dolle lieb bubu, ich bin super stolz auf dich, du machst das echt super duper toll
|
||||
|
||||
|
||||
// Function to log the inner stick position to the console
|
||||
function sendCommandBasedOnSector(x, y) {
|
||||
var deltaX = x - controlContainer.clientWidth / 2;
|
||||
var deltaY = y - controlContainer.clientHeight / 2;
|
||||
|
||||
// Calculate the angle of the inner stick
|
||||
var angle = Math.atan2(deltaY, deltaX);
|
||||
var angleDeg = (angle * 180) / Math.PI;
|
||||
|
||||
// Convert negative angles to positive for simplicity
|
||||
if (angleDeg < 0) {
|
||||
angleDeg += 360;
|
||||
}
|
||||
|
||||
// Determine the sector based on the angle
|
||||
var sector = Math.floor((angleDeg + 22.5) / 45) % 8;
|
||||
|
||||
// Send a command based on the sector
|
||||
switch (sector) {
|
||||
case 0: // Right
|
||||
sendCommand('/move/right');
|
||||
break;
|
||||
case 1: // Back-Right
|
||||
sendCommand('/move/back-right');
|
||||
break;
|
||||
case 2: // Back
|
||||
sendCommand('/move/back');
|
||||
break;
|
||||
case 3: // Back-Left
|
||||
sendCommand('/move/back-left');
|
||||
break;
|
||||
case 4: // Left
|
||||
sendCommand('/move/left');
|
||||
break;
|
||||
case 5: // Front-Left
|
||||
sendCommand('/move/front-left');
|
||||
break;
|
||||
case 6: // Forward
|
||||
sendCommand('/move/Front');
|
||||
break;
|
||||
case 7: // Front-Right
|
||||
sendCommand('/move/front-right');
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
js/vendor/.gitkeep
vendored
Normal file
0
js/vendor/.gitkeep
vendored
Normal file
24
package.json
Normal file
24
package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": " ",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"keywords": [
|
||||
""
|
||||
],
|
||||
"license": "",
|
||||
"author": "",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "webpack serve --open --config webpack.config.dev.js",
|
||||
"build": "webpack --config webpack.config.prod.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"html-webpack-plugin": "^5.5.3",
|
||||
"webpack": "^5.88.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^4.15.1",
|
||||
"webpack-merge": "^5.9.0"
|
||||
}
|
||||
}
|
||||
5
robots.txt
Normal file
5
robots.txt
Normal file
@ -0,0 +1,5 @@
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
12
site.webmanifest
Normal file
12
site.webmanifest
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"short_name": "",
|
||||
"name": "",
|
||||
"icons": [{
|
||||
"src": "icon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
}],
|
||||
"start_url": "/?utm_source=homescreen",
|
||||
"background_color": "#fafafa",
|
||||
"theme_color": "#fafafa"
|
||||
}
|
||||
12
webpack.common.js
Normal file
12
webpack.common.js
Normal file
@ -0,0 +1,12 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: './js/app.js',
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
clean: true,
|
||||
filename: './js/app.js',
|
||||
},
|
||||
};
|
||||
13
webpack.config.dev.js
Normal file
13
webpack.config.dev.js
Normal file
@ -0,0 +1,13 @@
|
||||
const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.common.js');
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
devServer: {
|
||||
liveReload: true,
|
||||
hot: true,
|
||||
open: true,
|
||||
static: ['./'],
|
||||
},
|
||||
});
|
||||
26
webpack.config.prod.js
Normal file
26
webpack.config.prod.js
Normal file
@ -0,0 +1,26 @@
|
||||
const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.common.js');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: './index.html',
|
||||
}),
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{ from: 'img', to: 'img' },
|
||||
{ from: 'css', to: 'css' },
|
||||
{ from: 'js/vendor', to: 'js/vendor' },
|
||||
{ from: 'icon.svg', to: 'icon.svg' },
|
||||
{ from: 'favicon.ico', to: 'favicon.ico' },
|
||||
{ from: 'robots.txt', to: 'robots.txt' },
|
||||
{ from: 'icon.png', to: 'icon.png' },
|
||||
{ from: '404.html', to: '404.html' },
|
||||
{ from: 'site.webmanifest', to: 'site.webmanifest' },
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user