deno-windowing / dwm Goto Github PK

View Code? Open in Web Editor NEW

132.0 132.0 7.0 942 KB

Deno Window Manager: Cross-platform window creation and management

Home Page: https://deno.land/x/dwm

License: Apache License 2.0

TypeScript 100.00%

cross-platform deno ffi window

dwm's Introduction

Deno Window Manager

Cross-platform window management library for Deno.

Example

Creating an OpenGL Window

import {
  createWindow,
  getProcAddress,
  mainloop,
} from "https://deno.land/x/[email protected]/mod.ts";
import * as gl from "https://deno.land/x/[email protected]/api/gles23.2.ts";

const window = createWindow({
  title: "DenoGL",
  width: 800,
  height: 600,
  resizable: true,
  glVersion: "v3.2",
  gles: true,
});

gl.load(getProcAddress);

addEventListener("resize", (event) => {
  gl.Viewport(0, 0, event.width, event.height);
});

gl.ClearColor(0.0, 0.0, 0.0, 1.0);

function frame() {
  gl.Clear(gl.COLOR_BUFFER_BIT);
  window.swapBuffers();
}

await mainloop(frame);

Creating a Skia Canvas Window

import {
  mainloop,
  WindowCanvas,
} from "https://deno.land/x/[email protected]/ext/canvas.ts";

const canvas = new WindowCanvas({
  title: "Skia Canvas",
  width: 800,
  height: 600,
  resizable: true,
});

canvas.onDraw = (ctx) => {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = "white";
  ctx.font = "30px Arial";
  ctx.textBaseline = "top";
  ctx.fillText("Hello World", 10, 10);
};

await mainloop(() => {
  canvas.draw();
});

See examples for more examples!

Usage

For drawing, you can use:

Deno Gluten
Skia Canvas (Use ext/canvas.ts for an easy to use wrapper)
Deno Vulkan

To package your application you can use:

wpack

Since this module depends on unstable FFI API, you need to pass --unstable along with --allow-ffi, --allow-write and --allow-env.

deno run --unstable --allow-ffi --allow-write --allow-env <file>

Maintainers

Dj (@DjDeveloperr)
Dean Srebnik (@load1n9)

License

Apache-2.0 licensed.

dwm's People

Contributors

Stargazers

Watchers

Forkers

allenli178 captainbuckkets hironichu inspectorboat lino-levan hashrock chances

dwm's Issues

Add rawHandle() API

Ability to retrieve the window and display/instance handles from glfw. Similar to deno_sdl2's Window#rawHandle().

Rust implementation for reference: https://github.com/PistonDevelopers/glfw-rs/blob/2221cf05410c3dd2fac6f711c8f28e072c16f1fb/src/lib.rs#L3518

  /**
   * Return the raw handle of the window.
   *
   * platform: "cocoa" | "win32" | "winrt" | "x11" | "wayland"
   *
   * ```ts
   * const [platform, handle, display] = window.rawHandle();
   * ```
   *
   * on macOS:
   * - platform: "cocoa"
   * - handle: NSWindow
   * - display: NSView
   *
   * on Windows:
   * - platform: "win32" | "winrt"
   * - handle: HWND
   * - display: null | HINSTANCE
   *
   * on Linux:
   * - platform: "x11" | "wayland"
   * - handle: Window
   * - display: Display
   */
  rawHandle(): [string, Deno.PointerValue, Deno.PointerValue | null];

This can be passed to Deno's WebGPU with this proposal: denoland/deno#21713

Resize error

Just a heads up!

When I had my Surface framework example windows set to resize = false, I had no issues.

When I changed the examples to resize = true, resizing the window would crash with the following exit code:

3221225477 = 0xC0000005 = STATUS_ACCESS_VIOLATION

The problem turned out that I wasn't handling onContextLoss

My Surface frameworks onContextLoss handler now refreshes its ctx reference. This has eliminated the exit error on resize/maximize.

How do I disable Vsync?

Does dwm exposes the FFI bindings? Need to call glfwSwapInterval(0)

Click event not working (Win10)

Windows 10 Pro 21H2
deno 1.29.1
Deno ext v3.15.0

import { createWindow, mainloop } from "https://deno.land/x/[email protected]/mod.ts";

createWindow({
    title: "Deno Window Manager",
    width: 800,
    height: 600,
    resizable: true,
});

// mousedown works on Win10 as expected, uncomment below to test
/*
addEventListener("mousedown", (evt) => {
    console.log("mousedown", evt.button, evt.clientX, evt.clientY);
});
*/

