مورد کنجکاو دستگاه حالت تجسم

این یک چیز کنجکاو بود ، این ، این دستگاه دولتیبشر من می بینید ، در حالی که با برخی از چالش های برنامه نویسی روبرو شدم ، به طور تصادفی به این مفهوم افتادم. در ابتدا ، به نظر می رسید که یک شوخی از چرخ دنده ها و اهرم ها ، یک آشفتگی گیج کننده از سوئیچ ها و تماس های روش است. اما هرچه بیشتر آن را مطالعه کردم ، بیشتر شروع به دیدن زیبایی های طراحی آن می کردم.

اکنون ، یک دستگاه دولتی – شما می پرسید؟ آن را مانند یک دستگاه روغنی خوب ببینید. این یک محاسبات بزرگ و پر پیچ و خم محاسبات را به حالت های کوچک و مرتب و مرتب تقسیم می کند که هر کدام مجموعه ای از قوانین و انتقال خود را دارند.

می بینید ، این دستگاه اتوماتیک معمولی نیست. این کشور مانند وقتی که شما در یک خانه بزرگ قدیمی اتاق های مختلفی دارید ، هر کدام شخصیت و هدف منحصر به فرد خود را دارند. همچنین مانند مسیرهای آن خانه که به شما امکان می دهد از یک اتاق به اتاق دیگر حرکت کنید ، دارای انتقال است.

دستگاه دولتی در عمل

برخی دیگر یافته ها:

• یک ایالت به عنوان حالت اولیه تعریف می شود. هنگامی که یک دستگاه شروع به اجرای آن می کند ، به طور خودکار وارد این حالت می شود.
• هر حالت می تواند اقداماتی را که هنگام ورود یا خروج از آن حالت انجام می شود ، تعریف کند. اقدامات به طور معمول عوارض جانبی دارند.
• هر ایالت می تواند رویدادهایی را که باعث انتقال می شود تعریف کند.
• یک انتقال با خروج از یک ایالت و ورود به حالت دیگر ، نحوه واکنش یک دستگاه به این رویداد را تعریف می کند.
• انتقال می تواند اقداماتی را که هنگام انتقال اتفاق می افتد تعریف کند.
• اقدامات به طور معمول عوارض جانبی دارند.

و آنچه برخی از ما ممکن است یک دستگاه با حالت محدود (FSM) بنامیم ، پایه و اساس همه محاسبات است. آنها بلوک های ساختمانی همه چیز از مدارهای دیجیتال گرفته تا برنامه های نرم افزاری هستند. با تجزیه یک مشکل در مجموعه ای از حالت های تعریف شده و انتقال ، می توانیم ایجاد کردن سیستم هایی که بیشتر هستند قابل پیش بینیبا قابل حفظ، و بنابراین مقیاس پذیربشر مثل این است که یک توپ بزرگ و درهم و برهم از نخ را بگیرید و با دقت ، از لحاظ روشنایی ، آن را به یک اسکین مرتب و مرتب بپیوندید.

اکنون که نگاهی به تصویر بزرگ انداخته اید ، یک نسخه ی نمایشی زنده از یک دستگاه دولتی (اساسی) متناسب با مورد استفاده از داده های ما را تماشا کنید و سپس ، ما بیشتر حفر خواهیم کرد.

یک مکانیک بی پایان

گرفتن ، updateVisualization() روش این قلب دستگاه دولتی است ، هادی که کل عملکرد را ارکستر می کند. این یک روش به اندازه کافی ساده است ، واقعاً ، فقط یک عبارت سوئیچ است که بر اساس مرحله فعلی ، روش خاص حالت مناسب را می نامد:

/**
 * This is the State machine.
 *
 * Updates the visualization based on the current step.
 * @param {number} step - The current step of the visualization.
 */
updateVisualization(step) {
  const visualizationSteps = {
    0: () => this.showInitialState(),
    1: () => this.showIntroState(),
    2: () => this.showZoneState(),
    // ... and so on
  };

  visualizationSteps[step]?.();
}

