Authoring tool discussion

[iangilman]

I love it!

Perhaps out of the scope of this library, but I figured I'd file it here nonetheless: in order for this to be useful for more than a few people, you need some sort of authoring tool for these kinds of presentations, such as what Prezi has, or my own Infinite Canvas tool from several years ago:

http://infinitecanvas.jgate.de/create?name=Brad%27s%20Somber%20Mood

Any plans to do something like that, or are you leaving it to the community?

[nicowilliams]

The S9 impress.js template is perfect. You get to use markdown, so any $EDITOR will do. I tried using wkhtmltopdf to export to PDF but the result is lame (e.g., directives for canvas positioning are displayed).

On iOS there's Mimpress, which looks like basically S9 with the impress.js template, a webkit browser, a simple text editor, and a simple tool for selecting translations, rotations, ... per-slide. The nice thing about Mimpress is that, well, tablets. The idea is nice enough that equivalents for Android should be possible (if not already there) and that would be nice because, well, tablets. Being able to author on a tablet is key. Strut and Impressionist didn't work very well for me on my ipad, so for now for me it's S9 + impress.js, and on the ipad: Mimpress (on the theory that the two approaches are mostly compatible).

@volca: some issues with Mimpress: there's no way to manage svg files, and image file mgmt is a bit wonky, as is the CSS style mgmt (I can't share it easily, which I need to do if I'm going to use S9 on my desktop and mimpress on my ipad). There's no nice share with e-mail or whatever, just copy to clipboard (which, ok, is not terrible, but still). Also, Mimpress isn't rendering lists properly... It crashes when displaying the whole canvas if the presentation uses your svg file.

Also, there's no export function in Mimpress. An export to HTML option would be nice, and obviously shouldn't be too hard (given that you are probably already using S9), but as long as I can send the markdown to my desktop I can pass it to slideshow there (I've not tried it though, and I worry that there might be incompatibilities). An export to PDF would be lovely, but since you'd likely need an HTML->PDF renderer, and I bet there's none good enough for this (but I've not searched far and wide enough).

Thanks to @bartaz for this incredible tool (impress.js)! I love it!

[arthurzaczek]

Hi!

Great tool! Thank you.

I've a lot of Powerpoint slides and so i've created a small powershell script to migrate them to impress.js. It's a starting point, it will not be a full featured converter. But it saves your text :-)

https://github.com/arthurzaczek/Impress-Extract-Powerpoint

Regards, Arthur

[tantaman]

@arthurzaczek dude that is pretty cool... Do you mind if I add that as a way to import Powerpoint presentations to Strut?

[arthurzaczek]

Hi! Thanks for feedback. It's GPL licensed. I don't know if it's GNU Affero General Public License compatible, but feel free to use it - I don't believe that there is so much "innovation" to worry about a license ;-)

[aliva]

a dokuwiki plugin:

https://www.dokuwiki.org/plugin:impressjs

[giokokos]

Hi there,

firstly, thank you Bartaz for this impressive framework! I started creating my own visual editor for impress.js and ended up customizing and extending the builder4impress by @naugtur who has done a really great work.

I liked how this tool handles the slides so I decided to add more features in it. It's still in under heavy development (this means quite a few bugs and messy code) and regarding the fact that I am not an expert in Javascript maybe some of you are interested in that and you would like to contribute.

The main goal of this tool is to be a tool for the ASQ project. (more details on About page)

Take a look at the editor and please be indulgent. :)

[naugtur]

@giokokos, feel free to submit a pull request or contact me directly if you want to cooperate in any way. I slowed down my work on the editor mostly because there was no demand anymore and Strut got so popular. I still want to work on a fully-wysiwyg editor and I have some plans regarding going 3D. It's just not a high-priority project for me.

[valkirilov]

Last year I saw impress.js library and I was amazed. A few months later I decided to make an authoring tool and now I am ready to show it, because I have to know what is the opinion of the users and should I continue to develop it.

It's completely free and is available on www.jspres.com. The module for creating presentations is JavaScript based, but the project contains server side which stores the users presentations and they can access them from every computer.

