من یک تصویرگر استخدام کردم تا خانه ام را بکشد. اکنون داشبورد «دستیار خانگی» من است

شومینه سوسو می زند، چراغ های باغ می درخشد، و تهویه مطبوع اتاق خواب بی سر و صدا در حال وزیدن است - نه تنها در خانه من، بلکه در تصویری که با دست از آن کشیده شده است. این داشبورد Home Assistant من است و برای اولین بار، این داشبورد است که تمام خانواده واقعا از استفاده از آن لذت می برند.

در سال گذشته، خانه‌ام را با Home Assistant، پلتفرم خانه هوشمند منبع باز، خودکار کرده‌ام. من سعی کردم تا حد امکان خودکار کنم، بنابراین همه چیز بدون اینکه کسی آنها را لمس کند کار می کند. وقتی همه می روند، همه کولرها خاموش می شوند. آبپاش باغ زمان کار خود را با توجه به آب و هوا محاسبه می کند: در روزهای گرم طولانی تر است، زمانی که باران می بارد به طور کامل حذف می شود.

با تشکر برای خواندن! برای دریافت پست های جدید و حمایت از کار من به صورت رایگان مشترک شوید.

اما بعضی چیزها هنوز به انسان نیاز دارند. چراغ های باغ بهترین نمونه هستند. آن‌ها را فقط می‌توان از طریق یک برنامه روشن کرد، خواه سازنده یا دستیار خانگی. و من خودم آن را بدتر کردم: یک تایمر در Home Assistant چراغ های باغ را پس از مدتی به طور خودکار خاموش می کند. وقتی نزدیک است که تمام شود، چراغ ها شروع به چشمک زدن می کنند و به شما زمان می دهند تا برنامه را باز کنید و در حالی که هنوز روشن هستند، آن را تمدید کنید. مشکل؟ هیچ کس دیگری در خانواده نمی خواست از برنامه Home Assistant یا داشبوردی که من در آن زمان داشتم استفاده کند.

من می توانستم یک سوئیچ فیزیکی نصب کنم، اما این تایمر را حل نمی کند. و کنترل برخی از دستگاه ها از طریق یک برنامه ساده تر است. سعی کنید آبپاش را با دکمه روی خود دستگاه روشن کنید، سپس قبل از خیس شدن از باغ خارج شوید.

بنابراین فکر کردم: چرا یک داشبورد آنقدر جالب نسازیم که همه بخواهند از آن استفاده کنند؟

داشبوردهای زیادی را نگاه کردم و به ایده پلان طبقه افتادم: یک نقشه تعاملی از خانه که نقشه واقعی را منعکس می کند. بیشتر مواردی که من پیدا کردم سه بعدی بودند، یا با کارت های سفارشی Home Assistant یا در نرم افزار مدل سازی شخص ثالث ساخته شده بودند، و من یک مقاله در مورد پلان پیکسل هنری پیدا کردم.

برنامه های سه بعدی برای من کاملا کلیک نکردند. در اکثر مواردی که من دیدم، خود مدل یک تصویر ثابت بود و هر چیزی که تعاملی بود یک لایه آیکون در بالای آن بود. 1 رویکرد هنر پیکسلی جذاب بود، اما به این معنی بود که همه چیز را خودتان ترسیم کنید یا اسپرایت های کتابخانه را یکی یکی در یک ویرایشگر گرافیکی قرار دهید.

من ایده پیکسل آرت را آنقدر دوست داشتم که به دنبال هنرمندی بروم، و به زودی متوجه شدم که پیدا کردن و رزرو یک هنرمند خوب سخت تر از آن چیزی است که به نظر می رسد. هنرمندان متخصص هستند و هر کدام سبک مخصوص به خود را دارند. پیدا کردن هنرمندان محبوب آسان‌تر است، اما احتمالا ماه‌ها قبل رزرو شده‌اند و حتی اگر رایگان باشند، خود آثار هنری از چند هفته تا چند ماه طول می‌کشد. علاوه بر این، داشبورد یک سفارش غیرمعمول است: هنرمند باید بفهمد که چیست و از نظر فنی به چه چیزی نیاز دارد، نه اینکه فقط یک تصویر زیبا ترسیم کند.

خوشبختانه، به من یک هنرمند محیطی شگفت‌انگیز توصیه شد که نمونه کارهایش از قبل مملو از فضاهای با تصویرسازی زیبا بود. من سبک آنها را دوست داشتم، و پس از چند پیام رفت و برگشت مطمئن شدم که در مورد هدف نهایی یکسان هستیم. ایده هنر پیکسلی به مرگ طبیعی مرد: شخصی را پیدا کردم که سبکش بیشتر برایم جذاب بود و از قبل می دانست چگونه یک اتاق را طراحی کند.

