Main Content

ライブ エディターを使用したリアルタイム ダッシュボードの作成

ライブ エディターでは、リアルタイム データを表示および解析するためのダッシュボードを作成できます。このようなダッシュボードを作成する際に、表示データを変更するためにリアルタイム データをオンデマンドで取得および表示するボタンなどの対話型コントロールを使用できます。書式設定されたテキスト、コントロール、および結果のみをダッシュボード ユーザーに表示するには、コードを非表示にします。

この例では、ライブ エディターで単純な気象ダッシュボードを作成する方法を説明します。このダッシュボードでは 1 つのボタンと 1 つのチェック ボックスを使用して、リアルタイムの気象データを取得して表示します。

気象ダッシュボードを表示して操作するために、この例を MATLAB® で開きます。

Weather dashboard with code hidden, showing current weather conditions and graphs of the temperature, humidity, and wind over the past two days in Natick, MA

ダッシュボードの作成

MATLAB でこの例を開くことで、気象ダッシュボードのコピーを開くことができます。ダッシュボードを自分で再作成する場合は、WeatherDashboard.mlx という名前のライブ スクリプトを作成します。次に、説明テキストおよびコードを追加し、コントロールを構成し、コードを非表示にします。

コードの追加

気象ダッシュボードのコード セクションの説明テキストとコードをコピーして、ThingSpeak™ チャネル 12397 からリアルタイム データを取得して表示します。このチャネルは、マサチューセッツ州ネイティックにある、Arduino ベースの気象計から気象データを収集します。

コントロールの構成

このダッシュボードでは、表示されている気象データを更新するボタンおよび使用する単位を切り替えるチェック ボックスを使用します。

コードをコピーすると、コントロールが現在の値に置き換えられます。コントロールをコードに再度追加するために、ライブ スクリプトの先頭にボタンを挿入し、変数 "useSIUnits" をチェック ボックスに置き換えます。次に、コントロールを右クリックし、[コントロールの構成] を選択し、以下のようにコントロールのオプションを指定することで、コントロールを構成します。

  • ボタン — ラベルを Update に設定し、[実行] 実行オプションを Current section に設定します。ユーザーがボタンを押すと、現在のセクションのコードが実行され、ダッシュボードで表示される気象データが更新されます。

  • チェック ボックス — ラベルを Use SI units に設定し、[実行] 実行オプションを Current section に設定します。ユーザーがチェック ボックスをオンまたはオフにすると、表示されている気象データが更新され、選択された単位が表示されます。

Configuration windows for the button and the check box

コードの非表示化

この例をダッシュボードとして表示し、コードを非表示にしてコントロールと結果のみが表示されるようにするには、[ビュー] タブに移動して [コードを非表示] をクリックします。これで、ユーザーは、ボタンをクリックして気象の更新を取得したり、チェック ボックスを切り替えて単位を変更したりして、ダッシュボードを操作できるようになりました。ライブ エディターは、ユーザーが指定した入力値に基づいて気象データを取得および表示します。

気象ダッシュボードのコード

このセクションでは、説明テキスト、コード、サンプル出力など、WeatherDashboard.mlx ライブ スクリプト ファイルの内容全体を示しています。

マサチューセッツ州ネイティックの気象

 
data = thingSpeakRead(12397,"NumDays",2,"Timeout",10,"OutputFormat","table");
latestValues = height(data);

useSIUnits = false;

if useSIUnits == 0
    disp("Current conditions: Temperature " + data.TemperatureF(latestValues) + ...
        "F, Humidity " + data.Humidity(latestValues) + "%, Wind " + ...
        data.WindSpeedmph(latestValues) + " mph")
    
    plotWeatherData(data.Timestamps,data.TemperatureF,"F",data.WindSpeedmph, ...
        "mph",data.Humidity)

else
    tempC = (5/9)*(data.TemperatureF-32);
    tempC = round(tempC,2);
    
    windkmh = data.WindSpeedmph*1.60934;
    disp("Current conditions: Temperature " + tempC(latestValues) + "C, Humidity " + ...
        data.Humidity(latestValues) + "%, Wind " + windkmh(latestValues) + "vkph")
    
    plotWeatherData(data.Timestamps,tempC,"C",windkmh,"kph",data.Humidity)
end
Current conditions: Temperature 85.7F, Humidity 45%, Wind 4.4 mph

Figure contains 3 axes objects. Axes object 1 with title Temperature (past 2 days), xlabel Date, ylabel Temp (F) contains an object of type line. Axes object 2 with title Humidity (past 2 days), xlabel Date, ylabel Humidity (%) contains an object of type line. Axes object 3 with title Wind (past 2 days), xlabel Date, ylabel Wind Speed (mph) contains an object of type line.

function plotWeatherData(timestamps,tempData,tempUnits,windData,windUnits,humidityData)
    tiledlayout(3,1);
    
    nexttile
    plot(timestamps,tempData)
    xlabel("Date")
    ylabel("Temp (" + tempUnits + ")")
    title("Temperature (past 2 days)")
    
    nexttile
    plot(timestamps,humidityData)
    xlabel("Date")
    ylabel("Humidity (%)")
    title("Humidity (past 2 days)")
    
    nexttile
    plot(timestamps,windData)
    xlabel("Date")
    ylabel("Wind Speed (" + windUnits + ")")
    title("Wind (past 2 days)")
end

関連するトピック