// this is not working on Win10
// No log when window is clicked (nor doubleclicked)
addEventListener("click", (evt) => {
    console.log("click", evt.button, evt.clientX, evt.clientY);
});

// logs as expected
addEventListener("resize", (event) => {
    console.log("Window resized", event.width, event.height);
});

await mainloop();

Broken

Once again, none of my DWM apps work. Can't tell what's changed, but the error is as follows:

Executing task: deno run -A --unstable main.ts 

error: Uncaught Error: Could not open library: The specified module could not be found.

  mod = Deno.dlopen(tmp, symbols);
             ^
    at new DynamicLibrary (ext:deno_ffi/00_ffi.js:440:46)
    at Object.dlopen (ext:deno_ffi/00_ffi.js:577:10)
    at https://deno.land/x/[email protected]/src/platform/glfw/ffi.ts:463:14

undefined symbol: glXGetCurrentContext

deno: symbol lookup error: /home/angel/.cache/deno/plug/https/github.com/6124705c167a5007bfab218a8e66994369ecb4e10c7f44d4dbf2c97b8d05084b.so: undefined symbol: glXGetCurrentContext

import {
  mainloop,
  WindowCanvas,
} from "https://deno.land/x/[email protected]/ext/canvas.ts";

const canvas = new WindowCanvas({
  title: "Skia Canvas",
  width: 800,
  height: 600,
  resizable: true,
});

canvas.onDraw = (ctx) => {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = "white";
  ctx.font = "30px Arial";
  ctx.textBaseline = "top";
  ctx.fillText("Hello World", 10, 10);
};

await mainloop(() => {
  canvas.draw();
});

error while running example from Windows 11

environment: Windows 11 (without WSL) and deno version 1.29.1 (release, x86_64-pc-windows-msvc)

problem: running the example code found on the readme page with the command deno run --unstable --allow-ffi --allow-env --allow-write I get the error

error: Uncaught (in promise) ReferenceError: instancePointer is not defined
const surfaceKHR = win.createSurface(instancePointer);

I'm no expert about GUI and JavaScript, but reading that dwm was cross platform I decided to try it on Windows, without luck.

Failed to register symbol `glfwGetWaylandMonitor`

Unable to initialize Window or WindowCanvas.

The symbols glfwGetWaylandMonitor or glfwGetWaylandWindow are missing when attempting to run (the missing symbol keeps changing between the two each time I run with --reload).

edit: glfwGetWaylandDisplay too.

[caligo@fedora test]$ deno run -A --unstable --reload chart.ts 
error: Uncaught Error: Failed to register symbol glfwGetWaylandMonitor: Could not obtain symbol from the library: /home/caligo/.cache/deno/glfw3_v3-4-0.so: undefined symbol: glfwGetWaylandMonitor
  mod = Deno.dlopen(tmp, symbols);
             ^
    at new DynamicLibrary (internal:ext/ffi/00_ffi.js:368:48)
    at Object.dlopen (internal:ext/ffi/00_ffi.js:500:12)
    at https://deno.land/x/dwm@0.3.0/src/platform/glfw/ffi.ts:463:14

System Info:

OS: Fedora Linux 37 (KDE Plasma) x86_64 
Kernel: 6.1.11-200.fc37.x86_64 
WM: kwin (wayland)
CPU: Intel i5-10400F (12) @ 4.300GHz 
GPU: NVIDIA GeForce RTX 3060 Ti
Memory: 7791MiB / 15887MiB

Is Active?

Is there still interest in this?
I've made a public repo of the clock example.
https://github.com/nhrones/SkiaClock
I've also made a public repo of Skia-Surface with TextBox and DiceGame examples.

op_base64_decode is not a function

So yesterday, i ran the same code, with the same version of deno (deno 1.39.4 (release, x86_64-pc-windows-msvc) v8 12.0.267.8 typescript 5.3.3), with the same version of windows, and everything, and it ran fine. Today i tried running it again... Aaaand:

error: Uncaught (in promise) TypeError: Deno[Deno.internal].core.ops.op_base64_decode is not a function
    at https://glfw-binaries.deno.dev/3.4.0-patch2/glfw3_windows.js:2:108

I am really confused... The line the error is referencing looks like this:

const DECODED = Deno.build.os === "windows" && Deno.build.arch === "x86_64" ? Deno[Deno.internal].core.ops.op_base64_decode(BASE64) : new Uint8Array();

so just trying to decode the base64 encoded thingy. But for some reason today it thinks that core.ops.op_base64_decode isnt a function... eh?

EDIT: example code in question:

import * as gl from "https://deno.land/x/[email protected]/api/gles23.ts";
import {
    CanvasRenderingContext2D,
    getProcAddress,
    mainloop,
    WindowCanvas,
} from "https://deno.land/x/[email protected]/ext/canvas.ts";
import {
      createContext,
      destroyContext,
      imgui,
} from "https://deno.land/x/[email protected]/ext/imgui.ts";

const WIDTH = 800;
const HEIGHT = 600;

let deltatime = 0;

const canvas = new WindowCanvas({
      title: "Skia Canvas",
      width: WIDTH,
      height: HEIGHT,
      resizable: false,
});
gl.load(getProcAddress);

const imguiContext = createContext(canvas.window);
imgui.implOpenGL3NewFrame();

addEventListener("close", () => {
      destroyContext(imguiContext);
});


canvas.onDraw = (ctx: CanvasRenderingContext2D) => {
    gl.Clear(gl.COLOR_BUFFER_BIT);
}

const UI = () => {
    imgui.implGlfwNewFrame();
    imgui.newFrame();
    imgui.begin("Quadtree");
    imgui.text(`deltatime: ${deltatime.toFixed(5)}`);
    imgui.text(`fps: ${(10 / deltatime).toFixed(2)}`);
    imgui.end();

    imgui.render();
    const drawData = imgui.getDrawData();
    imgui.implOpenGL3RenderDrawData(drawData);
}

await mainloop(() => {
    const t0 = performance.now();
    canvas.draw();
    UI();
    deltatime = (performance.now() - t0) / 1000;
    console.log(`fps: ${(1 / deltatime).toFixed(2)}`);
});

ran with the command: deno run --unstable -A --check --watch .\main.ts

Upgrade Broke apps

Deno 0.31.1 has broken all my apps?
I've upgraded skia-canvas to 0.5.2 and that fixed an initial error on start.
Now, I get no input from mouse or keyboard on any of my addEventListeners!

There were no other changes other than the Deno upgrade!

I'll download the DWM demos and try those. That may help me track down the issue.

Scale canvas to window size example

I'm not sure this is the proper place to ask, but does anyone have an example of how to best scale a Skia Canvas to match the window size?

For example, say I am making a game with a canvas size 128x128 and a window sized at 512x512 (so 4x), is there an easy way to auto scale (stretch) the canvas to the window size? I don't want to actually create a 512x512 canvas and the draw all the native 128x128 sprite at a larger resolution.

I'm basically after something like the transform: scale(4) you'd get with CSS.

Can't Fetch

Is there any reason a fetch call does not work in a DWN app?
When I try to fetch from a localhost server, the promise neither resolves nor rejects? It seems to be swallowed.

Errors trying to run examples

I'm getting errors trying to run some of the examples. Here are the ones that run correctly and the ones that don't:

