ฉันต้องทำอย่างไรเพื่อให้ Raspberry Pi โฮสต์เว็บเพจที่มีแป้นหมุนซึ่งระบุอุณหภูมิของ CPU โหลด CPU ฯลฯ ตามเวลาจริง

27

ฉันทำได้ดีกับคำสั่ง Unix และการเขียนสคริปต์ แต่ฉันแทบไม่มีประสบการณ์บนเว็บเลย ฉันมีสคริปต์ที่จับตัวชี้วัดที่ฉันสนใจเช่นโหลด CPU หรืออุณหภูมิของระบบและอัปเดตไฟล์ทุก ๆ 10 วินาที ฉันต้องการชี้ iPad ของฉันไปยังเว็บไซต์ท้องถิ่นที่โฮสต์โดย Raspberry Pi ของฉันซึ่งมีการอัปเดตการแสดงข้อมูลกราฟิกแบบเรียลไทม์

ฉันทำงานก่อนตั้งค่าเว็บเซิร์ฟเวอร์ Apache อย่างง่ายและฉันสามารถเขียน HTML และ JavaScript ได้ นอกจากนั้นฉันหลงทางและต้องการใครสักคนชี้ให้ฉันในทิศทางที่ถูกต้อง

— jake9115
แหล่งที่มา

2

คำถามของคุณกว้างไปหน่อย คุณต้องการวิธีแก้ปัญหาที่รวดเร็วและสกปรกหรือคุณต้องการโค้ดโปรแกรมขนาดเล็กที่เหมาะกับระบบฝังตัว Linux ขนาดเล็กหรือไม่?

— Basile Starynkevitch

เริ่มแรกฉันกำลังมองหาบางสิ่งที่รวดเร็วและสกปรก แต่ความพร้อมของเครื่องมือที่ดีมากที่กล่าวถึงด้านล่างตอนนี้ทำให้ฉันสนใจมากขึ้น

— jake9115

FYI นอกจากนี้ยังมี Raspberry Pi Stack: raspberrypi.stackexchange.com

— Todd Wilcox

github.com/firehol/netdataติดตั้งง่ายมาก ยังไม่ได้ทดสอบกับ Pi แม้ว่า

— Der Hochstapler

30

ฉันใช้GrafanaกับInfluxDBสำหรับสิ่งนี้กับ Raspberry Pi 3 ของฉันพวกมันค่อนข้างง่ายต่อการติดตั้งและเชื่อมต่อซึ่งกันและกัน พวกเขายังทำงานได้ดีในภาชนะDockerบน Raspberry Pi

ฉันสตรีมการอัปเดตทั้งหมดของฉันไปยัง InfluxDB ตามที่สร้างขึ้น จากนั้น Grafana ทำงานกราฟิกทั้งหมดในการแสดงในรูปแบบภาพที่ดี ฉันออกแบบแดชบอร์ดง่าย ๆ สำหรับ iPad เครื่องเก่าที่มีหน้าจอเล็กลง

มันฟังดูเหมือนการติดตั้งและค่าใช้จ่ายมากมาย แต่มันก็ดูดี

— 0xACE
แหล่งที่มา

เด็ดมาก คุณมีสกรีนช็อตของจอภาพ Grafana หรือไม่? แค่สงสัย.

— jake9115

ได้. อาจไม่เข้าท่ามากนักอันนี้เป็นสิ่งที่ผิดพลาด Snapped บนคอมพิวเตอร์ของฉันดังนั้นอย่าปรับขนาดตามที่ดูบน iPad

— 0xACE

ดูยอดเยี่ยมแทบรอไม่ไหวที่จะตั้งค่าของฉัน! ฉันมีเซิร์ฟเวอร์ pi สีส้ม 16 โหนดว่านี่จะเหมาะสำหรับ ขอบคุณอีกครั้ง.

— jake9115

