Looking for an Image Map overlay plugin? - html

I have an image map with two sides. User clicks Left side (A1 through A25)
Then clicks Right Side (B1 - B25). These clicks are all recorded into a database table.
I run a function that figures out which "Click Sequences" are the most frequently used and determines the top five pairs of coordinates. Let's say the top selection was: A5,B7
I need a plugin that will overlay "streak" images (that resemble a glowing arced line) from the left side coordinates to the right side coordinates with varying transparency/color?
So in our example, an arced line going from A5 over to B7..
Hope this makes sense.
Thanks!

Related

Is there a way to determine whether there's a sufficient amount of space in a Pie chart segment for a label?

In the attached Google charts Pie chart the labels fit well inside the segments. Determining the length of a bit of text in HTML5 canvas is easy enough - but how do you determine whether the label will fit into a particular segment (using trigonometry) ? As you can see on the image, two of the segments don't have labels inside the segment.
EDIT: Here's an example of what I have at the moment: https://www.rgraph.net/tests/canvas.pie/in-pie-labels.html
As you see the labels for the small segments overlap. What I'm after is a way to calculate whether there's enough space for the labels at the point where they're going to be rendered. If not, I can just not draw the label like in the example image above.
Could chord size be useful to do this?
Here's the forumulae for the chord size that I found via Google:
"Chord length using trigonometry = 2 × r × sin(θ/2); where 'r' is the radius of the circle and 'θ' is the angle subtended at the center by the chord."
I sorted it (in about one hour) after 3 days of trying to calculate it with trig by using the built-in context.isPointInPath() function...
Draw the text (transparent color) to get the coordinates (x/y/w/h) of it. You might be able to get away with measuring it to get the width and height.
Draw the segment in a transparent color and do not stroke or fill it. Also, do not close the path.
Test each corner of the text rectangle (formed the x/y/w/h that you got above) using the context.isPointInPath() function. If the function returns true for each corner of the rectangle formed by the coordinates of the text, then the text will fit into the segment.

pyautogui / pyscreeze - locate works w/o region parameter, but doesn't work w/ region parameter

Using pyautogui, I'm trying to locate an image on screen.
This finds the image (on primary monitor w/ 2560x1440 resolution), but takes nearly 5 sec:
icon1 = pyautogui.locateOnScreen('[filepath]\\icon1.png', grayscale=True)
To reduce search time, I provide a region parameter, but this doesn't find the image. It executes in ~0.7 sec
icon1 = pyautogui.locateOnScreen('[filepath]\\icon1.png', region=(1500,100,950,1100), grayscale=True)
Eliminating the grayscale parameter doesn't change the result - still ~0.7 execution time and image not found:
icon1 = pyautogui.locateOnScreen('[filepath]\\icon1.png', region=(1500,100,950,1100))
Then I tried setting the region parameter to the entire screen, but image not found and execution time is ~1.5sec, so it's searching (judging by longer execution time w/ larger region), just not finding.
icon1 = pyautogui.locateOnScreen('[filepath]\\icon1.png', region=(0,0,2559,1439))
Any suggestions on what to try next? Thanks.
I figured out what's happening. As a preface, I am working with multiple monitors, and have made modifications to pyautogui and pyscreeze as described in these 2 pyautogui github comments:
https://github.com/asweigart/pyautogui/issues/9#issuecomment-527236475
https://github.com/asweigart/pyautogui/issues/321#issuecomment-629819495
With these modifications, pyautogui works with multiple monitors, and pyautogui.position() and pyautogui.moveTo() treat the upper left corner of the primary monitor as coordinate (0,0) - this means monitors above or to the left of primary monitor will have at least one negative coordinate.
But pyscreeze is returning image search results based on treatment of the upper left corner of the upper left monitor as coordinate (0,0) - so all coordinates on extended desktop are positive.
The region parameter I was passing to locateOnScreen() was based on using pyautogui.position() reported coordinates, so the search was being executed on an incorrect area of the screen.
Once I figured that out, I was able to pass the correct region specification.
To illustrate, I inserted a print statement in pyscreeze to show where the image is found. And a print of the image search return. And in my code, I printed pyautogui.position().
retVal = Box(left=8008, top=3171, width=29, height=31)
Point(x=4182, y=1026)
mouse position:
Point(x=4182, y=1026)
So you can see that coordinates are quite different. Pyscreeze is showing coordinates based on 0,0 being upper left corner of upper left monitor, while the image search return variable are coordinates based on 0,0 being upper left corner of primary monitor, so I'm able to take the image search result variable and pass that to pyautogui.moveTo() and move the mouse there (moveTo needs coordinates based on 0,0 being upper left corner of primary monitor).
The issue stems from adopting changes from two different people to pyautogui and pyscreeze. I suppose I could adjust the changes to one of these packages to offset the coordinates so that both are referencing the same monitor's upper left corner as coordinate (0,0).
Your region is set wrong. Use (0,0,2559,1439).
And if this doesn't work make a new screenshot specifying the region for it, save it and look if that just captured screenshot would be found on the screen.
The code below should always work as expected:
from time import perf_counter as T
import pyautogui
# NOTICE that in pyautogui: region=(left, top, width, height)
pyautogui.screenshot('pyautogui_region_screenshot.png', region=(300, 500, 300, 200))
sT = T()
img = pyautogui.locateOnScreen('pyautogui_region_screenshot.png', region=(300, 500, 300, 200))
eT = T()
print(f'img = pyautogui.locateOnScreen took: {eT-sT:9.5f} seconds')
print(img)
By the way: check out https://stackoverflow.com/questions/72410958/taking-a-screenshot-of-a-specific-portion-of-the-screen-in-python to switch to another Python module ( mss ) for doing screenshots of small regions of the screen.
https://pyautogui.readthedocs.io/en/latest/screenshot.html