canvas: no
cube: no
cursor: yes
custom-cursor: no
custom-icon: yes
events: yes
multi-window: yes
opengl: no (i'm on a mac, but i put the error below anyway for the sake of completeness)
styles: yes (with message "themes not implemented for this system")
transparent: yes
window: yes

System: MacOS 11.6.8
Deno: 1.31.2

I'm running examples from the links like this:
$ deno run -Ar --unstable https://raw.githubusercontent.com/deno-windowing/dwm/main/examples/canvas.ts

Most examples give this error:

error: Uncaught (in promise) Error: Could not open library: Could not open library: dlopen(/blah/blah/Library/Caches/deno/plug/https/github.com/dde09b5bbcf801e9d3dbb0bf6276f9d048d6643f6b34855bc184ebffa990fd30.dylib, 5): Symbol not found: __ZNKSt3__115basic_stringbufIcNS_11char_traitsIcEENS_9allocatorIcEEE3strEv
  Referenced from: /blah/blah/Library/Caches/deno/plug/https/github.com/dde09b5bbcf801e9d3dbb0bf6276f9d048d6643f6b34855bc184ebffa990fd30.dylib (which was built for Mac OS X 12.6)
  Expected in: /usr/lib/libc++.1.dylib

  return Deno.dlopen(await download(options), symbols);
              ^
    at new DynamicLibrary (ext:deno_ffi/00_ffi.js:415:46)
    at Object.dlopen (ext:deno_ffi/00_ffi.js:545:10)
    at dlopen (https://deno.land/x/[email protected]/mod.ts:145:15)
    at async https://deno.land/x/[email protected]/src/ffi.ts:961:10

imgui error:

error: Uncaught SyntaxError: The requested module '../ext/imgui.ts' does not provide an export named 'CBool'
import { CBool, createContext, destroyContext, imgui } from "../ext/imgui.ts";
         ^
    at <anonymous> (https://raw.githubusercontent.com/deno-windowing/dwm/main/examples/imgui.ts:3:10)

imgui2:

error: Uncaught (in promise) Error: need more work!
      throw Error("need more work!");
            ^
    at getOutFileName (https://raw.githubusercontent.com/djfos/dimgui/main/script/convention.ts:26:13)
    at prepareLibraryFile (https://raw.githubusercontent.com/djfos/dimgui/main/src/ffi.ts:32:38)
    at loadLibrary (https://raw.githubusercontent.com/djfos/dimgui/main/src/ffi.ts:40:30)
    at https://raw.githubusercontent.com/djfos/dimgui/main/src/ffi.ts:56:23

opengl:

GlfwError: 65542 NSGL: OpenGL ES is not available on macOS
error: Uncaught (in promise) Error: Failed to create window
      throw new Error("Failed to create window");
            ^
    at new WindowGlfw (https://raw.githubusercontent.com/deno-windowing/dwm/main/src/platform/glfw/window.ts:674:13)
    at createWindow (https://raw.githubusercontent.com/deno-windowing/dwm/main/src/platform/mod.ts:43:10)
    at https://raw.githubusercontent.com/deno-windowing/dwm/main/examples/opengl.ts:4:16

Support for Linux aarch64

I tried it on ashai linux but have trouble with gflw. I think it's because of there is no release for linux aarch64 in https://github.com/deno-windowing/build-glfw.

MouseMove

Is there a way to get mouse events in a canvasWindow? (the cube example)?
I've tried addEventListener on the win.window object and the win.canvas object in the cube example with no luck.
What am I missing?

Also, resizing the canvas seems to have no effect? A clearRect() or fillRect() always paints the whole window, not just the canvas area? Although other paths rendered are actually clipped to the new canvas size>

Deno Upgrade broke my apps

Upgraded to Deno 1.30.0 and now my apps fail with

error: Uncaught TypeError: Cannot read properties of undefined (reading 'ops')
const DECODED = Deno.build.os === "windows" && Deno.build.arch === "x86_64" 
? Deno.core.ops.op_base64_decode(BASE64) : new Uint8Array();

            ^
    at https://glfw-binaries.deno.dev/3.4.0/glfw3_windows.js:2:89

Program doesn't run when compiled with `--no-terminal` on Windows

I was bothered by the fact that when you compile a program with deno compile on Windows, the resulting executable opens with a cmd window behind dwm's window. After some searching, I found that a flag was added to compile the executable with the "GUI" subsystem that should prevent a cmd window from showing.

However, when running an executable compiled with this option, the program doesn't seem to run at all and exits with code 0.

ToDo Example

Now that Skia-Surface-TextBox is working reliably and we have Deno.Kv, I'm thinking about building a Todo example app.
Any thoughts?, recommendations?
Or, am I just wasting time?
Is there a better DWM-GUI on the horizon?

broke again

I upgraded Deno to 1.32.3 and now once again none of my dwm projects are working.

error: Module not found "https://glfw-binaries.deno.dev/3.4.0-patch1/glfw3_darwin.js".
    at https://deno.land/x/[email protected]/src/platform/glfw/ffi.ts:2:20

I just wanted to report this to you. I am no longer interested in this project.
I'll probably revert all my efforts back to Node, as Deno is like digging a ditch in dry sand.

getPrimaryMonitor not found

Seems to be a problem with "https://deno.land/x/[email protected]/mod.ts";

dwm repo mod.ts seems not === x/[email protected]/mod.ts

Can't run cube demo with it.

error "https://deno.land/x/[email protected]/mod.ts"' has no exported member 'getPrimaryMonitor'

see simple repo below

https://github.com/nhrones/BrokenCube

I need this to test retina pixelRatio issue!

Keyboard Issue

I'm coding a TextBox canvas widget and having input issues.

The keydown, keyup events produce very raw key, keycode values. Although the shift keys produce a shiftKey flag, the condition of capslock is not provided.
All alpha keys are coded as capital-chars (as if shifted), and then number keys produce numbers (unshifted).

I've written a basic keyboard module that tries to correct this, but I wonder if you know of any lib that already handles GLFW keys correctly! Also, I'm working on Windows, will my code have issues with Mac keyboard?

Simple example won't run on Retina DPI

This simple example fails to run on a retina machine.

deno run -Ar --unstable https://raw.githubusercontent.com/nhrones/Retina/master/retina.ts

https://github.com/nhrones/Retina