Programatically Control Browser Widget

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
icouto
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 92
Joined: Wed May 29, 2013 1:54 am
Location: Sydney, Australia

Programatically Control Browser Widget

Post by icouto » Wed Mar 08, 2017 1:25 am

Hi all,

Long time absent from LiveCode. Just downloaded the latest stable version (8.1.3), and have been playing with the new 'Browser' widget. Sure makes it easier to add a browser viewport to projects, but apart from setting the URL to be displayed, and whether we want scrollbars or not, there doesn't seem to be a lot of ways to control it programatically.

Is it possible for us to do the following?:

* get the 'formattedHeight' of the widget - i.e., the height of the entire web page being displayed
* scroll up/down - i.e., set the 'vScroll'?

Many thanks in advance for pointing me in the right direction.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Programatically Control Browser Widget

Post by jacque » Wed Mar 08, 2017 4:56 pm

Do browsers even have a formattedheight? They are zoomable and can be any size.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: Programatically Control Browser Widget

Post by [-hh] » Wed Mar 08, 2017 8:25 pm

A browser widget is not an ordinary control, but is powered by javascript.
You are asking for values that are determined by the content (HTML page) which is formatted by the widget's engine to the bounds of your widget's size. So you can use javascript to get what you want.

This is now an example for
  • how to use "the javascriptHandlers" of a browser widget,
  • how to use elementary javascript functions, here:
    • Get the content's size, formatted according to your browser's size.
    • Get the current scroll (hscroll,vscroll)
    • Set the current scroll (hscroll,vscroll) absolute (='scrollTo')
    • Set the current scroll (hscroll,vscroll) relative (='scrollBy')
(The following script is my scripting style. Of course there are other possibilities to script this.)
Put in the card's script:

Code: Select all

on openCard
   set the javascriptHandlers of widget "browser" to "jsGetValues"
end openCard

-- usage: do jsGetDimen() in widget "browser"
function jsGetDimen
   return "liveCode.jsGetValues('dimen'," & \
         "document.getElementsByTagName('body')[0].clientWidth," & \
         "document.getElementsByTagName('body')[0].clientHeight)"
end jsGetDimen

-- usage: do jsSetScroll(0,200) in widget "browser"
function jsSetScroll v,h
   return "window.scrollTo("& (v,h) & ")" in widget "browser"
end jsSetScroll

-- usage: do jsScrollBy(0,50) in widget "browser"
function jsScrollBy v,h
   return "window.scrollBy("& (v,h) & ")" in widget "browser"
end jsScrollBy

-- usage: do jsGetScroll() in widget "browser"
function jsGetScroll
   return "liveCode.jsGetValues('scroll',window.scrollX,window.scrollY)"
end jsGetScroll

-- handles the return from the browser
on jsGetValues pType,x,y
   replace "false" with "0" in x; replace "false" with "0" in y
   switch pType
      case "dimen"; put (x,y) into fld 1; break
      case "scroll"; put (x,y) into fld 2; break
      default; put "error"
   end switch
end jsGetValues
Example usage (for a button).

Code: Select all

on mouseUp
   do jsGetDimen() in widget "browser"
   -- do jsSetScroll(20,120) in widget "browser"
   do jsScrollBy(5,5) in widget "browser"
   do jsGetScroll() in widget "browser"
end mouseUp
shiftLock happens

icouto
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 92
Joined: Wed May 29, 2013 1:54 am
Location: Sydney, Australia

Re: Programatically Control Browser Widget

Post by icouto » Thu Mar 09, 2017 9:27 am

Thank you for your extremely comprehensive and helpful response, @[-hh]!

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”