Mouse position doesn't match to JavaScript chart cursor - amcharts

I'm using Amcharts JavaScript library in Windows application (Xojo,HTMLViewer). It works well.
However, I have an issue.
https://www.dropbox.com/s/e68evm1f0selw2p/IMG_0396.jpg?dl=0
https://www.dropbox.com/s/qgge5kiz1x87qj9/IMG_0397.jpg?dl=0
Mouse position doesn't match to the cursor of Charts, all the time mouse stands leftside of it when I increase the Windows size.
In opposite, when I decrease the windows size, mouse position is right side.
When I start my application for the first time, it matches correctly but in case I increase or maximize the Windows screen, this issue happens.
Do you think this is an issue of HTMLViewer or Amcharts?
Any workaround would be helpful.

Related

Unity - UI is in different location in build than in the editor

I have UI of a gun that I keep in the right-bottom of the screen, and properly stays there when i run in edit mode, but for some reason when i build it, it snaps to the left side. I have the UI set to scale with screen size and 1920x1080 as the reference, and all the UI elements are anchored to the bottom right side. Any ideas?
Screenshots:
In-build
In-editor
I have a script that controls weapon bobing and recoil when the gun fires, but I see no reason as to why this would work in the editor but not in the build. It takes the original position of the ui and just builds off of it with hard coded offsets.
Solved it - Just save the position on frame one as the origin, not sure why the aspect ratio would effect it with my settings, but it is what it is

Flicker-free expansion (resize) of a window to the left

Say you have a form that you can expand to the left to show additional controls:
Collapsed:
Expanded:
The simplest way to achieve this in Delphi is to use alRight as the primary anchor for all controls (instead of alLeft) and then simply adjust the width and X coordinate of the form. Either you can set the Width and Left properties individually, or you can use a function that sets them simultaneously, like
if FCollapsed then
SetWindowPos(Handle, 0, Left - Width, Top, 2 * Width, Height, 0)
else
SetWindowPos(Handle, 0, Left + Width div 2, Top, Width div 2, Height, 0)
The problem is that there is quite noticeable flickering in the always-visible part of the form (in this example, the buttons) while expanding or collapsing. Try it yourself!
It is possible for the operating system to resize the form to the left without any flickering at all -- just grab the left edge of the form using the mouse and drag the mouse to the left or right -- but I am unable to find any function in the Windows API that exposes this kind of resizing.
I have tried to use several different Windows API functions to resize and reposition the form, tried their various parameters (for instance, the SWP_* flags), tried LockWindowUpdate, WM_SETREDRAW, TForm.DoubleBuffered etc. to no avail. I also examined the possibility to use the WM_SYSCOMMAND SC_SIZE approach.
I am not yet sure if the problem lies at the OS level or the VCL level.
Any suggestions?
Edit: I am very surprised to see that this Q received close votes. Let me try to clarify:
Create a new VCL forms application.
Add a few buttons to the right side of the main form and a memo to the left. Set Anchors to [alTop, alRight] on all controls. On the OnClick handler of the buttons, add the following code:
if FCollapsed then
SetWindowPos(Handle, 0, Left - Width, Top, 2 * Width, Height, 0)
else
SetWindowPos(Handle, 0, Left + Width div 2, Top, Width div 2, Height, 0);
FCollapsed := not FCollapsed;
where FCollapsed is private boolean field of the form (initialized to false).
Now, click the buttons repeatedly. (Or give one of them keyboard focus and hold the Enter key for a few seconds.) You will probably notice that the region with the buttons on your monitor will not display a perfect still image, but will flicker. In addition, you might actually see 'ghosts' of the buttons to the left of the actual column of buttons.
I am unable to capture this millisecond flickering using screen capture, so instead I used a digital camera to record my screen:
https://privat.rejbrand.se/VCLFormExpandFlicker.mp4
In this video clip, it is apparent that the column of buttons isn't a static image on the screen; instead, for a few milliseconds each time the form is resized, this region is something else than it should be. It is equally apparent that there is a 'ghost' column of buttons to the left.
My question is if there is any reasonably simple way to get rid of these visual artefacts (that at least to me are very visible even if you expand/collapse the form a single time).
On my Windows 10/Delphi 10.1 computer at work, the form is resized in a perfect manner when I drag its left-most edge using the mouse: the unaffected client area of the form is perfectly static on the monitor. However, on my Windows 7/Delphi 2009 PC at home, I do see that there is a lot of repositioning going on when I do this.
I can provide some insight about why you see ghost images of the other half of your UI and possibly a way to stop it. The ghost image indicates that someone is copying your client area pixels (and copying them to the wrong place, always flush-left in your window) before you have a chance to redraw them with the correct pixels.
There are likely two different, overlapping sources of these ghost pixels.
The first layer applies to all Windows OSes and comes from a BitBlt inside SetWindowPos. You can get rid of that BitBlt in several ways. You can create your own custom implementation of WM_NCCALCSIZE to tell Windows to blit nothing (or to blit one pixel on top of itself), or alternately you can intercept WM_WINDOWPOSCHANGING (first passing it onto DefWindowProc) and set WINDOWPOS.flags |= SWP_NOCOPYBITS, which disables the BitBlt inside the internal call to SetWindowPos() that Windows makes during window resizing. This has the same eventual effect of skipping the BitBlt.
However, Windows 8/10 aero adds another, more troublesome layer. Apps now draw into an offscreen buffer which is then composited by the new, evil DWM.exe window manager. And it turns out DWM.exe will sometimes do its own BitBlt type operation on top of the one already done by the legacy XP/Vista/7 code. And stopping DWM from doing its blit is much harder; so far I have not seen any complete solutions.
For sample code that will break through the XP/Vista/7 layer and at least improve the performance of the 8/10 layer, please see:
How to smooth ugly jitter/flicker/jumping when resizing windows, especially dragging left/top border (Win 7-10; bg, bitblt and DWM)?
Since you have multiple child windows, the situation is even a little more complicated. The BitBlt type operations I mentioned above happen on your whole top-level window as a whole (they treat the window as one set of pixels regardless of how many windows are underneath, and regardless of CLIPCHILDREN). But you need to have windows move atomically so that on the next redraw they are all positioned correctly. You may find BeginDeferWindowPos/DeferWindowPos/EndDeferWindowPos useful for that (but only go there if the above tricks do not work).

