How to achieve scaling?

[zimbo_ouen]

Hi everyone,

I am trying to achieve something a bit different. I am trying to output a web page to a display (outdoor wall panels) that have a total working resolution of 640 x 480 but then be able to scale what would normally be displayed on a 1920 x 1080 web page.

I have actually kind of got it working but I really don't understand the logic of it, and was hoping someone can either explain how this is working or if there is a better way of doing it?

To get it "working" for me at the moment I have the /boot/config.txt set to have a custom resolution:
hdmi_group = 2,
hdmi_mode = 87,
hdmi_cvt = 640 480 60 3 0 0 0

To be able to display the full web page what I have also had to do is edit the frame buffer to be set to 1920 x 1080 and then tweaking the overscans I have got it almost working perfect. Is this essentially how you would scale normally? Using the frame buffer resolution settings?

I want to see if there is a better way to do this, or if I have actually done it the best way?

Thanks for your time on this.

[Heater]

What kind of web page is this? What is the content on it? Is it served up from the Pi or fetched from elsewhere? Did you create it?

In general WEB pages are not built to any particular screen resolution. If need be they rearrange themselves using CSS or perhaps some Javascript to display nicely on any screen.

[zimbo_ouen]

Thanks for getting back to me... It is a responsive website but it doesn't have to be a website. It can even be with an image or anything really.... So say I have a picture, for example that is 1920 x 1080 and want it to scale down to a 640 x 480 screen, is using the frame buffer the best way to scale it down?

[Heater]

I think you just need to scale the image into a new file and use that.

You can do that on the fly, programmatically, using imagemagick. Like so:

http://www.imagemagick.org/Usage/resize/

[ktb]

Heater is right. 1920x1080 doesn't scale uniformly down to 640x480. They are different aspect ratios. On a website, I would probably use something like the HTML5 picture element to serve a handful of different size images targeting various breakpoints and set 100% width on the images and container elements using CSS.

[zimbo_ouen]

Thanks I will give that a go!