Roku Developer Program

[TwitchBronBron]

Can you be more specific? What does "it does not work" mean? 

[PrahladFusioni]

When I used color that was mentioned in previous comment in the this function GenerateGradient(1920, 1080, &h00000000, &hFF0000FF, "horizontal"), the gradient is not showing these colors.

[brito]

Let me show my example.

I need to implement a background label with gradient image.

First I implement a new component who just generate an image and by pass some args and returns an uri

Obs: Ignore GroupBase. it is a generic class just to add to any group node some util handlers. In your case just extend group.

<?xml version="1.0" encoding="utf-8" ?>

<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<component name="GradientImage" extends="GroupBase" >

    <script type="text/brightscript" uri="pkg:/components/GradientImage/GradientImage.brs" />

</component>

in GradientImage.brs I implement as example above with tiny changes

function getLinearGradientUri(width as Integer, height as Integer, startRgba as Integer, endRgba as Integer, lineDirection as String) as String

  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#) << 8) + (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

Then, To do a Label I implement a component who use GradientImage and wrap this and pass some util args.

In this case I use to create a background 

<?xml version="1.0" encoding="utf-8" ?>

<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<component name="GradientLabel" extends="GradientImage" >

    <interface>
        <field id="width" type="Int" />
        <field id="height" type="Int"  />
        <field id="paddingTop" value="2" type="Int" />
        <field id="paddingRight" value="10" type="Int" />
        <field id="paddingBottom" value="2" type="Int" />
        <field id="paddingLeft" value="10" type="Int" />
        <field id="startRgba" type="LongInteger" />
        <field id="endRgba" type="LongInteger"  />
        <field id="lineDirection" type="String" value="vertical" />
        <field id="size" type="String" value="medium" />
        <field id="text" type="String" onChange="onContentChanged" />
    </interface>

    <script type="text/brightscript" uri="pkg:/components/GradientLabel/GradientLabel.brs" />

    <children>

        <Poster id="gradient" />

        <Label
            id="label"
            horizAlign="center"
            vertAlign="center"
        />

    </children>

</component>

In GradientLabel.brs

Feel free to do as you want. In my case I did to make an label under text

The most important part is this

m.gradient.uri = getLinearGradientUri(m.top.width, m.top.height, m.top.startRgba, m.top.endRgba, "vertical")

sub init()
    m.Gradient = m.top.findNode("gradient")
    m.Label = m.top.findNode("label")

    m.Label.color = getColor("WHITE")
    m.Label.observeField("text", "onLabelChanged")
end sub

sub onContentChanged()
    m.Label.font = getFontSize(m.top.size)
    m.Label.text = m.top.text
end sub

sub onLabelChanged(event)
    node = event.getRoSGNode()
    rect = node.boundingRect()
    setSize(rect)
    node.width = m.top.width
    node.height = m.top.height

    m.Gradient.translation = [
        - m.top.paddingRight
        - m.top.paddingTop
    ]

    m.Gradient.width = m.top.width + m.top.paddingRight + m.top.paddingLeft
    m.Gradient.height = m.top.height + m.top.paddingTop + m.top.paddingBottom

    m.gradient.uri = getLinearGradientUri(m.top.width, m.top.height, m.top.startRgba, m.top.endRgba, "vertical")
end sub

function getFontSize(size as String)
    if size = "xsmall" then return getFont("OPENSANS_BOLD10")
    if size = "small" then return getFont("OPENSANS_BOLD12")
    if size = "medium" then return getFont("OPENSANS_BOLD14")
    if size = "large" then return getFont("OPENSANS_BOLD18")
    if size = "xlarge" then return getFont("OPENSANS_BOLD20")

    return getFont("OPENSANS_BOLD14")

end function

sub setSize(rect)
    setWidth(rect.width)
    setHeight(rect.height)
end sub

sub setWidth(width)
    if width > m.top.width then m.top.width = width
end sub

sub setHeight(height)
    if height > m.top.height then m.top.height = height
end sub

Using the component GradientLabel

<GradientLabel
    size="large"
    paddingTop="7"
    paddingBottom="7"
    paddingRight="0"
    paddingLeft="0"
/>

[PrahladFusioni]

I checked the color is not working

&H00000000,&h00800000,&h00008000,&h00808000,&h00FF0000,&h0000FF00,&h00FFFF00

[TwitchBronBron]

@PrahladFusioni all of your colors have the alpha channel set to 00. Which means all your colors will be fully transparent. 

&H00000000
red=0, green=0, blue=0, alpha=0 

&h00800000
red=0, green=80, blue=0, alpha=0

etc...

If I take your first two colors (&H00000000, &h00800000) but make them fully solid (&H000000FF, &h008000FF) then the gradient works fine. Here is the code:

m.gradientPoster.uri = GenerateGradient(1920, 1080, &H000000FF, &h008000FF, "vertical")