add lua navigation

2026-01-16 00:36:41 +01:00
parent ebf80052f0
commit 08327e5575
10 changed files with 170 additions and 59 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@
 /cmake-build*
 /out
 /dump
+/material-design-icons
--- a/assets/demo.rml
+++ b/assets/demo.rml
@@ -35,19 +35,19 @@
    <div class="home-content">
        <div class="app-grid">
            <!-- Row 1 -->
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('dialer')">
                <div class="app-icon-image" style="background-color: #4CAF50;">P</div>
                <span class="app-icon-label">Phone</span>
            </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('messages')">
                <div class="app-icon-image" style="background-color: #2196F3;">M</div>
                <span class="app-icon-label">Messages</span>
            </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('contacts')">
                <div class="app-icon-image" style="background-color: #FF9800;">C</div>
                <span class="app-icon-label">Contacts</span>
            </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('browser')">
                <div class="app-icon-image" style="background-color: #F44336;">B</div>
                <span class="app-icon-label">Browser</span>
            </div>
@@ -61,7 +61,7 @@
                <div class="app-icon-image" style="background-color: #00BCD4;">C</div>
                <span class="app-icon-label">Camera</span>
            </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('settings')">
                <div class="app-icon-image" style="background-color: #607D8B;">S</div>
                <span class="app-icon-label">Settings</span>
            </div>
@@ -110,10 +110,10 @@

    <!-- Dock -->
    <div class="dock">
-        <div class="dock-item" style="background-color: #4CAF50;">P</div>
-        <div class="dock-item" style="background-color: #2196F3;">M</div>
-        <div class="dock-item" style="background-color: #FF9800;">C</div>
-        <div class="dock-item" style="background-color: #F44336;">B</div>
+        <div class="dock-item" style="background-color: #4CAF50;" onclick="navigateTo('dialer')">P</div>
+        <div class="dock-item" style="background-color: #2196F3;" onclick="navigateTo('messages')">M</div>
+        <div class="dock-item" style="background-color: #FF9800;" onclick="navigateTo('contacts')">C</div>
+        <div class="dock-item" style="background-color: #F44336;" onclick="navigateTo('browser')">B</div>
    </div>
 </body>
 </rml>
