(MATLAB) uihtml 로그인 기능 (hide password)

요구사항

  • Password 입력 내용 감추기 (* 표시 등의 방법으로)
  • 미입력 input 칸 안내 문구 및 focusing
  • 엔터 또는 login 버튼 클릭으로 로그인 시도
  • ID, Password 모두 입력 시에만 MATLAB으로 입력 데이터 전송

결과 이미지

ID 미입력 안내

Password 미입력 안내

정상 입력 시 MATLAB으로 데이터 전송

기능 구현

Appdesigner

  • HTML 컴포넌트 생성 (드래그 앤 드롭)

  • HTML Source 입력 (mlapp 파일과 같은 폴더로 가정)

  • DataChangedFcn callback 추가

    • Javascript 내 htmlComponent.Data 값이 변경되면 callback되는 함수

HTML

  • Login form 생성 (body 내)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section>
      <form class="login" action="submit">
        <div class="input-box">
          <input type="text" id="id-input" placeholder="User ID" />
          <input type="password" id="password-input" placeholder="Password" />
        </div>
        <div class="login-button-box">
          <button class="login-button" id="login-button">Login</button>
        </div>
      </form>
      <span class="login-status">ID, Password를 입력하십시오</span>
    </section>

Javascript

  • Body 내부에 script 문 추가
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <script type="text/javascript">
      function setup(htmlComponent) {
        const loginSubmit = document.querySelector(".login");
        const id = document.querySelector("#id-input");
        const password = document.querySelector("#password-input");
        const loginStatus = document.querySelector(".login-status");
        loginSubmit.addEventListener("submit", function (event) {
          event.preventDefault();
          if (!id.value) {
            loginStatusText = "ID를 입력하십시오";
            id.focus();
          } else if (!password.value) {
            password.focus();
            loginStatusText = "Password를 입력하십시오";
          } else {
            loginStatusText = "Good!";
            htmlComponent.Data = [id.value, password.value];
          }
          loginStatus.innerText = loginStatusText;
        });
      }
    </script>
  • 필요 동작을 function setup(htmlComponent) 내부에 작성
    • MATLAB HTML 객체와의 데이터 교환을 위한 기본 문법
  • Input value가 blank 인 경우 입력 요구 문구 출력 및 해당 input 창 focus
  • ID, Password가 모두 입력된 경우 htmlComponent.Data를 변경
  • htmlComponent
    • MATLAB에서 HTML 객체로 전달해주는 컴포넌트 변수
    • 이 변수를 통해 MATLAB HTML 객체의 DataChangedFcn을 호출

전체 소스코드 (링크)

https://github.com/chopthal/matlab/tree/master/hide_password_uihtml

Reference

uihtml