There are two presentations made with JSpres. The first one is just promo of the project, and the second is the presentation which imagined the project on the National IT olimpics in my country (this is the reason that is not in english, but you have to see the transitions :P)

http://jspres.com/presentation/present/p:3 http://jspres.com/presentation/present/p:31

So if anyone want to see and try it but have some troubles I wrote a simple guide that will help you to understand the basics and can be found here: http://blog.jspres.com/2013/03/getting-started/

So I will put some screens to provoke a little curiosity in you to see the project. I would be grateful to hear your feedback, advice, criticism and I hope to help someone with what I've done.

[ghost]

Hi, after a colleague told me about impress.js I catched fire for this tool - so thank you in the first place. I was and am still looking for an authoring tool or a helper to put the data in. I read of many interesting aproaches and I do understand, that it is not very easy do design such a gui.

to @valkirilov and the others who consindering to test the software JSpres: First impression looks good. BUT reconsinder, that HTML and CSS is there for a reason to seperate style from content. And that is one of the basic principles of impres.js! I know it seams easier to put it all together and hey the computer parses it anyway. BUT that's why the other presentation tool did mess up in the first place.

Me for myself and I think many of the impress.js-users do not look for just another powerpoint like tool with astonishing 3D anmiation and better concepts - that would be keynote in my opinion. We are looking for a presentation-tool that is able to deliver content in a new way and with the right basic asumptions - so keept the content clearly seperated from code and do not repeat every style for every lable - if you still wondering what I am talking about a short glimpse in the JSON export from JSpres:

<div style=\"text-align: center;\"><b style=\"font-size: 64pt; font-family: Tahoma; line-height: 72pt;\">agile manifesto</b></div>","fontFamily":"

[perrybutler]

I would like to refer my recent comment from https://github.com/bartaz/impress.js/issues/88 to this thread for discussion. Thanks!

[andreamoro1]

Hi, I found it hard to prepare slides and then edit them one by one to position them on the canvas. Typical scenario: I changed the size of a title tag in the first slide, which made it necessary to move up or down all following slides, or slides related.

This process is somewhat simplified using existing impress.js "editors", but I found they mess up the html with un-needed tags.

Therefore, I created a simple php script that modifies the impress.js attributes with a simple command. I was wondering if this can be shared, and if so where would be a nice place to put it. Ideally, it could be translated into a browser extension, but I don't know js enough. I would be happy to contribute if anyone started up a project. In the meanwhile I am happy to share my script, if there is any interest. Any suggestion on where/how appreciated

Here are typical usages, to give you an idea of what the script accomplishes.

Examples php impressmod.php --f input.html list available slides and their id, if present php impressmod.php --f input.html --steps 3-5 --x -20 --y =200 decrease data-x by 20 and set data-y to 200 on slides 3,4,5 of input.html and overwrite the file php impressmod.php --f input.html --output output.html --steps 2,3,8-9 --x d20 --fm increase the data-x gap between slides 2 and 3, 3 and 8, and
8 and 9 by 20. Slides 2 remains unchanged. Data-x will be set wherever missing php impressmod.php --f input.html --steps 5-2,overview,8 process slides in the following order: 5,4,3,2,[id=overview],5,4

[Hufnagels]

Hi, out there are plenty of editors :) but, I had a small project concept, and I tried to create a small code snippet for a basic editing feature.

When someone is interested in it: https://github.com/Hufnagels/impressEditor

it's working on desktop as well on touch device.

