Fork future / graph navigation / skip slides

[quimnuss]

I love impress.js

I've been searching for something like this to represent complex mindmap structures.

For that I would like to be able to asign direction keys to different presentation "paths". Like reveal.js does.

That is a presentation graph like this:
[slide1] -> [slide2] -> [slide3]-> [slide4]
.............. v................
...........[slide2.1]...........
.............. v................
...........[slide2.2]...........

Actually, I'd like to do this in 3d, allowing to learn more about a topic or move on otherwise. That way I could do multilayered presentations with different amount of detail (or go into details if the audience wishes so)

What do you think about it? Did I miss something similar?

[FagnerMartinsBrack]

If you want to build any 3D presentation I would say impress.js is the way to start.

[bartaz]

In case of reveal.js it's simpler, because it assumes 2D layout of slides, so it's more natural to have horizontal or vertical navigation.

Impress.js doesn't assume any layout of the slides. Currently it only assumes their order (based on order of them in HTML code).

But this is not the first time where someone asks for more flexibility in navigation. This would require some deeper changes in impress code - to stop assuming linear flow of steps (only use it as a default) and allow users to define other paths.

[quimnuss]

@FagnerMartinsBrack yes indeed! impress.js rocks.
@bartaz Thank you for taking the time to look this up.

Actually I've implemented it. It's 0 flexible because it's the first time I touch a javascript/css and I don't know proper practices... so bear with me.

I've created an array of arrays with the numbers of the connected slides and added the method subnext that is triggered with up/down, althought I'll probably switch it to +/-. Indeed in 3d it's tricky to decide which key should be assigned. Right now the graph is hard-coded but I'll change it so you can pass it as a parameter of each step. I'm sure there are cleaner ways to do this, but again, I'm not familiar with the language yet.

Anyway, I can do what I wanted to do, even if it's dirty.

[quimnuss]

once I have a parametrized version I'll fork the the repo and upload it just in case anybody else is interested.

[FagnerMartinsBrack]

Put some demos online. Sometimes its better to have a way to visualize the result even if you have questions about how it was done internally.

[quimnuss]

Here, a minimal example. For now the transitions are hard-coded and only
up+right is implemented, but that way you get the idea.

Use right arrow to see the main slides and up to go by the subslides. I've
numbered them so you see it.

http://quimnuss.github.io/impress.js/#/bored

2015-03-10 10:32 GMT+01:00 Fagner Brack [email protected]:

Put some demos online. Sometimes its better to have a way to visualize the
result even if you have questions about how it was done internally.

—
Reply to this email directly or view it on GitHub
#465 (comment).

[FagnerMartinsBrack]

Its pretty hard to grasp the final idea from a minimal example :S.

When I mentioned the suggestion to put some demos online, I meant that I am curious of how the design would be to express a multi layered presentation with additional details. I am pretty sure its not just me, its interesting to see different ways of using impress. It's an awesome tool with many design possibilities.

[quimnuss]

I believe there's a bit of a confusion here.

Its pretty hard to grasp the idea from an incomplete example :S.

I've uploaded my modification to impress.js to allow two paths of navigation; that is, a minimal working example to illustrate the idea. It's minimal, but still complete. The rellevant part was how to use two different keys to navigate, not how the slides should be placed so the navigation comes naturally.

For a full functional and meaningful demo you'll have to wait ;) the one I'm envisaging is quite complex and will take me some time to design and implement. ... and may turn out to be a disaster as well.

There aren't impress.js demos that do this AFAIK, jmpress came close but it doesn't work properly in FF36. See this cube

Anyway, I'll upload a parametrization of the modification when it's ready in case is of any help to anybody.

[FagnerMartinsBrack]

Ok, I would be interested for a functional example though if you manage to finish it.

About FF 36. If jmpress doesnt work, then probably impress.js doesn't work either. Have you come in a situation where jmpress did not worked but impress.js did? In my tests both have the same behavior regarding compatibility (and jmpress seems to have a better compatibility since it falls back to 2D, like being able to work in Opera).

[quimnuss]

I haven't researched it yet, but none of the jmpress presentations transition properly on FF36, they all jump instantaneously from one slide to the next (no sliding effect). Impress.js, however, transitions normally (a bit jerky on some, thought).

So for example impress inside jmpress doesn't transition:
http://jmpressjs.github.io/jmpress.js/examples/impress/#/bored
while the original impress does:
http://bartaz.github.io/impress.js/#/bored

Unfortunatelly I can't debug it now, will do if I have the time. Maybe we should move this issue to jmpress, we drifted away from the original question.

[FagnerMartinsBrack]

