Jump to content
Sign in to follow this  
Chimp

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

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

Share this post


Link to post
Share on other sites

Where is "Doctor Who" ? ;)

 


Signature beginning:   Wondering who uses AutoIT and what it can be used for ?
* GHAPI UDF - modest beginning - communication with GitHub REST API Forum Rules *
ADO.au3 UDF     POP3.au3 UDF     XML.au3 UDF    How to use IE.au3  UDF with  AutoIt v3.3.14.x  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 *

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 * 

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 TaskScheduler

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 *

"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: 2019-10-01

Share this post


Link to post
Share on other sites

error: _ArrayShuffle(): undefined function. Got me to update my AutoIT!

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

Example()
Exit

Func Example()

 

Share this post


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.


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

Share this post


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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By mdwerne
      Hello,
      Before Broadcom took over Symantec, I was able to use the following code as the base to scrape daily definition downloads from the web. Since the pages were moved over to the Broadcom web servers, I get a page full of what I believe may be JavaScript instead of the fully rendered page that lies behind it. Does anyone have any suggestions as to how I can read the full rendered webpage using AutoIt?
      #include <IE.au3> $oIE_DEFS = _IECreate("https://www.broadcom.com/support/security-center/definitions/download/detail?gid=sep14", 0, 0, 1, 1) $sString_DEFS = _IEBodyReadHTML($oIE_DEFS) MsgBox(0, "https://www.broadcom.com/support/security-center/definitions/download/detail?gid=sep14", $sString_DEFS) The above code will show the JavaScript, but if you go to the URL in a browser that has JavaScript enabled, you will see the fully rendered page that I would like to access. I hope my question makes sense, and I would appreciate any suggestions to get this working again.
      All the best,
      -Mike
    • By tarretarretarre
      Autoit-Socket-IO
      Introduction
      Autoit-Socket-IO is a event driven TCP/IP wrapper heavily inspired from Socket.IO with focus on user friendliness and long term sustainability.
      I created this UDF because I was fascinated how Socket.IO made a such scary task "reliable and secure networking" so simple for the developer. So this was my main motivation.
      I constantly want to make this UDF faster and better, so if you have any suggestions. Do not hesitate to make requests!
      Features
      Flexiable and easy to understand API Above avarage documentation "Fully featured" examples Security in form of data encryption and middleware-support Limitations
      Speed. Because I want this UDF to be as flexible and simple as possible. Sometimes speed is sacrificed, but that does not mean i don't try to . It is not possible to emit objects mainly because autoit does not support serialization. Only 1D-arrays can be emitted (2D arrays will probably never be supported) Success story
      Since December 2017-now I have used version 1.5.0 in an production environment for 40+ clients with great success, the only downtime is planned windows updates and power outages.
      Getting started
      Download the script from AutoIt or pull it from the official github repo git@github.com:tarreislam/Autoit-Socket-IO.git and checkout the tag 2.0.0 The documentation is located at Docs\index.html Take a look in the examples/ folder Changelog
      Version 2.0.0 (This update break scripts. Please consult the upgrade.md for guidance)
      All global internal variables has been renamed. Added a bunch of new API methods: _Io_RegisterMiddleware, _Io_whoAmI, _Io_IsClient, _Io_IsServer, _Io_getAllByProperty and _Io_getFirstByProperty and some more. Read more about these in the documentation. _Io_socketGetProperty now has a setter method called _Io_socketSetProperty which can be used to set custom properties. _Io_socketGetProperty now has a third parameter "default" which is used when a property is not found Removed _Io_setEventPostScript and _Io_setEventPretScript in favor of _Io_RegisterMiddleware Improved documentation (It still needs some love though) Improved the verbosity of _Io_DevDebug  
      Newest version (2019-09-29!)
      Autoit-Socket-IO-2.0.0.zip
      Older versions (Not supported anymore)
      Autoit-Socket-IO-1.0.0.zip Autoit-Socket-IO-1.1.0.zip Autoit-Socket-IO-1.3.0.zip Autoit-Socket-IO-1.4.0.zip Autoit-Socket-IO-1.5.0.zip
    • By Chimp
      Making the integration between AutoIt and the BrowserControl easier may facilitate the development of interesting programs. Just think of all those (fantastic) libraries and frameworks available for javascript that could be integrated and exploited in an AutoIt program. For example, to graphically present the results of an AutoIt processing in the GUI, ... and many other possibilities. Providing the basic functions to implement this synergistic interaction is the purpose of this post (if for no other reason, just even to collect some tests done over time here and there, so as not to leave them scattered and easily find them in just one place)
      In this UDF there are only a few functions (or better if called wrappers), but I hope to add more as I go and, even better, to receive suggestions and advice on new features and techniques to improve and expand it.
      _WebBrowser_GUICtrlCreate Create an Internet Explorer 'Browser Control' _WebBrowser_SetHTML Set a new HTML listing in the BrowserControl _WebBrowser_CSS_Inject Creates into the html document a CSS node element with embedded the passed CSS _WebBrowser_JS_Inject Creates into the html document a javascript node element with embedded the passed javascript _WebBrowser_JS_Eval Evaluates a passed string as JavaScript code and executes it _WebBrowser_JS_setTimeout Calls a javascript function or executes a javascript code snippet [option after a specified delay] _WebBrowser_JS_ElementGetRef Retrieves a reference to an element suitable to be used from AutoIt _WebBrowser_ExecuteDotNotation Get a reference to an object's child member or the value of a property, by means of a dotted path _WebBrowser_BasicHTML Returns a basic html page listing (a little enhanced than about:blank) The three examples provided in the attached ziped file are a bit 'improvised' and do not take advantage of all the possibilities offered by the underlying javascript libraries used. They are just three "hello world" scripts to test the ABC of the interaction with the "BrowserControl".
      (ToDo: Interaction with javascript custom events)
      Bug reports, creative criticisms and suggestions (particularly regarding the interaction with javascript custom events) are welcome
      I hope you can have fun with the Browser Control
      BrowserControl.zip
    • By Phil1991
      Hi,
      I'm working on an interface and I have a problem with zoom management. In desktop mode it works and in android cell mode it seems to work fine too. However, on a Windows tablet, it seems to have a problem ... Basically what I'm trying to do is display a modal in bootstrap 4. But when on the tablet I zoom, my modal s really big and out of my screen. On the android mobile, I remove the zoom before displaying the modal but on the Windows tablet I am unable to reproduce the same behavior.
       
      My toggle function to reset zoom before display modal  ( Yeah it maybe sketches but I'm not find other solutions)
      function resetZooming() { if (zoomOut) { $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1'); setTimeout(resetZooming, 1000); zoomOut = false; }else{ $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0'); zoomOut = true; } } And I call this function under my event
      $("#modalCreationForm").modal("show"); resetZooming();  
      If you have any ideas
      Thank you
×
×
  • Create New...