By
Chimp
This is a little experiment that makes use of a "Browser Control" embedded in a GUI in order to be able to use AutoIt, HTML, JavaScript and CSS all together.
This little toy will only work on systems with IE11.
The purpose is to drag all the names of the scientists & drop on the right ones. (among scientists it has also infiltrated an intruder). I hope you find it entertaining.
I've posted it here in the hope to have some suggestions on how to improve it all (I mean the interaction between Autoit Javascript html and css). Thanks
; this works on systems with IE11
; -------------------------------
#include <GUIConstantsEx.au3>
#include <array.au3>
Global $oIE, $oDocument, $ohJS, $sDroping
Global $iCorrect = 0, $iGoal = 11
Example()
Exit
Func Example()
Local $aScientists[12][2] = _
[["Schrodinger", "Schrodinger"],["Planck", "Planck"],["Pauli", "Pauli"],["Einstein", "Einstein"], _
["Chimp", "Chimp"],["Dirac", "Dirac"],["Heisenberg", "Heisenberg"],["Born", "Born"], _
["De Broglie", "De_Broglie"],["Bohr", "Bohr"],["Sommerfeld", "Sommerfeld"],["", "empty"]]
Local $oIE = ObjCreate("Shell.Explorer.2") ; Create a BrowserControl
Local $hGUI = GUICreate("", 660, 600, 30, 30)
GUICtrlCreateObj($oIE, 0, 0, 660, 600) ; Place BrowserControl on the GUI
GUISetState() ;Show GUI
$oIE.navigate('about:blank') ; file:///' & @ScriptDir & '\WhoIsWho.html')
While Not String($oIE.readyState) = 'complete' ; wait for about:blank
Sleep(100)
WEnd
; this waits till the document is ready to be used (portion of code from IE.au3)
While Not (String($oIE.readyState) = "complete" Or $oIE.readyState = 4)
Sleep(100)
WEnd
While Not (String($oIE.document.readyState) = "complete" Or $oIE.document.readyState = 4)
Sleep(100)
WEnd
$oIE.document.Write(_GetHTML()) ; inject lising directly to the HTML document:
$oIE.document.close() ; close the write stream
$oIE.document.execCommand("Refresh")
While Not String($oIE.readyState) = 'complete' ; wait for readyState after a refresh
Sleep(100)
WEnd
; https://msdn.microsoft.com/en-us/library/52f50e9t(v=vs.94).aspx
; $ohJS is a reference to the javascript Global Obj
; -------------------------------------------------
$ohJS = $oIE.document.parentwindow.JSglobal
$oDocument = $oIE.document
Local $oTable1 = $ohJS.table1
Local $oTable2 = $ohJS.table2
_Randomize($aScientists, $oTable1)
; --- Setup events ------------
; https://msdn.microsoft.com/en-us/library/hh801967(v=vs.85).aspx
Local $aoEventObject[2]
$aoEventObject[0] = ObjEvent($oTable1, "IEEvent_", "HTMLTableEvents2")
$aoEventObject[1] = ObjEvent($oTable2, "IEEvent_", "HTMLTableEvents2")
; -----------------------------
; Loop until the user exits.
While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
ExitLoop
EndSwitch
If $iCorrect = $iGoal Then
_Goal()
_Randomize($aScientists, $oTable1)
$iCorrect = 0
EndIf
WEnd
; the end
For $i = 0 To UBound($aoEventObject) - 1
$aoEventObject[$i] .stop
Next
$aoEventObject = 0 ; Kill the Event Object
$oIE = 0 ; Remove IE from memory (not really necessary).
GUIDelete($hGUI) ; Remove GUI
EndFunc ;==>Example
; --- event management zone ---
; following functions are fired by events occurred in the browser control
Volatile Func IEEvent_onDragstart($oEvent)
; we save the ID of the dragged obj into the $sDroping variable
; for a later use in the drop function
$sDroping = $oEvent.srcElement.ID
EndFunc ;==>IEEvent_onDragstart
Volatile Func IEEvent_onDragOver($oEvent)
$ohJS.event.preventDefault()
EndFunc ;==>IEEvent_onDragOver
Volatile Func IEEvent_onDrop($oEvent)
$ohJS.event.preventDefault()
If $sDroping <> "" Then
If $oDocument.getElementById($sDroping).innerText <> $oEvent.srcElement.innerText Then
If $oEvent.srcElement.ClassName = $oDocument.getElementById($sDroping).ClassName Then
$oEvent.srcElement.innerText = $oDocument.getElementById($sDroping).innerText
$oDocument.getElementById($sDroping).innerText = ""
$oDocument.getElementById($sDroping).draggable = False
$oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #80ff80;"
$iCorrect += 1
Else
For $i = 1 To 3
$oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #ff0000;"
Sleep(125)
$oDocument.getElementById($sDroping).setAttribute("style") = "background-color: #ffffff;"
Sleep(125)
Next
EndIf
EndIf
$sDroping = ""
EndIf
EndFunc ;==>IEEvent_onDrop
Func _Randomize(ByRef $aScientists, ByRef $oTable)
Local $iRows = ($oTable.rows.length) - 1
Local $iCols = ($oTable.rows.item(0).cells.length) - 1
Local $index
_ArrayShuffle($aScientists)
For $y = 0 To $iRows
For $x = 0 To $iCols
$index = ($y * ($iCols + 1)) + $x
$oTable.rows.item($y).cells.item($x).innerText = $aScientists[$index][0] ; text
$oTable.rows.item($y).cells.item($x).className = $aScientists[$index][1] ; class
$oTable.rows.item($y).cells.item($x).draggable = $aScientists[$index][0] <> ""
Next
Next
EndFunc ;==>_Randomize
Func _Goal()
Local $oTable1 = $ohJS.table1 ; names
Local $oTable2 = $ohJS.table2 ; photos
Local $iRows = ($oTable1.rows.length)
Sleep(250)
Local $iCols = 6 ; ($oTable1.rows.item(0).cells.length)
Local $aIndex[$iRows * $iCols], $sTemp
For $i = 0 To UBound($aIndex) - 1
$aIndex[$i] = $i ; + 1
Next
_ArrayShuffle($aIndex)
For $i = 0 To UBound($aIndex) - 1
$oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).innerText = ""
$oTemp0 = $oTable2.rows
$oTemp1 = $oTemp0.item(Int($aIndex[$i] / $iCols)).cells
$oTemp2 = $oTemp1.item(Mod($aIndex[$i], $iCols)).getAttribute("style")
$oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: " & _rndColor()
Sleep(100); MsgBox(0,"Debug",$sTemp)
$oTable2.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = $oTemp2
Next
For $x = 1 To 2
For $i = 0 To UBound($aIndex) - 1
$oTable1.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: " & _rndColor()
Sleep(100)
$oTable1.rows.item(Int($aIndex[$i] / $iCols)).cells.item(Mod($aIndex[$i], $iCols)).setAttribute("style") = "background-color: #ffffff;"
Next
Next
EndFunc ;==>_Goal
Func _rndColor()
Return String("#" & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & ";")
EndFunc ;==>_rndColor
Func _GetHTML()
Local $sHTML = _
"<!DOCTYPE HTML>" & @CRLF & _
"<html>" & @CRLF & _
"<head>" & @CRLF & _
"<meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />" & @CRLF & _
" <script type=""text/javascript"">" & @CRLF & _
" var JSglobal = (1,eval)(""this"");" & @CRLF & _
" </script>" & @CRLF & _
"</head>" & @CRLF & _
"<body>" & @CRLF & _
"<h2>Who is who?</h2>" & @CRLF & _
"<p>Drag&Drop names on the right scientist</p>" & @CRLF & _
"<img src=""https://i.imgur.com/STWql7w.jpg""" & @CRLF & _
"height=""394"" width=""640""" & @CRLF & _
"style=""position: absolute; left: 10px; top: 100px;"">" & @CRLF & _
"" & @CRLF & _
"<style>" & @CRLF & _
".target td {width: 100px; height: 160px; text-align: center; color: white; font-weight: bold; vertical-align: bottom; border: 0px solid grey;}" & @CRLF & _
".source td {width: 100px; height: 30px; text-align: center; border: 1px solid red;}" & @CRLF & _
"</style>" & @CRLF & _
"" & @CRLF & _
"<table class=""target"" style=""position: absolute; left: 25px; top: 100px;"" id=""table2"">" & @CRLF & _
" <tr><td class=""Schrodinger""></td><td class=""Planck""></td><td class=""Pauli""></td><td class=""Einstein""></td><td class=""Chimp""></td><td class=""Dirac""></td></tr>" & @CRLF & _
" <tr><td class=""Heisenberg""></td><td class=""Born""></td><td class=""De_Broglie""></td><td class=""Bohr""></td><td class=""Sommerfeld""></td><td class=""empty""></td></tr>" & @CRLF & _
"</table>" & @CRLF & _
"" & @CRLF & _
"<table class=""source"" style=""position: absolute; left: 10px; top: 504px;"" id=""table1"">" & @CRLF & _
" <tr><td ID=""td1""></td><td ID=""td2""></td><td ID=""td3""></td><td ID=""td4"" ></td><td ID=""td5"" ></td><td ID=""td6"" ></td></tr>" & @CRLF & _
" <tr><td ID=""td7""></td><td ID=""td8""></td><td ID=""td9""></td><td ID=""td10""></td><td ID=""td11""></td><td ID=""td12""></td></tr>" & @CRLF & _
"</table>" & @CRLF & _
"</body>" & @CRLF & _
"</html>"
Return $sHTML
EndFunc ;==>_GetHTML