IE is a Window by it self and the Gui can be anything.
With the power of HTML Tag Objects, CSS, JavaScript, etc., IE becomes a great Gui platform for creation.
All you need is to create the IE Gui and add Tag Objects.(see IEfunc.ahk)
Using HTML Tag Objects, IE creates the HTML code for you.(press F12)
Here are some Button examples you can play with.
Code: Select all
#include IEfunc.ahk
#include IEimagedata.ahk
Button_OnMouseOver(*){
Quit_OnClick
}
Quit_OnClick(*){
iea.Quit
ExitApp
}
Slider_OnClick(*){
MsgBox "Clicked SLIDER Button","Slider Button Test","Iconi t2"
}
Arrow_OnClick(*){
MsgBox "Clicked ARROW Button","Slider Button Test","Iconi t2"
}
; Setup IE Gui
IE_Gui("Button Test")
body.background := steel
; Change IE Gui Window Icon
SendMessage 128,0,LoadPicture("crapper.ico",,itype),hWnd
; Add 5 Round Buttons to IE Gui
loop 5{
button := Set_Element("button",body,"Button`n" A_Index,5,10,55,55)
if(A_Index = 5){
button.style.left := 80
button.textContent := "Over EXIT"
ComObjConnect(button,"Button_")
}else{
button.setAttribute("onclick","id=1")
button.setAttribute("onmouseover","style.color='red';style.boxShadow='none'")
button.setAttribute("onmouseout","style.color='yellow';style.boxShadow='1px 1px 30px white'")
}
button.style.position := "relative"
button.style.font := "bold 12 arial"
button.style.color := "yellow"
button.style.cursor := "pointer"
button.style.background := "navy"
button.style.borderstyle := "none"
button.style.boxShadow := "1px 1px 30px white"
button.style.borderRadius := "35px"
button.style.float := "left"
button.style.transition := "all .2s linear"
}
; Button For Animation
beam := Set_Element("button",body,"Beam Me Up!",25,125,200,55)
beam.setAttribute("onmouseover","style.color='yellow';style.boxShadow='none'")
beam.setAttribute("onmouseout","style.color='cyan';style.boxShadow='5px 5px 20px white'")
beam.style.textdecoration := "underline"
beam.style.backgroundimage := "-ms-linear-gradient(left,blue,red)"
beam.style.font := "bold 24 times new roman"
beam.style.color := "cyan"
beam.style.cursor := "pointer"
beam.style.borderstyle := "none"
beam.style.borderradius := "40px"
beam.style.boxshadow := "5px 5px 20px white"
beam.style.transition := "all .2s linear"
ComObjConnect(beam,"Quit_")
; Animation Image for beam Button
img := Set_Element("img",beam)
img.src := badge
img.style.float := "left"
; Another Style of Button
quit := Set_Element("button",body,"I Quit!",260,135,100,40)
quit.setAttribute("onmouseover","style.color='yellow';style.boxShadow='1px 1px 30px white';style.border='3px solid red'")
quit.setAttribute("onmouseout","style.color='red';style.boxShadow='none';style.border='3px solid yellow'")
quit.style.textdecoration := "underline"
quit.style.font := "bold 18 arial"
quit.style.color := "red"
quit.style.cursor := "pointer"
quit.style.background := "blue"
quit.style.border := "3px solid yellow"
quit.style.borderradius := "10px"
ComObjConnect(quit,"Quit_")
; Main Slider Button
but1 := Set_Element("button",body,"Slider Button",50,220,150,40)
but1.setAttribute("onmouseover","id='1'")
but1.setAttribute("onmouseout","id='0'")
but1.style.background := "-ms-linear-gradient(top,white 1%,navy)"
but1.style.border := "1px solid black"
but1.style.color := "yellow"
but1.style.cursor := "pointer"
but1.style.font := "bold 18 arial"
but1.style.borderRadius := "20px 0 0 20px"
but1.style.zIndex := "1"
but1.style.transition := "all 0.3s linear"
ComObjConnect(but1,"Slider_")
; Right Arrow Slider Button
but2 := Set_Element("button",body,,200,220,50,40)
but2.setAttribute("onmouseover","id='1'")
but2.setAttribute("onmouseout","id='0'")
but2.style.background := "-ms-linear-gradient(top,white 1%,navy)"
but2.style.border := "1px solid black"
but2.style.cursor := "pointer"
but2.style.borderRadius := "0 20px 20px 0"
but2.style.zIndex := "1"
but2.style.transition := "all 0.3s linear"
ComObjConnect(but2,"Arrow_")
; Right Arrow Image Slider Button
img := Set_Element("image",but2,,14,7)
img.src := rarrow
; Exit Button On Mouse Over Slider Button
but := Set_Element("button",body,"Exit Button",65,222,150,35)
but.setAttribute("onmouseover","id='1'")
but.setAttribute("onmouseout","id='0'")
but.style.background := "lightblue"
but.style.border := "0"
but.style.color := "black"
but.style.cursor := "pointer"
but.style.font := "bold 14 arial"
but.style.visibility := "hidden"
but.style.transition := "all 0.3s linear"
ComObjConnect(but,"Quit_")
; Button Arrays
iClick := doc.getElementsByTagName("button")
OverMe := iClick
; Show IE Gui
iea.Visible := true
; IE Gui Message Loop
while(true){
loop 5{
if(iClick[A_Index-1].id = 1){
MsgBox "Button " A_Index " Clicked","Round Buttons","Iconi t2"
iClick[A_Index-1].id := 0
break
}
}
If(OverMe[7].id = 1 Or OverMe[8].id = 1 Or OverMe[9].id = 1){
OverMe[7].style.color := "black"
OverMe[7].style.boxShadow := "2px 2px 35px white"
OverMe[8].style.boxShadow := "2px 2px 35px white"
OverMe[8].style.left := "295"
OverMe[9].style.left := "175"
OverMe[9].style.visibility := "visible"
}Else{
OverMe[7].style.color := "yellow"
OverMe[7].style.boxShadow := "none"
OverMe[8].style.boxShadow := "none"
OverMe[8].style.left := "195"
OverMe[9].style.left := "65"
OverMe[9].style.visibility := "hidden"
}
Sleep 10
}
Esc::
Quit_OnClick
I like the Japanese fonts for the falling letters, so you can
install them, or change the font name(in javascript) to what you like.
Code: Select all
#include iefunc.ahk
; Setup IE Gui
IE_Gui("Canvas Matrix")
iea.fullscreen := True
body.bgColor := "black"
; Add canvas object to IE Gui
canvas := Set_Element("canvas",body)
canvas.width := win.screen.width
canvas.height := win.screen.height
; Setup JavaScript code for the Matrix
jsCode := "
(
var drops=[],fontSize=24,columns=parseInt(screen.width/fontSize);
for(var I=0;I<columns;I++){drops[I]=1;}
var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.font = fontSize+'px japanese';
function Matrix(){
ctx.fillStyle = 'rgba(0,0,0,0.05)';
ctx.fillRect(0,0,screen.width,screen.height);
ctx.fillStyle = '#0f0';
for(var I=0;I<columns;I++){
ctx.fillText(String.fromCharCode(Math.floor(Math.random()*(127-33)+33)),parseInt(I*fontSize),parseInt(drops[I]*fontSize));
if(parseInt(drops[I]*fontSize)>screen.height&&Math.random()>0.975){drops[I]=0;}
drops[I]+=1;}}
setInterval(function(){Matrix();},80);
)"
; Add JavaScript Code to IE Gui
Set_Element("script",body,jsCode)
; Show IE Gui Matrix
iea.Visible := True
Esc::
iea.Quit
ExitApp
Code: Select all
#include ieFunc.ahk
; create array for tab display
tabs := ["AutoHotkey is a free, open-source scripting language for Windows."
,"AutoHotkey has easy to learn built-in commands for beginners."
,"AutoHotkey gives you the freedom to automate any desktop task."
,"AutoHotkey provides a simple, flexible syntax allowing you to focus more on the task at hand rather than every single little technicality."]
iSize := tabs.length
topr := 30
; Setup IE Gui
IE_Gui("Fun Tabs",700,300)
body.bgColor := "lightblue"
; Change IE Gui Window Icon
SendMessage 128,0,LoadPicture("c:\MyDocs\Images\crapper.ico",,itype),hWnd
; Add list object to IE Gui
ul := Set_Element("ul",body)
ul.style.listStyle := "none"
; Add list items to list object and IE Gui
loop iSize{
li := Set_Element("li",ul,"Tab " A_Index,topr,20,90,40)
li.setAttribute("onclick","id='1'")
li.setAttribute("onmouseover","style.boxShadow='0px 0px 30px cyan'")
li.setAttribute("onmouseout","style.boxShadow='0px 0px 30px black'")
li.style.font := "bold 18 Arial"
li.style.background := "lightgray"
li.style.borderRadius := "10px 30px 0px 0px"
li.style.boxShadow := "0px 0px 30px black"
li.style.lineHeight := "40px"
li.style.textAlign := "center"
li.style.textShadow := "2px 2px 4px gray"
li.style.cursor := "pointer"
li.style.color := "blue"
div := Set_Element("div",body,tabs[A_Index],25,58,500,130)
div.style.font := "bold 18 Arial"
div.style.background := "lightblue"
div.style.borderRadius := "10px"
div.style.boxShadow := "0px 0px 10px black"
div.style.visibility := "hidden"
div.style.textalign := "center"
div.style.lineHeight := "35px"
div.style.zIndex := 1
topr += 80
}
; Object Arrays
li := doc.getElementsByTagName("li")
div := doc.getElementsByTagName("div")
li[0].style.background := "yellow"
li[0].style.zIndex := 1
li[0].style.textShadow := "2px 2px 4px cyan"
div[0].style.visibility := "visible"
; Show IE Gui
iea.Visible := true
; IE Gui Message Loop
While(true){
loop iSize{
if(li[A_Index-1].id = 1){
loop iSize{
li[A_Index-1].style.background := "lightgray"
li[A_Index-1].style.textShadow := "2px 2px 4px gray"
li[A_Index-1].style.zIndex := 0
div[A_Index-1].style.visibility := "hidden"
}
li[A_Index-1].style.background := "yellow"
li[A_Index-1].style.textShadow := "2px 2px 4px cyan"
li[A_Index-1].style.zIndex := 1
div[A_Index-1].style.visibility := "visible"
li[A_Index-1].id := 0
}
}
Sleep 10
}
Esc::
iea.Quit
ExitApp
