feat: canvas aspect ratio (#17)

* feat: canvas aspect ratio

* chore: lint

crates/bevy_headless/src/utils.rs

@@ -64,6 +64,12 @@ impl CurrImage {
         let (w, h) = self.img_buffer.dimensions();
         [w, h]
     }
+
+    pub fn aspect_ratio(&self) -> [u32; 2] {
+        let (_w, _h) = self.img_buffer.dimensions();
+        // TODO: calculate later
+        [16, 9]
+    }
 }
 
 #[derive(Debug, Default, Resource, Event)]

crates/new_media/src/controls.rs

@@ -26,7 +26,7 @@ pub fn update_world_from_input(
     input_receiver: Res<WorldControlChannel>,
     mut camera: Query<&mut Transform, With<Camera>>,
 ) {
-    let speed = 0.1;
+    let speed = 1.0;
     if let Ok(input) = input_receiver.rx.try_recv() {
         log::info!("user input : {input}");
         match input.as_str() {

crates/new_media/src/main.rs

@@ -30,7 +30,7 @@ fn setup_gaussian_cloud(
 ) {
     // let remote_file = Some("https://huggingface.co/datasets/cs50victor/splats/resolve/main/train/point_cloud/iteration_7000/point_cloud.gcloud");
     // TODO: figure out how to load remote files later
-    let splat_file = "splats/playroom/point_cloud/iteration_7000/point_cloud.gcloud";
+    let splat_file = "splats/garden/point_cloud/iteration_7000/point_cloud.gcloud";
     log::info!("loading {}", splat_file);
     let cloud = asset_server.load(splat_file.to_string());
 
@@ -80,6 +80,7 @@ fn main() {
         .filter_module("bevy_ws_server", log::LevelFilter::Debug)
         .init();
 
+    // TODO: change this a preset of resoltions with their aspect ratios
     let config = AppConfig { width: 1920, height: 1080 };
 
     Engine::new()

crates/new_media/src/server.rs

@@ -68,7 +68,8 @@ pub fn receive_message(
                     let resp = Message::Text(
                         json!({
                             "image": curr_img.to_web_base64().unwrap(),
-                            "dimension": curr_img.dimensions()
+                            "dimension": curr_img.dimensions(),
+                            "aspect_ratio": curr_img.aspect_ratio()
                         })
                         .to_string(),
                     );

demo/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Inter, Roboto_Mono } from 'next/font/google';
+import { Bricolage_Grotesque, Inter, Roboto_Mono } from 'next/font/google';
 
 import { TailwindIndicator } from '~/components/TailwindIndicator';
 import { tw } from '~/utils/tw';
@@ -11,7 +11,7 @@ const inter = Inter({
   variable: '--font-sans',
 });
 
-const display = Roboto_Mono({
+const display = Bricolage_Grotesque({
   subsets: ['latin'],
   variable: '--font-display',
 });

demo/app/page.tsx

@@ -2,10 +2,8 @@ import WebSocketExample from "~/components/WebSocketExample";
 
 export default function Page() {
   return (
-    <div className="min-h-dvh prose w-full mx-auto">
-      <div className="prose flex flex-col items-center justify-center">
+    <div className="min-h-dvh prose h-full w-full mx-auto flex flex-col items-center justify-center">
         <WebSocketExample/>
-      </div>
     </div>
   )
 }

demo/components/Canvas.tsx

@@ -2,15 +2,18 @@
 
 import { useEffect, useRef, useState } from "react";
 import { ServerWSResponse } from "./WebSocketExample";
+import { tw } from "~/utils/tw";
 
-export const Canvas=({img_metadata}:{img_metadata: ServerWSResponse })=>{
+export const Canvas=({img_metadata, className}:{img_metadata: ServerWSResponse, className?: string })=>{
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [cursorPosition, setCursorPosition] = useState<[number, number]>()
-  const aspectRatio = 16/9;
+  const [w, h] = img_metadata.dimension;
 
   useEffect(() => {
     if (img_metadata){
       const ctx = canvasRef.current?.getContext('2d');
+      // ctx?.canvas.width = window.innerWidth;
+      // ctx?.canvas.height = window.innerWidth;
       const img = new Image();
       img.src = img_metadata.image;
       [img.width, img.height] = img_metadata.dimension
@@ -23,19 +26,20 @@ export const Canvas=({img_metadata}:{img_metadata: ServerWSResponse })=>{
   return (
     <>
       <canvas
-          className="w-screen h-screen"
+          className={tw("relative w-full h-full rounded-sm", className)}
           ref={canvasRef}
-          width={1000}
-          height={1000}
+          width={w ?? 1000}
+          height={h ?? 1000}
           onPointerMove={(event) => {
-            const [x,y]  = [event.clientX, event.clientY]
-            setCursorPosition([Math.round(x),Math.round(y)])
-            console.log(event.clientX, event.clientY)
+            setCursorPosition([Math.round(event.clientX), Math.round(event.clientY)])
           }}
           onPointerLeave={(_)=>{
             setCursorPosition(undefined)
           }}
       />
+      <p className="text-sm w-max text-center bg-amber-700 mx-auto rounded-lg px-2 py-1 text-background font-medium">
+        cursor position : [{" "} {cursorPosition?.[0] ?? "_"}, {cursorPosition?.[1] ?? "_"}{" "}]
+      </p>
     </>
   )
 }

demo/components/LoadingPlaceholder.tsx

@@ -0,0 +1,8 @@
+export const LoadingScreen=()=>{
+  return (
+    <div className="text-center">
+      <h1>NEW MEDIA</h1>
+      <p className='text-xl font-semibold'>trying to connect to server...</p>
+    </div>
+  )
+}

demo/components/WebSocketExample.tsx

@@ -3,10 +3,12 @@
 import { useEffect, useState } from 'react';
 import { Canvas } from './Canvas';
 import { Controller } from './Controller';
+import { LoadingScreen } from './LoadingPlaceholder';
 
 export interface ServerWSResponse {
   image: string
   dimension: [number, number]
+  aspect_ratio: [number, number]
 }
 
 export default function WebSocketExample({port = 8080}:{port?:number}){
@@ -48,12 +50,14 @@ export default function WebSocketExample({port = 8080}:{port?:number}){
   }, []);
 
   return (
-    <div>
+    <>
       { imgMetadata ? (
-        <Canvas img_metadata={imgMetadata} />
-      ) : <p className='text-xl font-semibold'>NEW MEDIA | trying to connect to server...</p>
+          <div className={`w-screen px-4 aspect-[${imgMetadata.aspect_ratio[0]}/${imgMetadata.aspect_ratio[1]}]`}>
+            <Canvas img_metadata={imgMetadata} className='w-full h-full' />
+          </div>
+      ) : (<LoadingScreen/>)
       }
       {socket ? <Controller socket={socket}/> : null}
-    </div>
+    </>
   )
 };