Split circle and color it automatically according to input

Questions & Answers
, , ,
1

i’m trying to make a fraction calculator simulator kinda like the pic below

image
image1600×1000 76.1 KB

so when input is changed it automatically change according to the input are there any way to do this?

2

Your question is a bit vague. This is totally doable but could you please clarify what you’d like to hear? Is this a question on:

  1. How to do the UI for this?
  2. How to react to the UI values changing?
  3. What UI solution are you using? UGUI or UI ToolKit?
  4. How to do the visualization?
  5. How to do the code architecture for this, e.g. subscribing to a value-changed-event with a callback to update the visualization?
3

In the interest of time, I won’t lay out the full solution here, but hopefully enough to get you started.

  1. First of all, I’d recommend that make sure that you are using Unity 2022.3.x or newer for this.
  2. Create a new UI Document in your scene and Project browser, see the introduction manual pages for UI Toolkit in runtime usage for detailed instructions.
  3. Make sure to use UI Builder to create the UI you want in an intuitive manner. Integer Input fields are likely what you’ll want to be using for the value inputs
  4. Create your own custom control (find more details on how to do that here) for the diagram by creating a new script with a class that inherits from VisualElement and in its constructor, subscribe to generateVisualContent += OnGenerateVisualContent; (find details on this API here)
  5. Check out this forum post for how to draw the circular shape for the diagram. Particularly the parts about using the MeshGenerationContext passed in to the method you subscribed to the generateVisualContent event and how to use the painter2D property on it, and its Arc function, to draw your diagram.
  6. In a script that you attach to the same GameObject that hosts the UI Document in your scene, add a script that sets up the input fields by Registering like such RegisterValueChangedCallback<ValueChange<int>>(FunctionToUpdateMyUI) and in your FunctionToUpdateMyUI you then instruct your custom control to regenerate its mesh and use the new value as input for your arc visualizations.