how can i control animation using big-bang so it loops

does anyone know how i can write a function for big-bang which basically loops an animation.for my task i have an animation of a car which currently goes from left to right but ends when it touches the right hand side,however,i want it to repeat itself so it continuesly goes left to right back to left and right non-stop.this is the excerise description
Exercise 45. Design a “virtual cat” world program that continuously moves the cat from left to right. Let’s call it cat-prog and let’s assume it consumes the starting position of the cat. Furthermore, make the cat move three pixels per clock tick. Whenever the cat disappears on the right, it reappears on the left. You may wish to read up on the modulo function.
i dont understand how the modulo function would be used here can someone explain
; WorldState - Image
; places the cat into the BACKGROUND scene,
; according to the given world state
;when the cat dissapears on the right it reappears on the left
(define (render cw)
(place-image CAT cw X-CAT background))

Is there a way to layout a scene2d.ui Stack?

I'm trying to make a hotkey type button which has a main image, a number in the top left indicating the hotkey button, and a number in the bottom right indicating the quantity of the item. I could use a Table to place these but they wouldn't be overlapping. I'd like to have the numbers on top of the main image so I used a stack, unfortunately it doesn't look like there's a way to control the actors on a stack - they all get placed at 0,0 within the biggest actor in the stack. Is there a way to place the actors in the appropriate positions or do I have to use table?
By definition, Stack puts its children in 0,0 coordinates and trying to stretch them to fill Stack.
You can use Group, for more control over actors you putting in:
You can simply get X and Y coordinates of inserted Actor by getX() and getY() methods. With little bit of help by getHeight() and getWidth() methods you can make simple table layout.

Moving shape within the polygon

Test link: http://bit.ly/Runmah
pick one item from left side for testing.
it's rotating when he find two intersect points on the line.
i want to move red rectangle within the polygon. It shouldn't go outside of polygon.
My code is: http://pastebin.com/pRMpk81f
Edit 1: http://pastebin.com/C3j4WSC1
If you know how to find the intersection of points on the line then you should be able to find distance between wall and furniture (line and edge of rectangle), you can check this value and for example stop draging and snap,
EDIT1:
when dragged item is selected (mouse is down) than you constantly check distance (e.g. on mouse move), then you can decide that if distance is within some threshold you will stop movement (basicaly you will set calculated position- snap - instead of applying mouse position) otherwise you will follow mouse.
EDIT2:
also you can test if the point is inside the shape by calculating intersection points - even number the point is outside, odd number - the point is inside
best regards