مثال کاربردی از LWE لوگو
مثال کاربردی از LWE لوگو
به صورت کلی امکان مشاهده ی web page طراحی شده در موبایل، PC و غیره وجود دارد. هر یک از این دستگاه ها رزولوشن و یا ابعاد صفحه ی متفاوتی دارند. به عنوان مثال فرض کنید می خواهیم صفحه ی وب طراحی شده در LWE را در تلفن همراه خود مشاهده کنیم. فرض کنید رزلوشن صفحه ی موبل برابر با 400*600 است. جهت نمایش Web page مورد نظر در موبایل، یک صفحه ی جدید ایجاد می کنیم. به این منظور طبق تصویر زیر روی گزینه ی Pages کلیک راست کرده و گزینه ی New page را انتخاب می کنیم.
جهت تغییر رزولوشن Editor area یا همان home page ابتدا روی یک نقطه از صفحه ی Home page کلیک می کنیم. به این ترتیب در سمت راست Home page پنجره ی Page – Properties باز می شود. در این پنجره قسمت رزولوشن را روی رزولوشن نمایشگر تلفن همراه تنظیم می کنیم. به این ترتیب با باز کردن صفحه ی وب مربوط به پروژه در تلفن همراه، نمایشگر آن با رزولوشن صحیح نمایش داده می شود. resolution تنظیم شده در این قسمت برابر با 400*600 است.
با انتخاب گزینه ی Save پنجره ی Page 1 به شکل زیر در می آید.
جهت تغییر نام این پنجره به Mobile روی نام Page_1 کلیک راست کرده و گزینه ی Rename را انتخاب کنید.
در پنجره ی Rename عبارت Mobile را وارد کرده و گزینه ی OK را انتخاب می کنیم.
در ادامه تمامی تنظیمات انجام شده در صفحه ی Home Page را از آن جا حذف کرده و در صفحه ی Mobile کپی می کنیم. به این منظور می توان از دکمه های ctrl+X و ctrl+V استفاده کرد.
در ادامه جهت نمایش صفحه ی جدید در Web page وارد قسمت Navigator می شویم. تصویر زیر موقعیت این گزینه را نشان می دهد.
با دابل کلیک روی این گزینه پنجره ی Navigator و هم چنین پنجره ی Component مربوط به Navigator Item باز می شود. در تصویر زیر پنجره های ذکر شده را مشاهده می کنید.
با استفاده از روش Drag و Drop گزینه ی Navigator Item را گرفته و در پنجره ی Navigator رها می کنیم.
در ادامه روی عبارت link کلیک کرده تا پنجره ی Navigator Item _ Properties را مشاهده کنیم. تصویر زیر موقعیت این پنجره را نشان می دهد.
از قسمت link عبارت Home Page را انتخاب کنید.
مجددا با استفاده از روش Drag و Drop گزینه ی Navigator Item را گرفته و در پنجره ی Navigator رها می کنیم.
در ادامه از قسمت link عبارت mobile را انتخاب می کنیم.
پروژه ی طراحی شده را ذحیره کرده و با استفاده از آیکون نمایش داده شده در تصویر زیر روی لوگو دانلود می کنیم.
قابل ذکر است که اگر برنامه ی لوگو سافت روی حالت online test باشد آنگاه با ارور زیر مواجه خواهیم شد. به منظور رفع این ارور برنامه ی لوگوسافت را از حالت online test خارج کرده و مجددا گزینه ی دانلود برنامه را در LWE انتخاب می کنیم.
در ادامه مجددا آدرس IP لوگو را در کروم سرچ می کنیم. به این ترتیب تصویر زیر باز می شود. در قسمت password عبارت LOGO ر وارد کرده و تیک گزینه ی to customized site را انتخاب می کنیم. در نظر داشته باشید که جهت مشاهده ی صفحه ی طراحی شده در موبایل باید IP لوگو را در مرورگر کروم موبایل خود وارد کنید.
با انتخاب گزینه ی Log on پنجره ی زیر باز می شود. این پنجره همان صفحه ی وب Home page است. از آن جا که هنگام طراحی در LWE در Home page تصویری قرار نداده ایم، این صفحه به صورت سفید رنگ و خالی از هر آیتمی است. با انتخاب گزینه ی نمایش داده شده با فلش قرمز رنگ منوی کشویی باز می شود.
تصویر زیر منوی کشویی ذکر شده را نشان می دهد.
در Navigation bar گزینه ی Mobile را انتخاب کرده تا وارد صفحه ی مربوط به آن شوید.
با انتخاب گزینه ی Mobile تصویر زیر نمایش داده می شود. همانطور که مشاهده می کنید، صفحه ی وب طراحی شده کوچک تر از سایز صفحه ی کامپیوتر و هم اندازه با سایز صفحه ی موبایل می باشد.
در صورت Run بودن لوگو، با کلیک روی شستی نارنجی رنگ C1 در صفحه ی بالا، آژیر قرمز رنگ مربوط به Q1 روشن خواهد شد. در این حالت رنگ شستی C1 نیز از نارنجی به سبز تغییر خواهد کرد.
مثال 2
در ادامه ی پروژه قبل فرض کنید می خواهیم با انتخاب دکمه ی جهت دار C2 خروجی Q2 روشن شود. تصویر زیر برنامه ی این پروژه در لوگوسافت را نشان می دهد. پس از نوشتن این برنامه آن را ذحیره کرده و روی لوگو دانلود می کنیم.
در مرحله ی بعد وارد LWE شده و یک push button جدید در پنجره ی Mobile اضافه می کنیم.
در ادامه روی این push button کلیک کرده و در پنجره ی push button – Properties تنظیمات زیر را انجام می دهیم:
- Mouse Mode را روی حالت Hold قرار می دهیم.
- تصویر دلخواه خود را از قسمت On image برای حالت نگه داشتن دکمه ی C2 انتخاب می کنیم.
- تصویر دلخواه خود را از قسمت Off Image برای حالت فعال نبودن دکمه ی C2 انتخاب می کنیم.
- از قسمت Block type گزینه Cursor key را انتخاب می کنیم.
- از قسمت Block Number گزینه ی C2 را انتخاب می کنیم.
از آن جا که تصاویر انتخاب شده برای C1 و C2 یکسان است، جهت تشخیص آن ها از یکدیگر از نوشتن متن کنار آن ها استفاده می کنیم. به این منظور گزینه ی Text در قسمت Basic Component را انتخاب می کنیم. تصویر زیر موقعیت این گزینه را نشان می دهد.
با روش Drag و Drop این متن را در موقعیت مورد نظر خود قرار میدهیم.
با دابل کلیک روی Text می توان متن مورد نظر را در داخل کادر نوشت. هم چنین نوشتن متن مورد نظر از پنجره ی Text -Properties نیز امکان پذیر است. تصویر زیر موقعیت این پنجره را نشان می دهد.
طبق تصویر زیر متن ” دکمه ی جهت دار C2″ را داخل کادر Text value می نویسیم.
در ادامه جهت بررسی وضعیت خروجی Q2 از یک Digital switch Button دیگر استفاده می کنیم. مطابق تصویر زیر با روش Drag و Drop این سوئیچ را در صفحه ی mobile قرار می دهیم.
در پنجره ی Switch Button – Properties تنظیمات زیر را انجام می دهیم:
- گزینه ی Block type را روی Q تنظیم می کنیم.
- گزینه ی Block number را روی Q2 تنظیم می کنیم.
- از قسمت On image و off image تصویر مورد نظر خود را انتخاب می کنیم. تصویر حالت On و Off خروجی Q2 را به ترتیب روی auto_mode_loop_green.png و auto_mode_loop_red.png تنظیم می کنیم.
با انجام تنظیمات بالا تصویر زیر نمایش داده می شود. در ادامه برنامه ی نوشته شده را ذخیره کرده و به لوگو منتقل می کنیم. در نظر داشته باشید که هنگام انتقال برنامه از LWE به لوگو، نرم افزار لوگوسافت در حالت تست آنلاین برنامه ی لوگو نباشد.
پس از انتقال برنامه روی لوگو، آن را در حالت Start قرار می دهیم. مجددا IP لوگو را در کروم سرچ کرده و وارد صفحه ی وب طراحی شده تحت عنوان Mobile می شویم. در صفحه ی Mobile تصویر زیر نمایش داده می شود.
طبق تصویر زیر با نگه داشتن دکمه ی جهت دار C2 تغییرات زیر انجام می شود:
- رنگ دکمه ی C2 از نارنجی به سبز تغییر می کند.
- متن روی دکمه ی C2 از Off به On تغییر می کند. متن نوشته شده روی علامت فلش اختصاص داده شده به خروجی Q2 از قرمز به سبز تغییر می کند.
- متن نوشته شده روی فلش Q2 از Off به On تغییر می کند.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.