뇌 화면에 두 번째 버튼 추가하기 - C++

이제 학생들은 뇌의 화면을 하나의 큰 버튼처럼 다루는 경험을 쌓았으므로, 화면을 두 개의 버튼으로 바꿀 수 있습니다. 이 활동은 학생들에게 중첩된if then else문을 사용하여 조건문을 보다 효과적으로 관리하고 그렇게 하는 기본 논리를 소개할 것입니다. 학생들은 먼저 화면을 눌러 로봇을 좌우로 돌리는 프로젝트를 만드는 과정을 안내받습니다. 하지만 로봇을 왼쪽으로 돌렸던 버튼이 오른쪽으로 돌도록, 그리고 그 반대로 버튼을 바꾸라는 요청을 받습니다.

이 활동에서 사용된if then및if then else문장이나 기타 문장에 대한 자세한 내용은 VEXcode V5 내의 도움말 정보를 참조하세요. 이 기본 제공 도움말 도구에 대한 자세한 내용은C++의 도움말 관련 문서를 참조하세요.

이 활동에서 학생들이 할 일은 다음과 같습니다.

• StopOrDrive프로젝트와 픽셀 단위로 나타낸 뇌 화면의 레이아웃을 검토합니다.

• 프로그래밍 추론에 대한 지침을 받으면서 새로운LeftOrRight프로젝트를 빌드합니다.

• 화면의 버튼이 반대로 작동하도록 프로젝트를 수정합니다.

• 학습 확장: 화면을 두 개의 버튼으로 나누어 누르면 로봇이 좌우로 회전합니다.

이 섹션의 교수 전략에 대한 제안을 보려면 '해야 할 일 또는 하지 말아야 할 일 진행 가이드'의 전달 컬럼을 검토하세요! (Google 문서 / .docx / .pdf)

화면 중앙의 x 값은 화면 너비의 절반(픽셀)과 같습니다. 따라서 중심점의 x값은 240입니다. 학생들은 화면을 왼쪽이나 오른쪽으로 눌렀는지에 대한 조건을 프로그래밍하기 위해 이 숫자가 필요합니다. 따라서 모든 값이 올바른지 꼭 확인하세요.

앞으로 Rethink 섹션의 사용자 인터페이스 챌린지에서는 학생들에게 지금까지 배운 내용을 적용하여 화면에 4개의 버튼을 만들어야 합니다. 그러기 위해서는 x값과 y값이 모두 필요합니다.

추가 지원이 필요한 경우VEX 라이브러리의 보충 도움말 문서를 참조하세요.

테스트하는 동안 학생들은 Clawbot 뒤에서 사용자 인터페이스를 사용하면 반대로 작동하는 것처럼 보인다는 것을 알아야 합니다. 사용자 관점에서 볼 때, 클로봇은 사용자가 누르는 쪽에서 멀어집니다. 이는 최적의 사용자 경험이 아닙니다.

학생들은 엔지니어링 노트북에 이를 기록하면서 프로젝트에 대한 이러한 변경 사항을 계획, 테스트하고 개선해야 합니다. 개별 엔지니어링 노트북 평가 기준에 대해 다음 링크 중 하나를 클릭하세요(Google Doc / .docx / .pdf), 또는 팀 노트북에 대해 다음 링크 중 하나를 클릭하세요(Google Doc / .docx / .pdf). 학생들에게 작업을 시작하기 전에 점수 계산 방법을 설명하는 것을 잊지 마세요.

위에 제기된 문제를 해결하는 데는 두 가지 방법이 있습니다. 첫 번째 방법은 설명서에 적힌 방법입니다. LeftOrRight 프로젝트를 검토하고 사용자가 Clawbot 뒤에서 버튼을 누를 때 사용자가 화면 왼쪽을 누르면 로봇이 오른쪽으로 회전하도록 수정합니다. 그렇지 않으면 클로봇은 왼쪽으로 돈다.

// 프로젝트 코드
시작 int main() {
  // 로봇 구성 초기화. 제거하지 마세요!
  vexcodeInit();

  while (true) {
    Brain.Screen.pressing()인 경우 {
      Brain.Screen.xPosition()인 경우 < 240 {
        Drivetrain.turn(오른쪽);
        Brain.Screen.pressing()을 기다릴 때까지);
      } else {
        Drivetrain.turn(왼쪽);
        Brain.Screen.pressing()을 기다릴 때까지);
      }
    } else {
      Drivetrain.drive(전진);
    }
  }  
}  

다른 해결책은 x 값이 240보다 클 때 Clawbot이 왼쪽으로 회전하도록 Operator 명령을 전환하는 것입니다.

// 프로젝트 코드
시작 int main() {
  // 로봇 구성 초기화. 제거하지 마세요!
  vexcodeInit();

  while (true) {
    Brain.Screen.pressing()인 경우 {
      Brain.Screen.xPosition()인 경우 > 240 {
        Drivetrain.turn(왼쪽);
        Brain.Screen.pressing()인 경우 waitUntil);
      } else {
        Drivetrain.turn(오른쪽);
        Brain.Screen.pressing()인 경우 waitUntil);
      }
    } else {
      Drivetrain.drive(전진);
    }
  }  
}  

