toolbar preview ui

buildNumber.properties

@@ -1,3 +1,3 @@
 #maven.buildNumber.plugin properties file
-#Sat Apr 26 14:36:52 EDT 2025
-buildNumber=620
+#Sat Apr 26 19:41:37 EDT 2025
+buildNumber=621

docs/src/progress/renderertodo.md

@@ -1557,6 +1557,7 @@ Block cursor custom textures
 New block type
 Fix inventory item tooltip not clearing
 More item icons
+Toolbar preview ui element
 
 
 

src/main/java/electrosphere/client/sim/ClientSimulation.java

@@ -8,6 +8,7 @@ import electrosphere.client.fluid.manager.ClientFluidManager;
 import electrosphere.client.instancing.InstanceUpdater;
 import electrosphere.client.interact.ClientInteractionEngine;
 import electrosphere.client.terrain.manager.ClientTerrainManager;
+import electrosphere.client.ui.menu.ingame.ToolbarPreviewWindow;
 import electrosphere.engine.Globals;
 import electrosphere.entity.Entity;
 import electrosphere.entity.EntityTags;
@@ -133,6 +134,7 @@ public class ClientSimulation {
         //bones have potenitally moved, so need to update where attached entities actually are before drawing
         AttachUtils.clientUpdateAttachedEntityPositions();
         ClientInteractionEngine.updateInteractionTargetLabel();
+        ToolbarPreviewWindow.checkVisibility();
         // updateCellManager();
         Globals.profiler.endCpuSample();
     }

src/main/java/electrosphere/client/ui/components/ToolbarInventoryPanel.java

@@ -1,5 +1,7 @@
 package electrosphere.client.ui.components;
 
+import org.joml.Vector4f;
+
 import electrosphere.audio.VirtualAudioSourceManager.VirtualAudioSourceType;
 import electrosphere.client.ui.menu.WindowStrings;
 import electrosphere.client.ui.menu.WindowUtils;
@@ -18,6 +20,7 @@ import electrosphere.logger.LoggerInterface;
 import electrosphere.renderer.ui.elements.Div;
 import electrosphere.renderer.ui.elements.ImagePanel;
 import electrosphere.renderer.ui.elements.Label;
+import electrosphere.renderer.ui.elements.Panel;
 import electrosphere.renderer.ui.elements.Tooltip;
 import electrosphere.renderer.ui.elementtypes.ClickableElement.ClickEventCallback;
 import electrosphere.renderer.ui.elementtypes.ContainerElement;
@@ -49,6 +52,12 @@ public class ToolbarInventoryPanel {
     public static Element createToolbarInventoryPanel(Entity entity){
         RelationalInventoryState inventory = InventoryUtils.getToolbarInventory(entity);
 
+        int selectedIndex = 0;
+        if(ClientToolbarState.hasClientToolbarState(entity)){
+            ClientToolbarState clientToolbarState = ClientToolbarState.getClientToolbarState(entity);
+            selectedIndex = clientToolbarState.getSelectedSlot();
+        }
+
 
         Div div = Div.createDiv();
         div.setJustifyContent(YogaJustification.Center);
@@ -139,10 +148,10 @@ public class ToolbarInventoryPanel {
                 ImagePanel panel = ImagePanel.createImagePanel(texturePath);
                 panel.setMinWidth(panelWidth);
                 panel.setMinHeight(panelHeight);
-                panel.setMarginRight(15);
-                panel.setMarginBottom(15);
-                panel.setMarginLeft(15);
-                panel.setMarginTop(15);
+                panel.setMarginRight(5);
+                panel.setMarginBottom(5);
+                panel.setMarginLeft(5);
+                panel.setMarginTop(5);
                 panel.setAlignSelf(YogaAlignment.Start);
                 panel.setAbsolutePosition(false);
                 if(hasItem == true && inventory.getItemSlot("" + i) != Globals.draggedItem){
@@ -244,7 +253,18 @@ public class ToolbarInventoryPanel {
                         return false;
                     }});
                 }
-                panelContainer.addChild(panel);
+                ContainerElement container = null;
+                if(i == selectedIndex){
+                    container = Panel.createPanel(panel);
+                    ((Panel)container).setColor(new Vector4f(1.0f));
+                } else {
+                    container = Div.createCol(panel);
+                    container.setMarginBottom(10);
+                    container.setMarginLeft(10);
+                    container.setMarginRight(10);
+                    container.setMarginTop(10);
+                }
+                panelContainer.addChild(container);
             }
             div.addChild(panelContainer);
         }

src/main/java/electrosphere/client/ui/menu/WindowStrings.java

@@ -85,4 +85,9 @@ public class WindowStrings {
      */
     public static final String TARGET_TOOLTIP = "targetTooltip";
 
+    /**
+     * The toolbar preview
+     */
+    public static final String TOOLBAR_PREVIEW = "toolbarPreview";
+
 }

