OSL ‐ UI Elements

Basics

• Rendering Frequency: UI is rendered once every frame; this is non-negotiable within the system.

Icon Info

Icons are sourced from files using either the file name or raw icon data.

Colour Commands

• colour #hexcode or c #hexcode: Sets the current colour for subsequent UI elements.

• OSL supports hexadecimal colours and single-value RGB colours.

  Example:

  colour #3498db
  c #3498db
  

Main UI Elements

1. Square:

   • square px-width px-height border_weight 0 invisible?
   • Function: Draws a centered rectangle on the draw cursor.

   Example:

   square 100 50 5 0 false
   

2. Icon:

   • icon "icon-name"/"raw-icon-data" size
   • Function: Draws a centered icon on the draw cursor.

   Example:

   icon "my_icon" 20
   

3. Text:

   • text "text-to-draw" size
   • Function: Renders text at the draw cursor with a specified size.
   • text "fileurl" "setfont"
   • Function# : Sets the font for subsequent text to a specific text file.

   Example:

   text "Hello, World!" 16
   

4. Image:

   • image "url" width_in_pixels
   • Function: Renders an image from the web or a data URI with a specified width.

   Example:

   image "https://example.com/image.jpg" 120
   

5. Toggle:

   • toggle id size
   • Function: Draws a toggle switch.

   Example:

   toggle myToggle 15
   

All of the above set the clicked, touching_mouse, and onclick variables

6. Slider

   • slider width height id
   • Function: Draws a slider. Example:

   slider 200 20 volumeSlider
   

7. Bar

   • bar width height rounding percent
   • Function: Draws a progress bar.

   Example:

   bar 300 10 5 0.75
   

8. Input

   • input px-width px-height "input_id" "default_text" border_weight text_colour
   • Function: Renders an input field.

   Example:

   input 300 20 "test" "type here!" 10 #fff
   

• You can make a password input that looks like this: (Requires v4.6.4 or later)
  
  by changing the input command and doing "hidden.input_id" instead of "input_id" THIS INPUT FUNCTIONS THE EXACT SAME AND THE "hidden." doesn't get used in the input's variable.

Triangle

• Command:

  • triangle point1_x point1_y point2_x point2_y point3_x point3_y border_weight

• Function:

  • Draws a triangle with specified vertices on the draw cursor.

• Parameters:

  • point1_x: x-coordinate of the first vertex.
  • point1_y: y-coordinate of the first vertex.
  • point2_x: x-coordinate of the second vertex.
  • point2_y: y-coordinate of the second vertex.
  • point3_x: x-coordinate of the third vertex.
  • point3_y: y-coordinate of the third vertex.
  • border_weight: Thickness of the triangle's border.

• Example:

  triangle 10 20 30 40 50 60 2
  

  In this example, a triangle is drawn with vertices at (10, 20), (30, 40), and (50, 60), with a border thickness of 2. The vertices are offset by the xy of the triangle element

• Note:

  • The triangle element is not clickable. It serves as a visual element without interactive functionality.

This command allows you to create triangles with specific vertices, providing flexibility in designing geometric shapes within the UI.

Other UI

• hitbox width height checkx checky: Acts like a hidden square for collision detection.

  • hitbox "hide" and hitbox "show" allow showing/hiding hitboxes.

  Example:

  hitbox 50 50 0 0
  

Pen

The pen draws a line behind the draw cursor.

• pen "down"/"up": Lifts or lowers the pen.

• pen "size" pen-size: Sets the size of the pen.

  Example:

  pen "down"
  

Image Manipulation (v4.2.7 and above)

Stretch

• stretch "x" 100: Sets the width of the image to its normal width.

• stretch "y" 50: Sets the height of the image to half its normal height.

  Example:

  stretch "x" 120

Rotate

• direction 90: Points right.

• direction -45: Points top left.

• turnleft 10: Changes direction by 10 degrees counterclockwise.

• turnright 20: Changes direction by 20 degrees clockwise.

  Example:

  direction 45