جشنواره تخفیف

16-استفاده از ابزار Animation Icon در نرم افزار DGUS

در رابط کاربری نمایشگرهای DWIN همیشه قرار نیست وضعیت یک دستگاه با یک تصویر ثابت نشان داده شود. گاهی لازم است یک آیکون حرکت کند، تغییر وضعیت بدهد یا تا زمانی که یک عملیات در حال اجراست، به شکل متوالی چند تصویر را نمایش دهد. ابزار Animation Icon در نرم افزار DGUS برای همین کار طراحی شده است.

با این ابزار می‌توان چند فریم تصویری را پشت سر هم قرار داد و با کنترل یک VP، اجرای آن‌ها را مدیریت کرد. مثلاً برای نمایش چرخش موتور، فعال بودن پمپ، انجام یک عملیات یا نمایش وضعیت پردازش دستگاه، به جای ساختن چند المان جداگانه، یک Animation Icon روی صفحه قرار می‌دهید.

ساختار کار هم پیچیده نیست؛ چند آیکون آماده می‌کنید، بازه فریم‌ها را مشخص می‌کنید و یک آدرس VP به آن می‌دهید. بعد، کنترلر دستگاه با ست کردن مقدار مناسب، وضعیت Animation Icon را تغییر می‌دهد.

Animation Icon چطور کار می‌کند؟

هر Animation Icon از چند تصویر پشت سر هم تشکیل می‌شود. این تصاویر همان فریم‌های انیمیشن هستند و DGUS آن‌ها را به ترتیب نمایش می‌دهد.

مثلاً برای یک انیمیشن ۱۰ فریمی، ده آیکون در Icon Library دارید. فریم اول در یک موقعیت قرار دارد و هر فریم بعدی تغییر کوچکی نسبت به قبلی دارد. وقتی Animation Icon اجرا شود، DGUS این تصاویر را یکی پس از دیگری نشان می‌دهد و چشم کاربر حرکت را به صورت یک انیمیشن می‌بیند.

اینجا ترتیب Icon IDها اهمیت زیادی دارد. اگر فریم‌ها درست شماره‌گذاری نشده باشند یا بازه Start و End را اشتباه انتخاب کنید، انیمیشن چیزی نیست که در طراحی اولیه در نظر گرفته‌اید.

کنترل اجرای Animation Icon هم از طریق VP انجام می‌شود. یعنی یک آدرس در پروژه مشخص می‌کنید و نرم افزار مقدار همان آدرس را برای تشخیص وضعیت انیمیشن بررسی می‌کند.

طراحی و تست Animation Icon روی نمایشگر DWIN
طراحی و تست Animation Icon روی نمایشگر DWIN

آماده کردن فریم‌های انیمیشن

قبل از کار با Animation Icon، فریم‌ها را داخل Icon Library پروژه وارد کنید.

برای نمونه، در یک پروژه کنترل موتور می‌خواهید هنگام روشن بودن موتور یک تصویر متحرک نشان داده شود. می‌توانید چند تصویر از موتور داشته باشید که در هر کدام زاویه پره یا بخش متحرک تغییر کرده باشد. هر تصویر یک فریم محسوب می‌شود.

ابعاد تصاویر را یکسان نگه دارید. اگر اندازه فریم‌ها متفاوت باشد، جابه‌جایی تصاویر روی صفحه می‌تواند ظاهر نامرتبی ایجاد کند.

ترتیب شماره آیکون‌ها را هم از همان ابتدا مشخص کنید. زمانی که پروژه بزرگ می‌شود، پیدا کردن فریم‌ها با IDهای پراکنده سخت خواهد شد. بهتر است فریم‌های مربوط به یک انیمیشن پشت سر هم قرار گرفته باشند.

مثلاً اگر Animation شما از Icon ID 54 تا 66 ساخته شده، می‌توان 54 را به عنوان Start Icon و 66 را به عنوان End Icon قرار داد. DGUS فریم‌های موجود در این محدوده را به ترتیب اجرا می‌کند.

اضافه کردن Animation Icon در DGUS

صفحه مورد نظر را در نرم افزار DGUS باز کنید و ابزار Animation Icon را روی صفحه قرار دهید.

در این قسمت مشخصات مختلفی برای کنترل عنصر در اختیار دارید؛ محل نمایش، ابعاد، آدرس VP و تنظیمات مربوط به فریم‌ها.

X و Y محل قرارگیری عنصر روی صفحه را تعیین می‌کنند و W و H محدوده‌ای هستند که Animation Icon در آن نمایش داده می‌شود. بهتر است این بخش با ابعاد واقعی آیکون‌ها هماهنگ باشد تا بخشی از تصویر بریده نشود.

بعد از تعیین جای عنصر، می‌رسیم به بخش اصلی کار؛ یعنی آدرس‌دهی و مشخص کردن فریم‌ها.

