JBE: STM32 펌웨어 - 02. GUI를 만들어 보자

언어는 파이썬, 그래픽 라이브러리는 kivy를 사용한다.

Python : 3.6.4 32-bit
Kivy : v1.11.1

Phase 1. 첫번째 GUI 😆

kivy를 사용하는 기본 형태는 이런식이다.

from kivy.app import App
from kivy.uix.label import Label

class MQTTtest_GUIv001(App):
    def build(self):
        return Label(text = "MQTT-test GUI v001")

MQTTtest_GUIv001().run()

Phase 2. 두번째 GUI

KV Language를 사용하여 GUI 디자인을 할 수 있다. Phase 1과 출력은 동일함.

이 후 소스는 MQTTtest_GUIv001.py와 MQTTtest_GUIv001.kv 파일 두개로 작성된다.

MQTTtest_GUIv001.py

###################################################
###################################################
#    MQTT-test GUI
#    -> ver 0.0.1
#    by JBE
#
#    since 2021-03-21
###################################################
###################################################

from kivy.app import App
from kivy.uix.label import Label
from kivy.lang import Builder

Builder.load_file('MQTTtest_GUIv001.kv')

class MQTTtest_GUIv001(App):
    def build(self):
        pass

MQTTtest_GUIv001().run()

MQTTtest_GUIv001.kv

Label:
    text : "MQTT-test GUI v001"

Phase 3. 세번째 GUI <- 가장 기본적인 구조

현재 연결된 com 포트를 검색해서 선택할 수 있다.

kv 파일에서 클래스 함수나 변수에 접근하는 방식, 초기자 사용법, kivy 버전 제한 등등...

기본적인 내용들이 포함되어 있다.

MQTTtest_GUIv001.py

###################################################
###################################################
#    MQTT-test GUI
#    -> ver 0.0.1
#    by JBE
#
#    since 2021-03-21
###################################################
###################################################
import kivy
kivy.require('1.11.1')

from kivy.app import App
from kivy.uix.label import Label
from kivy.lang import Builder
from kivy.uix.spinner import Spinner
from kivy.uix.floatlayout import FloatLayout

import serial
import serial.tools.list_ports

from kivy.config import Config
Config.set('graphics', 'width', '800')
Config.set('graphics', 'height', '600')
Config.set('graphics', 'resizable', 0)
Config.set('kivy', 'keyboard_mode', 'system')
Config.set('input', 'mouse', 'mouse,multitouch_on_demand')
Config.write()

#Builder.load_file('MQTTtest_GUIv001.kv')

class MQTTtest_GUIv001(FloatLayout):
    available_port = []

    ser = serial.Serial()
    ser.baudrate = 115200
    ser.timeout = 1
    ser_con = False

    def __init__(self, **kwargs):
        super(MQTTtest_GUIv001, self).__init__(**kwargs)
        self.updateSerial_select()

    def updateSerial_select(self):
        self.available_port = []
        ports = list(serial.tools.list_ports.comports())
        for p in ports:
            self.available_port.append(p[0])

        self.ids.Serial_select.values = self.available_port

class MQTTtest_GUIv001App(App):
    def build(self):
        test = MQTTtest_GUIv001()
        return test

if __name__ == '__main__':
    MQTTtest_GUIv001App().run()

MQTTtest_GUIv001.kv

<MQTTtest_GUIv001>:
    FloatLayout:
        Spinner:
            id : Serial_select
            text_autoupdate : True
            sync_height : True
            values : root.available_port
            size_hint : None, None
            size : 60, 30
            pos : 5, 520
            on_press : root.updateSerial_select()