src/main/java/electrosphere/client/ui/menu/WindowUtils.java

@@ -149,7 +149,7 @@ public class WindowUtils {
     public static void replaceWindow(String window, Window windowEl){
         Globals.elementService.unregisterWindow(window);
         Globals.elementService.registerWindow(window, windowEl);
-        recursiveSetVisible(windowEl, true);
+        WindowUtils.recursiveSetVisible(windowEl, true);
         Globals.elementService.focusFirstElement();
     }
 

src/main/java/electrosphere/client/ui/menu/ingame/FabMenus.java

@@ -35,7 +35,7 @@ public class FabMenus {
      * Creates the level editor side panel window
      * @return
      */
-    public static Window createVoxelTypeSelectionPanel(){
+    public static Window createFabSelectionPanel(){
         //setup window
         Window fabSelectionPanelWindow = Window.create(Globals.renderingEngine.getOpenGLState(), 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, true);
         fabSelectionPanelWindow.setParentAlignContent(YogaAlignment.Center);

src/main/java/electrosphere/client/ui/menu/ingame/ToolbarPreviewWindow.java

@@ -0,0 +1,73 @@
+package electrosphere.client.ui.menu.ingame;
+
+import electrosphere.client.ui.components.ToolbarInventoryPanel;
+import electrosphere.client.ui.menu.WindowStrings;
+import electrosphere.client.ui.menu.WindowUtils;
+import electrosphere.engine.Globals;
+import electrosphere.engine.signal.Signal.SignalType;
+import electrosphere.renderer.ui.elements.Window;
+import electrosphere.renderer.ui.elementtypes.ContainerElement.YogaJustification;
+
+/**
+ * Window that shows the toolbar preview
+ */
+public class ToolbarPreviewWindow {
+    
+    /**
+     * Frame number to hide the toolbar preview on
+     */
+    static long frameToHide = 0;
+
+    /**
+     * The preview window
+     */
+    static Window previewWindow;
+
+    //width of the panel
+    static final int WINDOW_WIDTH = 550;
+    static final int WINDOW_HEIGHT = 550;
+
+    /**
+     * Number of frames to reveal for
+     */
+    static final int REVEAL_FRAME_COUNT = 50;
+
+    /**
+     * Creates the level editor side panel window
+     * @return
+     */
+    public static Window createToolbarPreviewWindow(){
+        //setup window
+        Window rVal = Window.createExpandableCenterAligned(Globals.renderingEngine.getOpenGLState(), false);
+        rVal.setJustifyContent(YogaJustification.End);
+
+        //attach scrollable after search input for organzation purposes
+        rVal.addChild(ToolbarInventoryPanel.createToolbarInventoryPanel(Globals.playerEntity));
+
+        Globals.signalSystem.post(SignalType.YOGA_APPLY,rVal);
+
+        return rVal;
+    }
+
+    /**
+     * Checks the visibility of the toolbar preview
+     */
+    public static void checkVisibility(){
+        long currentFrame = Globals.timekeeper.getNumberOfSimFramesElapsed();
+        if(currentFrame > frameToHide){
+            if(previewWindow != null && previewWindow.getVisible()){
+                previewWindow.setVisible(false);
+            }
+        }
+    }
+
+    /**
+     * Reveals the toolbar preview window
+     */
+    public static void reveal(){
+        previewWindow = ToolbarPreviewWindow.createToolbarPreviewWindow();
+        WindowUtils.replaceWindow(WindowStrings.TOOLBAR_PREVIEW, previewWindow);
+        frameToHide = Globals.timekeeper.getNumberOfSimFramesElapsed() + REVEAL_FRAME_COUNT;
+    }
+
+}

src/main/java/electrosphere/client/ui/menu/script/ScriptMenuUtils.java

@@ -37,7 +37,7 @@ public class ScriptMenuUtils {
      */
     @Export
     public static void openFabSelection(){
-        WindowUtils.replaceWindow(WindowStrings.FAB_SELECTION,FabMenus.createVoxelTypeSelectionPanel());
+        WindowUtils.replaceWindow(WindowStrings.FAB_SELECTION,FabMenus.createFabSelectionPanel());
         Globals.controlHandler.hintUpdateControlState(ControlsState.IN_GAME_MAIN_MENU);
     }
 

src/main/java/electrosphere/entity/state/equip/ClientToolbarState.java

@@ -17,6 +17,7 @@ import electrosphere.game.data.item.Item;
 
 import java.util.List;
 
+import electrosphere.client.ui.menu.ingame.ToolbarPreviewWindow;
 import electrosphere.collision.PhysicsEntityUtils;
 import electrosphere.controls.cursor.CursorState;
 import electrosphere.engine.Globals;
@@ -52,6 +53,11 @@ public class ClientToolbarState implements BehaviorTree {
     @SyncedField
     int selectedSlot;
 
+    /**
+     * The slot selected the previous frame -- used to detect changes
+     */
+    int previousFrameSlot;
+
     /**
      * The parent entity
      */
@@ -362,6 +368,10 @@ public class ClientToolbarState implements BehaviorTree {
 
     @Override
     public void simulate(float deltaTime) {
+        if(this.previousFrameSlot != this.selectedSlot){
+            this.previousFrameSlot = this.selectedSlot;
+            ToolbarPreviewWindow.reveal();
+        }
     }
 
     /**

src/main/java/electrosphere/renderer/ui/elements/Button.java

@@ -279,12 +279,14 @@ public class Button extends StandardContainerElement implements DrawableElement,
         if(this.drawFrame){
             if(this.isFocused()){
                 UIFrameUtils.drawFrame(
+                    openGLState,
                     AssetDataStrings.UI_FRAME_TEXTURE_DEFAULT_3, frameColor, 48, 12,
                     this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(), 
                     framebuffer, framebufferPosX, framebufferPosY
                 );
             } else {
                 UIFrameUtils.drawFrame(
+                    openGLState,
                     AssetDataStrings.UI_FRAME_TEXTURE_DEFAULT_3, frameBackgroundColor, 48, 12,
                     this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(), 
                     framebuffer, framebufferPosX, framebufferPosY

src/main/java/electrosphere/renderer/ui/elements/Panel.java

@@ -78,9 +78,7 @@ public class Panel extends StandardContainerElement implements DrawableElement {
      * @param color The color
      */
     public void setColor(Vector4f color){
-        for(Element character : childList){
-            ((BitmapCharacter)character).setColor(color);
-        }
+        this.frameColor = color;
     }
 
     @Override
@@ -93,6 +91,7 @@ public class Panel extends StandardContainerElement implements DrawableElement {
     ) {
 
         UIFrameUtils.drawFrame(
+            openGLState,
             AssetDataStrings.UI_FRAME_TEXTURE_DEFAULT_3, frameColor, 48, 12,
             this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(), 
             framebuffer, framebufferPosX, framebufferPosY

src/main/java/electrosphere/renderer/ui/elements/TextInput.java

@@ -193,12 +193,14 @@ public class TextInput extends StandardContainerElement implements DrawableEleme
         //render background of window
         if(this.isFocused()){
             UIFrameUtils.drawFrame(
+                openGLState,
                 AssetDataStrings.UI_FRAME_TEXTURE_DEFAULT_3, backgroundColor, 48, 12,
                 this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(),
                 framebuffer, framebufferPosX, framebufferPosY
             );
         } else {
             UIFrameUtils.drawFrame(
+                openGLState,
                 AssetDataStrings.UI_FRAME_TEXTURE_DEFAULT_3, backgroundColor, 48, 12,
                 this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(),
                 framebuffer, framebufferPosX, framebufferPosY

src/main/java/electrosphere/renderer/ui/elements/Window.java

@@ -249,6 +249,7 @@ public class Window implements DrawableElement, ContainerElement, NavigableEleme
         //render background of window
         if(planeModel != null && windowFrame != null && this.showDecorations){
             UIFrameUtils.drawFrame(
+                openGLState,
                 AssetDataStrings.UI_FRAME_TEXTURE_DEFAULT_3, color, 48, 12,
                 this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(), 
                 framebuffer, framebufferPosX, framebufferPosY

src/main/java/electrosphere/renderer/ui/frame/UIFrameUtils.java

@@ -4,6 +4,7 @@ import org.joml.Vector3f;
 import org.joml.Vector4f;
 
 import electrosphere.engine.Globals;
+import electrosphere.renderer.OpenGLState;
 import electrosphere.renderer.framebuffer.Framebuffer;
 import electrosphere.renderer.model.Material;
 import electrosphere.renderer.model.Model;
@@ -41,6 +42,7 @@ public class UIFrameUtils {
 
     /**
      * Draws a frame
+     * @param openGLState The opengl state
      * @param frame The texture of the frame to draw
      * @param color The color to draw
      * @param frameCornerDim The dimensions of a corner of the frame texture
@@ -53,10 +55,14 @@ public class UIFrameUtils {
      * @param framebufferPosY The y position of the framebuffer
      */
     public static void drawFrame(
+        OpenGLState openGLState,
         String frame, Vector4f color, int frameTexDim, int frameCornerDim,
         int posX, int posY, int width, int height,
         Framebuffer framebuffer, int framebufferPosX, int framebufferPosY
     ){
+        framebuffer.bind(openGLState);
+        openGLState.glViewport(framebuffer.getWidth(), framebuffer.getHeight());
+
         Model planeModel = Globals.assetManager.fetchModel(Globals.imagePlaneModelID);
         Texture windowFrame = Globals.assetManager.fetchTexture(frame);
         //render background of window