タイミングチャート清書サービスのバックアップ(No.2)

更新

公開メモ

概要 †

こちらで紹介したタイミングチャート清書スクリプトをオンラインで使えるようにしました。

コードを書けばほぼリアルタイムで清書結果を確認できます
清書したタイミングチャートは SVG または PNG 形式でダウンロードできます

　　&ref(): File not found: "screen-capture1.png" at page "ソフトウェア/タイミングチャート清書サービス";

設置アドレス †

こちらです：
http://dora.bk.tsukuba.ac.jp/~takeuchi/tchart.php

ソースコード †

LANG:php(linenumber)
<?php 

  function generate_svg($source)
  {
    $descriptorspec = array(
       0 => array("pipe", "r"),             // stdin
       1 => array("pipe", "w"),             // stdout
       2 => array("file", "/dev/null", "a") // stderr
    );
    $process = proc_open('/usr/local/bin/tchart.rb', $descriptorspec, $pipes);

    if (is_resource($process)) {
      fwrite($pipes[0], $source);
      fclose($pipes[0]);

      return stream_get_contents($pipes[1]);
      fclose($pipes[1]);

      $return_value = proc_close($process);
    }
    return "";
  }

  function bad_referer()
  {
    $referer = $_SERVER["HTTP_REFERER"];
    $url = parse_url($referer);
    return $url['host'] != $_SERVER["SERVER_NAME"];
  }

  if(@$_POST['source'] && @$_POST['format']=='svg'){
    if(bad_referer()) exit;

#    header('Content-type: image/svg+xml');
    header('Content-Type: application/force-download');
    header('Content-Disposition: attachment; filename="tchart.svg"');
    echo generate_svg($_POST['source']);
    exit;
  }

  if(@$_POST['source'] && @$_POST['format']=='png'){
    if(bad_referer()) exit;

    $svg = generate_svg($_POST['source']);

    $tempname = tempnam('/tmp', 'tchart');
    $svgname = $tempname . '.svg';
    $pngname = $tempname . '.png';

    $svgfile = fopen($svgname, 'w');
    fwrite($svgfile, $svg);
    fclose($svgfile);
    system("/usr/bin/convert ${svgname} ${pngname}");
    unlink($svgname);

#    header("Content-Type: image/png");
    header('Content-Type: application/force-download');
    header('Content-Disposition: attachment; filename="tchart.png"');
    readfile($pngname);
    unlink($pngname);
    exit;

#    下記はなぜかうまく動かない
#    $im = new Imagick();
#    $im->readImageBlob($svg, 'tchart.svg');
#    $im->setImageFormat("png24");
#    header("Content-Type: image/png");
#    header('Content-Disposition: attachment; filename="tchart.png"');
#    echo $im;
#    exit;
  }
?>

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Timing chart formatter</title>
    <meta charset="utf-8">
    <meta name="description" content="Timing chart formatter">
    <meta name="author" content="Osamu Takeuchi &lt;osamu@big.jp&gt;">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- link rel="stylesheet" href="" -->
    <!--&#91;if lt IE 9&#93;>
    <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <!&#91;endif&#93;-->
    <!-- link rel="shortcut icon" href="" -->
  </head>
  <body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <h1>Timing chart formatter</h1>

    <h2>Source Code</h2>

    <a href="http://dora.bk.tsukuba.ac.jp/~takeuchi/?%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%2Ftchart.rb">View sytax of the source text.</a><br>
    <br>

    <form name="form" method="post" target="_blank">
    <input type="hidden" name="format" id="format" value="svg" />
    <textarea id="source" name="source" cols="120" rows="20"># comment
clock	_~_~_~_~_~_~_~_~_~_~_
data	=?====X=DATA========X=?====
valid	_____~~~~~~~~~~______
ready	_____________[~~]______
</textarea>
    </form>
    <input type="button" id="reload" value="Reload">
    <span id="indicator"></span><br />

    <h2>Result</h2>
    <input type="button" id="as_svg" value="Download as svg" />
    <input type="button" id="as_png" value="Download as png" /><br />
    <div id="result"></div>
  </body>

<script>

$(function(){

  var reload = function(source) {
    if (source != "") {
      $("#indicator").html("*");
      $.post("tchart.php", {
          "source": source,
          "format": "svg"
        }, 
        function(data, status) {
          if (status=="success") {
            $("#result").html(data);
          } else {
            $("#result").html(status);
          }
          $("#indicator").html("");
        },
        "text"
      );
    }
  }

  $('#reload').on('click', function(e){
    source = $("#source").val();
    reload(source);
  });

  var lastSource = '';
  setInterval(function(){
    source = $("#source").val();
    if (source!=lastSource)
      reload(source);
    lastSource = source;
  },1000);

  $('#as_svg').on('click', function(e){
    $('#format').val('svg');
    document.form.submit();
  });

  $('#as_png').on('click', function(e){
    $('#format').val('png');
    document.form.submit();
  });

});

</script>

</html>

コメント・質問 †

Counter: 66450 (from 2010/06/03), today: 16, yesterday: 0