Uare: A simple and customisable UI library

[Ulydev]

Uare

Uare is a UI library for LÖVE that focuses on easy customisation.











Setup

Code: Select all

local uare = require "uare"

function love.update(dt)
  uare.update(dt, love.mouse.getX(), love.mouse.getY())
end

function love.draw()
  uare.draw()
end

Usage

Code: Select all

myButton = uare.new({

  width = 400,
  height = 60,
  
  --color
  
  color = {200, 200, 200},
  
  hoverColor = {150, 150, 150},
  
  holdColor = {100, 100, 100}

})

For more information on how to get started with Uare, please visit the github page at https://github.com/Ulydev/Uare.

[Ulydev]

UPDATE:

Windows are now a thing!

I wanted to keep Uare as customisable and easy as possible, so I haven't included any uare.newWindow or uare.newButton methods.

Instead, you simply create elements using uare.new(). To make a window, you just make a draggable element and anchor a close button and a content element to it. That's what a window consists of, right?

This said, I implemented anchors and groups. Here's how you'd make a simple window with Uare:

Code: Select all

function createWindow(x, y)
  local group = uare.newGroup()

  local top = uare.new({ --draggable part of our window, to which everything is anchored
    x = x,
    y = y,
    width = 250,
    height = 30,
    
    drag = true,
    
    color = {160, 160, 160},
    
    text = {
      display = "my window",
      
      font = love.graphics.newFont(28),
      color = {255, 255, 255},

      offset = {
        x = 16,
        y = -16
      }
    }
  }):group(group)

  local close = uare.new({
    x = x+200,
    y = y,
    
    width = 50,
    height = 30,
    
    color = {200, 100, 100},
  
    onCleanRelease = function() group:setActive(false) group:setVisible(false, .5) end, --close our window
  
  }):anchor(top):group(group)

  local content = uare.new({
    x = x,
    y = y+30,
    
    width = 250,
    height = 300,
    
    color = {255, 255, 255},

  }):anchor(top):group(group)

  return {top = top, close = close, content = content, group = group}
end

And then you access your window elements using window.top, window.close, window.content. It's that simple.

[zorg]

That's what a window consists of, right?

Exactly why i like your approach; what if i like my windows sans titlebar? nothing!, since i'm able to create one like that

[Ulydev]

That's what a window consists of, right?

Exactly why i like your approach; what if i like my windows sans titlebar? nothing!, since i'm able to create one like that

You totally got it!

[Ulydev]

UPDATE:

Uare now supports sliders!

A slider is basically a button you can drag on one axis, in a limited area - isn't it?
This said, simply make a new element, make it draggable, restrict its movement on one axis, and set bounds to it.

You can then use element:getHorizontalRange() and/or element:getVerticalRange() to return the normalised range of the element.

I also added some new attributes, including center. This allows for easier positioning.

Code: Select all

uare.new({
  x = 200,
  y = 200,
  center = true,
  
  drag = {
    enabled = true,
    
    fixed = {
      x = false,
      y = true --movement is restricted on the vertical axis
    },
    
    bounds = { --we just set horizontal bounds
      {
        x = 100
      },
      {
        x = 300
      }
    }
  }
})

With these new features, you can even make joysticks! Isn't that crazy?
(See the joystick example on github)

[Tesselode]

How would you draw something in the contents of a window?

[Ulydev]

UPDATE:

Contents and scrollable elements are here! Hurray!



You can now make scrollable windows and draw stuff into them.

How would you draw something in the contents of a window?

That's exactly what this new update is for!

[zorg]

Didn't really have time to test this yet, but i hope to use it soon, with all its glorious genericity, in a small program i'll try to create soon!
(a small music editor/player, without external libs)

[Ulydev]

Didn't really have time to test this yet, but i hope to use it soon, with all its glorious genericity, in a small program i'll try to create soon!
(a small music editor/player, without external libs)

Looking forward to seeing it!

[Zireael]

Does this work with newest LOVE?
Can I have a window over a window? Or see-through windows?