SimcirJS のToolBox をカスタマイズ

kintone アプリで、ToolBox をカスタマイズして、部品を追加できるようにしてみた。
とりあえず、簡単に部品登録・流用が可能になったと思われる。

ToolBox の表示

SimcirJS で、toolbox オプションを指定しないで表示すると、下記の規定ToolBox が表示される。

ToolBox の定義

「CTL+クリック」で設定内容をJSON形式で表示すると、既定の設定内容を確認できる。

{
  "width":800,
  "height":400,
  "showToolbox":true,
  "toolbox":[
    {"type":"In"},
    {"type":"Out"},
    {"type":"Joint"},
    {"type":"DC"},
    {"type":"LED"},
    {"type":"PushOff"},
    {"type":"PushOn"},
    {"type":"Toggle"},
    {"type":"BUF"},
    {"type":"NOT"},
    {"type":"AND"},
    {"type":"NAND"},
    {"type":"OR"},
    {"type":"NOR"},
    {"type":"EOR"},
    {"type":"ENOR"},
    {"type":"OSC"},
    {"type":"7seg"},
    {"type":"16seg"},
    {"type":"4bit7seg"},
    {"type":"RotaryEncoder"},
    {"type":"BusIn"},
    {"type":"BusOut"},
    {"type":"RS-FF"},
    {"type":"JK-FF"},
    {"type":"T-FF"},
    {"type":"D-FF"},
    {"type":"8bitCounter"},
    {"type":"HalfAdder"},
    {"type":"FullAdder"},
    {"type":"4bitAdder"},
    {"type":"2to4BinaryDecoder"},
    {"type":"3to8BinaryDecoder"},
    {"type":"4to16BinaryDecoder"}
  ],
  "devices":[
  ],
  "connectors":[
  ]
}

ToolBox の設定

simcir.js にある registerDevice　で、部品を登録

  var registerDevice = function(type, factory, deprecated) {
    if (typeof factory == 'object') {
      factory = createDeviceRefFactory(factory);
    }
    factories[type] = factory;
    if (!deprecated) {
      defaultToolbox.push({type: type});
    }
  };

ToolBox に追加は、simcir 表示時のパラメータで指定。

        data['toolbox'] = getInitToolBox();
...
        data['toolbox'].push( { "type":pasrtsname });         
...
        $('.simcir').each(function() {
          var $placeHolder = $(this);
          simcir.setupSimcir($placeHolder, data );
        });

規定部品の設定処理

部品の設定は、部品タイプによって、３ヶ所に分かれている。

simcir.js では、端子部品を設定

In
Out
Joint

simcir-basicset.js では、基本部品を設定

部品の動作と描画を行っている。
部品の組合せで実現できないものは、ここにロジックと描画処理を登録する。

DC
LED
PushOff
PushOn
Toggle
BUF
NOT
AND
NAND
OR
NOR
EOR
ENOR
OSC
7seg
16seg
4bit7seg
RotaryEncoder
BusIn
BusOut

simcir-library.js では、部品を組合せた部品を設定

基本部品および既に登録された部品を組合せることができる

RS-FF
JK-FF
T-FF
D-FF
8bitCounter
HalfAdder
FullAdder
4bitAdder
2to4BinaryDecoder
3to8BinaryDecoder
4to16BinaryDecoder

ToolBox カスタマイズのしくみ

simcir-library.js　で、設定されている部品を、置き換え・追加してカスタマイズする。

部品グループアプリに、必要な部品を登録する。

電子回路アプリで、部品グループを指定するとその部品データを読み込み、ToolBox に登録する。
ToolBox に追加された部品が表示され、使用可能になる。

※部品が複雑になれば、それだけjson データ量が増えるが、どの程度まで実用範囲になるかは、未検証。

kintone 電子回路シミュレータ ToolBoxカスタマイズ