[Question] How is browser created in default resource 'webbrowser'?

[kieran]

Hello, I was looking for a web browser and found out there was a nice default resource, but it creates the browser inside a window and it is zoomed in far too much, I was wondering if anyone could look over it and see where it draws the browser as I have no clue how it's drawing a browser in a window, just want to make the width the windows size. 

Client

WebBrowserGUI = {}
WebBrowserGUI.instance = nil

function WebBrowserGUI:new() local o=setmetatable({},{__index=WebBrowserGUI}) o:constructor() return o end

function WebBrowserGUI:constructor()
	local sizeX, sizeY = screenWidth * 0.9, screenHeight * 0.9
	self.m_Window = GuiWindow(screenWidth * 0.05, screenHeight * 0.05, sizeX, sizeY, "Web browser", false)
	self.m_Window:setSizable(false)

	self.m_BackButton = GuiButton(5, 25, 32, 32, "<", false, self.m_Window)
	self.m_BackButton:setEnabled(false)
	self.m_ForwardButton = GuiButton(42, 25, 32, 32, ">", false, self.m_Window)
	self.m_ForwardButton:setEnabled(false)
	self.m_EditAddress = GuiEdit(77, 25, sizeX - 192, 32, "Please enter an address", false, self.m_Window)
	self.m_DevButton = GuiButton(sizeX - 110, 25, 32, 32, "✎", false, self.m_Window)
	self.m_LoadButton = GuiButton(sizeX - 75, 25, 32, 32, "➽", false, self.m_Window)
	self.m_ButtonClose = GuiButton(sizeX - 38, 25, 24, 24, "✖", false, self.m_Window)
	self.m_ButtonClose:setProperty("NormalTextColour", "FFFF2929")
	self.m_ButtonClose:setProperty("HoverTextColour", "FF990909")
	self.m_ButtonClose:setFont("default-bold-small")
	
	self.m_Browser = GuiBrowser(5, 62, sizeX - 10, sizeY - 67, false, false, false, self.m_Window)

	if not self.m_Browser then
		outputChatBox( "Can't create browser. Check Settings->Web Browser" )
		self.m_Window:destroy()
		return
	end
	
	local browser = self.m_Browser:getBrowser()
	addEventHandler("onClientBrowserCreated", browser, function(...) self:Browser_Created(...) end)
	addEventHandler("onClientBrowserNavigate", browser, function(...) self:Browser_Navigate(...) end)
	addEventHandler("onClientBrowserWhitelistChange", root, function(...) self:Browser_WhitelistChange(...) end)
	addEventHandler("onClientBrowserDocumentReady", browser, function(...) self:Browser_DocumentReady(...) end)
	
	self.m_RequestedURL = ""
	
	showCursor(true)
	GuiElement.setInputMode("no_binds_when_editing")
end

function WebBrowserGUI:Browser_Created()
	addEventHandler("onClientGUIClick", self.m_LoadButton, function(...) self:LoadButton_Click(...) end, false)
	addEventHandler("onClientGUIAccepted", self.m_EditAddress, function(...) self:LoadButton_Click(...) end, false)
	addEventHandler("onClientGUIClick", self.m_BackButton, function(...) self:BackButton_Click(...) end, false)
	addEventHandler("onClientGUIClick", self.m_ForwardButton, function(...) self:ForwardButton_Click(...) end, false)
	addEventHandler("onClientGUIClick", self.m_ButtonClose, function(...) self:CloseButton_Click(...) end, false)
	addEventHandler("onClientGUIClick", self.m_DevButton, function(...) self:DevButton_Click(...) end, false)

	self:loadURL("https://mtasa.com/")
end

function WebBrowserGUI:Browser_Navigate(targetURL, isBlocked)
	if isBlocked then
		self.m_RequestedURL = targetURL
		Browser.requestDomains({targetURL}, true)
		return
	end
end

function WebBrowserGUI:Browser_WhitelistChange(whitelistedURLs)
	for i, v in pairs(whitelistedURLs) do
		if self.m_RequestedURL:find(v) then
			self.m_Browser:getBrowser():loadURL(self.m_RequestedURL)
			self.m_RequestedURL = ""
		end
	end
end

function WebBrowserGUI:Browser_DocumentReady()
	self.m_Window:setText("Web browser: " .. tostring(self.m_Browser:getBrowser():getTitle()))
	self.m_EditAddress:setText(tostring(self.m_Browser:getBrowser():getURL()))
	
	self.m_BackButton:setEnabled(self.m_Browser:getBrowser():canNavigateBack())
	self.m_ForwardButton:setEnabled(self.m_Browser:getBrowser():canNavigateForward())
end