--- a/assets/screens/browser.rml
+++ b/assets/screens/browser.rml
@@ -2,6 +2,7 @@
 <head>
    <link type="text/rcss" href="../ui/theme.rcss"/>
    <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
    <title>Browser</title>
    <style>
        .browser-screen {
@@ -172,7 +173,7 @@

    <!-- Browser Toolbar -->
    <div class="browser-toolbar">
-        <div class="browser-nav-btn" onclick="navigateTo('home')">←</div>
+        <div class="browser-nav-btn" onclick="goBack()">←</div>
        <div class="browser-nav-btn disabled">→</div>
        <div class="browser-url-bar">
            <span class="browser-secure-icon">L</span>
@@ -211,7 +212,7 @@

    <!-- Bottom Bar -->
    <div class="browser-bottom-bar">
-        <div class="browser-tab-btn" onclick="navigateTo('home')">
+        <div class="browser-tab-btn" onclick="goHome()">
            <span class="browser-tab-icon">H</span>
            <span class="browser-tab-label">Home</span>
        </div>
--- a/assets/screens/contacts.rml
+++ b/assets/screens/contacts.rml
@@ -2,6 +2,7 @@
 <head>
    <link type="text/rcss" href="../ui/theme.rcss"/>
    <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
    <title>Contacts</title>
    <style>
        .contacts-screen {
@@ -70,7 +71,7 @@
 <body class="contacts-screen">
    <!-- App Bar -->
    <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
        <span class="app-bar-title">Contacts</span>
        <div class="btn-icon">+</div>
    </div>
--- a/assets/screens/dialer.rml
+++ b/assets/screens/dialer.rml
@@ -2,6 +2,7 @@
 <head>
    <link type="text/rcss" href="../ui/theme.rcss"/>
    <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
    <script src="../scripts/phone.lua"></script>
    <title>Phone</title>
    <style>
@@ -106,7 +107,7 @@
 <body class="dialer-screen">
    <!-- App Bar -->
    <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
        <span class="app-bar-title">Phone</span>
    </div>

--- a/assets/screens/lock.rml
+++ b/assets/screens/lock.rml
@@ -2,6 +2,7 @@
 <head>
    <link type="text/rcss" href="../ui/theme.rcss"/>
    <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
    <title>Lock Screen</title>
    <style>
        .lock-screen {
@@ -124,7 +125,7 @@
        }
    </style>
 </head>
-<body class="lock-screen" onclick="navigateTo('home')">
+<body class="lock-screen" onclick="goHome()">
    <!-- Status Bar -->
    <div class="status-bar">
        <span class="status-bar-time">12:30</span>
--- a/assets/screens/messages.rml
+++ b/assets/screens/messages.rml
@@ -2,6 +2,7 @@
 <head>
    <link type="text/rcss" href="../ui/theme.rcss"/>
    <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
    <title>Messages</title>
    <style>
        .messages-screen {
@@ -130,7 +131,7 @@
 <body class="messages-screen">
    <!-- App Bar -->
    <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
        <span class="app-bar-title">Messages</span>
        <div class="btn-icon">Q</div>
    </div>
--- a/assets/screens/settings.rml
+++ b/assets/screens/settings.rml
@@ -2,6 +2,7 @@
 <head>
    <link type="text/rcss" href="../ui/theme.rcss"/>
    <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
    <title>Settings</title>
    <style>
        .settings-screen {
@@ -148,7 +149,7 @@
 <body class="settings-screen">
    <!-- App Bar -->
    <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
        <span class="app-bar-title">Settings</span>
        <div class="btn-icon">Q</div>
    </div>
--- a/assets/scripts/navigation.lua
+++ b/assets/scripts/navigation.lua
@@ -1,9 +1,9 @@
 -- Navigation System for Virtual Smartphone
 -- Handles screen transitions and state management

-- Screen registry
+-- Screen registry - maps screen names to RML file paths
 local screens = {
-    home = "screens/home.rml",
+    home = "demo.rml",
    lock = "screens/lock.rml",
    dialer = "screens/dialer.rml",
    contacts = "screens/contacts.rml",
@@ -12,33 +12,59 @@ local screens = {
    browser = "screens/browser.rml"
 }

-- Current screen state
-local current_screen = "home"
-local screen_history = {}
+-- Navigation history stack
+local history = {}

-- Navigate to a screen
+-- Current screen name
+local current_screen = "home"
+
+-- Navigate to a screen by name
 function navigateTo(screen_name)
-    if screens[screen_name] then
-        -- Add current screen to history
-        table.insert(screen_history, current_screen)
+    local path = screens[screen_name]
+    if path then
+        -- Push current screen to history before navigating
+        table.insert(history, current_screen)
        current_screen = screen_name

-        -- Load the new document
-        -- Note: In RmlUi, we'd typically use document loading
-        print("Navigating to: " .. screen_name)
+        -- Load the new screen using C++ function
+        local success = loadScreen(path)
+        if success then
+            print("Navigated to: " .. screen_name)
+        else
+            -- Restore previous state on failure
+            current_screen = table.remove(history)
+            print("Failed to navigate to: " .. screen_name)
+        end
+        return success
    else
        print("Unknown screen: " .. screen_name)
+        return false
    end
 end

 -- Go back to previous screen
 function goBack()
-    if #screen_history > 0 then
-        current_screen = table.remove(screen_history)
-        print("Going back to: " .. current_screen)
+    if #history > 0 then
+        local previous = table.remove(history)
+        local path = screens[previous]
+        if path then
+            current_screen = previous
+            loadScreen(path)
+            print("Back to: " .. previous)
+            return true
+        end
    else
        print("No history to go back to")
    end
+    return false
+end
+
+-- Go to home screen (clear history)
+function goHome()
+    history = {}
+    current_screen = "home"
+    loadScreen(screens.home)
+    print("Navigated to home")
 end

 -- Get current screen name
@@ -46,9 +72,19 @@ function getCurrentScreen()
    return current_screen
 end

+-- Check if we can go back
+function canGoBack()
+    return #history > 0
+end
+
 -- Clear navigation history
 function clearHistory()
-    screen_history = {}
+    history = {}
+end
+
+-- Get history depth
+function getHistoryDepth()
+    return #history
 end

 print("Navigation system initialized")
--- a/main.cpp
+++ b/main.cpp
@@ -9,12 +9,26 @@
 #include <RmlUi/Core.h>
 #include <RmlUi/Debugger.h>
 #include <RmlUi/Lua.h>
+#include <RmlUi/Lua/Interpreter.h>
 #include <RmlUi_Backend.h>
 #include <RmlUi_Include_Windows.h>
 #include <RmlUi_Include_GL3.h>
 #include <GLFW/glfw3.h>
 #include <png.h>

+extern "C" {
+#include <lua.h>
+#include <lauxlib.h>
+#include <lualib.h>
+}
+
+// Global app state for Lua access
+struct AppState {
+    Rml::Context* context = nullptr;
+    Rml::ElementDocument* document = nullptr;
+    std::filesystem::path assets_path;
+} g_app;
+
 void load_fonts(const std::filesystem::path& dir)
 {
    for (const auto& file : std::filesystem::directory_iterator(dir))
@@ -26,6 +40,57 @@ void load_fonts(const std::filesystem::path& dir)
    }
 }

+// Lua function: loadScreen(path) - loads a new RML document
+// Path is relative to assets folder
+int lua_loadScreen(lua_State* L)
+{
+    const char* path = luaL_checkstring(L, 1);
+
+    std::filesystem::path full_path = g_app.assets_path / path;
+
+    if (!std::filesystem::exists(full_path))
+    {
+        std::println("Screen not found: {}", full_path.string());
+        lua_pushboolean(L, false);
+        return 1;
+    }
+
+    // Unload current document
+    if (g_app.document)
+    {
+        g_app.context->UnloadDocument(g_app.document);
+        g_app.document = nullptr;
+    }
+
+    // Load new document
+    g_app.document = g_app.context->LoadDocument(full_path.string());
+    if (g_app.document)
+    {
+        g_app.document->Show();
+        std::println("Loaded screen: {}", path);
+        lua_pushboolean(L, true);
+    }
+    else
+    {
+        std::println("Failed to load screen: {}", path);
+        lua_pushboolean(L, false);
+    }
+
+    return 1;
+}
+
+// Register custom Lua functions
+void registerLuaFunctions()
+{
+    lua_State* L = Rml::Lua::Interpreter::GetLuaState();
+
+    // Register global function
+    lua_pushcfunction(L, lua_loadScreen);
+    lua_setglobal(L, "loadScreen");
+
+    std::println("Registered Lua functions");
+}
+
 void DumpElementTree(Rml::Element* element, std::ofstream& out, int depth = 0)
 {
    if (!element) return;
@@ -173,22 +238,25 @@ int main(const int argc, const char* argv[])
    Rml::Initialise();
    Rml::Lua::Initialise();

-    Rml::Context* context = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
-    if (!context)
+    g_app.context = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
+    if (!g_app.context)
    {
        Rml::Shutdown();
        Backend::Shutdown();
        return EXIT_FAILURE;
    }

+    // Register custom Lua functions
+    registerLuaFunctions();
+
    // Find the assets folder by checking for fonts
-    std::filesystem::path assets_path = std::filesystem::absolute(file.parent_path());
+    g_app.assets_path = std::filesystem::absolute(file.parent_path());

    // Walk up the directory tree to find a folder containing .ttf fonts
-    while (!assets_path.empty() && assets_path.has_parent_path())
+    while (!g_app.assets_path.empty() && g_app.assets_path.has_parent_path())
    {
        bool has_fonts = false;
-        for (const auto& entry : std::filesystem::directory_iterator(assets_path))
+        for (const auto& entry : std::filesystem::directory_iterator(g_app.assets_path))
        {
            if (entry.path().extension() == ".ttf")
            {
@@ -197,15 +265,15 @@ int main(const int argc, const char* argv[])
            }
        }
        if (has_fonts) break;
-        assets_path = assets_path.parent_path();
+        g_app.assets_path = g_app.assets_path.parent_path();
    }

-    load_fonts(assets_path);
+    load_fonts(g_app.assets_path);

-    Rml::ElementDocument* document = context->LoadDocument(file.string());
-    if (document)
+    g_app.document = g_app.context->LoadDocument(file.string());
+    if (g_app.document)
    {
-        document->Show();
+        g_app.document->Show();
    }

    // Dump mode: render and capture screenshot
@@ -222,10 +290,10 @@ int main(const int argc, const char* argv[])
        }

        // First render to default framebuffer to initialize everything
-        Backend::ProcessEvents(context);
-        context->Update();
+        Backend::ProcessEvents(g_app.context);
+        g_app.context->Update();
        Backend::BeginFrame();
-        context->Render();
+        g_app.context->Render();
        Backend::PresentFrame();

        // Create dump folder if it doesn't exist
@@ -238,7 +306,7 @@ int main(const int argc, const char* argv[])
        {
            dump_file << "Window: " << window_width << "x" << window_height << "\n";
            dump_file << "\n=== Element Layout ===\n";
-            DumpElementTree(document, dump_file);
+            DumpElementTree(g_app.document, dump_file);
            dump_file.close();
        }

@@ -252,8 +320,8 @@ int main(const int argc, const char* argv[])
        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

        // Render to FBO
-        context->Update();
-        context->Render();
+        g_app.context->Update();
+        g_app.context->Render();

        // Read pixels
        auto pixels = fbo.readPixels();
@@ -269,7 +337,7 @@ int main(const int argc, const char* argv[])
        return EXIT_SUCCESS;
    }

-    const HANDLE hNotif = FindFirstChangeNotification(assets_path.c_str(),
+    const HANDLE hNotif = FindFirstChangeNotification(g_app.assets_path.c_str(),
        TRUE, FILE_NOTIFY_CHANGE_LAST_WRITE);

    bool running = true;
@@ -278,22 +346,22 @@ int main(const int argc, const char* argv[])
        if (const DWORD wait_result = WaitForSingleObject(hNotif, 100);
            wait_result == WAIT_OBJECT_0)
        {
-            if (document)
-                context->UnloadDocument(document);
-            context->Update();
+            if (g_app.document)
+                g_app.context->UnloadDocument(g_app.document);
+            g_app.context->Update();
            std::this_thread::sleep_for(std::chrono::milliseconds(100));
-            document = context->LoadDocument(file.string());
-            if (document)
+            g_app.document = g_app.context->LoadDocument(file.string());
+            if (g_app.document)
            {
-                document->ReloadStyleSheet();
-                document->Show();
+                g_app.document->ReloadStyleSheet();
+                g_app.document->Show();
            }
            FindNextChangeNotification(hNotif);
        }
-        running = Backend::ProcessEvents(context);
-        context->Update();
+        running = Backend::ProcessEvents(g_app.context);
+        g_app.context->Update();
        Backend::BeginFrame();
-        context->Render();
+        g_app.context->Render();
        Backend::PresentFrame();
    }