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?

[bartaz]

impress.js just started as an experiment and my personal tool for creating presentations and I really wasn't expecting all the buzz around it. So at this point it's kind of authors responsibility to build the presentation content and styles in HTML+CSS.

Anyway, it's very true that it's a little bit painful and requires quite a lot of time to create such a presentation now. Regular web development tools such as Web Inspector in Chrome (or Firebug in Firefox) are helpful but it's hard to call it 'editor'.
And it is true that more and more people are asking for edit tool.

My answer at this point would be that I understand the need - even myself, as I'm probably the one that is using it the most right now ;) but I don't really have plans (not enough free time) to build such a tool.

[greenido]

+1 to iangilman.
I'll try to find some time to do something in this area :) It sounds like a good idea that will let many more people enjoy this cool js lib.

[iangilman]

@greenido awesome! I'd love to see what you come up with, and I may be interested in helping out (if I can find the time).

[creatorrr]

@greenido You can count me in too!
Let me know if you are serious and need a hand (with coding, testing, documentation, whatever.)

Cheers!
This is me @creatorrr !

[EdwardHinkle]

Hi guys, if you could keep me in the loop with what you are all doing, I will most likely be starting down the path of creating an authoring tool as well. People in my agency have been wanting to start using Prezi this year, but with flash and such we have a lot of restrictions. Impress.js is exactly what they needed, but none of them are coders, so I'll be working on an authoring tool for them.

I'd be happy to collaborate with any of you that are interested.

[edumerco]

Does Inkscape.org could work?
It is aldeady being used in Sozi (http://sozi.baierouge.fr/wiki/en:welcome).

Congratulations for Impress, great work. :)

e

[creatorrr]

@eddiehinkle It'd be great! Could you ask others as well?
Let's put together a framework and start working.

@bartaz Any ideas? Plans for any API?

I'm in, by the way. :-)

[iangilman]

@edumerco I think ideally the creation tool would itself be a web app, rather than a native app like Inkscape.

Thanks for the link to Sozi, though… great to see so many people exploring zooming presentations!

[edumerco]

Hi.

@edumerco I think ideally the creation tool would itself be a web app,
rather than a native app like Inkscape.

That is a great idea for sure, but don't underestimate the weight of
offline options...

Thanks for the link to Sozi, though… great to see so many people
exploring zooming presentations!

Personally, I do those since years in a very manual way: vector based pdf
with manual zooming. :-)

Best regards...

e

[laubsauger]

Hi there,

I just found this neat little experiment yesterday and started to think about something like impress.js.studio on instant.
Since this would make this lib useful to people who have little to no javascript/html/css knowledge but still want to build 3D Zoom Presentations.

And since this is already aimed at browsers that implement modern html5 techs, you can provide those offline options with ease while working with a webapp ( http://slides.html5rocks.com/#app-cache )

Just forked and started to work out a concept in my head

[bartaz]

Hey guys. That's great that you have such enthusiasm to build authoring tool.

Just few things to keep in mind.

First of all, impress.js is just a library that takes handles positioning and transitions between the slides. The markup is just HTML (with some predefined structure) and the styles are pure CSS, they are not connected to impress.js in any way. As I see it now, everyone who uses impress.js just copies style.css from demo. It shouldn't happen, CSS should be prepared for a presentation to suit the content. So it will be a great challenge to create authoring tool that will handle creation of HTML content and custom CSS styling.

Second thing. It's a very early release. It doesn't have any number, but it's like 0.1 alpha codename "not finished yet", you know ;) I don't know if it will happen, but there may be some significant changes (for example to HTML structure), and probably some public JavaScript API will be available at some point (to allow triggering transitions to chosen slides).
Keep that in mind, please, and watch for the changes in repo.
I will probably start giving some version numbers soon, so you will know with which version you are working, etc.

Keep me posted if there is anything you need in terms of understanding how impress.js works or in terms of stuff you'd need in API.

[laubsauger]

Hi Bartaz,

that is exactly what i expected. I will focus on positioning for now since those attributes can't change to much i guess.

For positioning:
I'm thinking of some type of grid where you can snap those slides in the 3D space plus a rotation/skewing system similar to most 3d modelling applications - working with arrows that can be dragged on the respective axis.

And yup, version numbers would help :)

[bartaz]

So it seems quite close to my "vision" of edit tool for impress.js, nice :)

You will probably need some API method to move the "camera", right now it only automatically positions itself to show specific presentation step in the center of the screen with correct scale.

[laubsauger]

A camera method would be needed thats true.

But it will also be just awesome.
I imagine roaming through the space (and time) continium that embraces your presentation: picking stuff, dropping it somewhere else, one click will get you in edit mode for a respective slide letting you edit contents and stylings inline - prezi will be so 2011 :)

[greenido]

Very cool guys!
I'm now traveling for the next 2-3 weeks but after that - I hope to kickstart this project :)

[bartaz]

I'm closing this issue, as it doesn't affect my codebase at this moment.

But feel free to use it as a forum for authoring discussion ;)

[laubsauger]

I've made the first steps towards this. It is more or less a clumsy interface sketch - no real functionality besides crappy html source export. I will mainly wait for one or another api goodie to emerge but feel free to get motivated or inspired :D

http://laubsauger.github.com/studio.html

[creatorrr]

@laubsauger Impressive work!
Though, you are right about the API bit. As @bartaz said earlier - this is sort of an alpha release as of now and we should rather wait for an API to come through.

+1 for the great job anyway! :)

[naugtur]

Hi. I just found this thread and it looks like I have a different idea about editing impress.js presentations.
IMHO the most important problem is setting x, y, rotate and scale in html and refreshing it all the time. It would be better to do it in a WYSIWYG manner..

I hacked a quick a proof of concept in a fork of mine. See https://github.com/naugtur/impress.js
You can take a look over here: http://naugtur.github.com/ (but it's not staying there forever)

[laubsauger]

Yup thats nice.
With a little doodad to drag on for rotation, moving etc. this will do it :)
I got the GUI sketch ready for that and will implement it asap if i have time on my hands

[bartaz]

Guys,

I created new issue about impress.js API for authoring #88. If you have any suggestions about what may be useful to have there, please join the discussion there.

[bartaz]

Let's keep it open to encourage discussion.

[bartaz]

You may like this:
http://hsivaram.com/tech/2012/03/15/preview-impressionist-a-visual-editor-for-impress-js/

[laubsauger]

Oh boy! That is freakin' awesone. The interface looks really promising despite a few hicks here and there.
The adobe guy did a bunch of nice work there :D

I'm so glad that i could not free up time to work further on the Editor idea since this would've blasted it

[naugtur]

Ok, this encouraged me to finally fix up and push the first prototype of my idea of WYSIWYG interaction. You can take a look, it's there: https://github.com/naugtur/builder4impress

I recommend trying it on the overview slide (start with pressing the left arrow) ;)
It just works, drag the letters M[move] R[rotate] S[scale]
It should still be uncomfortable to use, but that's life :)

[bartaz]

I'm too lazy to pull and check ;)

@naugtur Can you host it somewhere? Creating a gh-pages branch should be enough for a static demo.

[naugtur]

Ok, it deployed.

Usage tip: Hover a slide, a control shows, M just drags, dragging R horizontally rotates, dragging S vertically scales.

I dropped it here: http://naugtur.github.com/#/overview

The overview is linked on purpose - moving elements works properly in overview and doesn't scale back on slides, but I already know how to fix that

[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 #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.