Jump to content
Israel

Highlight element in my web page

Recommended Posts

Israel

Good afternoon everyone,

I have a problem and need help. I need to highlight each element that receives a click in my web page, such as the automation of a tutorial in which I highlight the elements that I click.

Follow the attached image, the highlighted element will  the clicked.


Does anyone know how to help me?

Israel

Sem título.jpg

Share this post


Link to post
Share on other sites
Israel

JohnOne,

I gave the tutorial example, but not is tutorial. I'm making a script that captures the element in the mouse position, then I wanted to highlight the captured element

Share this post


Link to post
Share on other sites
Chimp

Hi Israeel

Could you post the script that captures the element at the mouse position?
Once you have the reference to the element, then is quite easy to highlight the captured element.


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
Israel
Func _Capturar()
 
   Local $doc = _IEDocGetObj($oie)
   If @error Then
      Exit(1)
   Else
      Local $aPos = MouseGetPos() ; position the mouse on the screen
      Local $evt = $doc.createEventObject() ; position the event
      Local $sl = $doc.body.scrollLeft
      Local $st = $doc.body.scrollTop
      Local $x = $aPos[0] - $oIE.document.parentwindow.screenLeft ; get the element in the mouse position
      Local $y = $aPos[1] - $oIE.document.parentwindow.screenTop
      Local $oElement = $doc.elementFromPoint($x, $y)
 
      return $oElement
   Endif
 
endFunc

Chimp,

Above is my code. This function returns me the captured element and wanted to highlight this element.

Share this post


Link to post
Share on other sites
Chimp

Hi

using your function it seems that on my system it does not return any obj

