개요

Noodl Advent Calendar 13일째!

※Noodl은 무엇? 라는 분은 여기 가 공식 사이트입니다.

지금까지 Noodl 핸즈온이나 온라인 아카이브등 있어, Noodl을 접하는 쪽이 증가해 온 것이 아닐까요.

내가 Noodl을 만지고 있어 생각한 것이 「UI 만들었지만 여기에서 어떻게 하는 것인가」라고 하는 것입니다. Noodl은 프로토타이핑 툴이므로, 보수나 운용의 면을 생각하면 프로덕션의 운용에는 적합하지 않다고 합니다. (필자는 임베디드 소프트웨어 엔지니어이므로 이 근처 희귀합니다 ...)

하지만, 데모 전시나 사내 프리젠테이션용의 프로토 타입, 취미로 이용하는 용도에서는 꽤 편리한 툴입니다! (개인적 소감)

이번에는 Noodl의 UI를 배포하는 방법에 대해 설명하겠습니다. 배포하면 html 파일과 js 파일이 출력되므로 웹 서버에 두고 브라우저에서 웹 서버에 액세스하면 Noodl에서 만든 UI를 사용할 수 있습니다.

만든 것

Noodl의 배포 기능을 이용하여 디지털 사이니지를 만들어 보았습니다!
巷로 유행하고 있는 Raspberry Pi에 LCD 키트를 짜서 사이니지화하고 있습니다.
【기상 정보를 표시】


【집에 있는 수족관의 상태 표시】
※IoT 만들기 2에 전시했을 때의 사진입니다.

기술 해설

이번은 Nood Advent Calender라고 하는 것으로 Noodl의 배포 기능에 대해 접합니다. Noodl의 편집기 화면 오른쪽 상단에 버튼이 나열되어 있습니다. 그 안의 「원에 ↑」의 아이콘을 클릭합니다.


　하면 다음과 같이 "배포 하시겠습니까?"라는 메시지가 표시되므로 "PICK FOLDER"를 클릭합니다.



배포 대상 폴더를 선택하고 배포가 성공하면 다음과 같이 html 파일과 js 파일이 출력됩니다. 제 경우에는 문자 폰트(.ttf)나 이미지(.jpg)를 프로젝트에 읽어서 이용하고 있으므로, 그 파일도 출력되고 있습니다.



이 출력된 파일들을 Web 서버에 배치하면 OK입니다!

결론

최근, Noodl의 온라인 핸즈온 개최되었으므로 신경이 쓰이는 분은 여기 를 체크해 보세요.
디지털 사이니지화에 대해 더 자세히 알고 싶다면 여기를 참조하십시오.
htps : //k 마에푸. 보오 th. PM / MS / 1726666