OSL ‐ UI Dropdowns - Mistium/Origin-OS GitHub Wiki

Info

Dropdowns are a useful component for osl, allowing you to get the user to select from a set of options

Example

The app below renders two dropdowns

mainloop:
c #333
goto -110 0
dropdown ["hello world","wow","more text4"] 200 40 "main" "select item" 10 #fff #222
c #333
goto 110 0
dropdown ["hello world","wow","more text4"] 200 40 "main2" "select item" 10 #fff #222

import "win-buttons"

It renders an app like this:

image

The command's inputs

1. Items

The first input is an array of the options given to the user in the selection, it defines the menu items below:

Screenshot 2024-07-21 at 16 31 11

2. Width

The second input is the width of the dropdown

3. Height

The third input is the height of the dropdown

4. Identifier

This item is a string that acts as an identifier for the dropdown, it allows you to access the selection using a simple variable

dropdown ["hello world","wow","more text4"] 200 40 "main2" "select item" 10 #fff #222

if dropdown_main2 != "" (
  // if no item is selected, the variable will be an empty string
  // this will only run on frames where the value is not empty

  say "You picked" + dropdown_main2
  // dropdown_main2 can be any item from the array passed to the dropdown, or ""
  // make a popup

  window "stop"
  // close the window
)

5. Default text

This item defines the text that will be shown by default when the dropdown has no selection

dropdown ["hello world","wow","more text4"] 300 40 "main2" "wow, a dropdown :O" 10 #fff #222

Screenshot 2024-07-21 at 16 37 02

6. Text Size

This item defines how big the text of this element should be

dropdown ["hello world","wow","more text4"] 300 40 "main2" "wow, a dropdown :O" 5 #fff #222

Screenshot 2024-07-21 at 16 39 10

7. Text Color

This item defines what colour the text should be rendered

dropdown ["hello world","wow","more text4"] 300 40 "main2" "wow, a dropdown :O" 10 #f00 #222

Screenshot 2024-07-21 at 16 40 09

8. Item Colour

This item defines the colour that the dropdown icon backgrounds will be

dropdown ["hello world","wow","more text4"] 300 40 "main2" "wow, a dropdown :O" 10 #f00 #0f0

Screenshot 2024-07-21 at 16 41 03

You can change the colour of the main dropdown by using the c command

c #00f
dropdown ["hello world","wow","more text4"] 300 40 "main2" "wow, a dropdown :O" 10 #f00 #0f0

Screenshot 2024-07-21 at 16 41 59