kivyMD로 시계 위젯 띄우기(KivyMD TimePicker)

알람을 설정하기 위해 시간을 직접 입력해도 되지만,

시계를 띄워주고, 시계 위에서 원하는 시간을 클릭해서 알람시간을 지정하면 더 편할 것 같습니다.

 

그럼 kivy와 kivyMD가 만들어준 것들을 사용해서

쉽게쉽게 시계를 띄워보겠습니다.

 

 

1. 메인화면 만들기

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen

from kivymd.uix.button import MDRectangleFlatButton
from kivymd.uix.label import MDLabel


class MainApp(MDApp):

    def build(self):
        screen = Screen()
        self.alarm_time = "Fix your time"

        # button: open time picker
        button = MDRectangleFlatButton(text="Alarm : "+str(self.alarm_time),
                                       pos_hint={'center_x':.5, 'center_y':.5},)
        screen.add_widget(button)

        # label: show the time
        label = MDLabel(text="Alarm : "+str(self.alarm_time),
                        pos_hint={'center_x':.8, 'center_y':.4},)
        screen.add_widget(label)

        return screen


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

KivyMD의 빌드 방식은 kivy와 큰 차이는 없습니다.

여기서는 kivy의 Widget() 대신, Screen()을 이용했습니다.

그리고 kivy의 Button()과 Label() 대신, kivyMD의 MDRectangleFlatButton()와 MDLabel()을 이용했습니다.

 

그 결과, 눌러도 아무 반응 없는 버튼과, 알람을 언제 설정했는지 보여줄 자리가 만들어졌습니다.

 

2. 버튼 눌러서 시계(time picker) 띄우기

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen

from kivymd.uix.button import MDRectangleFlatButton
from kivymd.uix.label import MDLabel
from kivymd.uix.picker import MDTimePicker


class MainApp(MDApp):

    def build(self):
        screen = Screen()
        self.alarm_time = "Fix your time"

        # button: open time picker
        button = MDRectangleFlatButton(text="Open Time Picker",
                                       pos_hint={'center_x':.5, 'center_y':.5},)
        button.bind(on_release=self.show_time_picker)
        screen.add_widget(button)

        # label: show the time
        label = MDLabel(text="Alarm : "+str(self.alarm_time),
                        pos_hint={'center_x':.8, 'center_y':.4},)
        screen.add_widget(label)

        return screen


    def show_time_picker(self, instance):
        time_dialog = MDTimePicker()
        time_dialog.open()


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

MDTimePicker를 새로 import 하고, 버튼을 누르면 show_time_picker 메소드가 진행되도록 해주었습니다.

 

그리고 show_time_picker 메소드는 time_dialog를 열어줍니다.

여기서 show_time_picker(self, instance)인 이유는 button.bind(on_release)에서 강제로 2개의 인자를 보내주기 때문입니다.

 

실행해보면 제법 그럴싸한 시계가 추가되었습니다.

 

 

3. 시간설정과 메인화면 연동하기

아직은 문제가 많습니다. 시간을 설정해도 그 정보가 저장되지 않기 때문이죠.

 

이제는 OK버튼을 누를 경우 메인화면에 시간설정결과가 나타나고,

다시 Open time Picker 버튼을  눌렀을 때 이전에 설정한 시간이 나타나도록 해보겠습니다.

 

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen

from kivymd.uix.button import MDRectangleFlatButton
from kivymd.uix.label import MDLabel
from kivymd.uix.picker import MDTimePicker

from datetime import datetime


class MainApp(MDApp):

    # Main -----------------------------------------------------
    def build(self):
        screen = Screen()
        self.alarm_time = "Fix your time"

        # button: open time picker
        button = MDRectangleFlatButton(text="Open Time Picker",
                                       pos_hint={'center_x':.5, 'center_y':.5},)
        button.bind(on_release=self.show_time_picker)
        screen.add_widget(button)

        # label: show the time
        self.label = MDLabel(text="Alarm : "+str(self.alarm_time),
                        pos_hint={'center_x':.8, 'center_y':.4},)
        screen.add_widget(self.label)

        return screen

    # Clock -----------------------------------------------------
    def show_time_picker(self, instance):
        time_dialog = MDTimePicker()
        time_dialog.set_time(self.chk_alarm_time())
        time_dialog.open()

        time_dialog.bind(on_save=self.set_time)

    # logic -----------------------------------------------------
    def chk_alarm_time(self):
        if self.alarm_time == "Fix your time":
            set_time = datetime.strptime("00:00:00", "%H:%M:%S")
        else:
            set_time = self.alarm_time
            
        return set_time
    
    def set_time(self, instance, time):
        self.alarm_time = time
        self.label.text = "Alarm : "+str(self.alarm_time)


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

이번엔 내부 로직을 좀 더 추가해 주었습니다.

 

1. time_picker를 열기 전, 먼저 설정된 알람시간이 있는지 확인합니다.

미리 설정된 시간이 있다면, 그 시간이 default인 상태로 time_picker가 열립니다.

time_dialog.set_time(self.chk_alarm_time())

 

2. "OK" 버튼을 누르면, 해당 시간 정보를 저장하고 추가적인 logic을 이어갑니다.

time_dialog.bind(on_save=self.set_time)

 

3. chk_alarm_time은 먼저 설정된 알람이 있는지 확인하고 return합니다.

없었다면 "00:00:00"를 return합니다.

def chk_alarm_time(self):
    if self.alarm_time == "Fix your time":
        set_time = datetime.strptime("00:00:00", "%H:%M:%S")
    else:
        set_time = self.alarm_time

    return set_time

 

4. set_time은 현재 설정된 시간정보를 alarm_time으로 넘깁니다.

그리고 main의 label.text 표기도 새로 바꿔줍니다.

def set_time(self, instance, time):
    self.alarm_time = time
    self.label.text = "Alarm : "+str(self.alarm_time)

 

이제 설정한 정보가 내부(self.alarm_time)에도, 메인 화면에도 잘 저장되는 것을 확인할 수 있습니다.

00분일 때 '시'가 왜 뒤틀려서 표기되는지는 모르겠습니다...