Noodl 2.0β버전의 기능 프레젠테이션을 만들어 보았습니다(실장편2: 시각적 상호작용)

개요
Noodl 버전0β이것은 사용판으로 제작된 기능 시연이다.
누드가 뭘 할 수 있는지 처음 파악했어.
목적은 각 기능을 어떻게 실현하는지 참고하는 것이다.
이번에는 시각적 상호작용으로 계수기와 타이머의 설치 방법을 설명한다.
카탈로그
기능 소개
1. Noodl 2.0β기능 프레젠테이션을 해봤어요.
실장편
1. 시각적 상호작용
2. 비주얼 인터랙티브 2 ← 이번 보도
3. 탐색 및 구성 요소
4. 단일 페이지 어플리케이션
샘플 샘플 데이터의 이용
・GiitHub의 [장비] https://macole.github.io/Noodl2_LibDemo/index.html
・GiitHub의 샘플 데이터 및 구축 절차

Github ~/Noodl2libDemo 이하의 PC를 Clone하십시오.

프로젝트 >Import exsisting 프로젝트에서 Noodl2로 Noodl2 시작libDemo를 선택하십시오.

Library Add Material UI Kit에서 시작하십시오.

주의 사항
• 이번 시위는 Ver2입니다.0β판으로 제작 중입니다.Ver1.3 움직이지 않는다.
1. 버튼 설치
3가지 버튼을 설치합니다.
그래픽 버튼 설치 예

1-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드입니다.
Text
텍스트를 나타내는 노드입니다.
Circle
원형 노드.
States
상태를 유지하는 노드입니다.
ColorBlend
두 가지 이상의 색을 혼합한 노드.
Switch
On/Off 상태만 유지되는 노드입니다.States처럼 밸류(Value)를 소유할 수 없습니다.
1-2. 노드 구성 및 연결
전체 그림 노드

단추는 빨간 상자 노드의 조합을 통해 실현할 수 있다.
그림 색상 변화 단추의 노드 설정

Circle을 클릭하여 States의 Togle을 변경합니다.States에 따라 Color를 변경하고 ColorBlend를 사용하여 색상을 변경합니다.
변경 결과의 ColorBlend:Result를 Circl:Color에 연결합니다.
도형 슬라이딩 스위치의 노드 설정

Group에서 두 개의 Box를 생성하고 States를 통해 Box의 x 좌표를 변경합니다.
노드는 State 값 x를 Group의 PoxX(X 좌표)에 연결합니다.
그림 스위치의 노드 설정

Switch 노드는 StartState(초기 상태)를 On으로만 설정합니다.
Switch의 현재 상태 State를 Circl의 Fill(채우기)에 연결합니다.
2. 카운터 설치

2-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드입니다.
Text
텍스트를 나타내는 노드입니다.
MuiList
버튼 정렬에 사용되는 목록 노드
MuiButton
UI 버튼 노드
Counter
계수기용 노드.
그래픽 노드 설정

MaxValue(최대)가 Counter에 설정되어 있습니다.
MuiButon은 버튼용 노드입니다.이 노드는 Other: 컬러를 사용합니다.Other: variant를 사용하여 스타일을 설정합니다.
2-2. 노드 구성 및 연결
전체 그림 노드

카운터의 Increaase Count, Decreaase Count에 버튼을 입력하여 카운터를 증감합니다.
Counter 값은 현재 Count에서 가져올 수 있습니다.
3. 타이머 설치

3-1. 사용할 노드
노트
설명
Text
텍스트를 나타내는 노드입니다.
Group
그룹 노드에 사용되는 노드입니다.
MuiButton
UI 버튼 노드
Timer
타이머용 노드.
Counter
계수기용 노드.
그래픽 노드 설정

타이머가 Start 이후 설정된 시간(ms)만 지나면 Finished로 돌아갑니다.
타이머 2개를 조합하여 초당 Finished를 반복하는 무한 사이클을 생성합니다.
3-2. 노드 구성 및 연결
전체 그림 노드

4. 비디오 설치

