From: Brendan Hansen Date: Sat, 20 Feb 2021 02:40:20 +0000 (-0600) Subject: added image borders X-Git-Url: https://git.brendanfh.com/?a=commitdiff_plain;h=9e86b3e199db27b4166dec3be3a63c3481e86e1d;p=onyx-prez.git added image borders --- diff --git a/dist/prez.wasm b/dist/prez.wasm index 5a1bf64..3112fb4 100644 Binary files a/dist/prez.wasm and b/dist/prez.wasm differ diff --git a/onyx.prez b/onyx.prez index a5d7fac..82250f3 100644 --- a/onyx.prez +++ b/onyx.prez @@ -10,6 +10,7 @@ [define_text_style hyperlink color 100 100 255 font_attr italic font_size 40 font_name "Arial" left padding 10] [define_text_style code color $tbright $tbright $tbright font_size 40 font_name "monospace" left padding 20] +[load_image onyx_example "https://brendanfh.com/files/onyx_prez/onyx_example.png"] [load_image wasm_logo "https://webassembly.org/css/webassembly.svg"] # --------------------------------------------- @@ -22,7 +23,7 @@ [y 50] Onyx [text_style normal font_attr italic font_size 36 centered] -[y 55] A simple, yet powerful programming language for WebAssembly. +[y 56] A simple, yet powerful programming language for WebAssembly. @@ -40,11 +41,14 @@ [y 34] Some important design features: [text_style inherit padding 15] -▪ No dependence on other languages +▪ Strongly typed ▪ Fast compilation ▪ Easy to write ▪ Easy to read +[image onyx_example x 50 y 30 width 35 + border_color 30 30 30 border_width 1] + # --------------------------------------------- # BRIEFLY introduce WASM and its capabilities @@ -66,7 +70,7 @@ ▪ Safe indirect function calls [text_style normal] -[y 60] Multiple environments: +[y 60] Multiple embeddings: [text_style inherit padding 15] ▪ Web browsers ▪ WebAssembly Systems Interface (WASI) @@ -76,7 +80,8 @@ [text_style hyperlink centered] https://webassembly.org/ -[image wasm_logo x 65 y 34 width 20] +[image wasm_logo x 65 y 34 width 20 + border_width 2 border_color 20 20 20] # --------------------------------------------- @@ -86,7 +91,10 @@ https://webassembly.org/ [rect color 40 40 40 x 8 w 84 y 5 h 95] [rect color 0 0 0 x 0 w 100 y 5 h 10] [text_style header] -[y 12] High-Level Design of Onyx +[y 12] High Level Design + +[text_style normal] +[y 20] Started vaguely at C, because C did many things right. [text_style normal font_attr italic font_size 44] [y 30] Declare anywhere @@ -126,3 +134,55 @@ https://webassembly.org/ 5 main :: (args: [] cstr) { 6 println("Hello, World!"); 7 } + + +# --------------------------------------------- +# Compiler internals +# * Entity priority queue +# * Running engine + +[slide] +[rect color 40 40 40 x 8 w 84 y 5 h 95] +[rect color 0 0 0 x 0 w 100 y 5 h 10] +[text_style header] +[y 12] Compiler Internal Design + +# Normal symbol tables are not powerful enough so an out +# of order processing scheme such as a priority queue is +# needed + +[text_style normal font_attr italic] +[y 20] Compilation engine + +[text_style normal padding 15] +1. The parser generates a set of entities for a file. +2. These entities are added to a priority queue. +3. Entities are processed one-by-one until compilation completes or fails. + +[text_style normal font_attr italic] +[y 45] Entity + +[text_style normal padding 15] +▪ Abstract syntax tree node +▪ Metadata about the node (scope, package, etc.) +▪ State and type for ordering in the queue + + + +# --------------------------------------------- +# Projects done in Onyx + +[slide] +[rect color 40 40 40 x 8 w 84 y 5 h 95] +[rect color 0 0 0 x 0 w 100 y 5 h 10] +[text_style header] +[y 12] What has been made in Onyx + +[text_style normal] +[y 20] +▪ Advent of Code 2020 +▪ MNIST Digit Recognizer +▪ Efficient WebGL Renderer + +[text_style inherit font_attr italic] +▪ This presentation site diff --git a/src/show_parser.onyx b/src/show_parser.onyx index 310930e..d67f484 100644 --- a/src/show_parser.onyx +++ b/src/show_parser.onyx @@ -242,6 +242,14 @@ parse_image_style :: (use pc: ^ParseContext, image_style: ^Slide_Item_Image, par width := parse_numeric_value(pc); image_style.width = cast(f32) width / 100; } + elseif style_name == "border_width" { + width := parse_numeric_value(pc); + image_style.border_width = cast(f32) width / 100; + } + elseif style_name == "border_color" { + r, g, b := parse_color(pc); + image_style.border_color = Color.{ r, g, b }; + } else { printf("Unknown style option: '%s'\n", style_name); advance_line(reader); diff --git a/src/slides.onyx b/src/slides.onyx index ce54db5..7a013c1 100644 --- a/src/slides.onyx +++ b/src/slides.onyx @@ -77,6 +77,9 @@ Slide_Item_Image :: struct { // Currently the image maintains the original aspect ratio, // so the height of the image is automatically determined. + + border_color : Color; + border_width : f32; } Slide_Item_Rect :: struct { @@ -147,7 +150,9 @@ slideshow_insert_slide :: (use s: ^Slideshow, at := -1) -> ^Slide { slideshow_make_item :: (use s: ^Slideshow) -> ^Slide_Item { allocator := alloc.arena.make_allocator(^arena); - return new(Slide_Item, allocator = allocator); + ret := new(Slide_Item, allocator = allocator); + memory.set(ret, 0, sizeof Slide_Item); + return ret; } slideshow_load_image :: (use s: ^Slideshow, image_name: str, image_path: str) -> HTML_Image { @@ -243,6 +248,13 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) { y := image.y * height; w := image.width * width; h := w * (cast(f32) html_image.height / cast(f32) html_image.width); + + if image.border_width > 0 { + bw := image.border_width * width; + fill_rect(canvas, x - bw, y - bw, w + 2 * bw, h + 2 * bw, + image.border_color.r, image.border_color.g, + image.border_color.b, image.border_color.a); + } draw_image(canvas, html_image.handle, x, y, w, h); } diff --git a/todo b/todo new file mode 100644 index 0000000..a8ed93f --- /dev/null +++ b/todo @@ -0,0 +1,5 @@ +[X] Image borders +[ ] Fixed aspect ratio slides + +[ ] Slide animation: Slide from Right +[ ] Slide animatoin: Fade