Noodl로 자체 제작 UI 만들기

개요
"MQTT로 통신하는 호출 시스템 구축"는 M5 Stack과 Noodl을 사용하는 자체 호출 시스템을 소개했다.여기에는 자세한 설명이 없고, 이번에는 해설편으로 노들(Noodl)의 UI 제작을 설명할 예정이다.
카탈로그

Noodl에서 개별 UI를 작성하려면

개별 UI의 사례

샘플 데이터

Github: 프로젝트 데이터

사이트 제목

1. Noodl에서 개별 UI를 작성하려면
3색 신호기의 경우 UI 제작 단계를 설명합니다.
이 신호기는 받은 MQTT 정보에 따라'정상, 호출, 이상'에 따라'녹색, 노란색, 빨간색'등을 켜는 기능을 한다.완료하면 다음과 같습니다.
삼색 신호기

신호 생성
3색 신호등을 만들기 전에 그 부품으로 라이트 부분을 만들자.Light은 외부에서 "켜짐: ON, 꺼짐: OFF, 깜박임: flashing"신호를 받아 이 상태에서 켜는 구성 요소입니다.
먼저
• Component를 다시 선택합니다.
Component에서
제작 기초팀.

① 신호표시: 그룹으로 램프 부분을 만든다.
불이 없는 상태에서 그룹으로 불이 켜진 상태 2개를 만들었다.
두 그룹이 겹치는 건 신호기가 사라질 때 펄럭이는 빛을 내기 위해서예요.
확대하면서 천천히 투명해지면서 잔상을 남기고 사라진다.
② LED 상태: Status 노드 제작 ON/OFF 상태
Status 노드는 상태 및 해당 상태의 Varule을 설정합니다.Group 등록 정보를 엽니다.
설정 중입니다.
컨디션
이미지
opacity
size(%)
ON
빨갛게 변하다
1
90
Off
조금 크게 사라졌어
0
100
③ 입력 상태 유지
외부에서 가져온 상태를 유지합니다.② LED의 상태를 변경한다.타이머를 시작하기 위해
States를 사용하고 있습니다.

ON: 스톱 켜기 + 타이머

OFF: 소등+정지 타이머

깜박임: 타이머 시작 중복 ON/OFF

④ 플래시 타이머
두 개의 Timer가 1초 동안 반복적으로 켜지고 깜박이는 무한 순환을 만듭니다.
입출력 부분 제작
ComponentInput에서 색상, ON/OFF 신호를 입력값으로 사용
3색 신호(컨트롤 부분)의 제작
이어 라이트의 3색 신호기 3개를 3라이트시그널로 제작했다.

① 시각부: 3색 신호
3개의 라이트 어셈블리가 기본 그룹으로 구성됩니다.
라이트는 On/Off 색상을 따로 설정하거나 좋아하는 색상으로 바꿀 수 있다.
② 신호 제어부
제어부는 Javascript 노드에서 작성됩니다.
입력한 값에 따라 제어합니다.
컨디션
신호 제어
유난히
빨강: 깜박임, 노랑: OFF, 녹색: OFF
호출
빨강: OFF, 노랑: 섬광, 녹색: OFF
정상이었어
빨강: OFF, 노랑: OFF, 녹색: ON
Javascript의 코드는 다음과 같습니다.
제어 부분

define({
    // The input ports of the Javascript node, name of input and type
    inputs:{
        // ExampleInput:'number',
        // Available types are 'number', 'string', 'boolean', 'color' and 'signal',
        mySignal:'signal',
        msg:'string',
    },

    // The output ports of the Javascript node, name of output and type
    outputs:{
        // ExampleOutput:'string',
        RSignal:'string',
        YSignal:'string',
        GSignal:'string',

    },

    // All signal inputs need their own function with the corresponding name that
    // will be run when a signal is received on the input.
    mySignal:function(inputs,outputs) {
        // ...
        //inputs.msg;
    },

    // This function will be called when any of the inputs have changed
    change:function(inputs,outputs) {
        // ...
        console.log(inputs.msg);
        outputs.RSignal="off";
        outputs.YSignal="off";
        outputs.GSignal="off";
        if(inputs.msg=="PressA"){
          //console.log("Alarm");
          outputs.RSignal="flashing";
          outputs.YSignal="off";
          outputs.GSignal="off";
        };
        if(inputs.msg=="PressB"){
          //console.log("Attention");
          outputs.RSignal="off";
          outputs.YSignal="flashing";
          outputs.GSignal="off";
        };
        if(inputs.msg=="PressC"){
          //console.log("Normal");
          outputs.RSignal="off";
          outputs.YSignal="off";
          outputs.GSignal="on";
        };

    }
})

③ 신호 입력
ComponentInputs 노드에서 외부 신호를 받아 구성 요소로 재사용할 수 있도록 합니다.
+Port를 사용하여 Inputs를 만듭니다.여기는 "msg"입니다.
이렇게 하면 완성된다.
이후 Status Value로 색상과 타이밍을 조정하면 완성됩니다.
2. 개별 UI의 사례
같은 순서로 다양한 UI를 만들었습니다.개별 UI 제작을 참조하십시오.
각 UI는 Component로 제작되므로 자체 프로젝트에서 Library로 가져와 재활용할 수도 있습니다.

Component
기능·비고
3LightSignal
삼색 신호기.라이트를 사용하기 때문에 가져오기가 필요합니다.
Radiobox
라디오 박스
Button_onoff
On/Off 버튼
Button_3icon
아이콘 팝업 버튼
Button_toggle
대형 라디오 섀시풍 버튼
Silder_box
디지털 선택 슬라이더
Slider_color
색상 선택용 슬라이더
GaugeCircle
계량기
Avator
M5 Stack 바람의 역변기.Message를 사용하기 때문에 가져오기가 필요합니다.
MovableBox
카드 스위치.왼쪽 및 오른쪽 원형 포크 선택
3. 요약
Noodl은 States 노드를 사용하여 상태를 변경합니다.상태에 대응하는 속성을 가져야 한다.State에 따라 속성을 변경할 때 자동 애니메이션 기능이 있습니다.제작된 UI는 Component로 재활용할 수 있습니다.완료된 프로그램은 > 이며, 자바스크립트로 export할 수 있습니다.
를 참고하십시오.