New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fork future / graph navigation / skip slides #465

Closed
quimnuss opened this Issue Mar 9, 2015 · 19 comments

Comments

Projects
None yet
6 participants
@quimnuss

quimnuss commented Mar 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Mar 10, 2015

Member

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

Member

FagnerMartinsBrack commented Mar 10, 2015

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

@bartaz

This comment has been minimized.

Show comment
Hide comment
@bartaz

bartaz Mar 10, 2015

Member

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.

Member

bartaz commented Mar 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@quimnuss

quimnuss Mar 10, 2015

@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.

@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

This comment has been minimized.

Show comment
Hide comment
@quimnuss

quimnuss Mar 10, 2015

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

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

@FagnerMartinsBrack

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Mar 10, 2015

Member

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.

Member

FagnerMartinsBrack commented Mar 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@quimnuss

quimnuss Mar 10, 2015

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 notifications@github.com:

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).

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 notifications@github.com:

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

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Mar 10, 2015

Member

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.

Member

FagnerMartinsBrack commented Mar 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@quimnuss

quimnuss Mar 10, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Mar 11, 2015

Member

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).

Member

FagnerMartinsBrack commented Mar 11, 2015

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

This comment has been minimized.

Show comment
Hide comment
@quimnuss

quimnuss Mar 11, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Mar 11, 2015

Member

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

Member

FagnerMartinsBrack commented Mar 11, 2015

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

@bartaz bartaz added the RGSoC label Jun 26, 2015

@Hypoon

This comment has been minimized.

Show comment
Hide comment
@Hypoon

Hypoon Apr 9, 2016

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.

Hypoon commented Apr 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Apr 9, 2016

Member

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

Any news on this front?

See this and this.

Member

FagnerMartinsBrack commented Apr 9, 2016

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

Any news on this front?

See this and this.

@Hypoon

This comment has been minimized.

Show comment
Hide comment
@Hypoon

Hypoon Apr 10, 2016

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

Hypoon commented Apr 10, 2016

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

@henrikingo

This comment has been minimized.

Show comment
Hide comment
@henrikingo

henrikingo Aug 13, 2016

Contributor

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!

Contributor

henrikingo commented Aug 13, 2016

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 added a commit to henrikingo/impress.js that referenced this issue Oct 16, 2016

Add new demo examples/cube to showcase a simple 3-dimensional present…
…ation.

This presentation actually was possible already before addition of
data-rotate-order. But it will be a great demo to showcase
"graph navigation" / multi-dimension navigation as in
impress#465 if it's implemented
in the future.
@henrikingo

This comment has been minimized.

Show comment
Hide comment
@henrikingo

henrikingo Aug 31, 2017

Contributor

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

Contributor

henrikingo commented Aug 31, 2017

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

This comment has been minimized.

Show comment
Hide comment
@quimnuss

quimnuss Sep 1, 2017

quimnuss commented Sep 1, 2017

henrikingo added a commit to henrikingo/impress.js that referenced this issue Oct 30, 2017

Add new demo examples/cube to showcase a simple 3-dimensional present…
…ation.

Also nice demo of multi-dimensional navigation from impress#465

henrikingo added a commit that referenced this issue Nov 5, 2017

Add new demo examples/cube to showcase a simple 3-dimensional present…
…ation.

Also nice demo of multi-dimensional navigation from impress#465
@henrikingo

This comment has been minimized.

Show comment
Hide comment
@henrikingo

henrikingo Dec 2, 2017

Contributor

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

Contributor

henrikingo commented Dec 2, 2017

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

@henrikingo henrikingo closed this Dec 2, 2017

@mrusselldesign

This comment has been minimized.

Show comment
Hide comment
@mrusselldesign

mrusselldesign Dec 22, 2017

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!

mrusselldesign commented Dec 22, 2017

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment