The Surface Class

The Surface class lies at the heart of FuelOS app development. It represents a displayable area on the screen and offers various features. Let’s explore them one by one:

1. Surface Constructor

• Description: Initializes a new Surface with specified dimensions, position, and optional features.
• Parameters:
  • surfaceManager: The SurfaceManager responsible for managing this surface.
  • width: Width of the surface.
  • height: Height of the surface.
  • x: X-coordinate of the surface.
  • y: Y-coordinate of the surface.
  • titlebar (optional): Whether to add a title bar.
  • shadow (optional): Whether to add a shadow.
  • resizable (optional): Whether the surface should be resizable by the user.
• Example:C#

   

  Surface mySurface = new Surface(surfaceManager, 800, 600, 100, 100, titlebar: true, shadow: true, resizable: false);
  

   

2. Render Method

• Description: Renders the surface onto a target canvas.
• Parameters:
  • target: The target canvas to render on.
• Example:C#

   

  Canvas targetCanvas = new Canvas(1024, 768);
  mySurface.Render(targetCanvas);
  

   

3. Resize Method

• Description: Resizes the surface (be cautious to avoid memory corruption).
• Parameters:
  • width: New width for the surface.
  • height: New height for the surface.
• Example:C#

   

  mySurface.Resize(1024, 768);
  

   

4. Rectangle Property

• Description: Gets the rectangle representing the surface’s position and dimensions.
• Example:C#

   

  Rectangle surfaceRect = mySurface.Rectangle;
  

   

5. IsMouseOver Property

• Description: Indicates whether the mouse pointer is currently over the surface.
• Example:C#

   

  bool mouseOverSurface = mySurface.IsMouseOver;
  

   

6. IsMouseOverResizeZone Property

• Description: Determines if the mouse is over the surface’s resize zone (if applicable).
• Example:C#

   

  bool mouseOverResizeZone = mySurface.IsMouseOverResizeZone;
  

   

Advanced Techniques

• Explore additional features such as custom event handling, animations, and interaction with other components.
• Optimize rendering performance by minimizing unnecessary redraws.

Example

As an Example for a(n) app made in FuelOS; lets show the OOBE (out of box experience) using FuelOS's Mirage Development Kit.

using System.Collections.Generic;
using Cosmos.System.ScanMaps;
using Mirage.GraphicsKit;
using Mirage.SurfaceKit;
using Mirage.TextKit;
using Mirage.UIKit;

namespace FuelOS.MirageUI.DE
{
    /// <summary>
    /// Out of box experience application.
    /// </summary>
    class OOBE : UIApplication
    {
        private static readonly List<(string, Cosmos.System.ScanMapBase)> _scanMaps = new()
        {
            ("American English", new USStandardLayout()),
            ("British English", new GBStandardLayout()),
            ("German (Deutsch)", new DEStandardLayout()),
            ("Spanish (Español)", new ESStandardLayout()),
            ("French (Français)", new FRStandardLayout()),
            ("Turkish (Türkçe)", new TRStandardLayout())
        };

        /// <summary>
        /// Initialise the application.
        /// </summary>
        public OOBE(SurfaceManager surfaceManager) : base(surfaceManager)
        {
            MainWindow = new UIWindow(surfaceManager, 480, 360, "Setup", resizable: false);

            UICanvasView icon = new UICanvasView(Resources.Keyboard, alpha: true)
            {
                Location = new(24, 24),
            };

            TextBlock headerBlock = new TextBlock(new TextStyle(Resources.CantarellLarge, Color.Black));
            headerBlock.Append("Keyboard Layout\n");
            headerBlock.Style = new TextStyle(Resources.Cantarell, Color.DeepGray);
            headerBlock.Append("Select your keyboard layout.");

            UITextView label = new UITextView(headerBlock)
            {
                Location = new(112, 24),  
            };

            UIBoxLayout layout = new UIBoxLayout(UIBoxOrientation.Vertical)
            {
                Location = new(112, 88),
            };
            List<UIButton> options = new List<UIButton>();
            foreach (var (Name, ScanMap) in _scanMaps)
            {
                UIButton option = new UIButton(Name)
                {
                    HorizontalPadding = 32,
                    Style = new UIRadioButtonStyle(),
                    Checkable = true,
                    AllowUnchecking = false,
                };
                options.Add(option);
                layout.Add(option);
                option.OnCheckedChange.Bind((args) => {
                    if (args.State)
                    {
                        foreach (UIButton other in options)
                        {
                            if (option != other)
                            {
                                other.Checked = false;
                            }
                        }
                        Cosmos.System.KeyboardManager.SetKeyLayout(ScanMap);
                    }
                });
            }
            layout.LayOut();
            options[0].Checked = true;

            UIButton close = new UIButton("OK");
            close.Location = new(
                MainWindow.Surface.Canvas.Width - close.Size.Width - 24,
                MainWindow.Surface.Canvas.Height - close.Size.Height - 24
            );
            close.OnMouseClick.Bind((args) => MainWindow.Close());

            MainWindow.Surface.OnRemoved.Bind((args) => {
                SurfaceManager.SystemMenu = new SystemMenu(SurfaceManager);
            });

            MainWindow.RootView.Add(icon);
            MainWindow.RootView.Add(label);
            MainWindow.RootView.Add(layout);
            MainWindow.RootView.Add(close);
        }
    }
}

Conclusion

FuelOS opens up exciting possibilities for app developers. The Surface class serves as a building block for creating engaging user interfaces. Remember to refer to the official FuelOS documentation for more in-depth information and advanced techniques. 

More information on developing applications will come out shortly. FuelOS is on the verge of being ready and will be released tomorrow. The CLI is going to take a LITTLE longer due to package managing issues; but the GUI will be fully released to Developers and/or people who are interested.

Thanks,

Alex

Founder