make lvgl resize.

LvglApplication/lvgl_shell.html

@@ -17,9 +17,12 @@
 			  align-items: center;
 			  justify-content: center;
 			}
-			#output {
+			#output, #canvas {
 				margin: 0;
 				padding: 0;
+				width: 100%;
+				height: 100%;
+				background-color: burlywood;
 			}
 		</style>
 	</head>
@@ -29,12 +32,10 @@
 		</p>
 		<script>
 			var siteURL = new URL(window.location.href);
-			var w = siteURL.searchParams.get("w") || "800";
-			var h = siteURL.searchParams.get("h") || "480";
 			var canvas = document.getElementById('canvas');
-			canvas.setAttribute("width", w);
-			canvas.setAttribute("height", h);
-			console.log("Requested " + w + "x" + h + " px");
+			let rect = canvas.getBoundingClientRect();
+			canvas.setAttribute("width", rect.width);
+			canvas.setAttribute("height", rect.height);
 			var Module = {
 				print: function(text) {
 					console.log(text);
@@ -45,7 +46,20 @@
 				canvas: (function() {
 					return canvas;
 				})(),
-				arguments: [ siteURL.searchParams.get("w") || "800", siteURL.searchParams.get("h") || "480", siteURL.searchParams.get("example") ?? "default" ]
+				arguments: [  String(rect.width), String(rect.height), siteURL.searchParams.get("example") ?? "default" ],
+				onRuntimeInitialized: function () {
+					// const canvas = document.getElementById('canvas');
+					// const observer = new ResizeObserver(entries => {
+					// 	for (let entry of entries) {
+					// 		const width = entry.contentRect.width;
+					// 		const height = entry.contentRect.height;
+					// 		Module.setCanvasSize(width, height); // 调用 Wasm 函数
+					// 		canvas.setAttribute("width", width);
+					// 		canvas.setAttribute("height", height);
+					// 	}
+					// });
+					// observer.observe(canvas);
+				}
 			};
             window.addEventListener("click", () => window.focus());
 		</script>

LvglApplication/main.cpp

@@ -46,7 +46,7 @@ void do_loop() {
 
 static void hal_init(void) {
     lv_display_t *disp = lv_sdl_window_create(monitor_hor_res, monitor_ver_res);
-
+    lv_sdl_window_set_resizeable(disp, true);
     lv_group_t *g = lv_group_create();
     lv_group_set_default(g);
 

resources/build.sh

@@ -112,6 +112,7 @@ function build_docker_images(){
 }
 
 function lvgl(){
+    rm ${build_path}/LvglApplication/lvglapp.html
     emcmake cmake -DSDL2_DIR=/home/amass/emsdk/upstream/emscripten/system/lib/cmake/SDL2 -S LvglApplication -B ${build_path}/LvglApplication
     cmake --build ${build_path}/LvglApplication --target all
     # python3 -m http.server -d  ./build/LvglApplication