here is how I would do (debug line I've added at bottom of your function prints a 0, that means $oElement is not an object ) :

#include <ie.au3>
Local $obj, $style_save, $oie

$oie = _IECreate("www.google.com") ; open a simple page to try
While 1
    $obj = _Capturar($oie)
    $style_save = $obj.style.border ; save previous border if any
    For $x = 1 To 5 ; flash the red border
        $obj.style.setAttribute('border', '5px solid red') ; drraw a red border
        Sleep(100)
        $obj.style.setAttribute('border', $style_save) ; restore original border
    Next
WEnd

Func _Capturar($oie)

    Local $doc = _IEDocGetObj($oie)
    If @error Then
        ConsoleWrite("Error>" & @CRLF)
        Exit (1)
    Else
        Local $aPos = MouseGetPos() ; position the mouse on the screen
        Local $evt = $doc.createEventObject() ; position the event
        Local $sl = $doc.body.scrollLeft
        Local $st = $doc.body.scrollTop
        Local $x = $aPos[0] - $oie.document.parentwindow.screenLeft ; get the element in the mouse position
        Local $y = $aPos[1] - $oie.document.parentwindow.screenTop
        Local $oElement = $doc.elementFromPoint($x, $y)
        ConsoleWrite("Debug: IsObj -> " & IsObj($oElement) & @CRLF)
        Return $oElement
    EndIf

EndFunc   ;==>_Capturar

 

Edited by Chimp
  • Like 1

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
JohnOne

Sorry, when people say "My" website or page, I instinctively think it's "Your" websites or page".

This sort of stuff would be easier done serverside.

Didn't mean to waste your time sugar tits

 


AutoIt Absolute Beginners    Require a serial    Pause Script    Video Tutorials by Morthawt   ipify 

Monkey's are, like, natures humans.

Share this post


Link to post
Share on other sites
Israel

Chimp,

I've done the Treatment Failure to return an object, but in A Separate Function.

The code worked perfectly! Thanks!


Israel

Edited by Israel

Share this post


Link to post
Share on other sites
Chimp

Hi Israel, I'm glad it worked for you.

p.s.
I would be interested to see the working version of your function.


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
Israel

Chimp,

I can not offer many details, because my application is developed in my work which involves secrecy. However, it is very simple. A design of a recorder with some specific functions, the autoit recorder does not offer many features.

I have attached two files with examples of UDF in which the author creates a label around the element in the GUI and highlights of this label with some effects.

Do you think can do the same for Web? So we would need not change the HTML. What do you think?

BackEffect.au3

BackEffect_Exemple.au3

Edited by Israel

Share this post


Link to post
Share on other sites
Chimp

perhaps this draft could be a start

#include <IE.au3>
Local $oIE = _IECreate("http://www.google.com")
Local $oDoc = _IEDocGetObj($oIE)
Local $oElement, $oElement_save, $style_save
Local $oIE_hwnd = _IEPropertyGet($oIE, "hwnd")
While WinExists($oIE_hwnd)
    $oElement = _GetElement($oIE, $oDoc)
    If IsObj($oElement) Then
        If $oElement <> $oElement_save Then
            If IsObj($oElement_save) Then
                $oElement_save.style.setAttribute('border', $style_save) ; restore original border
                $style_save = $oElement.style.border ; save original border
                $oElement_save = $oElement
            Else
                $style_save = $oElement.style.border ; save original border
                $oElement_save = $oElement
            EndIf
            $oElement.style.setAttribute('border', '2px solid lightgreen') ; drraw a green border
        EndIf
    EndIf
WEnd
Func _GetElement(ByRef $oIE, ByRef $doc)
    Local $aPos = MouseGetPos()
    Local $sl = $doc.body.scrollLeft
    Local $st = $doc.body.scrollTop
    Local $x = $aPos[0] - $oIE.document.parentwindow.screenLeft
    Local $y = $aPos[1] - $oIE.document.parentwindow.screenTop
    Return $doc.elementFromPoint($x, $y)
EndFunc   ;==>_GetElement

 

Edited by Chimp
modified listing as suggested by JohnOne on next post

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
JohnOne

I think the following line could cause a problem if the IE window is closed...

While WinExists(_IEPropertyGet($oIE, "hwnd"))

_IEPropertyGet will be tested first before WinExists and fail.

Get the window handle before the loop starts, and use that in while condition.


AutoIt Absolute Beginners    Require a serial    Pause Script    Video Tutorials by Morthawt   ipify 

Monkey's are, like, natures humans.

Share this post


Link to post
Share on other sites
Chimp

Done.

Thanks JohnOne for the suggestion

p.s.
I copied and pasted that line from example 5 of the  _IEHeadInsertEventScript function in the help.


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
Israel

JohnOne, Chimp

I tested here and it worked perfectly, but had thought of something that does not change the html but create an border distinct the margin the element.

Because has element example dropdown who accept not border.

Edited by Israel

Share this post


Link to post
Share on other sites
Chimp

This listing provides an effect similar to that illustrated in your example (a moving frame that lights the DOM obj behind the mouse pointer), without affecting the source code of the web page.

p.s. The View Zoom on the IE browser must be set to 100% to work properly

#include <IE.au3>
#include <WinAPI.au3>
#include <GUIConstantsEx.au3>
; #include <WinAPIEx.au3>
#include <WindowsConstants.au3>

Local $oIE = _IECreate("https://www.autoitscript.com/forum/")
Local $oDoc = _IEDocGetObj($oIE)
Local $oIE_hwnd = _IEPropertyGet($oIE, "hwnd")
Local $oElement, $oElement_save, $aMousePos
Local $aBrowserPos[6] ; x , y , width , height , x right , y bottom
Local $aOverlayPos[4] ; coordinates of the overlay frame
; Create a Phantom window with a visible frame
Local $aParentPos, $AlphaKey = 0xABABAB
Local $iBorderColor = 0x00FF00, $iBorderThickness = 5
$hOverlay = GUICreate("", -50, -50, 10, 10, $WS_POPUPWINDOW, $WS_EX_LAYERED + $WS_EX_TOPMOST) ; transparent
$Panel = GUICreate("", 48, 48, 10, 10, $WS_CHILD + $WS_VISIBLE, -1, $hOverlay) ; this new window becomes a child of $hOverlay window
GUISetBkColor($iBorderColor, $hOverlay)
GUISetBkColor($AlphaKey, $Panel)
_WinAPI_SetLayeredWindowAttributes($hOverlay, $AlphaKey, 0, $LWA_COLORKEY)
GUISetState(@SW_SHOW, $hOverlay)

While WinExists($oIE_hwnd)
    $aMousePos = MouseGetPos()
    ; Now we get reference to the DOM object behind the mouse pointer
    $oElement = $oDoc.elementFromPoint($aMousePos[0] - $oIE.document.parentwindow.screenLeft, $aMousePos[1] - $oIE.document.parentwindow.screenTop)
    If IsObj($oElement) And $oElement <> $oElement_save Then
        $oElement_save = $oElement
        $aBrowserPos[0] = Int($oIE.document.parentwindow.screenLeft) ;      X position on the desktop of the left edge of the browser
        $aBrowserPos[1] = Int($oIE.document.parentwindow.screenTop) ;       Y position on the desktop of the top border of the browser
        $aBrowserPos[2] = Int($oIE.document.documentElement.clientWidth) ;  Width of browser's client area
        $aBrowserPos[3] = Int($oIE.document.documentElement.clientHeight) ; Height of browser's client area
        $aBrowserPos[4] = $aBrowserPos[0] + $aBrowserPos[2] ;               X position on the desktop of the right border of the browser
        $aBrowserPos[5] = $aBrowserPos[1] + $aBrowserPos[3] ;               Y position on the desktop of the bottom border of the browser
        ;
        $oRect = $oElement.getBoundingClientRect() ; coordinates of the DOM object within the client area of the browser
        ;
        $aOverlayPos[0] = Int($oRect.left) + $aBrowserPos[0] ; X position of the left overlay border (absolute desktop coordinates)
        If $aOverlayPos[0] < $aBrowserPos[0] Then $aOverlayPos[0] = $aBrowserPos[0] ; if left border of the DOM obj is out of browser, overlay border stays anyway within the screen
        $aOverlayPos[1] = Int($oRect.Top) + $aBrowserPos[1] ; Y  position of the top overlay border
        If $aOverlayPos[1] < $aBrowserPos[1] Then $aOverlayPos[1] = $aBrowserPos[1] ; if top border of obj is out of browser, overlay border stays anyway within the screen
        $aOverlayPos[2] = Int($oRect.right - $oRect.left) ; width of the obj
        If $aOverlayPos[0] + $aOverlayPos[2] > $aBrowserPos[4] Then $aOverlayPos[2] = $aBrowserPos[4] - $aOverlayPos[0] ; if obj's width is out of bounds, force the edge within the browser
        $aOverlayPos[3] = Int($oRect.bottom - $oRect.top) ; Height of the obj
        If $aOverlayPos[1] + $aOverlayPos[3] > $aBrowserPos[5] Then $aOverlayPos[3] = $aBrowserPos[5] - $aOverlayPos[1] ; stay within browser's bounds
        ;
        WinMove($hOverlay, "", $aOverlayPos[0], $aOverlayPos[1], $aOverlayPos[2], $aOverlayPos[3])
        $aParentPos = WinGetPos($hOverlay) ; x, y, width, height
        WinMove($Panel, "", $iBorderThickness - 1, $iBorderThickness - 1, Int($aParentPos[2] - $iBorderThickness * 2), Int($aParentPos[3] - $iBorderThickness * 2))
    EndIf
WEnd

 

  • Like 1

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

×