Scenario:
I have an area on the browser screen n x n in size (500px x 500px for example, ie 250,000 pixels).
As the mouse rolls over the area, it "paints" the pixels it passes.
Percentage of filled/unfilled pixels are displayed
Optional advanced scenario: As the mouse rolls over already painted pixels will "unpaint" those pixels, or paints those pixels in a different colour.
Solutions/Issues
What would be the most efficient way of detecting, logging and displaying the scenario?
The defined area could be a div, spacer image, image map, table, canvas?
How would the pixels be drawn?
image or div created for every mouse movement
server-side image created based on pixel co-ordinates?
Is it too inefficient to pass the mouse position(s) every time the position changes?
What would be an efficient way of displaying 250,000+ dynamic pixels/objects/data?
Check out my recent question for the drawing on canvas part, I got a number of good answers.
Related
Hi I have a problem with getting the x and y coordinates for the corner after rotation. When I transfer the image, it always gets the correct coordinates, but as soon as the image is rotated, it receives the coordinates from the corner of the viewport, not the image :/
Is this with the viewport rotated or the image rotated? If it's the image rotated, I believe this should work:
viewer.world.getItemAt(0).getBounds().getTopLeft()
Actually, that might work properly with the viewport rotated as well. The result is in viewport coordinates... I assume that's what you want? If not, you can convert to the other coordinate systems as needed.
I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!
I know how to change font size using CSS, and I know how to scale text inside a canvas, but is it possible to scale text outside of a canvas using CSS/JS?
My problem right now is that I want dynamic objects on a page to resize along with the page, but when there is text on those objects, it fails to resize correctly, since fonts only have sizes in full pixel amounts and not fractions I get "jitter" or "jumps" while the user is resizing. Using percent amounts on the fonts doesn't change the fact that there's no such thing as a "16.5" size font, a 30 character text will jump by at least 30 pixels per increment.
This also causes an issue with word wrapping giving inconsistent results between resizes, one word per line might decide to jump randomly to the next line or not based on the size:font relation and this snowballs for the entire paragraph.
Basically I want to get the same visual effect on every x,y window size without having to store all texts as images, and without creating a canvas for every single text that I use which sounds kind of ridiculous. Is this possible?
I believe your best bet for controlling typography to this degree is going to be with the vh, vw, and vmin & vmax CSS properties: These allow you to scale text based on the viewport height, width, and the smaller & larger of the two, respectively.
I personally find these work well at medium-to-larger size resolutions, but begin to breakdown at narrower viewport sizes, where it may be wiser to forgo this level of control. See Viewport Sized Typography on CSS-Tricks for usage and more information.
Imagine a responsive app with image face tagging. You can drag an area, tag the person and it records the coordinates using (http://odyniec.net/projects/imgareaselect/)
But imagine the image get resized with css to adapt for the window size, the absolute coords don't fit anymore of course.
What would be a better strategy to achieve this?
There are services like crazyegg.com that show you where visitors are resting their mouse cursors on your web page. My question is, given that people have different screen widths how can they be sure that my x coordinate is the same position on the page as another persons x coordinate? Meaning, two people may have the same mouse x coordinates, but since there screens are different widths, their mouse will be on a different part of the web page.
How can you create a web-page heat map service that takes this into consideration, and can be scaled and used across multiple different websites with different content sizes?
You can collect x & y data by element (like a main content div) rather than the entire viewport. In this fashion you can discard dead-space which is subject to a user's resolution.
You can add a clickhandler to the body or a wrapper div (better when your content is centered on the screen using margin: auto) that hold all the content of the page. The passed in MouseEvent hold the screenX/Y and the clientX/Y coordinates, where the former are the coordinates starting in the left top corner of the screen and the other are coordinates based on the top/left corner of the body or wrapper div. Using the clientX/Y coordinates made it easy to create a heat map cause you the same start point relative to your content over different screen sizes.
Instead of tracking the absolute x and y coordinate of the webpage, you can track the click coordination relative to the elements clicked. So, it would cater to different screen sizes and resolutions as the element position shifted.
There is also another aspect that you need to pay attention to which is each of the users' viewport width and the length of the full page (entire scrollable height) that you can adjust according to relative positioning.
At Howuku we did a lot of optimization on the mouse click and movement to ensure the precise and accurate datapoint that is dynamically generated for our website heatmap tool.
I hope this helps!