تنظیمات ابعاد و مختصات ابزار Animation Icon در محیط نرم‌افزار DGUS
تنظیمات ابعاد و مختصات ابزار Animation Icon در محیط نرم‌افزار DGUS

آدرس VP را مشخص کنید

در تنظیمات Animation Icon یک Variable Address یا همان VP برای عنصر در نظر می‌گیرید.

این آدرس را می‌توان به عنوان رجیستری در نظر گرفت که کنترل وضعیت انیمیشن به آن وصل شده است. میکروکنترلر یا پردازنده پروژه مقدار مورد نظر را در همین آدرس ست می‌کند و Animation Icon بر اساس آن مقدار واکنش نشان می‌دهد.

مثلاً VP را روی یک آدرس مشخص تنظیم کرده‌اید. وقتی برنامه مقدار Start را در آن آدرس پاس بدهد، انیمیشن وارد حالت اجرا می‌شود. وقتی مقدار Stop ارسال شود، انیمیشن متوقف خواهد شد.

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

V_Start و V_Stop

دو مقدار اصلی برای کنترل وضعیت Animation Icon وجود دارد: V_Start و V_Stop.

V_Start مقداری است که نرم افزار برای شروع اجرای فریم‌ها بررسی می‌کند. وقتی مقدار VP با این مقدار هماهنگ شود، Animation Icon شروع به نمایش فریم‌های تعریف‌شده می‌کند.

V_Stop هم مقدار مربوط به توقف است. وقتی VP به این مقدار برسد، انیمیشن متوقف می‌شود و Stop Icon نمایش داده خواهد شد.

برای یک پروژه ساده می‌توان مثلاً V_Start را برابر 1 و V_Stop را برابر 0 در نظر گرفت. در این حالت:

  • مقدار 0 یعنی انیمیشن متوقف باشد.
  • مقدار 1 یعنی انیمیشن اجرا شود.

این اعداد فقط نمونه هستند و می‌توانید آن‌ها را متناسب با منطق برنامه خودتان تعیین کنید.

Start Icon، End Icon و Stop Icon

حالا باید مشخص کنید چه تصاویری در هر وضعیت نمایش داده شوند.

Stop Icon همان تصویر ثابت مربوط به زمان توقف است. مثلاً اگر یک موتور خاموش باشد، می‌توانید یک تصویر بدون حرکت از موتور انتخاب کنید.

Start Icon اولین فریم انیمیشن است و End Icon آخرین فریم را تعیین می‌کند.

DGUS بین این دو محدوده را به ترتیب اجرا می‌کند. پس اگر فریم‌های شما از Icon ID شماره 54 شروع شوند و در 66 تمام شوند، همین دو شماره می‌توانند به عنوان ابتدا و انتهای Animation استفاده شوند.

در پروژه‌هایی که تعداد فریم زیاد است، این بخش را با دقت بیشتری تنظیم کنید. یک اشتباه ساده در Icon ID کافی است تا ترتیب حرکت به هم بریزد.

انتخاب حالت اجرای انیمیشن

در بخش Animation Display Mode مشخص می‌کنید که Animation Icon یک بار اجرا شود یا مرتب تکرار شود.

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

در حالت Single، فریم‌ها یک بار از ابتدا تا انتها نمایش داده می‌شوند و انیمیشن مجدداً از فریم اول شروع نمی‌شود.

انتخاب بین این دو حالت کاملاً به کاربرد پروژه بستگی دارد. برای یک وضعیت دائمی، Loop معمولاً منطقی‌تر است؛ برای یک رویداد مشخص، Single می‌تواند انتخاب مناسب‌تری باشد.

سرعت Animation Icon در نرم افزار DGUS را تنظیم کنید

فقط تعداد فریم‌ها سرعت انیمیشن را تعیین نمی‌کند.

در تنظیمات Animation Icon گزینه Time of single ICON وجود دارد که زمان نمایش هر فریم را مشخص می‌کند. هر فریم برای مدت مشخصی روی صفحه می‌ماند و بعد DGUS فریم بعدی را نمایش می‌دهد.

وقتی این زمان کمتر باشد، تغییر فریم‌ها سریع‌تر دیده می‌شود. با افزایش آن، انیمیشن آهسته‌تر خواهد شد.

برای بعضی انیمیشن‌ها سرعت بالا باعث می‌شود حرکت روان‌تر به نظر برسد، اما در بعضی موارد سرعت زیاد نتیجه خوبی ندارد. مخصوصاً وقتی فریم‌ها اختلاف تصویری زیادی با هم دارند.

بهتر است مقدار این بخش را روی خود نمایشگر تست کنید. عددی که روی کاغذ مناسب به نظر می‌رسد، لزوماً در رابط نهایی همان نتیجه را نمی‌دهد.

تست عملی سرعت انیمیشن و بررسی حالت شفاف (Transparent) روی نمایشگر
تست عملی سرعت انیمیشن و بررسی حالت شفاف (Transparent) روی نمایشگر

