タイミングチャート清書サービス の履歴(No.12)

設置アドレス†

https://rawgit.com/osamutake/tchart-coffee/master/bin/editor-offline.html

概要†

このようなテキストを入力すると、

aclk    ~_~_~_~_~_~_~_~_~_~_
awaddr  ==?X=A1==X=A2X=A3==X==?=X=A4X=?
awvalid __~~~~~~~~~~____~~__
awready ____[~~~~]__[~~]____[~~]__
wdata   ====?X=D1X=D2X=?X=D3X=?X=D4==X=?
wvalid  ____~~~~__~~__~~~~__
wready  ____~~~~__~~____~~__
bresp   ====00================
bvalid  ____~~~~__~~____~~__
bready  ~~~~~~~~~~~~~~~~~~1~~

こんなタイミングチャートを生成できるサービスです。

&tchart( aclk ~_~_~_~_~_~_~_~_~_~_ awaddr ==?X=A1==X=A2X=A3==X==?=X=A4X=? awvalid _~~~~~~~~~~~~ awready ___[~~~~][~~]___[~~] wdata ====?X=D1X=D2X=?X=D3X=?X=D4==X=? wvalid ___~~~~~~_~~~~ wready ___~~~~~~___~~ bresp ====00================ bvalid ___~~~~~~___~~ bready ~~~~~~~~~~~~~~~~~~1~
);

ソースコード編集中に、ほぼリアルタイムで清書結果を確認できるので、試行錯誤しているうちに正しく書けると思います。

清書したタイミングチャートは SVG または PNG 形式で保存できます。

入力内容がサーバーに送られることはなく、完全にブラウザ上だけで画像を生成していますので、守秘義務の問題も発生しません。心配であればリンク先の html を PC に保存して、そこから立ち上げれば、完全にオフラインの状態でも動作します。

設置アドレスはこちらです：
　　https://rawgit.com/osamutake/tchart-coffee/master/bin/editor-offline.html

＞＞＞＞　記述文法についてはこちらをご覧下さい。

コメントや質問などがあれば GitHub で Issue を上げる、このページの一番下の投稿フォームをご利用下さい。

このサービスで使っている javascript コードを既存システムに組み込むことで、 各種 Wiki や Markdown にタイミングチャート記述機能を追加できると思います。 下記 組み込み処理系 を参照して下さい。

謝辞†

熊谷正朗さんの "Timing chart formatter by kumagai"
http://www.mech.tohoku-gakuin.ac.jp/rde/contents/library/tchart/indexframe.html

を大いに参考にさせていただきました。

記述文法はほぼ熊谷さんの tchart を踏襲しています。

大変有用なツールをご提供くださったことに感謝いたします。

記述文法†

こちらをご覧下さい。

ソースコード†

GitHub に上がっています：https://github.com/osamutake/tchart-coffee

npm でも利用可能です：https://www.npmjs.com/package/tchart-coffee

組み込み処理系†

このサービスで作成した svg を手で切り貼りして html に埋め込む代わりに、 html 中に以下のように直接タイミング図定義を書いておいて、 javascript で svg に変換して表示した方が、 あとから修正することなどを考えると便利です。

チャートを表示したい部分に次のように記述しておいて、

LANG:html
<script type="text/tchart">
aclk    ~_~_~_~_~_~_~_~_~_~_
awaddr  ==?X=A1==X=A2X=A3==X==?=X=A4X=?
awvalid __~~~~~~~~~~____~~__
awready ____[~~~~]__[~~]____[~~]__
wdata   ====?X=D1X=D2X=?X=D3X=?X=D4==X=?
wvalid  ____~~~~__~~__~~~~__
wready  ____~~~~__~~____~~__
bresp   ====00================
bvalid  ____~~~~__~~____~~__
bready  ~~~~~~~~~~~~~~~~~~1~~
</script>

body の後に次のコードを置きます。

LANG:html
<script src='https://cdn.rawgit.com/osamutake/tchart-coffee/v1.1.0/lib/tchart.min.js'></script>
<script>
(function(){
  var codes = document.getElementsByTagName('script');
  for (var i = codes.length-1; i >= 0; i--){
    var code = codes[i];
    if(code.getAttribute('type')!=='text/tchart')
      continue;
    var svg = TimingChart.format(code.textContent);
    var div = document.createElement('div');
    div.className = 'tchart';
    div.innerHTML = svg;
    code.parentNode.replaceChild(div, code);
  }
})();
</script>

似たような方法を使えば、Wiki や Blog をカスタマイズして、 タイミング図の表示機能を付けるようなことも簡単にできると思います。 Markdown ならこうでしょうか。

ちなみにこのサイト自身、タイミングチャートを処理するプラグイン を導入した pukiwiki で書いているため、 記事の中で自然にタイミング図を記述できています。

```tchart2svg
clock  _~_~_~_~_~
signal ___~~~~___
```

LANG:html
<pre><code class="lang-tchart2svg">
clock  _~_~_~_~_~
signal ___~~~~___
</code></pre>

LANG:html
<script src='https://cdn.rawgit.com/osamutake/tchart-coffee/v1.1.0/lib/tchart.min.js'></script>
<script>
(function(){
  var codes = document.getElementsByClassName('lang-tchart2svg');
  for (var i = codes.length-1; i >= 0; i--){
    var code = codes[i];
    var svg = TimingChart.format(code.textContent);
    var div = document.createElement('div');
    div.className = 'tchart';
    div.innerHTML = svg;
    var pre = code.parentNode
    pre.parentNode.replaceChild(div, pre);
  }
})();
</script>

コメント・質問†

バグ報告や改善要望などは、可能であれば GitHub で Issue を上げていただけると捗ります。よく分からなければ下記へご記入いただいて構いません。