widget graphic for Velocity ?

[Toonix091 (Toonix09)]

Hi , i would like to make a widget to see the velocity in graphic like this :

[ClockworkOcean]

I noticed this

Draw Line node in a UMG Widget

I want to draw a line between two points on the screen in a UMG Widget, and it seems I can do that with a Draw Line node, but it has a context input which from what I’ve found is from a OnPaint event, but I cant seem to find how to get that. [image]

[Toonix091 (Toonix09)]

it’s not realy what I want , I mean it doesn’t help me much, I managed to display the speed value numerically but I want it graphically and I don’t know much about UE4 but here is my blueprint

[ClockworkOcean]

How about this?

WTF Is? UMG: Draw Lines in Unreal Engine 4 ( UE4 )

He actually tells you how to do it…

[Everynone]

You could absolutely do it with draw lines (in widget’s paint, in material or in the HUD class even) but it may become cumbersome to manage as it grows in complexity, annoying to refactor. That would be a cool exercise, for sure.

---

You could have a look at the math hall and familiarise with the way materials can visualise function graphs:

Math Hall Content Examples

Namely:

The widget can then display that material. That’d be a very efficient albeit math heavy approach.

---

You could get cheeky, though, and keep adding elements to a scroll box:

Above, I’m sampling the player’s velocity every .5s, create border widgets with a specific height and push them into a scrollbox, scrolling to the last element with each push.

Seems like it’s worth exploring for something developed rapidly that needs virtually no upfront investments. A crude example:

To make it more efficient over time, use List View instead of a Scroll Box.

[Chatouille]

Here’s an old piece of mine

1. create new widget

2. set up a bunch of variables :

• GraphPoints : array of Vector2D to store X,Y points
• Duration : the amount of time shown on graph (eg. show velocity graph of past 5 seconds)
• MaxFps : the maximum sampling rate (eg. 10 points per second, multiplied by 5 seconds = 50 lines to draw, keep performance in mind)
• Width, Height : size of graph (eg. 400 x 200)
• MaxSpeed : size of the Y axis (eg. 1500)
• LastIndex, FVel : just some local cache variables
  

Initialize all the points at the bottom-right-most end of graph, and start timer

On timer get current velocity and update the graph points

Then override the OnPaint function for your widget to draw lines

[ilike9527]

With the help of plugins “UMGPolygon” and “UMGSpline”, you can draw graphs conveniently in UMG.

Marketplace Url:
https://www.unrealengine.com/marketplace/en-US/product/umgpolygon

https://www.unrealengine.com/marketplace/en-US/product/umgspline