Is there a way to write a coordinate plane on top of an image?

Specific Domains Visualization
,
1

Is there a way to write a coordinate plane on an image? And be able to get some coordinates of some points. The second part is not necessary.
Thank you.

2

What kind of image?

You can draw whatever you like using Luxor

http://juliagraphics.github.io/Luxor.jl/stable/

3

It’s not quite clear what you mean by “write a coordinate plane on an image”.
Is it something like this?

using PlotlyJS

url ="https://raw.githubusercontent.com/empet/Texture-mapping-with-Plotly/main/images/sun-flower.jpg"
layout = Layout(width=400, height=400, 
                xaxis_range=[-2, 2], 
                yaxis=attr(range=[-2,2],
                           tickvals=-2:2, 
                           ticktext=-2:2), #set vertical and horizontal lines at equal distance
    images = [
        attr(
            source=url,
            xref="paper", 
            yref="paper",
            x=0, #fix image at the upper left corner
            y=1,
            xanchor="left",
            yanchor="top",
            sizex=1,
            sizey=1,
            layer="below",
            sizing="stretch")]);

pl = Plot(scatter(x=[-2,2], y=[-2, 2], 
                  mode="markers", marker_size=0.05), #dummy scatter plot 
          layout)

equal

4

Thank you, that is exactly what I want, but is there a way to do this with Makie.jl and to include smaller numbers in between, like 1.123. So that it would be easier to read coordinates?

5

Here’s one way (using translate! to move the image behind the grid lines):

using CairoMakie, FileIO
img = load(download("https://raw.githubusercontent.com/empet/Texture-mapping-with-Plotly/main/images/sun-flower.jpg"))

f, ax, im = image(img;
	axis = (
		# x stuff	
		xticks = LinearTicks(10),
		xgridcolor = :white,
		xminorticksvisible = true,
		xminorgridvisible = true,
		xminorgridcolor = :black,
		# y stuff	
		yticks = LinearTicks(10),
		ygridcolor = :white,
		yminorticksvisible = true,
		yminorgridvisible = true,
		yminorgridcolor = :cornflowerblue,
		# Aspect ratio
		aspect = 1,
	)
)

translate!(im, 0, 0, -100)

f

This can also be wrapped into a theme if you like:

img_theme = Theme(
	Axis = (
		# x stuff	
		xticks = LinearTicks(5),
		xminorticks = IntervalsBetween(4),
		xgridcolor = :black,
		xminorticksvisible = true,
		xminorgridvisible = true,
		xminorgridcolor = :white,
		# y stuff	
		yticks = LinearTicks(5),
		yminorticks = IntervalsBetween(4),
		ygridcolor = :black,
		yminorticksvisible = true,
		yminorgridvisible = true,
		yminorgridcolor = :cornflowerblue,
		# Aspect ratio
		aspect = 1,
	)
)

with_theme(img_theme) do
	f, ax, im = image(img)
	translate!(im, 0, 0, -100)
	f
end

index
index800Ă—600 425 KB

and the white space can be removed by setting the aspect ratio this way instead:

with_theme(img_theme) do
	f, ax, im = image(img)
	translate!(im, 0, 0, -100)
	colsize!(f.layout, 1, Aspect(1, 1.0))
	resize_to_layout!(f)
	f
end

index2
index2612Ă—600 420 KB

According to the docs at least, it looks like minor tick labels have not been implemented, but it might be worth opening an issue for this as discussed here ([Feature Request] - Minor ticks · Issue #822 · MakieOrg/Makie.jl · GitHub)

6

I had tried that, it works quite well however it rotates image by 90 degrees why is that so?

7

I fixed it by rotating an image before, how do you save an image, I have tried with save(f, "location.jpg), but doesn’t work. I haven’t found anything else.
Thanks.

8

however it rotates image by 90 degrees why is that so?

Oh, sorry, I should have rotated the image first in the above example, as you mentioned. For the long saga on default orientations check out here and here. I believe there is an open PR for image (Logical image() argument names & defaults to make images look like images · Issue #524 · MakieOrg/Makie.jl · GitHub), but no sure what the current status on that is

how do you save an image, I have tried with save(f, "location.jpg), but doesn’t work

Just flip the args (https://makie.juliaplots.org/stable/documentation/figure_size/index.html)

1 Like
9

Thank you, that helped a lot!