I have two cards. The first one is a "map":
The second card is "routes", something like this:
I want to bring the the "map" card image as a background to the "routes" card by some user event. The caveat is that I want this background "dimmed down". Ideally, to achieve something that decker provides with the "Style->Tracing Mode":
I would appreciate any suggestions. Thanks!
That's a nice map!
As far as i know Decker doesn't let you fiddle with opacity. Instead, you could "simulate" it by using gray in place of black. When in drawing mode, go to Style and check Color. The different shades of gray are at the bottom of the default Decker palette. I suggest using the Fill tool with your desired shade :)
As Flocon noted, Decker uses paletted color and doesn't have any notion of partial transparency, so there are some limits to what we can do here, but I can see ways to achieve something like the effect you describe. If you haven't already, I recommend reading through All About Color for some relevant background information.
Let's assume for simplicity that you're using Decker's default color palette, the "map" and "route" cards are fully in black-and-white (patterns 0 and 1), and everything you want to fade in is part of the card backgrounds (no text in fields, etc).
If we created a new card to tinker with, we could use a script in The Listener to composite the card backgrounds together, assigning a different color to the pixels of "map":
card.image.paste[map.image.copy[].map[1 dict 36]] card.image.paste[route.image.copy[] 0,0 1]
(Be careful to save before doing this sort of thing in the Listener; it's a very powerful tool, but you can't "undo" changes performed this way!)
We could then manipulate the color Decker uses to display the "map" (I picked 36 here arbitrarily) to fade it in or out on the fly. Here I have a slider with a range of 0-255 wired up to let me change it manually:
on change do patterns[36]:"%06h" parse 6 take "%02h" format me.value end
The way I'm computing the "packed RGB" grayscale value here is by turning the 0-255 value of the slider into a 2-digit hex code, replicating it 3 times, and then parsing the result as a 6-digit hex number, which may be a little confusing. All About Color has some functions in the "col" module to make computing packed colors a bit easier.
How's that for a starting point?
That's an excellent starting point! Thank you for taking time to break it down for me.
And one more question, somewhat related this one. The "map" card aside from the image, has some field widgets with text – I used field widgets purely as labels. Simply because it lets me align text (center it) and easily move it around. Is there a programmatic way to convert the text in a label (with all the fonts and alignment) to an image? The only way that comes to mind is to create a canvas widget, assign it the same font as in the field, and then call the `.text[]` method – but then I'd need to split multi-line strings and calculated positions and anchoring every time.
You can use the app.render[card] function to take a "screenshot" of a card as an image. If we did this for our "map" card in the previous example, the snippet of code for compositing both images together would instead be:
card.image.paste[app.render[map].map[1 dict 36]] card.image.paste[route.image.copy[] 0,0 1]
Make sense?
It is also possible to render widgets individually and/or programmatically walk over some subset of the widgets on a card to inspect them or render their (rich) text on a canvas, etc. Happy to expand on that with examples if you find you need it.
