Jetpack Compose GUI Template

[High~Order 21]

Script Gui Builder
GitHub

ScriptGuiBuilder.kt
MyScriptGui.kt
BaseGui.kt

 

Anywhere inside the GuiScope you have access to:

• navigation NavigationController
• currentScreen GuiScreen
• dispatchSnackbar(message, action, duration, onAction)
• dispatchAlert(title, message, confirmButtonText, cancelButtonText, onConfirm, onCancel) ScriptGuiAlert
• navigateTo(navigationKey)
• navigateTo(GuiScreen)
• toggleCurrentScreenLeftFrame()
• toggleCurrentScreenRightFrame()
• closeGui()

Anywhere inside the GuiScreenScope you have access to:

• guiScope to access things throughout the Gui
• onGuiClosed(block) for setting an action to happen within this scope when the Gui closes.
• isLeftFrameVisible()
• isRightFrameVisible()
• showRightFrame()
• hideRightFrame()
• showLeftFrame()
• hideLeftFrame()
• toggleRightFrame()
• toggleLeftFrame()

 

Building a GUI
    
Creating your GUI

buildGui("Title", ScriptIcon.fromGithubImage("Magic icon")) {
   // GuiScope inside here
}

Adding a Screen inside the GUI Builder

Screen("Title", ScriptIcon.fromGithubImage("name")) {
   
        onGuiClosed {
          // Inside these blocks you are in the GuiScreenScope
        }

        FloatingAction {
          // GuiScreenScope
        }

        MainFrame {
          // GuiScreenScope
        }

        LeftFrame {
          // GuiScreenScope
        }

        RightFrame {
          // GuiScreenScope
        }

        Screen("Title", "unique name") {
          // Same options available for nested screens
        }

    }

Creating an individual screen without the builder
 

val SettingsScreen = buildScreen("Settings", ScriptIcon.fromImageVector(Icons.TwoTone.Settings)) {
    // Same scope as shown above in the GuiBuilder use
}

 

Autocomplete

Create the state.
You can use a set list as options, or use the listBuilder parameter to create suggestions dynamically. 
It also accepts a list or list builder to determine "favorites" items if you would like that option.

val autocompleteState = rememberAutoCompleteState(
    listBuilder = { query ->
        Query.itemDefinitions().nameContains(query).isNotPlaceholder.isNotNoted.distinctByName().toList()
    },
    itemToString = { it.name },

)

Create the actual component.

SimpleAutoComplete(
    label = "Choose an Item: ",
    labelWidth = 150.dp,
    inputWidth = 200.dp,
    autoCompleteState = autocompleteState
)

 

   

Included Bonus Features

 

 📁Directory📁

Directory Interface for easily saving and loading data.

• Paths   _{The following references to SCRIPT_DIRECTORY is set in the ScriptData}
            Directory.TRiBot :       .../.tribot/
            Directory.Root :         .../.tribot/SCRIPTER_DIRECTORY/
            Directory.Script :       .../.tribot/SCRIPTER_DIRECTORY/script_name/
            Directory.Account :      .../.tribot/SCRIPTER_DIRECTORY/account_name/
            Directory.Settings :     .../.tribot/settings/
• Saving

Directory.Script.save(myClass, "MySaveName")
// Saves the file in .../.tribot/SCRIPTER_DIRECTORY/script_name/MySaveName.json

• Loading

val data = Directory.Script.load(myClass::class.java, "MyFolder", "MyLoadName") 
// Loads the file from .../.tribot/SCRIPTER_DIRECTORY/script_name/MyFolder/MyLoadName.json

• Cleaning Directories

Directory.Script.clean() 
// Deletes all files older than 5 days in the Script directory

Directory.Script.clean(1, TimeUnit.DAYS, true) 
// Deletes all files older than 1 day in the Script directory

GitHub

GitHub class for easily accessing files from GitHub.

• You can set your repository and auth key in ScriptData
• GitHub files are saved under .../.tribot/SCRIPTER_DIRECTORY/github/directory
• Your GitHub has to be structured accordingly. Your provided GitHub Url should lead to the directory containing these directories:
  • css
  • fonts
  • fxml
  • images
  • json
    
    example here

val jsonFile = GitHub.getJson("jsonName")
val fontFile = GitHub.getFont("fontName")
val imageFile = GitHub.getImageFile("imageName")
val javafxImage = GitHub.getImage("imageName")
val cssFile = GitHub.getCss("cssName")
val fxmlFile = GitHub.getFxml("fxmlName")
val file = GitHub.getFile("fileName.txt")
val fileInDirectory = GitHub.getFile("directoryName", "fileName.txt")

 

📦Asset Manager📦

AssetManager for loading and caching data to help save resources
 

val gitHubImageBitmap = AssetManager.loadGithubImageToBitmap("imageName")
val gitHubImagePainter = AssetManager.loadGithubImageToPainter("imageName")
val urlImageBitmap = AssetManager.loadUrlImageToBitmap("url")
val urlImagePainter = AssetManager.loadUrlImageToPainter("url")
val wikiImageBitmap = AssetManager.loadWikiImageToBitmap("imageName")
val wikiImagePainter = AssetManager.loadWikiImageToPainter("imageName")
// These are set up slightly different to access the item icons folder, it will only get items currently in the folder. Right now it's the latest OsrsBox list.
val itemIconByIDBitmap = AssetManager.loadGithubItemIconToBitmap(995)
val itemIconByIDPainter = AssetManager.loadGithubItemIconToPainter(995)

 

 🏹Script Icon🏹

  
  Adding icons in Jetpack Compose can be tricky/confusing to get the icon you want where you want it, in the format you need it.
This class consolidates a few into one type to make it easier to use any icon whenever you need.
    These are loaded and locally cached through the asset manager.
  

  ScriptIcon.TRiBotLogo
  ScriptIcon.None // For a placeholder and preventing null checking
  ScriptIcon.ImageNotFound // Load in place of empty images or images that weren't loaded correctly
  
  ScriptIcon.fromImageVector() // This is useful for using the compose icons
  ScriptIcon.fromImageVector(Icons.TwoTone.Home)
  
  ScriptIcon.fromGitHubImage("imageName") // Uses the GitHub class to get your image and use as an icon
  ScriptIcon.fromUrl("url") // Load any Image from the web 
  
  ScriptIcon.fromImage()
  ScriptIcon.fromPainter()
  ScriptIcon.fromImageBitmap()
  ScriptIcon.fromBufferedImage()

 

Edited September 28, 2022 by High Order
Added auto complete example

[SkrrtNick 236]

Wow, you’ve put in a lot of effort!

[ahmadht112233 15]

nice

[Nullable 1114]

Awesome stuff! Jetpack Compose UIs look clean