1 (изменено: Botsy, 2020-10-30 19:09:43)

Тема: AHK: Кастомный GUI

Решил попробовать изменить стандартный дизайн GUI. Как я понял, в таком случае все активные элементы делаются через "Picture", а не через "button, edit и т.д."
Как сделать обработчик, например для кнопки ?


Gui, Header: +LastFound +HWNDhHeader
Gui, Header: Margin, 0, 0
Gui, Header: Color, FFFFFF
Gui, Header: Add, Picture, x0 y0, images\BG.png
Gui, Header: Add, Picture, x50 y490 +BackgroundTrans, images\RectangleBlue.png
Gui, Header: Add, Picture, x50 y490 Hidden1 +BackgroundTrans, images\RectangleBlueOn.png

Gui, Header: Show, w%HeaderWidth% h%HeaderHeight%, Test GUI

Типо есть кнопка "RectangleBlue.png", когда наводим на нее мышкой, элемент должен измениться (стать активным).
https://i.ibb.co/sK937fc/send.jpg
https://i.ibb.co/fS2Dmfb/sendOn.jpg

UPD:
Обработчик события MouseMove и обработчик MouseClick - есть. Мб кто знает, как реализовать обработчик ввода от пользователя ?

https://i.ibb.co/X2zr3fD/NumForm.jpg

GD

2

Re: AHK: Кастомный GUI

Ввода чего и куда? В картинку?

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

3 (изменено: Botsy, 2020-10-28 18:09:49)

Re: AHK: Кастомный GUI

teadrinker Дизайн стандартной кнопки изменить получилось же, мб и дизайн стандартного поля ввода тоже изменить можно ? Тот же "Edit", изменить его внешний вид поля, как на примере выше.

GD

4

Re: AHK: Кастомный GUI

А причём тут дизайн? Вы не изменили дизайн кнопки, вы просто использовали картинку вместо неё. Изменить внешний вид поля Edit как-то можно, закруглить края вряд ли получится. Для более или менее свободного дизайна я бы использовал ActiveX контрол WebBrowser, но нужно знание html/css. Пример:

html =
(
<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
         margin: 0;
         padding: 0;
      }
      html {
         background: #2a69a6;
      }
      input {
         width: 295px;
         height: 26px;
         margin:  10px 0 0 10px;
         padding: 5px;
         border: 1px;
         border-radius: 7px;
         font: 24px "Calibri";
         background-color: #ffccb4;
         color: #2a69a6;
      }
      button {
         margin: 10px 0 0 195px;
         width: 120px;
         height: 30px;
         background: linear-gradient(to left, #5af, #80c0ff);
         border: 2px solid white;
         border-radius: 5px;
         color: white;
         transition: .3s;
         cursor: pointer;
      }
      button:hover {
         background: linear-gradient(to right, #5af, #80c0ff);
      }
      .clicked {
         margin-top: 12px;
      }
    </style>
  </head>
  <body>
    <input type="text">
    <div>
       <button onmousedown="document.querySelector('button').classList.add('clicked')"
               onmouseup="setTimeout(function() { document.querySelector('button').classList.remove('clicked') }, 50)">OK</button>
    </div>
  </body>
</html>
)

Gui, -DPIScale
Gui, Margin, 0, 0
Gui, Add, ActiveX, w325 h150 vWB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
WB.document.write(html)
WB.document.querySelector("button").addEventListener("mouseup", Func("OnButton"))
Gui, Show
WB.document.querySelector("input").focus()
Return

OnButton() {
   global WB
   MsgBox, % "Вы ввели: " . WB.document.querySelector("input").value
}

GuiClose:
   ExitApp
Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

5 (изменено: Botsy, 2020-10-28 20:06:39)

Re: AHK: Кастомный GUI

teadrinker с разметкой знаком, а вот с интегрированием этого в среду ahk - нет, почитаю информацию. Там где есть html и css, есть и js. Js тоже можно интегрировать в ahk ? тогда прям прикольные анимации можно будет добавить.

GD

6

Re: AHK: Кастомный GUI

Можно (если знакомы с разметкой, должны знать, как из document получить js-объект), но для изменения элементов вряд ли понадобится. Менять стили можно и в контексте AHK-кода.

elem := WB.document.querySelector("input")
elem.style.background := "white"
Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

7

Re: AHK: Кастомный GUI

teadrinker Сложно. Пока попробую обойтись обычным html+css.

GD

8

Re: AHK: Кастомный GUI

Что именно сложно?

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

9

Re: AHK: Кастомный GUI

teadrinker пишет:

Что именно сложно?

Сложно интегрировать html в ahk. Тут вообще запутался, вперемешку интерфейс и ahk. 


Gui, Add, ActiveX, w325 h150 vWB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
WB.document.write(html)
WB.document.querySelector("button").addEventListener("mouseup", Func("OnButton"))
Gui, Show
WB.document.querySelector("input").focus()
Return

OnButton() {
   global WB
   MsgBox, % "Вы ввели: " . WB.document.querySelector("input").value
}

Буду решать задачу постепенно. Сначала сверстаю все отдельно, в веб странице типо xxx.html, а потом уже начну переносить в ahk, ибо сейчас перенасыщение какое-то и в голове каша из-за этого.

GD

10

Re: AHK: Кастомный GUI

Можете поиграться с этим:
https://www.autohotkey.com/boards/viewt … mp;t=76865

11

Re: AHK: Кастомный GUI

Malcev Отличная вещь для обучения + наглядный пример, нашел еще это https://www.autohotkey.com/boards/viewtopic.php?t=4588. Спасибо.

GD

12

Re: AHK: Кастомный GUI

Сверстал страничку. Вставляю html + css в ahk. Рассматриваю два способа, Neutron от Malcev и способ от teadrinker.
Вопрос 1. В вебе фон(бэк) работает, а в ahk нет. Почему ?


css =
(
.bgded
{
	background-image:url(images/bg.png);	
	background-size: auto;
	background-repeat: no-repeat;
	height: 1080px;
	width: 1080px;
}
)

html = 
(
<!DOCTYPE html>
<html>
 <head>
  <style>
	html, body
	{
	margin: 0px;
	}
  </style>
 </head>
<body>
<div class="bgded"> 
</div>
</body>
</html>
)

https://i.ibb.co/tK1dbm5/send.jpg

Вопрос 2. Похоже ahk ругается, когда используешь "проценты %" в переменной html, css. Если убираю значение в процентах, все запускается. Как сделать, что бы и с процентами запускалось ?
Пример, не запускается:


В html:
<input type="text" class="form-control" id="fc2" placeholder="88%" autocomplete="off">
или в css:
.menu
{
	position: absolute;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

Error: This parametr contains a variable name missing its ending persent sign.

Пример, запускается:


В html:
<input type="text" class="form-control" id="fc2" placeholder="88" autocomplete="off">
или в css:
.menu
{
	position: absolute;
	margin: 0px;
	padding: 0px;
	width: 100px;
}

Как только убираем знак процентов, все работает в ahk.

Вопрос 3. Когда вставляю html и css код в переменную, ahk ругается что переменная слишком длинная. Как это решить, с учетом что html и css код 500+ строк.
Error: Variable name too long.

Первый раз буду верстать в ahk, будут всякие вопросы, помогите пж))).

GD

13

Re: AHK: Кастомный GUI

