feat: add more debug logging for tracing rendering issues with skia-canvas

Author: jstarpl

packages/input-gateway/src/inputManagerHandler.ts

@@ -138,8 +138,6 @@ export class InputManagerHandler {
 	}
 
 	async initInputManager(settings: DeviceSettings): Promise<void> {
-		this.#logger.info('Initializing Input Manager with the following settings:')
-
 		this.#deviceSettings = settings
 
 		this.#inputManager = await this.#createInputManager(settings)

packages/input-manager/package.json

@@ -98,7 +98,7 @@
 		"fold-to-ascii": "^5.0.1",
 		"lru-cache": "11.0.2",
 		"osc": "^2.4.4",
-		"skia-canvas": "2.0.1",
+		"skia-canvas": "2.0.2",
 		"xkeys": "^3.1.1"
 	},
 	"peerDependencies": {

packages/input-manager/src/feedback/bitmap/index.ts

@@ -5,15 +5,15 @@ import path from 'path'
 import fs from 'fs/promises'
 import { constants as fsConstants } from 'fs'
 import process from 'process'
+import { Logger } from '../../logger'
 
 async function makeBitmapFromFeedback(
 	feedback: SomeBitmapFeedback,
 	width: number,
 	height: number,
 	isPressed: boolean
 ): Promise<Buffer> {
-	const canvas = new Canvas(width, height)
-	const ctx = canvas.getContext('2d')
+	const { ctx } = createCanvasAndContext()
 
 	ctx.fillStyle = 'black'
 	ctx.fillRect(0, 0, width, height)
@@ -47,10 +47,12 @@ export async function getBitmap(
 	return bitmap
 }
 
-export async function init(): Promise<void> {
+export async function init(logger: Logger): Promise<void> {
 	// Create a canvas, just to boot up Skia, load the fonts, etc.
-	const canvas = new Canvas()
-	const ctx = canvas.getContext('2d')
+	const { canvas, ctx } = createCanvasAndContext()
+	logger.silly(
+		`skia-canvas initialized, using GPU: ${canvas.gpu}, engine info: ${JSON.stringify((canvas as any).engine)}`
+	)
 
 	const fonts = ['roboto-condensed-regular.ttf', 'roboto-condensed-700.ttf']
 
@@ -61,8 +63,10 @@ export async function init(): Promise<void> {
 	]
 
 	const foundFiles = await findFiles(fonts, searchPaths)
+	logger.silly(`Found ${foundFiles.length} fonts to be loaded`)
 
 	FontLibrary.use('RobotoCnd', foundFiles)
+	logger.silly('Fonts loaded into FontLibrary')
 
 	void canvas, ctx
 }
@@ -85,3 +89,15 @@ async function findFiles(files: string[], paths: string[]): Promise<string[]> {
 
 	return result
 }
+
+function createCanvasAndContext(width?: number, height?: number) {
+	const canvas = new Canvas(width, height)
+
+	if (process.env['SKIA_CANVAS_DISABLE_GPU'] === '1') {
+		canvas.gpu = false
+	}
+
+	const ctx = canvas.getContext('2d')
+
+	return { canvas, ctx }
+}

packages/input-manager/src/feedback/bitmap/lib/TextContext.ts

@@ -1,4 +1,4 @@
-import { CanvasRenderingContext2D } from 'skia-canvas'
+import { CanvasRenderingContext2D, CanvasTextAlign } from 'skia-canvas'
 import { createFill } from './fill'
 
 enum TRBLPositions {

packages/input-manager/src/feedback/bitmap/typeRenderers/base.ts

@@ -1,4 +1,4 @@
-import { CanvasRenderingContext2D } from 'skia-canvas'
+import { CanvasRenderingContext2D, CanvasTextAlign } from 'skia-canvas'
 import { BitmapStyleProps, Feedback } from '../../feedback'
 import { TextContext } from '../lib/TextContext'
 import { GlobalImageCache } from '../lib/ImageCache'

packages/input-manager/src/inputManager.ts

@@ -72,14 +72,18 @@ class InputManager extends EventEmitter<DeviceEvents> {
 	async init(): Promise<void> {
 		this.#devices = {}
 
-		await initBitmapFeedback()
+		await initBitmapFeedback(this.#logger.child({ module: 'bitmapFeedback' }))
+
+		this.#logger.silly(`Feedback services intialization done`)
 
 		await Promise.allSettled(
 			Object.entries<SomeDeviceConfig>(this.config.devices).map(async ([deviceId, deviceConfig]) =>
 				this.createDevice(deviceId, deviceConfig ?? {})
 			)
 		)
 
+		this.#logger.silly(`Device creation done`)
+
 		this.#refreshInterval = setInterval(this.refreshDevicesInterval, REFRESH_INTERVAL)
 	}
 

yarn.lock

@@ -1806,7 +1806,7 @@ __metadata:
     fold-to-ascii: "npm:^5.0.1"
     lru-cache: "npm:11.0.2"
     osc: "npm:^2.4.4"
-    skia-canvas: "npm:2.0.1"
+    skia-canvas: "npm:2.0.2"
     xkeys: "npm:^3.1.1"
   peerDependencies:
     "@sofie-automation/shared-lib": "*"
@@ -10109,17 +10109,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"skia-canvas@npm:2.0.1":
-  version: 2.0.1
-  resolution: "skia-canvas@npm:2.0.1"
+"skia-canvas@npm:2.0.2":
+  version: 2.0.2
+  resolution: "skia-canvas@npm:2.0.2"
   dependencies:
     "@mapbox/node-pre-gyp": "npm:^1.0.11"
     cargo-cp-artifact: "npm:^0.1"
     glob: "npm:^11.0.0"
     path-browserify: "npm:^1.0.1"
     simple-get: "npm:^4.0.1"
     string-split-by: "npm:^1.0.0"
-  checksum: 10/d1bc96fa1c9870af7be8ab3ce2896102602b071919e7e6fb165714fd00c27535e413fb16241f0b0727b8c88877df5b9373a856bf0f4bebf218ecbec797904830
+  checksum: 10/1811540520da10b008a5a14690c3eadd89ac691691808a87c0ed05d3dda3d191acd7cad505a0bad67e228cab7b832d0e452994992fb5cdaf96542c1c3c1bde40
   languageName: node
   linkType: hard