It's been almost a year since my last update on features I've added to the impress.js presentation framework. Already a year ago I had pretty much merged or implemented all of the open backlog for the project. But at the end of the post I still listed two popular requests I hadn't implemented: Support sub-steps and 2D navigation.
Most of last year I have worked on Impressionist, the 3D visual editor for creating impress.js slides. However, at some point I decided that appeasing the community of impress.js users also needed my attention, so last Spring I have spent some time implementing those last 2 items from the backlog.
The 2D navigation - or more precisely, non-linear navigation - is quite cool. It highlights the fundamental nature of impress.js presentations as 3D presentations. They're not PowerPoint slides where you can just move from one to the next. They are steps in a 3D space, and you could potentially navigate in many directions!
To really showcase what this might mean in practice - this is of course just one simple option - I have actually created a demo presentation:
Open presentation in new window
In the above presentation, the presenter can choose when speaking, whether to first cover everything there is to know about ice cream, then crisps, then pie (Down Arrow); or should the presenter rather first cover the pro's of each, then the con's (Right Arrow)?
The commonly requested feature could be done in similar fashion: A presentation could navigate through the default set of slides with Right Arrow, and then if the presenter wants to dive into some extra slide with more info, those could be available with Down Arrow.
Of course, presentations can be even more non-linear than this. They don't have to imply any kind of ordering at all. The opportunities are limitless. Well, limited by 3D space only.
Non-linear navigation was implemented as new "advanced" attributes to the goto plugin.
Sub-steps were maybe the most requested feature at all. This is commonly seen in PowerPoint presentations, where, instead of showing all of the slide at once, you reveal one bullet point at a time. Supposedly, this helps the audience focus on each point.
This was perhaps also the reason I dragged my feet implementing it. Impress.js is NOT PowerPoint. The fact that people are trying to use it as PowerPoint is kinda depressing. I know the creator of impress.js, @bartaz, kind of feels the same.
Ultimately though, as it was such a requested feature, I felt I should do it for the community. So I've created a substep plugin.
The usage is simple and CSS based: Slide contents that have the class
substep will be considered substeps. As you press next or previous arrows, each of them will get an additional class
substep-visible. It's up to the presentation author to use CSS to make the substeps visible or hidden. Or, quite frankly, do whatever you want.
The funny thing is, although I had felt this was a stupid powerpointy feature, after adding it, I immediately started using it in my next presentation:
Open presentation in new window
Of course, I didn't use it the PowerPoint way, to animate a simple bulleted list, rather I learned that it's really handy way to use overlayed transparent images to create animations. I can already tell I will be using this a lot in future presentations too, so thanks a lot to the community for asking for it!
Yet another open issue in the impress.js queue was to support some way of using LaTeX to create mathematical formulas. This is now available by adding MathJax.js. MathJax is quite cool and also supports other notations than LaTeX, such as MathML or AsciiMath! I added a simple LaTeX section to the classic-slides demo to showcase it.
There was also a more advanced request to be able to dynamically make changes to a presentation, then execute some kind of reload. Not surprisingly, I ended up needing exactly that kind of feature for the Impressionist editor myself, so I had to do it.
This was a lot of work, but simple for you to use:
This will "uninitialize" the presentation to its original state, before you called impress().init(). You could then make some changes to the DOM, and call impress().init() again. In most cases the teardown+initialization is not visible to the user.
With these 4 additions, I have now completely drained the backlog of the upstream impress.js project. The plan for the Winter is to make more progress on Impressionist. Hopefully it could become useful for simple presentations soon.
- Add new comment
- 8094 views
Thanks for your efforts to
Thanks for your efforts to improve impress.js and to make it more friendly and accessible to noobs like me. I am happy that you have plans for impressionist in the winter. Would it be possible to include in impressionist a drag-and-drop capability as well as the ability to add new steps in between existing steps, like Strut has?
Yes to both, but I should
Yes to both, but I should caution that it's a free time project, so progress happens when it happens.
You should already be able to add new steps at any point, as well as reorder them. However, some other management related to steps is missing, such as ability to have different styles and change the style for each step. Now it just clones the style you're already on.
Then there is better handling of images (now it's just the very plain tinymce default), and that could ultimately include drag and drop support. But honestly, that sounds like a very fancy feature compared to what is currently on the todo list.
I actually did not get back to impressionist during the winter, because after this blog got written I was finally able to get an agreement to merge my impress.js work upstream and take over maintainer role for impress.js! I think that's good news, but also means I didn't do more work on Impressionist during 2017. There are still a couple issues to do in impress.js queue before I can try to release a 1.0 version.
Add new comment