1 (изменено: mozers, 2017-04-05 13:40:20)

Тема: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Умолчу о неоспоримых и многочисленных достоинствах веб-интерфейса (ну и о некоторых его недостатках - тоже). Полагаю, что тот, кому знаком html и javascript и кого связывают возможности контролов AHK Gui свой выбор уже сделал.
Скрипт, предлагаемый вашему вниманию, является учебным. Сочиняя его, учился сам. Из нескольких возможных вариантов процедур выбирал наиболее простой и надежный. Надеюсь, пригодится как шаблон для ваших разработок.

; Для для включения html в exe-шник можно использовать модифицированный Ahk2Exe
; https://autohotkey.com/boards/viewtopic.php?f=24&t=521
; http://fincs.ahk4.net/files/NewAhk2Exe-preview2a.zip
;@Ahk2Exe-AddResource interface.html

#Warn
#NoEnv
#SingleInstance Force
SetBatchLines -1
; Gui, -DPIScale   - не использовать! (Будут проблемы с масштабированием html содержимого)

Gui, Add, GroupBox,            w476 h90                , % "AHK Application"
Gui, Add, Button,  xp14  yp+20 w90          gGetFromIE , % "Get from IE"
Gui, Add, Edit,    x+14  yp    w240        vAHKEditBox , % "test AHK string"
Gui, Add, Button,  x+14  yp    w90           gSendToIE , % "Send to IE"
Gui, Add, Button,  xs+14 y+8   w160    gCallJavaScript , % "Call JavaScript Function"
Gui, Add, ActiveX, x0    y+32  w500 h84 hwndIEhwnd vIE , Shell.Explorer
htmlfile := A_IsCompiled ? "res://" A_ScriptFullPath "/interface.html" : A_ScriptDir "\interface.html"
IE.Navigate(htmlfile)
; loop { ; Ожидание загрузки html - (приводится во всех примерах, но нам для локальной страницы абсолютно ничего не дает)
; 	If !IE.busy
; 		break
; }
Gui, Color, cC0C0C0
; Gui, Show, w500 h188, % "ActiveX Shell.Explorer"
Gui, Show, w500 h190, % "ActiveX Shell.Explorer"

loop { ; Ожидание инициализации подключений (вот эта задержка - обязательна!)
	Try {
		IE.document.All.IEInputBox
		break
	}
}

; Подключение к html элементу IEInputBox
IEInpBox := IE.document.GetElementById["IEInputBox"]
; IEInpBox := IE.document.All.IEInputBox ; альтернативный способ

Events := [] ; Подключение к событиям html элементов INPUT (для всех элементов используйте "*")
Inputs := IE.document.GetElementsByTagName["input"]
Loop % Inputs.length {
	Events[A_Index] := Inputs[A_Index-1]
	ComObjConnect(Events[A_Index], Inputs[A_Index-1].id "_")
}
return

; Нажатие на кнопку "Get from IE"
GetFromIE:
	x := IEInpBox.value
	GuiControl,, AHKEditBox, % x
return

; Нажатие на кнопку "Send to IE"
SendToIE:
	GuiControlGet, y,, AHKEditBox
	IEInpBox.value := y
return

; Нажатие на кнопку "Call JavaScript Function"
CallJavaScript:
	GuiControlGet, param,, AHKEditBox
	IE.document.parentWindow.execScript("tempJsVar=funcTest('" param "')")
	ret := IE.document.Script.tempJsVar
	GuiControl,, AHKEditBox, % ret
return

; Нажатие на кнопку "Get from AHK"
IEButtonGet_OnClick(this) {
	GuiControlGet, v,, AHKEditBox
	this.document.GetElementById["IEInputBox"].value := v
}

; Нажатие на кнопку "Send to AHK"
IEButtonSend_OnClick(this) {
	v := this.document.GetElementById["IEInputBox"].value
	GuiControl,, AHKEditBox, % v
}

GuiEscape:
GuiClose: 
	Gui, Destroy
ExitApp

interface.html

<html>
<head>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<meta http-equiv="MSThemeCompatible" content="yes">
<style type="text/css">
	/* Задание общих стилей оформления элементов. Все размеры задавать только в pt! (Иначе будут проблемы с нестандартным DPI) */
	* {font:8pt MS Shell Dlg;}
	td {white-space:nowrap; padding-left:8pt;}
	.test {color:red; background-color:yellow;}
