djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Text and circle

Browse source
This commit is contained in:
Emil Ernerfeldt 2019-01-05 15:28:07 +01:00
parent a1ddef742d
commit aa1c53f707
14 changed files with 534 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
docs/emgui_wasm.js
View file

@ -23,54 +23,6 @@
WASM_VECTOR_LEN = buf.length;
return ptr;
}
let cachedTextDecoder = new TextDecoder('utf-8');
function getStringFromWasm(ptr, len) {
return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
}
let cachedGlobalArgumentPtr = null;
function globalArgumentPtr() {
if (cachedGlobalArgumentPtr === null) {
cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
}
return cachedGlobalArgumentPtr;
}
let cachegetUint32Memory = null;
function getUint32Memory() {
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
}
return cachegetUint32Memory;
}
/**
* @param {string} arg0
* @returns {string}
*/
__exports.show_gui = function(arg0) {
const ptr0 = passStringToWasm(arg0);
const len0 = WASM_VECTOR_LEN;
const retptr = globalArgumentPtr();
try {
wasm.show_gui(retptr, ptr0, len0);
const mem = getUint32Memory();
const rustptr = mem[retptr / 4];
const rustlen = mem[retptr / 4 + 1];
const realRet = getStringFromWasm(rustptr, rustlen).slice();
wasm.__wbindgen_free(rustptr, rustlen * 1);
return realRet;
} finally {
wasm.__wbindgen_free(ptr0, len0 * 1);
}
};
/**
* @param {string} arg0
* @returns {Painter}
@ -114,6 +66,12 @@
function getObject(idx) { return heap[idx]; }
let cachedTextDecoder = new TextDecoder('utf-8');
function getStringFromWasm(ptr, len) {
return cachedTextDecoder.decode(getUint8Memory().subarray(ptr, ptr + len));
}
let heap_next = heap.length;
function addHeapObject(obj) {
@ -149,6 +107,14 @@ const __widl_f_get_context_HTMLCanvasElement_target = typeof HTMLCanvasElement =
throw new Error(`wasm-bindgen: HTMLCanvasElement.getContext does not exist`);
};
let cachegetUint32Memory = null;
function getUint32Memory() {
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
}
return cachegetUint32Memory;
}
__exports.__widl_f_get_context_HTMLCanvasElement = function(arg0, arg1, arg2, exnptr) {
let varg1 = getStringFromWasm(arg1, arg2);
try {
@ -201,6 +167,34 @@ __exports.__widl_f_buffer_data_with_array_buffer_view_WebGLRenderingContext = fu
__widl_f_buffer_data_with_array_buffer_view_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2), arg3);
};
function getArrayU8FromWasm(ptr, len) {
return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
}
const __widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.texImage2D || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.texImage2D does not exist`);
};
__exports.__widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, exnptr) {
let varg9 = arg9 == 0 ? undefined : getArrayU8FromWasm(arg9, arg10);
try {
__widl_f_tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array_WebGLRenderingContext_target.call(getObject(arg0), arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, varg9);
} catch (e) {
const view = getUint32Memory();
view[exnptr / 4] = 1;
view[exnptr / 4 + 1] = addHeapObject(e);
}
};
const __widl_f_active_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.activeTexture || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.activeTexture does not exist`);
};
__exports.__widl_f_active_texture_WebGLRenderingContext = function(arg0, arg1) {
__widl_f_active_texture_WebGLRenderingContext_target.call(getObject(arg0), arg1);
};
const __widl_f_attach_shader_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.attachShader || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.attachShader does not exist`);
};
@ -217,6 +211,14 @@ __exports.__widl_f_bind_buffer_WebGLRenderingContext = function(arg0, arg1, arg2
__widl_f_bind_buffer_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2));
};
const __widl_f_bind_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.bindTexture || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.bindTexture does not exist`);
};
__exports.__widl_f_bind_texture_WebGLRenderingContext = function(arg0, arg1, arg2) {
__widl_f_bind_texture_WebGLRenderingContext_target.call(getObject(arg0), arg1, getObject(arg2));
};
const __widl_f_blend_func_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.blendFunc || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.blendFunc does not exist`);
};
@ -282,6 +284,17 @@ __exports.__widl_f_create_shader_WebGLRenderingContext = function(arg0, arg1) {
};
const __widl_f_create_texture_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.createTexture || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.createTexture does not exist`);
};
__exports.__widl_f_create_texture_WebGLRenderingContext = function(arg0) {
const val = __widl_f_create_texture_WebGLRenderingContext_target.call(getObject(arg0));
return isLikeNone(val) ? 0 : addHeapObject(val);
};
const __widl_f_draw_elements_with_i32_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.drawElements || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.drawElements does not exist`);
};
@ -388,6 +401,22 @@ __exports.__widl_f_shader_source_WebGLRenderingContext = function(arg0, arg1, ar
__widl_f_shader_source_WebGLRenderingContext_target.call(getObject(arg0), getObject(arg1), varg2);
};
const __widl_f_tex_parameteri_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.texParameteri || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.texParameteri does not exist`);
};
__exports.__widl_f_tex_parameteri_WebGLRenderingContext = function(arg0, arg1, arg2, arg3) {
__widl_f_tex_parameteri_WebGLRenderingContext_target.call(getObject(arg0), arg1, arg2, arg3);
};
const __widl_f_uniform1i_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.uniform1i || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.uniform1i does not exist`);
};
__exports.__widl_f_uniform1i_WebGLRenderingContext = function(arg0, arg1, arg2) {
__widl_f_uniform1i_WebGLRenderingContext_target.call(getObject(arg0), getObject(arg1), arg2);
};
const __widl_f_uniform2f_WebGLRenderingContext_target = typeof WebGLRenderingContext === 'undefined' ? null : WebGLRenderingContext.prototype.uniform2f || function() {
throw new Error(`wasm-bindgen: WebGLRenderingContext.uniform2f does not exist`);
};
@ -463,6 +492,14 @@ __exports.__wbg_subarray_705096b76e15e94e = function(arg0, arg1, arg2) {
return addHeapObject(getObject(arg0).subarray(arg1, arg2));
};
__exports.__wbg_new_3153ff3e90269012 = function(arg0) {
return addHeapObject(new Uint16Array(getObject(arg0)));
};
__exports.__wbg_subarray_6f181829e5fd3854 = function(arg0, arg1, arg2) {
return addHeapObject(getObject(arg0).subarray(arg1, arg2));
};
__exports.__wbg_instanceof_Memory_d223615e29613829 = function(idx) {
return getObject(idx) instanceof WebAssembly.Memory ? 1 : 0;
};
@ -511,6 +548,21 @@ __exports.__wbindgen_string_new = function(p, l) {
return addHeapObject(getStringFromWasm(p, l));
};
__exports.__wbindgen_number_get = function(n, invalid) {
let obj = getObject(n);
if (typeof(obj) === 'number') return obj;
getUint8Memory()[invalid] = 1;
return 0;
};
__exports.__wbindgen_is_null = function(idx) {
return getObject(idx) === null ? 1 : 0;
};
__exports.__wbindgen_is_undefined = function(idx) {
return getObject(idx) === undefined ? 1 : 0;
};
__exports.__wbindgen_boolean_get = function(i) {
let v = getObject(i);
if (typeof(v) === 'boolean') {
@ -520,6 +572,18 @@ __exports.__wbindgen_boolean_get = function(i) {
}
};
__exports.__wbindgen_is_symbol = function(i) {
return typeof(getObject(i)) === 'symbol' ? 1 : 0;
};
__exports.__wbindgen_string_get = function(i, len_ptr) {
let obj = getObject(i);
if (typeof(obj) !== 'string') return 0;
const ptr = passStringToWasm(obj);
getUint32Memory()[len_ptr / 4] = WASM_VECTOR_LEN;
return ptr;
};
__exports.__wbindgen_memory = function() { return addHeapObject(wasm.memory); };
function takeObject(idx) {

BIN
docs/emgui_wasm_bg.wasm
View file

Binary file not shown.

3
docs/frontend.js
View file

@ -111,8 +111,7 @@ function paint_gui(canvas, input) {
var commands = rust_gui(input);
for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) {
var cmd = commands_1[_i];
var commands_2 = rust_gui(input);
commands_2.unshift({
commands.unshift({
fill_color: { r: 0, g: 0, b: 0, a: 0 },
kind: "clear"
});

4
docs/frontend.ts
View file

@ -206,14 +206,12 @@ function paint_gui(canvas, input: RawInput) {
}
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
} else {
let commands = rust_gui(input);
const commands = rust_gui(input);
for (const cmd of commands) {
const commands = rust_gui(input);
commands.unshift({
fill_color: { r: 0, g: 0, b: 0, a: 0 },
kind: "clear",
});
paint_command(canvas, cmd);
}
}

10
emgui/src/emgui.rs
View file

@ -1,7 +1,7 @@
use crate::{layout, style, types::*};
/// Encapsulates input, layout and painting for ease of use.
#[derive(Clone, Debug, Default)]
#[derive(Clone)]
pub struct Emgui {
pub last_input: RawInput,
pub layout: layout::Layout,
@ -9,6 +9,14 @@ pub struct Emgui {
}
impl Emgui {
pub fn new() -> Emgui {
Emgui {
last_input: Default::default(),
layout: layout::Layout::new(),
style: Default::default(),
}
}
pub fn new_frame(&mut self, new_input: RawInput) {
let gui_input = GuiInput::from_last_and_new(&self.last_input, &new_input);
self.last_input = new_input;

35
emgui/src/font.rs
View file

@ -5,19 +5,20 @@ use rusttype::{point, Scale};
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct GlyphInfo {
/// X offset for nice rendering
offset_x: u16,
pub offset_x: u16,
/// Y offset for nice rendering
offset_y: u16,
pub offset_y: u16,
min_x: u16,
min_y: u16,
// Texture coordinates:
pub min_x: u16,
pub min_y: u16,
/// Inclusive.
max_x: u16,
pub max_x: u16,
/// Inclusive
max_y: u16,
pub max_y: u16,
}
/// Printable ascii characters [33, 126], which excludes 32 (space) and 127 (DEL)
@ -26,6 +27,7 @@ const FIRST_ASCII: usize = 33;
/// Inclusive
const LAST_ASCII: usize = 126;
// TODO: break out texture atlas into separate struct, and fill it dynamically, potentially from multiple fonts.
#[derive(Clone)]
pub struct Font {
/// Maximum character height
@ -138,8 +140,12 @@ impl Font {
(FIRST_ASCII..=LAST_ASCII).map(|c| c as u8 as char)
}
pub fn texture(&self) -> (usize, usize, &[u8]) {
(self.atlas_width, self.atlas_height, &self.atlas)
pub fn texture(&self) -> (u16, u16, &[u8]) {
(
self.atlas_width as u16,
self.atlas_height as u16,
&self.atlas,
)
}
pub fn pixel(&self, x: u16, y: u16) -> u8 {
@ -159,6 +165,19 @@ impl Font {
}
}
/// Returns the start (X) of each character, starting at zero, plus the total width.
/// i.e. returns text.chars().count() + 1 numbers.
pub fn layout_single_line(&self, text: &str) -> Vec<f32> {
let mut x_offsets = Vec::new();
let mut x = 0.0;
for c in text.chars() {
x_offsets.push(x);
x += 7.0; // TODO: kerning
}
x_offsets.push(x);
x_offsets
}
pub fn debug_print_atlas_ascii_art(&self) {
for y in 0..self.atlas_height {
println!(

35
emgui/src/layout.rs
View file

@ -1,6 +1,6 @@
use std::collections::HashSet;
use crate::{math::*, types::*};
use crate::{font::Font, math::*, types::*};
// ----------------------------------------------------------------------------
@ -95,7 +95,10 @@ struct Memory {
// ----------------------------------------------------------------------------
struct TextFragment {
rect: Rect,
/// The start of each character, starting at zero.
x_offsets: Vec<f32>,
/// 0 for the first line, n * line_spacing for the rest
y_offset: f32,
text: String,
}
@ -149,9 +152,10 @@ impl Layouter {
type Id = u64;
#[derive(Clone, Debug, Default)]
#[derive(Clone)]
pub struct Layout {
options: LayoutOptions,
font: Font, // TODO: Arc?
input: GuiInput,
memory: Memory,
id: Id,
@ -161,6 +165,19 @@ pub struct Layout {
}
impl Layout {
pub fn new() -> Layout {
Layout {
options: Default::default(),
font: Font::new(13),
input: Default::default(),
memory: Default::default(),
id: Default::default(),
layouter: Default::default(),
graphics: Default::default(),
hovering_graphics: Default::default(),
}
}
pub fn input(&self) -> &GuiInput {
&self.input
}
@ -388,6 +405,7 @@ impl Layout {
let mut popup_layout = Layout {
options: self.options,
input: self.input,
font: self.font.clone(),
memory: self.memory.clone(), // TODO: Arc
id: self.id,
layouter: Default::default(),
@ -450,11 +468,11 @@ impl Layout {
let mut max_width = 0.0;
let mut text_fragments = Vec::new();
for line in text.split('\n') {
// TODO: break long lines
let line_width = char_size.x * (line.len() as f32);
let x_offsets = self.font.layout_single_line(&line);
let line_width = *x_offsets.last().unwrap();
text_fragments.push(TextFragment {
rect: Rect::from_min_size(vec2(0.0, cursor_y), vec2(line_width, char_size.y)),
x_offsets,
y_offset: cursor_y,
text: line.into(),
});
@ -468,9 +486,10 @@ impl Layout {
fn add_text(&mut self, pos: Vec2, text: Vec<TextFragment>) {
for fragment in text {
self.graphics.push(GuiCmd::Text {
pos: pos + vec2(fragment.rect.pos.x, fragment.rect.center().y),
pos: pos + vec2(0.0, fragment.y_offset),
style: TextStyle::Label,
text: fragment.text,
x_offsets: fragment.x_offsets,
});
}
}

7
emgui/src/math.rs
View file

@ -92,6 +92,11 @@ pub fn lerp(min: f32, max: f32, t: f32) -> f32 {
(1.0 - t) * min + t * max
}
pub fn remap(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max: f32) -> f32 {
let t = (from - from_min) / (from_max - from_min);
lerp(to_min, to_max, t)
}
pub fn remap_clamp(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max: f32) -> f32 {
let t = if from <= from_min {
0.0
@ -102,3 +107,5 @@ pub fn remap_clamp(from: f32, from_min: f32, from_max: f32, to_min: f32, to_max:
};
lerp(to_min, to_max, t)
}
pub const TAU: f32 = 2.0 * std::f32::consts::PI;

224
emgui/src/painter.rs
View file

@ -1,6 +1,7 @@
/// Outputs render info in a format suitable for e.g. OpenGL.
use crate::{
font::Font,
math::{remap, Vec2, TAU},
types::{Color, PaintCmd},
};
@ -21,11 +22,102 @@ pub struct Vertex {
#[derive(Clone, Debug, Default)]
pub struct Frame {
pub clear_color: Option<Color>,
/// One big triangle strip
/// Draw as triangles (i.e. the length is a multiple of three)
pub indices: Vec<u32>,
pub vertices: Vec<Vertex>,
}
impl Frame {
/// Uniformly colored rectangle
pub fn add_rect(&mut self, top_left: Vertex, bottom_right: Vertex) {
let idx = self.vertices.len() as u32;
self.indices.push(idx + 0);
self.indices.push(idx + 1);
self.indices.push(idx + 2);
self.indices.push(idx + 2);
self.indices.push(idx + 1);
self.indices.push(idx + 3);
let top_right = Vertex {
x: bottom_right.x,
y: top_left.y,
u: bottom_right.u,
v: top_left.v,
color: top_left.color,
};
let botom_left = Vertex {
x: top_left.x,
y: bottom_right.y,
u: top_left.u,
v: bottom_right.v,
color: top_left.color,
};
self.vertices.push(top_left);
self.vertices.push(top_right);
self.vertices.push(botom_left);
self.vertices.push(bottom_right);
}
pub fn fill_closed_path(&mut self, points: &[Vec2], normals: &[Vec2], color: Color) {
self.vertices.extend(points.iter().map(|p| Vertex {
x: p.x,
y: p.y,
u: 0,
v: 0,
color,
}));
// TODO: use normals for anti-aliasing
assert_eq!(points.len(), normals.len());
let n = points.len() as u32;
let idx = self.vertices.len() as u32;
for i in 2..n {
self.indices.push(idx);
self.indices.push(idx + i - 1);
self.indices.push(idx + i);
}
}
pub fn draw_closed_path(
&mut self,
points: &[Vec2],
normals: &[Vec2],
width: f32,
color: Color,
) {
// TODO: anti-aliasing
assert_eq!(points.len(), normals.len());
let n = points.len() as u32;
let hw = width / 2.0;
let idx = self.vertices.len() as u32;
for i in 0..n {
self.indices.push(idx + (2 * i + 0) % (2 * n));
self.indices.push(idx + (2 * i + 1) % (2 * n));
self.indices.push(idx + (2 * i + 2) % (2 * n));
self.indices.push(idx + (2 * i + 2) % (2 * n));
self.indices.push(idx + (2 * i + 1) % (2 * n));
self.indices.push(idx + (2 * i + 3) % (2 * n));
}
for (p, n) in points.iter().zip(normals) {
self.vertices.push(Vertex {
x: p.x + hw * n.x,
y: p.y + hw * n.x,
u: 0,
v: 0,
color,
});
self.vertices.push(Vertex {
x: p.x - hw * n.x,
y: p.y - hw * n.x,
u: 0,
v: 0,
color,
});
}
}
}
#[derive(Clone)]
pub struct Painter {
font: Font,
@ -39,48 +131,132 @@ impl Painter {
}
/// 8-bit row-major font atlas texture, (width, height, pixels).
pub fn texture(&self) -> (usize, usize, &[u8]) {
pub fn texture(&self) -> (u16, u16, &[u8]) {
self.font.texture()
}
pub fn paint(&self, commands: &[PaintCmd]) -> Frame {
// let mut path_points = Vec::new();
// let mut path_normals = Vec::new();
let mut frame = Frame::default();
for cmd in commands {
match cmd {
PaintCmd::Circle { .. } => {} // TODO
PaintCmd::Circle {
center,
fill_color,
outline,
radius,
} => {
let n = 64; // TODO: parameter
if let Some(color) = fill_color {
let idx = frame.vertices.len() as u32;
for i in 2..n {
frame.indices.push(idx);
frame.indices.push(idx + i - 1);
frame.indices.push(idx + i);
}
for i in 0..n {
let angle = remap(i as f32, 0.0, n as f32, 0.0, TAU);
frame.vertices.push(Vertex {
x: center.x + radius * angle.cos(),
y: center.y + radius * angle.sin(),
u: 0,
v: 0,
color: *color,
});
}
}
if let Some(_outline) = outline {
// TODO
}
}
PaintCmd::Clear { fill_color } => {
frame.clear_color = Some(*fill_color);
}
PaintCmd::Line { .. } => {} // TODO
PaintCmd::Rect {
fill_color,
outline,
pos,
size,
fill_color,
..
} => {
// TODO: rounded corners, colors etc.
let idx = frame.vertices.len() as u32;
frame.indices.push(idx + 0);
frame.indices.push(idx + 0);
frame.indices.push(idx + 1);
frame.indices.push(idx + 2);
frame.indices.push(idx + 3);
frame.indices.push(idx + 3);
// TODO: rounded corners
// TODO: anti-aliasing
// TODO: FilledRect and RectOutline as separate commands?
if let Some(color) = fill_color {
let vert = |pos: Vec2| Vertex {
x: pos.x,
y: pos.y,
u: 0,
v: 0,
color: *color,
};
frame.add_rect(vert(*pos), vert(*pos + *size));
}
if let Some(outline) = outline {
let vert = |x, y| Vertex {
x,
y,
u: 0,
v: 0,
color: outline.color,
};
let vert = |x, y| Vertex {
x,
y,
u: 0,
v: 0,
color: fill_color.unwrap_or(Color::WHITE),
};
// Draw this counter-clockwise from top-left corner,
// outer to inner on each step.
let hw = outline.width / 2.0;
frame.vertices.push(vert(pos.x, pos.y));
frame.vertices.push(vert(pos.x + size.x, pos.y));
frame.vertices.push(vert(pos.x, pos.y + size.y));
frame.vertices.push(vert(pos.x + size.x, pos.y + size.y));
let idx = frame.vertices.len() as u32;
for i in 0..4 {
frame.indices.push(idx + (2 * i + 0) % 8);
frame.indices.push(idx + (2 * i + 1) % 8);
frame.indices.push(idx + (2 * i + 2) % 8);
frame.indices.push(idx + (2 * i + 2) % 8);
frame.indices.push(idx + (2 * i + 1) % 8);
frame.indices.push(idx + (2 * i + 3) % 8);
}
let min = *pos;
let max = *pos + *size;
frame.vertices.push(vert(min.x - hw, min.y - hw));
frame.vertices.push(vert(min.x + hw, min.y + hw));
frame.vertices.push(vert(max.x + hw, min.y - hw));
frame.vertices.push(vert(max.x - hw, min.y + hw));
frame.vertices.push(vert(max.x + hw, max.y + hw));
frame.vertices.push(vert(max.x - hw, max.y - hw));
frame.vertices.push(vert(min.x - hw, max.y + hw));
frame.vertices.push(vert(min.x + hw, max.y - hw));
}
}
PaintCmd::Text {
color,
pos,
text,
x_offsets,
} => {
for (c, x_offset) in text.chars().zip(x_offsets.iter()) {
if let Some(glyph) = self.font.glyph_info(c) {
let top_left = Vertex {
x: pos.x + x_offset + (glyph.offset_x as f32),
y: pos.y + (glyph.offset_y as f32),
u: glyph.min_x,
v: glyph.min_y,
color: *color,
};
let bottom_right = Vertex {
x: top_left.x + (1 + glyph.max_x - glyph.min_x) as f32,
y: top_left.y + (1 + glyph.max_y - glyph.min_y) as f32,
u: glyph.max_x + 1,
v: glyph.max_y + 1,
color: *color,
};
frame.add_rect(top_left, bottom_right);
}
}
}
PaintCmd::Text { .. } => {} // TODO
}
}
frame

10
emgui/src/style.rs
View file

@ -241,18 +241,18 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
}
GuiCmd::Text {
pos,
text,
style: text_style,
text,
x_offsets,
} => {
let fill_color = match text_style {
let color = match text_style {
TextStyle::Label => style.text_color(),
};
out_commands.push(PaintCmd::Text {
fill_color,
font_name: style.font_name.clone(),
font_size: style.font_size,
color,
pos,
text,
x_offsets,
});
}
GuiCmd::Window { rect } => {

16
emgui/src/types.rs
View file

@ -123,6 +123,8 @@ pub enum GuiCmd {
pos: Vec2,
style: TextStyle,
text: String,
/// Start each character in the text, as offset from pos.
x_offsets: Vec<f32>,
},
/// Background of e.g. a popup
Window {
@ -162,16 +164,14 @@ pub enum PaintCmd {
pos: Vec2,
size: Vec2,
},
/// Paint a single line of mono-space text.
/// The text should start at the given position and flow to the right.
/// The text should be vertically centered at the given position.
/// Paint a single line of text
Text {
fill_color: Color,
/// Name, e.g. Palatino
font_name: String,
/// Height in pixels, e.g. 12
font_size: f32,
color: Color,
/// Top left corner of the first character.
pos: Vec2,
text: String,
/// Start each character in the text, as offset from pos.
x_offsets: Vec<f32>,
// TODO: font info
},
}

1
emgui_wasm/Cargo.toml
View file

@ -26,6 +26,7 @@ features = [
'WebGlProgram',
'WebGlRenderingContext',
'WebGlShader',
'WebGlTexture',
'WebGlUniformLocation',
'Window',
]

45
emgui_wasm/src/lib.rs
View file

@ -16,35 +16,36 @@ use wasm_bindgen::prelude::*;
mod app;
mod webgl;
#[wasm_bindgen]
pub fn show_gui(raw_input_json: &str) -> String {
// TODO: faster interface than JSON
let raw_input: RawInput = serde_json::from_str(raw_input_json).unwrap();
// #[wasm_bindgen]
// pub fn show_gui(raw_input_json: &str) -> String {
// // TODO: faster interface than JSON
// let raw_input: RawInput = serde_json::from_str(raw_input_json).unwrap();
lazy_static::lazy_static! {
static ref APP: Mutex<app::App> = Default::default();
static ref EMGUI: Mutex<Emgui> = Default::default();
}
// lazy_static::lazy_static! {
// static ref APP: Mutex<app::App> = Default::default();
// static ref EMGUI: Mutex<Emgui> = Default::default();
// }
let mut emgui = EMGUI.lock().unwrap();
emgui.new_frame(raw_input);
// let mut emgui = EMGUI.lock().unwrap();
// emgui.new_frame(raw_input);
use crate::app::GuiSettings;
APP.lock().unwrap().show_gui(&mut emgui.layout);
// use crate::app::GuiSettings;
// APP.lock().unwrap().show_gui(&mut emgui.layout);
let mut style = emgui.style.clone();
emgui.layout.foldable("Style", |gui| {
style.show_gui(gui);
});
emgui.style = style;
// let mut style = emgui.style.clone();
// emgui.layout.foldable("Style", |gui| {
// style.show_gui(gui);
// });
// emgui.style = style;
let commands = emgui.paint();
serde_json::to_string(&commands).unwrap()
}
// let commands = emgui.paint();
// serde_json::to_string(&commands).unwrap()
// }
#[wasm_bindgen]
pub fn new_webgl_painter(canvas_id: &str) -> Result<webgl::Painter, JsValue> {
webgl::Painter::new(canvas_id)
let emgui_painter = emgui::Painter::new(); // TODO: don't create this twice
webgl::Painter::new(canvas_id, emgui_painter.texture())
}
struct State {
@ -57,7 +58,7 @@ impl State {
fn new() -> State {
State {
app: Default::default(),
emgui: Default::default(),
emgui: Emgui::new(),
emgui_painter: emgui::Painter::new(),
}
}

160
emgui_wasm/src/webgl.rs
View file

@ -1,23 +1,33 @@
#![allow(dead_code)]
use {
js_sys::WebAssembly,
wasm_bindgen::{prelude::*, JsCast},
web_sys::{WebGlBuffer, WebGlProgram, WebGlRenderingContext, WebGlShader},
web_sys::{WebGlBuffer, WebGlProgram, WebGlRenderingContext, WebGlShader, WebGlTexture},
};
use emgui::Frame;
type Gl = WebGlRenderingContext;
#[wasm_bindgen]
pub struct Painter {
canvas: web_sys::HtmlCanvasElement,
gl: WebGlRenderingContext,
texture: WebGlTexture,
program: WebGlProgram,
index_buffer: WebGlBuffer,
pos_buffer: WebGlBuffer,
tc_buffer: WebGlBuffer,
color_buffer: WebGlBuffer,
tex_size: (u16, u16),
}
impl Painter {
pub fn new(canvas_id: &str) -> Result<Painter, JsValue> {
pub fn new(
canvas_id: &str,
(tex_width, tex_height, pixels): (u16, u16, &[u8]),
) -> Result<Painter, JsValue> {
let document = web_sys::window().unwrap().document().unwrap();
let canvas = document.get_element_by_id(canvas_id).unwrap();
let canvas: web_sys::HtmlCanvasElement = canvas.dyn_into::<web_sys::HtmlCanvasElement>()?;
@ -27,19 +37,47 @@ impl Painter {
.unwrap()
.dyn_into::<WebGlRenderingContext>()?;
gl.enable(WebGlRenderingContext::BLEND);
gl.blend_func(
WebGlRenderingContext::SRC_ALPHA,
WebGlRenderingContext::ONE_MINUS_SRC_ALPHA,
);
// --------------------------------------------------------------------
let texture = gl.create_texture().unwrap();
gl.bind_texture(Gl::TEXTURE_2D, Some(&texture));
// TODO: remove once https://github.com/rustwasm/wasm-bindgen/issues/1005 is fixed.
let mut pixels: Vec<_> = pixels.iter().cloned().collect();
let level = 0;
let internal_format = Gl::ALPHA;
let border = 0;
let src_format = Gl::ALPHA;
let src_type = Gl::UNSIGNED_BYTE;
gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
Gl::TEXTURE_2D,
level,
internal_format as i32,
tex_width as i32,
tex_height as i32,
border,
src_format,
src_type,
Some(&mut pixels),
)
.unwrap();
gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_S, Gl::CLAMP_TO_EDGE as i32);
gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_T, Gl::CLAMP_TO_EDGE as i32);
gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MIN_FILTER, Gl::NEAREST as i32);
// --------------------------------------------------------------------
let vert_shader = compile_shader(
&gl,
WebGlRenderingContext::VERTEX_SHADER,
Gl::VERTEX_SHADER,
r#"
uniform vec2 u_screen_size;
uniform vec2 u_tex_size;
attribute vec2 a_pos;
attribute vec2 a_tc;
attribute vec4 a_color;
varying vec2 v_tc;
varying vec4 v_color;
void main() {
gl_Position = vec4(
@ -47,34 +85,41 @@ impl Painter {
1.0 - 2.0 * a_pos.y / u_screen_size.y,
0.0,
1.0);
// v_color = vec4(1.0, 0.0, 0.0, 0.5);
v_tc = a_tc / u_tex_size;
v_color = a_color;
}
"#,
)?;
let frag_shader = compile_shader(
&gl,
WebGlRenderingContext::FRAGMENT_SHADER,
Gl::FRAGMENT_SHADER,
r#"
uniform sampler2D u_sampler;
precision highp float;
varying vec2 v_tc;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
gl_FragColor *= texture2D(u_sampler, v_tc).a;
}
"#,
)?;
let program = link_program(&gl, [vert_shader, frag_shader].iter())?;
let index_buffer = gl.create_buffer().ok_or("failed to create index_buffer")?;
let pos_buffer = gl.create_buffer().ok_or("failed to create pos_buffer")?;
let tc_buffer = gl.create_buffer().ok_or("failed to create tc_buffer")?;
let color_buffer = gl.create_buffer().ok_or("failed to create color_buffer")?;
Ok(Painter {
canvas,
gl,
texture,
program,
index_buffer,
pos_buffer,
tc_buffer,
color_buffer,
tex_size: (tex_width, tex_height),
})
}
@ -83,19 +128,26 @@ impl Painter {
// --------------------------------------------------------------------
gl.enable(Gl::BLEND);
gl.blend_func(Gl::SRC_ALPHA, Gl::ONE_MINUS_SRC_ALPHA);
gl.use_program(Some(&self.program));
gl.active_texture(Gl::TEXTURE0);
gl.bind_texture(Gl::TEXTURE_2D, Some(&self.texture));
// --------------------------------------------------------------------
let indices: Vec<u16> = frame.indices.iter().map(|idx| *idx as u16).collect();
let mut positions = Vec::with_capacity(2 * frame.vertices.len());
let mut positions: Vec<f32> = Vec::with_capacity(2 * frame.vertices.len());
let mut tex_coords: Vec<u16> = Vec::with_capacity(2 * frame.vertices.len());
for v in &frame.vertices {
positions.push(v.x);
positions.push(v.y);
tex_coords.push(v.u);
tex_coords.push(v.v);
}
let mut colors = Vec::with_capacity(4 * frame.vertices.len());
let mut colors: Vec<u8> = Vec::with_capacity(4 * frame.vertices.len());
for v in &frame.vertices {
colors.push(v.color.r);
colors.push(v.color.g);
@ -112,14 +164,11 @@ impl Painter {
let indices_array = js_sys::Int16Array::new(&indices_memory_buffer)
.subarray(indices_ptr, indices_ptr + indices.len() as u32);
gl.bind_buffer(
WebGlRenderingContext::ELEMENT_ARRAY_BUFFER,
Some(&self.index_buffer),
);
gl.bind_buffer(Gl::ELEMENT_ARRAY_BUFFER, Some(&self.index_buffer));
gl.buffer_data_with_array_buffer_view(
WebGlRenderingContext::ELEMENT_ARRAY_BUFFER,
Gl::ELEMENT_ARRAY_BUFFER,
&indices_array,
WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ?
Gl::STREAM_DRAW,
);
// --------------------------------------------------------------------
@ -131,29 +180,47 @@ impl Painter {
let pos_array = js_sys::Float32Array::new(&pos_memory_buffer)
.subarray(pos_ptr, pos_ptr + positions.len() as u32);
gl.bind_buffer(WebGlRenderingContext::ARRAY_BUFFER, Some(&self.pos_buffer));
gl.buffer_data_with_array_buffer_view(
WebGlRenderingContext::ARRAY_BUFFER,
&pos_array,
WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ?
);
gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.pos_buffer));
gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &pos_array, Gl::STREAM_DRAW);
let a_pos_loc = gl.get_attrib_location(&self.program, "a_pos");
assert!(a_pos_loc >= 0);
let a_pos_loc = a_pos_loc as u32;
let normalize = false;
let stride = 0;
let offset = 0;
gl.vertex_attrib_pointer_with_i32(a_pos_loc, 2, Gl::FLOAT, normalize, stride, offset);
gl.enable_vertex_attrib_array(a_pos_loc);
// --------------------------------------------------------------------
let tc_memory_buffer = wasm_bindgen::memory()
.dyn_into::<WebAssembly::Memory>()?
.buffer();
let tc_ptr = tex_coords.as_ptr() as u32 / 2;
let tc_array = js_sys::Uint16Array::new(&tc_memory_buffer)
.subarray(tc_ptr, tc_ptr + tex_coords.len() as u32);
gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.tc_buffer));
gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &tc_array, Gl::STREAM_DRAW);
let a_tc_loc = gl.get_attrib_location(&self.program, "a_tc");
assert!(a_tc_loc >= 0);
let a_tc_loc = a_tc_loc as u32;
let normalize = false;
let stride = 0;
let offset = 0;
gl.vertex_attrib_pointer_with_i32(
a_pos_loc,
a_tc_loc,
2,
WebGlRenderingContext::FLOAT,
Gl::UNSIGNED_SHORT,
normalize,
stride,
offset,
);
gl.enable_vertex_attrib_array(a_pos_loc);
gl.enable_vertex_attrib_array(a_tc_loc);
// --------------------------------------------------------------------
@ -164,15 +231,8 @@ impl Painter {
let colors_array = js_sys::Uint8Array::new(&colors_memory_buffer)
.subarray(colors_ptr, colors_ptr + colors.len() as u32);
gl.bind_buffer(
WebGlRenderingContext::ARRAY_BUFFER,
Some(&self.color_buffer),
);
gl.buffer_data_with_array_buffer_view(
WebGlRenderingContext::ARRAY_BUFFER,
&colors_array,
WebGlRenderingContext::STATIC_DRAW, // TODO: STREAM ?
);
gl.bind_buffer(Gl::ARRAY_BUFFER, Some(&self.color_buffer));
gl.buffer_data_with_array_buffer_view(Gl::ARRAY_BUFFER, &colors_array, Gl::STREAM_DRAW);
let a_color_loc = gl.get_attrib_location(&self.program, "a_color");
assert!(a_color_loc >= 0);
@ -184,7 +244,7 @@ impl Painter {
gl.vertex_attrib_pointer_with_i32(
a_color_loc,
4,
WebGlRenderingContext::UNSIGNED_BYTE,
Gl::UNSIGNED_BYTE,
normalize,
stride,
offset,
@ -201,17 +261,23 @@ impl Painter {
self.canvas.width() as f32,
self.canvas.height() as f32,
);
// gl.uniform2f(Some(&u_screen_size_loc), 4.0, 1.0);
let u_tex_size_loc = gl
.get_uniform_location(&self.program, "u_tex_size")
.unwrap();
gl.uniform2f(
Some(&u_tex_size_loc),
self.tex_size.0 as f32,
self.tex_size.1 as f32,
);
let u_sampler_loc = gl.get_uniform_location(&self.program, "u_sampler").unwrap();
gl.uniform1i(Some(&u_sampler_loc), 0);
gl.clear_color(0.05, 0.05, 0.05, 1.0);
gl.clear(WebGlRenderingContext::COLOR_BUFFER_BIT);
gl.clear(Gl::COLOR_BUFFER_BIT);
gl.draw_elements_with_i32(
WebGlRenderingContext::TRIANGLE_STRIP,
indices.len() as i32,
WebGlRenderingContext::UNSIGNED_SHORT,
0,
);
gl.draw_elements_with_i32(Gl::TRIANGLES, indices.len() as i32, Gl::UNSIGNED_SHORT, 0);
Ok(())
}
@ -229,7 +295,7 @@ fn compile_shader(
gl.compile_shader(&shader);
if gl
.get_shader_parameter(&shader, WebGlRenderingContext::COMPILE_STATUS)
.get_shader_parameter(&shader, Gl::COMPILE_STATUS)
.as_bool()
.unwrap_or(false)
{
@ -254,7 +320,7 @@ fn link_program<'a, T: IntoIterator<Item = &'a WebGlShader>>(
gl.link_program(&program);
if gl
.get_program_parameter(&program, WebGlRenderingContext::LINK_STATUS)
.get_program_parameter(&program, Gl::LINK_STATUS)
.as_bool()
.unwrap_or(false)
{