skillbert / alt1-electron

Experimantal electron implementation of Alt1 Toolkit

Alt1 Electron (name pending)

This project is an experimental rewrite of the Alt1 Toolkit in Typescript, Electron and React. The project is currently in an experimental state, it is not clear yet if this could become a replacement for C# Alt1.

Build

You need a working nodejs installation including nodejs native build tools (is an option during installation) in order to compile Alt1.

# Install dependencies
npm i

# Build native modules
# After building once you will find cpp project files for visual studio/xcode depending on your platform
# You can then build and debug using that project and IDE
npm run native

# auto-build typescript/webpack
npm run watch

# Run
npm run ui

Linux dependencies

• libxcb with the Composite and SHM extensions
• libxcb-wm
• pkg-config
• procps

Arch (pacman)

# pacman -S pkg-config libxcb xcb-util-wm procps-ng

Debian/Ubuntu (apt)

# apt install pkg-config libxcb-dev libxcb-shm-dev libxcb-composite-dev libxcb-ewmh-dev libxcb-record-dev libxcb-shape-dev libprocps-dev

Gentoo (portage)

# emerge --ask --noreplace dev-util/pkgconf x11-libs/libxcb x11-libs/xcb-util-wm sys-process/procps

Why rewrite?

Clean slate

The architecture of present day Alt1 has been dictated by choices made 7 years ago. The Alt1 Toolkit was the result of a lot of experimenting and around poking in the dark. Many attempted features never worked out or have been scrapped or replaced. The many dead ends and design changes have built up to weigh down the code over the years and it is time to start over.

Better and easier UI

There is currently no usable UI framework in C#. Alt1 is mostly built with winforms. Microsoft intended to replace winforms with WPF 10 years ago, however that turned out to be such a uniquely garbage UI framework that it didn't help. Since then Microsoft tried UWP apps which ended with a similar fate. In short UI in C# is a dead end. Current UI in Alt1 is either classic winforms or almost completely drawn by hand with 2d APIs. Using HTML and CSS with React makes UI trivial, beautiful and maintainable.

Shared code with apps

Currently any non-app screen detection features have to be implemented from scratch in C#. Using JS allows sharing code between apps and the framework, this would simplify some features a lot and remove maintenance overhead.

Browser integration

Currently communication with apps is slow and limited. Electron has much better browser integration for stuff like error handling and complex data types. There is also the option for service worker integration and a native API to offload high performance code.

Cross-platform

This has been the most long standing request. Starting from scratch with other platforms in mind is an order of magnitude easier than trying to backport it. Electron is cross-platform by default, so only minimal platform specific code is needed.

Project status

See contributing.md for information on how to contribute to this project.

Currently functional

• Basic app functionality
• Overlay API
• Capture API
• Appconfig and saved apps
• Window pinning
• Multiclient support
• OpenGL capture using old DLLs
• mp4 works! (twitch)
  • still no widevine CDM so no netflix
• changes in app libs use new fast capture API
• rightclick detection
• basic alt+1 hotkey detection
• Toolbar
• Settings window
  • installed apps
  • capture mode previews and troubleshoot
• add app window
• browser handlers
  • alt1:// protocol from internal browser
  • remove toolbar on popups
  • rightclick menu
• Rewrite and publish OpenGL capture
• App resize visual snapping
• Shippableness in general
• alt+1 hotkey
  • app triggers
• statusdaemon
• Independent modules
  • Screenshot sharing (alt+2)
  • Window manipulation tool (alt+3)

Platform specific

• Windows
  • Basics
  • Window events API
  • Window pinning
  • Capture
    • OpenGL
    • Window
    • UI to toggle during runtime
• Linux
  • Basics
  • Window events API
  • Window pinning
  • Capture
    • Window
• MacOS
  • Basics
  • Window events API
  • Window pinning
  • Capture
    • Window

TODO

• Actually implement capture method toggle
• Add toggle in Injectdll for rgba capture instead of bgra
• Improve RS client close detection
• Fix RS client opening detection pinning on the loading screen
• Get rid of electron resize handles
• App frame css
• Many little used api calls
• Clean up native event situation for windows
• Enable contextisolation in appwindow
• Try to move RS specific constants from native code to ts/config files
• Think some more about the name

Extension projects

These concepts don't exist in C# Alt1 but are now possible.

Background apps

App functionality that runs without the app being visible using service workers.

Native acceleration plugin

Direct access to JS runtime and memory of arraybuffers is now possible. Possibly capture directly into app controlled memory and implement C++ accelerated image detect fast paths.

Different app styles

