Fuse unable to parse color input

Bug Reports
1

Hi I’m trying to adapt the example here.

I changed the code to be able to choose the color of the button.

My code of SegmentBar.ux is :

<Panel ux:Class="SegmentBar" Alignment="VerticalCenter" Height="24" Margin="20">
<string ux:Property="Selected" />

	<Rectangle ux:Class="SegmentButton" HitTestMode="LocalBounds">
		<string ux:Property="Label"/>
		<float4 ux:Property="myColor"/>
		<bool ux:Property="Last"/>
		<bool ux:Property="First"/>
		<Selectable Value="{Property Label}" />
		<Text ux:Name="text" Alignment="Center" Color="{Property myColor}" Value="{Property Label}"/>
		<Stroke Color="White"/>

		<WhileTrue Value="{Property First}">
			<Change this.CornerRadius="8,0,0,8"/>
		</WhileTrue>
		<WhileTrue Value="{Property Last}">
			<Change this.CornerRadius="0,8,8,0"/>
		</WhileTrue>

		<WhileSelected>
			<Change text.Color="White" Duration="0.2" />
			<Change this.Color="{Property myColor}" Duration="0.2" />
		</WhileSelected>
		<Tapped>
			<ToggleSelection />
		</Tapped>
	</Rectangle>

	<Grid ColumnCount="2">
			<Selection Value="{Property Selected}" MaxCount="1" MinCount="1"/>
			<SegmentButton Label="Bikes" myColor="#332a6c" Last="false" First="true"/>
			<SegmentButton Label="Stands" myColor="#974d39" Last="true" First="false"/>
	</Grid>
</Panel>

I got the following error :

SegmentBar.ux(22): E8001: Cannot parse '{Property myColor}' as 'float4': 'Input string was not in a correct format.'

I’m using Fuse 0.27.0 in Mac OS X 10.11.4

Thanks for your help

2

You have to use the long form of the change tag as described here.

E.g. <Change Target="this.Color" Value="{Property myColor}" Duration="0.2" />

3

This is not working unfortunately. I might be doing something wrong.
I can compile code but the background is not coloured.
My code is

<Panel ux:Class="SegmentBar" Alignment="TopCenter" Width="150" Height="24" Margin="10">
<string ux:Property="Selected" />

	<Rectangle ux:Class="SegmentButton" HitTestMode="LocalBounds">
		<string ux:Property="Label"/>
		<float4 ux:Property="myColor"/>
		<bool ux:Property="Last"/>
		<bool ux:Property="First"/>
		<Selectable Value="{Property Label}" />
		<Text ux:Name="text" Alignment="Center" Color="{Property myColor}" Value="{Property Label}"/>
		<Stroke Color="#332a6c"/>

		<WhileTrue Value="{Property First}">
			<Change this.CornerRadius="8,0,0,8"/>
		</WhileTrue>
		<WhileTrue Value="{Property Last}">
			<Change this.CornerRadius="0,8,8,0"/>
		</WhileTrue>

		<WhileSelected>
			<Change text.Color="White" Duration="0.1" />
			<Change Target="this.Color" Value="{Property myColor}" Duration="0.1" />			
		</WhileSelected>
		<Tapped>
			<ToggleSelection />
		</Tapped>
	</Rectangle>

	<Grid ColumnCount="2">
			<Selection Value="{Property Selected}" MaxCount="1" MinCount="1"/>
			<SegmentButton Label="Bikes" myColor="#332a6c" Last="false" First="true"/>
			<SegmentButton Label="Stands" myColor="#974d39" Last="true" First="false"/>
	</Grid>
</Panel>

And the result is :

file
L8t8oipeZWrd-image-1476477540533.36.59.png646×1136

4

Yeah, there’s definitely something weird going on here. The color you assign to the text in WhileSelected “leaks” over to the backgrond color as well!
Making a ticket and investigating further.

5

So, it turns out that this is actually the intended behavior. The property binding is 2-way which means that <Change text.Color="White"/> changes the myColor property value to white, which is then reflected by the background color when you do <Change Target="this.Color" Value="{Property myColor}">/

Apparently we have some new features on the way (ux:InputProperty and {ReadProperty name})to explicitly create one-way bindings for cases like the one you have here, but until those arrive you’ll have to manually “break up” the binding by using a little bit of JavaScript.

Insert this in your SegmentButton:

        <JavaScript>
            exports.myColor2 = this.myColor.map(function(value){return value;})
        </JavaScript>

And change your text to use myColor2: <Text ux:Name="text" Alignment="Center" Color="{myColor2}" Value="{Property Label}"/>

6

Thank you, this is working. Unfortunately, I’m trying to put that “slider” on top of a map view and this is not working there :
file

7

I suspect this is a completely different problem. Can you provide a minimal reproduction of this one?