خط کد زیر به این معنی است که اولین حالت تجسم توسط اداره می شود showInitialState()بشر

0: () => this.showInitialState()

در هر یک از این روشهای خاص حالت ، جادوی واقعی اتفاق می افتد. در showZoneState() به عنوان مثال روش:

showZoneState() {
  this.setupVisualizationState({
    hideText: ["#intro-text", "#presentation-text"],
    styleType: "zone",
    tooltipType: "zone",
  });
}

دستگاه دولتی تماس می گیرد setupVisualizationState() روش ، که وظیفه پیکربندی جنبه های مختلف تجسم را مانند پنهان کردن و نشان دادن متن ، به روزرسانی سبک ها و ابزار ابزار و غیره دارد. به این ترتیب ، هر مرحله بر روی آخرین ساخته می شود و بنابراین یک تجربه کاربر یکپارچه و جذاب را ایجاد می کند.

و همانطور که من عمیق تر به مفهوم می پردازم ، نمی توانستم از ظرافت همه اینها شگفت زده شوم. نحوه برخورد با تعامل پیچیده تعامل کاربر ، لایه های نقشه و تنظیمات تجسم – این مانند تماشای یک عروسک استاد بود ، رشته ها را با لطف بی دردسر می کشید.

اما آنچه واقعاً مرا تحت تأثیر قرار داد ، راهی بود که دستگاه دولت هر حرکتی کاربر را پیش بینی می کرد. به نظر می رسید که می تواند به آینده همکار باشد ، پیش بینی کلیک دکمه بعدی یا انتخاب منو ، و دوره خود را بر این اساس تنظیم می کند. نگاهی به handleStepChange() روش:

/**
 * Handles Next/Previous buttons change.
 *
 * Handles the step change when the "Next" or "Previous" button is clicked.
 * @param {number} direction - The direction of the step change (1 for next, -1 for previous).
 */
handleStepChange(direction) {
  const newStep = this.state.currentStep + direction;
  if (newStep >= 0 && newStep <= 10) {
    this.state.currentStep = newStep;
    this.updateVisualization(newStep);
    this.updateButtonState();
  }
}

در اینجا ، این روش با دقت نظارت بر کلیک دکمه کاربر ، تنظیم مرحله فعلی ، به روزرسانی تجسم در مرحله مربوطه و البته به روزرسانی وضعیت دکمه ها. ما دوست نداریم در این راه گم شویم ، درست است؟

بنابراین هنگامی که کاربر حرکتی را انجام می دهد ، دستگاه دولت به سمت عمل می رود و به راحتی از یک حالت به حالت دیگر منتقل می شود و تجسم را با دقت و ظرافت به روز می کند.

و با تماشای این کد فروتنانه ، تجسم یک حقیقت اساسی را دیدم: بیشترین پیچیده اگر فقط ما صبر و چشم انداز درک آنها را داشته باشیم ، می توان سیستم ها را کج کرد.

افزایش تجسم

اکنون ، این ابزار تجسم که ما با آن دست و پنجه نرم کرده ایم – از آنجا که هدف ما بالا بردن تجربه بیننده و تبدیل شدن به یک رقص واقعی از داده ها و پیکسل ها است ، ما باید آن را با چیزهای کوچک و مرتب تهیه کنیم. بیایید برخی را مرور کنیم:

/**
 * Adds circle markers to the map representing the population percentage of each GeoJSON feature.
 */
addPopulationDots() {
  this.state.geoJsonLayer.eachLayer((layer) => {
    const { feature } = layer;
    const radius = Math.max(feature.properties.pop_percentage * 5);
    const dot = L.circleMarker(layer.getBounds().getCenter(), {
      radius,
      color: config.COLORS.DEFAULT,
      weight: 1,
      opacity: config.OPACITY.DEFAULT,
      fillOpacity: config.OPACITY.LOWER,
      fillColor: config.COLORS.DEFAULT,
      zIndexOffset: 1000 - radius,
    }).bindTooltip(
      `${feature.properties.nom_complet}
Part de la pop. rég. ${feature.properties.pop_percentage}%`,
      { permanent: false, direction: "center", className: "custom-tooltip" }
    );
    dot.addTo(this.state.map);
  });
}

