{"id":196915,"date":"2025-07-18T08:29:42","date_gmt":"2025-07-18T08:29:42","guid":{"rendered":"https:\/\/innovationspace.ansys.com\/knowledge\/?post_type=topic&#038;p=196915"},"modified":"2025-07-30T13:33:19","modified_gmt":"2025-07-30T13:33:19","slug":"scade-display-window-manager","status":"publish","type":"topic","link":"https:\/\/innovationspace.ansys.com\/knowledge\/forums\/topic\/scade-display-window-manager\/","title":{"rendered":"SCADE Display window manager"},"content":{"rendered":"<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-banner.jpeg\" style=\"max-height: 700px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<h4  id=\"INTRODUCTION\">Introduction<\/h4>\n<p>Managing different windows in embedded systems is a common need for advanced HMI (Human-Machine Interface) applications. For instance, an aircraft cockpit may require multiple pages to be displayed on several areas of the same physical screen.<\/p>\n<p>Ansys SCADE Display is a model-based design tool for reliable and safe embedded HMIs. In this article, we&#8217;ll explore the concept of &#8220;hook&#8221; and show how, with the help of Ansys SCADE Suite for some underlying logic, we can define zones in a SCADE Display HMI and swap them around to reorganize the screen.<\/p>\n<p>We will build a multi-zone embedded HMI that looks like this mockup:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-mockup.svg\" style=\"max-height: 400px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<h4  id=\"THE-HOOK\">The Hook<\/h4>\n<p>When someone mentions &#8216;hook,&#8217; the first image that pops into my mind is Captain Hook chasing Peter Pan \u2014 not exactly what you&#8217;d expect in safety-critical HMIs<a href=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-hook.gif\">.<\/a> Fortunately, this article&#8217;s hook is much friendlier (and definitely safer), designed to simplify rather than terrorize.<\/p>\n<p>In SCADE Display, a <em>hook<\/em> is a way to extend and customize reference object capabilities. Reference objects are reusable pieces assembled from graphical widgets. By default, they do not accept children in their structure tree. This makes it impossible to use a reference object as a container for other things.<\/p>\n<p>However, when a reference object contains one or more hooks, it starts behaving as a container and can support children in its structure tree. An index allows to specify whether all children should be displayed, or just a single one:<\/p>\n<ul>\n<li><code>-1<\/code> to display all children<\/li>\n<li><code>index<\/code>, starting from <code>0<\/code>, to display a single child object<\/li>\n<\/ul>\n<p>What&#8217;s interesting about this is that we can create a reference object capable of holding multiple child objects, and simply select which one to display using an index. We can then leverage this mechanism to dynamically control what gets displayed within a window or a specific section of our HMI.<\/p>\n<h4  id=\"CREATING-SCADE-DISPLAY-REFERENCE-OBJECTS\">Creating SCADE Display reference objects<\/h4>\n<p>We want to have multiple zones and the flexibility to swap content between these zones. So, what do we need for each zone? First, a <strong>hook<\/strong> to dynamically display the selected object. Second, a <strong>mask<\/strong> to ensure that our object doesn&#8217;t overflow into other parts of the HMI, especially if it&#8217;s larger than the designated zone.<\/p>\n<p>In our example, we&#8217;ll arbitrarily define four zones. To manage the indices of each hook object, we&#8217;ll use an array called <code>zoneContent<\/code>:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-windowmanager-structure.png\" style=\"max-height: 400px !important\" \/><br \/>\n    <em>Structure of our <code>WindowManager<\/code> reference object<\/em>\n<\/p>\n<p>The <code>separator<\/code> group at the bottom contains a few lines to clearly visualize the boundaries of each zone.<\/p>\n<p>Note: we could factorize the model even further \u2014 but that would mean creating &#8220;hooks of hooks&#8221; and I don&#8217;t want to lose you this early in the article! \ud83d\ude04<\/p>\n<p>Now, let&#8217;s take a look at the resulting behavior. In our top-level graphical specification, we&#8217;ll instantiate our reference <code>WindowManager<\/code> object:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-model-start.png\" style=\"max-height: 93px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<p>And add four child objects to it:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-model-structure.png\" style=\"max-height: 258px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<p>Now, let&#8217;s simulate the model and play around with the <code>zoneContent<\/code> variable:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-simulation.gif\" style=\"max-height: 700px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<p>Fantastic! We now have the core functionality we wanted to implement. Let&#8217;s move on to the next step: adding some interactivity using SCADE Suite logic, allowing us to select two zones we&#8217;d like to swap.<\/p>\n<h4  id=\"MANAGING-INTERACTIVITY\">Managing interactivity<\/h4>\n<p>On the SCADE Display reference object side, there&#8217;s not much left to do: we&#8217;ll just need to add a <strong>pointer event listener<\/strong> and define <strong>active areas<\/strong> for each zone, allowing us to identify which zone has been clicked\/touched by the user at runtime:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-areas.png\" style=\"max-height: 521px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<h4  id=\"SCADE-SUITE-ZONE-CONTENT-SWAP-BEHAVIOR\">SCADE Suite zone content swap behavior<\/h4>\n<p>Now, it&#8217;s time to create a model that will manage the swap between two zones. We&#8217;ll need a function to track which zone has been selected, and an algorithm to handle the swap logic: detect the selection by the user of a valid first zone, then a valid second zone \u2014 and finally, perform the swap. For that, we&#8217;ll also need a swap function that exchanges two elements in an array.\n<\/p>\n<h5  id=\"ZONE-ID-MANAGEMENT\">Zone ID management<\/h5>\n<p>This function returns the identifier of the clicked zone:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-swapzonecontent-op-zoneidmgt.svg\" style=\"max-height: 250px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<h5  id=\"SWAP-MECHANISM\">Swap mechanism<\/h5>\n<p>The swap algorithm is managed by a state machine with 4 states:<\/p>\n<ul>\n<li>Idle<\/li>\n<li>FirstSelection<\/li>\n<li>SecondSelection<\/li>\n<li>Swap<\/li>\n<\/ul>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-swapzonecontent-op-state-machine.svg\" style=\"max-height: 700px !important\" \/><br \/>\n    <em>Full state machine (click to enlarge)<\/em>\n<\/p>\n<h4  id=\"SCADE-DISPLAY-CO-SIMULATION\">SCADE Display co-simulation<\/h4>\n<p>To validate the behavior of our HMI, SCADE Display allows for co-simulation with the behavior model. This makes it easy to quickly test and debug our setup. Here are the settings :<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-co-sim-settings.png\" style=\"max-height: 500px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<p>With the logic in place, we can now select two zones and successfully swap their content:<\/p>\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-co-sim.gif\" style=\"max-height: 512px !important\" \/><br \/>\n    <em><\/em>\n<\/p>\n<h4  id=\"CONCLUSION\">Conclusion<\/h4>\n<p>By combining the visual capabilities of SCADE Display with the logical power of SCADE Suite, we&#8217;ve built a flexible and interactive window management system \u2014 one that allows dynamic content swapping between multiple zones at runtime. This approach not only enhances the modularity of HMI design but also promotes maintainability and scalability for future developments. Whether you&#8217;re building a simple interface or a complex multi-view cockpit, this pattern provides a solid foundation for managing visual content in a structured and efficient way. All thanks to our new friend the &#8220;Hook&#8221; \ud83d\ude09.<\/p>\n<p>In the meantime, if you want to experiment, you may download this article&#8217;s example model <a href=\"https:\/\/github.com\/ansys\/scade-examples\/releases\/latest\/download\/2025-07-30-window-manager.zip\">here<\/a> (or <a href=\"https:\/\/github.com\/ansys\/scade-examples\/tree\/main\/models\/2025-07-30-window-manager\/\">browse its sources<\/a>).<\/p>\n<p>For more advanced use cases\u2014such as <strong>shifting content around<\/strong>, <strong>reconfiguring the number of zones<\/strong>, or <strong>dynamically adjusting zone sizes<\/strong>\u2014we invite you to explore the <strong>Mission Computer<\/strong> example model. It will be publicly available on our GitHub in a few weeks, and is already accessible upon request.<\/p>\n<p>If you wish to know more about how SCADE Display can improve your embedded design workflow, you may contact us from the <a href=\"https:\/\/www.ansys.com\/products\/embedded-software\/ansys-scade-display\">Ansys SCADE Display page<\/a>.<\/p>\n<h3  id=\"ABOUT-THE-AUTHOR\">About the author<\/h3>\n<table style=\"max-width: 1000px;border: none !important\">\n<tr>\n<td style=\"padding: 0px 10px;min-width: 150px;border: none !important\">\n<p style=\"text-align: center\">\n    <img decoding=\"async\" src=\"https:\/\/innovationspace.ansys.com\/knowledge\/wp-content\/uploads\/sites\/4\/2025\/07\/scade-047-author.png\" style=\"max-height: 150px !important\" \/><br \/>\n                <em><\/em>\n<\/p>\n<\/td>\n<td style=\"padding: 0px 10px;min-width: 150px;border: none !important\">\n<p><strong>Ludovic Oddos<\/strong> (<a href=\"https:\/\/www.linkedin.com\/in\/ludovicoddos\/\">LinkedIn<\/a>) is a Lead Product Specialist at Ansys. He has been supporting SCADE field engagements, in many industries, for more than 15 years. He has deep expertise in embedded software and its integration into various target environments.<\/p>\n<\/td>\n<\/tr>\n<\/table>\n","protected":false},"template":"","class_list":["post-196915","topic","type-topic","status-publish","hentry","topic-tag-display","topic-tag-scade","topic-tag-suite","topic-tag-swap","topic-tag-window","topic-tag-zones"],"aioseo_notices":[],"acf":[],"custom_fields":[{"0":{"_edit_lock":["1757916297:7546"],"_edit_last":["1769"],"_aioseo_title":[null],"_aioseo_description":[null],"_aioseo_keywords":["a:0:{}"],"_aioseo_og_title":[null],"_aioseo_og_description":[null],"_aioseo_og_article_section":[""],"_aioseo_og_article_tags":["a:0:{}"],"_aioseo_twitter_title":[null],"_aioseo_twitter_description":[null],"filter_by_optics_product":["Lumerical"],"_filter_by_optics_product":["field_64fb192ba3121"],"application_name":[""],"_application_name":["field_64a80903c8e15"],"family":[""],"_family":["field_64a809229a857"],"siebel_km_number":[""],"_siebel_km_number":["field_63ecbffce60db"],"salesforce_km_number":[""],"_salesforce_km_number":["field_63ecc018e60dc"],"km_published_date":[""],"_km_published_date":["field_64c77704499dd"],"product_version":[""],"_product_version":["field_64c776cb4fd2e"],"_bbp_forum_id":["27825"],"_bbp_topic_id":["196915"],"_bbp_author_ip":["20.82.84.9"],"_bbp_last_reply_id":["0"],"_bbp_last_active_id":["196916"],"_bbp_last_active_time":["2025-07-18 08:29:42"],"_bbp_reply_count":["0"],"_bbp_reply_count_hidden":["0"],"_bbp_voice_count":["0"],"_btv_view_count":["1467"],"_bbp_likes_count":["5"]},"test":"solution"}],"_links":{"self":[{"href":"https:\/\/innovationspace.ansys.com\/knowledge\/wp-json\/wp\/v2\/topics\/196915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innovationspace.ansys.com\/knowledge\/wp-json\/wp\/v2\/topics"}],"about":[{"href":"https:\/\/innovationspace.ansys.com\/knowledge\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":4,"href":"https:\/\/innovationspace.ansys.com\/knowledge\/wp-json\/wp\/v2\/topics\/196915\/revisions"}],"predecessor-version":[{"id":196933,"href":"https:\/\/innovationspace.ansys.com\/knowledge\/wp-json\/wp\/v2\/topics\/196915\/revisions\/196933"}],"wp:attachment":[{"href":"https:\/\/innovationspace.ansys.com\/knowledge\/wp-json\/wp\/v2\/media?parent=196915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}