Guide: How to change only your colors' hue with color.js

How-to Discussions
1

Changing hue in Fuse with color.js

Hi! I’ve seen that the color documentation mentions a bunch of Uno color functions, but I can’t find any examples on how to use them.

Whenever I read up on color in Fuse, it seems hex RGB is used.

To change only the hue of my colors, I’m using color.js: https://github.com/Automattic/Color.js

Hue goes from 0-360, while saturation and lightness go from 0-100:

Color({h: 120, s: 50, l: 50}) // -> "#00ff00"

Code

MainView.ux - change background color with slider

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var Color = require("color"); // https://github.com/Automattic/Color.js -> /dist/color.js

		var hue = Observable(0);
		var hexColor = Observable("#bada55");

		function update() {
			hexColor.value = Color({h: hue.value, s: 100, l: 50}).toString();
			console.log(hexColor.value);
		}

		module.exports = {
			hue,
			hexColor,
			update
		};
	</JavaScript>

	<Slider Value="{hue}" Minimum="0" Maximum="360" ValueChanged="{update}" />
	<Rectangle Color="{hexColor}" Layer="Background" />
</App>

.unoproj.

{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS"
  ],
  "Includes": [
    "*",
    "color.js:Bundle"
  ]
}

Feature request/help: Hue in UX markup

Is it possible to work with hue in UX instead, like this?

<Rectangle Color="HSV(180, 50, 50)" />

This was all I found though: https://www.fusetools.com/docs/ux-markup/expressions#functions

And this is a bit over my head at the moment:

2

The UX-expression system is pretty new, so we haven’t had much time to implement all useful functions yet. Luckily, it’s relatively easy to add your own UX expression functions, so you can for instance add this in your project:

using Uno.UX;

[UXFunction("colorFromHsv")]
public class ColorFromHsv: Fuse.Reactive.TernaryOperator
{
	[UXConstructor]
	public ColorFromHsv([UXParameter("H")] Fuse.Reactive.Expression h,
	                    [UXParameter("S")] Fuse.Reactive.Expression s,
	                    [UXParameter("V")] Fuse.Reactive.Expression v) : base(h, s, v)
	{
	}

	protected override object Compute(object first, object second, object third)
	{
		var h = Fuse.Marshal.ToFloat(first);
		var s = Fuse.Marshal.ToFloat(second);
		var v = Fuse.Marshal.ToFloat(third);
		return Uno.Color.FromHsv(float3(h, s, v));
	}
}

Which allows you to do this:

<Rectangle Color="colorFromHsv(0,0.75,0.5)" />