separate textured shader

kubi-ui-examples/examples/mom_downloader.rs

@@ -8,14 +8,12 @@ use winit::{
 use kubi_ui::{
   KubiUi,
   element::{
-    UiElement,
     progress_bar::ProgressBar,
     container::{Container, Sides, Alignment},
-    rect::Rect, text::Text
+    text::Text
   },
-  interaction::IntoInteractable,
   UiSize,
-  UiDirection, IfModified, elements,
+  elements,
 };
 use kubi_ui_glium::GliumUiRenderer;
 
@@ -24,7 +22,7 @@ fn main() {
 
   let event_loop = EventLoopBuilder::new().build().unwrap();
   let (window, display) = SimpleWindowBuilder::new().build(&event_loop);
-  window.set_title("Mom downloader 2000");
+  window.set_title("Mom Downloader 2000");
 
   let mut kui = KubiUi::new();
   let mut backend = GliumUiRenderer::new(&display);
@@ -47,32 +45,56 @@ fn main() {
 
         kui.begin();
 
+        let mom_ratio = (instant.elapsed().as_secs_f32() / 60.).powf(0.5);
+
         kui.add(Container {
-          gap: 5.,
+          align: (Alignment::Center, Alignment::Center),
-          padding: Sides::all(5.),
-          align: (Alignment::Begin, Alignment::Begin),
           size: (UiSize::Percentage(1.), UiSize::Percentage(1.)),
-          background: Some(vec4(0.2, 0.2, 0.5, 1.)),
+          background: Some(vec4(0.1, 0.1, 0.1, 1.)),
-          elements: elements(|el| {
+          elements: vec![Box::new(Container {
-            if instant.elapsed().as_secs_f32() < 5. {
+            gap: 5.,
-              el.add(Text {
+            padding: Sides::all(10.),
-                text: "Downloading your mom...".into(),
+            align: (Alignment::Begin, Alignment::Begin),
-                font: font_handle,
+            size: (UiSize::Pixels(450.), UiSize::Auto),
-                ..Default::default()
+            background: Some(vec4(0.2, 0.2, 0.5, 1.)),
-              });
+            elements: elements(|el| {
-              el.add(ProgressBar {
+              if instant.elapsed().as_secs_f32() < 5. {
-                value: (instant.elapsed().as_secs_f32() / 60.).powf(0.5),
+                el.add(Text {
-                ..Default::default()
+                  text: "Downloading your mom...".into(),
-              });
+                  font: font_handle,
-            } else {
+                  text_size: 32,
-              el.add(Text {
+                  ..Default::default()
-                text: "Error 413 (Request Entity Too Large)".into(),
+                });
-                font: font_handle,
+                el.add(ProgressBar {
-                color: vec4(1., 0., 0., 1.),
+                  value: mom_ratio,
-                ..Default::default()
+                  ..Default::default()
-              });
+                });
-            }
+                el.add(Text {
-          }),
+                  text: format!("{:.2}% ({:.1} GB)", mom_ratio * 100., mom_ratio * 10000.).into(),
+                  font: font_handle,
+                  text_size: 24,
+                  ..Default::default()
+                });
+              } else if instant.elapsed().as_secs() < 10 {
+                el.add(Text {
+                  text: "Error 413 Request Entity Too Large".into(),
+                  font: font_handle,
+                  color: vec4(1., 0.125, 0.125, 1.),
+                  text_size: 26,
+                  ..Default::default()
+                });
+                el.add(Text {
+                  text: format!("Exiting in {}...", 10 - instant.elapsed().as_secs()).into(),
+                  font: font_handle,
+                  text_size: 24,
+                  ..Default::default()
+                })
+              } else {
+                window_target.exit();
+              }
+            }),
+            ..Default::default()
+          })],
           ..Default::default()
         }, resolution);
 

kubi-ui-glium/shaders/fragment.frag

@@ -6,16 +6,7 @@ precision highp sampler2D;
 out vec4 out_color;
 in vec4 vtx_color;
 in vec2 vtx_uv;
-uniform bool use_tex;
-uniform sampler2D tex;
 
 void main() {
-  //if (vtx_color.w <= 0.) discard;
+  out_color = vtx_color;
-  vec4 tex_color;
-  if (use_tex) {
-    tex_color = texture(tex, vtx_uv);
-  } else {
-    tex_color = vec4(1.);
-  }
-  out_color = tex_color * vtx_color;
 }

kubi-ui-glium/shaders/fragment_tex.frag

@@ -0,0 +1,13 @@
+#version 300 es
+
+precision highp float;
+precision highp sampler2D;
+
+out vec4 out_color;
+in vec4 vtx_color;
+in vec2 vtx_uv;
+uniform sampler2D tex;
+
+void main() {
+  out_color = texture(tex, vtx_uv) * vtx_color;
+}

kubi-ui-glium/src/lib.rs

@@ -7,7 +7,7 @@ use glium::{
   texture::{SrgbTexture2d, RawImage2d},
   index::PrimitiveType,
   implement_vertex,
-  uniform, uniforms::DynamicUniforms,
+  uniform, uniforms::{Sampler, SamplerBehavior, SamplerWrapFunction},
 };
 use kubi_ui::{
   KubiUi,
@@ -17,6 +17,7 @@ use kubi_ui::{
 
 const VERTEX_SHADER: &str = include_str!("../shaders/vertex.vert");
 const FRAGMENT_SHADER: &str = include_str!("../shaders/fragment.frag");
+const FRAGMENT_SHADER_TEX: &str = include_str!("../shaders/fragment_tex.frag");
 
 #[derive(Clone, Copy)]
 #[repr(C)]
@@ -114,6 +115,7 @@ struct GlDrawCall {
 pub struct GliumUiRenderer {
   context: Rc<Context>,
   program: glium::Program,
+  program_tex: glium::Program,
   font_texture: Option<Rc<SrgbTexture2d>>,
   plan: Vec<GlDrawCall>,
 }
@@ -123,6 +125,7 @@ impl GliumUiRenderer {
     log::info!("init glium backend for kui");
     Self {
       program: Program::from_source(facade, VERTEX_SHADER, FRAGMENT_SHADER, None).unwrap(),
+      program_tex: Program::from_source(facade, VERTEX_SHADER, FRAGMENT_SHADER_TEX, None).unwrap(),
       context: Rc::clone(facade.get_context()),
       font_texture: None,
       plan: vec![]
@@ -200,11 +203,13 @@ impl GliumUiRenderer {
         frame.draw(
           vtx_buffer,
           idx_buffer,
-          &self.program,
+          &self.program_tex,
           &uniform! {
             resolution: resolution.to_array(),
-            tex: bind_texture.as_ref(),
+            tex: Sampler(bind_texture.as_ref(), SamplerBehavior {
-            use_tex: true,
+              wrap_function: (SamplerWrapFunction::Clamp, SamplerWrapFunction::Clamp, SamplerWrapFunction::Clamp),
+              ..Default::default()
+            }),
           },
           &params,
         ).unwrap();
@@ -215,7 +220,6 @@ impl GliumUiRenderer {
           &self.program,
           &uniform! {
             resolution: resolution.to_array(),
-            use_tex: false,
           },
           &params,
         ).unwrap();

kubi-ui/src/element/builtin/container.rs

@@ -88,10 +88,19 @@ impl Default for Container {
 
 impl Container {
   pub fn measure_max_inner_size(&self, layout: &LayoutInfo) -> Vec2 {
-    //TODO take explicit size into account
+    let outer_size_x = match self.size.0 {
-    layout.max_size - vec2(
+      UiSize::Auto => layout.max_size.x,
-      self.padding.left + self.padding.right,
+      UiSize::Percentage(p) => layout.max_size.x * p,
-      self.padding.top + self.padding.bottom,
+      UiSize::Pixels(p) => p,
+    };
+    let outer_size_y = match self.size.1 {
+      UiSize::Auto => layout.max_size.y,
+      UiSize::Percentage(p) => layout.max_size.y * p,
+      UiSize::Pixels(p) => p,
+    };
+    vec2(
+      outer_size_x - (self.padding.left + self.padding.right),
+      outer_size_y - (self.padding.top + self.padding.bottom),
     )
   }
 }

kubi-ui/src/element/builtin/text.rs

@@ -13,16 +13,18 @@ pub struct Text {
   pub text: Cow<'static, str>,
   pub size: (UiSize, UiSize),
   pub color: Vec4,
-  pub font: FontHandle
+  pub font: FontHandle,
+  pub text_size: u8,
 }
 
 impl Default for Text {
   fn default() -> Self {
     Self {
       text: "".into(),
-      size: (UiSize::Percentage(1.), UiSize::Pixels(32.)),
+      size: (UiSize::Auto, UiSize::Auto),
       color: Vec4::new(1., 1., 1., 1.),
-      font: FontHandle(0)
+      font: FontHandle(0),
+      text_size: 16,
     }
   }
 }
@@ -37,7 +39,7 @@ impl UiElement for Text {
           UiSize::Pixels(pixels) => pixels,
         },
         match self.size.1 {
-          UiSize::Auto => layout.max_size.y,
+          UiSize::Auto => self.text_size as f32,
           UiSize::Percentage(percentage) => layout.max_size.y * percentage,
           UiSize::Pixels(pixels) => pixels,
         },
@@ -51,7 +53,7 @@ impl UiElement for Text {
     draw.add(UiDrawCommand::Text {
       text: self.text.clone(),
       position: layout.position,
-      size: 32,
+      size: self.text_size,
       color: self.color,
       font: self.font
     });