Fit HTML page in browser widget

Bringing the internet highway into your project? Building FTP, HTTP, email, chat or other client solutions?

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Post Reply
raugert
Posts: 10
Joined: Thu May 26, 2016 9:30 pm

Fit HTML page in browser widget

Post by raugert » Mon May 22, 2017 5:25 pm

I have HTML pages served by a local MAMP server that are used for television graphics. The pages are 1920x1080 px. The pages are controlled by my Livecode app (which works quite well !) but I would like to add a small browser window to my app in order to monitor the HTML page.

Currently, I can used the LC browser widget to monitor those pages but it has to be a large 1920x1080 window for me to see all the content. I would like to make it a small browser window that would scale to the HTML page within it, without using scroll bars. I'm not sure if this is possible without changing my html script to make it responsive ? (I've never done that).

I tried changing the browser widget properties but they don't seem to scale like I thought they would.

thanks for help or comments.

shaosean
Posts: 830
Joined: Thu Nov 04, 2010 7:53 am

Re: Fit HTML page in browser widget

Post by shaosean » Tue May 23, 2017 7:13 am

If the browser widget supports zooming, you could always try that, otherwise you will need to make changes to the HTML code..

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1540
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Fit HTML page in browser widget

Post by [-hh] » Sun May 28, 2017 8:22 pm

The browser widget doesn't support content zooming.

But you could use for such 'thumbnails' repeatedly processes that "fullscreen-shot" your page to an image and then read in that image to LC.
Doesn't work with 'modern' animation techniques.

[I use for example often "Paparazzi!" on Mac].

p.s. As long as all you wish to see is _within the screenrect_ then a revBrowser instance can also take snapshots.
shiftLock happens

shaosean
Posts: 830
Joined: Thu Nov 04, 2010 7:53 am

Re: Fit HTML page in browser widget

Post by shaosean » Mon May 29, 2017 1:40 am

Okay, so you would need to do a little math to figure out the ratio you need to zoom in/out.. So if your page is 1920 pixels wide, but your browser widget is only 500 pixels wide, you would do 500 / 1920 and then set the document.body zoom level

Code: Select all

on mouseUp
   local ratio
   put 500 / 1920 into ratio
   do "document.body.style.zoom=" & ratio in widget "oink"
end mouseUp

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1540
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Fit HTML page in browser widget

Post by [-hh] » Mon May 29, 2017 11:05 am

shaosean wrote: on mouseUp
   put 500 / 1920 into ratio
   do "document.body.style.zoom=" & ratio in widget "browser"
end mouseUp
Yes, that is clever!
This is basic CSS and works for HTML4+CSS, sadly only partially for HTML5/ canvas2D.

If it only were always as simple as using such a CSS line! We wouldn't have the current pixel-optimized pages and notes like
"This page is optimized for viewing on a 1920x1080 screen with IE 19 patchlevel 1.7a".

There are more elaborate js modules for content-scaling. None is reliable cross-platform in the browser widget. For example html2canvas may help for the OP's scenario (could moreover be used to take an image from and use that).

But the simple CSS above is of course worth a try for the special situation of the OP (apply after each reload of the page and don't apply when HTML5 standalones need clicks ...)
Hope it works for him/ her.
shiftLock happens

raugert
Posts: 10
Joined: Thu May 26, 2016 9:30 pm

Re: Fit HTML page in browser widget

Post by raugert » Thu Sep 14, 2017 3:45 am

Sorry for the late reply (that's an understatement...) I had actually abandoned the idea of sizing the content and I just noticed your reply. Your solutions actually works fine for my application and this is great information for future project. I didn't know about the "do" command for using css language. Thank-you !

Post Reply

Return to “Internet”