تنزيل powerflow display - تنزيل رمز مصدر powerflow display

powerflow display

باور بيلدر

1.0.0

تنزيل

Powerflow-Display

تهدف إلى عرض تدفق الطاقة المنزلي على شاشة منخفضة الحجم ، مثل قبعة Raspberry ، بدقة 480 × 320.

مستوحى بقوة واستنادا إلى العمل الذي تم للمساعد المنزلي في هذا الريبو: 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 و Generator STATIC SITE (SSG).

yarn qwik add # or `yarn qwik add`

تطوير

يستخدم وضع التطوير خادم تطوير Vite. أثناء التطوير ، سيقوم أمر dev بتجميع الخادم (SSR) الإخراج.

npm start # or `yarn start`

ملاحظة: أثناء وضع DEV ، قد تطلب Vite عددًا كبيرًا من ملفات .js . هذا لا يمثل بناء إنتاج QWIK.

معاينة

سيقوم أمر المعاينة بإنشاء بناء إنتاج لوحدات العميل ، وبناء إنتاج من src/entry.preview.tsx ، وتشغيل خادم محلي. خادم المعاينة هو فقط للراحة لمعاينة بناء إنتاج محليًا ، ويجب عدم استخدامه كخادم إنتاج.

yarn preview # or `yarn preview`

إنتاج

سيقوم بناء الإنتاج بإنشاء وحدات العميل والخادم عن طريق تشغيل أوامر إنشاء العميل والخادم. بالإضافة إلى ذلك ، سيستخدم أمر Build TypeScript لتشغيل نوع تحقق من رمز المصدر.