Strut - An Impress.js and Bespoke.js Presentation Editor

Related tags

Sliders Strut
Overview

All new development is happening in Strut2

Strut2 is currently private until we further solidify our "open source dividened program."

Open Source Divdened is the idea that contributors to an open source project will earn revenue based on the overall usage of their contribution, relative to other contributors, in paid products.

In Strut's case specifically, we're launching a subscription service based on Strut and would like to pay our open source contributors.

Obviously there is a lot to figure out here, such as how "valuable" a contribution is and how does the "value" get dispersed as other developers make bugfixes and alterations to the original contribution. Given that, Strut2 is private until we figure out these details. Contact me if you'd like to know more.

Strut

Facelift

A GUI / Authoring Tool for ImpressJS and Bespoke.js

Don't know what ImpressJS is? Check out the ImpressJS demo presentation: http://bartaz.github.com/impress.js/#/bored

Start using Strut! http://tantaman.github.io/Strut/dist/

(works in Firefox, Chrome and Safari with basic support for IE10)

Learn a bit about Strut

Twitter: @StrutPresents

Mailing List

[email protected]

Development/Building

To build your own version of Strut you'll need Grunt v0.4.0 or later.

  1. Install the latest Grunt: npm install -g grunt-cli
  2. Clone Strut: git clone git://github.com/tantaman/Strut.git
  3. cd Strut
  4. Install Strut's development dependencies: npm install
  5. Run Strut: grunt server (the server runs at localhost:9000)

To make a production build of Strut run grunt build. The resulting build will be located in Strut/dist.

RELEASE NOTES

v0.5.3 - Positioning and transformations of components in edit mode now exactly match the positioning and transformations of components in the final presentation.

Contributing

Strut is composed of several bundles which provide distinct features to Strut. The set of bundles that compose Strut are defined in https://github.com/tantaman/Strut/blob/master/app/scripts/features.js

This design allows features to be added and removed from Strut just by adding or removing bundles from the list in features.js. E.g., if you wanted a build of Strut without RemoteStorage you can just remove the RemoteStorage bundle from features.js. If you didn't want any slide components for some reason then you can remove strut/slide_components/main from features.js.

Bundles contribute functionality to Strut by registering that functionality with the ServiceRegistry. You can take a look at the RemoteStorage bundle for an example: https://github.com/tantaman/Strut/blob/master/app/bundles/common/tantaman.web.remote_storage/main.js

If a service is missing Strut continues to run without the functionality provided by that service.

New development that isn't essential to the core of Strut should follow this pattern in order to keep the code modular and allow the removal of features that don't pan out or can only exist in specific environments. For example, RemoteStorage can't be loaded if Strut is being served from a file:// url.

The ServiceRegistry also allows for runtime modularity. I.e., services can be added and removed at runtime and Strut will update to reflect the current set of features & services that are isntalled. Try to keep in mind the fact that services won't necessarily be present or if they are present they might go away. This approach allows the user to add and remove plugins from 3rd parties at runtime.

Acknowledgements

