# Fuse unable to parse color input 

**URL:** <https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904>\
**Category:** Bug Reports\
**Created:** [October 14, 2016, 2:00pm UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904 "2016-10-14T14:00:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![louisdecharson](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/louisdecharson/32/491_2.png) [@louisdecharson](https://forums.fusetools.com/u/louisdecharson)\
**Post date:** [October 14, 2016, 2:00pm UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904/1 "2016-10-14T14:00:37Z")

</div>

Hi I’m trying to adapt the example [here](https://github.com/Duckers/FusePlayground/blob/master/Components/SegmentBar/MainView.ux).

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

My code of SegmentBar.ux is :

```auto
<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 :

```auto
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

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [October 14, 2016, 2:10pm UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904/2 "2016-10-14T14:10:33Z")

</div>

You have to use the long form of the change tag as described [here](https://www.fusetools.com/community/forums/permalink/32d82fcb-2109-4940-b677-860fea91b8d9).

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

---

<div class="post-metadata">

**Author:** ![louisdecharson](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/louisdecharson/32/491_2.png) [@louisdecharson](https://forums.fusetools.com/u/louisdecharson)\
**Post date:** [October 14, 2016, 8:39pm UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904/3 "2016-10-14T20:39:24Z")

</div>

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

```auto
<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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/L8t8oipeZWrd-image-1476477540533.36.59.png)

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [October 17, 2016, 7:23am UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904/4 "2016-10-17T07:23:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [October 17, 2016, 8:50am UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904/5 "2016-10-17T08:50:48Z")

</div>

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:

```auto
        <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}"/>`

---

<div class="post-metadata">

**Author:** ![louisdecharson](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/louisdecharson/32/491_2.png) [@louisdecharson](https://forums.fusetools.com/u/louisdecharson)\
**Post date:** [October 18, 2016, 9:27pm UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904/6 "2016-10-18T21:27:55Z")

</div>

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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/vblBa1Bwlbdq-image-1476826061194.27.07.png)

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [October 19, 2016, 7:19am UTC](https://forums.fusetools.com/t/fuse-unable-to-parse-color-input/1904/7 "2016-10-19T07:19:30Z")

</div>

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