Main Content

Diese Seite wurde mithilfe maschineller Übersetzung übersetzt. Klicken Sie hier, um die neueste Version auf Englisch zu sehen.

Betten Sie Ihre ThingSpeak Plots in Webseiten ein

Sie können ThingSpeak™- Grafiken einbetten und aktuelle Daten auf Ihrer eigenen Website oder Ihrem Blog anzeigen. Sie können ThingSpeak -Displays verwenden, um:

  • Stellen Sie Echtzeit-Updates Ihrer Messwerte auf Ihrer eigenen Webseite bereit.

  • Erstellen Sie ein Dashboard, um mehrere Felder oder Kanäle auf derselben Seite anzuzeigen.

  • Erstellen Sie eine mobile App mit eingebetteten ThingSpeak- Plots.

Betten Sie eine Handlung in eine Webseite ein

  1. Sammeln Sie die <iframe>-Tag-Informationen aus dem Plot, an dem Sie interessiert sind. Klicken Sie in der Titelleiste Ihres Plots auf die Wortblase.

  2. Kopieren Sie den im Fenster angezeigten Text. Der Text hat das hier gezeigte Format:

    <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">

  3. Sie können HTML in jedem Nur-Text-Editor wie Notepad bearbeiten. Fügen Sie in Ihrem Editor das Element, das Sie aus Ihrem Kanal kopiert haben, zu Ihrer HTML-Datei hinzu.

    <html><head><title>ThingSpeak Embedded Plot</title></head>
<body>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">
</body></html>

Hier ist ein Beispiel eines eingebetteten Plots auf einer Webseite.

Größe der Diagramme für das ThingSpeak- Dashboard ändern

Sie können die Größe des Iframes ändern, um sicherzustellen, dass die Diagramme in den verfügbaren Platz passen. Die Grundstücksgröße ist besonders wichtig für mobile Displays. Wenn Sie nur den einschränkenden Parameter angeben, stellt Ihr Browser sicher, dass das Objekt in den definierten Raum passt. Verwenden Sie beispielsweise <iframe width=“200“...>, um sicherzustellen, dass Ihr Iframe in einen 200-Pixel-Bereich auf dem Display passt.

Sie können auch mehrere Diagramme aus verschiedenen Feldkanälen in derselben Anzeige kombinieren. Hier ist eine Dashboard-Ansicht von vier Diagrammen.

Die Größe eines Exemplars wurde manuell angepasst, um es an den Platz anzupassen. Der Tabellenbereich steuert die Größe von drei der Diagramme. Dieser HTML-Code demonstriert ein ThingSpeak -Dashboard.

<html>
<head>
<title>Data Collection Dashboard</title>
</head>
<body>
<table border=2 bordercolor="#0000FF">
<tr><td colspan="2">
<h1 align="center" color="#00FFFF">Data Collection Dashboard</h1>
</td></tr>
<tr><td>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/320695/charts/1?bgcolor=%23ffffff&color=%23F62020&dynamic=true&results=800&type=line&update=15"></iframe>
</td>
<td><iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/166526?color=%23FFFFFF&dynamic=true"></iframe>
</td></tr>
<tr><td>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/12397/charts/2?results=720&dynamic=true&update=15"></iframe>
</td>
<td>
<iframe width="300" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/308777"></iframe>
<h3>Links</h3>
<a href="https://www.google.com">Google</a><br>
<a href="https://www.Mathworks.com">Mathworks</a><br>
<a href="https://en.wikipedia.org/wiki/Cleve_Moler">Wikipedia</a>
</td>
</html>

Verwandte Themen