2021 08 04 Number Display Widget

I started work on the area of the Digital Logic App that will teach people about Digital Electronics.

Trying to think of a cool way to teach number systems, I came up with a 3D widget which is like a rotating cylinder with a sequence of numbers wrapped around it.

This will display binary, hexadecimal, and decimal numbers that wrap around the limits according to the number of bits such as 8 bits.

The numbers may be updated dynamically for the value, background color and text color.

The need to modulate the colors is to show when overflow, carry, and borrow occurs when you traverse the number sequence.

The text in the image is not crisp since it needs to use a dynamic font rather than the scaled system font.

How I did it

This was quite a challenge entailing creating several scenes.

Number bar

This scene had a Label with background color rectangle and a script to set the colors and number formats.

Number roll

A Viewport containing a parallax layer with a vertical box container for the number bars.

Number roll

The vertical box is filled with number boxes for all the numbers, then the scroll limits are set based on the size of the box.

The Viewport size is set to a view of a portion of the list of numbers. Then, the parallax layer may be scrolled vertically to pan through the list and wrap around.

Number tube

In Blender (3D modelling software) I created a simple 1 m radius x 2 m wide tube and rotated the UV such that my Viewport texture would map onto its surface in the correct orientation.

Number tube

Then I created a 3D scene in Godot where the material override Albedo setting was set to the texture of the number roll viewport.

The widget is to be used in a 2D scene, so I create this with a Viewport container, containing a viewport which contains an instance of the 3D Number tube scene.

Testing

I created test scenes for each of these scenes along the way.

Conclusion

So that was a lot of effort, but the widget is very flexible (dynamic) since all the features including the texture may be controlled via code.

Next I will need to set up a scene to teach about number systems using this widget that people may interact with.

More Devlog entries

Most recent first