Add canvas size

[zerolover]

add method to get canvas size, so user can use set_background_image with actual resolution
#284

[brentyi]

Thanks @zerolover! Instead of adding an extra method + message type, how do you feel about just adding this as client.camera.image_height and client.camera.image_width properties? Similar to how we currently support aspect ratios, etc.

I can make the changes to the PR if you don't have time.

The changes would be:

• Add resolution here and run the sync script:

  viser/src/viser/_messages.py

  Lines 172 to 184 in 7de581d

  	@dataclasses.dataclass
  	class ViewerCameraMessage(Message):
  	"""Message for a posed viewer camera.
  	Pose is in the form T_world_camera, OpenCV convention, +Z forward."""
  	wxyz: Tuple[float, float, float, float]
  	position: Tuple[float, float, float]
  	fov: float
  	near: float
  	far: float
  	aspect: float
  	look_at: Tuple[float, float, float]
  	up_direction: Tuple[float, float, float]

• Update the sent camera message:

  viser/src/viser/client/src/CameraControls.tsx

  Lines 306 to 321 in 7de581d

  	sendCameraThrottled({
  	type: "ViewerCameraMessage",
  	wxyz: [
  	R_world_camera.w,
  	R_world_camera.x,
  	R_world_camera.y,
  	R_world_camera.z,
  	],
  	position: t_world_camera.toArray(),
  	aspect: three_camera.aspect,
  	fov: (three_camera.fov * Math.PI) / 180.0,
  	near: three_camera.near,
  	far: three_camera.far,
  	look_at: [lookAt.x, lookAt.y, lookAt.z],
  	up_direction: [up.x, up.y, up.z],
  	});

• Add the appropriate properties to CameraHandle, _CameraHandleState:

  viser/src/viser/_viser.py

  Lines 70 to 90 in 7de581d

  	@dataclasses.dataclass
  	class _CameraHandleState:
  	"""Information about a client's camera state."""
  	client: ClientHandle
  	wxyz: npt.NDArray[np.float64]
  	position: npt.NDArray[np.float64]
  	fov: float
  	aspect: float
  	near: float
  	far: float
  	look_at: npt.NDArray[np.float64]
  	up_direction: npt.NDArray[np.float64]
  	update_timestamp: float
  	camera_cb: list[Callable[[CameraHandle], None | Coroutine]]
  	class CameraHandle:
  	"""A handle for reading and writing the camera state of a particular
  	client. Typically accessed via :attr:`ClientHandle.camera`."""

We could also drop aspect from the message / state, and instead have the aspect ratio @property divide the width/height at runtime.

[zerolover]

@brentyi sure, I will have a try

[zerolover]

@brentyi Done.

    const canvas = viewer.canvasRef.current!;
    const canvasWidth = canvas.clientWidth;
    const canvasHeight = canvas.clientHeight;
    console.log("size useThree  ", size.width, size.height, "aspect ", size.width/size.height, "diff ", size.width/size.height - camera.aspect)
    console.log("size canvasRef ", canvasWidth, canvasHeight, "aspect ", canvasWidth / canvasHeight, "diff ", canvasWidth / canvasHeight - camera.aspect)

I try to get w and h by useThree and canvasRef. Their results are same if the window's size not change, and slightly different when resizing. The aspect of canvasRef is the same as camera.aspect, so I choose it.

size useThree   912 983 aspect  0.9277721261444557 diff  0.012207527975584886
size canvasRef  900 983 aspect  0.9155645981688708 diff  0

[brentyi]

Thanks @zerolover!!