The problem is not directly related to impress or jmpress, Firefox broke the 3D transition in some versions. Just because jmpress doesnt work and impress works in a "bugged" way it doesnt mean one is doing something more "right" than the other. Both handle the transitions pretty well.

There is a Firefox report about that and it was fixed in the latest versions: https://bugzilla.mozilla.org/show_bug.cgi?id=1098266

There is an issue saying the same was happening for Firefox 34, so it doesnt seems to be restricted for FF 36: #443

[Hypoon]

Any news on this front? I'm looking to use a similar feature. I'm considering using impress.js for a presentation. If I get stopped during my presentation with a question (very likely), I may want to briefly discuss a "more detail slide" which would normally be excluded from the narrative.

I think the ideal end result in my case would be to be able to push a hotkey to turn over a slide to view the back of it. Regardless of whether I pushed the hotkey or not, the right arrow key should proceed to the next slide as usual.

[FagnerMartinsBrack]

@Hypoon Thanks for the comment and sharing your use case, that was very useful.

Any news on this front?

See this and this.

[Hypoon]

@FagnerMartinsBrack I see, thank you for getting back to me.

[henrikingo]

Hi @quimnuss @Hypoon

I like the ideas in this thread. I've integrated some related feature requests into my fork of impress.js here. The official impress.js demo here has some of these enabled. In particular:

• Notice there is a navigation menu bottom right, which allows you to jump to any slide.
• The skip plugin allows you to have slides which are skipped from the usual left-right navigation, but you can jump to them with the menu.
• The more general goto plugin allows you to redefine the sequence of the navigation, so that when you move to the "next" slide, you will move to whatever is defined with the data-goto attribute.

The ideas in this thread are not completely possible as of now, but could be easily implemented with the same approach, for example by extending the goto plugin a little. For example, instead of just data-goto-prev and data-goto-next alternatives, you could redefine all of the arrow keys with data-goto-left, data-goto-right, data-goto-up and data-goto-down. I think such non-linear navigation fits the idea of impress.js quite well and could be fun to experiment with it!

[henrikingo]

Hi all

Just wanted to add a link here for those that will come here to read this... I spent some rainy Summer days creating a demo that uses non-linear navigation. In this case, you can freely navigate Up, Down, Right and Left. (A 3D presentation could offer even more interesting choices.)

http://henrikingo.github.io/impress.js/examples/2D-navigation/

It's late now, so the text content is missing. If you want to participate in my playful crowdsourcing of pro's and con's for desserts, please do so on twitter: https://twitter.com/h_ingo/status/903359928567570433

[quimnuss]

Very nice Henrik! Maybe that's the push I needed to finish my slideshow project I left on the shelf for nearly two years... Not a fan of desserts in general so... yeah, outlier info shall be neglected.

…

On Thu, Aug 31, 2017 at 11:11 PM, Henrik Ingo ***@***.***> wrote: Hi all Just wanted to add a link here for those that will come here to read this... I spent some rainy Summer days creating a demo that uses non-linear navigation. In this case, you can freely navigate Up, Down, Right and Left. (A 3D presentation could offer even more interesting choices.) http://henrikingo.github.io/impress.js/examples/2D-navigation/ It's late now, so the text content is missing. If you want to participate in my playful crowdsourcing of pro's and con's for desserts, please do so on twitter: https://twitter.com/h_ingo/status/903359928567570433 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#465 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD_HCTGOtXIdHwrHp8wZc8gSROUvcTGGks5sdyGAgaJpZM4Dr00L> .

[henrikingo]

goto plugin is now part of impress.js master as of 1.0.0-beta1

[mrusselldesign]

For anyone who comes across this, I put together a script that can set presentation "paths" using jmpress.js, which includes the "data-exclude" attribute to skip steps.

I tagged links to the custom paths with onclick="filterSelection('pathname')

I used the script below to look for slides with class "pathname" and set data-exclude to "false", then finally deinitialize and reinitialize jmpress.js to recognize the new path selection.

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("step");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");	
  }
  	$('#impress').jmpress("deinit");
	$('#impress').jmpress({ start: '#main', viewPort : {height: 900, width: 1450, maxScale: 1 } , });
	// deinitialize and reinitialize jmpress with the current data-exclude properties
  }

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
	  element.setAttribute("data-exclude", "false");
	  // set data-exclude to false on shown elements

    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 	  
    }
  }
  element.className = arr1.join(" ");
  element.setAttribute("data-exclude", "true");
  // set data-exclude to true on un-shown elements
}

Hope someone finds this useful. Thanks to @bartaz, @henrikingo, @sokra, and @shama for the great work!