Score:
77
Followers:
1

Getting Started with simple app Development in FuelOS

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



Login For More Features

So you can create and connect with what matters to you.

or
More From NinjaTech

Trending Posts

Poof | May 16, 2024 | 22 views
Woah! I didn't know I've got over 1000 reputation… | May 13, 2024 | 53 views
Sigmamind | May 12, 2024 | 42 views
Profiles on Tonoa have customisable colours! sentonoa.xyz | May 08, 2024 | 92 views
is it just me or does 2/3 of people use this plat… | March 28, 2024 | 281 views

Quick Settings


Top Users

Dheirya_Tyagi_CEO | 3756 Reputation
Bravo | 2456 Reputation
Bendy | 2105 Reputation
kz | 1953 Reputation
Eklavya_Tyagi | 1215 Reputation

Precipitation: %
Wind: mph
Weather data updates every 6 hours.

Categories

Not a category you like? Create one.

Sports | 18 followers | 6 posts

Talk about sports in this category!


Lifestyle | 18 followers | 12 posts

Talk about lifestyle in this category!


Political | 14 followers | 5 posts

Talk about political issues in this category!


Travel | 10 followers | 4 posts

Talk about travel in this category!


Fashion | 16 followers | 4 posts

Talk about fashion in this category!


Education | 15 followers | 23 posts

Talk about education in this category!


Music | 19 followers | 7 posts

Talk about music in this category!


News | 13 followers | 22 posts

Talk about news in this category!


Personal | 18 followers | 19 posts

Talk about personal topics in this category.


Not displaying all categories. See all categories.