Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explore MacOS/Windows widgets #224

Open
abrichr opened this issue Jun 6, 2023 · 2 comments · May be fixed by #290
Open

Explore MacOS/Windows widgets #224

abrichr opened this issue Jun 6, 2023 · 2 comments · May be fixed by #290
Assignees

Comments

@abrichr
Copy link
Member

abrichr commented Jun 6, 2023

MacOS: https://developer.apple.com/documentation/widgetkit/creating-a-widget-extension
Windows: https://learn.microsoft.com/en-us/samples/microsoft/windowsappsdk-samples/widgets/

Can we use these to indicate something about the current window?

What APIs/libraries are available that let us show an icon next to e.g. the minimize icon?

@abrichr abrichr changed the title Implement MacOS widget Explore MacOS widget Jun 6, 2023
@abrichr abrichr changed the title Explore MacOS widget Explore MacOS/Windows widgets Jun 6, 2023
@jesicasusanto
Copy link
Collaborator

jesicasusanto commented Jun 14, 2023

Here are the API/libraries that I find useful for this issue

  1. Create a Chrome Extension with Chrome Extension API:

Set up a manifest file (manifest.json) specifying the extension's details.
Create an HTML file (popup.html) for the extension's user interface.
b. Modify the Chrome UI:

Add the necessary icons (e.g., recording in progress, recording available, default stage) as image assets within the extension.
Inject JavaScript code into the browser window to manipulate the UI.
c. Detect Recording Status:

Determine whether a recording is in progress or available.
Use Chrome Extension APIs (e.g., chrome.tabs) to communicate between the browser window and the extension.
d. Update the UI:

When the recording status changes, update the extension's UI (e.g., change the icon next to the minimize icon) by modifying the DOM or using browser action or page action APIs.

  1. Electron:
    Build a desktop application using Electron and leverage the Electron API to customize the window's appearance and behavior. Electron provides methods to add custom icons and manipulate the window's UI elements.

  2. Windows (WinAPI):
    On Windows, we can use the Windows API (WinAPI) to create custom windows and modify their UI. We can utilize functions such as SetWindowText and SetWindowLongPtr to change the window's title and add custom icons.

@abrichr
Copy link
Member Author

abrichr commented Jun 15, 2023

What we want is closer to #3, see https://www.rainmeter.net/ for inspiration

Code: https://github.com/rainmeter/rainmeter

Another one is xwidget: https://www.xwidget.com/xwidget.html

Probably the way to do this is to just create a window that is always on top and for whcih we can cutomize the styling. We update the position of the window to be at the top right of whatever active window the user is currently interacting with, and update the contents of the window to show different icons based on what we know about the active window and avaliable recordings.

So we need the window to support a few things:

  1. Modified appearance such that there is no close/minimize/maximize buttons and no title
  2. Transparent except for the puterbot image that we will be updating
  3. Fixed/always on top, e.g. https://github.com/JakubBlaha/KivyOnTop

@jesicasusanto jesicasusanto linked a pull request Jun 19, 2023 that will close this issue
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants