PHP Classes

File: demos/playground.php

Recommend this page to a friend!
  Classes of Tom Schaefer   d3Raphael   demos/playground.php   Download  
File: demos/playground.php
Role: Example script
Content type: text/plain
Description: Raphael Playground example
Class: d3Raphael
Generate JavaScript to access RaphaelJS library
Author: By
Last change:
Date: 11 years ago
Size: 3,076 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js" type="text/javascript"></script>
  <style media="screen">
body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}
body {margin: 0;padding: 0;text-align: center;}
h1 {font-weight: 400;height: 5%;}
#canvas {height: 400px;margin: 0 auto;text-align: left;width: 640px;}
#code {font-family: Consolas, Monaco, "Lucida Console", monospace;height: 4em;margin: 10px;padding: 0;width: 90%;}
#run {font-size: 2em;}
    </style>
    <script type="text/javascript">
    <?php
     
include_once("../d3.classes.inc.php"); // download the required d3 package
include_once("../raphael.class.inc.php");
   
   
func()
      ->
add( raphael(array( raphael::escape("canvas"), 640, 400))->createVar("paper")->registerStack() )
      ->
add( document()->getElementById("run")->createVar("btn",false)->registerStack() )
      ->
add( document()->getElementById("code")->createVar("cd",false)->registerStack() )
      ->
add( func()
          ->
add( stack()->get("paper")->get()
                    ->
clear()->colon()
          )
          ->
add( stack()->get("paper")->get()
                    ->
rect(0, 0, 640, 400, 10)
                    ->
attr(obj(array("fill" => "#fff", "stroke" => "none")))
                    ->
colon()
          )->
add(
             
raphael()->trycatch(
               
raphael(
                 
f( array(
                     
raphael::escape("paper"),
                     
raphael::escape("window"),
                     
raphael::escape("document"),
                     
stack()->get("cd")->get()->value(document::property)
                    )
                  )
                  ->
createVar(null, true)->enclose())
                  ->
call(
                   
raphael::unescape("paper"),
                   
raphael::unescape("paper")
                  ),
                 
console()->log(raphael::unescape("e.message"))
            )
          )
          ->
createVar( stack()->get("btn")->get()->onclick(document::property) )
          ->
autoexec()
      )
      ->
createVar(window()->onload(window::property))->toStack();
   
   
   
    echo
stack()->getInstance();
   
?>
</script>
  </head>
<body>
  <div id="canvas"></div>
  <div><textarea id="code">paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);</textarea></div>
  <div><button id="run" type="button">Run</button></div>
</body>
</html>