Dynamically moving three images with respect to each other vertically

Question

I'm trying to implement something I had in mind, although I am not sure if it is possible. It is for sure not what Mathematica is made for, but I think the features should be there, hidden in something like Manipulate.

I have three images: [1], [2], and [3]. I would like to show/plot them next to each other horizontally, like an energy level diagram. They can have some white space between them for clarity, but they can also touch exactly, that doesn't matter so much. But then the vertical position, this I would like to be variable; I would like to be able to move each one up and down while keeping the other two fixed, preferably with individual sliders.

Now, this sounds a lot like something that would be possible with Manipulate; I am simply not sure how to do this given that these are not exactly plotting objects but images. On the other hand, they are rather simple diagrams; perhaps I could create each of them as an individual figure in Mathematica (using something like epilog?) and shift the positions of these figures up and down? I am not sure.

Is this possible? I assume so. If so, is there some documentation or an example in Mathematica that'll help me get started on this?

Note that in the end my idea is to make an animation out of it, showing different settings of an experiment that I am looking at.

Answer 1

im1 = ImageReflect[Import["1.png"]];
im2 = ImageReflect[Import["2.png"]];
im3 = ImageReflect[Import["3.png"]];

Simple example:

ima = Raster[ImageData[im1], {{-1.604, -0.92}, {1.604, 1.08}}];
imb = Raster[ImageData[im2], {{-0.75, -0.75}, {0.8, 1.25}}];
imc = Raster[ImageData[im3], {{-0.5, -1}, {0.8, 1}}];

Manipulate[
 Graphics[{Translate[ima, {-3, a}], Translate[imb, {0, b}], 
   Translate[imc, {2, c}]}, 
  ImageSize -> Medium], {{a, 0, "Uncoupled"}, -2, 
  2}, {{b, 0, "Δtr"}, -2, 2}, {{c, 0, "Coupled"}, -2, 
  2}]

Simply reduce the -3 and 2 if you want them to touch.

You can also change the Rasters[] dynamically themselves, which is easier, but more taxing.

Manipulate[
 GraphicsRow[{Graphics[
    Raster[ImageData[im1], {{-1.604, -0.92 + a}, {1.604, 1.08 + a}}], 
    Frame -> True, GridLines -> Automatic, 
    Method -> {"GridLinesInFront" -> True}, 
    PlotRange -> {{-2, 2}, {-2, 2}}, ImageSize -> Medium], 
   Graphics[
    Raster[ImageData[im2], {{-0.75, -0.75 + b}, {0.8, 1.25 + b}}], 
    Frame -> True, GridLines -> Automatic, 
    Method -> {"GridLinesInFront" -> True}, 
    PlotRange -> {{-2, 2}, {-2, 2}}], 
   Graphics[Raster[ImageData[im3], {{-0.5, -1 + c}, {0.8, 1 + c}}], 
    Frame -> True, GridLines -> Automatic, 
    Method -> {"GridLinesInFront" -> True}, 
    PlotRange -> {{-2, 2}, {-2, 2}}]}], {{a, 0, "Uncoupled"}, -2, 
  2}, {{b, 0, "Δtr"}, -2, 2}, {{c, 0, "Coupled"}, -2, 
  2}]