wxToolBar changing device coordinates

Using the mouse I am drawing 2D shapes on the client area of a MDIChildFrame. Recently I have added a wxToolBar to the frame and when I now draw a shape on the client area it seems that the points have shifted by the size the toolbar. Imagine that with mouse I am clicking on (100,100) and drawing a line to (150,150); however, the line appears somewhere (75,75) to (125,125). By the way, wxMouseEvent GetPosition(); reports (100,100) to me.
Removing the toolbar fixes the problem however, I want to keep the toolbar for ease of tool selection.
I use the code:
m_ToolBar=new wxToolBar(this, wxID_ANY);
m_ToolBar->AddTool() //
m_ToolBar->Realize();
this->SetToolBar(m_ToolBar);
Any ideas will be appreciated.
You can always use wxWindow::GetClientAreaOrigin() to manually offset the coordinates by the toolbar height but normally this shouldn't be necessary, and if this doesn't happen with a "normal" frame but only happens with wxMDIChildFrame it would be a bug in wxWidgets that should be reported as usual.
It's also recommended to not draw over wxFrame itself but rather put a wxWindow into it and draw on it. This should also take care of your problem.

Unity 4.6 - How to scale GUI elements to the right size for every resolution

The new Unity 4.6 comes with a new GUI, when I change de resolution on Unity the UI Button scales perfectly but when I test on the Nexus 7 device the Button looks too small. Any idea how to solve this?
Unity's new GUI system uses "anchors" to control how gui elements (like buttons) scale in relation to their parent container.
Unity has a tutorial video on how to use the new "Rect Transform" component (where the anchors are configured) here: http://unity3d.com/learn/tutorials/modules/beginner/ui/rect-transform.
The last half of the tutorial is all about anchors. That page has links to the entire tutorial series. It's not too long. You should watch the whole thing.
Specific to your question:
The anchors are visible in your first screen shot. They are those 4 little arrows at the top left of your button.
Right now, your button is only anchored by it's top left corner.
The two right anchors need to be dragged to the right so that the right edge of your button is anchored to a space inside its parent container.
Depending on your situation, the two bottom arrows may need to be dragged down so that the bottom edge of your button is anchored as well.
The video I linked above covers all this in detail.
Lastly, for the font size to scale nicely on different resolutions, you will need to add and configure a reference resolution component to the base canvas of your UI, as Ash-Bash32 wrote earlier.
Update: The best way to add a Reference Resolution component is through the inspector window for the base canvas in your UI.
1) click the "Add Component Button" at the bottom of the inspector.
2) type the word "Reference" in the search filter field.
3) select the "Reference Resolution" component in the search results.
The Reference Resolution is now renamed as Canvas Scaler.. Along with the renaming they have added many more features for the dynamicity of the Canvas. You can go through the Unity Doc of Canvas Scaler and also take a look at this article for a practical example of how and why to use Canvas Scaler. Also make sure you use the Anchor Points to good effect to make this more robust...
To Scale UI added the ReferenceResolution Component to the Canvas you want to scale.
P.S. Theres no Documention for ReferenceResolution
If you want the button to be the same size for all screens and resolutions, you have to add the canvas scaler component to the canvas and the set the screen match mode to: match width or height, here is the link to the docs, this helps a lot if you want to aim to different sizes or resolutions:
http://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html
This becomes giant and convoluted once you start laying things out in code AND using a canvas scaler, so I wish to provide a thorough answer to save someone the hours I went through.
First, don't use anchoredPosition to position anything, unless you fully realize it is a 0.0 to 1.0 number. Use the RectTransform localPosition to do the actual laying out, and remember it's in relation to the parent anchor. (I had to lay out a grid from the center)
Second, put a canvas scaler on the parent layout object AND the inner ui pieces. One makes the layout in the right position, the other will resize your elements so they actually show up right. You can't rely on the the parent unless the children also have scalers (and Graphic Raycasters to touch them).
Third, if you have a scaler, DON'T use Screen.width and height, instead assume the screen is the same value you put for the scalers (hopefully you used the same, or know what you're doing). The screen width always returns the actual device pixels, retina devices too, but the canvas scalers DO NOT account for this. This probably gives unity the one remaining way to find actual screen dpi if your game wants it. Edit: This paragraph applies to any parent canvas connected to the code doing your laying out. Not stray canvases, you can probably mix it up. Just remember unity's guidelines on performance with canvases.
Fourth, the canvas is still a bit buggy. Even with the above working, some things don't render until you delete and recreate a canvas, if you re-open the scene or it crashes. Otherwise, the above is the general "rules" I've found.
To center a "grid of things" you can't just use half of the canvas scaler's width or height, you have to calculate the height of your grid and set the offset by half of it, otherwise it will always be slightly off. I just added this as an extra tip. This calculation works for all orientations.

SDL2 mouse grab is not working

With SDL 1.2 I was using SDL_WM_GrabInput to center the (hidden) mouse on screen. This gave me unlimited turning freedom for a first person shooter. SDL2 no longer provides this function but has SDL_SetWindowGrab. This does not seem to be repositioning the mouse to the center of the screen after each loop (event read). I can turn the player around only 1 and a half times before the mouse has hit the edge of the window and will no longer produce xrel values. Is this a bug or is there another function I should be using?
Give SDL_SetRelativeMouseMode() and SDL_GetRelativeMouseState() a try.
Alternatively recenter the mouse each frame yourself with SDL_WarpMouseInWindow().

Resources