Bonjour,

Je sollicite votre aide pour m'aider comprendre comment faire une mise en forme de page web avec HTML et CCS. je débute en HTML et CCS j'ai commencé à suivre le cours HTML et CSS d'Openclassroom, très bien fait mais je souhaiterais avancer un peu plus vite dans mon projet.

Mon projet : visualiser et enregistrer dans un RaspBerry Pi la consommation électrique et les température d'une chaudière fioul. J'ai relié les sondes de température et capteur PZEM 004 T à un Arduino qui se charge de récupérer les données et les envoyer à un RaspBerry PI. Dans le Raspberry Pi j'ai programmé en Python l'enregistrement au fil de l'eau les donnes dans un fichier au format CSV et la création de la page Web avec Flask de Python.

Je suis dans le forum HTML et CCS mais voici le programme Python si cela peut aider à comprendre :

import serial
import csv
import time
import re
import os
import math
import threading
import psutil
import signal
from flask import Flask, render_template, render_template_string, jsonify

port = "/dev/ttyACM0"
s1 = serial.Serial(port, 9600)

app = Flask(__name__)

# Recherche si le port 5000 est déja utilisé si oui tue les processus l'utilisant
def find_procs_by_port(port):
    """Return a list of processes listening on the given port."""
    procs = []
    for proc in psutil.process_iter(['pid', 'name']):
        try:
            for conns in proc.connections(kind='inet'):
                if conns.laddr.port == port:
                    procs.append(proc)
        except psutil.AccessDenied:
            pass
    return procs

def run_server():
    port = 5000
    procs = find_procs_by_port(port)
    for proc in procs:
        print(f"Process {proc.pid} ({proc.name()}) is listening on port {port}.")
        os.kill(proc.pid, signal.SIGTERM)  # Send the SIGTERM signal to the process
        print(f"Process {proc.pid} has been terminated.")


# Les valeurs à afficher sur la page web
values = [1, 2, 3, 4, 5, 6, 7, 8]

def update_values():
    global values
    while True:
        # Mettre à jour les variables ici
        current_date = time.strftime("%d")
        current_month = time.strftime("%m")
        current_year = time.strftime("%Y")
        directory = "/home/valery/Documents/Enregistrement/" + current_year + "/" + current_month + "/" + current_date
        filename = time.strftime("%d%H") + ".txt"
        filepath = os.path.join(directory, filename)

        try:
            os.makedirs(directory)
        except FileExistsError:
            pass

        if s1.inWaiting() > 0:
            inputValue = s1.readline().decode()
            if len(inputValue)<76:
                pass # Ne fait rien
            else:
                m = re.search('.*:(.*),.*:(.*),.*:(.*),.*:(.*),.*:(.*),.*:(.*),.*:(.*),', inputValue)
                values = [val.replace(",", ";").replace(" ", "") for val in m.groups()]
                current_time = time.strftime("%H:%M:%S")
                
                # Check if any value is an empty string
                if all(val != '' for val in values):
                    a, b, c, d, e, f, g = map(float, values)
                    

                    with open(filepath, mode='at') as data_file:
                        data_writer = csv.writer(data_file, delimiter=';', quotechar='"', quoting=csv.QUOTE_MINIMAL)
                        data_writer.writerow([current_time, a, b, c, d, e, f, g])
                
                    
                    
                            
                    print(current_time)
                    print("Tension: ",+a)
                    print("Courant: ",+b)
                    print("Puissance: ",+c)
                    print("Energie: ",+d)
                    print("Cos phi: ",+e)
                    print("Temp Dep: ",+f)
                    print("Temp Ret: ",+g)
        # time.sleep(1) # Attendre une seconde est-ce nécessaire?





@app.route('/')
def home():
    # Générer le HTML pour les valeurs
    return render_template('index.html')
    
@app.route('/values')
def get_values():
    return jsonify(values)


if __name__ == '__main__':
    # Démarrer un autre thread pour mettre à jour les valeurs
    threading.Thread(target=update_values).start()
    # Démarrer le serveur Flask
    app.run(host='0.0.0.0', port=5000, debug=False)

voici les données affichées dans le logiciel Thonny sous le RaspBerry Pi:

Voici le HTML :

