Jump to content

Who is Who ? (a little drag&drop game)


Recommended Posts

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

 

Edited by Chimp
little correction on the red flash effect on error when dropping on wrong scientist

 

image.jpeg.9f1a974c98e9f77d824b358729b089b0.jpeg Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Link to post
Share on other sites

Where is "Doctor Who" ? ;)

 

Signature beginning:
Please remember: "AutoIt"..... *  Wondering who uses AutoIt and what it can be used for ? * Forum Rules *
ADO.au3 UDF * POP3.au3 UDF * XML.au3 UDF * IE on Windows 11 for other useful stuff click the following button:

Spoiler

Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind. 

My contribution (my own projects): * Debenu Quick PDF Library - UDF * Debenu PDF Viewer SDK - UDF * Acrobat Reader - ActiveX Viewer * UDF for PDFCreator v1.x.x * XZip - UDF * AppCompatFlags UDF * CrowdinAPI UDF * _WinMergeCompare2Files() * _JavaExceptionAdd() * _IsBeta() * Writing DPI Awareness App - workaround * _AutoIt_RequiredVersion() * Chilkatsoft.au3 UDF * TeamViewer.au3 UDF * JavaManagement UDF * VIES over SOAP * WinSCP UDF * GHAPI UDF - modest begining - comunication with GitHub REST APIErrorLog.au3 UDF - A logging Library * Include Dependency Tree (Tool for analyzing script relations) *

My contribution to others projects or UDF based on  others projects: * _sql.au3 UDF  * POP3.au3 UDF *  RTF Printer - UDF * XML.au3 UDF * ADO.au3 UDF SMTP Mailer UDF * Dual Monitor resolution detection * * 2GUI on Dual Monitor System * _SciLexer.au3 UDF * SciTE - Lexer for console pane

Useful links: * Forum Rules * Forum etiquette *  Forum Information and FAQs * How to post code on the forum * AutoIt Online Documentation * AutoIt Online Beta Documentation * SciTE4AutoIt3 getting started * Convert text blocks to AutoIt code * Games made in Autoit * Programming related sites * Polish AutoIt Tutorial * DllCall Code Generator * 

Wiki: Expand your knowledge - AutoIt Wiki * Collection of User Defined Functions * How to use HelpFile * Good coding practices in AutoIt * 

OpenOffice/LibreOffice/XLS Related: WriterDemo.au3 * XLS/MDB from scratch with ADOX

IE Related:  * How to use IE.au3  UDF with  AutoIt v3.3.14.x * Why isn't Autoit able to click a Javascript Dialog? * Clicking javascript button with no ID * IE document >> save as MHT file * IETab Switcher (by LarsJ ) * HTML Entities * _IEquerySelectorAll() (by uncommon) * IE in TaskSchedulerIE Embedded Control Versioning (use IE9+ and HTML5 in a GUI) * PDF Related:How to get reference to PDF object embeded in IE * IE on Windows 11

I encourage you to read: * Global Vars * Best Coding Practices * Please explain code used in Help file for several File functions * OOP-like approach in AutoIt * UDF-Spec Questions *  EXAMPLE: How To Catch ConsoleWrite() output to a file or to CMD *

I also encourage you to check awesome @trancexx code:  * Create COM objects from modules without any demand on user to register anything. * Another COM object registering stuffOnHungApp handlerAvoid "AutoIt Error" message box in unknown errors  * HTML editor

winhttp.au3 related : * https://www.autoitscript.com/forum/topic/206771-winhttpau3-download-problem-youre-speaking-plain-http-to-an-ssl-enabled-server-port/

"Homo sum; humani nil a me alienum puto" - Publius Terentius Afer
"Program are meant to be read by humans and only incidentally for computers and execute" - Donald Knuth, "The Art of Computer Programming"
:naughty:  :ranting:, be  :) and       \\//_.

Anticipating Errors :  "Any program that accepts data from a user must include code to validate that data before sending it to the data store. You cannot rely on the data store, ...., or even your programming language to notify you of problems. You must check every byte entered by your users, making sure that data is the correct type for its field and that required fields are not empty."

Signature last update: 2022-03-07

Link to post
Share on other sites
19 hours ago, wysocki said:

Brilliant piece of work!

Thanks :)

19 hours ago, wysocki said:

Newb question about coding technique though: Why put mainline code in a function instead of just inline?

Example()
Exit

Func Example()

 

Is in this way to better separate the scope of Local and Global variables
.. for a better explanation have a look here: https://www.autoitscript.com/wiki/Best_coding_practices#Scopes_of_Variables

p.s.

I've made a little variation in the script so to wait a ready state after a page refresh.

 