Текстовая переменная в AHK может быть максимум примерно 13000 символов, если больше — составьте одну из двух более коротких.
Проценты в данном случае нужно эскейпить знаком акцента `%.
По первому вопросу непонятно, приведите пример, который демонстрирует проблему.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

14

Re: AHK: Кастомный GUI

teadrinker Переменные исправил оператором ".=", проценты тоже исправил - ошибки пропали.

 
html = test
html .= tt

По поводу фона: устанавливаю background изображение "bg.png". В браузере все отображается, проблем нет. А в ahk не работает.
https://i.ibb.co/Cv42b83/sendOn.jpg

GD

15

Re: AHK: Кастомный GUI

Наверно неправильно устанавливаете. Так как кода не вижу, сказать ничего не могу.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

16

Re: AHK: Кастомный GUI

teadrinker


html = 
(
<!DOCTYPE html>
<html>
 <head>
  <style>
	html, body
	{
	margin: 0px;
	}
	.bgded
	{
	background-image:url(images/bg.png);	
	background-size: auto;
	background-repeat: no-repeat;
	height: 1080px;
	width: 1080px;
	}
  </style>
 </head>
<body>
<div class="bgded"> 
</div>
</body>
</html>
)

Gui, -DPIScale
Gui, Margin, 0, 0
Gui, Add, ActiveX, w1080 h1080 vWB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
WB.document.write(html)
WB.document.querySelector("button").addEventListener("mouseup", Func("OnButton"))
Gui, Show
WB.document.querySelector("input").focus()
Return

OnButton() {
   global WB
   MsgBox, % "Вы ввели: " . WB.document.querySelector("input").value
}

GuiClose:
   ExitApp

Это из вашего примера.

GD

17

Re: AHK: Кастомный GUI

У меня выходит только если указать полный путь с прямыми слешами /

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

18

Re: AHK: Кастомный GUI

Если нужно относительный путь, можно так:

SetWorkingDir % A_ScriptDir
html = 
(
<!DOCTYPE html>
<html>
 <head>
  <style>
   html, body
   {
   margin: 0px;
   }
   .bgded
   {
   background-size: auto;
   background-repeat: no-repeat;
   height: 1080px;
   width: 1080px;
   }
  </style>
 </head>
<body>
<div class="bgded"> 
</div>
</body>
</html>
)

Gui, -DPIScale
Gui, Margin, 0, 0
Gui, Add, ActiveX, w1080 h1080 vWB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
WB.document.write(html)
Loop, Files, images/bg.png, F
   filePath := A_LoopFileLongPath
WB.document.querySelector(".bgded").style.backgroundImage := "url(" . StrReplace(filePath, "\", "/") . ")"
Gui, Show
Return

GuiClose:
   ExitApp
Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

19

Re: AHK: Кастомный GUI

teadrinker пишет:

может быть максимум примерно 13000 символов

Нашёл точное число:

A continuation section cannot produce a line whose total length is greater than 16,383 characters (if it tries, the program will alert you the moment the script is launched).

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

20

Re: AHK: Кастомный GUI

teadrinker пишет:

Если нужно относительный путь, можно так:

почему-то не работает.

А как можно сделать, чтобы после нажатия "ctrl + 2", вместо этого же текста, выводились координаты ?


#NoEnv
SetWorkingDir % A_ScriptDir

html =
(
<!DOCTYPE html>
<html>
   <head>
      <style>
         html, body
         {
         margin: 0px;
         }
         .bgded
         {
         background-size: auto;
         background-repeat: no-repeat;
         height: 1080px;
         width: 1080px;
         }
         .menu
         {
         position: absolute;
         margin: 0px;
         padding: 0px;
         width: 100`%;
         }
         h2 
         {
         font-family: Raleway;
         font-weight: 600;
         font-size: 24px;
         outline: none; 
         padding: none;
         margin: 0px;
         }
         .c1
         {
         position: absolute;
         width: 270.03px;
         height: 101.25px;
         top: 595.84px;
         left: 0px;
         background-color: #80d8ff;
         }
         #co1
         {
         color: #000;
         text-align: center;
         margin: 18px;
         }
         .c2
         {
         position: absolute;
         width: 270.03px;
         height: 101.25px;
         top: 595.84px;
         left: 270.03px;
         background-color: #82b1ff;
         }
         #co2
         {
         color: #000;
         text-align: center;
         margin: 18px;
         }
         #co2-2
         {
         color: #FFFFFF;
         font-weight: 700;
         font-size: 30px;
         padding-left: 87px;
         margin-top: -10px;
         }
         .c3
         {
         position: absolute;
         width: 270.03px;
         height: 101.25px;
         top: 595.84px;
         left: 540.06px;
         background-color: #b388ff;
         }
         .c4
         {
         position: absolute;
         width: 270.03px;
         height: 101.25px;
         top: 595.84px;
         left: 810.09px;
         background-color: #ea80fc;
         }
      </style>
   </head>
   <body>
      <div class="bgded">
         <div class="counts">
            <div class="c1">
               <h2 id="co1">test</h2>
            </div>
            <div class="c2">
               <h2 id="co2">Нажать:</h2>
               <h2 id="co2-2">ctrl + 2</h2>
            </div>
            <div class="c3">
            </div>
            <div class="c4">
            </div>
         </div>
      </div>
   </body>
</html>
)

Gui, -DPIScale
Gui, Margin, 0, 0
Gui, Add, ActiveX, w1080 h1080 vWB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
WB.document.write(html)
WB.document.querySelector("button").addEventListener("mouseup", Func("OnButton"))
Loop, Files, images/bg.png, F
   filePath := A_LoopFileLongPath
WB.document.querySelector(".bgded").style.backgroundImage := "url(" . StrReplace(filePath, "\", "/") . ")"
Gui, Show
WB.document.querySelector("input").focus()
Return

F9::

MouseGetPos, posX, posY
MsgBox, %posX%, %posY%
return

OnButton() {
   global WB
   MsgBox, % "Вы ввели: " . WB.document.querySelector("input").value
}

GuiClose:
   ExitApp

https://i.ibb.co/qpGJQY8/send.jpg
https://i.ibb.co/4KHDdhj/sendOn.jpg

