Scaling UI widget in line with TouchInterface Joystick

Hi all,

I am looking to create a mobile game that uses the left joystick to move with a circular mini-map behind it that scales with the joystick irrespective of device. I decided to use the Touch Interface Joystick for this and then create the mini-map in my UI widget.

When I run the game in either PIE or Mobile Standalone Version, despite having the same centre co-ords and size, the mini-map doesn’t match the Joystick? When I change the viewport sizes it never scales correctly, I don’t know if this is an issue with my widget designer settings, widget structure, the play settings, incorrect conversions or anchoring?

Any suggestions or explainer information would be useful! I’ve attached a few pics of the fresh setup I have and the problem that is occurring.
*
Things I have tried:

  1. Playing with widget designer settings to change size (e.g. 1280x720), DPI scaling
  2. Embedding mini-map image into ScaleBox, Overlay or SizeBox, tested out changing anchor positions
  3. Dynamically scaling the object on construct to scale up from DPI, manual conversions, canvas scaling*

I am wondering if I should be building a custom Joystick inside the UI widget instead but unsure how to mirror the scaling behaviour that you get with the Touch Interface. Apologies if this is an obvious issue I haven’t done anything associated with mobile before. I have more info if its needed aswell.

Many thanks in advance!