{"id":8158,"date":"2022-03-07T08:39:25","date_gmt":"2022-03-07T08:39:25","guid":{"rendered":"http:\/\/fastbitlab.com\/?p=8158"},"modified":"2023-08-24T11:31:10","modified_gmt":"2023-08-24T06:01:10","slug":"fsm-lecture-drawing-an-hsm-hierarchical-state-machine","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/","title":{"rendered":"FSM Lecture 61: Exercise-007 Drawing an HSM"},"content":{"rendered":"
\n
\n
\n
\n

 <\/p>\n<\/div>\n

\n

Exercise-007 Drawing an HSM<\/strong><\/span><\/h1>\n
\n
\n
\n

 <\/p>\n

<\/div>\n

 <\/p>\n<\/div>\n<\/div>\n<\/div>\n

In the exercise 007ClockAlarm, let’s create a new folder and call it ‘qm.’ Now, we have to keep the new model file, which we will create using the ‘qm’ tool. Let’s launch the qm tool. <\/span><\/p>\n

    \n
  1. Go to File and click on New model.<\/span><\/li>\n
  2. Select Framework is \u2018qpn’ \u2192 Model template is None \u2192 Name for your project or model; let’s call this <\/span>ClockAlarm<\/b>. And provide the path of the ‘qm’ folder. I will open that in the File Explorer to copy this path. Just open that location and select ‘qm,’ and click OK. <\/span> <\/span><\/span><\/li>\n<\/ol>\n
    \"Figure
    Figure 1. Creating a New model file<\/span><\/figcaption><\/figure>\n

     <\/p>\n

    You must see ‘qpn’ as shown in Figure 2.<\/span><\/p>\n

    \"Figure
    Figure 2. qpn framework<\/span><\/figcaption><\/figure>\n

     <\/p>\n

    After that, before creating a state machine model, you must create a package. Right-click over the project ClockAlarm and select Add Package, as shown in Figure 3.<\/span> <\/span><\/span><\/p>\n

    \"Figure
    Figure 3. Creating a package<\/span><\/figcaption><\/figure>\n

     <\/p>\n

    ‘Package’ is nothing but it’s a group of different elements, and by means of a package, you can provide a namespace. The project may have different packages. The project may contain any number of packages. And if you have any plan to reuse certain variable names, attribute names, or function names in different packages, you can assign a different namespace.<\/span><\/p>\n

    You can get more information about packages in the <\/span>Working with Packages – QM<\/span> <\/span><\/a><\/span> user manual, shown in Figure 4.<\/span><\/p>\n

    \"Figure
    Figure 4. User manual of package<\/span><\/figcaption><\/figure>\n

     <\/p>\n

    It is used to <\/span>“group elements, and to provide a namespace for the grouped elements.” <\/span><\/i>A package may contain other packages. Inside the package, you can create classes, create free attributes, and create free operations, directories, etc.<\/span><\/span><\/p>\n

     <\/p>\n

    \"Figure
    Figure 5. Property editor of package<\/span><\/figcaption><\/figure>\n

     <\/p>\n

    It also provides a namespace option here. You can assign a name for a namespace if you plan to use more than one package.  <\/span><\/p>\n

    For the stereotype option, select \u2018components\u2019 here. <\/span><\/p>\n

    You can give a name for the package; I’ll provide HSMs ( Figure 5). That’s how you create a package.<\/span><\/p>\n

     <\/p>\n

    Under the package, let’s create a class. <\/span><\/p>\n

      \n
    1. Let’s click on the package HSMs and select Add class.<\/span><\/li>\n
    2. This is our main application structure name; let’s give Clock_Alarm. And select the superclass. The superclass is ‘QHsm.’  So, choose qpn::QHsm. Our Clock_Alarm is derived from QHSM. Then save.(Figure 6) <\/span><\/li>\n<\/ol>\n
      \"Figure
      Figure 6. Creating a Class<\/span><\/figcaption><\/figure>\n

       <\/p>\n

      Now we can create an attribute, as shown in Figure 7. <\/span><\/p>\n

      \"Figure
      Figure 7. Creating an Attribute<\/span><\/figcaption><\/figure>\n
        \n
      1. Click on that Class name and select Add attribute.<\/span><\/li>\n
      2. The First attribute is the current time; the type is uint32_t; visibility is private; this is a non-static attribute. <\/span><\/li>\n
      3. After that, let’s create one more attribute. Name as temp_time; type is uint32_t; visibility is private. Like that, you create a couple of attributes.<\/span><\/li>\n<\/ol>\n

         <\/p>\n

        Now also add a directory and add files to keep the generated code. <\/span><\/p>\n

          \n
        1. Go to your package HSMs. Right-click and select Add directory.<\/span><\/li>\n
        2. Let’s give the path for the directory ‘..\/src’. We are going to keep all our source files in ‘src.’<\/span><\/li>\n<\/ol>\n
          \"Figure
          Figure 8. Adding a Directory<\/span><\/figcaption><\/figure>\n

           <\/p>\n

          Next, let’s add a file. <\/span><\/p>\n

            \n
          1. Right-click on the ‘..\/src’ directory and select Add File.<\/span><\/li>\n
          2. Name the source file as ClockAlarm_SM.cpp; that’s a ‘cpp’ file. And again, add another file, ClockAlarm_SM.h, as shown in Figure 9. Currently, I’ll keep them as internal files. <\/span><\/li>\n<\/ol>\n
            \"Figure
            Figure 9. Adding a files to src directory<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            And now, let’s provide the include guards for the header file, as shown in Figure 10.<\/span><\/p>\n

            \"Drawing
            Figure 10. Include guards<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            Now, let’s add the state machine. State machine we add to the Class. Right-click on the ClockAlarm, and select Add State Machine. <\/span><\/p>\n

            \"Drawing
            Figure 11. Creating a state machine<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            Double click on SM, you get the canvas to draw your state machine, shown in Figure 12.<\/span><\/p>\n

            \"Drawing
            Figure 12. State machine canvas<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            You can draw a state machine like this shown in Figure 13.<\/span><\/p>\n

            \"Drawing
            Figure 13. Whole state machine<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            You can get all the required state machine components in canvas, like states, transitions, choice segment, initial transition, etc(Figure 14). Now click on the state; you need to drag anything, click it on canvas. That’s it.<\/span><\/p>\n

            \"Drawing
            Figure 14. State machine Components<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            \"Drawing
            Figure 15. Drawing a state machine<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            Click on the state, and you can change the name. I’ll call it Ticking, Clock, Settings, Clock_Setting, and Alarm_Setting.<\/span><\/p>\n

            Let’s draw some transitions. First of all, the initial state. When the application starts, the initial state will be ticking. It is already ready-made, the initial transition is available. Just click on this initial transition, and you have to draw. <\/span><\/p>\n

            Now, let’s draw a transition from Ticking state to Clock_Setting state. When the signal ‘SET’ arrives, it should transit to Clock_setting. Just take the transition component and draw. By default, it names it TRIG1; you can select that component and change the name. We’ll use capital letters for all the signals’ SET’. And when ‘OK’ arrives, when the state is Ticking, it transits to the Alarm_setting state. Take the transition component and draw. Name it as ‘OK.’<\/span><\/p>\n

            And you give one superstate ‘Setting,’ then let’s draw ‘ABRT’ from settings state to Ticking. And after that, the transition from the setting state to ticking. Take the transition component, and draw. Name it as OK, as shown in Figure 15.<\/span><\/p>\n

             <\/p>\n

            \"Drawing
            Figure 16. Alarm_notify state<\/span><\/figcaption><\/figure>\n

             <\/p>\n

            We need one more state for Alarm notification; I will draw that, as shown in Figure 16. And I’ll call this Alarm_Notify, and it happens with the event Alarm. <\/span><\/p>\n

            When it is in the Alarm_Notify state, it will show the notification. It will say to the user, “Hey, Alarm has happened.” So, the user says OK. And when the user presses OK here, it should come back to the Clock state, but it should go to the history state.<\/span><\/p>\n

            Let’s define the history for Clock. We need deep history. History for the clock can be achieved by using a history state on states any of the boundary line. I take the transition to history component, and I put that on the boundary. You have to put that on the boundary. <\/span><\/p>\n

            Transition to history is a history of Clock. If the history is not available, then this is a default transition. This signifies the default transition. And we’ll take one transition from Alarm_Notify to history. I’ll call this OK. Save it. Complete up to here.<\/span><\/p>\n

             <\/p>\n

            FastBit Embedded Brain Academy Courses<\/b><\/span><\/p>\n

            Click here:<\/span> <\/span><\/span>http:\/\/fastbitlab.com\/course1<\/span><\/a><\/span><\/p>\n

             <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

              Exercise-007 Drawing an HSM     In the exercise 007ClockAlarm, let’s create a new folder and call it ‘qm.’ Now, we have to keep the new model file, which we will create using the ‘qm’ tool. Let’s launch the qm tool.  Go to File and click on New model. Select Framework is \u2018qpn’ \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":8171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[17],"class_list":["post-8158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-finite-state-machine","entry","has-media"],"yoast_head":"\nCreating an HSM(Hierarchical state machine): Step-by-Step Guide<\/title>\n<meta name=\"description\" content=\"Draw a Hierarchical State Machine (HSM) in this guide. Follow the detailed steps to create an FSM using 'qm' tool, design states, transitions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating an HSM(Hierarchical state machine): Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"Draw a Hierarchical State Machine (HSM) in this guide. Follow the detailed steps to create an FSM using 'qm' tool, design states, transitions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/\" \/>\n<meta property=\"og:site_name\" content=\"FastBit EBA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/fastbiteba\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-07T08:39:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T06:01:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2022\/03\/Figure-9-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1226\" \/>\n\t<meta property=\"og:image:height\" content=\"673\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"FastBitLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:site\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"FastBitLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/\"},\"author\":{\"name\":\"FastBitLab\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\"},\"headline\":\"FSM Lecture 61: Exercise-007 Drawing an HSM\",\"datePublished\":\"2022-03-07T08:39:25+00:00\",\"dateModified\":\"2023-08-24T06:01:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/\"},\"wordCount\":1224,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Figure-9-5.png\",\"keywords\":[\"Finite state Machine(FSM)\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/\",\"name\":\"Creating an HSM(Hierarchical state machine): Step-by-Step Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Figure-9-5.png\",\"datePublished\":\"2022-03-07T08:39:25+00:00\",\"dateModified\":\"2023-08-24T06:01:10+00:00\",\"description\":\"Draw a Hierarchical State Machine (HSM) in this guide. Follow the detailed steps to create an FSM using 'qm' tool, design states, transitions.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Figure-9-5.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Figure-9-5.png\",\"width\":1226,\"height\":673,\"caption\":\"Figure 9. Adding a files to src directory\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FSM Lecture 61: Exercise-007 Drawing an HSM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"name\":\"FastBit EBA\",\"description\":\"Your Online Academy of Embedded Systems\",\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\",\"name\":\"FastBit EBA\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"width\":640,\"height\":640,\"caption\":\"FastBit EBA\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/fastbiteba\\\/\",\"https:\\\/\\\/x.com\\\/fastbiteba\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/fastbit-embedded-brain-academy-b3167b124\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCa1REBV9hyrzGp2mjJCagBg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\",\"name\":\"FastBitLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"caption\":\"FastBitLab\"},\"description\":\"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating an HSM(Hierarchical state machine): Step-by-Step Guide","description":"Draw a Hierarchical State Machine (HSM) in this guide. Follow the detailed steps to create an FSM using 'qm' tool, design states, transitions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/","og_locale":"en_US","og_type":"article","og_title":"Creating an HSM(Hierarchical state machine): Step-by-Step Guide","og_description":"Draw a Hierarchical State Machine (HSM) in this guide. Follow the detailed steps to create an FSM using 'qm' tool, design states, transitions.","og_url":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/","og_site_name":"FastBit EBA","article_publisher":"https:\/\/www.facebook.com\/fastbiteba\/","article_published_time":"2022-03-07T08:39:25+00:00","article_modified_time":"2023-08-24T06:01:10+00:00","og_image":[{"width":1226,"height":673,"url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2022\/03\/Figure-9-5.png","type":"image\/png"}],"author":"FastBitLab","twitter_card":"summary_large_image","twitter_creator":"@fastbiteba","twitter_site":"@fastbiteba","twitter_misc":{"Written by":"FastBitLab","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#article","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/"},"author":{"name":"FastBitLab","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d"},"headline":"FSM Lecture 61: Exercise-007 Drawing an HSM","datePublished":"2022-03-07T08:39:25+00:00","dateModified":"2023-08-24T06:01:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/"},"wordCount":1224,"commentCount":0,"publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2022\/03\/Figure-9-5.png","keywords":["Finite state Machine(FSM)"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/","url":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/","name":"Creating an HSM(Hierarchical state machine): Step-by-Step Guide","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#primaryimage"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2022\/03\/Figure-9-5.png","datePublished":"2022-03-07T08:39:25+00:00","dateModified":"2023-08-24T06:01:10+00:00","description":"Draw a Hierarchical State Machine (HSM) in this guide. Follow the detailed steps to create an FSM using 'qm' tool, design states, transitions.","breadcrumb":{"@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#primaryimage","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2022\/03\/Figure-9-5.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2022\/03\/Figure-9-5.png","width":1226,"height":673,"caption":"Figure 9. Adding a files to src directory"},{"@type":"BreadcrumbList","@id":"https:\/\/fastbitlab.com\/blog\/fsm-lecture-drawing-an-hsm-hierarchical-state-machine\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fastbitlab.com\/blog\/"},{"@type":"ListItem","position":2,"name":"FSM Lecture 61: Exercise-007 Drawing an HSM"}]},{"@type":"WebSite","@id":"https:\/\/fastbitlab.com\/blog\/#website","url":"https:\/\/fastbitlab.com\/blog\/","name":"FastBit EBA","description":"Your Online Academy of Embedded Systems","publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fastbitlab.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fastbitlab.com\/blog\/#organization","name":"FastBit EBA","url":"https:\/\/fastbitlab.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","width":640,"height":640,"caption":"FastBit EBA"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/fastbiteba\/","https:\/\/x.com\/fastbiteba","https:\/\/www.linkedin.com\/in\/fastbit-embedded-brain-academy-b3167b124\/","https:\/\/www.youtube.com\/channel\/UCa1REBV9hyrzGp2mjJCagBg"]},{"@type":"Person","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d","name":"FastBitLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","caption":"FastBitLab"},"description":"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries."}]}},"_links":{"self":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/8158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/comments?post=8158"}],"version-history":[{"count":5,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/8158\/revisions"}],"predecessor-version":[{"id":15585,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/8158\/revisions\/15585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media\/8171"}],"wp:attachment":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media?parent=8158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/categories?post=8158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/tags?post=8158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}