-- // GUI Navigation
function WebBrowserGUI:LoadButton_Click(param1, state)
	if isElement(param1) or (param1 == "left" and state == "up") then
		self:loadURL(self.m_EditAddress:getText())
	end
end

function WebBrowserGUI:BackButton_Click(button, state)
	if button == "left" and state == "up" then
		self.m_Browser:getBrowser():navigateBack()
	end
end

function WebBrowserGUI:ForwardButton_Click(button, state)
	if button == "left" and state == "up" then
		self.m_Browser:getBrowser():navigateForward()
	end
end

function WebBrowserGUI:CloseButton_Click(button, state)
	if button == "left" and state == "up" then
		self.m_Window:destroy()
		showCursor(false)
		--GuiElement.setInputMode("no_binds_when_editing")
		WebBrowserGUI.instance = nil
	end
end

function WebBrowserGUI:DevButton_Click(button, state)
	if button == "left" and state == "up" then
		if not getDevelopmentMode() then
			exports.msgbox:guiShowMessageBox("You have to enable the development using setDevelopmentMode", "error", "Development mode required", false)
			return
		end
		
		self.m_Browser:getBrowser():toggleDevTools(true)
	end
end
-- \\ GUI Navigation

function WebBrowserGUI:loadURL(url)
	if url == "" then
		self.m_EditAddress:setText("about:blank")
		self.m_Browser:getBrowser():loadURL("about:blank")
		return
	elseif url:sub(0, 6)  == "about:" then
		self.m_EditAddress:setText(url)
		self.m_Browser:getBrowser():loadURL(url)
		return
	elseif url:sub(0, 7)  ~= "http://" and url:sub(0, 8) ~= "https://" then
		url = "http://"..url	
	end
	
	if Browser.isDomainBlocked(url, true) then
		self.m_RequestedURL = url
		Browser.requestDomains({url}, true)
		return
	end
	
	self.m_EditAddress:setText(url)
	self.m_Browser:getBrowser():loadURL(url)
end

It's a little advanced for me and this is why I came here to ask what and how, thanks.

[ShayF2]

-- This is an example off of the wiki. I know browsers are a bit complicated.
-- https://wiki.multitheftauto.com/wiki/CreateBrowser

--In order to render the browser on the full screen, we need to know the dimensions.
local sx,sy = guiGetScreenSize()

--Let's create a new browser in local mode. We will not be able to load an external URL.
local webBrowser = createBrowser(sx,sy,true,false)

--This is the function to render the browser.
function webBrowserRender()
	--Render the browser on the full size of the screen.
	dxDrawImage(0,0,sx,sy,webBrowser,0,0,0,tocolor(255,255,255,255),true)
end

--The event onClientBrowserCreated will be triggered, after the browser has been initialized.
	--After this event has been triggered, we will be able to load our URL and start drawing.
	addEventHandler('onClientBrowserCreated',webBrowser,function()
	--After the browser has been initialized, we can load our file.
	loadBrowserURL(webBrowser,'http://mta/local/html/site.html')
	--Now we can start to render the browser.
	addEventHandler('onClientRender',root,webBrowserRender)
end)

And here is a more advanced version (that I created on a dime)

-- Create a table of browsers
browsers = {}

-- Then create a function to create the browser
function dxDrawWebBrowser(x,y,w,h,url)
	-- creating a table for its data
	local self = {}
	self.x = x
	self.y = y
	self.w = w
	self.h = h
	self.url = url
	-- using a toggle for visibility
	self.visible = true
	-- creating the browser
	self.browser = createBrowser(self.x,self.y)

	-- creating a draw function for dx
	self.draw = function()
		dxDrawImage(self.x,self.y,self.x+self.w,self.y+self.h,self.browser,0,0,0,tocolor(255,255,255,255),true)
	end
	
	-- inserting it all to a table so we can grab data
	table.insert(browsers,self)
end

-- single global event so that we don't keep creating events
addEventHandler('onClientBrowserCreated',resourceRoot,function()
	for i,v in pairs(browsers) do
		if source == v.browser then
			-- loading its url after grabbing its data
			loadBrowserURL(source,v.url)
		end
	end
end)

-- and this is just to put it on the screen..
addEventHandler('onClientRender',resourceRoot,function()
	for i,v in pairs(browsers) do
		if v.visible == true then
			v.draw()
		end
	end
end)


-- so after all that code we can finally create a browser..
local sx,sy = guiGetScreenSize()

-- using 0.5 to take literally half the screen..
local newbrowser = dxDrawWebBrowser(sx*0.5,sy*0.5,sx*0.5,sy*0.5,'http://www.google.com/') -- there you go.
-- and to change its visibility now just simply do this
newbrowser.visible = false

-- I hope this helped you.

 

Edited October 22, 2017 by shay103

