Sensordaten auf Webseite einbinden?

Hallo. Ich habe eine Webseite auf einem Server, bei der ich Standbilder einer Landschaft übertrage. Ich würde dazu gern noch Sensordaten, wie Temperatur, Feuchte und Luftdruck anzeigen lassen.

Die Messwerterfassung wollte ich mit Arduino oder dem ESP8266 machen.

Aber wie bekomme ich die Daten auf meine HTML-Seite?

2 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

10.05.2022, 20:11

Dieser Artikel zeigt Schritt für Schritt, wie man einen lokalen und einen globalen Server mit einem Arduino erstellen kann. Im letztgenannten Fall würdest du deinen Arduino also mit dem Internet verbinden. Er könnte somit selbst als Webserver für deine Seite dienen oder du stellst mit ihm nur eine einfache API. Deine Webanwendung könnte also bestimmte URLs aufrufen (z.B. via Fetch), um über den Response die aktuellen Messdaten zu erhalten.

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Arduino

11.05.2022, 07:27

Hallo,

ist deine webseite PHP fähig?

wäre vom Vorteil, denn es gibt eine FUnktion, nennt sich: imagestring

du könntest den ESP dazu bringen die Daten nur bei anfrage zu senden, PHP -Script so machen ,dass alle 60s z.B. sich die webseite aktualisiert und somit den ESP per GET die daten anfragt und PHP die daten in den String holt..dann die oben genannte Funktion imagestring nutzen, um die daten ins bild einblenden zu lassen.

du könntest auch als Text diese daten einblenden..würde ja auch gehen..

Ähnliche Beiträge

C# in html Webseite einbinden?

Ich habe ein Login Formular mit C# in Visual Basic programmiert. Wie kann ich das in meine HTML Webseite einbinden?

HTML. Videos in dei Mitte der Webseite einbinden?

Wenn ich Videos/Bilder auf meiner Webseite einbinde, sind die immer Links am Rand. Wie bekomm ich sie in die Mitte?

Kann man eine HTML Seite steuern?

Hallo ich werde an meiner Schule ein Arduino Workshop machen...

Mein Plan ist das man auf meiner Webseite den Code und Bilder zu dem entprechenen Projekt sind, aber zum schluss soll ein "weiter" Button da sein der erst gedrücht werden kann wenn ein anderes HTML Dokument (also der ADMIN) dies freigibt. Sodas alle gleichschnell sind und keiner einfach vorspringen kann...

Danke und Liebe Grüße

Webcam in Webseite einbinden,Wie?

Ich würde gerne (z.B mit einem html code oder so)meine Webcam auf meine Webseite einbinden,Kennt jemand eine seite oder Programm???

Kann ich mit diesem ESP8266-01S Wlan Modul Daten von einem victron Smart solar Laderegler per WLAN übertragen?

Kann ich mit diesem ESP8266-01S Wlan Modul* Daten von einem victron Smart solar Laderegler per WLAN übertragen?

* https://www.amazon.de/AZDelivery-esp8266-esp-01-Breadboardadapter-Arduino/dp/B072R6DPK7

CMS in eigene HTML/CSS Webseite einbinden?

Hallo,

folgendes:

Ich habe eine Webseite für eine kleine Firma mittels HTML/CSS erstellt. Einen Baukasten habe ich nicht verwendet, da die Webseite ziemlich komplex war und der Inhaber sie lieber nach eigenen Vorstellungen erstellt haben wollte und nicht einfach durch eine Copy/Paste-Vorlage.

Die Webseite ist soweit fertig, nun möchte der Inhaber aber selbst Inhalte einfügen und aktualisieren können. Kann ich meine HTML-Seite nachträglich zum Beispiel mit einem CMS einbinden? Ich habe sie in VS Code erstellt.

Die Idee mit dem CMS kam daher, dass der Inhaber mit dem Code nicht zurechtkommt und ich Angst habe, dass er die ganze Webseite zerstört, falls er den Code falsch ändert.

Gibt es auch noch andere bessere Varianten als CMS?

Danke schonmal.

Arduino Webseite auf SD-Karte?