</style>
<script type="text/javascript">
	// Выбор элемента, показ всех его свойств, возврат его идентификатора
	function funcTest(i){
		var elements = document.getElementsByTagName('*');
		var i = Math.abs(Number(i)||0); if (i >= elements.length) i = 0;
		var elem = elements[i];
		// Подсвечиваем элемент и показываем все его свойства
		elem.className = 'test';
		ShowElementProps(elem);
		elem.className = '';
		i++;
		return Math.floor(i);
	}
	// Показ всех свойств заданного элемента
	function ShowElementProps(obj) {
		var all_props = [];
		for (var prop in obj){
			try {
				var p = obj[prop];
				if (p) all_props.push(prop + ' = ' + String(p).substr(0,25));
			} catch (e) {}
		}
		alert(obj.tagName + '\n---------------\n' + all_props.sort().join('\n'));
	}
</script>
</head>
<body style="margin:10pt; overflow:hidden; background-color:#629DAC;">
	<fieldset><legend>Internet Explorer</legend>
		<table style="border-width:0; border-collapse:collapse; width:100%; height:28pt;">
			<tr>
				<td>
					<input id="IEButtonGet" type="button" value="Get from AHK">
				</td>
				<td>
					<input id="IEInputBox" style="width:160pt;" value="test HTML string">
				</td>
				<td>
					<input id="IEButtonSend" type="button" value="Send to AHK">
				</td>
			</tr>
		</table>
	</fieldset>
</body>
</html>

Сразу отвечу на вопрос: Почему html не вставлен в ahk скрипт, а находится в отдельном файле?
Если в html всего пара или тройка элементов, то вставка кода в ahk скрипт вполне оправдана. Когда речь идет о более-менее серьезном проекте, то такая интеграция превращается в огромную проблему. Тут и неудобство редактирования инородного кода, и необходимость его преобразования, и отсутствие возможности тестирования,... (список можно продолжить). Это - проблемы, с которыми еще можно кое как справиться, но есть и неразрешимые. Я, например, динамически впихнул и js-скрипты и таблицу стилей и все сработало, но никакого результата от добавления httpEquiv=MSThemeCompatible я так и не увидел. А html без поддержки стилей просто убог (особенно - контролы).
При компиляции html можно оставить в отдельном файле (FileInstall), а можно добавить в ресурсы получившегося exe-файла (вручную, либо с помощью нового Ahk2Exe). В общем, надеюсь, доказал. Внешний html - без вариантов. Кстати, если речь идёт о публикации, то его разработку лучше бы доверить сведущему товарищу, нежели надеяться на то, что великие познания в ahk помогут вам самостоятельно создать приличный html интерфейс.

Жду замечаний от AHK-профессионалов. Вдруг какую то процедуру можно сделать еще проще/надежнее? Может еще чего часто-используемого добавить в данный шаблон?

P.S. Просто убивают некоторые ahk скрипты, авторы которых пытаются управлять элементами html интерфейса с помощью функций AHK и WinAPI вызовов. Ребята, если связались с html, учите js, css! C их помощью все это делается на раз-два.

2

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Тоже интересовался темой использования html-интерфейса в AHK-скриптах. Но решил что главный недостаток — зависимость от версии IE и его настроек перечёркивает достоинства. Не знаю, может я не совсем прав, готов выслушать аргументы защиты.

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

3

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers, хотелось бы видеть этот скрипт в Коллекции!

4 (изменено: teadrinker, 2017-04-03 20:47:03)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Для коллекции сыровато, попробуйте понажимать кнопки в разном порядке, в некоторых случаях нет реакции. Кроме того, из примера не понятно, что же использование html даёт такого, что нельзя сделать стандартными для AHK способами.

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

5

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

ypppu
Полагаю, вначале надо косточки промыть...

teadrinker
"Зависимость от версии IE" - Если любишь использовать все новейшие навороты HTML5 и CSS3 то зависимость от версии будет ощущаться. Если используешь классический синтаксис - никаких проблем. Тем более что совсем уж "баловаться" контрол не позволит (т.к. он наделён далеко не всеми возможностями IE).
"Зависимость от настроек" - Имеется, давно изучена и достаточно просто лечится при необходимости. Гораздо хуже проблемы различных плагинов IE. Но, слава Сhrome, FireFox, Opera и другим браузерам - весь народ перешел на них и IE обычно покоится в системе нетронутый и белоснежный.
В общем, "перечёркивает достоинства" - это, на мой взгляд, чересчур.

Понажимать кнопки в разном порядке, в некоторых случаях нет реакции

Если в обоих InputBox-ах - одинаковый текст, то какую реакцию Вы ждете?

из примера не понятно, что же использование html даёт такого, что нельзя сделать стандартными для AHK способами

Такой задачи не ставилось изначально. Я, конечно, могу добавить в нижнюю половину картинки, всплывающие подсказки, анимацию или видео и мы будем спорить в какой среде это проще и симпатичней реализуется... Зачем?
Цель обозначена в заголовке топика и я хотел бы узнать у знатоков: Все ли (со стороны ahk) выполнено максимально оптимально?

6

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

Если в обоих InputBox-ах - одинаковый текст, то какую реакцию Вы ждете?

А, с этим разобрался, понятно.

mozers пишет:

Все ли (со стороны ahk) выполнено максимально оптимально?

А что тут можно оптимизировать? Получение значения из контрола через GuiControlGet? Или о чём вы говорите?

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

7

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

teadrinker пишет:

Или о чём вы говорите?

Да даже не знаю. Просто боюсь что допустил какой нибудь явный ляп по незнанию. Например, долго не мог поверить что в ahk отсутствует числовой for - вот и придумал этот цикл с while. Вот недавно только въехал почему интерпретатор ругался на глобальные переменные в функциях, ну и т.д. пр.
Так что внимательно проверяйте, чтоб мне потом стыдно не было.

8

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

в ahk отсутствует числовой for

Loop Inputs.length вместо него.

Смысл разработки пока не понял. Это под новый браузер на IE? Или для чего?
Скроллбары убрать не помешало бы.

9

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Flasher пишет:

Loop Inputs.length вместо него

Так не сработает, Loop не ожидает выражение, правильно:

Loop % Inputs.length
Flasher пишет:

Скроллбары убрать не помешало бы.

У меня их не видно. Разница в версиях IE сыграла?
Из недостатков заметил только немного неуклюжий ресайзинг — визуально нижняя часть растягивается, верхняя нет. Кроме того, при нажатии «Call JavaScript Function» к html-элементам новые стили добавляются, но старый у IEInputBox (style="width:96%") почему-то сбрасывается. Это скорее придирки, но если пример простой, то и работать он должен, как часы.

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

10

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

teadrinker пишет:

Разница в версиях IE сыграла?

Скорее масштаб.

11

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

У меня на Win7 с выключенными визуальными эффектами надписи во вкладке IE выглядят грязными и размытыми.

12

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers, вы находите "баги" в AutoHotkey почти в каждой вашей теме, полагаю, из вас вышел бы отличный тестировщик.
Скроллов не вижу, зато при нажатии кнопки "Call Javascript.." к кнопкам применяются стили, и они увеличиваются, а поле ввода уходит за пределы окна.

13

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

На счет скроллбаров наверное всё-таки версия IE имеет значение.
Lexikos в своём installer.ahk пишет:

; Scale UI by screen DPI.  My testing showed that Vista with IE7 or IE9
    ; did not scale by default, but Win8.1 with IE10 did.  The scaling being
    ; done by the control itself = deviceDPI / logicalDPI.
    logicalDPI := w.screen.logicalXDPI, deviceDPI := w.screen.deviceXDPI
    if (A_ScreenDPI != 96)
        w.document.body.style.zoom := A_ScreenDPI/96 * (logicalDPI/deviceDPI)

14

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

В общем, у всех выглядит по-разному, о чём я и говорил.

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

15 (изменено: mozers, 2017-04-04 10:25:00)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

teadrinker, нет. Это как раз "известные проблемы" которые я не учел. Будем править.

немного неуклюжий ресайзинг — визуально нижняя часть растягивается, верхняя нет

html растягивается сам. Добавление масштабирования в ahk Gui, полагаю, повлечет неоправданное разрастание кода. Или есть лёгкое решение?

И всем огромное спасибо за толковые замечания! Тестировщики вы - отличные!

16 (изменено: stealzy, 2017-04-04 14:00:13)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Если 4 раза подряд нажать на Call J.., поле ввода уходит за границы окна и обратно не восстанавливается.
Вы говорили об убогости стандартного gui, как раз недавно видел тему об использовании стилей .msstyles:
http://cfile9.uf.tistory.com/image/27162D3754CFA51A329237
GUI Skinning Methods

mozers, нахожу забавным, что вы добавили комментарий в тему AutoHotkey для чайников!, а сами множество раз наступили на грабли (обрамлении переменных знаками %; команды ждущие переменную или выражение),
описанные teadrinker в ровно предыдущем комментарии из этой темы.
Если уж те, кто туда пишет, не читали сообщения темы, чего вы ждете от "чайников" .

17

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Ребят, я умоляю, давайте не будем сравнивать слона и кита? (Я же про jQuery ни слова не сказал.)
Если кому то очень хочется сравнить возможности и недостатки AHK и DHTML, пожалуйста, заведите отдельную ветку.
Тут я предлагаю учиться правильно использовать весьма функциональный контрол.
А уж применять его или нет - пусть каждый решает самостоятельно.

По озвученным багам:
Честно говоря, всегда "клал" на любителей нестандартного размера шрифта. Сегодня впервые решил учесть и их интересы.
Как оказалось - нет ничего невозможного. Откорректировал код (в первом сообщении):
Исключил Gui, -DPIScale и в html коде все размеры задал в point-ах (pt). html содержимое стало отображаться идентично ahk Gui даже со шрифтами, отличными от 96 DPI.
А код от Lexikos мне почему то только все портит. Где только не пробовал - от IE6 на WinXP до IE11 на Win10.
Кстати, при выборе классической темы, html выглядит даже чуть-чуть аккуратнее чем ahk Gui.
Заменил бестолковую тестовую js функцию на реально полезную для изучения. Долго мучился с желанием сделать все более наглядно и с активным нежеланием наращивать код. Шаблон же - в конце то концов!.
Ну и зафиксировал размеры главного окна т.к. нет желания заморачиваться с масштабированием ahk Gui.
Ну как, пойдет?

18

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Да, сейчас резина в порядке. Правда мне всё равно неясно, для чего нужны подобные склейки с AHK-GUI.

mozers пишет:

Честно говоря, всегда "клал" на любителей нестандартного размера шрифта.

Как же некрасиво... А то, что ими могут оказаться вовсе не любители, а вынужденцы, в голову не приходило? http://www.kolobok.us/smiles/mini/acute_mini.gif

19

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Flasher
Ну ладно, я пойду навстречу. Но останется еще 1000 и 1 прога, с которой будет просто невозможно или очень тяжело работать при нестандартном DPI. Как показывает практика, нестандартное разрешение в 90% случаев выбирают не "вынужденцы", а те кто тупо не понимает всех недостатков такого выбора.

20

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Кстати, при выборе классической темы, html выглядит даже чуть-чуть аккуратнее чем ahk Gui.

У меня буквы размыты слегка.
Наверное надо как-то отключить ClearType.
При исполнении джаваскрипта выскакивает ошибка:

Line: 21
Char:3
"err" is undefined
Code 0.

21

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

+ mozers

Не знаю, откуда такая статистика, но даже 10% - это не исключение. Я, к примеру, по-твоему, в них вхожу (FullScreen при 125%)?

22

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Malcev
Странно что он ругается. Хотя формально - прав. Надо добавить в 19 строчку var err;.
Насчет "аккуратности" контролов. ClearType у меня был включен на всех испытуемых машинах. Повышенной размытости html по сравнению с ahk не обнаружил. Может я просто слепну потихоньку?

Flasher, извини, что то даже не хочется переходить на личности. Тут - народ грамотный, все выбирают осознанно.

23

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

// Подсвечиваем элемент и показываем все его свойства

У меня ничего не подсвечивается.

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

24 (изменено: Malcev, 2017-04-05 00:13:44)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

У меня иногда подсвечивается, а иногда нет.
И если нажать несколько раз  на кнопку джаваскрипта, то рано или поздно выйдет такая ошибка:

Line: 28
Char:10
InvalidStateError
Code 0.

mozers пишет:

ClearType у меня был включен на всех испытуемых машинах.

А у меня наоборот везде выключен.
Но IE11 все-равно шрифт сглаживает (У Flasherа на картинке это, кстати, видно).
А на счет DPI - у меня был 15-дюймовый ноут с Win10 с родным разрешением 1920 на 1080, для меня он был мелковат.
Менял разрешение на меньшее - экран мылился.
Увеличил размер шрифта - всё стало на свои места.

25 (изменено: mozers, 2017-04-05 01:00:58)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Много думал. Переписал весь js. Сейчас свойства всех элементов (их 20) выводятся последовательно. Если в ahk Edit ввести номер - то будет выводится с этого номера.
Стиль прилепляется ко всему подряд, а реально подсветку видно только на видимых элементах, а их совсем немного.
Кстати, о применимости данного контрола: На AHK есть незамысловатые функции позволяющие организовать слайдшоу с различными эффектами (жалюзи, ретушь, смывание, рамка и п.р.)? Просто в IE c помощью DX-фильтров это делается запросто.

26

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Можно с AnimateWindow слайдшоу сделать.
Но там эффектов немного.
https://msdn.microsoft.com/ru-ru/librar … s.85).aspx
Кстати с 13 и 17 номерами элементов опять ошибка:

Line: 28
Char:4
InvalidStateError
Code 0

27

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Malcev
Какой, однако, у вас дебагер дотошный. У меня - молчит, где бы не пробовал. Какая версия IE?
В общем, в очередной раз, код поправил. Спасибо за багрепорт!

28

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

IE 11.0.9600.18537.

Сейчас свойства всех элементов (их 20) выводятся последовательно

У меня 18-ый последний.

29 (изменено: stealzy, 2017-04-05 22:17:18)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Почему при нажатии 3 и более раза подряд на кнопку Call JavaScript Function поле ввода уходит за пределы окна?
Так и было задумано?

30

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Malcev пишет:

У меня 18-ый последний.

