chore: improve readme, examples

deno-windowing · Jan 26, 2023 · 6e7795e · 6e7795e
1 parent 847552a
commit 6e7795e
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -10,41 +10,74 @@ Cross-platform window management library for Deno.
 
 ## Example
 
-```ts
-import { createWindow, mainloop } from "https://deno.land/x/dwm@0.3.0/mod.ts";
+### Creating an OpenGL Window
 
-const win = createWindow({
-  title: "Hello World",
+```ts
+import {
+  createWindow,
+  getProcAddress,
+  mainloop,
+} from "https://deno.land/x/dwm@0.3.0/mod.ts";
+import * as gl from "https://deno.land/x/gluten@0.1.3/api/gles23.2.ts";
+
+const window = createWindow({
+  title: "DenoGL",
   width: 800,
   height: 600,
   resizable: true,
-  // To create OpenGL context, set the version:
-  glVersion: "v3.3",
-  // By default, no Client API is used.
+  glVersion: "v3.2",
+  gles: true,
 });
 
-// For OpenGL:
-// By default, context is made current when window is created
-// You can also make it current manually
-win.makeContextCurrent();
+gl.load(getProcAddress);
+
+addEventListener("resize", (event) => {
+  gl.Viewport(0, 0, event.width, event.height);
+});
 
-// You can also create Vulkan Surface using:
-const surfaceKHR = win.createSurface(instancePointer);
+gl.ClearColor(0.0, 0.0, 0.0, 1.0);
 
-// Many DOM events are supported, such as:
+function frame() {
+  gl.Clear(gl.COLOR_BUFFER_BIT);
+  window.swapBuffers();
+}
 