Comments
  • use remoteStorage.js to enable people to save & sync their presentations

    use remoteStorage.js to enable people to save & sync their presentations

    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.

    enhancement 
    opened by jancborchardt 40
  • Switch from Impress.js to Jmpress.js

    Switch from Impress.js to Jmpress.js

    Jmpress.js allows much more, and has a better system for modules in the presentation.

    It has timed playback, embedding presentations into our presentations, nice fade out fade in animations on one slide, etc.

    It depends on jQuery, so maybe this would be nice as an extra module for strut, but enabled by default.

    This is not going to come to impress.js https://twitter.com/bartaz/status/156123781037957123

    opened by gotwig 19
  • name & domain

    name & domain

    As Strut gets better and better, it would be time to think about having a proper domain for it so we can point people more easily to it. As a preface, one thing I’m a bit concerned about is the name, partly because it’s not clear from it that it’s a kick-ass presentation editor, and also because it collides a bit with Apache Struts.

    Are you settled on the name, do you have different ideas, what do you think?

    I didn’t think about it before, but maybe something like »Represent«, »Show«, »Omnipresent«, …

    question 
    opened by jancborchardt 17
  • local video

    local video

    Hi, and thank you for this cool tool.

    I'm struggling with videos. How can I upload my local video in a presentation? I'm running on a local build strut.

    All the best

    opened by mxardre 16
  • Trouble getting Grunt to run

    Trouble getting Grunt to run

    Hello,

    I'm not sure if this is the right place to post this or not, but I'm trying to get 'grunt server watch' to work properly, but I continually get errors.

    ''' Running "server" task Starting static web server on port 8000.

    Running "watch" task Waiting... events.js:71 throw arguments[1]; // Unhandled 'error' event ^ Error: listen EADDRINUSE at errnoException (net.js:770:11) at Server._listen2 (net.js:910:14) at listen (net.js:932:10) at Server.listen (net.js:998:5) at Function.app.listen (/usr/lib/node_modules/grunt/node_modules/connect/lib/proto.js:229:24) at Object.module.exports (/usr/lib/node_modules/grunt/tasks/server.js:43:37) at Object.task.registerTask.thisTask.fn (/usr/lib/node_modules/grunt/lib/grunt/task.js:58:16) at Task. (/usr/lib/node_modules/grunt/lib/util/task.js:343:36) at Task.start (/usr/lib/node_modules/grunt/lib/util/task.js:359:5) at Object.grunt.tasks (/usr/lib/node_modules/grunt/lib/grunt.js:143:8) '''

    Just trying to work on a few features for Strut but can't seem to get the server up and running :\ Any advice and/or other ways to view the 'compiled' page so I can see and test changes?

    Thanks

    opened by jacobsmith 16
  • strut.io has been injected with a coinminer  script

    strut.io has been injected with a coinminer script

    Exporting presentations results in an archive containing several injected iframes, along with a script "ricewithchicken.js"

    Eats all CPU, and is a known crypto miner

    opened by cjmielke 15
  • Overview thumbs sizes wrong when using markdown

    Overview thumbs sizes wrong when using markdown

    Hi there, very very nice tool! I'm really impressed, and so looking forward to dump Apple Keynote at some point.. =)

    Here's some bug I noticed: When using markdown, the "content-container" div in overview mode gets a bad height value, at least in Firefox. The more markdown text is added the higher the div becomes. Below is a screenshot and the json code to reproduce.

    Cheers, Heiner

    { "slides": [ { "components": [], "z": 0, "impScale": 3, "rotateX": 0, "rotateY": 0, "rotateZ": 0, "index": 0, "selected": false, "active": true, "background": "bg-default", "x": 199, "y": 288, "markdown": "# Markdown!\n\nsome \n\ntext\n\nwith \n\nmarkdown\n" } ], "background": "bg-solid-light", "activeSlide": { "components": [], "z": 0, "impScale": 3, "rotateX": 0, "rotateY": 0, "rotateZ": 0, "index": 0, "selected": false, "active": true, "background": "bg-default", "x": 199, "y": 288, "markdown": "# Markdown!\n\nsome \n\ntext\n\nwith \n\nmarkdown\n" }, "fileName": "presentation-3", "deckVersion": "1.0", "customBackgrounds": { "bgs": [] } }

    strut-1

    opened by heinzK1X 15
  • export as PDF

    export as PDF

    Related to #31 (optimize for slide-based presentations first), there should be a way to export the presentation as PDF. To enable people to put it on the well-known slide platforms (Speaker Deck, Slideshare). Also, because conferences often ask for PDFs so that the videos can be synchronized with the slides.

    reveal.js by @hakimel is a web presentation framework which enables that: https://github.com/hakimel/reveal.js#pdf-export – maybe their code is of use for that.

    enhancement 
    opened by jancborchardt 15
  • License

    License

    The AGPL license is banned from use at a number of companies (e.g. Google).

    Is there any chance Strut could be dual-licensed under another license (e.g. GPL, GPLv3, MIT, etc...) that would allow it to be used in these companies?

    I would love to use Strut and contribute back to it, but I currently can't due to the AGPL.

    opened by scottfr 14
  • Online Editor, LaTeX, Codemirror & html div

    Online Editor, LaTeX, Codemirror & html div

    I have had a quick view at all the issues already exist, but still do not find the solution that i need.

    Sorry, I am not a good web developer and know quite less about Grunt, Node.js and so on. I have been a Android and iOS developer for some time and currently I want and start to learn to set up my own blog site and want to integrate one "HTML Presentation" component to my future site.

    For finding the right component, i get to know impress.js, reveal.js, deck.js and so on. My result are presented here: http://isjohnwong.appspot.com/post/6013787169619968 As a result, Strut is the only satisfying open source editor for html presentation i found.

    And here are some of my needs,

    1. Integrate Strut in my website This is exactly somewhat the same as issues #321 and #319 . Well, to make it more clear, things like to host one copy of strut.io in my VPS. And i can use it under my blog domain. image
    2. Math Equation Support Comparing to MathJax, I prefer LaTeX. Somewhat like #151
    3. Code syntax coloring and indenting Maybe integrad codemirror
    4. Self-define html&css&js DIV box Support Somewhat like issue #3 , but not for the whole slide, only for one area.

    Here is a relatively better Commercial Version of HTML Presentation Online Editor, but unfortunately not open source. So i can not count on this.

    image

    Sorry again, seems a lot of needs. If fact, I am currently a senior in one University and after a month, i will finish all my exams and i intend to try to implement all the needs above if i can not find on already implemented solution. Question is that, i am really just one beginner for web development. So is there anyone who can provide me some instruction or guide... THX!

    BTW, I am considering using Python3&Django as back-end Programming language.

    opened by miraclehinn 12
  • Export JSON string can not be imported again - SENSE?

    Export JSON string can not be imported again - SENSE?

    If you copy the text from there, and import it somewhere else, it does NOT work. You really have to use the "download" function.

    That is really sad.

    I have copied the content from the window and saved it into my file.... after hours I realized that this doesnt work, and my work is now sadly... lost.

    The JSON String I got now, that does not work is the following:

    http://pastebin.com/MndZxG1j

    opened by gotwig 12
  • Add impressConsole

    Add impressConsole

    This add impressConsole to the impress build: https://github.com/regebro/impress-console

    Add notes in a DIV called notes and it doesn't display. This can be done in markdown by just adding

    Your notes here

    You can then control impress.js presentations from another tab (displayed on another monitor, if you like). Very helpful for real presentations.

    opened by ClashTheBunny 0
