ویجت انیمیشن سفر
در این راهنما، به بررسی قابلیتهای ویجت انیمیشن سفر خواهیم پرداخت. این ویجت میتواند برای موارد استفاده مختلفی مفید باشد، اما عمدتاً برای ردیابی، تحلیل و تجسم حرکت موجودیتهای مختلف به صورت زمان واقعی به کار میرود.
پیشنیازها
ابتدا، شما به دستگاهی نیاز دارید که از آن تلماتری جمعآوری شود. میتوانید از هر دستگاهی که مختصات (طول و عرض جغرافیایی) را به صورت زمان واقعی به عنوان تلماتری ارائه میدهد، استفاده کنید. طول و عرض جغرافیایی دادههای کلیدی برای تجسم روی نقشه هستند که به شما امکان مشاهده دادهها روی یک ویجت در داشبورد انتخابی شما را میدهد.
در این راهنما، ما یک دستگاه جدید به نام Tracker1 ایجاد خواهیم کرد که مختصات طول و عرض جغرافیایی، سرعت، شعاع دایره، وضعیت و مختصات چندضلعی را به عنوان تلماتری با استفاده از یک شبیهساز نوشته شده در جاوااسکریپت دریافت میکند.
برای دریافت تلماتری و نمایش آن در داشبورد، اسکریپت را دانلود کرده و با استفاده از فرمان زیر آن را اجرا کنید:
node timeseries-map-bus-ce.js $ACCESSTOKEN
که در آن $ACCESSTOKEN توکن دسترسی دستگاه شما است که در جزئیات دستگاه قرار دارد.
شبیهساز با نسخه 12 یا بالاتر Node.js سازگار است.
راهاندازی ویجت انیمیشن سفر
از آنجایی که هدف ما ردیابی حرکت موجودیت (Tracker1) در طول یک دوره مشخص است، نیاز به ایجاد یک داشبورد داریم که تلماتری دریافتی از این دستگاه در آن نمایش داده شود. میتوانیم از یک داشبورد موجود استفاده کنیم یا یک داشبورد جدید ایجاد کنیم. در مثال ما، یک داشبورد جدید به نام "My New Dashboard" ایجاد میکنیم.
- از طریق منوی اصلی در سمت چپ صفحه، به صفحه "Dashboards" بروید. سپس روی علامت "+" در گوشه بالا سمت راست صفحه کلیک کنید و از منوی کشویی گزینه "Create new dashboard" را انتخاب کنید؛
- در دیالوگ بازشده، لازم است عنوان داشبورد را وارد کنید، توضیحات بهصورت اختیاری است. سپس روی "Add" کلیک کنید؛
اکنون بیایید ویجت "Trip Animation" را به داشبورد اضافه کنیم:
روی دکمه "Add widget" در بالای صفحه کلیک کنید یا اگر این اولین ویجت شما در این داشبورد است، روی آیکون بزرگ "Add new widget" در مرکز صفحه کلیک کنید؛
بسته ویجت "Maps" را پیدا کرده و روی آن کلیک کنید؛
ویجت "Trip Animation" را انتخاب کنید؛
در بخش "Datasources"، نوع "Device" را انتخاب کنید و دستگاه "Tracker1" که قبلاً ایجاد شده است را بهعنوان منبع داده مشخص کنید. "latitude"، "longitude"، "speed"، "status"، "circleRadius" و "polygonCoordinates" را بهعنوان کلیدهای داده تایمسری اضافه کنید. برای اتمام افزودن ویجت، روی دکمه "Add" در گوشه پایین سمت راست ویجت کلیک کنید؛
برای بزرگتر کردن کمی ویجت، بهسادگی گوشه پایین سمت راست را بگیرید و بکشید. برای ذخیره داشبورد، روی دکمه "Save" در گوشه بالا سمت راست کلیک کنید؛
ما از دادههایی که در آخرین دقیقه دریافت شدهاند استفاده خواهیم کرد. روی "Edit timewindow" کلیک کنید، به حالت "History" تغییر دهید و تابع تجمع را به "None" تغییر دهید، زیرا نیازی به تخمین مقدار احتمالی داده برای دوره زمانی بعدی نداریم، چرا که دادهها را بهصورت زمان واقعی دریافت میکنیم؛
اکنون میتوانیم حرکت دستگاه خود را در طول یک دقیقه گذشته مشاهده کنیم. دکمه "شروع" را فشار دهید. همچنین میتوانیم حرکت نشانگر را 5، 10، یا 25 برابر سریعتر کنیم تا مسیر آن را بسیار سریعتر بررسی کنیم.
سفارشیسازی
اکنون که ویجت "Trip Animation" را به داشبورد خود اضافه کرده و منبع داده آن را تنظیم کردهایم، به تنظیمات آن میپردازیم تا ویژگیهای کلیدی آن را بررسی کنیم. تمامی اقدامات بعدی در پنجره تنظیمات ویجت و در تب "ظاهر" انجام خواهد شد. برای این منظور، وارد حالت ویرایش ویجت شوید و به تب "ظاهر" بروید.
اکنون به بررسی مستقیم هر یک از گزینههای موجود در تب "ظاهر" در تنظیمات ویجت "Trip Animation" میپردازیم.
تنظیمات دادهها
در بخش "تنظیمات دادهها" میتوانید یک نماد ویژه اضافه کنید که در کنار مقادیر موجودیت نمایش داده شود. همچنین، میتوانید تعداد ارقام بعد از نقطه اعشار را تنظیم کرده و یک پیام جایگزین تعیین کنید که در صورت عدم وجود داده برای نمایش، ظاهر شود.
تنظیمات ارائهدهنده نقشه
یک ارائهدهنده نقشه را از فهرست انتخاب کنید یا از ارائهدهنده سفارشی استفاده کنید.
تنظیمات انیمیشن سفر
در اینجا، نام کلیدهای دادهای که شامل مختصات موجودیت شما هستند را مشخص میکنید. بهطور پیشفرض، این کلیدها "عرض جغرافیایی" و "طول جغرافیایی" هستند. همچنین میتوانید گام دادههای نرمالسازی را به میلیثانیه تعیین کنید. بهطور پیشفرض، این مقدار روی 1000 تنظیم شده است.
راهنمای ابزار (Tooltip)
از این قابلیت برای نمایش یک راهنمای ابزار استفاده کنید. همچنین میتوانید آن را با تغییر رنگ پسزمینه و فونت و تنظیم شفافیت، به سبک خود سفارشی کنید. بهعلاوه، میتوانید از این عملکرد برای ارائه محتوای پویاتر بهره ببرید. در مثال ما، راهنمای ابزار سرعت موجودیت را نمایش میدهد و یک نگاه سریع و اطلاعاتی به سرعت فعلی آن ارائه میدهد.
عملکرد راهنمای ابزار مورد استفاده در مثال:
var speed = data['speed'];
var res;
if (speed > 0) {
res = "${entityName}</br><b>Speed:</b> " + String(speed)
} else {
res = "${entityName}</br><b>Status: On The stop</b>"
}
return res;
تابع برچسب
میتوانید برچسب نهاد را نمایش داده یا پنهان کنید. همچنین میتوانید متن برچسب را تغییر دهید یا از یک تابع برچسب برای اطلاعات دینامیکتر استفاده کنید. به عنوان مثال، برچسب میتواند وضعیت حرکت نهاد را نمایش دهد و درک سریع و واضحی از وضعیت فعلی آن فراهم کند.
تابع برچسب استفادهشده در مثال:
var speed = data['speed'];
var res;
if (speed > 55) {
res = "${entityName}</br>Status: Too Fast"
} else {
res = "${entityName}</br>Status: Everything is OK"
}
return res;
تابع نشانگر
میتوانید پارامترهای زیر را برای پیکربندی نشانگر مشخص کنید:
- افزودن تصویر سفارشی برای نشانگر و تنظیم اندازه آن؛
استفاده از تابع تصویر نشانگر. برای مثال، میتوانید سرعت وسایل نقلیه خود را بهصورت بصری در زمان واقعی نمایش دهید با بارگذاری چندین تصویر نشانگر، و این تصاویر بسته به سرعت اتوبوس تغییر خواهند کرد.
تابع تصویر نشانگر استفادهشده در مثال:
var speed = data['speed'];
var res = {
url: images[0],
size: 40
}
if (speed < 55) {
res.url = images[0];
} else {
res.url = images[1];
}
return res;
تنظیمات مسیر
شما این امکان را دارید که رنگ مسیر را انتخاب کنید یا از تابع رنگ مسیر استفاده کنید. به عنوان مثال، رنگ مسیر میتواند با افزایش یا کاهش سرعت تغییر کند و نشانه بصری شهودی از سرعت حرکت شیء فراهم کند.
تابع رنگ مسیر استفادهشده در مثال:
var speed = data['speed'];
var res;
if (speed > 55) {
res = "red"
} else {
res = "green"
}
return res;
زینتدهنده مسیر
نماد زینتدهنده مسیر، رنگ آن، فاصله شروع/پایان، تکرارپذیری، و اندازه آن به پیکسلها را تنظیم کنید.
تنظیمات نقاط
نقاط نمایانگر بهروزرسانیهای دادههای تلهمتری هستند و به شما این امکان را میدهند که هر کدام را بهطور جداگانه بررسی کنید.
شما میتوانید رنگ و اندازه (بر حسب پیکسل) نقاط را به دلخواه خود مشخص کنید یا از تابع رنگ نقطه استفاده کنید. این تابع به شما این امکان را میدهد که تغییرات در دادهها را بر اساس تلهمتری ورودی از نهاد خود بهطور بصری پیگیری کنید.
تابع رنگ مسیر استفادهشده در مثال:
var speed = data['speed'];
var res;
if (speed > 55) {
res = "red"
} else {
res = "green"
}
return res;
ویژگی "نقطه بهعنوان لنگر" به شما این امکان را میدهد که از طریق نقاط داده بر اساس شرایط مشخصشده در تابع پیمایش کنید. این ویژگی به شما کمک میکند تا اطلاعات را بر اساس معیارهای خاص فیلتر کنید.
تابع نقطه بهعنوان لنگر استفادهشده در مثال:
var speed = data['speed'];
if (speed > 55) {
return true;
} else {
return false;
}
تنظیمات چندضلعی
چندضلعی چیست؟ این یک شکل مسطح است که با تعداد محدودی از نقاط توصیف میشود. شما میتوانید داراییها و هر نهاد دیگری را با گزینه چندضلعی علامتگذاری کنید. ما از چندضلعی استفاده میکنیم که بر اساس مختصات مشخصشده در دستگاه مورد استفادهمان است، اما میتوانید از هر نهاد دیگری استفاده کنید.
برای اضافه کردن یک چندضلعی به ویجت نقشه انیمیشن سفر، نیاز دارید به:
- دستگاهی که مختصات چندضلعی را بهعنوان دادههای تلهمتری ارسال کند. مختصات چندضلعی به صورت زیر دریافت میشوند:
[[1CoordinateLatitude,1Coordinatelongitude],[2CoordinateLatitude,2Coordinatelongitude]...[nCoordinateLatitude,nCoordinatelongitude]]
که n - تعداد مختصاتی است که چندضلعی با آن توصیف میشود.
مختصات چندضلعی در مثال ما:
[[37.770835,-122.510163],[37.771586,-122.495633],[37.772773,-122.471776],[37.773354,-122.461562],[37.774558,-122.454910],[37.767407,-122.454612],[37.766195,-122.466924],[37.765866,-122.477787],[37.764699,-122.509657]]
- کلید دادههای چندضلعی را به فیلد "کلیدهای دادههای سری زمانی" در ویجت "انیمیشن سفر" اضافه کنید؛
- گزینه "نمایش چندضلعی" را فعال کنید و کلید چندضلعی را به فیلد "نام کلید چندضلعی" در بخش "تنظیمات چندضلعی" اضافه کنید.
تنظیمات زیر برای چندضلعی در دسترس است:
- گزینه "فعالسازی ویرایش چندضلعی" را تیک بزنید تا منوی ویرایش چندضلعی به نقشه اضافه شود. با استفاده از این ابزارها، میتوانید یک چندضلعی جدید اضافه کنید، نقاط یک چندضلعی موجود را جابجا کنید، خود چندضلعی را جابجا کنید، ناحیه چندضلعی را برش دهید یا چندضلعی را مستقیماً روی ویجت نقشه حذف کنید.
- نمایش یا پنهان کردن برچسب روی چندضلعی. متن برچسب را تغییر دهید یا تابعی برای برچسب مشخص کنید تا دادهها را بهطور پویا بر اساس شرایط تعیینشده نمایش دهد.
- نمایش/پنهان کردن نوار ابزار چندضلعی. شما این امکان را دارید که متن داخل نوار ابزار را تغییر دهید یا تابعی برای نوار ابزار مشخص کنید. این امکان به شما اجازه میدهد که اطلاعات خاص را بهطور پویا بر اساس شرایطی که تعیین میکنید تغییر دهید و نوار ابزار خود را اطلاعاتیتر کنید.
- رنگ چندضلعی را تغییر دهید یا میزان شفافیت آن را بر اساس نیازهای خاص خود تنظیم کنید. علاوه بر این، میتوانید تابع رنگ چندضلعی را مشخص کنید تا رنگ بهطور پویا بر اساس شرایطی که تعیین میکنید تغییر کند.
- ظاهر دایره خود را با تغییر رنگ حاشیه، تنظیم میزان شفافیت و تغییر وزن آن برای تطابق بهتر با نیازهای بصری خود سفارشی کنید. همچنین میتوانید تابع رنگ حاشیه دایره را تنظیم کنید. این امکان را به شما میدهد که رنگ حاشیه بهطور خودکار بر اساس شرایط یا دادههای خاص تغییر کند و به تجسم شما تعاملپذیری بیشتری اضافه کند.
