چطوری گرافیکهای 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 ها خیلی بیشتر تو این قضایا به ما کمک میکنن که بتونیم باهاشون المانهای گرافیکی ای رو طراحی کنیم که به داده ها واکنش نشون بدن و بر اساس دادهای که بهشون میدیم یه شکل و شمایل خاصی داشته باشن.
خب تعریف سنتی گرافیک دیجیتال اینجوری بود که یک سری پیکسل توی صفحه بودن و کامپیوتر بر اساس دادههای گرافیکی (مثل دادههای موجود در یک فایل jpg) میدونست که کدوم پیکسل رو چه رنگی (در واقع چه کدی از RGB) قرار بده و بزاره همه پیکسلها رو کنار هم که در نهایت یه عکسی که شما بعد از باز کردن اون فایل میبینید رو بهتون توی صفحه نشون بده.
به این روش میگن Raster و گرافیکهایی که به صورت Rasterized توی سیستمهای کامپیوتری نشون داده میشن مشکل از دست دادن کیفیت در اثر زوم کردن دارن. قطعا بین پیکسلها رو کامپیوترها تا یه جایی میتونن حدس بزنن که چه کد رنگیای قرار بدن و از یه جایی به بعد کیفیت عکس شما کاهش پیدا میکنه.
اما Vectorها نوع دیگه ای از گرافیک در سیستمهای کامپیوتر هستن که بر اساس یک سری کدهایی کامپیوتر توی یک فایل قسمتهایی که باید چه رنگی داشته باشن و جای اشکال و مسیرها تعریف میشن و در نهایت این کدها توسط موتورهایی که قابلیت تفسیر اونها رو دارن تبدیل به کدهای رنگ RGB در صفحه و در نهایت با توجه به مقداری که شما رو اون گرافیکها زوم کردید در پیکسلهای روی صفحه میشینن و شما یک شکل گرافیکی رو میبینید که هر چقدر که زوم کنید کیفیت پیکسلها و در نهایت کل شکل هیچ تغییری نمیکنه و به خاطر همین بهشون میگن SVG یا Scalable Vector Graphics (وکتورهای قابل کشیده شدن؟!)
این خاصیت به علاوه به ما اجازه میده که علاوه کیفیت بالای یک صفحه کنترل که میتونه المانهای خیلی زیاد گرافیکی رو تو خودش داشته باشه و بشه روی هر قسمت بدون تغییر کیفیت زوم کرد قابلیت تغییر رنگ یک بخش از عکس یا ایجاد انیمیشن برای قسمتهای مختلف اون رو داشته باشیم. تازه خبر خوب اینه که بین تمام تکنولوژیهای وب و وسط صفحات سایتها میتونیم ازشون استفاده کنیم.
خب حرف زدن بسه یه چند تا نمونه svg و کدهاشون رو ببینیم که ببینیم داریم در مورد چی حرف میزنیم:
برای مثال کد بالا رو اگه تو یه فایل با پسوند .svg ذخیره کنید بهتون یه خروجی شبیه این میده:
تفسیر کد بالا اینه: یه دایره با سایز 50 پیکسل که دورش رو با سایز 3 با رنگ مشکی و داخلش رو با رنگ قرمز کشیدی و کامپیوتر به جای اینکه مختصات رنگی تک تک پیکسلها رو برداره براش همین کافیه و این املا خیلی به زبان انسان نزدیک تره قطعا
حالا فرض کنید شما میخواید این دایره داخلش زرد باشه فقط کافیه به جای fill توی کد بالا که مقدارش red هست بنویسید yellow تا داخل دایره زرد بشه.
این تغییر خیلی ساده رو میتونید به راحتی با کدهای جاوا اسکریپت تو صفحه اعمال کنید و انواع و از اقسام کتابخونههای وب برای ایجاد تغییراتی که دوست دارید روی svg تون بهره ببرید. من قرار نیست اینجا SVG یاد بدم و قطعا خودم از سایت خوب W3Schools یاد گرفتم کار باهاشون رو که خیلی هم ساده ست و اگه میبینید علاقه دارید بیشتر در مورد این موضوع بدونید فعلا یه سر به لینک آموزش SVG شون بزنید
راستی برای درست کردن SVG ها میتونید از نرم افزارهایی که Vector درست میکنن مثل Illustrator (پولی) و Inkscape (متن باز و رایگان) هم استفاده کنید تا بدون کد نوشتن بتونید SVG بسازید.