(only one issue, that can't solve is use it or only impress.js in iframe on touch device like ipad with ios7. Browser crash every time)

[szaghi]

Yet another editor supporting impress.js, but designed for scientific contents:

https://github.com/szaghi/MaTiSSe

[MattNewbill]

Is it possible to embed a presentation inside a static html page?

[perrybutler]

http://www.choiceschances.com is using impress.js with a fully custom WYSIWYG authoring tool. I've attributed the library to Bartaz on the About page. We really like impress.js!

MattNewbill: Yes it is. You'll need a modern web browser with Javascript to run it nicely.

[MattNewbill]

I am having problems with the overflow eating up the rest of the page. Is there an example somewhere or do you have any advice on how to embed it?

[dcsan]

@perrybutler I like the potential of your authoring tool - more for stories than slideshows, seems like it could become cool.. is it possible to add links etc through the UI yet?

[perrybutler]

@dcsan I really wanted to implement hyperlinks and images sooner, but we couldn't make it happen within our grant budget, so I'll be working on it in my spare time. In fact, C&C supports any arbitrary HTML for the scenarios (we have a sample story that actually loads a Prezi INTO a C&C slide/scenario), it's just that we haven't provided the tools yet to do it from the front end. It can only be done thru CSV right now, which is a transitional format we've decided to use for loading in sample stories before implementing a relational database which might not even be necessary.

I'm definitely going to be adding those features though, as this is an app I want to use myself. I truly believe that if we are aiming to get more users on-board, we will need to add the features which are typical to most slideshow building apps in order to make it all around more useful for more types of people. As of right now, you can link slides (scenarios) together without writing any code by adding buttons to scenarios and editing those buttons to point them to other scenarios. You can also edit the title and body text, but again this is just plain text and I'm looking forward to including more components, templates and formatting options in the future.

If you load the sample story "Example 7.1" it offers a good representation of our initial direction - laying out the story in a flow tree with ability to link new scenarios or edit existing ones on the fly, or switch to reading mode on the fly. There is no compile time, the edit and reading modes are unified, what you edit/read is what everyone gets. :)

Another bonus is that Choices & Chances works offline, saving drafts/changes regularly when a connection is available, similar to Google Docs. I engineered most of these things before I had a chance to learn Meteor/Angular/React/etc, and before Prezi announced their HTML5 version (I saw them hiring for an HTML5 guy so I knew it was coming). The freedom of not using a library was rewarding. The challenge comes with having to do nearly everything in Javascript, since we try to maintain roughly 90% functionality while offline and can't rely on the server for most things.

I've taken inspiration from software of which I enjoyed the UI/UX, such as the File, View, Edit menus similar to Windows/Mac, the ability to re-arrange these menus (they used to be panels that you can keep open like in Photoshop, but we've simplified it for the time being), a Properties panel for the selected object with ability to edit many of its properties similar to Photoshop or 3D Max, multiple display options for accessibility or preference similar to Windows, flat-UI similar to modern trends, OAuth2 for login, a general full-screen "video game" or "couch" or "conference room" approach, etc...

Thanks for your interest, it's not often that I get to share this kind of detailed information since the stuff I do is fairly obscure.

[dcsan]

hi @perrybutler thanks for the detailed reply. i'm sure you've seen http://twinery.org/ and the visual editor i really like how the non-linear editor figures out the links from wiki-like (GFM) content, and visualizes the story flow

from just this:

they map this

if you implemented server in meteor you'd get JSON datastore pretty trivially which is probably a better format than your CSV. as well as instant synced updates for anyone else watching, FB login etc.

we had a discussion about creating impress type animations with Famous on the meteor-talk list which is another approach.

is there a repo for your app anywhere? i'm interested to discuss more but its maybe a bit OT here? my email is in my profile. I'm actually working on something similar.

[perrybutler]

@dcsan I've actually never seen Twinery. Makes me wonder if it was around during the time I had been researching Prezi-like web apps. It looks pretty much like what we're doing with C&C. The best I could find at the time was MindMeister, Prezi, Sozi, and the various impress.js authoring tools in the discussions here on Github. JSpres is gone, I liked that one. While Strut delivers a UX reminiscent of PowerPoint, it just doesn't innovate.

Anyway, the C&C repo is privately hosted at BitBucket, but we may move it over to Github for open contribution. Discussion is valuable to the project, so I went ahead and created the Github repo here as a starting point. Discuss all you want!

