In the Transition view (btw, we should rename that to »Overview«), there are some controls with camera icon and XYZ. It’s not apparent what they do and how to interact with them.

If they are not functional at the moment, we should hide them from the interface for the time being.

(On linux... )

snowdrop@snow:~/Strut$ rake compileCoffee[w] --trace
rake aborted!
undefined method []' for nil:NilClass /home/snowdrop/Strut/Rakefile:12 /usr/lib/ruby/vendor_ruby/rake/rake_module.rb:25:inload'
/usr/lib/ruby/vendor_ruby/rake/rake_module.rb:25:in load_rakefile' /usr/lib/ruby/vendor_ruby/rake/application.rb:501:inraw_load_rakefile'
/usr/lib/ruby/vendor_ruby/rake/application.rb:82:in load_rakefile' /usr/lib/ruby/vendor_ruby/rake/application.rb:133:instandard_exception_handling'
/usr/lib/ruby/vendor_ruby/rake/application.rb:81:in load_rakefile' /usr/lib/ruby/vendor_ruby/rake/application.rb:65:inrun'
/usr/lib/ruby/vendor_ruby/rake/application.rb:133:in standard_exception_handling' /usr/lib/ruby/vendor_ruby/rake/application.rb:63:inrun'
/usr/bin/rake:27

...using the latest stuff in this branch. Or am I doing something wicked here? Worked flawless some week ago...

see title

I cloned the repository, ln -s ~/strut/client/web/ to /var/www/strut, and go to localhost/strut – and only get a white screen, with some console errors:

GET http://localhost/strut/scripts/ui/editor/raster/TextBoxDrawer.js 404 (Not Found) in require.js:1791
Uncaught Error: Load timeout for modules: ui/editor/raster/TextBoxDrawer in require.js:1638

Any idea?

The bounding box should scale along with the contents.

PayPal or something else to enable people to buy you a cup of coffee (no pun intended). I think this project is amazing but info about is sparse, there are no milestones, and it has gotten too little exposure. I'm very happy you're using the agpl and hope more people will contribute eventually - this is by far the closest thing to Prezi the open source community has = P

It is very unclear that the Rot X, Y and Z values concern the slide that is currently selected, because they are in a toolbar that is way too far from the element it modifies.

Instead, the 3 values should be in proximity of the current slide. Much like the depth and scale elements they should only appear when needed, when the slide is clicked.

The »OK« button should be »Insert image« and the cancel button should be removed altogether since it is too easy to misclick and there is an »X« on the top right. (Also, it’s possible to exit the modal via just clicking outside.)

I’d do it but I need to prepare a talk right now and am not on my own machine. :) (hence also the bug reports that will flow in, since I use Strut.)

Apparently saving an exported Strut presentation and loading it into iBooks as a widget doesn't work. I haven't had a chance to test this myself.

While showing a presentation with many slides there should be some easy way for the user to go to an "overview" mode that shows all slides, for example something similar to the transitions view, from where it is easy to manually jump to a slide/position within the presentation.

If doing this graphically will be cluttered an easier way would be to present the playlist #44 to the user and let him/her choose where to jump to from there. (This does however mean it would be smooth to be able to name each slide as well so you don't have to remember just numbers and can instead properly identify them by name.)

Otherwise everything will be lost on accidental reload, or browser crash, or anything really.
remoteStorage.js will take care of that, but it will be a 1–2 weeks until version 0.7 is done, and if you have localStorage in already it’s simple to switch.

The transition editor should allow you to view your slide layout down the x, y, or z axis.

Take the SlideDrawer and extend it to render onto a texture. Draw that onto a plane geometry in WebGL.

We need some kind of grid with snapping for the layout of the individual slides– and probably even for the overview.

For the start I’d suggest a simple thirds-grid like this:

It should be a bit transparent and so unobtrusive that ideally there should not even be the need for an option to disable it.

CSS files aren't concatenated or minified during the build step.

At the moment, when you have a decently non-linear layout for your slides in the Overview/transition editor, it’s hard to make out the order of slides. The numbering is the only indicator.

2 thoughts:

1. absolute: have the slide order reflected in decreasing number label brightness (or similar), first slide is black, last one is white, all others are inbetween. Pseudocode for that:
   if(slides.length == 1) ordercolor = 0;
   else ordercolor = 255 / (slides.length - 1) * slide.index
   then style it with CSS rgb(ordercolor,ordercolor,ordercolor);
   The minus 1 on slide length is because the first slide should always be black, there has to be an exception for that, otherwise division by 0.

2. relative: when having a slide selected, highlight the previous and next slides (and maybe even those 2 slides away, just a bit lighter).

Ideally, the two should be combined. What do you think?

Is this on purpose?

When sending a pull request that changes CoffeeScript files, should I also git add the generated changed JS files?

see title

I have a pretty big test presentation. When I now want to Present, I get »414 Request-URI Too Large« and redirected to the following address:
http://tantaman.github.com/Strut/client/web/preview_export/index.html?preview=%3Cdiv%20class%3D%22fallback-message%22%3E%20%20%20%20%3Cp%3EYour%20browser%20%3Cb%3Edoesn%27t%20support%20the%20features%20required%3C/b%3E%20by%20impress.js%2C%20so%20you%20are%20presented%20with%20a%20simplified%20version%20of%20this%20presentation.%3C/p%3E%20%20%20%20%3Cp%3EFor%20the%20best%20experience%20please%20use%20the%20latest%20%3Cb%3EChrome%3C/b%3E%2C%20%3Cb%3ESafari%3C/b%3E%20or%20%3Cb%3EFirefox%3C/b%3E%20browser.%3C/p%3E%3C/div%3E%3Cdiv%20class%3D%22bg%22%20style%3D%22%22%3E%3Cdiv%20id%3D%22impress%22%3E%3Cdiv%20class%3D%22step%22%20data-x%3D%22192%22%20data-y%3D%22512%22%20%20%20%20%2
And so on …

Previously it worked fine, I didn’t add anything.

