Is there any way to add support for scaling images?

mikavilpas commented 4 months ago

I have a setup with 3 monitors:

  Displays:
Colour LCD:
  Display Type: Built-in Liquid Retina XDR Display
  Resolution:   3456x2234 Retina
  Main Display: Yes
  Mirror:   Off
  Online:   Yes
  Automatically Adjust Brightness:  Yes
  Connection Type:  Internal
DELL U2415:
  Resolution:   1200 x 1920
  UI Looks like:    1200 x 1920 @ 60.00Hz
  Mirror:   Off
  Online:   Yes
  Rotation: 90
D32u-40:
  Resolution:   3840x2160 (2160p/4K UHD 1 - Ultra High Definition)
  UI Looks like:    3840 x 2160 @ 60.00Hz
  Mirror:   Off
  Online:   Yes
  Rotation: Supported

When creating a presentation for work, I want to include a screenshot of a web page. If I take the screenshot using my DELL U2415 monitor, it will appear about half the size as one taken from the Built-in Liquid Retina XDR Display:

(don't worry about the rest of the presentation, it's still a bit under construction 😄 )

The documentation for presenterm specifies the image should be displayed in its original size, which I think might explain this behaviour.

But I was wondering if there's any way to add support for scaling? Such as

built in
using a plugin of some kind (maybe?). There's already functionality that allows executing arbitrary code, so maybe something hacky could be cooked up
a workaround tip like "to scale images when designing your presentation, you can use imagemagick ... and live preview the changes"

What do you think?

mfontanini commented 4 months ago

Images are currently already being scaled before displaying them because they would otherwise very likely overflow the screen in either direction. So I guess it would be doable to let you specify the scaling, the question is how. The image tag looks like ![](filename) so maybe ![w=42, h=1337](filename) or ![w=42](filename) (the latter meaning you only care about width and you want to preserve the aspect ratio? Or maybe even simply w=42 or h=1337 (never both) so the aspect ratio is always preserved; I don't know why you'd want to alter it.

This should still consider overflows tho, so that would be a hint and if the tool finds that the size doesn't fit it will shrink it. Thoughts?

mikavilpas commented 4 months ago

Ok that sounds great!

I love the idea of forcing preserving the aspect ratio 👍🏻

I looked into different methods that can be used to specify image sizes in other tools:

HTML (🤔)

<img src="img.png" width="50%"> is in my experience the most common way to do this. As an example, it's usable in GitHub markdown.

note that GitHub markdown doesn't have a way to do this according to its specification so I think it may be some extension https://github.github.com/gfm/#images (neither does CommonMark)
parsing HTML is listed as a "non goal" for comrak here https://github.com/kivikakk/comrak/issues/85 which means a custom parser of some kind would be needed

A different markdown format altogether (👎🏻)

In general there are some markdown formats that have support for attribute syntax. For example, https://pandoc.org/MANUAL.html#extension-link_attributes has ![image](foo.jpg){#id .class width=30 height=20px}

I looked into this too but could not find a good way to do it. There are some implementations but they don't seem actively maintained or popular. Maybe not the way to go.

A custom format (👍🏻)

A custom format seems like the easiest option - there is no agreement on a standard so just implement something 🙂.

I think it would ideally be something that comrak doesn't have a problem with. Your idea seems fine to me.

Someone also proposed ![image|298x130](file.png) which is essentially the same thing.

mikavilpas commented 4 months ago

How do you think image sizes could be handled? It looks like crossterm works on a basis of rows and columns right now, although I didn't look too deep.

Another interesting question is how zooming the terminal could work with images: when zooming in should the images grow in size? Currently it seems on my wezterm they stay the same size when zooming in.

mfontanini commented 3 months ago

I'd like to take a step back and understand why you're having this issue. Scaling will bring some issues, like reducing the quality of the images, so the screenshot will never look as good as it would if you took it in the same screen that you're going to present. Is this problem fully solved if you just take the screenshots in the same screen you're presenting? I guess the screen you take the screenshot it would really only need to be >= the screen you present in, because we automatically scale down, but we don't scale up.

mikavilpas commented 3 months ago

Yeah, I think my issue is solved now that I know the workaround of using the same screen. Right now I never need to present on screens that I don't control - I can always use my own laptop's screen.

Sometimes the layout of the slide changes a bit if I zoom in - everything else gets bigger except images.

If you think it's too complex, maybe some workaround or tip could be added to the readme? On youtube I have seen some people have some scaling issues too so I guess it's not that uncommon. An example is here https://youtu.be/0uQ3bkiW5SE?t=466 (alhtough maybe not the best example)

mfontanini commented 3 months ago

Haha wow, TJ using presenterm, this is awesome.

I think more than how complicated it is to implement, the question should be whether built in scaling would be better than scaling via a tool/ensuring the image is the right size. And I guess the answer as I write this is probably yes? I'll have a look at ways to implement this when I have some time.

mfontanini commented 3 months ago

Okay so, how about instead of specifying the size you specify that you want the image to be expanded to fill the layout horizontally? Is this ever not what you want? I would imagine what you want in your screenshot is that the first image is expanded as much as the second one is right? So maybe an [expand_horizontally](filename) (needs better naming) could do the trick and would get rid of the need to figure out whether we want columns/rows or pixels, aspect ratios, etc. Thoughts?

mfontanini commented 3 months ago

Ping @mikavilpas, did you get to see this last message^ ?

mikavilpas commented 3 months ago

Ah yeah, I did see the message but I don't see my reply here on GitHub, so maybe I didn't finish it.

In my case at least this would be a very good solution. That would mean I can control the size on two levels: either in the image itself (outside of presenterm), or by setting it using e.g. what you proposed 👍🏻

That's pretty clever since it avoids a lot of unnecessary complexity.

DrunkenToast commented 2 months ago

The way Marp handles this is really intuitive. You could get some inspiration there :) I think percentage based scaling would work really well for presentations on all sorts of screens. But of course not sure how complex the implementation would be.

https://marpit.marp.app/image-syntax?id=resizing-image

mfontanini / presenterm