(ปิดหัวข้อ) ฉันเห็นคำถามอื่นของคุณเกี่ยวกับการเข้าร่วม Pi ของเป็นสิ่งที่ดูเหมือนกระดานเดียวที่มีหลายแกน กำลังจะส่งข้อความว่าชาย HPC ที่วิทยาลัยที่ฉันทำงานอยู่ได้ติดตั้งระบบ แต่แล้วก็จำได้ว่าเขาใช้ "son of grid engine" ซึ่งไม่ได้ทำสิ่งที่คุณกำลังมองหา

— 0xACE

1

@ 0xACE พิจารณาใน pi เป็นความคิดที่ดีที่จะสแปมเซิร์ฟเวอร์ apache ด้วยคำขอเช่นกัน อีกทั้งยุค 10 ยังหมายถึงการตั้งค่าปัจจุบันของผู้ถามในขณะที่พวกเขาต้องการบางสิ่งที่เร็วขึ้น

— jdwolf

9

สำหรับการมีการตรวจสอบเว็บแดชบอร์ดที่มีน้ำหนักเบาและง่ายมากที่จะติดตั้ง (และขยาย) การตรวจสอบหน้าราสเบอร์รี่ของคุณคุณมีRPI จอภาพ

มันมาพร้อมกับค่าเริ่มต้นและการกำหนดค่าส่วนใหญ่จะแก้ไขไฟล์ข้อความง่ายๆ ฉันกำหนดค่ามันเพื่อเพิ่มกราฟความชื้นจาก DTH21 ได้อย่างง่ายดาย

img_link img_link2

— Rui F Ribeiro
แหล่งที่มา

2

ฉันซาบซึ้งกับการบริจาค ดูเหมือนว่าจะมีน้ำหนักเบามากและอาจเป็นตัวเลือกในการสร้างกราฟที่ดีในขณะที่ฉันเรียนรู้วิธีการตั้งค่าโซลูชันที่เกี่ยวข้องเพิ่มเติมที่นี่ ขอบคุณ!

— jake9115

ยินดี. ฉันใช้มันเกือบ 3 ปีแล้วที่บ้าน ดูคำถามที่เกี่ยวข้องelectronics.stackexchange.com/questions/236530/…

— Rui F Ribeiro

6

เรียลไทม์สำหรับการใช้งานบนเว็บเครื่องมือที่ดีที่สุดคือWebSocket โดยทั่วไปสิ่งเหล่านี้จะถูกนำไปใช้ในแอปพลิเคชันเซิร์ฟเวอร์ไม่ใช่เว็บเซิร์ฟเวอร์ แต่ Apache มีวิธีในการใช้เว็บพร็อกซี สิ่งนี้สามารถให้การอัปเดตต่อวินาทีหรือรองได้อย่างง่ายดาย

ไลบรารีใดที่คุณใช้บนแอ็พพลิเคชันเซิร์ฟเวอร์จะขึ้นอยู่กับแพลตฟอร์มของเว็บที่คุณต้องการใช้ แต่ตัวอย่างเช่นไลบรารียอดนิยมสำหรับ Node.js คือ Socket.IO

ในฝั่งไคลเอ็นต์คุณสามารถตั้งค่าการเชื่อมต่อเช่นนี้:

socket = new WebSocket("ws://website.net:8282");

socket.addEventListener('message', function (event) {
    var message = event.data;
    // Code to update site
});

ทางฝั่งเซิร์ฟเวอร์ที่มี Node.js โดยใช้ไลบรารี WebSocket ขั้นพื้นฐาน:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8282 });
wss.on('connection', function connection(ws) {
  dataOnUpdateEvent(function(event) {
    var data = event.getdata();
    var message = parseData(data);
    ws.send(message);
  });
});

— jdwolf
แหล่งที่มา

1

ขอบคุณสำหรับความคิด มันมีประโยชน์มาก แต่ดูเหมือนว่าจะเป็นรากฐานที่เข้าใจได้ง่าย

— jake9115

2

@ jake9115 เฮ้คำถามของคุณดูเหมือนจะแนะนำให้คุณสนใจในการทำใบสมัครด้วยตัวเอง

