ดาวน์โหลด powerflow display - powerflow display Source Source Download

powerflow display

PowerBuilder

1.0.0

ดาวน์โหลด

powerflow-display

มีวัตถุประสงค์เพื่อแสดงการไหลของพลังงานในบ้านบนหน้าจอขนาดที่ลดลงเช่นหมวก Raspberry Pi โดยมีความละเอียด 480x320

ได้รับแรงบันดาลใจอย่างมากและขึ้นอยู่กับงานที่ทำเพื่อผู้ช่วยในบ้านใน repo นี้: https://github.com/reptilex/tesla-style-solar-power-card

สร้างด้วย Qwik มันเป็นครั้งแรกของฉันที่มีกรอบนี้อย่าลังเลที่จะยกประเด็นหากคุณมีคำแนะนำใด ๆ

มันทำงานอย่างไร

โครงการนี้เชื่อมต่อกับนายหน้า MQTT ผ่าน WebSocket (โดยปกติจะปิดการใช้งานโดยค่าเริ่มต้น) การกำหนดค่านายหน้าสามารถแก้ไขได้ใน src/routes/index.tsx

คาดว่าข้อความต่อไปนี้ใน MQTT:

powerinfo/grid : พลังงานที่ใช้หรือฉีดเข้าไปในกริด (ลบถ้าฉีด)
powerinfo/house : พลังที่ใช้ในบ้าน
powerinfo/solar : พลังงานที่ผลิตโดยแผงโซลาร์เซลล์
powerinfo/heat : พลังงานที่ใช้โดยความร้อน

โครงสร้างโครงการ

โครงการนี้ใช้ qwik กับ qwikcity Qwikcity เป็นเพียงชุดเครื่องมือพิเศษที่อยู่ด้านบนของ Qwik เพื่อให้ง่ายต่อการสร้างไซต์เต็มรูปแบบรวมถึงการกำหนดเส้นทางตามไดเรกทอรีเค้าโครงและอื่น ๆ

ภายในโครงการของคุณคุณจะเห็นโครงสร้างไดเรกทอรีต่อไปนี้:

 ├── public/
│   └── ...
└── src/
    ├── components/
    │   └── ...
    └── routes/
        └── ...

src/routes : ให้การกำหนดเส้นทางตามไดเรกทอรีซึ่งอาจรวมถึงลำดับชั้นของไฟล์เลย์เอาต์ layout.tsx และไฟล์ index.tsx เป็นหน้า นอกจากนี้ไฟล์ index.ts เป็นจุดสิ้นสุด โปรดดูเอกสารการกำหนดเส้นทางสำหรับข้อมูลเพิ่มเติม
src/components : ไดเรกทอรีที่แนะนำสำหรับส่วนประกอบ
public : สินทรัพย์คงที่ใด ๆ เช่นรูปภาพสามารถวางไว้ในไดเรกทอรีสาธารณะ โปรดดูไดเรกทอรีสาธารณะ Vite สำหรับข้อมูลเพิ่มเติม

เพิ่มการรวมและการปรับใช้

ใช้คำสั่ง yarn qwik add เพื่อเพิ่มการรวมเข้าด้วยกัน ตัวอย่างของการรวมกัน ได้แก่ : CloudFlare, Netlify หรือ Express Server และตัวสร้างไซต์แบบคงที่ (SSG)

yarn qwik add # or `yarn qwik add`

การพัฒนา

โหมดการพัฒนาใช้เซิร์ฟเวอร์การพัฒนาของ Vite ในระหว่างการพัฒนาคำสั่ง dev จะแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) เอาต์พุต

npm start # or `yarn start`

หมายเหตุ: ในระหว่างโหมด Dev Vite อาจขอไฟล์. .js จำนวนมาก สิ่งนี้ไม่ได้เป็นตัวแทนของการผลิต QWIK

ดูตัวอย่าง

คำสั่ง Preview จะสร้างการสร้างการผลิตของโมดูลไคลเอนต์การสร้างการผลิตของ src/entry.preview.tsx และเรียกใช้เซิร์ฟเวอร์ท้องถิ่น เซิร์ฟเวอร์ตัวอย่างมีไว้เพื่อความสะดวกในการดูตัวอย่างการผลิตในเครื่องเท่านั้นและไม่ควรใช้เป็นเซิร์ฟเวอร์การผลิต

yarn preview # or `yarn preview`

การผลิต

การสร้างการผลิตจะสร้างโมดูลไคลเอนต์และเซิร์ฟเวอร์โดยเรียกใช้คำสั่งทั้งไคลเอนต์และเซิร์ฟเวอร์ นอกจากนี้คำสั่ง build จะใช้ TypeScript เพื่อเรียกใช้ประเภทตรวจสอบบนซอร์สโค้ด