برای شروع، من یک بسته برای هنرمند جمع آوری کردم:

یک پلان معماری ساده از خانه. هیچ مبلمانی روی آن نبود، بنابراین آن را در خودم مشخص کردم.

عکس‌های اتاق‌ها، به عنوان مرجعی برای آنچه واقعا آنجاست.

تصاویری که به صورت آنلاین پیدا کردم، به عنوان مرجعی برای سبک و رنگ.

نمونه‌هایی از داشبوردهای دیگر، تا هنرمند بتواند ببیند نتیجه نهایی برای چه بوده است.

مشخصات فنی کوتاه: الزامات، فایل‌ها و فرمت‌هایی که به آن‌ها نیاز داشتم، و یادداشتی در مورد هر یک از منابع بالا که توضیح می‌دهد برای چه منظوری است.

رنگ کدهای رنگ از آخرین بازسازی ما. بهتر است به جای ضروری، زیرا رنگ ها را می توان با عکس ها مطابقت داد.

من می خواهم کمی بیشتر در مورد بخش فنی خلاصه صحبت کنم، زیرا بقیه مقاله بر اساس آن است. PNG هایی با شفافیت (WebP برای انیمیشن ها)، یک نسخه روز و شب از هر طبقه، و هر دستگاه در لایه خودش: یک تصویر ثابت برای «خاموش» و یک حلقه کوتاه فریم برای «روشن» (هشت فریم زیاد بود)، هم در نور روز و هم در شب بخواهید. مهمتر از همه، هر فایل باید بر روی یک بوم مشترک با همان اندازه صادر شود، به طوری که هر قطعه دقیقا در جایی که متعلق به خانه است قرار گیرد نه اینکه برش داده شود.

این یک قانون باعث می‌شود روزهایی که بعدا چیزها را ردیف کنم، که به سختی یاد گرفتم، صرفه‌جویی می‌کند.

چند یادداشت از ساخت خودم. برای باغ به سه نسخه رسیدم: روز، شب و شب با چراغ‌های روشن. و من ابتدا انیمیشن‌ها را به‌عنوان برگه‌های PNG sprite درخواست کردم، اما در نهایت فریم‌ها را به WebP متحرک تبدیل کردم، بنابراین می‌توانید از همان ابتدا از هنرمند درخواست WebP کنید.

پیدا کردن یک هنرمند، کار کردن به آنچه داشبورد به آن نیاز دارد و آماده کردن تمام مستندات احتمالا بخش عمده ای از کار روی این پروژه بود. این کاملا منطقی است، زیرا اثر هنری پروژه است! وقتی داشبورد یک تصویر است، با حالت‌هایی که به‌عنوان انیمیشن نشان داده می‌شوند و رابط کاربری به چند نماد و خوانش حسگر کاهش می‌یابد، دیگر چیز زیادی برای طراحی یا کدگذاری باقی نمی‌ماند.

پس از آماده شدن تصویر، وقت آن است که آن را به کار بگیرید. خوشبختانه، Home Assistant این کار را نسبتا آسان می کند: در زیر کاپوت، یک کارت سهام و چند ترفند وجود دارد.

کارت عناصر تصویر است. تصویر پس‌زمینه آن است (تصویر:)، و هر چیزی که تغییر می‌کند، دستگاه‌ها و بازخوانی‌های وضعیت، در بالای آن به‌عنوان عناصر قرار می‌گیرد: هر کدام در موقعیت خاص خود. از انواع المان‌هایی که پشتیبانی می‌کند، من بیشتر از تصویر برای دستگاه‌ها، نماد و برچسب حالت برای بازخوانی‌های وضعیت و شرطی برای نمایش یا پنهان کردن عناصر بسته به وضعیت استفاده می‌کردم.

اولین ترفند این است که چگونه یک دستگاه زنده می شود. یک عنصر تصویر می‌تواند تصویر خود را با وضعیت دستگاه تغییر دهد (state_image): وقتی AC خاموش است، یک قاب ثابت را نشان می‌دهد و وقتی روشن است، WebP متحرک را نشان می‌دهد. مرورگر به سادگی انیمیشن را پخش می کند، بنابراین هیچ کد سفارشی در کار نیست.