Support for Guide style apps that are easy to minimize and take up the center screen. 2 years ago RS Pocketbook was interested in merging into Alt1 like this, others are also possible.

alt1-electron's Issues

White screen overlay after open some apps (just wait ~ 20seconds it will disappear)

after start of specific apps white overlay is shown for some time

apps causing this

• ability tracker
• afkwarden (loot bean)

external

• zamorak order
• susalert

libprocps needed on Arch

On Arch, I had to install libprocps to get npm i to work.

Ubuntu readme dependencies

Tried to build alt1-electron a while ago but it didn't work. Decided to take a better look and turned out the ubuntu dependencies in the readme didn't work for me:

E: Unable to locate package libxcb-dev
E: Unable to locate package libxcb-shm-dev
E: Unable to locate package libxcb-composite-dev
E: Unable to locate package libxcb-record-dev
E: Unable to locate package libxcb-shape-dev

Had to install the following packages:

libprocps-dev
libxcb-record0-dev
libxcb-composite0-dev
libxcb-shm0-dev

After doing this the install step worked, but I couldn't do the run watch step. For this I had to upgrade the ts-node version in package.json:

-               "ts-node": "^9.1.1",
+               "ts-node": "10.8.1",

I can make a pr with these changes, but I have no overview of what this means for the rest of the project.

Error during build

Im on a mac and getting an error no member 'hwnd' in OSWindow when running npm run nativ after having done npm install. Below the full error.

mainfolder@Main-MBP alt1-electron % npm run native

[email protected] native
npm run nativerelease -- --debug

[email protected] nativerelease
electron-rebuild -f -w alt1lite --debug

