این نرم افزار یک ابزار گرافیکی رایگان است که می توان بوسیله آن یک صفحه نمایش لمسی با صفحات و ویجت ها ی دلخواه خود را ایجاد کرد و بعد با تولید کد سی پلاس پلاس و شخصی سازی کدها می توان آن را روی یکی از بردهای شرکت STM یا برد خود که با یکی از میکروهای گرافیکی شرکت ST طراحی شده، انتقال داد و یک صفحه نمایش لمسی کاربردی داشت مانند HMI های صنعتی.
ابتدا قبل از اینکه به آموزش محیط نرم افزار و کار با آن بپردازیم نرم افزار را TouchGFX Designer را دانلود و نصب کنید.
بعد از نصب برنامه را اجرا کرده اولین صفحه ای که با آن روبرو می شوید تصویر زیر است.
- در قسمت Application Name نام برنامه خود را وارد کرده.
- در قسمت Application Directory مسیر برنامه ای که قرار است برنامه خود را روی سیستم ذخیره کنید.
- در قسمت Application template نوع شبیه سازی برنامه خود را در آن می توانید انتخاب کنید که در آن یکی از بردهای شرکت ST می باشد همچنین می توان با شبیه ساز خود سیستم ویندوز این کار را انجام داده که به صورت پیش فرض انتخاب شده است.
4. قسمت UI Template که در آن تعدادی ui های نمونه وجود دارد که شامل تعداد صفحات و تصاویر ساخته شده درر رزولوشن و عمق رنگ متفاوت با بردهای مختلف است اما به صورت پیش فرض BlankUI است که شما می توانید در قسمت بعد برای آن رزولوشن خود را با عمق رنگ 16 یا 24 بیتی را انتخاب کنید.
5. قسمت Color Depth که درآن می توانید 16 یا 24 بیتی بودن رنگ تصاویر را انتخاب و یا حتی کمتر.
6. قسمت width و height که در آن همان طول و عرض صفحات می باشد که متناسب با صفحه نمایش انتخاب می شود.
"480x272 ...............4.3
"800x480 ................ 7
"1024x600 ............ 10.1
ایجاد یک پروژه جدید در TouchGFX Designer
حالا برای شروع یک برنامه ایجاد می کنیم که در آن شبیه ساز و ui را روی حالت پیش فرض قرار می دهیم عمق رنگ را روی16 و اندازه صفحه نمایش را روی 800x480 قرار می دهیم و سپس دکمه create را کلیک می کنیم.
بعد از ایجاد برنامه با محیط اصلی برنامه روبرو می شویم که در تصویر زیر به قسمت های مختلف آن مشخص شده است.
- در سمت چپ, Widget Screens و Custom Constainer
- سمت راست Properties و Interactions
- بالا Canvas , Images , Text و Config
- بالا سمت راست Run Simulator , Run Target و Generate Code
- و مرکز صفحه نمایش ما
که هر کدام را در ادامه آموزش های TouchGFX Designer بررسی خواهیم کرد.
برنامهTouchGFX شامل تعدادی صفحه است و صفحات هم شامل تعدادی ویجت یا ابزارک (تصویر – دکمه – متن و...) است که رابط کاربری را تشکیل می دهند. یک صفحه نمایشگر کل صفحه را پوشش می دهد، بنابراین فقط یک صفحه به طور همزمان نمایش داده می شود.
اولین کاری که باید انجام دهید تغییر نام صفحه اصلی به Main است که در شکل زیر نشان داده شده است.
درج تصویر زمینه
معمولا این چیز خوبی است که کل زمینه صفحه را با یک یا چند ویجت بپوشانید به عنوان مثال از Box یا Image استفاده می شود اینجا ما از تصویر استفاده می کنیم قبل از آن باید تصویر را وارد نرم افزار کنیم. برنامه از فرمت های png و bmp پشتیبانی می کند .اما این را در نظر بگیرید که png از پیکسل های شفاف نیز پشتیبانی می کند.
برای وارد کردن تصویر زمینه از زبانه Image روی دکمه + کلیک کنید و فایل خود را انتخاب کنید تا اضافه شود.
حالا می توانیم از تصویر در برنامه استفاده کنیم برای این کار از ویجتImage کمک می گیریم .ویجت تصویر را از لیست ویجت ها در سمت چپ نرم افزار پیدا کنید بعد از انتخاب ویجت معمولا باید برخی از ویژگی های آن را مانند رنگ, موقعیت, نام پیکره بندی کرد.
در سمت راست علاوه بر ویژگی های گفته شده تصویر مورد نظر خود( همانی که به نرم افزار اضافه کردیم)را از لیست کشویی Image انتخاب می کنیم.
بنابراین تا الان یک برنامه ساده که با یک صفحه تشکیل شده است را ایجاد کردیم که دارای یک تصویر زمینه است در آموزش های بعدی از ویجت های دیگر استفاده می کنیم و به قسمت های شبیه سازی برنامه و تولید کد سی پلاس پلاس نیز می پردازیم.
موفق باشید.