حالت نمایش آیکون

در تنظیمات Animation Icon می‌توانید نحوه نمایش تصویر را نیز مشخص کنید. یکی از حالت‌های رایج، نمایش به شکل Transparent است.

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

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

مقدار Initial Value

گزینه Initial Value وضعیت اولیه Animation Icon را مشخص می‌کند.

مثلاً اگر مقدار Stop شما 0 باشد، می‌توانید Initial Value را نیز روی 0 قرار دهید تا عنصر هنگام شروع کار در حالت توقف قرار بگیرد.

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

یک مثال عملی

بگذارید یک مثال عملی بزنیم.

فرض کنید یک HMI برای کنترل یک موتور ساخته‌اید و می‌خواهید زمانی که موتور روشن است، یک آیکون متحرک نمایش داده شود.

ابتدا چند فریم برای موتور طراحی می‌کنید و آن‌ها را داخل Icon Library قرار می‌دهید. فریم‌ها را با IDهای پشت سر هم ذخیره کرده‌اید؛ مثلاً 54 تا 66.

حالا Animation Icon را روی صفحه قرار می‌دهید و VP مورد نظر را برای آن ست می‌کنید.

V_Stop را 0 و V_Start را 1 در نظر می‌گیریم. Stop Icon نیز تصویر ثابت موتور است. Start Icon روی 54 و End Icon روی 66 تنظیم می‌شود.

حالت اجرا را روی Loop می‌گذاریم.

حالا در برنامه اصلی دستگاه، زمانی که موتور خاموش است، مقدار 0 در VP نوشته می‌شود. صفحه Stop Icon را نشان می‌دهد. وقتی فرمان روشن شدن موتور صادر شد، برنامه مقدار 1 را در همان VP پاس می‌دهد و DGUS فریم‌های 54 تا 66 را پشت سر هم اجرا می‌کند.

موتور که خاموش شد، مقدار VP دوباره به 0 برمی‌گردد و Animation متوقف می‌شود.

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

خطاهای رایج در Animation Icon

یکی از مشکلات پرتکرار، اشتباه در Icon ID است. اگر Start و End را درست انتخاب نکنید، ممکن است تعدادی از فریم‌ها نمایش داده نشوند یا بخشی از تصاویر اضافی وارد Animation شوند.

مشکل بعدی به VP مربوط می‌شود. اگر آدرسی که در DGUS ست کرده‌اید با آدرسی که کنترلر مقدار را در آن می‌نویسد یکی نباشد، Animation هیچ واکنش درستی نشان نمی‌دهد.

مورد بعدی مقدار Start و Stop است. باید مقدارهایی که در برنامه پاس داده می‌شوند دقیقاً با V_Start و V_Stop هماهنگ باشند.

سرعت نمایش را هم نادیده نگیرید. وقتی Time of single ICON خیلی زیاد باشد، حرکت ممکن است کند به نظر برسد. مقدار خیلی پایین هم در برخی انیمیشن‌ها باعث می‌شود تغییر فریم‌ها بیش از حد سریع دیده شود.

ابعاد فریم‌ها را هم بررسی کنید. تمام تصاویر یک Animation را با ابعاد یکسان آماده کنید تا هنگام جابه‌جایی فریم‌ها، محدوده تصویر تغییر نکند.

Animation Icon در نرم افزار DGUS چه کاربردی دارد؟

این ابزار محدود به یک نوع پروژه خاص نیست. در HMIهای صنعتی می‌توان از آن برای نمایش وضعیت موتور، پمپ، فن، شیر، فرایند در حال اجرا، عملیات پردازش و بسیاری از المان‌های گرافیکی استفاده کرد.

مزیت اصلی Animation Icon این است که برای هر حالت نیاز به ساخت چند ویجت جداگانه ندارید. فریم‌ها را در Icon Library قرار می‌دهید، عنصر را روی صفحه می‌سازید و آن را به یک VP وصل می‌کنید.

بخش زیادی از کنترل هم از طریق همان مقدار VP انجام می‌شود.

برای کسی که با DGUS کار می‌کند، این ساختار خصوصاً در پروژه‌هایی که وضعیت‌های مختلف دستگاه باید روی نمایشگر دیده شوند، کاربردی است. طراحی فریم‌ها در بخش گرافیکی انجام می‌شود و کنترل اجرای آن‌ها به منطق برنامه سپرده می‌شود.

در پروژه‌های واقعی، بهتر است Animation Icon را فقط برای زیبایی رابط کاربری استفاده نکنید. زمانی ارزش آن بیشتر مشخص می‌شود که انیمیشن یک وضعیت واقعی از دستگاه را نمایش دهد؛ مثلاً روشن بودن موتور، انجام یک عملیات یا فعال بودن بخشی از سیستم.

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

عضویت در خبرنامه سینک تک

متن نمونه مورد نظر را اینجا قرار دهید

سینک تک