Using Gradients as colors for buttons and borders

Omniverse Core Platform Kit App Template / SDK
1

Hello I’m building a UI for my extension and i wanted to use gradients as colors for backgrounds and borders. I already know how to assign the different button states, colors, borders etc to the buttons.

I stareted here: Gradient Style Window — Omniverse Workflows

I fixed the TypeError with the compression format being wrong.

from omni.gpu_foundation_factory import TextureFormat

format = omni.gpu_foundation_factory.TextureFormat.RGBA8_SRGB  # Example format, adjust as needed

so now i can see all gradients in the tutorial. I am however still trying to understand how the colors can be used as border colors or background colors for buttons, fields etc.

I understand that this is the main function for constructing the gradients and i am able to get it to show a gradient in a HStack() in my UI:

build_gradient_image(colors, height, style_name):

image
image294×297 4.83 KB

I am not able to assign it to a variable and use it as a color though. Here i am stuck and any help would be appricaiated.

I think this has something to do with getting the gradient as a color:

   # for Gradient Image
    "ImageWithProvider::gradient_slider":{"border_radius": 128, "corner_flag": ui.CornerFlag.ALL},
    "ImageWithProvider::button_background_gradient": {"border_radius": 0, "corner_flag": ui.CornerFlag.ALL},

Also this in the tutorial:


With this, the user will be able to generate gradient image easily which also allows flexibly set the height and style. Here are a couple of examples used in the example:


colors = cls_color_gradient = [cl("#fa0405"), cl("#95668C"), cl("#4b53B4"), cl("#33C287"), cl("#9fE521"), cl("#ff0200")]
byte_provider = build_gradient_image(colors, 8, "gradient_slider")

cls_button_gradient = [cl("#232323"), cl("#656565")]
button_background_gradient = build_gradient_image(cls_button_gradient, 22, "button_background_gradient")

I would like to assign it to something like cl_myColorGradient and then use it in the style guide.

2

I can hack this together in the same way as with the search field example.
So the below image is basically:

  • ui.Frame()
    • ui.Zstack()
      • gradient image with style applied
        • ui.HStack()
          • ui.Label()

But it describes what i am looking for and it is possible to re-create a button from this.

image

But doing this will make me loose all of the native functionality that a button has.
And i am unable to apply a gradient to the border.
like the example here:

image
image266×109 3.57 KB

This happends if i try to combine a image and text in a button:
image

3

Progress:
image ← this is a real button.

!!BUT!!
When i apply a border color:

image

Ha-haaaaa!
image

Ok, so the problem here is
Neither of the below will take the button color and apply it to the image.
“Button.image”:
or
image_url=“”

if i use “Button.image”: i can get it to use the color attribute in the “Button.image”: but even if i have multiple instances of “Button.image”: below each button state it doesn’t change.

image

I’m also still not able to create a gradient image for the border.

4

hey @W1r3d
can you send me the full code for me to try on my end?