egui-widget-shapes

An egui widget that that contains several different shapes and shape response sensings.

Links

• Crates.io: https://crates.io/crates/egui-widget-shapes
• docs.rs: https://docs.rs/egui-widget-shapes
• Github: https://github.com/Resonanz/egui-widget-shapes

Links to icons

• https://phosphoricons.com
• https://fonts.google.com

What is egui-widget-shapes?

egui-widget-shapes is an egui widget that combines an icon and text. Such an arrangement is often found in modern UIs.

Please submit an issue on Github if you have suggestions or improvements.

Usage

In Cargo.toml add the following dependency:

[dependencies]
egui-widget-shapes = 0.1.0  <--- The latest version number can be found on Crates.io.

Or you could use the following if developing locally:

[dependencies]
egui-widget-shapes = { path = "/Github/egui-widget-shapes/" }

Import the crate using

use egui_widget_texicon::{Config, Texicon};

To add images, define a constant that points to each image file.

As illustrated below, these can be PNG or SVG or other image formats supported by egui's image_loader (https://docs.rs/egui/latest/egui/macro.include_image.html).

Note that loading images using the include_image! macro bakes the raw image bytes into the binary file.

const IMG_CAMERA: egui::ImageSource<'_> = egui::include_image!("../assets/pics/google-camera.png");
const IMG_SCATTER: egui::ImageSource<'_> = egui::include_image!("../assets/pics/chart-scatter.png");
const IMG_PROCESS: egui::ImageSource<'_> = egui::include_image!("../assets/pics/google-grain.png");
const IMG_IOS192: egui::ImageSource<'_> = egui::include_image!("../assets/pics/gear.svg");

Create a left side SidePanel, define the button details including button text, and add the Texicon to the SidePanel.

SidePanel::left("Left panel").show(ctx, |ui| {

    let image_name = Config {
        icon_width: 32.,
        icon_height: 32.,
        text_width: 80.,
        text_height: 80.,
        icon_text_gap: 4.,
        color_light: Color32::DARK_GRAY,
        color_light_hover: Color32::BLACK,
        color_dark: Color32::GRAY,
        color_dark_hover: Color32::WHITE,
        text: "Settings",
        img: IMG_IOS192,
    };

    ui.vertical_centered(|ui| {
        ui.add_space(10.);
        if ui.add(Texicon::new(image_name)).clicked() {  // Texicon 1
            println!("Clicked btn 1");
        };
        ui.add_space(10.);
        if ui.add(Texicon::new(image_name)).clicked() {  // Texicon 2
            println!("Clicked btn 2");
        };
        ui.add_space(10.);
        if ui.add(Texicon::new(image_name)).clicked() {  // Texicon 3
            println!("Clicked btn 3");
        };
        ui.add_space(10.);
        warn_if_debug_build(ui);
    });
});

Video