Hallo zusammen,
Ich lege viel Wert auf eine schöne GUI jedoch erscheint mir GDI+ für einen Anfänger etwas zu kompliziert, daher habe ich mich auf die Suche gemacht, ob man eine GUI über HTML und CSS erstellen kann. Einige Ansätze habe ich bereits hier im Forum gefunden, jedoch gab es keine lauffähige Lösung...
Aus diesem Grund stelle ich euch hier meine Lösung vor. Diese basiert auf HTML und CSS3.
Über jeden Verbesserungsvorschlag freue ich mich sehr.
[autoit]
;*****************************************
;HMTL_GUI.au3 by rYnow
;Ein HTML - GUI Konzept
;~ Wie funktioniert das?
;~ Die GUI wird in HTML und in CSS3 erstellt. Das wichtigste ist der CSS Befehl ":activ". Durch diesen Befehl können wir mit "PixelGetColor" den Farbwert des activen
;~ Buttons erkennen.
;
;Zubeachten:
;~ Dieses Konzept funktioniert nur mit CSS3, daher ist IE ab Version 10 notwendig und in der HTML muss folgender MetaTag eingesetzt werden:
;~ <meta http-equiv="X-UA-Compatible" content="IE=9" />
;~ Zudem muss beachtet werden, dass der CSS ":activ" nicht den gleicheb Farbwert besitzt wie Background oder Hover.
;*****************************************
#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>
#include <GuiButton.au3>
#include <IE.au3>
HotKeySet("{ESC}", "Terminate")
func Terminate ()
MsgBox(0,"Ende","GUI wird beendet")
exit
EndFunc
Opt("PixelCoordMode", 2)
_IEErrorHandlerRegister()
$IE = _IECreateEmbedded()
$html_GUI = GUICreate("html GUI", 200, 300, -1, -1, BitOR($WS_SYSMENU, $WS_POPUP),-1)
$Browser = GUICtrlCreateObj($IE, -1, -1, 230, 310)
GUISetState(@SW_SHOW, $html_GUI)
_IENavigate($IE, @scriptdir & "HTMLGUI.html")
While 1
;Farbprüfung in der GUI
$button1 = PixelGetColor(50, 30)
$button2 = PixelGetColor(50, 90)
$button3 = PixelGetColor(50, 150)
$button4 = PixelGetColor(50, 210)
$button5 = PixelGetColor(50, 270)
if $button1 = 1786718 then
MsgBox(0,"Button","Button1 wurde gedrückt")
$button1 = 0
elseif $button2 = 1786718 then
MsgBox(0,"Button","Button2 wurde gedrückt")
$button2 = 0
elseif $button3 = 1786718 then
MsgBox(0,"Button","Button3 wurde gedrückt")
$button3 = 0
elseif $button4 = 1786718 then
MsgBox(0,"Button","Button4 wurde gedrückt")
$button4 = 0
elseif $button5 = 1786718 then
MsgBox(0,"Button","Button5 wurde gedrückt")
$button5 = 0
EndIf
WEnd
[/autoit][autoit][/autoit][autoit][/autoit]HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>AutoIt HTML GUI</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
</head>
<body>
<div class="wrapper">
<a href="#" class="button" style="top: 228px; left: 175px;">Button1</a>
<a href="#" class="button" style="top: 228px; left: 175px;">Button2</a>
<a href="#" class="button" style="top: 228px; left: 175px;">Button3</a>
<a href="#" class="button" style="top: 228px; left: 175px;">Button4</a>
<a href="#" class="button" style="top: 228px; left: 175px;">Button5</a>
</div>
</body>
</html>CSS
/*
Author: rYnow
Date: 29.06.2013
*/
* { margin:0px; padding:0px; width:200px;}
/* Buttons */
.wrapper {width:200px; height:300px; background-color:#000}
.button {
line-height:60px;
width:200px;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 20px 68px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 19px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #1872ad;
background: #1872ad;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e ;
}