Guten Tag, ich habe folgenden Code:

http://pastebin.com/f0xJ54dx

und ich will nicht, dass das im Programm Code steht, sondern auf einer externen Micro-SD Karte, damit ich die Datei besser bearbeiten kann und nicht gleich den ganzen Arduino Sketch umändern muss, also das ist ein HTML Text, für eine Web-Seite.

Hat jemand eine Idee wie ich es machen könnte? weil auf der SD-Karte soll nur der HTML-Code sein (index.htm) und eine CSS-Datei (style.css).

Was muss ich im Arduino Code einfüge, damit er diese beiden Dateien ausführt?

Danke schonmal im vorraus

LG Joé

Lottozahlen Generator für Website?

Hallo,

ich suche ein/-en Lottozahlen-Generator/Widget zum Einbinden in meine Webseite.

Bei Google habe ich nichts gescheites gefunden und meine HTML- und Programmiererkenntnisse sind eher schlecht.

Ich bedanke mich schon einmal!

Wie kann man eine Webseite (HTML/CSS/JS) in WordPress einbinden (unverändert dort einsetzen)?

Kurze Frage,

Ich habe eine Webseite mit HTML/CSS und JS erstellt und möchte diese jetzt bei WordPress einfügen, damit andere, die keine Ahnung von HTML haben diese auch gut bearbeiten können. Funktioniert es vielleicht, einfach die Dateien die man hat hochzuladen? Ich beschäftige mich jetzt schon seit Tagen und komme nicht voran... Ich bin am verzweifeln. Ich würde mich über jede Hilfe freuen.

LG

Wie kann ich eine Passwort geschützte PDF Datei per HTML in eine Webseite einbinden?

Hallo,

ich möchte eine Passwortgeschützte PDF Datei aus dem Internet in eine Webseite einfügen. Dies soll über eine Vorschau funktionieren und nicht als Link angezeigt werden. Normale PDF Dateien kann man ja per iframe einbinden, aber ich habe bisher keinen weg gefunden dies mit einer Passwortgeschützten PDF zu machen.

Beste Grüße

Text später einblenden mit Javascript? Muss man es durch einen Link machen, wo die ganze Webseite neu geladen wird oder geht es einfacher?

Hey, Bin in dem Gebiet Javascript nicht gerade ziemlich erfahren. Ich will nicht viel mit Javascript machen, nur möchte ich auf meiner Webseite an einen Text so etwas wie (Weiterlesen) einbinden, muss ich dazu dann einfach in HTML einen Link erstellen, zur einer neuen Webseite, wo ich quasi alles kopiere und nur den restlichen Text einfüge ? Nein oder, man macht ja nicht für jede Kleinigkeit eine ganz neue Seite. Wie stelle ich das dann in HTML und anschließend mit der Javafunktion an?

PS: Hab eigentlich auch schon den passen Javascriptcode gefunden, nur ich verstehe halt hauptsächlich nicht, ob man in HTML eine komplett neue Webseite dafür machen muss ??

Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>

Wie kann man eine SVG-Datei in CSS nach links zentrieren?

Hallo,

ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.

Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.

Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?

HTML:

<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>

CSS:

.Welt {
  width: 75%;
  height: 75%;
}

Danke schon einmal im Voraus. :)

SQL Datenbank in Webseite einbinden HTML

Hallo Leute,

ich muss für ein Schulprojekt eine MYSQL Datenbank erstellen (bereits erledigt) und diese nun auf eine Webseite einbinden. Wir haben dazu null Informationen bekommen und müssen uns das alles selbst irgendwie beibringen, allerdings habe ich davon überhaupt keine Ahnung. Bin gaar kein Programmierer! Hab jetzt keine Ahnung, was ich da wie genau machen muss. Alle "Tutorials" die ich bei google finde, sagen mir überhaupt nichts, weil ich einfach mit der Programmiersprache im Allgemeinen nichts anfangen kann (bin da nicht helle genug für oder so).

Kann mir bitte irgendeiner weiterhelfen? Tipps und Tricks, mögliche Infos und Hilfen wären super! Danke

Was möchtest Du wissen?

Deinen Beitrag erstellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }