AQUA Layout


  • Intro

    AQUA Layout is a programming language for AQUA. It is used to interface with AUI to design apps that keep a uniform resemblance with the rest of the apps and system and is meant to be as simple and as easy to understand as possible. It is not designed to be used for developing games and other apps in the same vein. There is a Github repository which contains all of the current applications in AQUA.

  • Structure

    The structure of AQUA layout is very simple; there are only three commands. The “new” command, the “modify” command and the “event” command. These are represented as “+”, “*” and “<” respectively, followed by a space then the element / attribute / event name followed by another space and arguments each separated by spaces (except in the case of the event command, where you need to close it off with a “>” – see script integration section for more details). The “new” command adds an element to the screen, the “modify” command changes certain attributes of the following elements and the “event” command runs a script when the specified event is triggered. This section does not cover script integration (for that, see script integration), however it will include the different possible events. Events only apply to the previous element, or the first element of the program if none is found. Strings are surrounded by quotes. They can have “placeholders” instead of normal text (see placeholder section). Colours can either be a colour name or “white” for default system colour depending on the current theme or a hexadecimal colour code followed by a “#”. Here are some examples:

    • + title “This is a title”
    • * colour red

    There are also comments, denoted by either “#” or “#~”. They make the compiler ignore everything on that specific line.

  • Elements ( + )

    • title: Adds a title. Takes one argument denoting the text it contains.
    • label: Adds a subtitle. Takes one argument denoting the text it contains.
    • small: Adds small text. Takes one argument denoting the text it contains.
    • paragraph: Adds a paragraph in the same font as the “small” element, but it wraps around at the end of the line making it ideal for big blocks of text. Takes one argument denoting the text it contains. “\n” will force it to wrap around to the next line.
    • button: Adds a button. Takes one argument denoting the text it contains. Note that as of now, you can not make an action take place on a click, but in the future this will have a second argument denoting a script to be run on a click.
    • space: Adds a space. Takes no arguments.
    • categorizer: Adds a line to categorize parts of the app. Takes no arguments.
    • pre: Adds a paragraph in a monospace font. It has the same exact properties as the paragraph element.
    • sticker: Adds a sticker. Takes no arguments. This is used to stick two element together instead of having the next element go to another line.
    • icon: Adds an icon. Takes one argument denoting the icon name or id. The icon name can be one of off, next, save, load and edit, but using a number to denote the icon’s id value, you can access all the icons available in AQUA. Since there is no standard and icon ids may change from update to update, it is ill-advised to use ids (unless absolutely necessary).
    • flag: Adds a flag. Takes one argument denoting the flag country code or id. Using the ids will grant you a guaranteed access to all the available flags, however, since there is no standard, flag ids may change from update to update, so it is ill-advised to rely on then (unless absolutely necessary).
  • Attributes ( * )

    • colour / color: Changes the colour of the following elements. Takes one argument denoting the colour to change to.
    • bg-colour / bg-color: Changes the background colour of the following elements. Takes one argument denoting the colour to change to.
    • align: Aligns all of the following elements to either left, right or mid. Takes one argument denoting the side to align to. Note that this may screw up paragraphs if not set to “left”.
    • pack: Generally, elements in a layout application are laid out in the order they are added in. Pack allows you to choose from which element to start drawing, or 0 to restart drawing from the beginning. Takes one argument denoting the element to start drawing at.
    • absolute: Toggles the positioning mode of the elements between packed and absolute. This is useful if you want to freely move around an element.
    • x: Sets the X coordinate of the position of the next element to be added. The coordinate is given as a percentage (for example 50% would be the middle of the screen).
    • y: Sets the Y coordinate of the position of the next element to be added. The coordinate is given as a percentage (for example 50% would be the middle of the screen).
    • anchor: Sets the anchor to which the next element’s position will be held. This takes one of these arguments: mid-mid, mid-top, mid-bottom, left-mid, left-top, left-bottom, right-mid, right-top or right-bottom. This only works [properly] in absolute positioning mode.
  • Events ( < )

    • click: Triggers when the attached element is clicked.
  • String placeholders

    String placeholders are specific strings that will be replaced at run-time to some other string. For example, if I wanted to have a title with the weather description, I would write down, for example:

    + title "weather description"

    If I were to run this, the text in the title would not be “weather description”, but rather the current weather description, like, for example, “overcast clouds”. Here is a list of all the string placeholders currently:

    • system location: Gets replaced by the current system location.
    • aqua news: Gets replaced by the current news from a Firebase server.
    • aqua news-title: Gets replaced by the title of the current news from a Firebase server.
    • aqua version: Gets replaced by the current version of AQUA.
    • weather description: Gets replaced by a description of the current weather.
    • weather temperature: Gets replaced by the current temperature.
    • weather main: Gets replaced by a really small description of the current weather.
    • weather colour/weather color: Gets replaced by a colour matching the current weather (bluish grey for rain, grey for clouds, yellowish white for snow, …).
    • weather invert-colour/weather invert-color: Gets replaced by the opposite of “weather colour/weather color”. Generally used as a text colour.
    • time digital: Gets replaced by the current digital time.
    • time date: Gets replaced by the current date.
    • cpu name: Gets replaced by the CPU name.
    • cpu tsc: Gets replaced by yes (the CPU supports TSC) or no (the CPU does not support TSC).
    • cpu sse: Gets replaced by yes (the CPU supports SSE) or no (the CPU does not support SSE).
    • cpu stepping: Gets replaced by the CPU stepping count.
    • cpu vendor: Gets replaced by the name of the CPU vendor (Intel, AMD or other).
    • ram size: Gets replaced by the amount of RAM, with the appropriate unit (KB, MB, GB, TB, PB).
    • usb version: Gets replaced by the maximum USB version your machine supports (1.0, 1.1, 2.0, 3.0 or none, indicated by an error message).
    • lorem ipsum: Gets replaced by exactly 1 KB of the popular dummy text.
    • graphics device: Gets replaced by the name of your display controller.
    • sound device: Gets replaced by the name of your audio controller.
    • networking device: Gets replaced by the name of your networking controller.
    • graphics vendor: Gets replaced by the name of your display controller’s vendor name.
    • sound vendor: Gets replaced by the name of your audio controller’s vendor name.
    • network vendor: Gets replaced by the name of your networking controller’s vendor name.
  • Script integration & events

    AQUA Run script can be integrated into AQUA Layout with the event command. The script is triggered as the event is. To run a script, you need to go to the next line so that you are not on the same line as the event command is. There, you can run one command per line, until you are done, in which case you can close of the event with a “>” on yet another new line. Each command will be run in the order they come in. Here is an example:

     + button "Click me"
    < click
    open About
    poweroff
    >