아이러브카페 제어반 사용설명서

최종수정일: 2021.12.9

제어반 대시보드 접속방법

접속주소: http://ilovecafe.duckdns.org:60080/

위의 주소로 접속하여 아이디(이메일): ilovecafe@gangnam2 로 접속한다. (비밀번호 문의 필요)

위와 같은 대시보드 페이지를 볼 수 있다.

제어 규칙 및 스테이지 장면 관리

‘블록코딩’메뉴로 진입한다.

  • 저장하기 : 블록코딩으로 작성한 프로그래밍 내역을 저장한다. (아직 미구현)
  • 새 규칙: 새로운 규칙, 스테이지 장면을 생성한다.
  • 삭제: 현재 선택된 규칙, 스테이지를 삭제한다.
  • 비활성화 / 활성화 : 현재 선택한 규칙을 비활성화 / 활성화 한다. ‘비활성화’ 버튼이 보인다면 현재 선택한 규칙이 활성화 돼 있는 상태이다.

  • 배경화면 업로드 메뉴를 이용하여, 지정한 스테이지의 화면에서 이용할 배경화면을 선택하여 업로드할 수 있다.

스테이지 화면 실행

  • 강남 2호점 ‘아이러브카페’ 테마 방에 설치된 프로젝터에 해당 화면이 나타남
  • http://ilovecafe.duckdns.org:60080/unreal_game.heitu 주소에서도 해당 화면을 볼 수 있으나, 현장의 화면 해상도와 접속기기의 해상도가 다를 수 있음에 유의
  • 활성화된 스테이지의 화면이 나오게 됨.
활성화 버튼을 눌러야 새로운 화면이 적용됨

배경음악 재생시키기 (javascript 활용 예시)

1.파일업로드하기

‘전용 리소스’ 혹은 ‘공용 리소스’ 업로드 기능을 이용하여, 소리효과에 사용할 파일을 업로드한다. mp3 포맷의 파일을 추천한다. ‘전용 리소스’ 업로드 경로는 ‘assets/unreal/[규칙이름]/[파일이름]’ 이다.

2.자바스크립트 작성

자바스크립트 부분을 작성한 후 저장한다. 예시 코드는 아래와 같다.
//배경음악설정 시작
var bgm = new Audio('assets/unreal/123/mi_ringtone.mp3');
//배경음악으로 사용할 파일의 경로를 입력
bgm.loop = true; // true: 계속반복, false: 한번만재생
bgm.volume = 0.5; //0 - 1 사이값
. 1이 최대 음량
bgm.play();
//배경음악설정 끝

//시간지연재생 시작
var audio1 = new Audio('assets/unreal/123/Beep.mp3');
 // 효과음으로 사용할 파일의 경로를 입력
setTimeout(function() {audio1.play();}, 10000);
 //10000ms = 10초 후에 오디오 재생
//시간지연재생 끝

스테이지 이동 (javascript)

go_stage("stage_number"); //이동하고픈 stage_number

현재 RFID 인식 조회

현재 접속중인 URL과 경로를 다음과 같이 입력하면 현재 통신하고있는 RFID 카드 번호를 조회할 수 있습니다. 이 때에, RFID 블록 도구를 추가한 상태의 스테이지를 활성화하였을 경우에만 RFID 조회가 정상적으로 이루어집니다.

[URL]/unreal_resistor?action=read&address=[나노파이 고유아이디]_response
예시: http://ilovecafe.duckdns.org:60080/unreal_resistor?action=read&address=UR018860314_response

시리얼통신 명령 및 응답

분류명령어응답설명
로터리인코더encoder00 – 30 (정수, 텍스트형식)로터리인코더 1개만 연결된 기기
encoder0_reset0 (정수, 텍스트형식; 숫자 초기화)
encoder10 – 30 (정수, 텍스트형식)로터리인코더 3개 연결된 기기 중 하나
encoder1_reset0 (정수, 텍스트형식; 숫자 초기화)
encoder20 – 30 (정수, 텍스트형식)
encoder2_reset0 (정수, 텍스트형식; 숫자 초기화)
encoder30 – 30 (정수, 텍스트형식)
encoder3_reset0 (정수, 텍스트형식; 숫자 초기화)
스위치 인풋dinput1json 형식.
키 : D2 – D13 (단자번호)
값: 0 ,1 (꺼짐, 켜짐)
키:sequence_output
값: 최근20개 켜진 스위치 순서.
스위치 인풋
마이크센서shout10 – 100 (정수, 텍스트형식)큰 소리를 인식하면 랜덤 값만큼 숫자가 증가.
최대 100
shout1 명령 시 숫자를 반환
shout1_reset0 (정수, 텍스트형식; 숫자 초기화)소리 누적값을 0으로 재설정

인코더 설정 예시

센서-버튼정보 수신하여 반응하기

html

<span id = "abctest">
this content
</span>

