How to use a function return value as the color in UX?

General
1

I would like to set the color of a circle randomly, like this:

<Circle Height="100" Width="100" Color="{getRandomColor}" />

And in JavaScript I have:

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

module.exports = {

    getRandomColor: getRandomColor

};

But I get this error:

ERROR: Unable to convert Fuse.Scripting.V8.Function to float4
    System.Exception occured.
      at Fuse.Scripting.Marshal.ToFloat4 (System.Object o) [0x00000] in <filename unknown>:0 
      at Fuse.Scripting.Marshal.TryConvertTo (System.Type t, System.Object o) [0x00000] in <filename unknown>:0 
      at Fuse.Scripting.Marshal.TryConvertTo[Float4] (System.Object obj, Uno.Float4& value) [0x00000] in <filename unknown>:0 
  ......

Where is the problem? I always set them with the hashtag like this: Color="#E4D40B"

2

Try making getRandomColor a getter instead of a function:

module.exports = {
  get randomColor() {
      var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random()  16)];
    }
    return color;
  }
}

_

Notice how I renamed it randomColor instead of getRandomColor, you could keep the function getRandomColor so you can use it somewhere else in your JS:

_

_function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() _`16)];
}
return color;
}

module.exports = {
get randomColor() {
return getRandomColor();
}
}`

Make sure you match the change in your ux:

<Circle Height="100" Width="100" Color="{randomColor}" />
3

Weird just tested it and for some reason its not giving a bunch of different colors:

<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        module.exports = {
            get randomColor() {
                return getRandomColor();
            }
        }
    </JavaScript>
    <StackPanel>
        <Circle Width="100" Height="100" Color="{randomColor}" />
        <Circle Width="100" Height="100" Color="{randomColor}" />
        <Circle Width="100" Height="100" Color="{randomColor}" />
        <Circle Width="100" Height="100" Color="{randomColor}" />
        <Circle Width="100" Height="100" Color="{randomColor}" />
        <Circle Width="100" Height="100" Color="{randomColor}" />
        <Circle Width="100" Height="100" Color="{randomColor}" />
    </StackPanel>
</App>

It might be a bug or a performance benefit, on how fuse “caches” the values exported, perhaps they can fix it for getters. First example I see using a getter on the module.exports object

4

Hey Edwin Reynoso, thank you for your great answer!!! :slight_smile:

I can also confirm that I get the same color for all elements. Only if I restart the application, I get another color but also it is the same for all of them.

Would be cool if this could be fixed :slight_smile:

5

Hi!

Does your use-case strictly need to be able to get random colors this way, or could you use an Each and do something like this:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        exports.items = Observable(1,2,3,4,5,6,7,8,9,10).map(function(x){
            return {item : x, color : getRandomColor() };
        });
    </JavaScript>
    <StackPanel>
        <Each Items="{items}">
            <Rectangle Color="{color}" Height="50"/>
        </Each>
    </StackPanel>
</App>

This gives you a list of random colors