Experimental HiDPI Support

examples/demo/demo.nim

@@ -18,7 +18,7 @@ var
 
 proc basicText() =
   frame "autoLayoutText":
-    box 130, 0, root.box.w - 130, 491
+    box 130, 0, root.getScaled(box).w - 130, 491
     fill "#ffffff"
     layout lmVertical
     counterAxisSizingMode csFixed
@@ -122,7 +122,7 @@ proc basicControls() =
     strokeWeight 1
     rectangle "fill":
       progress = selectedButton.len / 5 * 100
-      box 2, 2, int((parent.box.w - 4) * (progress/100)), 8
+      box 2, 2, clamp(int((parent.getScaled(box).w - 4) * (progress/100)), 1, parent.getScaled(box).w.int), 8
       fill "#9fe7f8"
       cornerRadius 5
 
@@ -173,8 +173,8 @@ proc basicControls() =
     onClick:
       pipDrag = true
     if pipDrag:
-      pipPos = int(mouse.pos.x - current.screenBox.x)
-      pipPos = clamp(pipPos, 0, 240)
+      pipPos = int(mouse.getScaled(pos).x - current.getScaled(screenBox).x)
+      pipPos = clamp(pipPos, 1, 240)
       pipDrag = buttonDown[MOUSE_LEFT]
     rectangle "pip":
       box pipPos, 0, 10, 10
@@ -303,7 +303,7 @@ proc basicConstraints() =
     # Got to specify orgBox for constraints to work.
     orgBox 0, 0, 400, 400
     # Then grow the normal box.
-    box 130, 0, root.box.w - 130, root.box.h
+    box 130, 0, root.getScaled(box).w - 130, root.getScaled(box).h
     # Constraints will work on the difference between orgBox and box.
     fill "#ffffff"
     rectangle "Center":
@@ -340,12 +340,12 @@ proc drawMain() =
 
   component "iceUI":
     orgBox 0, 0, 530, 185
-    box root.box
+    box root.getScaled(box)
     fill "#ffffff"
 
     group "shadow":
       orgBox 0, 0, 530, 3
-      box 0, 0, root.box.w, 3
+      box 0, 0, root.getScaled(box).w, 3
       rectangle "l1":
         box 0, 0, 530, 1
         constraints cStretch, cMin
@@ -401,4 +401,4 @@ proc drawMain() =
       of "Constraints":
         basicConstraints()
 
-startFidget(drawMain, w = 530, h = 300)
+startFidget(drawMain, w = 3*530, h = 3*300, uiScale=3.0)

examples/padoftext/padoftext.nim

@@ -22,15 +22,15 @@ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
 proc drawMain() =
 
   group "pad":
-    box 100, 100, parent.box.w - 200, parent.box.h - 200
+    box 100, 100, parent.getScaled(box).w - 200, parent.getScaled(box).h - 200
     font "IBM Plex Sans Regular", 20.0, 400.0, 25, hLeft, vTop
     fill "#F7F7F9"
     clipContent true
 
     text "input":
-      box 0, 0, parent.box.w, parent.box.h
+      box 0, 0, parent.getScaled(box).w, parent.getScaled(box).h
       fill "#000000"
       multiline true
       binding textValue
 
-startFidget(drawMain)
+startFidget(drawMain, uiScale=2)

src/fidget.nim

@@ -222,9 +222,9 @@ proc font*(
 ) =
   ## Sets the font.
   current.textStyle.fontFamily = fontFamily
-  current.textStyle.fontSize = fontSize
-  current.textStyle.fontWeight = fontWeight
-  current.textStyle.lineHeight = lineHeight
+  current.textStyle.fontSize = common.uiScale*fontSize
+  current.textStyle.fontWeight = common.uiScale*fontWeight
+  current.textStyle.lineHeight = if lineHeight != 0.0: common.uiScale*lineHeight else: common.uiScale*fontSize
   current.textStyle.textAlignHorizontal = textAlignHorizontal
   current.textStyle.textAlignVertical = textAlignVertical
 
@@ -234,15 +234,15 @@ proc fontFamily*(fontFamily: string) =
 
 proc fontSize*(fontSize: float32) =
   ## Sets the font size in pixels.
-  current.textStyle.fontSize = fontSize
+  current.textStyle.fontSize = fontSize*3.0
 
 proc fontWeight*(fontWeight: float32) =
   ## Sets the font weight.