image.jpeg.9f1a974c98e9f77d824b358729b089b0.jpeg Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Iraj
      Greetings!
       
      I was exploring as I saw the below URL which reads the event logs from specific type (Application, Security, System, etc.)
      So, I was in need to read a specific event id instead of the type of event, i.e. I need to read event id 1074 which lands under Security type.
      Any assistance will be grateful.
       
      Happy new year in advance!!
    • By XGamerGuide
      👋 Hey
      I want to call a function when something changes on an element in my GUI. That should work for a combo box (with $CBS_DROPDOWNLIST) when I select an item and for a text input when I type.
    • By Gianni
      (This example uses a "flash" animation and therefore needs the "flash player" to work. Since "flash player" is discontinued and no longer present on many systems, this script may not work. I have therefore prepared a new script which does not use flash, but is based only on javascript. You can find it in this new post: www.autoitscript.com/forum/topic/206853-aquarium)
      If you set within a window, a given color as transparent, every area of that window painted with that color, act as an hole through wich you can see what's behind, and click on what's behind as well.
      What's funny is that if you embed a browser control within that window, the "transparent" color works even within the browser! This allow some interesting effects by simply opening any of the many javascript animations, or css effects or whatever within a browser control embedded into a GUI:
      Here, for example, is a simple effect of fishes swimming around on the screen.
      For lazyness I have embedded an ready made swf flash by a link to the web, but is of course possible embed any web page with javascripts css or whatever.....
      Have fun
      #include <WinAPI.au3> #include <WindowsConstants.au3> #include <Misc.au3> ; for _IsPressed (23 END key) Local $hDLL = DllOpen("user32.dll"), $oIE = ObjCreate("Shell.Explorer.2") Local $hBackground = GUICreate("", @DesktopWidth, @DesktopHeight, 0, 0, $WS_POPUPWINDOW, $WS_EX_LAYERED + $WS_EX_TOPMOST) Local $AlphaKey = 0xF0F7FF ; everything with color $AlphaKey within this window will be transparent ; even if within an embedded browser control!..... _WinAPI_SetLayeredWindowAttributes($hBackground, $AlphaKey, 0, $LWA_COLORKEY) GUISetState(@SW_SHOW, $hBackground) $hIE = GUICtrlCreateObj($oIE, 0, 0, @DesktopWidth, @DesktopHeight) ; <- embedd $oIE in the AutoIt GUI GUISetBkColor($AlphaKey, $hBackground) ; $AlphaKey $hBackground transparent $oIE.navigate('http://cdn.abowman.com/widgets/fish/fish.swf') ; $oIE.navigate('http://cdn.abowman.com/widgets/spider/spider.swf') ; a spider goes around on the screen .... ; !! to use the spider.swf, you need to set $AlphaKey = 0xffffff on line 7 "! While True If _IsPressed("23", $hDLL) Then ExitLoop ; END key was pressed Sleep(250) WEnd $oIE = "" $hDLL = "" GUIDelete($hBackground)  
    • By Gianni
      This script is an alternative (improvement) to the script published at this link (www.autoitscript.com/forum/topic/186225-interesting-effect-with-transparency). In that post a flash animation was used and therefore you need the flash player to work, while here only javascript is used.
      Here, too, the aim is to show an interesting effect that can be obtained by exploiting transparency, but can also be used as it is just for fun.
      The animation consists of some fish wandering around the screen. You can continue working on the computer by letting them swim.
      The javascript source was not written by me, but I got it from this link: https://github.com/lrusso/Aquarium. I shrunk it down a bit and tweaked it so that fish can swim across the entire screen even with different sized monitors.
      The fish images and html and javascript sources have been bundled into a single "monolithic" AutoIt script, so it's easier to run.
      I hope you find it relaxing.
      Have fun
      fishMonolitic.zip
    • By tarretarretarre
      About AutoIt-Events
      AutoIt-Events is an event Observer and is a core dependency for Autoit-Socket-IO but can be used for any Autoit project.
      Example
      #include "Event.au3" ; Subscribe listeners _Event_Listen(UserCreatedEvent, SendWelcomeMail) _Event_Listen(UserCreatedEvent, RegisterNewsLetter) ; Fire event _Event(UserCreatedEvent, @UserName, "tarre.islam@gmail.com") Func UserCreatedEvent(Const ByRef $oEvent, $name, $email) ; via $oEvent you can pass data to its listeners $oEvent.add("name", $name) $oEvent.add("email", $email) $oEvent.add("id", 1) EndFunc Func SendWelcomeMail(Const $oEvent) MsgBox(64, "Welcome mail sent", "Welcome mail sent to " & $oEvent.item("name") & " with email " & $oEvent.item("email")) EndFunc Func RegisterNewsLetter(Const $oEvent) MsgBox(64, "News letter registred", "News letter bound to user id " & $oEvent.item("id")) EndFunc  
      The code is also available at Github
       
      Autoit-Events-1.0.0.zip
×
×
  • Create New...