JavaScript Keyboard Event 추가
최근 자바스크립트를 활용하여 키보드 이벤트를 설정할 수 있도록 keydown, keyup 이벤트를 추가했습니다.
1. 아래와 같이 X-SCADA Designer에서 도형, 텍스트 등을 활용하여 화면을 구성한다.
2. 스크립트 작성창에서 keydown, keyup 이벤트 스크립트를 작성한다.
page.addEventListener("keydown", function(event) { // 스크립트 keydown 이벤트 추가 가능 $XT("string_1").value = event.code;
if (event.code == "ArrowUp") { // 키보드 화살표 위쪽 누를 때 var x = $XV("triangle_1").x; var y = $XV("triangle_1").y; var angle = $XV("triangle_1").angle + 315; $XV("triangle_1").x += (2 * Math.cos(Math.PI * angle / 180) - 2 * Math.sin(Math.PI * angle / 180)); $XV("triangle_1").y += (2 * Math.sin(Math.PI * angle / 180) + 2 * Math.cos(Math.PI * angle / 180)); } else if (event.code == "ArrowLeft") { // 키보드 화살표 왼쪽 누를 때 $XV("triangle_1").angle-=2; } else if (event.code == "ArrowDown") { // 키보드 화살표 아래쪽 누를 때 var x = $XV("triangle_1").x; var y = $XV("triangle_1").y; var angle = $XV("triangle_1").angle + 315; $XV("triangle_1").x -= (2 * Math.cos(Math.PI * angle / 180) - 2 * Math.sin(Math.PI * angle / 180)); $XV("triangle_1").y -= (2 * Math.sin(Math.PI * angle / 180) + 2 * Math.cos(Math.PI * angle / 180)); } else if (event.code == "ArrowRight") { // 키보드 화살표 오른쪽 누를 때 $XV("triangle_1").angle+=2; }
// 키보드 누를 때의 결과를 로그로 볼 때 console.log("key=" + event.key); console.log("code=" + event.code); console.log("repeat=" + event.repeat); console.log("ctrlKey=" + event.ctrlKey); console.log("shiftKey=" + event.shiftKey); console.log("altKey=" + event.altKey); console.log("metaKey=" + event.metaKey); console.log("getModifierState=" + event.getModifierState(event.key)); }); page.addEventListener("keyup", function(event) { // 스크립트 keyup 이벤트 추가 가능 $XT("string_1").value = ""; }); |
3. 프로젝트 저장 후 X-SCADA Viewer로 실행한 뒤 키보드로 조작해본다.
4. X-SCADA Viewer에서 F12를 눌러 키보드 이벤트에 대한 로그를 확인한다.