-  current.textStyle.fontWeight = fontWeight
+  current.textStyle.fontWeight = 3*fontWeight
 
 proc lineHeight*(lineHeight: float32) =
   ## Sets the font size.
-  current.textStyle.lineHeight = lineHeight
+  current.textStyle.lineHeight = 3*lineHeight
 
 proc textAlign*(textAlignHorizontal: HAlign, textAlignVertical: VAlign) =
   ## Sets the horizontal and vertical alignment.
@@ -268,17 +268,17 @@ proc image*(imageName: string) =
 
 proc orgBox*(x, y, w, h: int|float32|float32) =
   ## Sets the box dimensions of the original element for constraints.
-  current.orgBox.x = float32 x
-  current.orgBox.y = float32 y
-  current.orgBox.w = float32 w
-  current.orgBox.h = float32 h
+  current.orgBox.x = common.uiScale * float32 x
+  current.orgBox.y = common.uiScale * float32 y
+  current.orgBox.w = common.uiScale * float32 w
+  current.orgBox.h = common.uiScale * float32 h
 
 proc box*(x, y, w, h: float32) =
   ## Sets the box dimensions.
-  current.box.x = x
-  current.box.y = y
-  current.box.w = w
-  current.box.h = h
+  current.box.x = common.uiScale*x
+  current.box.y = common.uiScale*y
+  current.box.w = common.uiScale*w
+  current.box.h = common.uiScale*h
 
 proc box*(
   x: int|float32|float64,
@@ -341,7 +341,7 @@ proc zLevel*(zLevel: int) =
 
 proc cornerRadius*(a, b, c, d: float32) =
   ## Sets all radius of all 4 corners.
-  current.cornerRadius = (a, b, c, d)
+  current.cornerRadius = (3*a, 3*b, 3*c, 3*d)
 
 proc cornerRadius*(radius: float32) =
   ## Sets all radius of all 4 corners.

src/fidget/common.nim

@@ -229,6 +229,9 @@ var
   ## Used for HttpCalls
   httpCalls*: Table[string, HttpCall]
 
+  # UI Scale
+  uiScale*: float32 = 1.0
+
 proc newUId*(): string =
   # Returns next numerical unique id.
   inc lastUId
@@ -491,3 +494,8 @@ proc computeScreenBox*(parent, node: Node) =
     node.screenBox = node.box + parent.screenBox
   for n in node.nodes:
     computeScreenBox(node, n)
+
+template getScaled*(node, box: untyped): untyped =
+  node.`box`/uiScale
+
+

src/fidget/opengl/base.nim

@@ -271,8 +271,9 @@ proc onSetKey(
 
 proc onScroll(window: staticglfw.Window, xoffset, yoffset: float64) {.cdecl.} =
   requestedFrame = true
+  let yoffset = yoffset * common.uiScale
   if keyboard.focusNode != nil:
-    textBox.scrollBy(-yoffset * 50)
+    textBox.scrollBy(-yoffset * 1)
   else:
     mouse.wheelDelta += yoffset
 

src/fidget/openglbackend.nim

@@ -58,6 +58,8 @@ proc focus*(keyboard: Keyboard, node: Node) =
     var font = fonts[node.textStyle.fontFamily]
     font.size = node.textStyle.fontSize
     font.lineHeight = node.textStyle.lineHeight
+    # if font.lineHeight == 0:
+      # font.lineHeight = font.size
     keyboard.input = node.text
     textBox = newTextBox(
       font,
@@ -92,7 +94,9 @@ proc drawText(node: Node) =
 
   let mousePos = mouse.pos - node.screenBox.xy
 
-  if node.selectable and mouse.down and mouse.pos.overlaps(node.screenBox):
+  if node.selectable and mouse.wheelDelta != 0:
+    keyboard.focus(node)
+  elif node.selectable and mouse.down and mouse.pos.overlaps(node.screenBox):
     # mouse actions click, drag, double clicking
     keyboard.focus(node)
     if mouse.click:
@@ -388,10 +392,12 @@ proc startFidget*(
   msaa = msaaDisabled,
   mainLoopMode: MainLoopMode = RepaintOnEvent,
   pixelate = false,
-  pixelScale = 1.0
+  pixelScale = 1.0,
+  uiScale = 1.0
 ) =
   ## Starts Fidget UI library
   common.fullscreen = fullscreen
+  common.uiScale = uiScale
   if not fullscreen:
     windowSize = vec2(w.float32, h.float32)
   drawMain = draw