Skip to content

Final Presentation Outline

Jump to bottom
Frank Zhu edited this page May 10, 2024 · 20 revisions

This documentation provides an outline of the final presentation. It contains the structure and content of our final presentation.

Date of Presentation: 2024/05/07

Requirement: 22min presentation in total

  • Technical Presentation (10min)

  • Demo (10min)

  • Discussion / Reflection (2min)

Link to Slide: final_presentation

Bold text are contents to be included in the presentation.

Task Allocation

This section list the task for each team member. For details, see next section.

  • [14min] Technical Presentation
    • [3min] Charlie: Widget State Management, Bundler
    • [3min] Frank: Backend Widget API
    • [3min] Romee: npm package (how react is wrapped), Tray Icon
    • [3min] Xinyu: widget api wrapper
    • [1min] Romee: Migration to Tauri v2 beta for more powerful apis (setAlwaysOnBottom())
    • [1min] Charlie: Widget state management, refactored, widget module blob url and widget api blob url
  • [6min] Demo
    • [6min] Frank: Demonstrate all features of the software.
  • [2min] Discussion & Reflection
    • [2min] Romee: Choice of Process & Future work

Content in Detail

Technical Presentation (10 min)

Code Walkthrough

  • Explain code in high-level: what does a particular class do?

  • Show the tests related to the classes

  • Each member should cover in depth one component

    List of Topics

    • Bundler

    • Tauri Command (Rust backend + Tauri Command)

    • Frontend API Wrapper (NPM Package, Manipulation of AST)

    • Tray Icon

    • Widget State Management

      What states are managed in frontend, what are in backend? \

      What states should be persistent, what should be volatile?

    • ..

    Task Allocation

    • [3min] Charlie: Widget State Management, Bundler

    • [3min] Frank: Backend Widget API

      • What apis are provided?

        fs, sysinfo (show source code excerpt, show one tauri command for each module)

        List all pub tauri commands (use /src-tauri/build.rs)

      • Mention the access control of fs api as well.

        fs has access control: a widget can only access content in its widget folder. Show source code of validate_widget_id.

    • [3min] Romee: npm package (how react is wrapped), Tray Icon

    • [3min] Xinyu: widget api wrapper

      how react and widget api are wrapped and provided to frontend what apis are provided

Lesson learned

  • Redesign / Refactor

    • Switch from class component to functional component. Several closed PRs, refactored before merging into main branch.

    • [1min] Romee: Migration to Tauri v2 beta for more powerful apis (setAlwaysOnBottom())

    • [1min] Charlie: Widget state management, refactored

  • Problems

    • ...

  • Limitations of framework / Workaround for a nasty bug

    • Tauri v1 vs Tauri v2 beta:

      The timing is a bit unfortunate. We have to use either use Tauri v2 beta, or use Tauri v1 with platform-specific codes. We choose to migrate to Tauri v2 beta, and do necesssary refactoring once Tauri v2 is released.

    • Platform-specific details about canvas drawing

      maximzied or fullscreen? decoration, transparency?

    • [1min] Xinyu: A dirty bug: blob url unexpected behavior on linux (webkit2gtk) issue #50

      Blob url not accessible on linux (WebKitGTK) if blob url creator and accessor are on same origin but different path, . This behavior is divergent from the doc of blob.  

Demo (10 min) see widgets-demo repository

[6min] Frank: Demonstrate all features of the software.

  • Demonstrate using a a pre-recorded video, with live commentary.

  • Start from installation of Deskulpt. (Run npm run tauri build before demo, and use the generated installer for demo)

  • Show how to "install" a widget by dragging something to widget base folder.

Features to-be-shown

This is a list of features we want to demonstrate using our demo widgets

  • Canvas

    Our app is rendered as a canvas on which users can load draggable, interactive desktop widgets.

  • TSX Support

    Convert from TSX souorce code to browser-runnable JS bundle

  • react default dependencies: @deskulpt-test/react

  • Widget api default dependencies: @deskulpt-test/apis

    • fs api

    • sysinfo api

    • other apis if needed

  • (Optional) External Dependencies

    Widget developers can bundle external dependencies with create-deskulpt-widget

  • Cross-platform

    Demonstrate on Windows and MacOS (mention supports for X11 (Linux))

Widgets to use

  • Clock

  • System Info Monitor

  • Todo List

  • ...

Discussion / Reflection (2 min)

You should first restate the process that you planned to follow the beginning of the semester. Then ,give your insights on what worked well and what did not, and how you adjusted along the way.

[2min] Romee: Choice of Process & Future work

  • CI

    • Test build under different platforms

  • Future Work

    • A logging panel

    • External dependencies

After this semester...

What to do with Deskulpt after this semester?

Clone this wiki locally