javascript

    var get_status_running_custom = 0;
    function refresh_custom() {
        var get_status_running_custom = 1;
        $.ajax({
            url: "/unreal_resistor?action=read&address=UR01880030D_response",
            success: function (response) {
                var response_dict = JSON.parse(response["msg"]);
                //console.log("시퀀스: " + response_dict["sequence"]);
console.log(response);
$("#abctest").html(response_dict["sequence"]);
                var get_status_running_custom = 0;
            }
        })
    }

    var auto_refresh = setInterval(function () {
        if (get_status_running_custom == 0) {
            refresh_custom();
        }
    }, 1000);

텔레비전화면 , 배경음악 제어 (블록코딩)

텔레비전 화면 제어는 메시지 저장 블록을 이용하여 주소에 ‘extra_screen1’을, 메시지는 스테이지 넘버를 입력한다.

배경음악 제어는 메세지 저장 블록은 이용하여 주소에 ‘ extra_screen2’을, 메시지는 배경음악을 넣어 둔 스테이지 넘버를 입력한다. 배경음악을 끌 경우에는, 배경음악이 없는 스테이지를 메시지에 넣어서 제어한다.

타이머 제어

왼쪽메뉴의 ‘게임타이머’기능을 이용하여 타이머 제어 기능 구현.

CSS를 이용하여 타이머 div의 스타일을 지정 가능하다. 이 때에 타이머요소의 ID는 timer_remain이므로, css작성 시 선택자는 #timer_remain 으로 한다.

게임시작버튼을 누르면, 게임종료 시간은 유닉스타임 (타임스탬프) 형태로 ‘unreal_game_timer’ 레지스트리에 보관된다. 게임정지 버튼을 누를 시, 레지스트리에 저장된 게임 종료시간이 0이 된다. 시간추가/감소 영역의 버튼을 눌렀을 때엔, 위의 레지스트리에 저장된 게임종료시간이 해당하는만큼 변화한다.

게임시작, 혹은 게임정지 버튼을 누를 시 앞서 언급한 unreal_game_timer레지스트리와 동시에 unreal_game_timer_org 레지스트리에도 같은 값이 저장된다. 이 레지스트리에 저장된 값은 시간추가/감소 버튼의 영향을 받지 않는다.

shua_unreal?action=read&address=unreal_game_timer 에 저장된 값의 예시는 다음과 같다. (shua_unreal?action=read&address=unreal_game_timer_org 에 저장된 값도 같은 형식이다.)

{"msg":"1629555548.683416"}

Javascript로 현재시간과 게임종료시간을 비교하여, 게임 종료시간까지 남은 시간을 나타내는 코드는 다음과 같다.

	function timer_refresh() {
		var timer_status_running = 1;
		$.ajax({
			url: "/shua_unreal?action=read&address=unreal_game_timer",
			success: function (response) {
				var end_timestamp = Number(response["msg"]) * 1000;
				var end_datetime = new Date(end_timestamp);
				var now_timestamp = + new Date();
				//console.log("종료시점", end_timestamp);
				//console.log("현재시점", now_timestamp);
				remain_s = (end_timestamp - now_timestamp)/1000;
				remain_hours = Math.floor(remain_s / 3600);
				if(remain_hours<10){remain_hours = "0" + String(remain_hours);}
                remain_minutes = Math.floor((remain_s-Number(remain_hours)*3600) / 60);
				if(remain_minutes<10){remain_minutes = "0" + String(remain_minutes);}
                remain_seconds = Math.floor(remain_s % 60);
				if(remain_seconds<10){remain_seconds = "0" + String(remain_seconds);}
				if (remain_s > 0) {

					$("#timer_remain").html(remain_hours+":"+remain_minutes +":"+remain_seconds);
				}
				else {

					$("#timer_remain").html("게임시작 대기중");
				}

				var timer_status_running = 0;
			}
		})
	}

블록코딩 타이머 제어

게임 타이머는 게임종료시간을 unreal_game_timer 레지스트리에 저장되므로, 이를 잘 활용하면 블록코딩으로 타이머를 제어할 수 있다.

타이머 종료

게임시간 10초 증가

단, 위와 같이 코딩했을 경우에는 코드가 반복실행되면서 게임종료시간이 10초씩 늦춰지게되므로, 단 한 번만 코드를 실행해야 할 경우엔, 아래 코드를 이용한다.

EN / EN1 스테이지 특별 제어 요소

EN, EN1 스테이지로 이동할 수 있는 특별한 방법.

EN, EN1스테이지를 제외한 어느 스테이지에서든지 en, 또는 en1 주소에 1의 값을 넣으면, EN 또는 EN1 스테이지로 이동하게되며, 이 때에 en, en1 주소의 값은 0이 된다.

EN, EN1 스테이지에 위치해 있을 때에는 en 또는 en1 주소에 2의 값을 넣으면 직전에 위치했던 스테이지로 돌아가게된다.

예를들면, EN 페이지에서 위의 블록을 블록코딩 마지막에 삽입하게되면, 모든 작업이 끝난 후 직전 페이지로 돌아가게 된다.