— jdwolf

2

ในความจริงแล้วฉันตั้งใจจะให้รหัสด้วยตัวเอง แต่ grafana นั้นดูเรียบเนียนจนฉันไม่ต้องการที่จะพลิกโฉมพวงมาลัยนี้ ขอบคุณนะ!

— jake9115

4

คุณยังสามารถดู Node-RED https://nodered.org มันมาพร้อมกับ Raspbian

นี่คือแดชบอร์ดที่ฉันสร้างขึ้น

— jwygralak67
แหล่งที่มา

ฉันจะดูมันขอบคุณสำหรับการมีส่วนร่วม

— jake9115

1

ฉันใช้ Node-Red กับการตั้งค่าของฉัน แต่ข้อมูลประวัติจะใช้ได้เฉพาะเมื่ออินสแตนซ์ของคุณกำลังทำงาน นั่นคือถ้าคุณปรับใช้ใหม่ (หรือสูญเสียพลังงาน) ไม่มีการวัดทางประวัติศาสตร์ใด ๆ ไว้แผนภูมิของคุณจะเริ่มต้นใหม่โดยไม่ทำอะไรเลย คุณสมบัตินั้นเป็นสิ่งที่กระตุ้นให้ฉันเริ่มเข้าสู่ InfluxDB จริงๆ

— 0xACE

อาน่ารู้ดี ข้อมูลประวัติมีความสำคัญต่อฉัน ฉันชอบวิธีที่กราฟของคุณรวมข้อมูลบนเว็บอื่น ๆ เช่นราคา bitcoin นั่นอยู่นอกเหนือขอบเขตเริ่มต้นของฉัน แต่ไม่ใช่อีกต่อไป

— jake9115

ใช่ตัวอย่างนั้นฉันยังรวมข้อมูลจากแอพที่ฉันมีใน iOS App Store (สำหรับลูกเสือทำผลัดกันดี) ที่เก็บข้อมูลไว้ในฐานไฟของ Google นั่นคือแผนที่ที่ด้านล่าง ฉันใช้โหนดสีแดงเพื่อดึงข้อมูลจากฐานไฟและดันเข้าไปในการไหลเข้าดังนั้นมันไม่ใช่การไหลเข้าและกราฟิคทั้งหมด

— 0xACE

2

ฉันใช้phpSysInfoเพื่อตรวจสอบเซิร์ฟเวอร์ / คอมพิวเตอร์ Linux ทั้งหมดของฉันและฉันชอบความเรียบง่ายของมัน การตั้งค่ายังง่ายต่อการเข้าใจและคุณสามารถกำหนดอัตราการรีเฟรชของคุณเอง

— McMuffin
แหล่งที่มา

1

หากคุณต้องการโค้ดใน C หรือ C ++ คุณอาจใช้ไลบรารีเซิร์ฟเวอร์ HTTP บางอย่างเช่นlibonionหรือWtเพื่อกำหนดรหัสเซิร์ฟเวอร์ HTTP เฉพาะของคุณ (อาจใช้sqliteสำหรับฐานข้อมูล) คุณควรเข้าใจโปรโตคอลHTTP (รวมถึงคุกกี้HTTPและส่วนหัว HTTP ) และHTML5ด้วย

คุณอาจต้องการใช้เทคนิคAjaxและWebSocket (รองรับ WebSockets โดย libonion & Wt, Ajax ให้คำขอ HTTP ปกติที่เริ่มต้นด้วยรหัส JavaScript ที่ทำงานในเบราว์เซอร์ไคลเอ็นต์) คุณสามารถใช้ผ้าใบ HTML5 และ / หรือSVGสำหรับกราฟิก คุณอาจพบว่าเฟรมเวิร์กเว็บ HTML5 มีประโยชน์ ส่วนใหญ่ใช้ Javascript, DOM, HTML5, ....

— Basile Starynkevitch
แหล่งที่มา