ترفند دوم روز و شب است. من یک کمکی برای جابه‌جایی بین حالت‌های روز و شب و یک اتوماسیون ایجاد کردم که هنگام غروب و طلوع خورشید آن را تغییر می‌دهد. تنظیم آن آسان است و امکان چرخاندن آن با دست هنگام آزمایش بسیار مفید است. تصویر شبانه به عنوان یک عنصر شرطی در بالای روز اول قرار می گیرد و هر دستگاه یک نسخه روز و یک شب را به همین ترتیب دریافت می کند.

ضربه زدن روی یک دستگاه تعاملی مانند AC، گفتگوی کنترلی دستیار خانگی را برای آن باز می‌کند (tap_action روی اطلاعات بیشتر تنظیم شده است). این ساده ترین گزینه بود، زیرا دیالوگی برای طراحی وجود نداشت. تنها استثنا آبیاری باغ است. این یک نماد روی داشبورد است، اما پشت آن چندین سوپاپ و تایمر مستقل وجود دارد که با هم آبیاری هوشمند را تشکیل می‌دهند. هیچ صفحه نمایش واحدی برای همه این موارد وجود ندارد، بنابراین هیچ گفتگوی پیش فرضی برای باز کردن وجود ندارد.

من یکی را با Browser Mod ساختم، یک ادغام سفارشی نصب شده از HACS که، در میان چیزهای دیگر، به شما امکان می دهد گفتگوهای پاپ آپ خود را در یک صفحه Home Assistant باز کنید.

ویژگی تصویر به تصاویر شما با URL یا مسیر محلی ارجاع می دهد، بنابراین شما باید آنها را در جایی میزبانی کنید، من تصمیم گرفتم آنها را در خود جعبه Home Assistant قرار دهم و از آنجا ارائه دهم. برای انجام این کار، باید پوشه /config/www را ایجاد کنید، اگر هنوز وجود ندارد و Home Assistant را راه اندازی مجدد کنید. سپس فایل های خود را در /config/www قرار دهید تا /local/floorplan/ground/ac_living_off.webp تبدیل به /config/www/floorplan/ground/ac_living_off.webp شود.

من از ابتدا داشبورد را روی تلویزیون می خواستم، بنابراین باید در مرورگر خود تلویزیون اجرا می شد. اوایل خواندم که مرورگر webOS ال‌جی از WebP پشتیبانی نمی‌کند، که می‌توانست کل رویکرد انیمیشن را از بین ببرد. معلوم شد که درست نیست. این ادعا به احتمال زیاد از نمایشگر عکس داخلی تلویزیون است، نه مرورگر آن، و یک تصویر آزمایشی برای اثبات آن کافی بود. اگر همین مطلب را در مورد تلویزیون خود می خوانید، قبل از اینکه باور کنید آن را امتحان کنید.

مشکل اصلی جای دیگری بود. webOS به من اجازه نمی دهد یک صفحه وب را به عنوان محافظ صفحه تنظیم کنم یا مرورگر را به طور پیش فرض صفحه خاصی را باز کند، بنابراین رسیدن به داشبورد همیشه با چند کلیک با کنترل از راه دور طول می کشد. این دقیقا همان نوع اصطکاک است که من سعی کردم آن را از بین ببرم. در پایان به طور کلی نرم افزار تلویزیون را مرور کردم. جعبه Home Assistant به هر حال در کنار تلویزیون قرار می گیرد، بنابراین من افزونه HAOS Kiosk Display را نصب کردم و آن را به یکی از ورودی های HDMI تلویزیون وصل کردم. اکنون داشبورد فقط یک ورودی دیگر در تلویزیون است، همیشه باز و همیشه در صفحه سمت راست.

در تلویزیون می خواستم همه چیز را یکجا ببینم: هر دو طبقه و باغ را روی یک صفحه نمایش واحد. اما هر طبقه نیز سزاوار یک منظره خاص خود بود، برای زمانی که شما فقط به یکی از آنها اهمیت می دهید. بنابراین من یک نمای جداگانه برای هر طبقه و باغ و سپس یک نمای "کامل" ساختم که همه آنها را با هم جمع می کند.

این جایی است که بوم مشترک از خلاصه نتیجه داد. هر نما از همان بوم اصلی بریده شده است، بنابراین تنها چیزی که باید به خاطر می آوردم این بود که هر قطعه از کجا آمده است. برای ایجاد نمای کامل، هر طبقه به موقعیت اصلی خود باز می گردد و آنها به تنهایی مانند لایه هایی در یک ویرایشگر تصویر در یک ردیف قرار می گیرند. دو جزئیات باعث شده اند که درست به نظر برسد: باغ به جای بالای آن، در زیر خانه قرار دارد، و طبقه اول کمی بالاتر از طبقه همکف بلند شده است، بنابراین خانه کمی "منفجر شده" به نظر می رسد و می توانید در هر دو سطح ببینید.

