Roku Developer Program

[Fusioni-Dev]

We want to use dynamic gradient in our roku app. Is there any way to create it?

Please help.

[TwitchBronBron]

Not nicely, no. There's no css-style gradient support. 

You would need to create a roBitmap, and then write rectangles to represent the gradient. 

Then write it to tmp:

Then pass the uri out to the poster node (or wherever needs to read it)

[Fusioni-Dev]

w = 1920
h = 1080
bm = CreateObject("roBitmap", {width: w, height: h, AlphaEnable: false})
bm.DrawRect(10, 10, w-20, h-20, &H8080)
bm.Finish()
ba = bm.GetPng(0, 0, w, h)
ba.WriteFile("tmp:/test.png")

Use this but it doesn't look like gradient.

[TwitchBronBron]

Here's a function you can use to generate vertical and horizontal linear gradients. Keep in mind, this function takes over 1000ms on my streaming stick 4k for a 1920x1080 image, so use it sparingly. 

function GenerateGradient(width as integer, height as integer, startRgba as longinteger, endRgba as longinteger, lineDirection = "vertical")
  bitmap = CreateObject("roBitmap", { width: width, height: height, alphaEnable: true })

  'draw vertical lines from left to right
  if lineDirection = "vertical" then
    numSteps# = width
    'draw horizontal lines from top to bottom
  else
    numSteps# = height
  end if

  ' separate rgba values to compute the step between each gradient band
  red# = (startRgba and &hFF000000&) >> 24
  redEnd# = (endRgba and &hFF000000&) >> 24
  redStep# = (redEnd# - red#) / numSteps#

  blue# = (startRgba and &h00FF0000&) >> 16
  blueEnd# = (endRgba and &h00FF0000&) >> 16
  blueStep# = (blueEnd# - blue#) / numSteps#

  green# = (startRgba and &h0000FF00&) >> 8
  greenEnd# = (endRgba and &h0000FF00&) >> 8
  greenStep# = (greenEnd# - green#) / numSteps#

  alpha# = startRgba and &h000000FF&
  alphaEnd# = endRgba and &h000000FF&
  alphaStep# = (alphaEnd# - alpha#) / numSteps#

  for i = 0 to numSteps#
    red# += redStep#
    blue# += blueStep#
    green# += greenStep#
    alpha# += alphaStep#

    'merge rgb into single int
    color& = (Int(red#) << 24) + (Int(blue#) << 16) + (Int(green#) << 😎 + (Int(alpha#))

    if lineDirection = "vertical" then
      'draw a line at (i, 0) for the full height of the image
      bitmap.DrawRect(i, 0, 1, height, color&)
    else
      'draw a line at (0, i) for the full width of the image
      bitmap.DrawRect(0, i, width, 1, color&)
    end if
  end for

  bitmap.Finish()

  png = bitmap.GetPng(0, 0, width, height)
  uri = "tmp:/linear-gradient-" + str(width) + "x" + str(height) + "-0x" + stri(startRgba, 16) + "-0x" + stri(endRgba, 16) + "-" + lineDirection + ".png"
  png.WriteFile(uri)
  return uri
end function

And you can call it like this:

verticalGradientUrl = GenerateGradient(1920, 1080, &h00000000, &hFF0000FF, "vertical")
horizontalGradientUrl = GenerateGradient(1920, 1080, &h00000000, &hFF0000FF, "horizontal")

The function has not been optimized, meaning it will draw a line for every pixel in the gradient, even if several lines would have the exact same color. It could be optimized to draw a rectangle that is as big as the height/width of the color band. 

If you're in control of the poster size, then you should consider generating a gradient that's 1 pixel in the opposing direction. (i.e. 1920x1 or 1x1080), then you can stretch the poster to the size you need in that opposing direction. 

[jeet1224]

HI TwitchBronBron,

I tried it many times but it does not work for me.

[TwitchBronBron]

Oh, sorry, I had a bug in my code. I was missing the << 8 for the green channel. I updated my sample snippet, it should work now. 

I also just uploaded a full working example of this to the RokuCommunity samples repository, so feel free to pull that down and sideload it to see it working in action. 

https://github.com/rokucommunity/sample-projects/tree/master/gradient

[ManjeetKumar]

Thank you!! It's working.

[brito]

it works fine here!

just to improve, is there any way to create the gradient by passing angle degrees?

[TwitchBronBron]

I'm sure there is, but that gets a lot harder! The current method just walks left-to-right or top-to-bottom and writes pixels. By using an angle, you'd need to calculate the positions of each pixel along the angle plane and then walk all the boxes that way....probably dealing with when the pixels fall off the visible dimensions.

If you get ambitious enough to implement that, feel free to open a PR in this sample project and I'll update my code snippet: https://github.com/rokucommunity/sample-projects/tree/master/gradient

[PrahladFusioni]

When I tried to use these following color it does not work. Is there any limitation to use it? please suggest?
&H00000000, &H00800000, &H00008000, &H00808000, &H00808080, &H00FF0000, &H0000FF00, &H00FFFF00, &H00FF00FF