GD

21

Re: AHK: Кастомный GUI

Botsy пишет:

почему-то не работает.

Папка images должна быть в директории скрипта, и проверьте правильность названий файла и папки.

Botsy пишет:

А как можно сделать, чтобы после нажатия "ctrl + 2", вместо этого же текста, выводились координаты ?

Честно, ничего не понял. Какого текста, какие координаты?

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

22

Re: AHK: Кастомный GUI

Скопировал ваш код -> в папке скрипт + папка images (в этой папке BG.png). Запускаю, все работает, кроме фона.

teadrinker пишет:

Какого текста, какие координаты?

Если запустить скрипт выше, и нажать F9, то будет msgbox с координатами курсора. А как выводить эти координаты вместо надписи "ctrl + 2". То есть, мы нажали F9, и надпись ctrl + 2 заменилась на надпись с этими координатами, как на скринах выше.

GD

23

Re: AHK: Кастомный GUI

Botsy пишет:

Запускаю, все работает, кроме фона.

Обновите AHK, текущая версия 1.1.33.2.

F9::
   MouseGetPos, posX, posY
   WB.document.getElementById("co2-2").innerText := posX . "  " . posY
return
Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

24

Re: AHK: Кастомный GUI

С папкой проще можно:

WB.document.write(html)
WB.document.querySelector(".bgded").style.backgroundImage := "url(" . StrReplace(A_ScriptDir . "\images\bg.png", "\", "/") . ")" 
Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

25

Re: AHK: Кастомный GUI

teadrinker пишет:
F9::
   MouseGetPos, posX, posY
   WB.document.getElementById("co2-2").innerText := posX . "  " . posY
return

Вот это топчик, спасибо!
А с фоном все равно не работает, буду разбираться в чем проблема.

GD

26 (изменено: Botsy, 2020-11-01 20:19:16)

Re: AHK: Кастомный GUI

Хочу изменить дизайн стандартного MsgBox. Предположим, что это обычное окно с кнопкой. Значит это окно нужно вызывать функцией и еще одну функцию в качестве обработчика самой кнопки.

Сейчас нажав на элемент "меню", появляется новое окно (Gui), но оно не воспринимает html оформление - просто пустое окно.
Не понимаю каким синтаксисом ahk заставить видеть html. Функция "OnMenu", подскажите пж в чем проблема.


#NoEnv
CoordMode, mouse

html =
(
<!DOCTYPE html>
<html>
   <head>
      <style>
		html,
		body {
			margin: 0px;
		}

		.bgded {
			background-size: auto;
			background-repeat: no-repeat;
			height: 1080px;
			width: 1080px;
		}

		.menu {
			position: relative;
			margin: 20px;
		}

		.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;
		}

		.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;
		}

		.reboot:hover {
			color: #FFFFFF;
			background-color: #237976;
			border-color: transparent;
		}

		.reboot:active {
			color: #FFFFFF;
			background-color: #237976;
			border-color: transparent;
		}

		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;
		}

		#te1 {
			color: #000;
			position: relative;
			text-align: center;
		}

		h2 {
			font-family: Raleway;
			font-weight: 600;
			font-size: 24px;
			outline: none;
			padding: none;
			margin: 0px;
		}

		.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;
		}

		.c4 {
			position: absolute;
			width: 270.03px;
			height: 101.25px;
			top: 595.84px;
			left: 810.09px;
			background-color: #ea80fc;
		}
      </style>
   </head>
   <body>
      <div class="bgded">
         <div class="menu">
            <h1 id="te1">Меню</h1>
         </div>
         <div class="counts">
            <div class="c1">
               <h2 id="co1">Выбрать область:</h2>
               <h2 id="co1-1">F9</h2>
            </div>
            <div class="c2">
               <h2 id="co2">Нажать:</h2>
               <h2 id="co2-2">F10</h2>
            </div>
            <div class="c3">
            </div>
            <div class="c4">
            </div>
         </div>
      </div>
   </body>
</html>
)

Gui, -DPIScale
Gui, Margin, 0, 0
Gui, Add, ActiveX, w1080 h1080 vWB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
WB.document.write(html)
WB.document.querySelector("button").addEventListener("mouseup", Func("OnButton"))
WB.document.getElementById("te1").addEventListener("mouseup", Func("OnMenu"))
Gui, Show
WB.document.querySelector("input").focus()
Return

F9::
	x := "<button type='button' class='btn reboot'>ПЕРЕВЫБРАТЬ</button>"
	WB.document.getElementById("co1-1").innerHTML := x
