라이브 편집기를 사용하여 실시간 대시보드 만들기

라이브 편집기에서 대시보드를 만들어 실시간 데이터를 표시하고 분석할 수 있습니다. 이러한 대시보드를 만들면 버튼을 사용하여 요청 시 실시간 데이터를 가져와 표시하고 기타 대화형 방식 컨트롤을 사용하여 표시된 데이터를 수정할 수 있습니다. 대시보드에 서식 지정된 텍스트, 컨트롤 및 결과만 표시하려면 코드를 숨기십시오.

이 예제에서는 라이브 편집기에서 간단한 날씨 대시보드를 만드는 방법을 보여줍니다. 이 대시보드에서는 버튼과 체크박스를 사용해 실시간 날씨 데이터를 가져와 표시합니다.

날씨 대시보드를 살펴보고 사용해 보려면 MATLAB®에서 이 예제를 여십시오.

대시보드 만들기

MATLAB에서 이 예제를 열어 날씨 대시보드의 복사본을 열 수 있습니다. 대시보드를 직접 다시 만들기 위해 WeatherDashboard.mlx라는 이름의 라이브 스크립트를 만듭니다. 그런 다음 설명 텍스트와 코드를 추가하고 컨트롤을 구성하고 코드를 숨깁니다.

코드 추가하기

ThingSpeak™ 채널 12397에서 실시간 데이터를 가져와 표시하려면 날씨 대시보드에 대한 코드 섹션의 설명 텍스트와 코드를 복사합니다. 이 채널은 매사추세츠주 네이틱에 있는 Arduino 기반 기상 관측소에서 날씨 데이터를 수집합니다.

컨트롤 구성하기

이 대시보드는 표시된 날씨 데이터를 업데이트하는 버튼과 사용된 단위를 전환하는 체크박스를 사용합니다.

사용자가 코드를 복사하면 컨트롤이 현재 값으로 대체됩니다. 컨트롤을 코드에 다시 추가하려면 라이브 스크립트 시작 부분에 버튼을 삽입하고 useSIUnits 변수를 체크박스로 바꿉니다. 그런 다음 컨트롤을 마우스 오른쪽 버튼으로 클릭하고 컨트롤 구성을 선택한 후 다음과 같이 컨트롤 옵션을 지정하여 컨트롤을 구성합니다.

• 버튼 — 레이블을 Update로 설정하고 Run 실행 옵션을 Current section으로 설정합니다. 사용자가 버튼을 누르면 현재 섹션의 코드가 실행되고 대시보드에 표시된 날씨 데이터가 업데이트됩니다.

• 체크박스 — 레이블을 Use SI units로 설정하고 Run 실행 옵션을 Current section으로 설정합니다. 사용자가 체크박스를 선택하거나 선택을 해제하면 표시된 날씨 데이터가 선택한 단위를 표시하도록 업데이트됩니다.

코드 숨기기

코드를 숨기고 컨트롤과 결과만 표시한 상태에서 예제를 대시보드 형태로 보려면 보기 탭으로 이동한 다음 코드 숨기기를 클릭합니다. 이제 사용자는 날씨 업데이트를 가져오는 버튼을 클릭하고 단위를 변경하는 체크박스를 전환하는 식으로 대시보드와 상호 작용할 수 있습니다. 라이브 편집기는 사용자가 제공한 입력값에 따라 날씨 데이터를 가져와 표시합니다.

날씨 대시보드에 대한 코드

이 섹션에서는 설명 텍스트, 코드, 샘플 출력값을 포함하여 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 41.3F, Humidity 93%, Wind 1.1 mph

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

관련 항목

• 라이브 편집기에서 라이브 스크립트 만들기
• MATLAB Live Script Gallery