For reference, the presentation as JSON:
{"slides":[{"num":0,"components":[{"size":96,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":48.25867507886449,"y":158.59621451104104,"z":0,"type":"TextBox","text":"Coordinating usability","selected":false},{"size":96,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":168.34438936457872,"y":375.5866907015171,"z":0,"type":"TextBox","text":"Coordinating usability","selected":false},{"size":96,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":73.25867507886448,"y":158.59621451104104,"z":0,"type":"TextBox","text":"Coordinating usability","selected":false}],"selected":false,"active":false,"x":30,"y":80,"z":0,"impScale":1,"rotateX":0,"rotateY":0,"rotateZ":0},{"num":1,"components":[{"src":"http://unhosted.org/img/island-website.png","x":291.36617801694763,"y":48.48549514443005,"z":0,"type":"ImageModel","selected":false,"scale":2.4973692993442214,"imageType":"PNG","skewX":-0.8076167287241673,"rotate":0.08699359492258074},{"size":36,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":115.92534174553117,"y":153.57660666790377,"z":0,"type":"TextBox","text":"Coordinating usability","selected":false,"scale":0.37692807022966834},{"size":96,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":167.50729442685304,"y":248.0166578005763,"z":0,"type":"TextBox","text":"Coont/web/index.hrdinating usability","selected":true,"scale":0.3691646055023874,"rotate":-0.04443478930296452,"skewX":-0.22347660114063303}],"selected":false,"active":false,"x":190,"y":80,"z":0,"impScale":1,"rotateX":0,"rotateY":0,"rotateZ":0},{"num":2,"components":[{"src":"http://1.bp.blogspot.com/-HLrSfuMO5ms/Tu-fxv0_f-I/AAAAAAAAACc/nCKZxiwtojI/s1600/youtify_loves_flattr.png","x":282.8313984211117,"y":656.7732229499273,"z":0,"type":"ImageModel","selected":false,"scale":0.6537212984956453,"imageType":"PNG"},{"src":"http://gitorious.org/owncloud/owncloud/blobs/raw/master/core/img/logo-inverted.svg","x":491.9184934906888,"y":136.9455235472144,"z":0,"type":"ImageModel","selected":false,"scale":1.7963177907077217,"imageType":"SVG"},{"src":"http://upload.wikimedia.org/wikipedia/commons/6/64/Diaspora_logotype.svg","x":88.52654165799257,"y":556.7133741132757,"z":0,"type":"ImageModel","selected":false,"scale":2.1689389588995964,"imageType":"SVG"},{"src":"http://mediagoblin.org/images/logo/mediagoblin_dark_large.png","x":574.7949526813877,"y":559.5552050473179,"z":0,"type":"ImageModel","selected":false,"imageType":"PNG"},{"src":"http://unhosted.org/img/island-website.png","x":113.26813880126167,"y":79.85804416403778,"z":0,"type":"ImageModel","selected":false,"scale":1.6521589662528544,"imageType":"PNG"}],"selected":false,"active":false,"x":329,"y":192,"z":0,"impScale":5,"rotateX":0,"rotateY":-0.02,"rotateZ":-0.14854511563297368},{"num":3,"components":[{"src":"http://unhosted.org/img/island-website.png","x":113.26813880126167,"y":79.85804416403778,"z":0,"type":"ImageModel","selected":false,"scale":1.6521589662528544,"imageType":"PNG"}],"selected":false,"active":false,"x":488,"y":66,"z":0,"impScale":1,"rotateX":-0.14,"rotateY":0,"rotateZ":-0.19164849668667716},{"num":4,"components":[{"size":144,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":143.95583596214567,"y":240.96845425867505,"z":0,"type":"TextBox","text":"★ Freedom","selected":false},{"src":"http://mediagoblin.org/images/logo/mediagoblin_dark_large.png","x":599.7949526813877,"y":559.5552050473179,"z":0,"type":"ImageModel","selected":false,"imageType":"PNG"}],"selected":true,"active":true,"z":0,"impScale":1,"rotateX":0,"rotateY":0,"rotateZ":0,"x":645,"y":229},{"num":5,"components":[{"size":144,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":108.82649842271339,"y":242.17981072555187,"z":0,"type":"TextBox","text":"↯Innovation","selected":false,"align":"left"}],"selected":false,"active":false,"z":0,"impScale":1,"rotateX":0,"rotateY":0,"rotateZ":0,"x":830,"y":80},{"num":6,"components":[{"size":144,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":302.64353312302876,"y":247.02523659306038,"z":0,"type":"TextBox","text":"Humans","selected":false},{"size":144,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"","x":175.4511041009465,"y":247.02523659306019,"z":0,"type":"TextBox","text":"☃","selected":false}],"selected":false,"active":false,"z":0,"impScale":1,"rotateX":0,"rotateY":0,"rotateZ":0,"x":990,"y":240}],"activeSlide":{"num":4,"components":[{"size":144,"family":"'Lato', sans-serif","color":"grey","style":"","weight":"bold","x":143.95583596214567,"y":240.96845425867505,"z":0,"type":"TextBox","text":"★ Freedom","selected":false},{"src":"http://mediagoblin.org/images/logo/mediagoblin_dark_large.png","x":599.7949526813877,"y":559.5552050473179,"z":0,"type":"ImageModel","selected":false,"imageType":"PNG"}],"selected":true,"active":true,"z":0,"impScale":1,"rotateX":0,"rotateY":0,"rotateZ":0,"x":645,"y":229},"fileName":"usability"}

I’d say even though Impress.js is capable of so much more, in the beginning the focus should be on parity with a slide-based presentation editor.

I also talked with other people about creating presentations, one of the big points where Keynote is better than Powerpoint seem to be the great default templates.

Slides aren't correctly scaled in the editor view so the placement of objects in the slide editor isn't exactly where they end up in the final slideshow.

While editing it is possible to use the characters åäö ÅÄÖ, but when displaying the presentation they do not appear. Question marks appear In their stead.

The ability to change the backround settings between slides, so different slides can have different backgrounds.

Even though I saw the function before, I completely forgot that Strut can do copy & paste (which is super nice!)
The problem was that I tried Ctrl+C and Ctrl+V, but it didn’t work.

Probably the Keymaster library (JS, no dependencies) would be good to include for that & more.

First: I love how there is a defined set of font sizes, and no free input.

Because that’s what the scaling control is for. The problem is that the font size is relative to the bounding box, not absolute to the slide.

Similarly, sometimes there is an inadvertent line break, even when there are only 3 words. Seems like a glitch.

The bounding box should play no role for limiting the width of the text, breaks should need to be set manually. Also, scaling the box should change the font size accordingly (change it in the font size box to the value) – that way, it is possible to set custom font sizes. When you have a text box with custom font size, that extra font size should be displayed in the text size dropdown also. And a bit related: In the font size dropdown, the sizes used in this presentation should be highlighted a bit for reference.

Lots of ideas, what do you think?

Inserted SVG images are displayed at the size they were created at. Since it is a scalable vector format, normally you can scale the files as big as you want. Strut however seems to handle them much like raster graphics, where scaling the image up makes the pixels apparent & blurs.

Instead, SVGs should be fully scalable.

There are some seemingly erroneous entries in the open & save as dialogs:
settingsDaemon, sIntDaemon, iIntDaemon, versionDaemon (»usability« is my presentation)

Inserting a base-64 encoded image throws an exception: "Cannot call method 'toUpperCase' of undefined"

I tried to use some unicode characters in my slides. They show up in the presentation editor but not in the preview. A black star for instance, normally ★, just shows up as %u2605.

Similarly, å ä ö etc do not work, instead showing question marks (thanks @eyerouge for the note).

Let's play with the thought that I give plenty of lectures and will have around 100 different presentations, and also give them o places where there is no internet at times (all of which happens to be true):

1. Will there be an easy way to organize presentations into groups/dirs and/or with tags?
2. Where is the data for a presentation saved, and can it be saved in such a way that all images for it are in the same dir?

When you put in a link which does not lead to an image (for instance when you mistyped) it is still possible to add the image. That results in the image being the broken-image icon.

Instead, the »OK« button should be disabled and there should be a notice like »There was no image found at that address. Please check that the link is correct.«

Formatting text always formats the whole text block. It is thus not possible to have a headline which is half bold and half regular. As a workaround you have to create two text blocks and align them manually, which takes work and can look stupid.

Instead, it should be possible to select part of the text in a block and format only that. The other text should retain the format.

Currently the order of the slides is chronological. That is nice and all, but prohibits the smooth recycling of slides already shown and which you want to show again as a natural part of your presentation.

As it is now you show slide, 1, 2, 3, 4 and 5, in that order. If you want to then show slide 2 again after 5 you have to "rewind" and show all the steps inbetween OR you have to copy slide 2 and then add it as a fake "slide 6". The first solution is bad and confuses the audience and takes time. The second is bad because it adds too much (?) extra needless data and more importantly it makes it harder to get an overview of the slides and order in the editor since it adds more to it.

What I suggest is a simple "playlist" where you can specify slide number and slide order. So.... to solve the above example it would look someting like: 1.1, 2.2, 3.3, 4.4, 5.5, 6.2. When pressing space it will continue to 7.x and so on...

(Playlist relations could then be shown in Transitions editor mode, like a ribbon or whatever going inbetween the slides.)

Ability to:

• rotate objects (for example text)
• fade in / out objects
• change colour of text
• rotate slide

....without transitioning to the next slide.

As it stands now it isn't possible to do this in any way except by copy & pasting to another slide and then moving to that slide, which in my opinion is making the audience have to move around too much just because you wanted to highlite a piece of text or remove another on one and the same slide.

How this all works: Each slide has a local "playlist" of stuff that will happen whenever the user presses the transition button (space, mouse, whatever). So if there are commands on that list they will all be executed in order (and some at the same time, for example fading out two objects at the same time). When the playlist is at it's end then pressing the transition button will just take you to the next slide, as usual. Slides that have no local playlists will of course do nothing and work as they do just now.

(In impress (libre office) these are called custom animations or something, and while 90% of them are useless the few that aren't so are really usable. )

Also, add shim configs for all vendor libraries and include them in the build & minification process.

When running Strut locally on Linux the first time during one and the same "session" I get a very short glimpse of a warning message, displayed in the top center of the screen in yellow, where it says my browser doesn't support all of the functionalities of impress.js. That might be correct, however, it does so in every browser I have tried and I currently use latest Chrome (Version 20.0.1132.47) for my platform...

Is the message correct and no Linux browser fully supported, or is the message actually just being "revealed" briefly even though it's not supposed to?

remoteStorage.js is a client-side library to add remoteStorage support to your client-side app. There is a tutorial for example usage and more info in the readme of the repository.

Basically, remoteStorage is an open standard to seperate web apps from per-user data storage – whereas at the moment, most web apps are an app+storage package deal. Check the website of the unhosted movement for more info, and feel free to join our chat room if you have questions.

I am going to use Strut for a conference session and what to provide visitors with a link on slides. Is there any way to export presentation to html?

While running Strut locally (built on Linux) it doesn't display the images in the presentation in cases where they are local/use local paths. While editing they do display fine however, they just disappear when showing the presentation.

Am I missing out on something here, or should they be given in a specific syntax? From my testing at least 2-3 different ways seem to properly display them while in edit-mode.

When I paste an image link into the image insert modal input field and then press enter, nothing happens.

Instead, pressing enter should trigger the »OK« button, thus making the modal disappear and inserting the image.

When you want to demo something inside of the presentation, it would be super helpful to be able to iFrame an external website. Then, instead of exiting the presentation and exposing the audience to you fiddling with your computer, you could just demo the app right there.

see title

If I add an image to a presentation, and after that want to add another image, the modal will still be filled with the information from the first image.

Instead, the form should reset.

There should be generic simple font stacks for each serif and sans-serif to choose. I’d suggest:

font-family: "Helvetica Neue", Helvetica, FreeSans, Arial, sans-serif;
and
font-family: Cambria, Georgia, serif;

Also, for monospace:
Monaco, Ubuntu Mono, Menlo, Consolas, monospace;
and for geometric:
Futura, "Trebuchet MS", Arial, sans-serif;
And for Didot/Bodoni-like:
"Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

Most of these are from the super nice article revised font stacks. Important is that it’s mainly focused on those which make sense for big headline text, we should not add typefaces which are specifically for long body text.

When you add a text field, you have to click, and click again, and sometimes click again to start typing.

Instead, the text field should be focused to be able to start typing directly after you click the text field adding button. The end goal is to type the text, and there should be as little friction as possible towards that.

(I differentiate this from issue #39 where self-containable is discussed, but they needn't be different issues at all, depending on solution)

The users need a simple way to export a presentation as a casual website. The end result would be a dir with index.html inside of it, plus everything like css, images, fonts etc as well. Using the presentation as a site is then only a matter of uploading the dir to a webhost.

Now that there is no more server folder, could all the contents of »client« be moved into the main directory? Also, is the »test« folder needed?

when i compiled the templates "rake compileTpls", in the stout watch:
Processing: /home/xxx/Downloads/presentaciones/Strut/client/src/ui/editor/res/templates
/home/xxx/Downloads/presentaciones/Strut/client/web/scripts/ui/editor/res/templates/../../Templates.js
rake aborted!
No such file or directory - /home/xxx/Downloads/presentaciones/Strut/client/web/scripts/ui/editor/res/templates/../../Templates.js
when i execute " grep -R "Templates.js" . ", in Slut/client directory say:
./Rakefile-dust:# -place them into Templates.js as:
./Rakefile-dust:# -place Templates.js into the plugin's
./Rakefile-dust: puts "#{dirname}/../../Templates.js"
./Rakefile-dust: File.open("#{dirname}/../../Templates.js", 'w') {|f|
./Rakefile: puts "#{destination}/../../Templates.js"
./Rakefile: File.open("#{destination}/../../Templates.js", 'w') {|f|
but the "templates" directory don't exist in
...Strut/client/web/scripts/ui/editor/res/
...Strut/client/web/scripts/ui/impress_renderer/res/
...Strut/client/web/scripts/ui/widgets/res/
and is required in the compilation because for example "puts "#{destination}/../../Templates.js" , require these directories

If I add some text (and don’t type anything) and then click the Text button another time, a second field with the content »Text« will be added and exactly overlay the existing one, making it seem like there was no change.

For cases like when you want to add some textfields before starting to type, every additional text field should be placed a bit shifted to the bottom and a bit to the right.

SVG images generally don't draw inside the slide preview windows. Sometimes they do show up, however.