diff options
| -rw-r--r-- | doc/diagram.drawio | 48 | ||||
| -rw-r--r-- | solo-tool-project/src/solo_tool/handlers.py | 7 | ||||
| -rw-r--r-- | web-project/src/solo_tool_web.py | 87 | 
3 files changed, 75 insertions, 67 deletions
| diff --git a/doc/diagram.drawio b/doc/diagram.drawio index bb8dbd0..424570a 100644 --- a/doc/diagram.drawio +++ b/doc/diagram.drawio @@ -1,6 +1,6 @@ -<mxfile host="Electron" modified="2025-02-23T16:24:22.548Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="8sa4v4RLC4vbyHn2WtNr" version="22.1.2" type="device" pages="2"> +<mxfile host="Electron" modified="2025-02-24T11:00:29.036Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="9_vGhwK_Mq_I_v5YUap0" version="22.1.2" type="device" pages="2">    <diagram id="PyNSc7ezSt42GBdjTBvd" name="Launchpad"> -    <mxGraphModel dx="1561" dy="962" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"> +    <mxGraphModel dx="1562" dy="963" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">        <root>          <mxCell id="ZtjfeE3uwfRsFhnWfLYL-0" />          <mxCell id="ZtjfeE3uwfRsFhnWfLYL-1" parent="ZtjfeE3uwfRsFhnWfLYL-0" /> @@ -200,51 +200,51 @@      </mxGraphModel>    </diagram>    <diagram id="R-0UAU87gWX4lK6NCzNs" name="Web wireframe"> -    <mxGraphModel dx="1561" dy="962" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"> +    <mxGraphModel dx="1302" dy="803" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">        <root>          <mxCell id="0" />          <mxCell id="1" parent="0" /> -        <mxCell id="0goJ5iq8U8227kam6OUo-1" value="Song list" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="80" y="80" width="240" height="360" as="geometry" /> +        <mxCell id="0goJ5iq8U8227kam6OUo-1" value="Key point list" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> +          <mxGeometry x="160" y="80" width="80" height="240" as="geometry" />          </mxCell>          <mxCell id="0goJ5iq8U8227kam6OUo-2" value="Volume slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="320" y="80" width="440" height="40" as="geometry" /> +          <mxGeometry x="380" y="280" width="260" height="40" as="geometry" />          </mxCell> -        <mxCell id="0goJ5iq8U8227kam6OUo-3" value="Speed slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="360" y="160" width="360" height="40" as="geometry" /> +        <mxCell id="0goJ5iq8U8227kam6OUo-3" value="Speed" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> +          <mxGeometry x="280" y="280" width="60" height="40" as="geometry" />          </mxCell>          <mxCell id="0goJ5iq8U8227kam6OUo-4" value="Speed +5" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="720" y="160" width="40" height="40" as="geometry" /> +          <mxGeometry x="340" y="280" width="40" height="40" as="geometry" />          </mxCell>          <mxCell id="0goJ5iq8U8227kam6OUo-5" value="Speed -5" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="320" y="160" width="40" height="40" as="geometry" /> +          <mxGeometry x="240" y="280" width="40" height="40" as="geometry" />          </mxCell>          <mxCell id="E9TFIlIWBKXALOEyTYeL-1" value="Seek slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="390" y="240" width="300" height="40" as="geometry" /> +          <mxGeometry x="240" y="120" width="440" height="40" as="geometry" />          </mxCell>          <mxCell id="E9TFIlIWBKXALOEyTYeL-2" value="Prev song" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="320" y="240" width="70" height="40" as="geometry" /> +          <mxGeometry x="240" y="200" width="80" height="80" as="geometry" />          </mxCell>          <mxCell id="e6dzTLVl2QyovQL1D1hT-10" value="Next song" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="690" y="240" width="70" height="40" as="geometry" /> +          <mxGeometry x="600" y="200" width="80" height="80" as="geometry" />          </mxCell> -        <mxCell id="2VOf0fCjGpZdvwMfuWx9-2" value="Set key point" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="440" y="320" width="200" height="40" as="geometry" /> -        </mxCell> -        <mxCell id="eBDQebIGrGTMiAxLC66R-1" value="Previous" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="320" y="320" width="120" height="40" as="geometry" /> -        </mxCell> -        <mxCell id="eBDQebIGrGTMiAxLC66R-2" value="Next" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="640" y="320" width="120" height="40" as="geometry" /> +        <mxCell id="2VOf0fCjGpZdvwMfuWx9-2" value="Key point slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> +          <mxGeometry x="240" y="160" width="440" height="40" as="geometry" />          </mxCell>          <mxCell id="e5je7AeTKV-z7aj2oazw-2" value="Stop" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="320" y="400" width="120" height="40" as="geometry" /> +          <mxGeometry x="320" y="200" width="80" height="80" as="geometry" />          </mxCell>          <mxCell id="e5je7AeTKV-z7aj2oazw-3" value="Play/pause" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="600" y="400" width="160" height="40" as="geometry" /> +          <mxGeometry x="400" y="200" width="100" height="80" as="geometry" />          </mxCell>          <mxCell id="e5je7AeTKV-z7aj2oazw-4" value="Jump" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> -          <mxGeometry x="440" y="400" width="160" height="40" as="geometry" /> +          <mxGeometry x="500" y="200" width="100" height="80" as="geometry" /> +        </mxCell> +        <mxCell id="ZINFS9bsx5oSfdTS2e79-1" value="Full<br>screen" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1"> +          <mxGeometry x="640" y="280" width="40" height="40" as="geometry" /> +        </mxCell> +        <mxCell id="ZINFS9bsx5oSfdTS2e79-4" value="Song name" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1"> +          <mxGeometry x="240" y="80" width="440" height="40" as="geometry" />          </mxCell>        </root>      </mxGraphModel> diff --git a/solo-tool-project/src/solo_tool/handlers.py b/solo-tool-project/src/solo_tool/handlers.py index 1e0e22c..975ce8d 100644 --- a/solo-tool-project/src/solo_tool/handlers.py +++ b/solo-tool-project/src/solo_tool/handlers.py @@ -18,6 +18,13 @@ def changeSong(st: SoloTool, delta: int) -> Callable[[], None]:              st.song += delta      return f +def setSong(st: SoloTool, index: int, followUp: Callable[[], None]=None) -> Callable[[], None]: +    def f(): +        st.song = index +        if followUp is not None: +            followUp() +    return f +  def seekRelative(st: SoloTool, delta: float) -> Callable[[], None]:      def f():          st.position += delta diff --git a/web-project/src/solo_tool_web.py b/web-project/src/solo_tool_web.py index edca008..d18ae96 100644 --- a/web-project/src/solo_tool_web.py +++ b/web-project/src/solo_tool_web.py @@ -7,55 +7,56 @@ from solo_tool.midi_controller_launchpad_mini import MidiController  st = loadSession("/home/eddy/music/funk-band/practice.json")  midiController = MidiController(st) -midiController.connect() +#midiController.connect() + +def songName(path): +    from os.path import basename, splitext +    return basename(splitext(path)[0])  def main():      fullscreen = ui.fullscreen()      ui.dark_mode().enable()      ui.colors(secondary='#ffc107') -    with ui.row() as mainContainer: -        mainContainer.style('width: 100%; height: 100%;') - -        with ui.column() as keyPointColumn: -            keyPointColumn.style('width: 12%; height: 100%;') - -            ui.label('Key Points') - -            with ui.scroll_area(): -                for i, song in enumerate(st.songs): -                    with ui.list().props('dense separator').bind_visibility_from(st, 'song', value=i) as keyPointList: -                        for kp in st._keyPoints[i]: -                            ui.item(f"{kp}", on_click=handlers.setKeyPoint(st, kp)).props('clickable') - -        with ui.column() as controlColumn: -            controlColumn.style('width: 84%; height: 100%;') - -            ui.label("Song name").bind_text_from(st, 'song', lambda index: st.songs[index] if index is not None else "") - -            # Playback position -            ui.slider(min=0, max=1.0, step=0.01).bind_value(st, 'position').props('thumb-size=0px track-size=16px') - -            # Key point position -            ui.slider(min=0, max=1.0, step=0.01).bind_value(st, 'keyPoint').props('color=secondary') - -            # Play control -            with ui.button_group().classes('w-full').style('height: 90px'): -                ui.button(icon='skip_previous', on_click=handlers.changeSong(st, -1)).style('flex: 1') -                ui.button(icon='stop', on_click=st.stop, color='negative').style('flex: 1') -                ui.button(color='positive', on_click=handlers.playPause(st)).bind_icon_from(st, "playing", lambda playing: "pause" if playing else "play_arrow").style('flex: 2') -                ui.button(icon='undo', on_click=st.jump, color='secondary').style('flex: 2') -                ui.button(icon='skip_next', on_click=handlers.changeSong(st, 1)).style('flex: 1') - -            # Volume and rate -            with ui.row().classes('w-full justify-between no-wrap'): -                ui.button(icon='fast_rewind', on_click=handlers.rateRelative(st, -0.05)) -                ui.label().bind_text_from(st, 'rate', lambda rate: f'{rate:0.3}').on('click', handlers.rateAbsolute(st, 1.0)) -                ui.button(icon='fast_forward', on_click=handlers.rateRelative(st, 0.05)) -                ui.slider(min=0, max=1.2, step=0.01).bind_value(st, 'volume') -                ui.button(icon='fullscreen', on_click=fullscreen.toggle).props('outline') - -            ui.run() +    with ui.header().classes('items-center'): +        ui.button(icon='menu', on_click=lambda: song_drawer.toggle()).props('flat round dense color=white') +        ui.label().bind_text_from(st, 'song', lambda index: songName(st.songs[index]) if index is not None else "Select a song").classes('text-lg') + +    with ui.right_drawer(top_corner=True, bottom_corner=True).props('width=120 behavior=desktop'): +        ui.label("Key Points").classes('text-lg') +        for i, song in enumerate(st.songs): +            with ui.list().props('separator').bind_visibility_from(st, 'song', value=i): +                for kp in st._keyPoints[i]: +                    ui.item(f"{kp:0.2}", on_click=handlers.setKeyPoint(st, kp)).props('clickable v-ripple') + +    with ui.left_drawer(bottom_corner=True).props('overlay') as song_drawer: +        with ui.list().props('separator'): +            for i, path in enumerate(st.songs): +                ui.item(songName(path), on_click=handlers.setSong(st, i, lambda: song_drawer.hide())).props('clickable v-ripple') + +    # Playback position +    ui.slider(min=0, max=1.0, step=0.01).bind_value(st, 'position').props('thumb-size=0px track-size=16px') + +    # Key point position +    ui.slider(min=0, max=1.0, step=0.01).bind_value(st, 'keyPoint').props('color=secondary') + +    # Play control +    with ui.button_group().classes('w-full').style('height: 90px'): +        ui.button(icon='skip_previous', on_click=handlers.changeSong(st, -1)).style('flex: 1') +        ui.button(icon='stop', on_click=st.stop, color='negative').style('flex: 1') +        ui.button(color='positive', on_click=handlers.playPause(st)).bind_icon_from(st, "playing", lambda playing: "pause" if playing else "play_arrow").style('flex: 2') +        ui.button(icon='undo', on_click=st.jump, color='secondary').style('flex: 2') +        ui.button(icon='skip_next', on_click=handlers.changeSong(st, 1)).style('flex: 1') + +    # Volume and rate +    with ui.row().classes('w-full justify-between no-wrap items-center'): +        ui.button(icon='fast_rewind', on_click=handlers.rateRelative(st, -0.05)) +        ui.label().bind_text_from(st, 'rate', lambda rate: f'{rate:0.3}x').on('click', handlers.rateAbsolute(st, 1.0)).classes('text-lg') +        ui.button(icon='fast_forward', on_click=handlers.rateRelative(st, 0.05)) +        ui.slider(min=0, max=1.2, step=0.01).bind_value(st, 'volume') +        ui.button(icon='fullscreen', on_click=fullscreen.toggle).props('outline') + +    ui.run()  if __name__ in {'__main__', '__mp_main__'}:      main() | 