Owner
Matthew Wonlaw
Matthew Wonlaw
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37.1k Jan 3, 2023
The HTML Presentation Framework

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for

Hakim El Hattab 62.8k Jan 2, 2023
DIY Presentation Micro-Framework

Bespoke.js DIY Presentation Micro-Framework Bespoke.js is a super minimal (1KB min'd and gzipped), modular presentation library for modern browsers, d

Bespoke.js 4.7k Dec 18, 2022
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 7, 2023
noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

noUiSlider noUiSlider is a lightweight JavaScript range slider. No dependencies All modern browsers and IE > 9 are supported Fully responsive Multi-to

Léon Gersen 5.4k Dec 28, 2022
Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.

Vegas – Backgrounds and Slideshows Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements. Important note: Vegas 2

Jay Salvat 1.8k Jan 7, 2023
The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

Sequence.js The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. Sequence.js

Ian Lunn 3.4k Dec 20, 2022
JavaScript image gallery for mobile and desktop, modular, framework independent

PhotoSwipe Repository JavaScript image gallery for mobile and desktop. Documentation and getting started guide. Demo and script home page. NPM npm ins

Dmitry Semenov 22.5k Dec 30, 2022
A jQuery plugin for a slider with adaptive colored figcaption and navigation.

Adaptive Slider jQuery Plugin A jQuery plugin for a slider with adaptive colored figcaption and navigation. This plugin will take a list of figure ele

null 53 Jan 3, 2023
A lightweight carousel library with fluid motion and great swipe precision

Embla Carousel Embla Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency

David 2.8k Jan 4, 2023
Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

Swiffy Slider Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers. Explore Swiffy Slider docs » Se

Dynamicweb Software A/S 149 Dec 28, 2022
OlumSlider is a lightweight and flexible slider, written via vanilla js

olum-slider OlumSlider is a lightweight and flexible slider, written via vanilla js Documentation CDN <!DOCTYPE html> <html lang="en"> <head> <t

Olumjs 0 Oct 8, 2021
A minimal presentation package for Svelte, including a "Presenter" and "Presentation View"

svelte - presenter A minimal presentation package for Svelte, includes synchronized "Presenter" and "Presentation" views. Adding Slides All slides are

Stephane 17 Sep 16, 2022
Image, Presentation and Video editor. Canva clone

React editor [WIP] React editor for graphics, presentations and videos. It should be an alternative to canva.com. Try demo here react-editor-core.verc

null 1.4k Dec 28, 2022
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37k Jan 2, 2023
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37.1k Jan 3, 2023
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37.1k Jan 3, 2023
Presentation and materials for The Graph developers taking their first space-walk 🧑‍🚀

Welcome to thegraph-hacker-kit ?? Presentation and materials for The Graph developers taking their first space-walk ??‍?? Are you ready to learn how t

Patrick Gallagher 20 Aug 26, 2022
♠️ React MDX-based presentation decks

MDX Deck Award-winning React MDX-based presentation decks ?? Write presentations in markdown ⚛️ Import and use React components ?? Customizable themes

Brent Jackson 11k Jan 2, 2023
The HTML Presentation Framework

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for

Hakim El Hattab 62.8k Jan 2, 2023