Assign color by dragging (depending on distance)

Hi, I’d like to “rate” notes by dragging them in Map view. Depending on the distance to a “Center” note different colors should be assigned (starting with green).

Idea came when I stumbled across Gestimer.app again which I used in the past.

I hope this visually “playing” with notes will help in deciding what’s important.

Here’s a mock-up:

If possible the “rating” mechanism should be extendable (i.e. no hard-coding of e.g. 5 different colors) as I don’t know how many different colors/ratings I will need.

All notes have the same size and the different color “circles” should take the notes’ size into account (in order to prevent that notes with different colors overlap).

Any idea how to do that?

Here’s one approach:


(upload://iiFwjcYR7e1FiLSUSUXQSHHJFA6.png)

demo.tbx (177.5 KB)

The rule here is:

var dx=$Xpos-$Xpos(../O);
var dy=$Ypos-$Ypos(../O);
var dist=sqrt(dx*dx+dy*dy);
var x=dist*20;
if (x>359){
	x=359;
	}

$Color=#FF000;
$Color.hue=x;

Caveats:

  • for simplicity, we’re computing the distances from the upper left-hand corner of each note. The center would be better; it’s an easy fix.
  • the color change is continuous. You could easily make it jump between discrete values, if that’s desirable.
  • for simplicity, we set an initial color (here bright red) and then modify its hue. If you use a less saturated color, you’d get a less garish color scheme.
1 Like

Better solution!

var dist=distance(this,./O);
var x=dist*20;
if (x>359){
	x=359;
	}
$Color=#F00;
$Color.hue=x;

This saves work, and also calculated the distance between the centers of the notes, not their upper left-hand corners.

1 Like

Further, see distance().

1 Like

Thanks! I’ll experiment with that.

Does anyone have links where I could learn about colors (hue and all this stuff)?

https://acrobatfaq.com/atbref95/

Also, Window ▸ Tinderbox Help

I meant colors in general. It’s hard to understand what the different Tinderbox operators do if one has no idea how colors “work”.

One nice introduction: What is Color Theory? | IxDF

1 Like

Having covered colour theory, if that was the need see:

The latter chart is using the “Tinderbox &” colour scheme which is the most normal in terms of named colours looking like the colour named. The latter notion should make sense from reading how ttbc uses colours.

Here is a list of colour-focused operators: Color operators

1 Like