How to I make next-frame and previous-frame buttons?

[hoshi411]

I know how to turn objects into buttons using Inkscape href attributes.
But I want to make a button that links to the next frame and a button which links to the previous frame.
I have waaaaaaay too many frames to make new next and back button instances for each frame.

Here is the page I am working on if interested
https://binary-personality.github.io/diagnostic.html

Looking forward to the answer.

22/04/05 17:38

I assume that the answer must have to do with whatever javascript call is being made to advance to the next slide when the screen is clicked. If someone could explain that to me, I might be able to come up with my own solution. I just don't know enough about what is happening with the screen clicks.

22/04/05 17:38

I found a function in HTML file called this.moveToNext and this.moveToPrevious . Does anyone know what I do with these to add them to my buttons? I just don't know enough about javascript but I am guessing that I need to throw 'this.moveToPrevious' in the SVG file under href. Do I need to format that a special way to make it work?

22/04/05 18:01

I found that I should be able to do something like this '
<button onclick="myFunction()">Click me</button>
I should be able to use the function moveToNext() . I tried putting that in the svg button and it does not work. What am I missing? I also tried 'this.moveToFrame(this.nextFrame)' and variations of this.jumpToNext()

[tshoppa]

You'll have to call moveToNext on the PlayerController object, I think. So it would be window.sozi.playerController.moveToNext();
I am not at home and can't look it up better (or try it), but I will check when I am back!

[aumouvantsillage]

you'll have to switch off mouse navigation in sozi

You can keep mouse navigation by creating fake hyperlinks like this:

<a onclick="window.sozi.playerController.moveToPrevious()"><path ... /></a>

[tshoppa]

You can keep mouse navigation by creating fake hyperlinks like this:

Nice!

[hoshi411]

Thank you all for the answers. My project is not a presentation, but an app. The navigation is with buttons alone so I already needed to turn off mouse and keyboard navigation anyways. Thank you for the answer.

[WLehmann]

So yes, it works exactly like this. Here's an example made with sozi: buttonTest.zip I added <path onclick="window.sozi.playerController.moveToPrevious()" to the back button, and onclick="window.sozi.playerController.moveToNext()" to the next button. Two notes:

Please excuse my ignorance, but WHERE does the code snippet go? I assume in Inkscape, into an object property?
It would probably be the easiest to just publish the SVG source for the buttonTest.zip file?

[tshoppa]

So yes, it works exactly like this. Here's an example made with sozi: buttonTest.zip I added <path onclick="window.sozi.playerController.moveToPrevious()" to the back button, and onclick="window.sozi.playerController.moveToNext()" to the next button. Two notes:

Please excuse my ignorance, but WHERE does the code snippet go? I assume in Inkscape, into an object property? It would probably be the easiest to just publish the SVG source for the buttonTest.zip file?

In the example above the code was added to buttonTest.sozi.html directly (open the file in an editor and search for "playerController" to see where it is)
However, the better solution is to add it as a separate javascript file. These are the steps to do so:

• In Inkscape, select the back button shape. Open the XML Editor from the Edit Menu. click on the "id" attribute, set it to "PrevButton" and press the "set" button. Repeat the procedure to rename the id of the next button shape to "NextButton". Save the file. (Actually it doesn't matter what the ids are named, I just find it more convenient to have meaningful names. You might even leave the ids unchanged, just remember the values)

• create a new text file "nav.js". Add these lines and save the file:

document.getElementById('PrevButton').addEventListener('click', function(){
    window.sozi.playerController.moveToPrevious();
});   

document.getElementById('NextButton').addEventListener('click', function(){
    window.sozi.playerController.moveToNext();
}); 

• start sozi and open your project. In the right menu there is a field where you can add scripts and stylesheets (you'd probably have to scroll down a bit to see the field). Add the nav.js script here and save the project. That's all.

Here are the files form the example:
buttonTestAll.zip