return

F10::
	MouseGetPos, posX, posY
	WB.document.getElementById("co2-2").innerText := posX . " , " . posY
return

OnButton() {
   MsgBox, Hi
}

OnMenu() {

global WB

html =
(
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1>This is a Heading</h1>
		<p>This is a paragraph.</p>
        <button type="button" class="btn reboot">OK</button>
	</body>
</html>
)

Gui, New
Gui, Margin, 0, 0
Gui, Add, ActiveX, w325 h150 vWB, Shell.Explorer
WB.document.write(html)
Gui, Show
return

}

GuiClose:
   ExitApp

https://i.ibb.co/LJdBRpN/send1.png

GD

27

Re: AHK: Кастомный GUI

Сейчас без компьютера, пока не могу попробовать. Но вижу, что у вас для обоих окон одна и та же переменная WB для ActiveX контролов, должны быть разные. И смотрите, как у меня создается контрол, у вас не так.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

28 (изменено: Botsy, 2020-11-01 22:11:18)

Re: AHK: Кастомный GUI

teadrinker Изменил переменную для activeX и все заработало.


OnBuy() {

global WBB

html =
(
<!DOCTYPE html>
<html>
	<head>
		<title>Testing Page</title>
	</head>
	<body>
		<h1>Example</h1>
		<button type="button" id="ex" class="btn reboot">OK</button>
	</body>
</html>
)

Gui, New
Gui, Margin, 0, 0
Gui, Add, ActiveX, w300 h150 vWBB, about:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
WBB.document.write(html)
WBB.document.getElementById("ex").addEventListener("mouseup", Func("OnButton"))
Gui, Show
return
}

Интересно, а зачем надо добавлять глобальную переменную в функцию для ActiveX, если мы используем этот компонент внутри функции ? Попробовал удалить этот global, без него не работало.

Можно ли как-то закрывать это окно(от ф-ции OnBuy) и не закрывать весь скрипт целиком ? В скрипте есть GuiClose

GuiClose:
   ExitApp

UPD: дал второму окну метку "ММ" при вызове и закрываю его так:


Gui, MM: New
Gui, MM: Show
return

MMGuiClose:
Gui, Cancel
return
GD

29

Re: AHK: Кастомный GUI

Если вы каждый раз создаёте новое окно, нужно Gui, Destroy.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

30 (изменено: Botsy, 2020-11-02 13:46:55)

Re: AHK: Кастомный GUI

В общем фон так и не заработал вашим методом, решил по другому: убрал все что было связано с фоном, добавил обычное изображение в блок и уже ему указал относительный путь.
Обрезал код кусками, чтобы найти где же была ошибка. Наверное где-то в синтаксисе атрибута "url" для BG, потому что часть после StrReplace - рабочая.


WB.document.querySelector(".bgded").style.backgroundImage := "url(" . StrReplace(A_ScriptDir . "\images\bg.png", "\", "/") . ")" 

SetWorkingDir %A_ScriptDir%

<div class="bgded" id="bgimg"> 
	<div class="menu">
	<img id="myImage">
	<h1 id="te1">Меню</h1>
</div>

WB.document.getElementById("myImage").src := StrReplace(A_ScriptDir . "\images\bg.png", "\", "/")
GD

31 (изменено: Botsy, 2020-11-07 01:25:19)

Re: AHK: Кастомный GUI

Спасибо всем кто помог разобраться с интеграцией html/css в ahk!

Прилагаю результат работы данной темы, может кому-то пригодится, будет легче с наглядным примером и поможет разобраться:
- замена текста, вызов кнопок, обработка форм, условия для старта, ограничения на ввод
- кнопки, формы, меню - меняют внешний вид при взаимодействии с пользователем
- вместо msgbox, новое окно в стилистике, пример ф-кция "OnErr()"

Экземпляр:
- на ctrl+5 выбираем активное окно меняя форму, заблокирована для действий с мышкой
- ввод числа с ограничением
- ctrl+1, замена текста на кнопку
- ctrl+2-4, замена текста на переменную, в данном случае на координаты мышки
- кнопка старт только после заполнения форм и областей, иначе покажет msgbox
- меню "Египетский" вызывает окно. Для примера, если вызвать после старта, покажет счетчик цикла и затраченное время на выполнение

https://i.ibb.co/ynMxKST/Example-Custom-Gui.jpg


#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 attachments

BG.png 877.29 kb, 2 downloads since 2020-11-06 

You don't have the permssions to download the attachments of this post.
GD