[kieran]

@ShayF I have tried the one off wiki, but what's the point in making a new one if I can just tweak the default browser?  But yeah, it kinda helps, prefer the GUI one to the dX browser though, it's easier...

Anyway going off what you posted, I think the browser is declared on line 23 of the code I posted...  Also why is "self." before everything that includes the browser?

Thanks

[ShayF2]

7 hours ago, kieran said:

@ShayF I have tried the one off wiki, but what's the point in making a new one if I can just tweak the default browser?  But yeah, it kinda helps, prefer the GUI one to the dX browser though, it's easier...

Anyway going off what you posted, I think the browser is declared on line 23 of the code I posted...  Also why is "self." before everything that includes the browser?

Thanks

self is just a table that stores all the data for the browser. self.url is a variable within that table called 'url'
so if u were to make a browser like so

local newbrowser = dxDrawWebBrowser(0,0,sx,sy,'http://www.google.com/')

To change it's url you simply change the value of the variable within its own data table. This makes things a lot easier to work with
Here's how you change the url..

newbrowser.url = 'http://www.youtube.com/'

I gave you the code to work with, all you need to do is set values like shown above, and use the dxDrawWebBrowser to create the browser.
Things should be much simpler for you, I hoped this helped.

This is advanced code, type of format and style that professionals will use. You will not find any better, any smoother, or any simpler code. Even though the main functions are complicated and hard to understand, it makes getting what you want done a whole lot simpler.

Edited October 22, 2017 by ShayF

[kieran]

Made my browser, but now it won't set the new site when I press enter (enter's bound it to function)

local screenWidth, screenHeight = guiGetScreenSize()

local px,py = 800, 600

local x,y =  (screenWidth/px), (screenHeight/py) 

win = false

function createBrowser()
	if ( window ) then --So it's easy to load the browser for player
    		if ( guiGetVisible( window )) then    	
    			showCursor( false )
				toggleAllControls(true)
                guiSetVisible( window, false )
        	else
        		guiSetInputEnabled(false)
    			showCursor(true)
				toggleAllControls(false)
        		guiSetVisible( window, true )
        	end
        else
		toggleAllControls(false)
		window = guiCreateWindow(x+50, y+50, screenWidth-100, screenHeight-100, "Please wait while your page loads", false)
		edit_site = guiCreateEdit(0, y+25, screenWidth, 25, "", false, window)
		local webBrowser = guiCreateBrowser(0, 55, screenWidth, screenHeight-100, false, false, false, window)
		local theBrowser = guiGetBrowser( webBrowser )
		bindKey ("enter", "down", nextPage)--Here I have bound enter to my function
		addEventHandler("onClientBrowserCreated", webBrowser, loadBrowser)
	end
end

bindKey ("F3", "down", createBrowser)

function SetURL(url)
	guiSetText(window, url)
end


function loadBrowser()
	loadBrowserURL(source, "http://www.youtube.com")
	showCursor(true)
	win = true
	addEventHandler("onClientBrowserDocumentReady", root, SetURL)
end	


function nextPage()
	if ( guiGetVisible( window )) then
		--[[local webBrowser = guiCreateBrowser(0, 55, screenWidth, screenHeight-100, false, false, false, window)
		addEventHandler("onClientBrowserCreated", webBrowser, 
		function()]]
		site = guiGetText(edit_site)--Comments above was my attempt to draw a new browser on old one...
		loadBrowserURL(source, site)
		--end)
	end
end

Debug: Bad argument @ 'loadbrowserURL' [expected texture at argument 1, got nil]

I created a browser, but what use is it when you can't go to a different site? haha

Edited October 22, 2017 by kieran
Sorry, posted this about 8 hours ago :/ network not the best right now...

[ShayF2]

local sx,sy = guiGetScreenSize()
local px,py = 800,600
local x,y = (sx/px),(sy/py)
win = false

function createBrowser()
	if (window) then
    		if (guiGetVisible(window)) then
    			showCursor(false)
				toggleAllControls(true)
                guiSetVisible(window,false)
        	else
        		guiSetInputEnabled(false)
    			showCursor(true)
				toggleAllControls(false)
        		guiSetVisible(window,true)
        	end
        else
		toggleAllControls(false)
		window = guiCreateWindow(x+50,y+50,sx-100,sy-100,'Please wait while your page loads',false)
		edit_site = guiCreateEdit(0,y+25,sx,25,'',false,window)
		webBrowser = guiCreateBrowser(0,55,sx,sy-100,false,false,false,window)
		theBrowser = guiGetBrowser(webBrowser)
		bindKey('enter','down',nextPage)
		addEventHandler('onClientBrowserCreated',theBrowser,loadBrowser)
	end
