Zim Pane does not show the 2nd time here. Why?

Questions
1

When you click first time, the ZIM pane shows up. But it does not show up 2nd time and so on. How to sort it out?


<!doctype html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <script src="https://d309knd7es5f10.cloudfront.net/createjs_1.1_min.js"></script>
   <script src="https://d309knd7es5f10.cloudfront.net/zim_9.4.0.js"></script>
   <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
   <button id="additionTraining">Show ZIM Pane</button>
   <!-- ZIM Frame will create the canvas automatically -->

   <script>

   let frame, winPane, zimStage;

   document.addEventListener('DOMContentLoaded', function() {
       const button = document.getElementById('additionTraining');
       button.addEventListener('click', btnclick);
   });

   function btnclick() {
       frame = new Frame("fit", 960, 540, lighter, "0xFFCC99");
       frame.on("ready", ready);
   }

   function ready() {
       zimStage = frame.stage;

       winPane = new Pane({
           content: {
               buttons: [
                   {
                       call: function(e) {
                           winPane.hide();
                       }
                   }
               ]
           }
       });

       const btn = new Button();
       btn.on("click", Destroy);
       btn.x = 100;
       btn.y = 100;
       zimStage.addChild(btn);

       winPane.show();
       zimStage.update();
   }

   function Destroy() {
       zimStage.removeAllChildren();
       zimStage.update();
   }

   </script>
</body>
</html>
2

Check for a frame parameter or a container on Pane() - maybe it defaults to the original stage for show().

1 Like
3

Ok. Got it. Need to set the container property

function ready() {


        zimStage = frame.stage;

        winPane = new Pane({
            container: zimStage ,
            content: {
                buttons: [
                    {
                     
                        }
                    }
                ]
            }
        });
.....
......
1 Like