x 값이 240(화면 왼쪽)보다 작을 때 조건문을 프로그래밍할 때는 좌표 평면의 좌표를 사용해야 했습니다. 두뇌 화면에 시각적 버튼을 그리려면 좌표도 사용해야 합니다.
V5 로봇 두뇌 화면의 좌표가 표시된 2단계로 돌아갑니다.

Q:화면 오른쪽 가장자리의 x 값은 무엇입니까?
A:x 값은 왼쪽 가장자리의 0에서 오른쪽 가장자리의 480까지 증가합니다.

Q:따라서 x 값의 범위는 480(0~480)입니다. y 값의 범위는 무엇입니까?
A:y 값의 범위는 240(0~240)입니다.

Q:이 좌표 평면의 원점(0, 0)은 어디에 있습니까?
A:원점은 왼쪽 위입니다.

Q:y 값이 0일 때 화면 맨 위에 있습니다. 이게 왜 특이한 걸까요?
A:일반적으로 y값은 위로 갈수록 증가하지만, V5 화면에서는 아래로 갈수록 y값이 증가합니다. 하지만 화면 왼쪽 상단의 원점(0, 0)에서 멀어질수록 y 값이 증가하는 것으로 생각할 수 있습니다.

Rethink 섹션의 사용자 인터페이스 챌린지에서 학생들은 Clawbot의 발톱과 팔을 제어하기 위해 화면에 4개의 버튼을 만드는 프로젝트를 개발해야 합니다. 이 과제에서는 화면에 네 개의 버튼이 표시되도록 요청합니다. 이전 페이지와 마찬가지로 이 학습 확장은 해당 과제에 대비하는 데 도움이 됩니다. 과제에는 프로그래밍할 버튼이 4개 있지만 이 과제에는 2개만 있기 때문입니다.

학생들이 프로그램에 이벤트를 추가하여 프로젝트가 실행될 때 화면에 보이는 버튼 2개가 나타나도록 합니다. 학생들에게 이벤트에 대한 정보, 특히사각형 그리기지침 정보를 알아보려면 VEXcode V5의 도움말 기능을 사용할 것을 제안합니다. 학생들에게그리기 사각형블록에서 픽셀 수를 기준으로 뇌의 화면이 좌표계로 어떻게 구성되는지 검토하도록 지시합니다. 해당 블록 내에서 매개변수를 설정하려면 이를 이해해야 합니다. 또한, 이벤트를 방송하는 방법을 이해해야 합니다. 이 경우 이벤트는 버튼을 그리는 것입니다.

학생들은 엔지니어링 노트북에 이를 문서화하는 동시에 프로젝트에 대한 이러한 변경 사항을 계획, 테스트하고 개선해야 합니다. 개별 엔지니어링 노트북 평가 기준의 경우 다음 링크 중 하나를 클릭하세요(Google 문서 / .docx / .pdf), 또는 팀 노트북의 경우 다음 링크 중 하나를 클릭하세요(Google 문서 / .docx / .pdf).

다음은 예시 솔루션입니다.

// 프로젝트 코드 시작
이벤트 ScreenButtons = event();

void HasScreenButtons() {
  Brain.Screen.setFillColor(녹색);
  Brain.Screen.drawRectangle(0, 0, 240, 120);
  Brain.Screen.setFillColor(보라색);
  Brain.Screen.drawRectangle(240, 0, 480, 120);
  Brain.Screen.setFillColor(주황색);
  Brain.Screen.drawRectangle(0, 120, 240, 240);
  Brain.Screen.setFillColor(청록색);
  Brain.Screen.drawRectangle(240, 120, 480, 240);
  wait(1, 초);
}

int main() {
  // 로봇 구성 초기화. 제거하지 마세요!
  vexcodeInit();

  ScreenButtons(HasScreenButtons);

  while (true) {
    ScreenButtons.broadcast();

    Brain.Screen.pressing()인 경우 {

      Brain.Screen.xPosition()인 경우 < 240 {

        Brain.Screen.yPosition()인 경우 < 120 {
          ClawMotor.spin(앞으로);
          Brain.Screen.pressing()을 기다릴 때까지);

        } else {
          ClawMotor.spin(뒤로);
          Brain.Screen.pressing()을 기다릴 때까지);
        }
        
      } else {
        Brain.Screen.yPosition()인 경우 < 120 {
          ArmMotor.spin(앞으로);
          waitUntil(!Brain.Screen.pressing());

        } else {
          ArmMotor.spin(역방향);
          waitUntil(!Brain.Screen.pressing());
        }
      }
      ClawMotor.stop();
      ArmMotor.stop();
    }
    wait(5, 밀리초);
  }  
}  

더욱 전문적이고 사실적인 경험을 위해 학생들에게 두 가지 색상 선택에 대한 피드백을 요청해 보세요.
선택한 색상이 인터페이스를 사용하고 싶게 만드는가, 아니면 사용자 입장에서 어떤 색상을 선호할까?
훌륭한 사용자 인터페이스를 개발하는 과정의 일부는 사용자 경험, 심지어 미적 선호도에 대한 데이터를 수집하는 것입니다.