Powerpoint like slideshow from default html export

Powerpoint like slideshow from default html export

[Sander Boer]

Hi All,

I usually give presentations that are graphically heavy and typically 
have 3 or 4 movies in them. Powerpoint/impress is too much of a hassle 
esp. with movies and latex/beamer is nice, but the movie package stopped 
working for me.

So I hacked together a javascript and a css that transforms the default 
html export of my org file to a slide show:
http://www.mauc.nl/presentations/test.html

Here's the org-file:
http://www.mauc.nl/presentations/test.org

Here's the rest:
http://www.mauc.nl/assets/css/orgmode-slideshow.css
http://www.mauc.nl/assets/js/orgmode-slideshow.js
(depends on jQuery)

It's iPad-ready (touch events ans such) and will present itself 
full-screen when added to the homescreen.

On non-touchscreen devices navigation is keyboard-oriented:
forward: k-key, right-arrow, up-arrow, page-up
backwards: J-key, left-arrow, down-arrow, page-down
First slide: home, A-key
Last slide: end, E-key

Also, images are auto-sized. When an image needs to share the screen 
with more images or accompanynig text (apart from the header) the screen 
real-estate is divided up between them.

All in all it works, but it is hacky.
No support for deeper trees (yet), no mouse nav and I'm personally not 
fond of how the images are handled.

Let me know what you think, I will keep you updated of the progress.

Kind Regards,
Sander

Re: Powerpoint like slideshow from default html export

[John Hendy]

On Sat, Feb 11, 2012 at 2:27 PM, Sander Boer <sanderboer@yahoo.com> wrote:
> Hi All,
>
> I usually give presentations that are graphically heavy and typically have 3
> or 4 movies in them. Powerpoint/impress is too much of a hassle esp. with
> movies and latex/beamer is nice, but the movie package stopped working for
> me.
>
> So I hacked together a javascript and a css that transforms the default html
> export of my org file to a slide show:
> http://www.mauc.nl/presentations/test.html
>
> Here's the org-file:
> http://www.mauc.nl/presentations/test.org
>
> Here's the rest:
> http://www.mauc.nl/assets/css/orgmode-slideshow.css
> http://www.mauc.nl/assets/js/orgmode-slideshow.js
> (depends on jQuery)
>
> It's iPad-ready (touch events ans such) and will present itself full-screen
> when added to the homescreen.
>
> On non-touchscreen devices navigation is keyboard-oriented:
> forward: k-key, right-arrow, up-arrow, page-up
> backwards: J-key, left-arrow, down-arrow, page-down
> First slide: home, A-key
> Last slide: end, E-key
>
> Also, images are auto-sized. When an image needs to share the screen with
> more images or accompanynig text (apart from the header) the screen
> real-estate is divided up between them.
>
> All in all it works, but it is hacky.
> No support for deeper trees (yet), no mouse nav and I'm personally not fond
> of how the images are handled.
>
> Let me know what you think, I will keep you updated of the progress.

This is friggin awesome. Great start and what a cool addition to the
already comprehensive org-mode family of export options. Thank you so
much for your efforts and contribution!

John

>
> Kind Regards,
> Sander
>
>

Re: Powerpoint like slideshow from default html export

[Darlan Cavalcante Moreira]

This is really beautiful and elegant!

With the different ways to create presentations with org-mode, maybe there
could be a page (in worg?) to act as a showcase for the possibilities. The
source for these presentation would also act as examples and templates from
where the users could start from to create their presentations.

This would be similar to what [1] is for the tikz pakcage in latex.

--
Darlan

Re: Powerpoint like slideshow from default html export

[Benny Simonsen]

