Text with a framebox

[navdeeprana]

How do I add a text with a bounding box as shown in the figure below generate from the following matplotlib script

import numpy as np
import matplotlib.pyplot as plt
fig, ax = plt.subplots(figsize=(2,2))
ax.imshow(np.random.rand(32,32));
ax.axis("off")
ax.text(0.95, 0.95, "rand", ha="right", va="top", transform=ax.transAxes, bbox={"facecolor" : "white"}, fontsize=10)

I have tried the following

fig, ax, im = heatmap(rand(32,32); interpolate = false)
hidedecorations!.(ax, grid = false)
t = text!(ax, 0.95, 0.95; text ="rand", space=:relative, align = (:right, :top), depth_shift=1.0) 
poly!(ax, boundingbox(t),color=(:White,1.0), space=:pixel, depth_shift=0.8)
fig

which ends up with the text masked by the box.

[asinghvi17]

You should translate your text plot "upwards" in the z-axis, by translate!(t, 0, 0, 1) (for example). I don't know why depth_shift isn't working for you - which backend are you using? If it's a GL backend then worth an issue, otherwise CairoMakie doesn't really support it I think.

[ffreyer]

A couple of notes on depth_shift:

• It only works with GLMakie and WGLMakie.
• It shouldn't be your first choice for treating ordering issues. If you can adjust your data or use translate!(plot, ...) to fix things, do that. If that is not really an option, you can use depth_shift. For example if you want to plot two lines with the same points in 3D and always want to have the thinner one on top.
• It applies in clip space where depth is in a 0 to 1 range. So shifting by 1 most likely moves your data out of the rendered box. depth_shift is meant to be a way to treat z-fighting, to nudge something forward or backward a little bit to make it draw in front or behind something else at the same position. It should be used as fine control, kind of in contrast to overdraw which just ignores depth order and puts a plot in front of everything else. Wireframe for example uses depth_shift = -1f-5.
• Since this adjusts depth, a positive value means deeper - further behind, and a negative value mean less deep - towards the front/top.

[navdeeprana]

I am using CairoMakie as a backend which explains why it doesn't work. @ffreyer thank you for the detailed explanation of depth_shift.

I am now using the following codelet to generate the framebox.

fig, ax, im = heatmap(rand(32,32); interpolate = false)
hidedecorations!.(ax, grid = false)
t = text!(ax, 0.95, 0.95; text =" rand ", space=:relative, align = (:right, :top), depth_shift=1.0) 
translate!(t, 0, 0, 1)
poly!(ax, boundingbox(t),color=(:White,1.0), space=:pixel)
wireframe!(ax, boundingbox(t),color=(:Black,1.0), space=:pixel)
fig

What's the easiest way to increase the size of the boundingbox, such that there's a bit more whitespace padding around the text?

After looking at GeometryBasics.jl, I tried boundingbox(t)*1.2, but then the type changes from GeometryBasics.HyperRectangle to Rect3{Float64} and Makie does not render it.

[asinghvi17]

You can try the following:

padding = 5 # 5 pixels
text_bbox = boundingbox(t)
text_bbox = Rect3f(text_bbox.origin .- padding, text_bbox.widths .+ 2*padding)
poly!(ax, text_bbox; ...)

which should give you padding for now.

[ffreyer]

For CairoMakie render order is currently based on the call order of plot commands. So you want get the poly plot out there before before the text plot. Translating shouldn't be necessary then. You can also skip the wireframe call and let poly handle the outline instead.

fig, ax, im = heatmap(rand(32,32); interpolate = false)
hidedecorations!.(ax, grid = false)

rect = Observable(Rect2f(0, 0, 0, 0))
poly!(ax, rect,color=(:White,1.0), space=:pixel, strokewidth = 2)
t = text!(ax, 0.95, 0.95; text =" rand ", space=:relative, align = (:right, :top)) 

map!(rect, t.plots[1][1]) do _
    r = Rect2f(boundingbox(t))
    return Rect2f(minimum(r) .- 10, widths(r) .+ 20)
end
# or alternatively:
# r = Rect2f(boundingbox(t))
# rect[] = Rect2f(minimum(r) .- 10, widths(r) .+ 20)

# translate!(t, 0, 0, 1) # Not necessary in CairoMakie
fig