[GUI] Use HTML and CSS for your GUIs!

jsong55 · 13 May 2021, 21:29

joedf wrote: ↑
13 May 2021, 08:22
Not familiar with WebPic ...
perhaps try inline style?
<img src=""" Website """ alt=""Picture"" style=""width:" W "px;height:" H "px; border-radius: 50%;"" />

Thank you for suggesting. Didn't work for me unfortunately

I'm using
Gui,1: Add, ActiveX, x700 y0 w120 h120 vWB, Mozilla.Browser ; also alternate with Shell.Explorer

13 May 2021, 23:09

I've never Mozilla.Browser in a gui before... Does Explorer not work?

jsong55 · 14 May 2021, 03:41

Not only does Explorer not work, it gives ugly scroll bars. Mozilla doesn't have

14 May 2021, 08:53

Could you post the full code for this? Perhaps is missing elsewhere? Otherwise, maybe as workaround... you could download the picture and then display it the traditional way.
Download a file: https://www.autohotkey.com/docs/commands/URLDownloadToFile.htm
Picture GUI control: https://www.autohotkey.com/docs/commands/GuiControls.htm#Picture

jsong55 · 14 May 2021, 21:16

joedf wrote: ↑
13 May 2021, 08:22
Not familiar with WebPic ...
perhaps try inline style?
<img src=""" Website """ alt=""Picture"" style=""width:" W "px;height:" H "px; border-radius: 50%;"" />

Code: Select all

#SingleInstance, Force
SendMode Input
SetWorkingDir, %A_ScriptDir%
#NoEnv
#MaxHotkeysPerInterval 99000000
#HotkeyInterval 99000000
#KeyHistory 0
#WinActivateForce
ListLines Off
Process, Priority, , A
SetBatchLines, -1
SetKeyDelay, -1, -1
SetMouseDelay, -1
SetDefaultMouseSpeed, 0
SetWinDelay, -1
SetControlDelay, -1
SendMode Input
;OPTIMIZATIONS END
#SingleInstance, force


images:={billgates:"https://media-exp1.licdn.com/dms/image/C5603AQHv9IK9Ts0dFA/profile-displayphoto-shrink_400_400/0/1517497547164?e=1626307200&v=beta&t=CQNiDC4ocBojbodc2L5uxDLU9nVZS6AYin5YWylPdmA",richardbranson:"https://lists.linkedin.com/content/dam/itlist/en-us/2015/top-voices/influencers/richard-branson/richard-branson-wide-desktop.jpg",mdelerian:"https://lists.linkedin.com/content/dam/itlist/en-us/2015/top-voices/influencers/mohamed-el-erian/mohamed-elerian-wide-desktop.jpg"}


for key,v in images
    list.=key "|"
Gui,Font,s14 BOLD Arial
Gui,Add,ActiveX,xm ym w200 h200 vWB, Mozilla.Browser
Gui,Add,ActiveX,x+10 w200 h200 vWB2, Shell.Explorer
Gui,add,ListBox,vname gselect xm y+30,% list
Gui,show,autosize
Return
Select:
Gui,Submit,NoHide
url:=images[name]
WebPic(WB, url, "w200 h200","css")
WebPic(WB2, url, "w200 h200","inline")
Return
;                                                          Functions             
;______________________________________________________________________________________________________________________________

WebPic(WB, Website, Options := "",Selected:="") {
	RegExMatch(Options, "i)w\K\d+", W), (W = "") ? W := 50 :
	RegExMatch(Options, "i)h\K\d+", H), (H = "") ? H := 50 :
	RegExMatch(Options, "i)c\K\d+", C), (C = "") ? C := "EEEEEE" :
	WB.Silent := True
HTML:={}
HTML.css :=
(RTRIM
"<!DOCTYPE html>
    <html>
        <head>
            <style>
                body {
                    background-color: #" C ";
                }
                img {
                    top: 0px;
                    left: 0px;
                    border-radius: 40`%;
                }
            </style>
        </head>
        <body>
            <img src=""" Website """ alt=""Picture"" style=""width:" W "px;height:" H "px;"" />
        </body>
    </html>"
)
HTML.inline :=
(RTRIM
"<!DOCTYPE html>
    <html>
        <head>
            <style>
                body {
                    background-color: #" C ";
                }
            </style>
        </head>
        <body>
            <img src=""" Website """ alt=""Picture"" style=""width:" W "px;height:" H "px; border-radius: 50`%; "" />
        </body>
    </html>"
)
	While (WB.Busy)
		Sleep 10
	html:=html[selected]
	WB.Navigate("about:" html)
	; Display(WB,HTML_Page)
	WB.document.body.style.setAttribute("margin", 0) ; remove borders (maybe)
	; WB.document.body.style.setAttribute("style", "border-radius: 50%;") ; remove borders (maybe)
	Return html
}

17 May 2021, 10:22

Interesting... I'm not entirely sure what the issue is, but you can save it to an html file and you'll that the border-radius does work in your browser... perhaps save it as a file and update the WB control to navigate to that file?

kczx3 · 17 May 2021, 12:19

Are you sure that the browser being used isn't IE? I've never tried using Firefox in a GUI using Mozilla.Browser but border-radius won't work in IE unless you specify the meta tag to force IE=9 or later.

17 May 2021, 18:54

@kczx3 good catch! I totally missed the metatags. You're probably right!

jsong55 · 20 May 2021, 05:30

kczx3 wrote: ↑
17 May 2021, 12:19
Are you sure that the browser being used isn't IE? I've never tried using Firefox in a GUI using Mozilla.Browser but border-radius won't work in IE unless you specify the meta tag to force IE=9 or later.

Wow thank you! It actually works!

[GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Re: [GUI] Use HTML and CSS for your GUIs!

Who is online