[-- Attachment #1: Type: text/plain, Size: 1949 bytes --]

Hi Sander

I am using your orgmode-slideshow - nice tool!

2012/2/11 Sander Boer <sanderboer@yahoo.com>

> Hi All,
>
> I usually give presentations that are graphically heavy and typically have
> 3 or 4 movies in them. Powerpoint/impress is too much of a hassle esp. with
> movies and latex/beamer is nice, but the movie package stopped working for
> me.
>
> So I hacked together a javascript and a css that transforms the default
> html export of my org file to a slide show:
> http://www.mauc.nl/**presentations/test.html<http://www.mauc.nl/presentations/test.html>
>
> Here's the org-file:
> http://www.mauc.nl/**presentations/test.org<http://www.mauc.nl/presentations/test.org>
>
> Here's the rest:
> http://www.mauc.nl/assets/css/**orgmode-slideshow.css<http://www.mauc.nl/assets/css/orgmode-slideshow.css>
> http://www.mauc.nl/assets/js/**orgmode-slideshow.js<http://www.mauc.nl/assets/js/orgmode-slideshow.js>
> (depends on jQuery)
>

No support for deeper trees (yet), no mouse nav and I'm personally not fond
> of how the images are handled.
>
> Let me know what you think, I will keep you updated of the progress.
>

Do you have made support for deeper trees, then I would like to get it.

Any other updates?

I have made a small patch, which makes imgresize() resize images correct if
the only text is an <ul>, the patch is listed below.

Thank you
Benny Simonsen

The patch for imgresize():

pub/scripts/orgmode-slideshow/orgmode-slideshow.js
index 844bac6..6404540 100644
--- INDEX:/pub/scripts/orgmode-slideshow/orgmode-slideshow.js
+++ WORKDIR:/pub/scripts/orgmode-slideshow/orgmode-slideshow.js
@@ -323,7 +323,7 @@ function mykeys(){

 function imgresize(){
     var count=$(".figure:visible").length;
-    if ($(".outline-text-2:visible p:first").text()){
+    if ($(".outline-text-2:visible p:first").text() ||
$(".outline-text-2:visible ul:first").text()){
         count++;
     }
     $(".figure:visible").each(function(index){

[-- Attachment #2: Type: text/html, Size: 2714 bytes --]

Re: Powerpoint like slideshow from default html export

[Eric Schulte]

Benny Simonsen <benny@slbs.dk> writes:

> Hi Sander
>
> I am using your orgmode-slideshow - nice tool!
>

Maybe this tool should be added to the relevant page on worg.

  http://orgmode.org/worg/org-tutorials/non-beamer-presentations.html

>
> 2012/2/11 Sander Boer <sanderboer@yahoo.com>
>
>> Hi All,
>>
>> I usually give presentations that are graphically heavy and typically have
>> 3 or 4 movies in them. Powerpoint/impress is too much of a hassle esp. with
>> movies and latex/beamer is nice, but the movie package stopped working for
>> me.
>>
>> So I hacked together a javascript and a css that transforms the default
>> html export of my org file to a slide show:
>> http://www.mauc.nl/**presentations/test.html<http://www.mauc.nl/presentations/test.html>
>>
>> Here's the org-file:
>> http://www.mauc.nl/**presentations/test.org<http://www.mauc.nl/presentations/test.org>
>>
>> Here's the rest:
>> http://www.mauc.nl/assets/css/**orgmode-slideshow.css<http://www.mauc.nl/assets/css/orgmode-slideshow.css>
>> http://www.mauc.nl/assets/js/**orgmode-slideshow.js<http://www.mauc.nl/assets/js/orgmode-slideshow.js>
>> (depends on jQuery)
>>
>
> No support for deeper trees (yet), no mouse nav and I'm personally not fond
>> of how the images are handled.
>>
>> Let me know what you think, I will keep you updated of the progress.
>>
>
> Do you have made support for deeper trees, then I would like to get it.
>
> Any other updates?
>
> I have made a small patch, which makes imgresize() resize images correct if
> the only text is an <ul>, the patch is listed below.
>
> Thank you
> Benny Simonsen
>
> The patch for imgresize():
>
> pub/scripts/orgmode-slideshow/orgmode-slideshow.js
> index 844bac6..6404540 100644
> --- INDEX:/pub/scripts/orgmode-slideshow/orgmode-slideshow.js
> +++ WORKDIR:/pub/scripts/orgmode-slideshow/orgmode-slideshow.js
> @@ -323,7 +323,7 @@ function mykeys(){
>
>  function imgresize(){
>      var count=$(".figure:visible").length;
> -    if ($(".outline-text-2:visible p:first").text()){
> +    if ($(".outline-text-2:visible p:first").text() ||
> $(".outline-text-2:visible ul:first").text()){
>          count++;
>      }
>      $(".figure:visible").each(function(index){

-- 
Eric Schulte
http://cs.unm.edu/~eschulte

Re: Powerpoint like slideshow from default html export

[Bastien]

Eric Schulte <schulte.eric@gmail.com> writes:

> Maybe this tool should be added to the relevant page on worg.
>
>   http://orgmode.org/worg/org-tutorials/non-beamer-presentations.html

Done.

-- 
 Bastien