⠇ Building module: alt1-electron, Completed: 0 CC(target) Debug/obj.target/nothing/node_modules/node-addon-api/nothing.o
⠴ Building module: alt1-electron, Completed: 0 LIBTOOL-STATIC Debug/nothing.a
⠸ Building module: alt1-electron, Completed: 0warning: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/libtool: archive library: Debug/nothing.a the table of contents is empty (no object file members in the library define global symbols)
⠼ Building module: alt1-electron, Completed: 0 CXX(target) Debug/obj.target/addon/native/lib.o
⠸ Building module: alt1-electron, Completed: 0 CXX(target) Debug/obj.target/addon/native/util.o
⠼ Building module: alt1-electron, Completed: 0 CXX(target) Debug/obj.target/addon/native/os_mac.o
⠇ Building module: alt1-electron, Completed: 0../native/os_mac.mm:8:28: error: no member named 'hwnd' in 'OSWindow'
NSWindow* window = [this->hwnd.wnd window];
~~~~ ^
⠋ Building module: alt1-electron, Completed: 0../native/os_mac.mm:18:15: error: out-of-line definition of 'GetPid' does not match any declaration in 'OSWindow'
int OSWindow::GetPid() {
^~~~~~
../native/os_mac.mm:23:12: error: no member named 'hwnd' in 'OSWindow'
if (this->hwnd.winid == 0) {
~~~~ ^
../native/os_mac.mm:35:49: error: no member named 'hwnd' in 'OSWindow'
return Napi::BigInt::New(env, (uint64_t) this->hwnd.winid);
~~~~ ^
../native/os_mac.mm:39:23: error: no member named 'hwnd' in 'OSWindow'
return memcmp(&this->hwnd, &other.hwnd, sizeof(this->hwnd)) == 0;
~~~~ ^
../native/os_mac.mm:39:36: error: no member named 'hwnd' in 'OSWindow'
return memcmp(&this->hwnd, &other.hwnd, sizeof(this->hwnd)) == 0;
~~~~~ ^
../native/os_mac.mm:39:55: error: no member named 'hwnd' in 'OSWindow'
return memcmp(&this->hwnd, &other.hwnd, sizeof(this->hwnd)) == 0;
~~~~ ^
../native/os_mac.mm:43:23: error: no member named 'hwnd' in 'OSWindow'
return memcmp(&this->hwnd, &other.hwnd, sizeof(this->hwnd)) < 0;
~~~~ ^
../native/os_mac.mm:43:36: error: no member named 'hwnd' in 'OSWindow'
return memcmp(&this->hwnd, &other.hwnd, sizeof(this->hwnd)) < 0;
~~~~~ ^
../native/os_mac.mm:43:55: error: no member named 'hwnd' in 'OSWindow'
return memcmp(&this->hwnd, &other.hwnd, sizeof(this->hwnd)) < 0;
~~~~ ^
⠹ Building module: alt1-electron, Completed: 0../native/os_mac.mm:87:7: error: use of undeclared identifier 'OSGetProcessName'
if (OSGetProcessName(buf[i]) == name) {
^
⠧ Building module: alt1-electron, Completed: 011 errors generated.
make: *** [Debug/obj.target/addon/native/os_mac.o] Error 1
✖ Rebuild Failed

Unable to get working on Arch

Found this and was super excited for it. However, found that anything requiring screen capture does not work for me. Also running npm run watch seems to never finish.

I have included logs and system info below.

OS: Arch Linux x86_64
Host: B650 AORUS ELITE AX
Kernel: 6.2.9-zen1-1-zen
Uptime: 10 days, 9 hours, 29 mins
Packages: 1553 (pacman)
Shell: zsh 5.9
Resolution: 3440x1440, 2560x1440
DE: Plasma 5.27.4
WM: KWin
WM Theme: Arc-Dark
Theme: [Plasma], Breeze [GTK2/3]
Icons: Papirus-Dark [Plasma], Papirus-Dark [GTK2/3]
Terminal: kitty
CPU: AMD Ryzen 7 7700X (16) @ 4.500GHz
GPU: AMD ATI 13:00.0 Raphael
GPU: AMD ATI Radeon RX 6700/6700 XT/6750 XT / 6800M/6850M XT
Memory: 27478MiB / 31236MiB

npm run watch - hangs

> [email protected] watch
> npm run build -- --watch


> [email protected] build
> node -r ts-node/register ./node_modules/webpack/bin/webpack.js --watch

assets by status 4.91 KiB [cached] 1 asset
assets by path appframe/ 82.4 KiB 4 assets
assets by path tests/ 889 KiB
  asset tests/index.bundle.js 889 KiB [compared for emit] (name: tests/index)
  asset tests/index.html 39 bytes [compared for emit] [from: tests/index.html] (auxiliary name: tests/index)
assets by path settings/ 21 KiB
  asset settings/index.bundle.js 20.9 KiB [compared for emit] (name: settings/index)
  asset settings/index.html 129 bytes [compared for emit] [from: settings/index.html] (auxiliary name: settings/index)
assets by path tooltip/ 19.2 KiB
  asset tooltip/index.bundle.js 19.1 KiB [compared for emit] (name: tooltip/index)
  asset tooltip/index.html 133 bytes [compared for emit] [from: tooltip/index.html] (auxiliary name: tooltip/index)
assets by path overlayframe/ 11.8 KiB
  asset overlayframe/index.bundle.js 11.4 KiB [compared for emit] (name: overlayframe/index)
  asset overlayframe/index.html 337 bytes [compared for emit] [from: overlayframe/index.html] (auxiliary name: overlayframe/index)
asset alt1lite.bundle.js 524 KiB [compared for emit] (name: alt1lite)
runtime modules 6.56 KiB 34 modules
cacheable modules 944 KiB
  modules by path ./ 579 KiB 60 modules
  modules by path ../ 365 KiB 22 modules
modules by path external "electron/ 126 bytes
  external "electron/main" 42 bytes [built] [code generated]
  external "electron/common" 42 bytes [built] [code generated]
  external "electron/renderer" 42 bytes [built] [code generated]
modules by path external "@electron/ 84 bytes
  external "@electron/remote/main" 42 bytes [built] [code generated]
  external "@electron/remote" 42 bytes [built] [code generated]
+ 8 modules
webpack 5.72.0 compiled successfully in 1638 ms

npm run UI - tried using clue sovler but said no clue was found

❯ npm run ui                                                          

> [email protected] ui
> electron --inspect=9228 ./dist/alt1lite.bundle.js

Debugger listening on ws://127.0.0.1:9228/86e89454-aa38-438d-b055-abea8409cbbd
For help, see: https://nodejs.org/en/docs/inspector
xdg-mime: application argument missing
Try 'xdg-mime --help' for more information.

(electron:1296387): Gtk-WARNING **: 18:03:45.805: Theme parsing error: gtk.css:1649:16: '-gtk-icon-size' is not a valid property name

(electron:1296387): Gtk-WARNING **: 18:03:45.805: Theme parsing error: gtk.css:1652:16: '-gtk-icon-size' is not a valid property name
native: X record extension version: 1.13
new rs client tracked with handle: 98566152
[1296446:0417/180345.905077:ERROR:sandbox_linux.cc(377)] InitializeSandbox() called with multiple threads in process gpu-process.

how can i install apps?

how can i add app like
alt1://addapp/http://holycoil.nl/alt1/zamorak/appconfig.json