Blazor with Zeu.js

Zeu.jsは様々なデータをビジュアル化し、アニメーションで表示するJavaScriptライブラリです。
今回はBlazor WebAssemblyアプリで、Zeu.jsを動かしてみたいと思います

Zeu.js

今回はバリバリのJavaScriptライブラリを使って、Blazorアプリケーションを作っていきたいと思います

Demo

サンプルコード

canvasの初期化

Zeu.jsはcanvasを使ってますので、それぞれのコントロールを初期化する処理をC#側から呼び出します。

Index.razor

      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-8">
            <h1>MY COMMAND CENTER</h1>
            <div><a href="https://github.com/shzlw/zeu" style="font-size: 18px;">by Zeu.js</a></div>
            <div style="font-size: 22px; font-weight: bold;">US-EAST-01</div>
          </div>
          <div class="col-lg-4">
            <h2>TIME</h2>
            <canvas id="digital-clock" width="200" height="50"></canvas>
          </div>
        </div>

        <canvas id="heartbeat" width="730" height="150"></canvas>  👈ここに配置
      </div>

index.html

    <script>
        window.Init = (_) => {
            /* Heartbeat */
            heartbeat = new zeu.Heartbeat('heartbeat', {
                viewWidth: 730,
                speed: 2,
                fontColor: COLOR.lightGrey,
                maxQueueCapacity: 50
            });
            heartbeat.scaleByHeight(150);
    // 中略
    </script>

canvasの初期化は OnAfterRenderの初回レンダリング時に行うようにします。

Index.razor

@code{
    protected override  void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            JSRuntime.InvokeVoidAsync("Init", new object[] { });
        }
    }
}

コントロールへ値のセット

コントロールの初期化が行えればあとは簡単です。
injectされたJavaScriptの呼び出し機能を使用して、scriptのファンクションにセットしたい値を渡すだけです。

Index.raozr

    <script>
        window.valueChangeHertbeat = (p1, p2) => {
            heartbeat.beat({
                color: p1,
                space: p2
            });    
        }
    </script>

Index.razor

@code{
    void  OnClick()
    {
        var r = new Random();
        var ret = @"#" + System.Drawing.Color.FromArgb(r.Next(256), r.Next(256), r.Next(256)).Name.Substring(2);

        // Heartbeat
        JSRuntime.InvokeVoidAsync("valueChangeHertbeat", new object[] {ret,r.Next(0,10) });
    }
}

JavaScriptライブラリを使う

BlazorはJavaScriptを使わずにC#だけでWebアプリケーションをコーディングできるのが大きな特徴でありますが、逆にJavaScriptとの親和性の高さも大きな特徴です。
UIに関してのユーザービリティやビジュアルなギミックは、純粋にBlazorだけで表現するのはまだまだ難しいですね
いつか、すべてをC#でコーディングできる日がやってくるのでしょうか