Help with Making BP Gauge Needle Work in Crank Storyboard
Hello, community!
I'm working on a project using Crank Storyboard, and I’m trying to simulate a BP (blood pressure) gauge. I need to make the needle of the gauge move dynamically based on input values (e.g., systolic and diastolic pressure). However, I'm encountering difficulties in getting the needle to move correctly.
Here’s what I’ve tried so far:
-
I've created an image for the gauge and placed a needle element over it.
-
I want the needle to rotate smoothly based on the pressure values I input.
-
I have tried using animations and rotation logic, but the needle doesn't respond as expected.
Can anyone share their experience or point me in the right direction on how to make the needle work properly? I would appreciate any code examples or guidance on how to achieve this.
Thanks in advance!
Comments
Hi Sahil,
You may find it useful to plot 'points' on the graph and note down the expected position, rotation etc. For example a pressure of 100mmHg may need a rotation of 95, position adjustment of -10Y.
You can note down several of these points every 40mmHg, 60mmHg, whatever works for you. Then, you would create some algorithms to get the 2 closest points and interpolate the best position in the middle for your given value.
A good way to do this may be to treat your gauge in percentages, so 180mmHg would be 50%, 90 is 25% etc. You can use this percentage to calculate the correct angle.
For the animation itself, you can bind the 'to' value to some Storyboard variable, updating this value in the code will allow you to re-use the same animation.
Side note; you could save yourself some hassle by placing the arrow perfectly in the middle, then you just have to worry about rotation and not positioning.
Hope this helped!
- Jake
Please sign in to leave a comment.