In your first screenshot showing how Twinery maps text, that's essentially what our CSV achieves. The CSV format is what allowed our non-technical team member(s) to produce stories in a text editor before the app was ever functional. They would have had a difficult time writing stories in raw JSON, so a rudimentary story format was one of the first things we designed. Our CSV could use some refinement to bring it more in line with a Wiki-like syntax. We haven't revisited the syntax yet, but it's on the list. It was planned to dump the CSV files altogether once we built the authoring tools into the front end.

Real-time story collaboration was another thing that was in the plan, but didn't make the cut. Meteor is cool, I like what they're going for. I've recently taken on a massive overview of Meteor-like frameworks which has yielded a lot of insights and new ideas. I'd like to finish and implement Rapid.js into C&C, and while it does work for the other "top secret" project I'm developing around it, it's still a work in progress so Meteor isn't totally out of the question. Rapid.js lets you declare and use components as well as JSON data straight in your HTML template e.g.:

[each {Games}]<div>{Title}</div>[/each]

...would output a list of Game titles. I'm still experimenting with it too.

You might find it interesting (or scary) to know how much under the hood is first-class, custom functionality. The flowtree algorithm was developed from scratch, it's not a Rhinegold-Tilford or something you would find in D3.js. Still a few kinks to iron out with it though. No jquery-ui for the drag-drop since I wanted the edit/view modes unified with 3D editing capability and realistic positioning of the scenarios. We're using this OAuth2 component for social login, also developed by yours truly, so we have Login with Google/Facebook/etc.

Hope to hear from you at the Github repo.

[ilagokarn]

We tried to take a different spin on Impress and created the Impressify editor as a component to an e-learning platform. We used Impressionist (beta) by @harish-io as a starting point. We threw in features like timer constraints for each slide, pop quizzes and MS Powerpoint upload as images after some back-end processing. Our clients love it! Thanks for the amazing library @bartaz :)

Here's a screenshot

Would love to hear comments and suggestions :)

[Toub]

Here is a suggestion about how to accept new contributers.

First ask volunteers to review existing pull requests and comment them. Then, review some of the reviews...

Finally, you can integrate a few first contributers (who submitted good quality PR or good review).

Thanks for opening the governance of this project!

[dalareo]

Have you noticed about this?? https://github.com/regebro/hovercraft It seems quite interesting!!

[FagnerMartinsBrack]

Dude I would love so much an editor like medium, using the presentation itself as the editor tool with contenteditable or something like that. I am up to try something MIT licensed in the future if there's enough folks to backup (and if impress.js get on its tracks as a robust OSS API xD).

[szaghi]

Hi all, I see the wiki page listing some authoring tools. I would like to add MaTiSSe to the list, it being a mature authoring tool tailored for scientific contents (replacing LaTeX beamer introducing all the fancy of impress.js within the simplicity of markdown). Is it posdible to add it to the list?

[FagnerMartinsBrack]

X-Ref #362.

There the OP says it is hard having to manually edit the step attributes, so it was proposed a tool that does that automatically. This is totally something that an authoring tool should provide.

[henrikingo]

Hi all

Just a few notes on recent progress on this very old thread.

In a separate repo from impress.js, I have also created a new editor Impressionist. It's still a work in progress, but you can at least create slides, position them in 3D and save the presentation (barely). I intend to move this into the impress project once I finish cleaning up the state of impress.js itself.

Many editors presented here seem to be web applications that run on a server and you need to use them over the internet. Impressionist otoh is based on Electron, so you install and run it as a desktop app, and it saves files on your desktop as well. There's a video demo in the README if you want to see more.

(To clarify: There's no relation to the other Impressionist editor that is mentioned in this thread. It seems to no longer be actively developed, and URL stopped working?)

Btw, as a reminder in case someone didn't realize it yet, the wiki has a list of impress.js editors

I also wanted to mention some other new features in impress.js itself, that make authoring presentations easier:

• You can now use relative positioning on steps. (Similar to e.g. Hovercraft, but now directly in HTML.)
• You can use Markdown to write the slide contents (again, directly in the html file itself. Markdown.js is used to transform it to HTML).
• For scientific use, you might be interested in the Mathjax.js integration that allows to use Latex, Asciimath and MathML in impress.js presentations.