Frontend Layout and Design

[HackXIt]

Description

Develop a user-friendly and accessible interface using the Kivy Framework, as per the initial draft1.kv. This interface should be intuitive, with clear visual cues for navigation and accessible pop-up menus for SSML tag selection.

Sub-tasks

• [x] Design the basic layout of the application.
• [ ] Implement accessible UI components.
• [ ] Integrate pop-up menus for SSML tag selection.
• [ ] Ensure compatibility with different screen sizes and devices.

Estimations

• Size: Large
• Priority: High

Branch Name

feature/frontend-layout

[HackXIt]

draft1.kv:

<MainScreen>:
    orientation: 'vertical'

    BoxLayout:
        orientation: 'vertical'
        size_hint_y: None
        height: '50dp'

        # Toolbar with control buttons
        Toolbar:
            id: toolbar
            size_hint_y: None
            height: '50dp'

            Button:
                text: 'Load File'
                on_press: root.load_file()

            Button:
                text: 'Listen'
                on_press: root.play_audio()

            Button:
                text: 'Save'
                on_press: root.save_file()

    # Adjustable Split View for the text input and additional functionalities
    Splitter:
        sizable_from: 'top'
        min_size: 100
        max_size: 500

        BoxLayout:
            orientation: 'vertical'

            TextInput:
                id: text_input
                multiline: True
                hint_text: 'Enter your text here or load from a file...'
                on_text: root.adjust_split_view()

            # SSML tag editing tools within the split view
            BoxLayout:
                size_hint_y: None
                height: '50dp'

                Button:
                    text: 'Add Break'
                    on_press: root.insert_ssml_tag('break')

                Button:
                    text: 'Change Pitch'
                    on_press: root.insert_ssml_tag('pitch')

                Button:
                    text: 'Emphasize'
                    on_press: root.insert_ssml_tag('emphasis')

    # Playback controls
    BoxLayout:
        size_hint_y: None
        height: '50dp'

        Button:
            text: 'Play'
            on_press: root.playback_control('play')

        Button:
            text: 'Pause'
            on_press: root.playback_control('pause')

        Button:
            text: 'Stop'
            on_press: root.playback_control('stop')

    # Status and logs
    Label:
        size_hint_y: None
        height: '30dp'
        text: 'Status: Idle'
        id: status_label