Unable to convert Fuse.Scripting.V8.Function to float4

I need to set the Color of a Rectangle via a function. So this is just a simplification, later I want to set different colors for different id’s.

My code looks like this:

<App>

	<JavaScript>

		function getColor(){
			return [1,1,1,0];
		}

		module.exports = {
			getColor: getColor
		};
	</JavaScript>

	<StackPanel>
		<Panel>
			<Rectangle Height="200" Width="200" Color="{getColor}" />
		</Panel>
	</StackPanel>

</App>

I get:

  Unable to convert Fuse.Scripting.V8.Function to float4

If you want a function to map to property, you need to use an Observable, for instance like so:

    var Observable = require("FuseJS/Observable");

    function getColor(){
        return [1,0,1,1];
    }

    module.exports = {
        getColor: Observable(getColor)
    };

Thank you very much Erik, this is working :slight_smile:

Hey. Could this be extended to take a value like “#FF00FF” and output “[1,0,1,1]”?

If anyone has got an idea, please enlighten me <3

OR: How could I change getColor from another javascript function ?

Gratefully

Blade

LOL 5 hours of trail and error, and I only got this far:

var Observable = require("FuseJS/Observable");
YZJSmainColor=Observable("#800000");
YZJScolorHelper=Observable([0.6,0.067,0.33,1]);

 function YZJSmainColorFL(){
 			console.log('YZ_0:'+YZJScolorHelper.value);
				return YZJScolorHelper.value;
			};
 function YZJSmainColorFL2(arg2){
		console.log('YZ_1:'+arg2);

		var h=arg2.replace('#', '');
        h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));
        for(var i=0; i<h.length; i++)
             h[i] =  +(Math.round((parseInt(h[i].length==1? h[i]+h[i]:h[i], 16)/255) + "e+2")  + "e-2");
        h.push("1");
        return '['+h.join(',')+']';

			
		};		

function SetCol(arg){
            // Input must start with '#' and have a valid number of digits
            l = arg.value.length-1;
            if(l!=3 && l!=4 && l!=6 && l!=8 || arg.value[0]!='#') return;
            YZJSmainColor.value = arg.value;
        YZJSmainColorFL2(arg.value);
        YZJScolorHelper.value=YZJSmainColorFL2(arg.value);
        console.log('YZ_2:'+YZJScolorHelper.value);
		};
module.exports = {
		SetCol,
                YZJSmainColor,
		YZJSmainColorFL: Observable(YZJSmainColorFL)
	};

Triggering SetCol(#800) does work and gives me this output:

YZ_1:#800

YZ_1:#800

YZ_0:[0.53,0,0,1]

YZ_0:[0.53,0,0,1]

YZ_2:[0.53,0,0,1]

But following by this error while using it:Unable to convert [0.53,0,0,1] to float4 with this output:

Uno.Exception: Unable to convert [0.53,0,0,1] to float4
   at Fuse.Scripting.Marshal.ToFloat4(object)
   at Fuse.Scripting.Marshal.TryConvertTo(Uno.Type,object)
   at Fuse.Scripting.Marshal.TryConvertTo`1(object,T&)
   at Fuse.Reactive.DataBinding`1.TryPushAsMarshalledValue(object)
   at Fuse.Reactive.DataBinding`1.PushValue(object)
   at Fuse.Reactive.DataBinding`1.Fuse.Scripting.IObserver.OnSet(object)
   at Fuse.Scripting.Observable.Set.SendMessage(Fuse.Scripting.Observable.Subscription)
   at Fuse.Scripting.Observable.Operation.Perform()
   at Fuse.Scripting.Context.ProcessUIMessages()
   at Fuse.UpdateListener.Invoke()
   at Fuse.UpdateManager.Update(Fuse.Stage)
   at Fuse.UpdateManager.Update()
   at Fuse.AppBase.OnUpdate()
   at Fuse.App.OnUpdate()
   at Outracks.Simulator.Application.OnUpdate()
   at Fuse.App.OnTick(object,Uno.Platform.TimerEventArgs)
   at Uno.Platform2.Display.OnTick(Uno.Platform.TimerEventArgs)
Unable to convert [0.53,0,0,1] to float4

I know that im a mega noob, im just trying my best. Any help would be awesome

Gratefully

Blade

@Blade: What you’re asking about here is in no way related to the subject of this thread. Please start your own thread if you want help, hijacking old threads won’t get you far.

Okay, sorry master. Shall I delete my post here sir?

There’s no need for that.