У меня 19.

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

31

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Насчет 20 я обсчитался. От 0 (HTML) до 18 (INPUT) - т.е. всего 19.
Malcev, и все таки, какой у Вас IE?
stealzy, просто у Вас старый код (1й пост давно обновлен).
Рад, что унылый шаблон оказался забавной игрушкой.

32 (изменено: Malcev, 2017-04-06 00:13:01)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

А я написал в 28 сообщении:

Malcev пишет:

IE 11.0.9600.18537.

У меня 0 - HTML, 17 - INPUT, 18,19,20... - HTML.

33

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Все, что больше общего количества 18,19,20... приводится к 0 индексу - HTML - т.е. тут - как и задумано.
А вот почему общее количество получилось равным 18, а не 19 - вот над этим надо подумать. Тем более что у меня дома такой же IE.11. Теги всех элементов последовательно - HTML,HEAD,TITLE,META,META,STYLE,SCRIPT,BODY,FIELDSET,LEGEND,TABLE,TBODY,TR,TD,INPUT,TD,INPUT,TD,INPUT.

34

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

У меня TITLE нету.
Да и в коде я такого тега не вижу.

35

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Просто браузер некоторые теги (TITLE,TBODY например) эмулирует при их отсутствии в коде. Я этот код прогонял в IE, Chrome, FireFox - везде набирается 19 штук. Только у вас - 18. Имхо, какой то странный баг (несущественный конечно).

36 (изменено: Malcev, 2017-04-06 15:45:31)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Понял в чем штука:
Так работает:

FixIE(0)
;Ваш код

FixIE(Fix)  {
    Static Key := "Software\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION"
    If A_IsCompiled
        ExeName := A_ScriptName
    Else
        SplitPath, A_AhkPath, ExeName
    If Fix
        RegWrite, REG_DWORD, HKCU, %Key%, %ExeName%, 0
    Else
        RegDelete, HKCU, %Key%, %ExeName%
}

А вот так уже нет и результаты джаваскрипта совсем другие:

FixIE(1)
;Ваш код

FixIE(Fix)  {
    Static Key := "Software\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION"
    If A_IsCompiled
        ExeName := A_ScriptName
    Else
        SplitPath, A_AhkPath, ExeName
    If Fix
        RegWrite, REG_DWORD, HKCU, %Key%, %ExeName%, 0
    Else
        RegDelete, HKCU, %Key%, %ExeName%
}

А вот в таком случае надо вставлять FixIE(1) чтобы кнопки закруглялись.

FixIE(1)

html = 
(     
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    border: 3px solid green; /* Параметры рамки */
    box-shadow: 0 0 7px #666; /* Параметры тени */
   }
  </style>
 </head>
 <body>
   <p><img src="file://localhost/D:\AutoIt\images\thumb1.jpg" alt="" class="round"></p>
 </body>
</html>
) 
 
Gui, -DPIScale +ReSize 
Gui, margin, 0, 0 
Gui, Add, ActiveX, hwndhActiveX w222 h222 vIE, Shell.Explorer  
IE.Navigate("about:blank")
IE.document.write( html ) 
Gui, show, na
return

FixIE(Fix)  {
	Static Key := "Software\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION"
	If A_IsCompiled
		ExeName := A_ScriptName
	Else
		SplitPath, A_AhkPath, ExeName
	If Fix
		RegWrite, REG_DWORD, HKCU, %Key%, %ExeName%, 0
	Else
		RegDelete, HKCU, %Key%, %ExeName%
}

Интересно как сделать, чтоб и кнопки отображались закругленными и джаваскрипт выполнялся правильно?
В общем надо копать эти темы:
https://autohotkey.com/board/topic/9366 … er-engine/
https://autohotkey.com/boards/viewtopic … mp;t=12317
https://autohotkey.com/boards/viewtopic … 379#p33379

37

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

JS и так выполняется правильно. Ну не видит данный тестовый скрипт в некоторых системах эмулируемые теги - и что с того?
Полагаю что в данном шаблоне даже упоминать про эту настройку не стоит.
А способов внедрения в html код различных украшательств интерфейса напридумывали достаточно много. Если есть желание - можно обсудить эту тему в другой ветке. Хотя лично я на этот счет никогда не заморачивался.

38

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

У меня показываются разные результаты:
С FixIE(0):

HTML
---------------
all = [object]
attributes = [object]
behaviorUrns = [object]
canHaveChildren = true
childNodes = [object]
children = [object]
className = test
contentEditable = inherit
currentStyle = [object]
document = [object]
filters = [object]
firstChild = [object]
innerHTML = <HEAD>
<META content="te
innerText = Internet Explorer   
 
