From 142d74cebb960f575d76c3cb285a8a585b46fcb7 Mon Sep 17 00:00:00 2001 From: Joey Yakimowich-Payne Date: Thu, 7 May 2020 20:00:08 -0600 Subject: [PATCH] Add search box --- examples/common.nim | 31 ++++++++++++++++++++++++++++++- examples/demo_sdl2_gpu.nim | 11 +++++++---- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/examples/common.nim b/examples/common.nim index 143878b..0d5142f 100644 --- a/examples/common.nim +++ b/examples/common.nim @@ -8,6 +8,7 @@ type cornerRadiusBottomLeft*: float cornerRadiusBottomRight*: float +# To see icons in code, use a nerd font const ICON_TRASH* = "" const ICON_SEARCH* = "🔍" const ICON_CIRCLED_CROSS* = "✖" @@ -186,4 +187,32 @@ proc drawButton*(vg: Context, preicon: string, text: string, x, y, w, h: float, vg.setFillColor(rgba(0,0,0,160)) vg.text(text, x+w*0.5-tw*0.5+iw*0.25, y+h*0.5-1) vg.setFillColor(rgba(255,255,255,160)) - vg.text(text, x+w*0.5-tw*0.5+iw*0.25, y+h*0.5) \ No newline at end of file + vg.text(text, x+w*0.5-tw*0.5+iw*0.25, y+h*0.5) + +proc drawSearchBox*(vg: Context, text: string, x, y, w, h: float) = + let cornerRadius = h/2 - 1 + + let bg = vg.boxGradient(x, y+1.5, w, h, h/2, 5, rgba(0, 0, 0, 16), rgba(0, 0, 0, 92)) + vg.beginPath() + vg.pathRoundedRect(x,y, w,h, cornerRadius) + vg.setFillPaint(bg) + vg.pathFill() + + vg.setFontSize(h*1.3) + vg.setFont("icons") + vg.setFillColor(rgba(255,255,255,64)) + vg.textAlign("center middle") + vg.text(ICON_SEARCH, x+h*0.55f, y+h*0.55f) + + vg.setFontSize(20.0f) + vg.setFont("sans") + vg.setFillColor(rgba(255,255,255,32)) + + vg.textAlign("left middle") + vg.text(text, x+h*1.05f,y+h*0.5f) + + vg.setFontSize(h*1.3f) + vg.setFont("icons") + vg.setFillColor(rgba(255,255,255,32)) + vg.textAlign("center middle") + vg.text(ICON_CIRCLED_CROSS, x+w-h*0.55f, y+h*0.55f) \ No newline at end of file diff --git a/examples/demo_sdl2_gpu.nim b/examples/demo_sdl2_gpu.nim index e482aa5..b897fa7 100644 --- a/examples/demo_sdl2_gpu.nim +++ b/examples/demo_sdl2_gpu.nim @@ -90,10 +90,11 @@ proc main() = let vg = nanovg.newContext() discard sdl.glSetSwapInterval(0) - vg.loadFont(currentSourceDir()/"resources/umeboshi.ttf", "sans") - vg.loadFont(currentSourceDir()/"resources/Roboto-Bold.ttf", "sans-bold") - vg.loadFont(currentSourceDir()/"resources/fa.ttf", "fa") - vg.loadFont(currentSourceDir()/"resources/entypo.ttf", "icons") + vg.loadFont(currentSourceDir()/"resources"/"Roboto-Regular.ttf", "sans") + vg.loadFont(currentSourceDir()/"resources"/"umeboshi.ttf", "umeboshi") + vg.loadFont(currentSourceDir()/"resources"/"Roboto-Bold.ttf", "sans-bold") + vg.loadFont(currentSourceDir()/"resources"/"fa.ttf", "fa") + vg.loadFont(currentSourceDir()/"resources"/"entypo.ttf", "icons") var done = false var prevt: float = sdl.getTicks().float/1000.0 @@ -120,12 +121,14 @@ proc main() = gpu.flushBlitBuffer() withFrame(vg, window): + vg.setFont("umeboshi") vg.text("Some仮名thing is up", 100, 100, 100) vg.drawWindow("Title", 50, 50, 300, 400) vg.drawLabel("Hello!", 10, 10, 500, 20) vg.drawButton(ICON_TRASH, "Delete", 100, 200, 160, 28, rgba(128, 16, 8, 255)) vg.drawButton(ICON_TRASH, "Deleter", 100, 250, 160, 28, rgba(12, 130, 80, 255)) vg.drawButton("Testing", 100, 300, 160, 28) + vg.drawSearchBox("Search...", 60, 400, 280, 25) gpu.resetRendererState()