added progress bar, cargo fmt

Author: Alexandre425

examples/ui.rs

@@ -1,5 +1,6 @@
 use macroquad::prelude::*;
 
+use macroquad::ui::widgets::{ProgressBar, Slider};
 use macroquad::ui::{
     hash, root_ui,
     widgets::{self, Group},
@@ -144,6 +145,7 @@ async fn main() {
 
     let mut number0 = 0.;
     let mut number1 = 0.;
+    let mut number2 = 0.;
 
     let texture: Texture2D = load_texture("examples/ferris.png").await.unwrap();
 
@@ -214,9 +216,35 @@ async fn main() {
                         .size(vec2(120., 70.))
                         .ui(ui);
                 });
-                ui.tree_node(hash!(), "sliders", |ui| {
-                    ui.slider(hash!(), "[-10 .. 10]", -10f32..10f32, &mut number0);
-                    ui.slider(hash!(), "[0 .. 100]", 0f32..100f32, &mut number1);
+                ui.tree_node(hash!(), "sliders and bars", |ui| {
+                    let range0 = -10f32..10f32;
+                    ui.slider(hash!(), "[-10 .. 10]", range0.clone(), &mut number0);
+                    let progress0 = number0.remap(range0.start, range0.end, 0., 1.);
+                    ProgressBar::new().label("first bar").ui(
+                        ui,
+                        progress0,
+                        format!("{:.0}%", progress0 * 100.).as_str(),
+                    );
+
+                    let range1 = 0f32..100f32;
+                    ui.slider(hash!(), "[0 .. 100]", range1.clone(), &mut number1);
+                    let progress1 = number1.remap(range1.start, range1.end, 0., 1.);
+                    ProgressBar::new().label("second bar").ui(
+                        ui,
+                        progress1,
+                        format!("{:.1}/{:.0}", number1, range1.end).as_str(),
+                    );
+
+                    let range2 = 0f32..1f32;
+                    Slider::new(hash!(), range2.clone())
+                        .label_width(200.)
+                        .label("slider with a long label")
+                        .ui(ui, &mut number2);
+                    let progress2 = number2;
+                    ProgressBar::new()
+                        .label("bar with a really long label")
+                        .label_width(240.)
+                        .ui(ui, progress2, "");
                 });
                 ui.tree_node(hash!(), "editbox 1", |ui| {
                     ui.label(None, "This is editbox!");

src/lib.rs

@@ -788,14 +788,14 @@ impl EventHandler for Stage {
 
     fn window_restored_event(&mut self) {
         let context = get_context();
-        
+
         #[cfg(target_os = "android")]
         context.audio_context.resume();
         #[cfg(target_os = "android")]
         if miniquad::window::blocking_event_loop() {
             miniquad::window::schedule_update();
         }
-        
+
         context
             .input_events
             .iter_mut()
@@ -816,7 +816,7 @@ impl EventHandler for Stage {
         for (_, touch) in context.touches.iter_mut() {
             touch.phase = input::TouchPhase::Ended;
         }
-        
+
         context
             .input_events
             .iter_mut()

src/ui/style.rs

@@ -379,6 +379,7 @@ pub struct Skin {
     pub scrollbar_handle_style: Style,
     pub checkbox_style: Style,
     pub group_style: Style,
+    pub progress_bar_style: Style,
 
     pub margin: f32,
     pub title_height: f32,
@@ -479,6 +480,13 @@ impl Skin {
                 color_selected_hovered: Color::from_rgba(55, 55, 55, 68),
                 ..Style::default(default_font.clone())
             },
+            progress_bar_style: Style {
+                margin: Some(RectOffset::new(2., 2., 2., 2.)),
+                color: Color::from_rgba(204, 204, 204, 235),
+                color_hovered: Color::from_rgba(170, 170, 170, 235),
+                text_color: Color::from_rgba(0, 0, 0, 255),
+                ..Style::default(default_font.clone())
+            },
 
             margin: 2.0,
             title_height: 14.0,

src/ui/widgets.rs

@@ -7,6 +7,7 @@ mod group;
 mod input;
 mod label;
 mod popup;
+mod progress_bar;
 mod separator;
 mod slider;
 mod tabbar;
@@ -22,6 +23,7 @@ pub use group::{Group, GroupToken};
 pub use input::InputText;
 pub use label::Label;
 pub use popup::Popup;
+pub use progress_bar::ProgressBar;
 pub use slider::Slider;
 pub use tabbar::Tabbar;
 pub use texture::Texture;

src/ui/widgets/progress_bar.rs

@@ -0,0 +1,96 @@
+use crate::{
+    math::{vec2, Rect},
+    ui::{ElementState, Layout, Ui},
+};
+
+pub struct ProgressBar<'a> {
+    label: &'a str,
+    label_width: Option<f32>,
+}
+
+impl<'a> ProgressBar<'a> {
+    pub const fn new() -> Self {
+        ProgressBar {
+            label: "",
+            label_width: None,
+        }
+    }
+
+    pub const fn label<'b>(self, label: &'b str) -> ProgressBar<'b> {
+        ProgressBar { label, ..self }
+    }
+
+    pub const fn label_width(self, width: f32) -> Self {
+        Self {
+            label_width: Some(width),
+            ..self
+        }
+    }
+
+    pub fn ui(self, ui: &mut Ui, progress: f32, bar_text: &str) {
+        let context = ui.get_active_window_context();
+
+        let size = vec2(
+            context.window.cursor.area.w - context.style.margin * 3. - context.window.cursor.ident,
+            19.,
+        );
+
+        let pos = context.window.cursor.fit(size, Layout::Vertical);
+        let label_width = self.label_width.unwrap_or(100.);
+        let bar_width = size.x - label_width;
+        let bar_progress_width = progress.clamp(0., 1.) * bar_width;
+
+        let bar_background = Rect::new(pos.x, pos.y, bar_width, 20.);
+        let bar_progress = Rect::new(pos.x, pos.y, bar_progress_width, 20.);
+
+        // background bar
+        context.window.painter.draw_rect(
+            bar_background,
+            None,
+            context.style.progress_bar_style.color(ElementState {
+                focused: context.focused,
+                hovered: false,
+                clicked: false,
+                selected: false,
+            }),
+        );
+        // progress bar
+        context.window.painter.draw_rect(
+            bar_progress,
+            None,
+            context.style.progress_bar_style.color(ElementState {
+                focused: context.focused,
+                hovered: true,
+                clicked: false,
+                selected: false,
+            }),
+        );
+        // label
+        context.window.painter.draw_element_label(
+            &context.style.label_style,
+            vec2(pos.x + bar_width + 10., pos.y + 2.),
+            self.label,
+            ElementState {
+                focused: context.focused,
+                ..Default::default()
+            },
+        );
+        // bar text
+        context.window.painter.draw_element_content(
+            &context.style.label_style,
+            vec2(pos.x, pos.y),
+            vec2(bar_width, 20.),
+            &bar_text.into(),
+            ElementState {
+                focused: context.focused,
+                ..Default::default()
+            },
+        );
+    }
+}
+
+impl Ui {
+    pub fn progress_bar(&mut self, label: &str, progress: f32) {
+        ProgressBar::new().label(label).ui(self, progress, "");
+    }
+}

src/ui/widgets/slider.rs

@@ -23,10 +23,7 @@ impl<'a> Slider<'a> {
     }
 
     pub const fn label<'b>(self, label: &'b str) -> Slider<'b> {
-        Slider {
-            label,
-            ..self
-        }
+        Slider { label, ..self }
     }
 
     pub const fn label_width(self, width: f32) -> Self {