<!DOCTYPE html>
<scipt>
function updateValues() {
    fetch('/values')
	.then(response => response.json())
	.then(values => {
	    // Mettre à jour la page Web avec les nouvelles valeurs
	}};
}

// Appeler UpdateValues toutes les deux secondes
SetInterval(updateValues, 2000);
</script>

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            background-image: url("image_url");
            background-size: cover;
        }
        .row {
            display: flex;
            justify-content: space-around;
            width: 90%;
            margin: auto;
        }
        .box {
            width: 20%;
            height: 100px;
            margin: 10px;
        }
        .beige {
            background-color: beige;
        }
        .light-purple {
            background-color: lightpurple;
        }
    </style>
</head>
<body>
    <div id="values"></div>

    <script>
    function updateValues() {
        $.getJSON('/values', function(data) {
            $('#values').empty();
            for (var i = 0; i < data.length; i++) {
                $('#values').append('<p>valeur' + (i+1) + ': ' + data[i] + '</p>');
            }
        });
    }

    // Mettre à jour les valeurs toutes les secondes
    setInterval(updateValues, 1000);
    </script>
</body>
</html>

et voici le CCS

body {

    background-color: beige;

}



#title {

    background-color: lightblue;

    text-align: center;

    padding: 10px;

    margin-bottom: 20px;

    border: 1px solid black;

}



.row {

    display: flex;

    justify-content: space-around;

    flex-wrap: wrap;

}



.box {

    background-color: lightgreen;

    border: 1px solid black;

    margin: 10px;

    padding: 10px;

    flex: 1 0 20%;  /* Grow and shrink, basis */

}



#timestamp {

    position: fixed;

    bottom: 0;

    left: 0;

    padding: 10px;

}

Le résultat donne cela :

J'avoue m'être servi de l'AI Copilot pour créer le html et CCS mais soit je l'ai mal renseigné, soit l'AI a ses limites. Je ne souhaite pas que l'on fasse le job à ma place, je veux comprendre pour modifier améliorer et je souhaite pour commencer savoir comment afficher des "messages box" des boutons des textes à des positions spécifique avec fond de couleur différente, encadrement, deux lignes de textes une pour l'affichage du nom de la valeur et la deuxième pour la valeur...

J'ai cherché des infos sur le Internet soit c'est des tuto pour débutant "Hello Word" je dois savoir l'afficher dans 6 ou 7 langages de programmation différents, ça suffit. :)  , soit ça ne correspond pas vraiment à ce que je veux faire.

Auriez vous des liens de tutos à ma proposer, des explications sur les principes d'affichage de boites de message de boutons, en VBA je sais bien le faire mais là c'est nouveau pour moi. Je n'espère pas avoir été trop long, merci de m'avoir lu jusqu'au bout.

Bonsoir,

>> mais je souhaiterais avancer un peu plus vite dans mon projet.

Il faut savoir marcher avant de vouloir courir!!!

>> J'avoue m'être servi de l'AI Copilot pour créer le html et CCS

Pas une bonne idée quand on ne sais pas ce que l'on fait!

>> soit l'AI a ses limites.

C'est clair.

Passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org et pour le CSS https://jigsaw.w3.org/css-validator/

La balise <script> doit être soit dans le <head> soit dans le <body> et pas se balader n'importe ou.

Vous n'utilisez pas les class CSS que vous indiquer dans votre code. Pour quelles raisons? 

Une page web possède un titre soit la balise <title> dans le <head> et celle ci ne doit pas être vide. 

L20 vous devez indiquer une URL valide pour votre image de fond, quelles est la structure hiérarchique de votre projet?

>> je veux comprendre pour modifier améliorer et je souhaite pour commencer savoir comment afficher des "messages box" des boutons des textes à des positions spécifique avec fond de couleur différente, encadrement, deux lignes de textes une pour l'affichage du nom de la valeur et la deuxième pour la valeur...

C'est ce qui est vus dans le cours HTML/CSS de ce site. Ou en êtes vous dans votre apprentissage?

Autres site pour apprendre :

• https://grafikart.fr/formations/html
• https://www.pierre-giraud.com/html-css-apprendre-coder-cours/
• https://developer.mozilla.org/fr/docs/Learn/HTML

-
Edité par AbcAbc6 15 mars 2024 à 21:24:51