New impress.js features 2017

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.

2D navigation

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

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!

LaTeX notation

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.

impress().tear()

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:


impress().tear()

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.

Gil (not verified)

Sun, 2017-12-24 15:51

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

The content of this field is kept private and will not be shown publicly. Cookie & Privacy Policy
  • No HTML tags allowed.
  • External and mailto links in content links have an icon.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
About the bookAbout this siteAcademicAccordAmazonBeginnersBooksBuildBotBusiness modelsbzrCassandraCloudcloud computingclsCommunitycommunityleadershipsummitConsistencycoodiaryCopyrightCreative CommonscssDatabasesdataminingDatastaxDevOpsDistributed ConsensusDrizzleDrupalEconomyelectronEthicsEurovisionFacebookFrosconFunnyGaleraGISgithubGnomeGovernanceHandlerSocketHigh AvailabilityimpressionistimpressjsInkscapeInternetJavaScriptjsonKDEKubuntuLicensingLinuxMaidanMaker cultureMariaDBmarkdownMEAN stackMepSQLMicrosoftMobileMongoDBMontyProgramMusicMySQLMySQL ClusterNerdsNodeNoSQLodbaOpen ContentOpen SourceOpenSQLCampOracleOSConPAMPPatentsPerconaperformancePersonalPhilosophyPHPPiratesPlanetDrupalPoliticsPostgreSQLPresalespresentationsPress releasesProgrammingRed HatReplicationSeveralninesSillySkySQLSolonStartupsSunSybaseSymbiansysbenchtalksTechnicalTechnologyThe making ofTransactionsTungstenTwitterUbuntuvolcanoWeb2.0WikipediaWork from HomexmlYouTube

Search

Recent blog posts

Recent comments