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

更新

[[公開メモ]]

* 概要 [#td75a95f]

[[こちらで紹介したタイミングチャート清書スクリプト>ソフトウェア/tchart.rb]]をオンラインで使えるようにしました。

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

>  &ref(screen-capture1.png,,66%);

* 設置アドレス [#s578cb5d]

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

* ソースコード [#sabe6496]

 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>

* コメント・質問 [#m9652e62]

#article_kcaptcha

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