Skip to content

hingew/dive

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Packages

No packages published

Languages

  • Elm 97.8%
  • HTML 2.2%