قسمت سخت تر، استفاده مجدد از خود کف ها بود. من نمی‌خواستم هر دستگاه را دوبار پیکربندی کنم، یک بار برای کف آن و یک بار برای نمای کامل، اما ویرایشگر رابط کاربری Home Assistant راهی برای اشتراک‌گذاری عناصر بین کارت‌ها ندارد. بنابراین داشبورد را به حالت YAML تغییر دادم. پیکربندی در فایل‌ها زندگی می‌کند و عناصر هر طبقه در فایل مخصوص به خود قرار می‌گیرند، که هم نمای طبقه و هم نمای کامل شامل می‌شود. یک اتاق یک بار ویرایش می شود و همه جا تغییر می کند. یک امتیاز خوب: پس از یک بار راه‌اندازی مجدد برای ثبت داشبورد، ویرایش آن فایل‌ها فقط نیاز به بازخوانی مرورگر دارد.

این قیمت در حال از دست دادن ویرایشگر بصری است، که چیز مهمی نبود، زیرا بیشتر کارهای هر طبقه قبلا در آن زمان تمام شده بود.

یک محدودیت دیگر: کارت عناصر تصویری نمی تواند شامل کارت های دیگری باشد. بنابراین نمای کامل کارت‌های کف را با پشته عمودی روی هم قرار می‌دهد و آنها را با card-mod، یک پلاگین محبوب HACS قرار می‌دهد که به شما امکان می‌دهد به کارت‌ها با CSS استایل دهید.

با آماده بودن نمای کامل، آپلود فایل‌ها و راه‌اندازی کیوسک، بالاخره زمان امتحان فرا رسید. در مورد من، این به معنای روشن کردن تلویزیون و سوئیچ کردن به ورودی مناسب بود. هنوز هم به یاد دارم که همه از دیدن آن برای اولین بار هیجان داشتند: مقایسه تصویر با اتاق های واقعی، و روشن و خاموش کردن دستگاه ها برای دیدن اینکه عکس به کدام یک از آنها واکنش نشان می دهد.

این روزها داشبورد برای چند ساعت در صبح و عصر کار می کند. خوشبختانه، تلویزیون من را می توان از طریق Home Assistant کنترل کرد، بنابراین تا زمانی که هیچ کس چیزی را تماشا نمی کند، برنامه زمانی آن را به داشبورد تغییر می دهد. من همچنین حالت کیوسک را از HACS اضافه کردم تا از منوی Home Assistant در تلویزیون خلاص شوم و تجربه داشبورد خالصی را برای آن ایجاد کنم.

یکی از ناامید کننده ها این است که کنترل از راه دور تلویزیون نمی تواند داشبورد را از طریق HDMI کنترل کند، بنابراین در تلویزیون برای نگاه کردن است، نه لمس کردن. به اندازه کافی خنده دار، این به نفع من بود. به یاد دارید که همه اینها چگونه شروع شد و هیچ کس در خانواده نمی خواست از برنامه Home Assistant استفاده کند؟ هنگامی که داشبورد روی تلویزیون قرار گرفت، آنها برنامه را روی تلفن خود نصب کردند یا داشبورد را روی رایانه خود نشانه گذاری کردند تا بتوانند در واقع به چیزهایی ضربه بزنند. نماهای جداگانه طبقه روی گوشی به خوبی کار می کنند، در حالی که نمای کامل حداقل به یک صفحه نمایش به اندازه لپ تاپ نیاز دارد.

در حال حاضر، من از این ترتیب راضی هستم: کل خانه در یک نگاه به تلویزیون، و برنامه برای زمانی که نیاز به تغییر چیزی دارم.

با تشکر برای خواندن! اگر می‌خواهید مقالات دقیق‌تری درباره ایجاد داشبورد Home Assistant ببینید، مشترک شوید.

این وضعیت راهنماها و مقالاتی بود که من در ماه مه 2026 درباره این موضوع تحقیق می‌کردم. حتی در آن زمان، مردم داشبوردهای چشمگیری را در Reddit ارسال می‌کردند، و اکنون اطلاعات بیشتری در مورد ساخت داشبوردهای سه‌بعدی و سه بعدی نوشته شده است، از جمله واگذاری بیشتر کار به ابزارهای هوش مصنوعی.