به عنوان مثال ، نحوه برخورد با تجسم جمعیت در قطعه ارائه شده در بالا را در نظر بگیرید. در addPopulationDots() روش آن نقاط کوچک را به نقشه اضافه می کند ، هر کدام نمایانگر بشریت در یک سمفونی بصری از هموطنان ما هستند. و صبر کنید.

اما در اینجا متوقف نمی شود ، اوه نه! این دستگاه حالت ، ترفندهایی را در آستین خود قرار داده است. به زیر نگاه کنید به روشی که سبک ها و نوارهای ابزار را مدیریت می کند ، یکپارچه از یک حالت نقشه به حالت دیگر منتقل می شود. هرکدام یک بیان منحصر به فرد از داده ها است ، بنابراین یک نگاه متفاوت از طریق لنز که برای دیدن جهان وجود دارد.

/**
 * Generates a style for the GeoJSON layer .
 *
 * Returns a style object based on the specified feature, type and option.
 * @param {object} feature - The feature to generate the style for.
 * @param {string} type - The type of style to generate. (e.g., "default", "zone", "consumption", "production", "ratioEnr").
 * @param {object} options - Optional options for the style.
 * @returns {object} The generated style object.
 */
generateStyle(feature, type, options = {}) {
  const styleMap = {
    // ... various style generation functions
  };

  return (styleMap[type] || styleMap.default)();
}

اکنون به نحوه رسیدگی به انتقال بین دولتها نگاه کنید. دستگاه دولتی مانند یک رقصنده ماهر ، از یک قدم به مرحله دیگر با زحمت می چرخد ​​، هر یک حرکت با دقت به صورت رقص برای ایجاد یک عملکرد یکپارچه و فریبنده.

/**
 * Updates the visualization based on the specified category and type.
 * @param {string} category - The category of the visualization (e.g., "consumption", "production", "final").
 * @param {string|Object} type - The type of visualization within the category.
 */
updateVisualizationByType(category, type) {
  const options = {};
  // ... set up options based on category and type
  this.updateGeoJsonStyle(category === "final" ? type : category, options);
  this.updateTooltips(category === "final" ? type : category, options);
}

و هنگامی که کاربر می خواهد جنبه های مختلف داده ها را در یک منوی تعاملی کشف کند ، دستگاه حالت برای هدایت آنها در آنجا است و نمایش گزینه هایی را ارائه می دهد که با تجسم کلی ادغام می شوند.

/**
 * Shows a radio button menu on the map with the specified types and name.
 * @param {Array} types - An array of objects representing the menu options, each with an id and label.
 * @param {string} name - The name of the menu.
 */
showMenu(types, name) {
  this.hideMenu();
  $(config.SELECTORS.MAP).append(this.createMenu(types, name));
  $(`input[name="${name}-type"]`).on("change", (e) =>
    this.updateVisualizationByType(name, e.target.value)
  );
}

این همه مردمی است ، ما این کار را کردیم و می توانم بگویم که تجسم در حرکتی که می بینید ، ظریف است هیچ دو بین یک انسان و ماشین ، هرکدام به هر حرکت دیگری پاسخ می دهند. در پایان ، چه چیزی داریم؟ تجسم که فقط داده ها را نشان نمی دهد ، بلکه چیزی است که باعث می شود با گفتن یک داستان آواز بخواند ، دقیقاً مانند یک حرف که مردم را به خود جلب می کند و الهام می بخشد.

کد منبع کامل در این مخزن GitHub موجود است.

(تصویر جلد: مدرن تایمز ، 1936).