<panel> <name>DHTML</name> <parent>Awesomium</parent> <description>The DHTML control wraps the internal Awesomium framework, supports calling Javascript functions from Lua, as well as running Lua from within the HTML. Running Lua code is disabled by default.</description> </panel> ⤶ <note> Awesomium doesn’t work with most HTTPS websites because it only supports up to TLS 1.0 </note> ⤶ <note>Awesomium doesn’t work with most HTTPS websites because it only supports up to TLS 1.0.</note> # Using url/href/src You might have noticed that Relative File Paths like `<img src="/images/picture.jpg">` wont work. There are 3 solutions for that: ## asset:// Instead of `https://` we use `asset://` which will point to our local files. ```⤶ ⤶ You might have noticed that Relative File Paths like `<img src="/images/picture.jpg">` wont work. There are 3 solutions for that: ⤶ ## asset:// ⤶ Instead of `https://` we use `asset://` which will point to our local files. ⤶ ```⤶ <img src="asset://garrysmod/materials/example_addon/example.png"> ``` <note>Please don't point towards your Addons folder. Use the File Location where Gmod has your addon files included.</note> ## Online Classic Absolute File Paths still work ... well unless `you are offline` or the `website is down` or the website uses `HTTPS above TLS 1.0` Version⤶ ```⤶ ⤶ <note>Please don't point towards your Addons folder. Use the File Location where Gmod has your addon files included.</note> ⤶ ## Online ⤶ Classic Absolute File Paths still work ... well unless `you are offline` or the `website is down` or the website uses `HTTPS above TLS 1.0` Version.⤶ ⤶ ```⤶ <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> ``` ## Base64 encoding This will encode your local File into a Base64 String. The String will start with the datatype like `data:image/jpeg;base64,` followed by a long chain of characters being the Base64 data. ⤶ ## Base64 encoding ⤶ This will encode your local File into a Base64 String. The String will start with the datatype like `data:image/jpeg;base64,` followed by a long chain of characters being the Base64 data. ``` --In HTML -- In HTML <img src="data:image/jpeg;base64,LzlqLzRBQ...<!-- base64 data -->"> --In CSS ⤶ -- In CSS url("data:image/jpeg;base64,LzlqLzRBQ...<!-- base64 data -->") ``` Websites like https://www.base64-image.de/ can encode the file for you⤶ ⤶ Websites like https://www.base64-image.de/ can encode the file for you.⤶ # Examples <example> <description>Creates a DHTML.</description> <code> local frame = vgui.Create( "DFrame" ) frame:SetSize( 300, 200 ) frame:SetTitle( "My new Derma frame" ) frame:SetVisible( true ) frame:SetDraggable( true ) frame:Center() --Fill the form with a html page local html = vgui.Create( "DHTML" , frame ) html:Dock( FILL ) html:SetHTML( [[ <input type='submit' onclick='console.log("RUNLUA:print(\"This is called in Lua context\")")' /> ]] ) ⤶ --Enable the webpage to call lua code⤶ ⤶ -- Enable the webpage to call lua code.⤶ html:SetAllowLua( true ) frame:MakePopup() </code> </example> <example> <description>Creates a DHTML and opens Google inside.</description> <code> local frame = vgui.Create("DFrame") frame:SetSize(ScrW() * 0.5, ScrH() * 0.5) frame:SetTitle("HTML Example!") local frame = vgui.Create( "DFrame" ) frame:SetSize( ScrW() * 0.5, ScrH() * 0.5 ) frame:SetTitle( "HTML Example!" ) frame:Center() frame:MakePopup() local html = vgui.Create("DHTML", frame) html:Dock(FILL) html:OpenURL("https://www.google.com/") local html = vgui.Create( "DHTML", frame ) html:Dock( FILL ) html:OpenURL( "https://www.google.com/" ) </code> <output> <image src="dhtmlexample1.png"/> </output> </example>⤶ ⤶ # Methods ⤶ * <page>Panel:OnCallback</page>⤶ * <page>Panel:GetScrollbars</page>⤶ * <page>Panel:SetHTML</page>⤶ * <page>Panel:OnBeginLoadingDocument</page>⤶ * <page>Panel:OnFinishLoadingDocument</page>⤶ * <page>Panel:OnDocumentReady</page>⤶ * <page>Panel:OnChildViewCreated</page>⤶ * <page>Panel:OnChangeTitle</page>⤶ * <page>Panel:OnChangeTargetURL</page></example>