Open SirClickALot opened 1 year ago
I cannot seem to control my embedded Sozi form outside the because Javascript cannot 'find' the 'player'...</p> <p>I am Sozi 23.07.25-1690311612</p> <p>I use a drawing program called Xara Designer Pro+ but I include that info here purely for compliance as there is no problem with SVG itself.</p> <h2>Steps to reproduce the problem</h2> <h3>Understanding the guidance on embedding</h3> <p>I have read and understood the guidance (<a rel="noreferrer nofollow" target="_blank" href="https://sozi.baierouge.fr/pages/tutorial-embedding.html">https://sozi.baierouge.fr/pages/tutorial-embedding.html</a>) on communicating with a Sozi when it is embedded in an an IFRAME and below is the <iframe> that I am using to embed my Sozi...</p> <p><code><iframe id="sozi-frame"src="https://sirclickalot.co.uk/assets/books/gcse-computer-science-plus/chapters/computer-systems/topics/introduction-to-computer-systems/journeys/the-basic-computer-system-process-breakdown/braille-to-english-landscape.sozi.html" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe></code></p> <p>This all seems to work exactly as expected.</p> <h4>Why have I given the <iframe> an ID?</h4> <p>You will notice that I have given the <iframe> an ID of 'sozi-frame'. I initially tried to target the iframe exactly as described in the guidance but got no joy there either so rather than simply target the 'first' <iframe> in my out Javascript, I chose to be more specific by using...</p> <p><code>var sozi_frame = document.getElementById("sozi-frame");</code></p> <p>I can 'see' this <iframe> in my Javascript perfectly fine - the ULR is public so anyone can try it out.</p> <p>Here is the full tweaked version of my javascript - I am not interested in the Sozi frame titles so mine is slightly cut down from the guidance example...</p> <!-- Attach Sozi navigation to the external navigation buttons --> <pre><code><script> var sozi_frame = document.getElementById("sozi-frame"); var sozi_player = sozi_frame.contentWindow.sozi.player; alert(sozi_player); var btnPrev = document.getElementById("btn-prev"); var btnNext = document.getElementById("btn-next"); btnPrev.addEventListener("click", function () { player.moveToPrevious(); }, false); btnNext.addEventListener("click", function () { player.moveToNext(); }, false); </script></code></pre> <p>NOTE the crude but illustrative <code>alert()</code> on the third line - we never reach this point because the value of <code>sozi_player</code> is <code>null</code>.</p> <p>The Javascript console reports...</p> <p><code>Uncaught TypeError: Cannot read properties of undefined (reading 'player')</code></p> <p>I am at a loss here, can anyone please help me to see what I'm missing?</p> <p>Why does my <code>sozi_player</code> frame appear to be missing its <code>.player</code>?</p> <h2>Resources for anyone who can help</h2> <p><a rel="noreferrer nofollow" target="_blank" href="https://sirclickalot.co.uk/assets/books/gcse-computer-science-plus/chapters/computer-systems/topics/introduction-to-computer-systems/journeys/the-basic-computer-system-process-breakdown">HERE</a> is the working HTML that tries to target the 'player' using the grey <code>btnNext</code>and <code>btnPrev</code> at the bottom right corner.</p> <p><a rel="noreferrer nofollow" target="_blank" href="https://sirclickalot.co.uk/assets/testing/my-sozi.zip">HERE</a> is an archive of my Sozi for reference.</p> <p>Thanks all, getting this solved will open the doors to me using and promoting Sozi widely in our open source education project so I would be very grateful for any advice given.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aumouvantsillage"><img src="https://avatars.githubusercontent.com/u/120857?v=4" />aumouvantsillage</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>There is an important difference between your code and the tutorial. In the tutorial, the script is inserted in:</p> <pre><code class="language-javascript">window.addEventListener("load", function () { ... }, false);</code></pre> <p>Have you tried this?</p> <p>I suspect that your script is executed too early. It tries to access <code>sozi_frame.contentWindow.sozi</code> before it has been assigned. The tutorial works because it waits until the content of the iframe is fully loaded and the Sozi presentation is ready to play.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/SirClickALot"><img src="https://avatars.githubusercontent.com/u/1190521?v=4" />SirClickALot</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Thank you very much for responding Guillaume - great spot - obvious now you've pointed it out but many thanks for helping me to move this on.</p> <p>I have managed now to get my NEXT frame external button working perfectly as is demonstrated <a href="https://sirclickalot.co.uk/assets/books/gcse-computer-science-plus/chapters/computer-systems/topics/introduction-to-computer-systems/journeys/the-basic-computer-system-process-breakdown">here</a> very convincingly but for some reason that I cannot explain, the PREVIOUS frame button fails because JavaScript is reporting...</p> <p><code>Uncaught TypeError: player.moveToPrevious is not a function</code></p> <p>Which cannot be right because I'm pretty sure the function exists in the player.</p> <p>Here is the full code with plenty of <code>console.debug</code> lines to verify that everything is firing as it should be...</p> <pre><code><iframe src="my-sozi.html" width="100%" height="100%" frameborder="0" scrolling="auto"> </iframe> <script> window.addEventListener("load", function() { // Get the <iframe> var frame = document.querySelector("iframe"); // Give it keyboard focus frame.focus() // Get the 'player' object from the Sozi content var player = frame.contentWindow.sozi.player; console.log("Here is the 'player' object..."); console.log(player); // Get the PREVIOUS button (in my case, a <span>) var btnPrev = document.getElementById("btn-prev"); console.log("Here is the 'PREVIOUS frame button' object..."); console.log(btnPrev); // Add a listener to watch for mouse clicks btnPrev.addEventListener("click", function() { player.moveToPrevious(); console.log("Moving to PREVIOUS frame"); }, false); console.log("Added the PREVIOUS button listener"); // Get the NEXT button (in my case, a <span>) var btnNext = document.getElementById("btn-next"); console.log("Here is the 'NEXT frame button' object..."); console.log(btnNext); // Add a listener to watch for mouse clicks btnNext.addEventListener("click", function() { player.moveToNext(); console.log("Moving to NEXT frame"); }, false); console.log("Added the NEXT button listener"); }, false); </script> <style> #btn-prev, #btn-next { cursor: pointer; } #btn-prev:hover, #btn-next:hover { filter: brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(4533%) hue-rotate(147deg) brightness(98%) contrast(75%); } </style></code></pre> <p>If anyone can spot the problem, I'd be very grateful - I'm ALMOST there!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aumouvantsillage"><img src="https://avatars.githubusercontent.com/u/120857?v=4" />aumouvantsillage</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Which cannot be right because I'm pretty sure the function exists in the player.</p> </blockquote> <p>I was also pretty sure it existed until I checked. I don't remember the exact reasons but I think that it was removed when the <a href="https://github.com/sozi-projects/Sozi/blob/master/src/js/player/PlayerController.js#L164"><code>PlayerController</code></a> class was introduced to help create presentations that can be controlled remotely. I have forgotten to update the documentation.</p> <p>Can you try this simple change and tell me how it works for you?</p> <pre><code class="language-javascript">var player = frame.contentWindow.sozi.playerController;</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/SirClickALot"><img src="https://avatars.githubusercontent.com/u/1190521?v=4" />SirClickALot</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>That's it - 100% fixed! Thank you very much for that. As a result of this, it's probably worth updating the <a href="https://sozi.baierouge.fr/pages/tutorial-embedding.html">documentation page</a>.</p> <p>Here is my first successful <a href="https://sirclickalot.co.uk/assets/books/gcse-computer-science-plus/chapters/computer-systems/topics/introduction-to-computer-systems/journeys/the-basic-computer-system-process-breakdown">embedded Sozi</a> in action; there will be more.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
Summary of your problem or feature request
I cannot seem to control my embedded Sozi form outside the