isMultiLine = true
lastChild = [object]
nodeName = HTML
nodeType = 1
offsetHeight = 84
offsetWidth = 500
outerHTML = <HTML class=test><HEAD>

outerText = Internet Explorer   
 
ownerDocument = [object]
parentNode = [object]
readyState = complete
runtimeStyle = [object]
scopeName = HTML
scrollHeight = 84
scrollWidth = 500
style = [object]
tagName = HTML

С FixIE(1):

HTML
---------------
ATTRIBUTE_NODE = 2
CDATA_SECTION_NODE = 4
COMMENT_NODE = 8
DOCUMENT_FRAGMENT_NODE = 11
DOCUMENT_NODE = 9
DOCUMENT_POSITION_CONTAINED_BY = 16
DOCUMENT_POSITION_CONTAINS = 8
DOCUMENT_POSITION_DISCONNECTED = 1
DOCUMENT_POSITION_FOLLOWING = 4
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32
DOCUMENT_POSITION_PRECEDING = 2
DOCUMENT_TYPE_NODE = 10
ELEMENT_NODE = 1
ENTITY_NODE = 6
ENTITY_REFERENCE_NODE = 5
NOTATION_NODE = 12
PROCESSING_INSTRUCTION_NODE = 7
TEXT_NODE = 3
addEventListener = 
function addEventListene
appendChild = 
function appendChild() {
applyElement = 
function applyElement() 
attributes = [object NamedNodeMap]
blur = 
function blur() {
    [n
canHaveChildren = true
childElementCount = 2
childNodes = [object NodeList]
children = [object HTMLCollection]
classList = test
className = test
clearAttributes = 
function clearAttributes
click = 
function click() {
    [
clientHeight = 84
clientWidth = 500
cloneNode = 
function cloneNode() {
 
compareDocumentPosition = 
function compareDocument
componentFromPoint = 
function componentFromPo
contains = 
function contains() {
  
contentEditable = inherit
createControlRange = 
function createControlRa
currentStyle = [object MSCurrentStyleCSS
dataset = [object DOMStringMap]
dispatchEvent = 
function dispatchEvent()
dragDrop = 
function dragDrop() {
  
firstChild = [object HTMLHeadElement]
firstElementChild = [object HTMLHeadElement]
focus = 
function focus() {
    [
getAdjacentText = 
function getAdjacentText
getAttribute = 
function getAttribute() 
getAttributeNS = 
function getAttributeNS(
getAttributeNode = 
function getAttributeNod
getAttributeNodeNS = 
function getAttributeNod
getBoundingClientRect = 
function getBoundingClie
getClientRects = 
function getClientRects(
getElementsByClassName = 
function getElementsByCl
getElementsByTagName = 
function getElementsByTa
getElementsByTagNameNS = 
function getElementsByTa
hasAttribute = 
function hasAttribute() 
hasAttributeNS = 
function hasAttributeNS(
hasAttributes = 
function hasAttributes()
hasChildNodes = 
function hasChildNodes()
innerHTML = <head>
<meta http-equiv="
innerText =   /* Задание общих стилей
insertAdjacentElement = 
function insertAdjacentE
insertAdjacentHTML = 
function insertAdjacentH
insertAdjacentText = 
function insertAdjacentT
insertBefore = 
function insertBefore() 
isDefaultNamespace = 
function isDefaultNamesp
isEqualNode = 
function isEqualNode() {
isMultiLine = true
isSameNode = 
function isSameNode() {

isSupported = 
function isSupported() {
lastChild = [object HTMLBodyElement]
lastElementChild = [object HTMLBodyElement]
localName = html
lookupNamespaceURI = 
function lookupNamespace
lookupPrefix = 
function lookupPrefix() 
mergeAttributes = 
function mergeAttributes
msContentZoomFactor = 1
msGetInputContext = 
function msGetInputConte
msGetRegionContent = 
function msGetRegionCont
msGetUntransformedBounds = 
function msGetUntransfor
msMatchesSelector = 
function msMatchesSelect
msRegionOverflow = undefined
msReleasePointerCapture = 
function msReleasePointe
msRequestFullscreen = 
function msRequestFullsc
msSetPointerCapture = 
function msSetPointerCap
namespaceURI = http://www.w3.org/1999/xh
nodeName = HTML
nodeType = 1
normalize = 
function normalize() {
 
offsetHeight = 88
offsetWidth = 500
outerHTML = <html class="test"><head>
outerText =   /* Задание общих стилей
ownerDocument = [object HTMLDocument]
parentNode = [object HTMLDocument]
querySelector = 
function querySelector()
querySelectorAll = 
function querySelectorAl
releaseCapture = 
function releaseCapture(
releasePointerCapture = 
function releasePointerC
removeAttribute = 
function removeAttribute
removeAttributeNS = 
function removeAttribute
removeAttributeNode = 
function removeAttribute
removeChild = 
function removeChild() {
removeEventListener = 
function removeEventList
removeNode = 
function removeNode() {

replaceAdjacentText = 
function replaceAdjacent
replaceChild = 
function replaceChild() 
replaceNode = 
function replaceNode() {
runtimeStyle = [object MSStyleCSSPropert
scrollHeight = 89
scrollIntoView = 
function scrollIntoView(
scrollWidth = 500
setActive = 
function setActive() {
 
setAttribute = 
function setAttribute() 
setAttributeNS = 
function setAttributeNS(
setAttributeNode = 
function setAttributeNod
setAttributeNodeNS = 
function setAttributeNod
setCapture = 
function setCapture() {

setPointerCapture = 
function setPointerCaptu
style = [object MSStyleCSSPropert
swapNode = 
function swapNode() {
  
tagName = HTML
textContent = 



   /* Задание общих с
uniqueID = ms__id1
uniqueNumber = 1

И зачем обсуждать украшательства в другой ветке, когда вы сами писали:

Умолчу о неоспоримых и многочисленных достоинствах веб-интерфейса (ну и о некоторых его недостатках - тоже). Полагаю, что тот, кому знаком html и javascript и кого связывают возможности контролов AHK Gui свой выбор уже сделал.

Или вы не украшательства имели в виду?

39 (изменено: mozers, 2017-04-07 11:09:32)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Не... Я просто о том, что если кому то (как мне, например) ближе html, то он может реализовать вполне приличный GUI на нем.
Никакой ущербности по сравнению с ahk Gui в таком интерфейсе не будет. Только надо все правильно сделать по предложенному шаблону.

По поводу вывода свойств элемента при FixIE(1). Что означают значения выводимые заглавными буквами и как их можно применить для практической цели - я не в курсе - надо разбираться.

40

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

Уважаемые модераторы, может стоит создать тему "AHK: Подключение к DOM внешнего HTML документа" и перенести последние 7 постов туда? (Тематика уже ушла от заголовка, а диалог только начинается. Еще про подключение к HTA ничего не говорили...)

Последние 7 сообщений перенесены в новую тему AHK: Подключение к DOM внешнего HTML документа.

41

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Недочеты исправлены. Всем огромное СПАСИБО за замечания и предложения.
Поместил шаблон в Коллекцию.

42

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Скажите пожалуйста, как правильно в этом случае описать подключение Jquery и подобных фреймворков, чтобы пользоваться ими в этом контроле?

Сделал было стандартную запись под мета-тегами в "head", файла  "interface.html", но при запуске получаю сообщение об ошибке "Script error" с URL, указанным в "src". При локальном размещении библиотеки, текст ошибки сообщает, что: - "Объект не поддерживает свойство или метод 'addEventListener'".

43

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Так работает:

html =
(
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>
)
Gui, Add, ActiveX, w500 h500 vwb +VScroll +HScroll,  about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
wb.document.open()
wb.document.write(html)
wb.document.close
wb.refresh()
gui, show
return

44 (изменено: mozers, 2017-11-26 22:29:51)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

KusochekDobra, addEventListener IE не поддерживает.
Динамически добавить обработку события в веб контрол можно так (без всяких JQuery):

document.attachEvent('onmousemove', mySuperFunction);

45

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

addEventListener IE не поддерживает

Вы уверены?
https://msdn.microsoft.com/ru-ru/ff975825

46

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers, я просто описал ответ среды на мои невежественные попытки наладить контакт с помощью пинков и матерных выражений. Я ещё во многом - "глупое донышко", нуждающееся в грамотном руководстве. А вообще, Ваше решение использовать этот контрол как универсальный инструмент в мир интерактивных объектов, которыми в гораздо большей степени пестрят браузеры, чем это представляет AHK, вспомнилось недавно. Остро встал вопрос о визуальном представлении различных данных в больших объёмах, для анализа, для чего графики подходят идеально. Вначале помучил XGraph. Не нашёл способа отобразить в одном контроле более одной кривой. Возня с наложением прозрачных окон друг на друга с последующим их синхронным перемещением, в случае перемещения любого из слоёв, не выдержала критики, а после нахождения обсуждения, где ответ Malcev остановил мои поиски решения, в котором дочерние окна не могут получить прозрачность через "WinSet", я наткнулся на "RMChart". Древний проект, который уже и своей страницы не имеет. Поднял на этом деле ещё немного логической грамотности, но это тоже всё, такой крюк... Нашёл опять на Сером форуме обсуждения, где можно бы всё это намутить средствами "GDI+" и, тут я вспомнил про Вашу поделку, пример которой я благополучно поимел в свой локальный сборник интересностей ещё на стадии обсуждения.

Небольшой опыт в HTML у меня есть, благодаря прошлым наводкам на годную инфу от Malcev и написании своей первой странички на бесплатном хостинге. Так что меня буквально зацепила возможность реализовать это таким же простым и понятным синтаксисом как AHK, на js. Выбрал в качестве жертвы Flot, но для него требуется Jquery. По мере времени, осваиваю. Прекрасно работает. Так что мой Вам низкий поклон, за эту превосходную наводку!

47

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Malcev, если

текст ошибки сообщает, что: - "Объект не поддерживает свойство или метод 'addEventListener'"

то это - правда. В полноценный браузер поддержку вставили, а в ahk веб-контроле и в mshta (в котором я, практически, живу) - такой поддержки как не было так и нет.

KusochekDobra, еще могу порекомендовать jqplot - тоже неплохой фрейворк для построения графиков.

48

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

mozers пишет:

то это - правда.

Неправда.
Насчет mshta не знаю, но в ахк можно либо через реестр нужную эмуляцию вписать, либо через:

Gui, Add, ActiveX, w500 h500 vwb +VScroll +HScroll,  about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">

В теме про ahkspy мы это недавно обсуждали.
Можете почитать.

49

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Поддерживаю последнее утверждение, хотя, пока и не особо полноценно понимаю связь одного с другим. Встречал упоминания здесь, перед тем, как задать вопрос, но в силу лютой безграмотности не придал этому должного внимания.

50

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Malcev, не поленился, попробовал. И действительно

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Просто какой то "крест животворящий". В HTA, кстати, тоже.

51

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

А есть ли возможность корректной записи подключаемых библиотек с локальной машины?
Запись такого вида работает:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

А такого, нет:


<script type="text/javascript" src="myLibFolder/jquery.min.js"></script>

Всё ничего, да вот связь с внешним миром у меня иногда "долгая" и на готовности приложения к работе это сказывается однозначно. Особенно в процессе отладки, когда приходится часто делать перезапуск.

52

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Указывайте абсолютный путь.

53 (изменено: KusochekDobra, 2018-01-17 17:56:57)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Malcev пишет:

Так работает:

html =
(
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>
)
Gui, Add, ActiveX, w500 h500 vwb +VScroll +HScroll,  about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
wb.document.open()
wb.document.write(html)
wb.document.close
wb.refresh()
gui, show
return

Скажите пожалуйста, как в этом примере добиться реакции AHK на нажатие "<button>Start Animation</button>", как, например, вызываются функции AHK при нажатии кнопок в HTML в примере от mozers?

На этом примере, передать в AHK функцию "div", чтобы записать его "css" в файл, или получить из тела вызванной функции, доступ к DOM, чтобы сделать то же самое.

UPD:
Разобрался. Нужно было подождать загрузки:


while (wb.ReadyState != 4)
	Continue
	
bEvent := wb.document.getElementById("saveChanges")
ComObjConnect(bEvent, "MyB_")

MyB_OnMouseUp() {
	MsgBox,,Title,Клик!
}

Ещё раз спасибо Malcev за подробные примеры!

54 (изменено: KusochekDobra, 2018-01-19 04:18:59)

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

А как, например, из кода AHK получить результат вычислений, хранящиеся в JavaScript коде, или передать их в AHK, например, JSON строкой? Возможно ли?

UPD:
Разобрался. Обращение к переменным из события по той же кнопке из примера выше:


MyB_OnMouseUp(this) {
	MsgBox,,Title,% "myVar = " this.document.parentwindow.myVar
}

55

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Тема очень интересная и я уже давно ей заинтересовался, но вот проблемки возникли, как можно перетаскивать GUI за div (я хочу сделать интерфейс полностью на html). Затем.. Можно ли изменить как-то скролл у body (не только цвет, но и ширину)? Есть ли какие-то поля как в GUI - HotKey?

Win10: LTSC (21H2); AHK: ANSI (v1.1.36.02)

56

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Вы, верно, не так понимаете, на чём основан этот "симбиоз". Здесь GUI не замещается элементами гипертекстовой разметки, а всего лишь дополняет ими себя, расширяя таким образом свои возможности в ActiveX контроле. Сам контрол всегда остаётся частью GUI, как, например, контрол Button, или Edit.

Остальные Ваши вопросы находятся вне контекста Autohotkey и более подробно описаны на посвящённых для этого ресурсах, свободно доступных в поиске.

Если интересуют именно GUI нестандартных форм, то поищите по форуму. Недавно видел здесь довольно забавные поделки на чистом AHK.

57

Re: AHK: GUI HTML интерфейс (шаблон для любого проекта)

Почему у скомпиленного скрипта отображает не так, как в исходнике?

Win10: LTSC (21H2); AHK: ANSI (v1.1.36.02)