end
bindKey('F3','down',createBrowser)

function SetURL(url)
	guiSetText(window,url)
end

function loadBrowser()
	loadBrowserURL(source,'http://www.youtube.com')
	showCursor(true)
	win = true
	addEventHandler('onClientBrowserDocumentReady',root,SetURL)
end

function nextPage()
	if (guiGetVisible(window)) then
		--[[local webBrowser = guiCreateBrowser(0,55,sx,sy-100,false,false,false,window)
		addEventHandler('onClientBrowserCreated',webBrowser,function()]]
		site = guiGetText(edit_site)
		loadBrowserURL(source,site)
		--end)
	end
end

 

Edited October 23, 2017 by ShayF

[kieran]

4 hours ago, ShayF said:

local sx,sy = guiGetScreenSize()local px,py = 800,600local x,y = (sx/px),(sy/py)win = falsefunction createBrowser()	if (window) then    		if (guiGetVisible(window)) then    			showCursor(false)				toggleAllControls(true)                guiSetVisible(window,false)        	else        		guiSetInputEnabled(false)    			showCursor(true)				toggleAllControls(false)        		guiSetVisible(window,true)        	end        else		toggleAllControls(false)		window = guiCreateWindow(x+50,y+50,sx-100,sy-100,'Please wait while your page loads',false)		edit_site = guiCreateEdit(0,y+25,sx,25,'',false,window)		webBrowser = guiCreateBrowser(0,55,sx,sy-100,false,false,false,window)		theBrowser = guiGetBrowser(webBrowser)		bindKey('enter','down',nextPage)		addEventHandler('onClientBrowserCreated',theBrowser,loadBrowser)	endendbindKey('F3','down',createBrowser)function SetURL(url)	guiSetText(window,url)endfunction loadBrowser()	loadBrowserURL(source,'http://www.youtube.com')	showCursor(true)	win = true	addEventHandler('onClientBrowserDocumentReady',root,SetURL)endfunction nextPage()	if (guiGetVisible(window)) then		--[[local webBrowser = guiCreateBrowser(0,55,sx,sy-100,false,false,false,window)		addEventHandler('onClientBrowserCreated',webBrowser,function()]]		site = guiGetText(edit_site)		loadBrowserURL(source,site)		--end)	endend

 

Same result....  it can't get the browser from the function.

I've tried putting the enter bind on loadBrowser hoping it would get the created browser, but don't know how I'd add a handler to identify the browser when I press enter on my edit box, keeps saying the browser (texture) isn't there.

Edited October 23, 2017 by kieran

[ShayF2]

try this

function loadBrowser()
	if source == theBrowser then
		loadBrowserURL(source,'http://www.youtube.com')
		showCursor(true)
		win = true
		addEventHandler('onClientBrowserDocumentReady',resourceRoot,SetURL)
	end
end
addEventHandler('onClientBrowserCreated',resourceRoot,loadBrowser)

 

[kieran]

Works fine now, the key part I was missing was:

theBrowser = guiGetBrowser( webBrowser )

I don't know why, but you need to get the browser then use that to load the URL, rather than just using the GUI browsers variable...  Anyway thanks

Working Code

Spoiler

win = false


function createBrowser()
	if ( window ) then
    		if ( guiGetVisible( window )) then    	
    			showCursor( false )
				toggleAllControls(true)
                guiSetVisible( window, false )
        	else
        		guiSetInputEnabled(false)
    			showCursor(true)
				toggleAllControls(false)
        		guiSetVisible( window, true )
        	end
        else
		toggleAllControls(false)
		window = guiCreateWindow(x+50, y+50, screenWidth-100, screenHeight-100, "Please wait while your page loads", false)
		edit_site = guiCreateEdit(0, y+25, screenWidth, 25, "", false, window)
		webBrowser = guiCreateBrowser(0, 55, screenWidth, screenHeight-100, false, false, false, window)
		theBrowser = guiGetBrowser( webBrowser )
		bindKey ("enter", "down", nextBrowser)--This is binding the key to nextBrowser, meaning it can get all the code from this function and pass it to nextBrowser
	end
end

bindKey ("F3", "down", createBrowser)


function SetURL(url)
	guiSetText(window, url)
end


function loadBrowser()
	loadBrowserURL(source, "http://www.youtube.com")
	showCursor(true)
	win = true
	addEventHandler("onClientBrowserDocumentReady", root, SetURL)
end	

addEventHandler("onClientBrowserCreated", resourceRoot, loadBrowser)


function nextBrowser()
	if ( guiGetVisible( window )) then
		site = guiGetText(edit_site)
			--outputChatBox(""..site)
		loadBrowserURL(theBrowser, site)
	end
end

 

 

Edited October 23, 2017 by kieran