گرافیک‎های صنعتی با SVG ها (بخش اول از سوم)

چطوری گرافیک‎های SVG به ما تو کنترل و مانیتورینگ کمک میکنن؟بعد از مدت‎ها کار مثلا عمیق در حوزه گرافیک های صنعتی و HMI (Human Machine Interface یا رابط های بین ماشین و انسان!) که دست و دلم به نوشتن نمیرفت دوباره تصمیم گرفتم یکم از کارهایی که کردم رو اینجا مستند کنم. قراره خیلی ساده بنویسم ولی مشخصا نمیتونم و وسط کار احتمالا اوضاع از دستم در میره و پیچیده میشه.اول اینکه داستان گرافیک صنعتی چیه؟خب داستان خاصی نداره و من از خودم دراوردم این اسم رو … ولی منظورم المان‎‎هایی هستن که توی صفحات سیستم‎های کنترل و مانیتورینگ روبروی کاربر (بخوانیم دیسپاچر) بالا میان.این المان‎ها وضعیت تجهیزات صنعتی‎ای که تحت نظر یک مجموعه‎ سخت افزاری و نرم افزاری به نام اسکادا (SCADA سیستم گردآوری و کنترل داده‎ها یا Supervisory Control And Data Accusation) قرار گرفتند رو به دیسپاچر نشون میده و در واقع مجموعه‎ای از این المان‎ها میتونن وضعیت کلی سیستم رو به اپراتور نشون بدن.حواسمون هست که این المان‎ها یک سری المان‎های ساده و ثابت گرافیکی نیستن و درونشون یک مجموعه‎ای از قوانین و مقررات چیده شده که بتونن شکل یا رنگ خودشون رو عوض کنن و حتی توی صفحه حرکت کنن (آره درسته انیمیشنی بشن!).برای اینکه درک راحت‎تری ازین مجموعه‎ای که بالا توضیح دادم داشته باشیم یه سری عکس ازین نوع صفحه‎ها ببینیم که بفهمیم تقریبا داریم راجع به چی صحبت میکنیم.خب یکم جوگیر شدم و یکم تعداد عکس مثالها رفت بالا ولی خب همونطور که میبینید کلی از فرآیند‎های که زندگی دنیای جدید رو دارن کنترل میکنن با استفاده ازین سیستم‎ها کار میکنن که ظاهر خیلی ساده اما پیچیدگی بسیار زیادی برای پیاده سازی و عملیات دارن.این سیستم‎ها تقریبا تو هر جایی که باید از راه دور چیزی رو کنترل یا نظارت کنن استفاده میشه از زمین‎های فوتبال بزرگ تا تونل‎، مترو، کارخانجات، سیستم‎های ترافیک شهری‎، شبکه‎های برق، نیروگاهها و کلی جاهای دیگه ای که تابلو برق یک راه حل قدیمی و کلاسیک محسوب میشه براش.حتی توی بعضی از خونه‎های مدرن جدید هم ازین سیستم‎ها استفاده میکنن و شرکت‎های خیلی غولی مثل Siemens پشت بسیاری از محصولات بزرگ تجاری تو این زمینه هستن.من توی 4 سال اخیر درگیر توسعه اینجور سیستم‎ها بودم چه در بخش گرافیکی ماجرا چه بعضا در بخش‎های پشت صحنه‎تر مثل ساختارهای دیتابیس و انتقال اطلاعات و پروتکل‎ها. میخوام توی این پست یک مقدار وارد جزییات این ماجرا بشم پس اگه دوست دارید باهام همراه شید. اینم بگم که اینها تجربیات شخصی من هستن و لزوما استاندارد و راه درست و آیه نازله نیستن.از بین اکثر روش‎هایی که من بررسیشون کردم اون اوایل که در حال تحقیق و آزمایش روش‎های مختلف بودم با روش‎های مختلفی برای پیاده سازی اینجور سیستم‎ها مواجه شدم که در نهایت راحت‎ترین، شیرین‎ترین و در نهایت مدرن‎ترین روشی که پیدا کردم استفاده از تکنولوژی‎های وب مثل HTML, CSS, Javascript و قطعا SVG ها بود که من رو به دنیای برنامه نویسی جلویی (میگن front end) کشوند. دنیایی رنگی رنگی و گرافیکی ای که حاصل تمام تلاش‎های برنامه نویس‎های عقبی (back end ها) و کلی ساز و کار پیچیده رو قراره تو خودش نشون بده.خب اکثرا کسایی که تا اینجای اینجور نوشته‎ها میخونن با HTML, CSS و Javascript و قدرتشون آشنایی دارن اما SVG ها خیلی بیشتر تو این قضایا به ما کمک میکنن که بتونیم باهاشون المان‎های گرافیکی ای رو طراحی کنیم که به داده ها واکنش نشون بدن و بر اساس داده‎ای که بهشون میدیم یه شکل و شمایل خاصی داشته باشن.این SVGها چین؟خب تعریف سنتی گرافیک دیجیتال اینجوری بود که یک سری پیکسل توی صفحه بودن و کامپیوتر بر اساس داده‎های گرافیکی (مثل داده‎های موجود در یک فایل jpg) میدونست که کدوم پیکسل رو چه رنگی (در واقع چه کدی از RGB) قرار بده و بزاره همه پیکسل‎ها رو کنار هم که در نهایت یه عکسی که شما بعد از باز کردن اون فایل میبینید رو بهتون توی صفحه نشون بده.به این روش میگن Raster و گرافیک‎هایی که به صورت Rasterized توی سیستم‎های کامپیوتری نشون داده میشن مشکل از دست دادن کیفیت در اثر زوم کردن دارن. قطعا بین پیکسل‎ها رو کامپیوتر‎ها تا یه جایی میتونن حدس بزنن که چه کد رنگی‎ای قرار بدن و از یه جایی به بعد کیفیت عکس شما کاهش پیدا میکنه.تقاوت بین Raster و Vectorاما Vectorها نوع دیگه ای از گرافیک در سیستم‎های کامپیوتر هستن که بر اساس یک سری کدهایی کامپیوتر توی یک فایل قسمت‎هایی که باید چه رنگی داشته باشن و جای اشکال و مسیرها تعریف میشن و در نهایت این کدها توسط موتورهایی که قابلیت تفسیر اونها رو دارن تبدیل به کدهای رنگ RGB در صفحه و در نهایت با توجه به مقداری که شما رو اون گرافیک‎ها زوم کردید در پیکسل‎های روی صفحه میشینن و شما یک شکل گرافیکی رو میبینید که هر چقدر که زوم کنید کیفیت پیکسل‎ها و در نهایت کل شکل هیچ تغییری نمیکنه و به خاطر همین بهشون میگن SVG یا Scalable Vector Graphics (وکتورهای قابل کشیده شدن؟!)این خاصیت به علاوه به ما اجازه میده که علاوه کیفیت بالای یک صفحه کنترل که میتونه المان‎های خیلی زیاد گرافیکی رو تو خودش داشته باشه و بشه روی هر قسمت بدون تغییر کیفیت زوم کرد قابلیت تغییر رنگ یک بخش از عکس یا ایجاد انیمیشن برای قسمت‎های مختلف اون رو داشته باشیم. تازه خبر خوب اینه که بین تمام تکنولوژی‎های وب و وسط صفحات سایت‎ها میتونیم ازشون استفاده کنیم.خب حرف زدن بسه یه چند تا نمونه svg و کدهاشون رو ببینیم که ببینیم داریم در مورد چی حرف میزنیم: https://virgool.io/p/y36pbgdwxuph/edit برای مثال کد بالا رو اگه تو یه فایل با پسوند .svg ذخیره کنید بهتون یه خروجی شبیه این میده:تفسیر کد بالا اینه: یه دایره با سایز 50 پیکسل که دورش رو با سایز 3 با رنگ مشکی و داخلش رو با رنگ قرمز کشیدی و کامپیوتر به جای اینکه مختصات رنگی تک تک پیکسل‎ها رو برداره براش همین کافیه و این املا خیلی به زبان انسان نزدیک تره قطعاحالا فرض کنید شما میخواید این دایره داخلش زرد باشه فقط کافیه به جای fill توی کد بالا که مقدارش red هست بنویسید yellow تا داخل دایره زرد بشه.این تغییر خیلی ساده رو میتونید به راحتی با کدهای جاوا اسکریپت تو صفحه اعمال کنید و انواع و از اقسام کتابخونه‎های وب برای ایجاد تغییراتی که دوست دارید روی svg تون بهره ببرید. من قرار نیست اینجا SVG یاد بدم و قطعا خودم از سایت خوب W3Schools یاد گرفتم کار باهاشون رو که خیلی هم ساده ست و اگه میبینید علاقه دارید بیشتر در مورد این موضوع بدونید فعلا یه سر به لینک آموزش SVG شون بزنیدراستی برای درست کردن SVG ها میتونید از نرم افزارهایی که Vector درست میکنن مثل Illustrator (پولی) و Inkscape (متن باز و رایگان) هم استفاده کنید تا بدون کد نوشتن بتونید SVG بسازید.