Node-RED Dashboard 구성 요소에 이벤트 추가
5162 단어 node-redjQuerynode-red-dashboard
동기 : 버튼을 누르면 스마트 폰을 진동시키고 싶습니다.
이전 Node-RED Dashboard로 스마트 리모컨을 만들어 보았습니다. 입니다만, 스마트 폰상에서 버튼을 클릭했을 때에 「버튼 누른 느낌」을 갖고 싶다고 왠지 느꼈습니다 1 .
JavaScript에는 Vibration API이라는 하드웨어의 진동에 액세스 할 수있는 API가 있으므로, 이것을 사용해 버튼을 클릭했을 때에 조금 진동시켜 주면 좋을 것 같습니다.
다만, Node-RED Dashboard의 버튼은 클릭 이벤트를 설정하는 프로퍼티등은 없기 때문에, 조금 궁리가 필요했습니다.
조금 시도한 결과, 버튼 이외의 컴퍼넌트에도 범용적으로 이벤트를 설정할 수 있는 것 같은 방법이 있었으므로 메모해 둡니다.
환경
결론
ui_template 노드 사용 <head>セクションへ追加로 설정 document에 대한 선택기 이벤트를 설정합니다 (아래 이미지 참조) 
ui_template 노드
이 아이입니다. 대시보드의 사용자 지정 구성 요소를 만들 수 있습니다.
코드 종류별로
グループ内のWidget <head>セクションへ追加 두 가지를 선택할 수 있지만 이번에는
<head>セクションへ追加를 사용합니다.이것을 사용하는 것으로
<head> 태그내에 HTML 코드를 추가할 수 있으므로, <script> 태그를 사용해 임의의 JavaScript 코드를 포함할 수가 있습니다.jQuery에서 선택기로 이벤트 설정
Node-RED Dashboard는 AngularJS와 jQuery를 이용하여 만들어집니다.
따라서 클릭 이벤트를 추가 할 때 jQuery .on('click')에서 쉽게 추가 할 수 있습니다.
예를 들면 버튼은 <button class="md-raised md-button md-ink-ripple" type="button" ... 와 같이 출력되고 있으므로 2 , button.md-raised.md-button 등으로 지정하면 버튼을 선택할 수 있습니다 (※이 근처는 상당히 잡잡합니다).
다만, Dashboard의 컴퍼넌트는 동적으로 생성되므로, 이하와 같이 지정해도 움직이지 않습니다.
제대로 움직이지 않음<script>
$('button.md-raised.md-button').on('click', function() {
window.navigator.vibrate(10)
})
</script>
동적으로 생성된 항목에 대해 클릭 이벤트를 추가하려면 다음과 같이 document에 대해 선택기로 이벤트를 설정합니다.
제대로 움직이는<script>
$(document).on('click', 'button.md-raised.md-button', function() {
window.navigator.vibrate(10)
})
</script>
이를 적용하면 Dashboard의 구성 요소에 일반 이벤트를 추가하여 확장할 수 있습니다.
요약
<script>
$('button.md-raised.md-button').on('click', function() {
window.navigator.vibrate(10)
})
</script>
<script>
$(document).on('click', 'button.md-raised.md-button', function() {
window.navigator.vibrate(10)
})
</script>
이 때
ui_template 노드를 활용할 수 있습니다.<head>セクションへ追加를 사용하면 임의의 JavaScript 코드를 <head>에 포함할 수 있으므로 구성 요소에 대해 jQuery에서 다양한 이벤트를 설정할 수 있습니다.Dashboard는 디폴트로 컴퍼넌트가 갖추어져 있기 때문에 간단하게 사용할 수 있는 + 확장성도 높다, 라고 하는 구성이 되어 있으므로 좋네요.
이런 피드백을 주는 기술을 햅틱스이라고 합니다. ↩
Dashboard의 구성 요소는 아마도 AngularJS Material를 사용하고 있기 때문에 클래스를 사용할 수 있습니다. ↩
Reference
이 문제에 관하여(Node-RED Dashboard 구성 요소에 이벤트 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dozensofdars/items/92a9f8fc9a8ecf076d75텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
