2022-10-25
#1 [정리] WebUI 접속 및 사용 방법
2022-10-25
Tasks

목차#


WebUI 접속 URL 확인#

V-Raptor SQ nano 전면에 있는 OLED Display에 WebUI에 접속할 수 있는 정보가 표시됩니다

  • IP가 192.168.0.99 인 경우, 브라우저를 통해 http://192.168.0.99:5000 으로 WebUI에 접속할 수 있습니다

54151-2022-10-25-16-40.png

WebUI 란?#

  • V-Raptor SQ nano를 보다 쉽게 사용하고, 관리할 수 있도록 관련된 기능을 제공하는 Web Interface입니다

로그인 화면#

38138-2022-10-25-16-53.png


홈 화면#

9411-2022-10-25-16-43.png

제품 부분#

36835-2022-10-25-16-55.png

  • 제품명과 운영체제 및 시리얼 번호 등이 표시됩니다

시스템 부분#

30186-2022-10-25-16-56.png

  • V-Raptor SQ nano의 관리 Software의 버전 정보를 표시하고, 최신 버전이 있는 경우 업데이트할 수 있도록 관련 UI가 제공됩니다

관리 Software의 종류#

V-Raptor SQ nano에는 3가지의 관리 Software가 작동합니다

  • 펌웨어#

    • 이 Software는 제품의 전원 및 전면에 있는 OLED 제어를 담## 페이지 설정 부분당하고 있습니다
  • 데몬#

    • 이 Software는 제품 전면에 펌웨어와 밀접하게 통신하여, OLED에 표시할 정보와 펌웨어 업데이트 등을 관리합니다
  • Web#

    • 이 Software는 사용자가 보다 쉽게 제품을 사용할 수 있도록 관련 Web Interface를 제공합니다

데몬/Web 업데이트 부분#

11957-2022-10-25-18-6.png

  • 최신 Software를 사용할 수 있는 경우 관련 버튼이 활성화 됩니다

펌웨어 업데이트 부분#

18390-2022-10-25-18-7.png

  • 최신 Software를 사용할 수 있는 경우 관련 버튼이 활성화 됩니다
  • 또한, 수동으로 펌웨어를 업데이트할 수 있는 기능을 제공합니다
  • 펌웨어 업데이트한 후 제품의 전원을 끌 때 업데이트가 적용됩니다
    • $ sudo power off 또는 제품의 전원 스위치를 한 번 클릭하여 업데이트를 적용할 수 있습니다

자원 부분#

8215-2022-10-25-17-23.png

  • V-Raptor SQ nano의 CPU/메모리/디스크와 같은 주요 자원의 사용 상태를 표시합니다

센서 부분#

14655-2022-10-25-17-24.png

  • 현재 제품의 온도와, 고온 경고를 표시할 기준 온도를 설정할 수 있는 기능을 제공합니다

    고온 경고?#

    제품의 온도가 설정한 기준 온도를 초과 했을 때, OLED의 화면을 점멸하여 사용자에게 알리는 기능입니다

네트워크 부분#

11432-2022-10-25-17-51.png

  • V-Raptor SQ nano의 Network를 설정할 수 있는 기능을 제공합니다

터미널#

18979-2022-10-25-16-44.png

  • V-Raptor SQ nano를 원격으로 사용해볼 수 있는 Web 터미널을 제공합니다

    복사/붙여넣기#

    텍스트를 드래그하고 Ctrl + C 를 통해 복사할 수 있으며,
    Ctrl + Shift + V 를 통해 붙여넣기 할 수 있습니다

    로그인 정보#

    로그인 계정은 WebUI에 접속할 때 사용하는 것과 동일합니다

디스플레이#

39149-2022-10-25-16-44.png

동작 설정 부분#

  • 제품 전면에 있는 OLED Display는 최대 5개의 Page를 지정된 주기에 따라 전환할 수 있습니다
  • 또는, 지정된 Page를 상시 표시하도록 설정할 수 있습니다

페이지 설정 부분#

  • OLED Display에 사용자 정의 문자열을 출력할 수 있는 3개의 Page가 제공됩니다
  • 각 Page에 표시되는 내용이 없는 경우, Page의 표시가 생략됩니다

    설정 예시#

    48273-2022-10-25-17-55.png 8929-2022-10-25-17-56.png
    위와 같이 설정하는 경우, OLED Display에 다음과 같이 표시됩니다
    36160-2022-10-25-17-56.png

