Спасибо всем кто помог разобраться с интеграцией html/css в ahk!
Прилагаю результат работы данной темы, может кому-то пригодится, будет легче с наглядным примером и поможет разобраться:
- замена текста, вызов кнопок, обработка форм, условия для старта, ограничения на ввод
- кнопки, формы, меню - меняют внешний вид при взаимодействии с пользователем
- вместо msgbox, новое окно в стилистике, пример ф-кция "OnErr()"
Экземпляр:
- на ctrl+5 выбираем активное окно меняя форму, заблокирована для действий с мышкой
- ввод числа с ограничением
- ctrl+1, замена текста на кнопку
- ctrl+2-4, замена текста на переменную, в данном случае на координаты мышки
- кнопка старт только после заполнения форм и областей, иначе покажет msgbox
- меню "Египетский" вызывает окно. Для примера, если вызвать после старта, покажет счетчик цикла и затраченное время на выполнение
#NoEnv
#include ForumFunction.ahk
CoordMode, mouse
SetWorkingDir %A_ScriptDir%
global Counts := ""
global ElapsedTime := ""
global ElapsedTime2 := ""
global ElapsedTime3 := ""
global ElapsedTime4 := ""
gamewin =
posX1 := ""
posX2 := ""
posX3 := ""
Gui, Parent: New, ,Example Custom Gui
Gui, Parent: -DPIScale
Gui, Parent: Margin, 0, 0
Gui, Parent: Add, ActiveX, w1080 h854 vWB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)
WB.document.getElementById("myImage").src := StrReplace(A_ScriptDir . "\images\bg.png", "\", "/")
WB.document.getElementById("start").addEventListener("mouseup", Func("OnStart"))
WB.document.getElementById("bu1").addEventListener("mouseup", Func("OnBu1"))
WB.document.getElementById("bu2").addEventListener("mouseup", Func("OnBu1"))
WB.document.getElementById("te1").addEventListener("mouseup", Func("OnEgypt"))
Gui, Parent: Show
Return
OnStart() {
global WB
global posX1
global posY1
global posX2
global posY2
global posX3
global posY3
global gamewin
CountEnc := WB.document.getElementById("fc2").value
if (CountEnc == "" || CountEnc > 25
|| gamewin == "" || posX1 == "" || posX2 == "" || posX3 == "")
{
OnErr()
}
else if (RegExMatch(CountEnc, "[^0-9]"))
{
OnErr()
}
else
{
Game(CountEnc, posX1, posY1, posX2, posY2, posX3, posY3)
}
return
}
Game(CountEnc, posX1, posY1, posX2, posY2, posX3, posY3)
{
global gamewin
global Time := A_TickCount
IfWinExist, %gamewin%
{
WinMinimize, Example Custom Gui
WinActivate, %gamewin%
}
else
ExitApp
loop, 100
{
Counts +=1
Tooltip, %Counts%
sleep, 25
}
ElapsedTime := A_TickCount - Time
ElapsedTime2 := Floor(ElapsedTime / 1000) ; sec
ElapsedTime3 := Floor(ElapsedTime2 / 60) ; min
ElapsedTime4 := ElapsedTime2 - (ElapsedTime3 * 60)
Gui, Parent: Restore
Gui, Parent: +AlwaysOnTop
Gui, Parent: -AlwaysOnTop
return
}
^1::
Reelect := "<button type='submit' id='bb1' class='btn reboot'>КНОПКА</button>"
WB.document.getElementById("co1-1").innerHTML := Reelect
WB.document.getElementById("bb1").addEventListener("mouseup", Func("OnErr"))
return
^2::
MouseGetPos, posX1, posY1
WB.document.getElementById("co2-2").innerText := posX1 . " , " . posY1
return
^3::
MouseGetPos, posX2, posY2
WB.document.getElementById("co3-3").innerText := posX2 . " , " . posY2
return
^4::
MouseGetPos, posX3, posY3
WB.document.getElementById("co4-4").innerText := posX3 . " , " . posY3
return
^5::
CurPID := DllCall("GetCurrentProcessId")
WinGet, gamewin1, PID, A
if (gamewin1 = CurPID)
{
OnErr()
}
else
{
WinGetTitle, gamewin, A
WB.document.getElementById("fc1").placeholder := gamewin
}
return
GuiClose:
ExitApp
F12::ExitApp
Подключить ForumFunction.ahk:
html =
(
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
margin: 0px;
background-color: #afafaf;
}
.bgded
{
background-color: #9d9d9d;
background-size: auto;
background-repeat: no-repeat;
}
.menu
{
position: absolute;
margin: 0px;
padding: 0px;
width: 100`%;
}
#te1
{
display: block;
color: #FFFFFF;
position: absolute;
left: 470px;
top: 48.71px;
}
#te4
{
color: #FFFFFF;
position: absolute;
left: 170px;
top: 222.71px;
}
#te5
{
color: #FFFFFF;
position: absolute;
left: 800px;
top: 222.71px;
}
h1
{
font-family: Raleway;
font-weight: 600;
font-size: 27px;
margin: 0px;
outline: none;
padding: none;
}
h1:hover
{
text-shadow:0 5px 25px black;
cursor: default;
}
#fh5co
{
}
.form-control
{
position: absolute;
text-align: center;
outline: none;
}
#fc1
{
height: 50px;
width: 222.1px;
left: 123.99px;
top: 271px;
cursor: default;
}
#fc2
{
height: 50px;
width: 90px;
left: 800px;
top: 273px;
}
input
{
font-family: Raleway;
font-weight: 500;
font-size: 24px;
color: #FFFFFF;
background: transparent;
border: 1px solid #FFFFFF;
border-radius: 5px;
margin: 0;
overflow: visible
outline: none;
}
.form-control:hover
{
border-color: #f87d01;
color: #f87d01;
}
.form-control:focus
{
border-color: #f87d01;
color: #f87d01;
}
.form-group
{
position: absolute;
margin: 0px;
padding: 0px;
width: 100`%;
}
::placeholder
{
color: #FFFFFF;
}
:hover::-webkit-input-placeholder {color: #f87d01}
:hover::-moz-placeholder {color: #f87d01}
:hover:-moz-placeholder {color: #f87d01}
:hover:-ms-input-placeholder {color: #f87d01}
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
.button1
{
position: absolute;
top: 452px;
left: 50px;
}
.btn {
display: inline-block;
color: transparent;
background-color: transparent;
text-align: center;
font-size: 18px;
border-radius: 5px;
width: 150px;
height: 55px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
outline: none;
padding: none;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.bu1
{
background-color: #061e37;
color: #FFFFFF;
font-family: Roboto;
font-weight: normal;
}
.bu2
{
background-color: #FFFFFF;
color: #061e37;
font-family: Raleway;
font-weight: bold;
position: absolute;
left: 830px;
}
.reboot
{
color: #FFFFFF;
font-family: Raleway;
font-weight: bold;
width: 189.27px;
height: 41.43px;
font-size: 20.85px;
border-color: #FFFFFF;
position: relative;
margin-top: -10px;
}
.start
{
color: #237976;
font-family: Raleway;
font-weight: bold;
position: absolute;
left: 466px;
top: 748px;
font-size: 20.85px;
border-color: #237976;
}
.start:hover
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
.start:active
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
.bu1:hover
{
color: #f87d01;
background-color: #061e37;
border-color: #046bff;
}
.bu1:active
{
color: #f87d01;
background-color: #061e37;
border-color: #046bff;
}
.bu2:hover
{
color: #f87d01;
background-color: #FFFFFF;
border-color: #f87d01;
}
.bu2:active
{
color: #f87d01;
background-color: #FFFFFF;
border-color: #f87d01;
}
.reboot:hover
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
.reboot:active
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
h2
{
font-family: Raleway;
font-weight: 600;
font-size: 24px;
outline: none;
padding: none;
margin: 0px;
}
.counts
{
}
.c1
{
position: absolute;
width: 270.03px;
height: 101.25px;
top: 595.84px;
left: 0px;
background-color: #80d8ff;
}
#co1
{
position: relative;
color: #000;
text-align: center;
margin: 15px;
padding: 0px;
border: 0px;
}
#co1-1
{
position: relative;
color: #FFFFFF;
font-weight: 700;
font-size: 30px;
text-align: center;
margin-top: -10px;
}
.c2
{
position: absolute;
width: 270.03px;
height: 101.25px;
top: 595.84px;
left: 270.03px;
background-color: #82b1ff;
}
#co2
{
position: relative;
color: #000;
text-align: center;
margin: 15px;
padding: 0px;
border: 0px;
}
#co2-2
{
position: relative;
color: #FFFFFF;
font-weight: 700;
font-size: 30px;
text-align: center;
margin-top: -10px;
}
.c3
{
position: absolute;
width: 270.03px;
height: 101.25px;
top: 595.84px;
left: 540.06px;
background-color: #b388ff;
}
#co3-3
{
position: relative;
color: #FFFFFF;
font-weight: 700;
font-size: 30px;
text-align: center;
margin-top: -10px;
}
.c4
{
position: absolute;
width: 270.03px;
height: 101.25px;
top: 595.84px;
left: 810.09px;
background-color: #ea80fc;
}
#co4-4
{
position: relative;
color: #FFFFFF;
font-weight: 700;
font-size: 30px;
text-align: center;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="bgded" id="bgimg">
<div class="menu">
<img id="myImage">
<h1 id="te1">Египетский</h1>
<h1 id="te4">Окно ctrl+5</h1>
<h1 id="te5">Число</h1>
</div>
<form id="fh5co">
<div class="form-group">
<input type="text" form="fh5co" class="form-control" id="fc1" placeholder="Example" disabled>
<input type="text" form="fh5co" class="form-control" id="fc2" placeholder="10" autocomplete="off" max="25" min="4" maxlength="2">
</div>
<button type="submit" class="btn start" id="start">СТАРТ</button>
</form>
<div class="button1">
<button type="button" class="btn bu1" id="bu1">BUTTON</button>
<button type="button" class="btn bu2" id="bu2">BUTTON</button>
</div>
<div class="counts">
<div class="c1">
<h2 id="co1">Выбрать кнопку:</h2>
<h2 id="co1-1">ctrl + 1</h2>
</div>
<div class="c2">
<h2 id="co2">Выбрать область 2:</h2>
<h2 id="co2-2">ctrl + 2</h2>
</div>
<div class="c3">
<h2 id="co2">Выбрать область 3:</h2>
<h2 id="co3-3">ctrl + 3</h2>
</div>
<div class="c4">
<h2 id="co2">Выбрать область 4:</h2>
<h2 id="co4-4">ctrl + 4</h2>
</div>
</div>
</div>
</body>
</html>
)
OnEgypt() {
global WBEgypt
html =
(
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
display: inline-block;
color: transparent;
background-color: transparent;
text-align: center;
font-size: 18px;
border-radius: 5px;
width: 150px;
height: 55px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
outline: none;
padding: none;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.Confirm
{
display: block;
color: #237976;
font-family: Raleway;
font-weight: bold;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10`%;
font-size: 20.85px;
border-color: #237976;
}
.Confirm:hover
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
.Confirm:active
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
h1
{
font-family: Raleway;
font-weight: 600;
font-size: 27px;
margin: 25px;
outline: none;
padding: none;
}
.sText
{
text-align: left;
}
body
{
text-align: center;
}
html
{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<h1>Египетский</h1>
<div class="sText">
<h1 id="st"></h1>
</div>
<button type="button" id="ex" class="btn Confirm">OK</button>
</body>
</html>
)
Gui, Egypt: New, , Египетский
Gui, Egypt: Margin, 0, 0
Gui, Egypt: Add, ActiveX, w500 h300 vWBEgypt, about:<meta http-equiv="X-UA-Compatible" content="IE=edge">
WBEgypt.document.write(html)
WBEgypt.document.getElementById("ex").addEventListener("mouseup", Func("OnClose"))
WBEgypt.document.getElementById("st").innerHTML := ("Счетчик: " . Counts " <br> Время: " . ElapsedTime3 . " min, " . ElapsedTime4 . " sec")
Gui, Egypt: Show
return
EgyptGuiClose:
Gui, Destroy
return
}
OnErr() {
global WBErr
html =
(
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
display: inline-block;
color: transparent;
background-color: transparent;
text-align: center;
font-size: 18px;
border-radius: 5px;
width: 150px;
height: 55px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
outline: none;
padding: none;
top: 50px;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.Confirm
{
display: block;
color: #237976;
font-family: Raleway;
font-weight: bold;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10`%;
font-size: 20.85px;
border-color: #237976;
}
.Confirm:hover
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
.Confirm:active
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
h1
{
font-family: Raleway;
font-weight: 600;
font-size: 27px;
margin: 25px;
outline: none;
padding: none;
text-align: center;
}
.sText
{
text-align: left;
}
body
{
text-align: center;
}
html
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Ошибка</h1>
<div class="sText">
<h1 id="li"></h1>
<h1>
Ошибка</h1>
</div>
<button type="button" id="ex" class="btn Confirm">OK</button>
</body>
</html>
)
Gui, Err: New, , Ошибка
Gui, Err: Margin, 0, 0
Gui, Err: Add, ActiveX, w300 h300 vWBErr, about:<meta http-equiv="X-UA-Compatible" content="IE=edge">
WBErr.document.write(html)
WBErr.document.getElementById("ex").addEventListener("mouseup", Func("OnClose"))
Gui, Err: Show
return
ErrGuiClose:
Gui, Destroy
return
}
OnBu1() {
global WBBu1
html =
(
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
display: inline-block;
color: transparent;
background-color: transparent;
text-align: center;
font-size: 18px;
border-radius: 5px;
width: 150px;
height: 55px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15);
outline: none;
padding: none;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.Confirm
{
display: block;
color: #237976;
font-family: Raleway;
font-weight: bold;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10`%;
font-size: 20.85px;
border-color: #237976;
}
.Confirm:hover
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
.Confirm:active
{
color: #FFFFFF;
background-color: #237976;
border-color: transparent;
}
h1
{
font-family: Raleway;
font-weight: 600;
font-size: 27px;
margin: 25px;
outline: none;
padding: none;
text-align: center;
}
.sText
{
text-align: left;
}
body
{
text-align: center;
}
html
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>BUTTON</h1>
<div class="sText">
<h1 id="li">BUTTONS</h1>
</div>
<button type="button" id="ex" class="btn Confirm">OK</button>
</body>
</html>
)
Gui, Bu1: New, , Button
Gui, Bu1: Margin, 0, 0
Gui, Bu1: Add, ActiveX, w300 h300 vWBBu1, about:<meta http-equiv="X-UA-Compatible" content="IE=edge">
WBBu1.document.write(html)
WBBu1.document.getElementById("ex").addEventListener("mouseup", Func("OnClose"))
Gui, Bu1: Show
return
Bu1GuiClose:
Gui, Destroy
return
}
OnButton() {
MsgBox, Hi
return
}
OnReelect() {
Msgbox, hi
return
}
OnClose() {
Gui Err: Destroy
Gui Bu1: Destroy
Gui Egypt: Destroy
return
}
Картинку залить в папку images.
Post's attachmentsBG.png 877.29 kb, 3 downloads since 2020-11-06
You don't have the permssions to download the attachments of this post.
GD