wslでelixir その183

概要

wsl(wsl2じゃない)で、elixirやってみた。
Livebookで、kinoでsimcirjs入れてみた。

SimcirJSとは

ウェブブラウザ上で手軽に論理回路の組み立てと動作確認ができる無料のシミュレータです。特別なソフトをインストールする必要がなく、パソコンやタブレットのブラウザだけで直感的にデジタル回路を学べるのが特徴です。

nand2tetorisとは

Nand2Tetris（Nand to Tetris）とは、最小の構成要素であるNANDゲート1つから出発し、論理回路、CPU、アセンブラ、仮想マシン、コンパイラ、OSを自作して、最終的にテトリスを動かすコンピュータをゼロから構築する世界的に有名な学習プロジェクトおよび公式ウェブサイトの名称です。

Kino とは

ノートブック上でリッチなUIコンポーネントやインタラクティブなウィジェットを動かすための公式ライブラリです。テキストやコード結果の表示だけでなく、ボタン、入力フォーム、画像アップロード、グラフ描画、カスタムスマートセルなどをElixirコードから直接レンダリングできます。

setup

Mix.install([
  {:kino, "~> 0.19"}
])

写真

使い方

左から素子をドラッグしてドロップします。
白い丸から黄色い丸に線を引くと繋がります。
DCは電源で、toggleはスイッチ、LEDで点灯します。

サンプルコード

defmodule KinoSimcir do
  use Kino.JS

  def new(code) do
    Kino.JS.new(__MODULE__, code)
  end

  asset "main.js" do
    """
    export async function init(ctx, code) {
      ctx.importCSS("https://kazuhikoarase.github.io/simcirjs/simcir.css");
      ctx.importCSS("https://kazuhikoarase.github.io/simcirjs/simcir-basicset.css");
      await ctx.importJS("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js");
      await ctx.importJS("https://kazuhikoarase.github.io/simcirjs/simcir.js");
      await ctx.importJS("https://kazuhikoarase.github.io/simcirjs/simcir-basicset.js");
      await ctx.importJS("https://kazuhikoarase.github.io/simcirjs/simcir-library.js");
      ctx.root.innerHTML = `<div class="simcir"><!-- ${code} --></div>`;
      if (window.simcir) 
      {
        const $el = window.jQuery(ctx.root).find('.simcir');
        window.simcir.setupSimcir($el, JSON.parse(code));
      } 
      else 
      {
        ctx.root.innerHTML = `<p style="color: red;">simcirjs の読み込みに失敗しました。</p>`;
      }
    }
    """
  end
end

KinoSimcir.new("""
{
  "width":800,
  "height":500,
  "showToolbox":true,
  "toolbox":[
    {"type":"In"},
    {"type":"Out"},
    {"type":"DC"},
    {"type":"LED"},
    {"type":"PushOff"},
    {"type":"PushOn"},
    {"type":"Toggle"},
    {"type":"NAND"}
  ],
  "devices":[
    {"type":"DC","id":"dev0","x":48,"y":80,"label":"DC"},
    {"type":"LED","id":"dev1","x":112,"y":80,"label":"LED"}
  ],
  "connectors":[
    {"from":"dev1.in0","to":"dev0.out0"}
  ]
}

""")

nandがあれば、なんでもできる。

not

and

or

nor

xor

階段の上下のスイッチ。

SR-フリップフロップ

以上