자습서#

3441-2022-10-25-16-52.png

  • V-Raptor SQ nano 를 사용하는 방법과 활용해볼 수 있는 예제 프로젝트 등을 제공하는 Page로 이동할 수 있는 버튼입니다

제품 문의#

47981-2022-10-25-16-52.png

  • XSLAB 제품관련 문의를 작성할 수 있는 페이지로 이동할 수 있는 버튼입니다
Comment 1

    • Markdown help
    • Header
    • Text Style
    • Link
    • List
    • Checklist
    • Image
    • Blockquote
    • Code
    • Table
    • Short Link
    • PlantUML
    • Markdown Input
      Markdown Output
      # This is an H1
      ## This is an H2
      ### This is an H3
      
      # This is an H1 ## This is an H2 ### This is an H3
    • Markdown Input
      Markdown Output
      *This is an italic*
      **This is a bold**
      ~~This is a strike~~
      
      <red>This is Red</red>
      <green>This is Green</green>
      <blue>This is Blue</blue>
      
      *This is an italic* **This is a bold** ~~This is a strike~~
      This is Red This is Green This is Blue
    • Markdown Input
      Markdown Output
      - Red
          1. White
          2. Blue
      - Green.
      
      - Red 1. White 2. Blue - Green
    • Markdown Input
      Markdown Output
      - [ ] Todos
          - [x] To do A
          - [ ] To do B
          - [ ] To do C
                          
      • Todos
        • To do A
        • To do B
        • To do C
    • Markdown Input
      Markdown Output
      ![title](https://repo.yona.io/assets/images/ico-like-small.png "Yobi")
      
      ![title](/assets/images/ico-like-small.png "Yobi")
    • Markdown Input
      Markdown Output
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      >
      > Aenean commodo ligula eget dolor.
      
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. > > Aenean commodo ligula eget dolor.
    • Markdown Input
      Markdown Output
      `function test() {console.log("hello world");}`
      
      ```javascript
      function test() {
        console.log("hello world");
      }
      ```
      
      `function test() {console.log("hello world");}` ```javascript function test() { console.log("hello world"); } ```
    • Markdown Input
      Markdown Output
      | Default      | Align center | Align right |
      | ------------ | :----------: | ------: |
      | Carrot       | Red          | 1,000   |
      | Banana       | Yellow       | 32,000  |
      
      | Default | Align center | Align right | | ------------ | :----------: | ------: | | Carrot | Red | 1,000 | | Banana | Yellow | 32,000 | Also, you can copy & paste table from excel sheet
    • Markdown Input
      Markdown Output
      ```plantuml
      Bob -> Alice : hello
      ```
      See More Info: [PlantUML](https://plantuml.com/ko/)
      
      [PlantUML Online Server](https://plantuml.xslab.co.kr/)
      

      ![](https://plantuml.xslab.co.kr/svg/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)

      See More Info: [PlantUML](https://plantuml.com/ko/) [PlantUML Online Server](https://plantuml.xslab.co.kr/)
    Notification receivers
    Drag & Drop files here to upload.
    Tasks

    안녕하세요, 대시보드용 해당 Python 기반 웹페이지를 k8s로 이관하여 사용하고 싶은데요.

    대시보드용 API는 호스트(SQ nano)의 어디를 참조하는지 몰라서 헤메고 있습니다.

    온도나 하드웨어 정보, SSH 접속 및 Static IP를 전부 끌고 오는 것 같은데
    참조할 만한 부분 등을 도움 주시면 감사하겠습니다.

    • nginx를 걷어내야해서, 참고하고자 합니다.

    ps. 관련하여 nginx 커스텀 하신 부분이 아래 외에도 있을까요?

    • /usr/share/nginx/modules-available/mod-http-xslt-filter.conf
      • /etc/nginx/modules-enabled/50-mod-http-image-filter.conf : 동일 파일(symbolic)
      • 비고: 모듈과 같은 경우에는 so로 컴파일하기 전 소스 확인 불가하네요.
    • /opt/xmas-nano/xmas-nano.conf
      • /etc/nginx/sites-available/xmas-nano.conf : 동일 파일(symbolic)
      • /etc/nginx/sites-enabled/xmas-nano.conf : 동일 파일(symbolic)
    Reply
Add a comment