4-1. 사용할 노드
노트
설명
Video
비디오 파일을 재생하는 노드입니다.
MuiList
버튼 정렬에 사용되는 목록 노드
MuiButton
UI 버튼 노드
그림 비디오 노드 설정

비디오의 소스(Source), 일시 중지된 이미지(Poster), 자동 재생(Autoplay), 반복(Loop)
4-2. 노드 구성 및 연결
전체 그림 노드

Video 노드는 Group의 하위 요소로 구성됩니다.이후 무이 버튼에서 비디오 노드를 연결하는 재생성(Play), 중지(Pause), 재설정(Reset)만 수행됩니다.
5. 아이콘 선택기 설치

5-1. 사용할 노드
노트
설명
MuiButton
UI 버튼 노드
TextInput
문자 입력 노드.
Mui Icon
아이콘 노드입니다.
Text
텍스트 노드.
Counter
계수기용 노드.
StringSelector
여러 문자열 중에서 선택합니다.
Expression
간단한 공식으로 독자적인 계산을 하다.
그림 각 노드의 설정

카운터(5)의 카운터에서 선택한 아이콘의 번호를 차례로 선택하기 위해 최소(MinValue), 최대(MaxValue)의 범위 제한(LimitsEnaveled)을 설정합니다.
String Selector(6)에서 샘플로 사용할 아이콘의 이름을 정의합니다.
Explession(7)에서 조건 판정이 형식에 설정되어 있습니다.Counter==11에서 Counter 값이 11이면 실제 값이 Result로 반환됩니다.
5-2. 노드 구성 및 연결
전체 그림 노드

주요 노드 연결
• Counter(5): 현재 Count→StringSelector(6): Index 카운터에서 StringSelecor의 인덱스 선택
・Counter(5): 현재 Count→ Explession(7): Counter 카운터의 수치 확인
・Explession(7): Result → Counter(5): ResetToStart 카운터의 수치가 범위를 벗어나지 않도록 카운터를 재설정합니다.
・String Selector(6): 현재 Value → Muiicon(3): icon이 선택한 아이콘 이름으로 아이콘 노드를 선택한 icon
또한 아이콘 이름을 직접 입력하여 확인할 수 있도록 텍스트 상자에서 아이콘 노드를 직접 연결합니다.
・Text Input(2):text⇒Mui icon(3):icon
6. 애니메이션의 실현

6-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드입니다.
Text
텍스트를 나타내는 노드입니다.
Circle
원형 노드.
States
상태를 유지하는 노드입니다.
그림 Animation 노드 설정

Animation 노드는 애니메이션에 필요한 수치의 부드러운 변화를 제어합니다.노드별로 아래의 "+Port"추가 값 Angle을 설정합니다.Angle의 EndValue는 90으로 설정됩니다.
그림 Animation Properties: EasingCurve 설정

6-2. 노드 구성 및 연결
전체 그림 노드

Circle은 StartAngle=0, EndAngle=360으로 설정됩니다.이 Angle을 부드럽게 변경하여 애니메이션을 만듭니다.EndValue에 연결합니다.이후 무이부톤에서만 애니메톤의 재생(PlayToEnd), 역재생(PlayToStart), 재설정(JanpToStart)을 연결한다.
States 노드도 수치의 매끄러운 변화를 실현할 수 있기 때문에 순간적인 변화에서 모두 사용할 수 있다.Animetion은 애니메이션의 길이를 Duration(ms)으로 지정할 수 있습니다.
총결산
이번에는 실장편으로 시각과 상호작용에 대한 해설을 진행했다.

시각적 상호작용

시각적 상호작용 2

탐색 및 구성 요소

단일 페이지 어플리케이션

참고 문헌
・Noodl 공식
・Noodl 문서
・Qitta>Noodl을 사용하여 색상 변경 On/Off 버튼 만들기
・디자인 문외한이 Noodl에서 허구 케이크 가게의 사이트 UI를 만들어 보았다
·Material Icons Noodl의 Mui Icon에서 사용하는 아이콘은 이 아이콘의 일부분입니다.