Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

1 Antwort

Suiram1

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Code

08.04.2024, 22:15

Wahrscheinlich geht es nicht, weil du die Funktion zum erkennen vom Wort nur aufrufst wenn der Client start_listening sendet, allerdings wird dies ja nur einmal nachdem die Verbindung hergestellt wurde gesendet.

marcus09421

Fragesteller

08.04.2024, 22:20

Vielen Dank für deine Antwort! Ich werde es nochmal anschauen.

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zur Frage

flask: jinja2.exceptions.TemplateNotFound: index.html | Wie fixen?

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>

...zur Frage

Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed:

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

...zur Frage

global alternative Python?

# Hey, welcje alternativen gibt 
es zu globalen Variablen in Funktionen? 
Beispielcode:

def a():
    b = Input("Bla...")
    return b

def c():
    d = b + 2
    return d

...zur Frage

Wie kann man diesen Python Code erklären (Zeile für Zeile)?

von def bis )

...zur Frage

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zur Frage

Python Flask?

Ich versuche, mit Abfragen in Flask zu arbeiten. Ich habe eine Seite choose.html wo man Buttons anklicken kann. Diese sollen in einem query dann an Seite 2 gesendet werden. Seite 2 soll also von Flask mit dem query gerendert werden, z.B.

127.0.0.1/login?username=test&color=3

Wenn man es in html einbaut mit Flask geht es nicht:

<a href="{{ url_for('login?user=lol') }}"><button class="continue" id="submit" name="submit">Continue</button></a>

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zur Frage

Python Flächeninhalt eines Kreises berechnen?

Hallo, ich möchte den Flächeninhalt eines Kreises in Python angezeigt bekommen. Mein Code lautet:

import math

radius = 10

def calculate_circle(radius):
    flaeche = math.pi * radius ** 2
    return flaeche

Leider funktioniert der Code nicht.. Woran liegt das?

...zur Frage

Raspberry PI Flask-404 Not Found?

Hallo!

Ich habe das programmiert. Es wird jede Sekunde die Temperatur von der CPU ausgelesen. Jetzt möchte ich Flask einbauen, damit ich mit mehreren PC's darauf zugreifen kann. Aber es funktioniert nicht. Warum?

from flask import Flask, jsonify
import subprocess
import time
import os
from colorama import Fore, Style

app = Flask(__name__)

@app.route("/temp")
def get_cpu_temperature():
  try:
    result = subprocess.run(['vcgencmd', 'measure_temp'], capture_output=True, text=True, check=True)
    temperature_str = result.stdout.strip()
    temperature = float(temperature_str[5:-2]) # Extrahiere die Temperatur aus dem String
    return temperature
  except subprocess.CalledProcessError as e:
    print(f"Fehler beim Ausführen des Befehls: {e}")
    return None

def print_colored_temperature(temperature):
  if temperature is not None:
    if temperature > 49.9:
      print(f"{Fore.RED}Temperatur: {temperature}°C{Style.RESET_ALL}")
    else:
      print(f"Temperatur: {temperature}°C")
  else:
    print("Fehler beim Lesen der CPU-Temperatur.")

def main():
  try:
    while True:
      temperature = get_cpu_temperature()
      print_colored_temperature(temperature)
      time.sleep(1)
      os.system('clear')
  except KeyboardInterrupt:
    print("Programm wurde durch den Benutzer unterbrochen.")
  except Exception as e:
    print(f"Ein Fehler ist aufgetreten: {e}")
     
     


if __name__ == '__main__':
  app.run(host="0.0.0.0")

if __name__ == '__main__':
  main()
  import sys
  sys.exit(main(sys.argv))

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen