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.
This scene had a Label with background color rectangle and a script to set the colors and number formats.
A Viewport containing a parallax layer with a vertical box container for the number bars.
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.
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.
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.
I created test scenes for each of these scenes along the way.
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
- 2021 10 02 New Release of Digital Logic Simulator
- 2021 08 28 Nested Sub Blocks
- 2021 08 27 Debugging with a log file
- 2021 08 26 Testing Circuit Blocks
- 2021 08 24 Bug Fixing with Blocks
- 2021 08 22 Debugging Circuit Blocks
- 2021 08 21 Circuit Blocks Update
- 2021 08 18 Circuit Blocks
- 2021 08 16 Highlighting of wires
- 2021 08 12 Adding Tutorial Content
- 2021 08 07 Numbers Scene
- 2021 08 06 Numbers Tabbed Scene
- 2021 07 26 Logic Simulator Update
- 2021 07 24 - Launch of V1.0
- 2021 07 23 - Truth Tables
- 2021 07 22 Progress Update
- 2021 07 21 - Simple Computer Simulation
- 2021 07 16 - Community Forum
- 2021 07 15 - Community News
- 2021 07 11 - Save and Load ROM Data
- 2021 07 09 - Documentation About The Logic Simulator
- 2021 07 08 - Big Progress
- 2021 07 07 - RAM and ROM Testing Complete
- 2021 07 06 - Implementing Tests
- 2021 07 05 - Cool algorithm for binary text string
- 2021 07 04 - Debugging Complex Situations
- 2021 06 30 - End of June - Refactoring Continues
- 2021 06 29 Community
- 2021 06 28 Implementing More OOP
- 2021 06 27 Memory Parts
- 2021 06 26 Improving the Memory Manager
- 2021 06 25 Memory Data
- 2021 06 24 Memory Management
- 2021 06 23 First Devlog Entry