-addEventListener("resize", (event) => {
-  console.log("Window resized", event.width, event.height);
+await mainloop(frame);
+```
+
+### Creating a Skia Canvas Window
+
+```ts
+import {
+  mainloop,
+  WindowCanvas,
+} from "https://deno.land/x/dwm@0.3.0/ext/canvas.ts";
+
+const canvas = new WindowCanvas({
+  title: "Skia Canvas",
+  width: 800,
+  height: 600,
+  resizable: true,
 });
 
-await mainloop(() => {
-  // drawing logic ...
+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);
+};
 
-  // For OpenGL, you have to call this:
-  win.swapBuffers();
+await mainloop(() => {
+  canvas.draw();
 });
 ```
 
+See [examples](./examples) for more examples!
+
+## Usage
+
 For drawing, you can use:
 
 - [Deno Gluten](https://github.com/deno-windowing/gluten)
@@ -56,10 +89,6 @@ To package your application you can use:
 
 - [wpack](https://github.com/deno-windowing/wpack)
 
-See [examples](./examples).
-
-## Usage
-
 Since this module depends on unstable FFI API, you need to pass `--unstable`
 along with `--allow-ffi`, `--allow-write` and `--allow-env`.
 

diff --git a/deno.jsonc b/deno.jsonc
@@ -1,9 +1,10 @@
 {
   "tasks": {
     "example_opengl": "deno run -A --unstable examples/opengl.ts",
-    "example_cube": "deno run -A --unstable examples/cube.ts",
+    "example_canvas": "deno run -A --unstable examples/canvas.ts",
+    "example_canvas_chart": "deno run -A --unstable examples/canvas_chart.ts",
     "example_cursor": "deno run -A --unstable examples/cursor.ts",
-    "example_canvas": "deno run -A --unstable examples/cube.ts",
+    "example_cube": "deno run -A --unstable examples/cube.ts",
     "example_events": "deno run -A --unstable examples/events.ts",
     "example_multi_window": "deno run -A --unstable examples/multi-window.ts",
     "example_transparent": "deno run -A --unstable examples/transparent.ts",

diff --git a/examples/canvas.ts b/examples/canvas.ts
@@ -1,12 +1,4 @@
 import { mainloop, WindowCanvas } from "../ext/canvas.ts";
-import {
-  Chart,
-  registerables,
-} from "https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.esm.js";
-
-// deno-lint-ignore ban-ts-comment
-// @ts-ignore
-Chart.register(...registerables);
 
 const win = new WindowCanvas({
   title: "Skia Canvas",
@@ -15,69 +7,13 @@ const win = new WindowCanvas({
   resizable: true,
 });
 
-win.window.setSizeLimits(400, 300, 1600, 1200);
-
-const data = {
-  labels: ["January", "February", "March", "April", "May", "June", "July"],
-  datasets: [{
-    label: "Looping tension",
-    data: [65, 59, 80, 81, 26, 55, 40],
-    fill: false,
-    borderColor: "rgb(75, 192, 192)",
-  }],
-};
-
-const options = {
-  type: "line",
-  data: data,
-  options: {
-    animations: {
-      tension: {
-        duration: 1000,
-        easing: "linear",
-        from: 1,
-        to: 0,
-        loop: true,
-      },
-    },
-    scales: {
-      y: {
-        min: 0,
-        max: 100,
-      },
-    },
-  },
-  plugins: [
-    {
-      id: "custom_canvas_background_color",
-      beforeDraw: (chart: Chart) => {
-        const { ctx } = chart;
-        ctx.save();
-        ctx.fillStyle = "white";
-        ctx.fillRect(0, 0, chart.width, chart.height);
-        ctx.restore();
-      },
-    },
-  ],
-};
-
-let chart = new Chart(win.canvas, options);
-
-win.onContextLoss = () => {
-  chart.destroy();
-  chart = new Chart(win.canvas, options);
-};
-
-addEventListener("click", () => {
-  console.log("click");
-});
-
-addEventListener("dblclick", () => {
-  console.log("dblclick");
-});
-
-win.onDraw = () => {
-  chart.render();
+win.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(() => {

diff --git a/examples/canvas_chart.ts b/examples/canvas_chart.ts
@@ -0,0 +1,85 @@
+import { mainloop, WindowCanvas } from "../ext/canvas.ts";
+import {
+  Chart,
+  registerables,
+} from "https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.esm.js";
+
+// deno-lint-ignore ban-ts-comment
+// @ts-ignore
+Chart.register(...registerables);
+
+const win = new WindowCanvas({
+  title: "Skia Canvas",
+  width: 800,
+  height: 600,
+  resizable: true,
+});
+
+win.window.setSizeLimits(400, 300, 1600, 1200);
+
+const data = {
+  labels: ["January", "February", "March", "April", "May", "June", "July"],
+  datasets: [{
+    label: "Looping tension",
+    data: [65, 59, 80, 81, 26, 55, 40],
+    fill: false,
+    borderColor: "rgb(75, 192, 192)",
+  }],
+};
+
+const options = {
+  type: "line",
+  data: data,
+  options: {
+    animations: {
+      tension: {
+        duration: 1000,
+        easing: "linear",
+        from: 1,
+        to: 0,
+        loop: true,
+      },
+    },
+    scales: {
+      y: {
+        min: 0,
+        max: 100,
+      },
+    },
+  },
+  plugins: [
+    {
+      id: "custom_canvas_background_color",
+      beforeDraw: (chart: Chart) => {
+        const { ctx } = chart;
+        ctx.save();
+        ctx.fillStyle = "white";
+        ctx.fillRect(0, 0, chart.width, chart.height);
+        ctx.restore();
+      },
+    },
+  ],
+};
+
+let chart = new Chart(win.canvas, options);
+
+win.onContextLoss = () => {
+  chart.destroy();
+  chart = new Chart(win.canvas, options);
+};
+
+addEventListener("click", () => {
+  console.log("click");
+});
+
+addEventListener("dblclick", () => {
+  console.log("dblclick");
+});
+
+win.onDraw = () => {
+  chart.render();
+};
+
+await mainloop(() => {
+  win.draw();
+});
diff --git a/examples/opengl.ts b/examples/opengl.ts
@@ -1,30 +1,26 @@
-import { createWindow, mainloop } from "../mod.ts";
-import * as GL from "https://win32.deno.dev/main/Graphics.OpenGL";
-
-addEventListener("resize", (event) => {
-  GL.glViewport(0, 0, event.width, event.height);
-});
+import { createWindow, getProcAddress, mainloop } from "../mod.ts";
+import * as gl from "https://deno.land/x/gluten@0.1.3/api/gles23.2.ts";
 
 const window = createWindow({
-  title: "Deno DWM OpenGL",
+  title: "DenoGL",
   width: 800,
   height: 600,
   resizable: true,
-  glVersion: "v1.1",
+  glVersion: "v3.2",
+  gles: true,
+});
+
+gl.load(getProcAddress);
+
+addEventListener("resize", (event) => {
+  gl.Viewport(0, 0, event.width, event.height);
 });
 
-function draw() {
-  GL.glClear(GL.GL_COLOR_BUFFER_BIT);
-  GL.glBegin(GL.GL_TRIANGLES);
-  GL.glColor3f(1.0, 0.0, 0.0);
-  GL.glVertex2i(0, 1);
-  GL.glColor3f(0.0, 1.0, 0.0);
-  GL.glVertex2i(-1, -1);
-  GL.glColor3f(0.0, 0.0, 1.0);
-  GL.glVertex2i(1, -1);
-  GL.glEnd();
-  GL.glFlush();
+gl.ClearColor(0.0, 0.0, 0.0, 1.0);
+
+function frame() {
+  gl.Clear(gl.COLOR_BUFFER_BIT);
   window.swapBuffers();
 }
 
-await mainloop(draw);
+await mainloop(frame);