120 virtual keyboard (#121)

AlixANNERAUD · web-flow · commit b68a7d345d8b · 2025-10-29T23:26:48.000+01:00
* refactor imports in window.rs for improved organization

* add event bubbling flag to window object

* add keyboard event handling and show keyboard option in layout initialization

* add touch screen detection functionality

* initialize global allocator before main and add touch screen detection for keyboard option

* add safety documentation for keyboard and screen event handlers
diff --git a/drivers/wasm/src/devices/graphics/mod.rs b/drivers/wasm/src/devices/graphics/mod.rs
@@ -9,6 +9,7 @@ use file_system::{Device, create_device};
 use graphics::Point;
 pub use keyboard::*;
 pub use mouse::*;
+use wasm_bindgen::JsValue;
 use web_sys::{HtmlCanvasElement, Window};
 
 pub struct GraphicsDevices {
@@ -35,6 +36,20 @@ pub async fn new() -> Result<GraphicsDevices, String> {
     })
 }
 
+pub fn has_touch_screen() -> Result<bool, &'static str> {
+    let window = web_sys::window().ok_or("Failed to get window")?;
+
+    // 1. Check if 'ontouchstart' exists in window
+    let has_ontouchstart =
+        js_sys::Reflect::has(&window, &JsValue::from_str("ontouchstart")).unwrap_or(false);
+
+    // 2. Check maxTouchPoints
+    let navigator = window.navigator();
+    let max_touch_points = navigator.max_touch_points();
+
+    Ok(has_ontouchstart || max_touch_points > 0)
+}
+
 fn get_window_size(window: &Window) -> Option<(u32, u32)> {
     let width = window.inner_width().ok()?.as_f64()? as u32;
     let height = window.inner_height().ok()?.as_f64()? as u32;
diff --git a/examples/wasm/src/main.rs b/examples/wasm/src/main.rs
@@ -1,13 +1,13 @@
 #![no_std]
 
-#[cfg(target_arch = "wasm32")]
-drivers_wasm::memory::instantiate_global_allocator!();
-
 #[cfg(target_arch = "wasm32")]
 #[xila::task::run(task_path = xila::task, executor = drivers_wasm::executor::instantiate_static_executor!())]
 async fn main() {
+    drivers_wasm::memory::instantiate_global_allocator!();
+
     extern crate alloc;
 
+    use alloc::string::ToString;
     use alloc::vec;
     use drivers_wasm::devices::graphics::GraphicsDevices;
     use xila::bootsplash::Bootsplash;
@@ -212,8 +212,15 @@ async fn main() {
 
     bootsplash.stop(graphics_manager).await.unwrap();
 
+    let arguments = if drivers_wasm::devices::graphics::has_touch_screen().unwrap() {
+        log::information!("Touch screen detected.");
+        vec!["--show-keyboard".to_string()]
+    } else {
+        vec![]
+    };
+
     // - - Execute the shell
-    let _ = executable::execute("/binaries/graphical_shell", vec![], standard, None)
+    let _ = executable::execute("/binaries/graphical_shell", arguments, standard, None)
         .await
         .unwrap()
         .join()
diff --git a/executables/shell/graphical/src/layout.rs b/executables/shell/graphical/src/layout.rs
@@ -1,9 +1,9 @@
+use crate::error::{Error, Result};
 use alloc::{format, string::String};
-use xila::graphics::{self, lvgl, theme};
+use core::ptr::null_mut;
+use xila::graphics::{self, EventKind, lvgl, theme};
 use xila::shared::unix_to_human_time;
-use xila::time;
-
-use crate::error::{Error, Result};
+use xila::{log, time};
 
 pub struct Layout {
     window: *mut lvgl::lv_obj_t,
@@ -21,6 +21,85 @@ impl Drop for Layout {
     }
 }
 
+/// Keyboard event handler.
+///
+/// # Safety
+///
+/// This function is unsafe because it dereferences raw pointers.
+pub unsafe extern "C" fn keyboard_event_handler(event: *mut lvgl::lv_event_t) {
+    unsafe {
+        let code = lvgl::lv_event_get_code(event);
+        let code = EventKind::from_lvgl_code(code);
+        let keyboard = lvgl::lv_event_get_user_data(event) as *mut lvgl::lv_obj_t;
+
+        if keyboard.is_null() {
+            return;
+        }
+
+        match code {
+            EventKind::Ready => {
+                let focused_input = lvgl::lv_keyboard_get_textarea(keyboard);
+
+                if focused_input.is_null() {
+                    return;
+                }
+
+                lvgl::lv_obj_send_event(
+                    focused_input,
+                    EventKind::Ready.into_lvgl_code(),
+                    null_mut(),
+                );
+
+                lvgl::lv_keyboard_set_textarea(keyboard, null_mut());
+                lvgl::lv_obj_add_flag(keyboard, lvgl::lv_obj_flag_t_LV_OBJ_FLAG_HIDDEN);
+            }
+            EventKind::Cancel => {
+                lvgl::lv_keyboard_set_textarea(keyboard, null_mut());
+                lvgl::lv_obj_add_flag(keyboard, lvgl::lv_obj_flag_t_LV_OBJ_FLAG_HIDDEN);
+            }
+
+            _ => {}
+        }
+    }
+}
+
+/// Screen event handler.
+///
+/// # Safety
+///
+/// This function is unsafe because it dereferences raw pointers.
+pub unsafe extern "C" fn screen_event_handler(event: *mut lvgl::lv_event_t) {
+    unsafe {
+        let code = lvgl::lv_event_get_code(event);
+        let code = EventKind::from_lvgl_code(code);
+        let target = lvgl::lv_event_get_target_obj(event);
+        let keyboard = lvgl::lv_event_get_user_data(event) as *mut lvgl::lv_obj_t;
+
+        if target.is_null() || keyboard.is_null() {
+            return;
+        }
+
+        log::information!("event screen : {code:?}");
+
+        match code {
+            EventKind::Focused => {
+                if lvgl::lv_obj_has_class(target, &lvgl::lv_textarea_class) {
+                    lvgl::lv_keyboard_set_textarea(keyboard, target);
+                    lvgl::lv_obj_remove_flag(keyboard, lvgl::lv_obj_flag_t_LV_OBJ_FLAG_HIDDEN);
+                    lvgl::lv_obj_move_foreground(keyboard);
+                }
+            }
+            EventKind::Defocused => {
+                if lvgl::lv_obj_has_class(target, &lvgl::lv_textarea_class) {
+                    lvgl::lv_keyboard_set_textarea(keyboard, null_mut());
+                    lvgl::lv_obj_add_flag(keyboard, lvgl::lv_obj_flag_t_LV_OBJ_FLAG_HIDDEN);
+                }
+            }
+            _ => {}
+        }
+    }
+}
+
 impl Layout {
     pub async fn r#loop(&mut self) {
         self.update_clock().await;
@@ -47,7 +126,7 @@ impl Layout {
         self.window
     }
 
-    pub async fn new() -> Result<Self> {
+    pub async fn new(show_keyboard: bool) -> Result<Self> {
         let _lock = graphics::get_instance().lock().await; // Lock the graphics
 
         // - Create a window
@@ -147,7 +226,7 @@ impl Layout {
             if body.is_null() {
                 return Err(Error::FailedToCreateObject);
             }
-
+            lvgl::lv_obj_add_flag(body, lvgl::lv_obj_flag_t_LV_OBJ_FLAG_EVENT_BUBBLE);
             lvgl::lv_obj_set_width(body, lvgl::lv_pct(100));
             lvgl::lv_obj_set_flex_grow(body, 1);
             lvgl::lv_obj_set_style_pad_all(body, 0, lvgl::LV_STATE_DEFAULT);
@@ -156,6 +235,44 @@ impl Layout {
             body
         };
 
+        // - Create a keyboard
+        unsafe {
+            let keyboard = lvgl::lv_keyboard_create(window);
+
+            if keyboard.is_null() {
+                return Err(Error::FailedToCreateObject);
+            }
+
+            lvgl::lv_obj_add_flag(keyboard, lvgl::lv_obj_flag_t_LV_OBJ_FLAG_HIDDEN);
+
+            if show_keyboard {
+                lvgl::lv_obj_add_event_cb(
+                    window,
+                    Some(screen_event_handler),
+                    EventKind::Focused.into_lvgl_code(),
+                    keyboard as *mut _,
+                );
+                lvgl::lv_obj_add_event_cb(
+                    window,
+                    Some(screen_event_handler),
+                    EventKind::Defocused.into_lvgl_code(),
+                    keyboard as *mut _,
+                );
+                lvgl::lv_obj_add_event_cb(
+                    keyboard,
+                    Some(keyboard_event_handler),
+                    EventKind::Ready.into_lvgl_code(),
+                    keyboard as *mut _,
+                );
+                lvgl::lv_obj_add_event_cb(
+                    window,
+                    Some(keyboard_event_handler),
+                    EventKind::Cancel.into_lvgl_code(),
+                    keyboard as *mut _,
+                );
+            }
+        };
+
         drop(_lock); // Unlock the graphics
 
         graphics::get_instance().set_window_parent(body).await?;
diff --git a/executables/shell/graphical/src/lib.rs b/executables/shell/graphical/src/lib.rs
@@ -18,7 +18,7 @@ use core::time::Duration;
 use home::Home;
 use layout::Layout;
 use login::Login;
-use xila::executable::{self, Standard};
+use xila::executable::{self, ArgumentsParser, Standard};
 use xila::file_system::Permissions;
 use xila::task;
 use xila::users;
@@ -27,7 +27,13 @@ use crate::shortcut::SHORTCUT_PATH;
 use crate::{desk::Desk, error::Error};
 
 pub async fn main(standard: Standard, arguments: Vec<String>) -> Result<(), NonZeroUsize> {
-    Shell::new(standard).await.main(arguments).await
+    let mut parsed_arguments = ArgumentsParser::new(&arguments);
+
+    let show_keyboard = parsed_arguments
+        .find_map(|argument| Some(argument.options.get_option("show-keyboard").is_some()))
+        .unwrap_or(false);
+
+    Shell::new(standard, show_keyboard).await.main().await
 }
 
 pub struct Shell {
@@ -48,8 +54,8 @@ executable::implement_executable_device!(
 );
 
 impl Shell {
-    pub async fn new(standard: Standard) -> Self {
-        let layout = Layout::new().await.unwrap();
+    pub async fn new(standard: Standard, show_keyboard: bool) -> Self {
+        let layout = Layout::new(show_keyboard).await.unwrap();
 
         let login = Box::new(Login::new().await.unwrap());
 
@@ -63,7 +69,7 @@ impl Shell {
         }
     }
 
-    pub async fn main(&mut self, _: Vec<String>) -> Result<(), NonZeroUsize> {
+    pub async fn main(&mut self) -> Result<(), NonZeroUsize> {
         let virtual_file_system = xila::virtual_file_system::get_instance();
         virtual_file_system
             .set_permissions(SHORTCUT_PATH, Permissions::ALL_FULL)
diff --git a/modules/graphics/src/window.rs b/modules/graphics/src/window.rs
@@ -1,12 +1,8 @@
+use super::lvgl;
+use crate::{Color, Error, EventKind, Result, event::Event};
 use alloc::boxed::Box;
-
-use core::{mem::forget, str};
-
 use alloc::collections::VecDeque;
-
-use crate::{Color, Error, EventKind, Result, event::Event};
-
-use super::lvgl;
+use core::{mem::forget, str};
 
 struct UserData {
     pub queue: VecDeque<Event>,
@@ -94,6 +90,7 @@ impl Window {
                 lvgl::lv_event_code_t_LV_EVENT_ALL,
                 &mut user_data.queue as *mut _ as *mut core::ffi::c_void,
             );
+            lvgl::lv_obj_add_flag(window, lvgl::lv_obj_flag_t_LV_OBJ_FLAG_EVENT_BUBBLE);
             lvgl::lv_obj_set_user_data(window, Box::into_raw(user_data) as *mut core::ffi::c_void);
             // Set the size of the window to 100% of the parent object.
             lvgl::lv_obj_set_size(window, lvgl::lv_pct(100), lvgl::lv_pct(100));
