47x5b-baaaa-aaaak-ao3zq-cai.icp0.io
Open in
urlscan Pro
2a0b:21c0:b002:2:5000:53ff:feb3:7feb
Public Scan
URL:
https://47x5b-baaaa-aaaak-ao3zq-cai.icp0.io/ui/button.html
Submission: On January 03 via api from US — Scanned from CH
Submission: On January 03 via api from US — Scanned from CH
Form analysis 1 forms found in the DOM
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>Text Content
1. 1. About the Book
2. 2. Introduction
❱
3. 1. 2.1. Introduction to I3M
2. 2.2. System Requirements and Supported Platforms
3. 2.3. Basic concepts
4. 2.4. Design Safety and Goals
5. 2.5. Frequently Asked Questions
4. 3. Getting started
❱
5. 1. 3.1. Editor, Plugins and Scripts
2. 3.2. Hot Reloading
3. 3.3. Editor Overview
4. 3.4. Scene and Scene Graph
5. 3.5. Assets
6. 3.6. Data Management
7. 3.7. Borrow Checker
6. 4. Scripting
❱
7. 1. 4.1. Plugins
2. 4.2. Executor
3. 4.3. Scripts
4. 4.4. Tasks
8. 5. Scene
❱
9. 1. 5.1. Graph
2. 5.2. Transformation
3. 5.3. Prefabs
4. 5.4. Property Inheritance
5. 5.5. Base Node
6. 5.6. Mesh Node
7. 5.7. Light Node
8. 5.8. Sprite Node
9. 5.9. Particle System Node
10. 5.10. Terrain Node
11. 5.11. Camera Node
12. 5.12. Decal Node
13. 5.13. Rectangle Node
14. 5.14. Tile Map
15. 5.15. Custom Node
16. 5.16. Physics
❱
17. 1. 5.16.1. Rigid Body
2. 5.16.2. Collider
3. 5.16.3. Joint
4. 5.16.4. Ray Casting
5. 5.16.5. Ragdoll
18. 5.17. Sound
❱
19. 1. 5.17.1. Audio Bus
2. 5.17.2. Sound Node
3. 5.17.3. HRTF
20. 5.18. Animation
❱
21. 1. 5.18.1. Animation Editor
2. 5.18.2. Animation Blending
3. 5.18.3. ABSM Editor
4. 5.18.4. Signals
5. 5.18.5. Root Motion
6. 5.18.6. Sprite Animation
22. 5.19. Debugging
10. 6. Input Handling
❱
11. 1. 6.1. Keyboard
2. 6.2. Mouse
3. 6.3. Raw Text Input (WIP)
12. 7. Artificial Intelligence (WIP)
❱
13. 1. 7.1. Behaviour Trees (WIP)
2. 7.2. Path Finding
3. 7.3. Navigational Meshes
14. 8. Rendering
❱
15. 1. 8.1. Shaders
2. 8.2. Materials
3. 8.3. Light Maps
4. 8.4. Settings
5. 8.5. Render Pass
6. 8.6. Normal Maps
16. 9. Resource Management
❱
17. 1. 9.1. Models
2. 9.2. Textures
3. 9.3. Sound Buffers
4. 9.4. Curves (WIP)
5. 9.5. Custom Resource
6. 9.6. Asset Hot Reloading
18. 10. Engine
❱
19. 1. 10.1. Graphics Context
2. 10.2. Window Management
3. 10.3. Manual Initialization
20. 11. User Interface
❱
21. 1. 11.1. Basic concepts
2. 11.2. Editor
3. 11.3. Rendering
4. 11.4. Fonts
5. 11.5. Style
6. 11.6. Widgets
❱
7. 1. 11.6.1. Custom widget
2. 11.6.2. Button
3. 11.6.3. Border
4. 11.6.4. Canvas
5. 11.6.5. Check box
6. 11.6.6. Curve editor (WIP)
7. 11.6.7. Decorator
8. 11.6.8. Docking manager (WIP)
9. 11.6.9. Dropdown list (WIP)
10. 11.6.10. Expander
11. 11.6.11. File browser (WIP)
12. 11.6.12. Grid
13. 11.6.13. Image
14. 11.6.14. Inspector (WIP)
15. 11.6.15. List view (WIP)
16. 11.6.16. Menu (WIP)
17. 11.6.17. Message box (WIP)
18. 11.6.18. Numeric field
19. 11.6.19. Popup (WIP)
20. 11.6.20. Progress bar (WIP)
21. 11.6.21. Range (WIP)
22. 11.6.22. Rect (WIP)
23. 11.6.23. Scroll bar
24. 11.6.24. Scroll panel
25. 11.6.25. Scroll viewer
26. 11.6.26. Screen
27. 11.6.27. Stack panel
28. 11.6.28. Tab control
29. 11.6.29. Text
30. 11.6.30. Text box
31. 11.6.31. Tree (WIP)
32. 11.6.32. Vector image
33. 11.6.33. Window
34. 11.6.34. Wrap panel
22. 12. Serialization
❱
23. 1. 12.1. Saved Games
24. 13. Editor
❱
25. 1. 13.1. Property Editors
2. 13.2. Settings
3. 13.3. Plugins
26. 14. Miscellaneous
❱
27. 1. 14.1. Log
28. 15. Shipping
❱
29. 1. 15.1. PC
2. 15.2. WebAssembly
3. 15.3. Android
30. 16. Tutorials
❱
31. 1. 16.1. 2D Platformer Tutorial
❱
2. 1. 16.1.1. Character Controller
2. 16.1.2. Bots and AI
3. 16.2. RPG Tutorial
❱
4. 1. 16.2.1. Character Controller
5. 16.3. FPS Tutorial
❱
6. 1. 16.3.1. Character Controller
2. 16.3.2. Weapons
3. 16.3.3. Bots and AI
7. 16.4. User Interface Tutorial (WIP)
8. 16.5. Community Tutorials
32. 17. Performance
* Light
* Rust
* Coal
* Navy
* Ayu
ITHREEM - I3M DEVELOPER DOCS
BUTTON
SIMPLE BUTTON WITH TEXT
To create a simple button with text you should do something like this:
#![allow(unused)]
fn main() {
fn create_button(ui: &mut UserInterface) -> Handle<UiNode> {
ButtonBuilder::new(WidgetBuilder::new())
.with_text("Click me!")
.build(&mut ui.build_ctx())
}
}
How to create a button using custom dimensions (100x100) and custom text
alignment (Vertical centered and Horizontal right aligned):
#![allow(unused)]
fn main() {
fn create_button_custom(ui: &mut UserInterface) -> Handle<UiNode> {
ButtonBuilder::new(WidgetBuilder::new().with_width(100.0).with_height(100.0))
.with_content(
TextBuilder::new(WidgetBuilder::new())
.with_text("Click me!")
.with_horizontal_text_alignment(HorizontalAlignment::Right)
.with_vertical_text_alignment(VerticalAlignment::Center)
.build(&mut ui.build_ctx()),
)
.build(&mut ui.build_ctx())
}
}
A BUTTON WITH IMAGE
More fancy-looking button with an image as a background could be created using
this code snippet:
#![allow(unused)]
fn main() {
fn create_fancy_button(
ui: &mut UserInterface,
resource_manager: ResourceManager,
) -> Handle<UiNode> {
let ctx = &mut ui.build_ctx();
ButtonBuilder::new(WidgetBuilder::new())
.with_back(
ImageBuilder::new(WidgetBuilder::new())
.with_texture(
resource_manager
.request::<Texture>("path/to/your/texture")
.into(),
)
.build(ctx),
)
.with_text("Click me!")
.build(ctx)
}
}
MESSAGE HANDLING
When clicked, a button sends a ButtonMessage::Click message, you can catch it in
your code and do something useful:
#![allow(unused)]
fn main() {
#[derive(Debug, Reflect, Visit)]
struct MyGame {
button: Handle<UiNode>,
}
impl Plugin for MyGame {
fn on_ui_message(&mut self, _context: &mut PluginContext, message: &UiMessage) {
if let Some(ButtonMessage::Click) = message.data() {
if message.destination() == self.button {
//
// Insert your code clicking handling code here.
//
}
}
}
}
}
USING A BUTTON TO EXIT THE GAME
This example shows how to create a button that will close your game.
#![allow(unused)]
fn main() {
#[derive(Visit, Reflect, Debug)]
struct Game {
quit_button_handle: Handle<UiNode>,
}
fn create_quit_button(ui: &mut UserInterface) -> Handle<UiNode> {
ButtonBuilder::new(WidgetBuilder::new())
.with_content(
TextBuilder::new(WidgetBuilder::new())
.with_text("Quit")
.build(&mut ui.build_ctx()),
)
.build(&mut ui.build_ctx())
}
impl Game {
fn new(ctx: PluginContext) -> Self {
Self {
quit_button_handle: create_quit_button(ctx.user_interfaces.first_mut()),
}
}
}
impl Plugin for Game {
fn on_ui_message(&mut self, context: &mut PluginContext, message: &UiMessage) {
if let Some(ButtonMessage::Click) = message.data() {
if message.destination() == self.quit_button_handle {
if let Some(window_target) = context.window_target {
window_target.exit();
}
}
}
}
}
}