Skip to content

Latest commit

 

History

History
84 lines (60 loc) · 1.94 KB

README.md

File metadata and controls

84 lines (60 loc) · 1.94 KB

Dive

Dive is a framework written in Elm for programming visual presentations like Prezi's.

If you are interested in an approach based on SVG, check out Dive SVG.

Demo

This presentation dives you through the fundamentals of Dive written with Dive itself!

The source code can be found here.

Installation

You need to install Elm before.

Then run:

elm package install myrho/dive

Example

Create a file named Main.elm and copy/paste the following piece of code into it:

import Html 
import Dive exposing (..)
import Dive.ElmLogo exposing (logo)

world =
  [ logo (0,0) (1,1)
  , text (0,0) "Hello Dive!"
    |> transformObject (0.001,0.001) (0,0) 
  ]

frames =
  [ frame (1,1) (0,0)
  , frame (0.01, 0.01) (0,0) 
    |> duration 2000
  ]

init size =
  ( Dive.init size
    |> Dive.world world
    |> Dive.frames frames
  , Cmd.none
  )

main =
  Html.programWithFlags
    { init = init
    , update = Dive.update
    , view = Dive.view
    , subscriptions = 
        Dive.subscriptions
    }

Build it:

elm make --output elm.js

Create a file named index.html and copy/paste the following piece of code into it:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="elm.js"></script>
  </head>
  <body style="margin:0; padding:0; overflow:hidden;">
    <script type="text/javascript">
      var size =
        { width : window.innerWidth
        , height : window.innerHeight
        };
      Elm.Main.fullscreen(size);
    </script>
  </body>
</html>

Navigate your browser (Firefox or Chrome) to the location of the index.html and dive!

License

BSD-3