Uare: A simple and customisable UI library

Showcase your libraries, tools and other projects that help your fellow love users.
User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

Uare: A simple and customisable UI library

Post by Ulydev » Fri Oct 23, 2015 2:12 pm

Uare

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

Image

Image

Image

Image

Image

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.
Last edited by Ulydev on Tue Nov 03, 2015 1:13 am, edited 3 times in total.

User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

Re: Uare : A simple and customisable UI library

Post by Ulydev » Mon Oct 26, 2015 12:29 pm

UPDATE:

Windows are now a thing! :awesome:

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? :crazy:

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.
Last edited by Ulydev on Tue Oct 27, 2015 12:26 pm, edited 1 time in total.

User avatar
zorg
Party member
Posts: 2995
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Uare : A simple and customisable UI library

Post by zorg » Mon Oct 26, 2015 1:18 pm

Ulydev wrote: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 :3
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

Re: Uare : A simple and customisable UI library

Post by Ulydev » Mon Oct 26, 2015 1:20 pm

zorg wrote:
Ulydev wrote: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 :3
You totally got it! :awesome:

User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

Re: Uare : A simple and customisable UI library

Post by Ulydev » Mon Oct 26, 2015 11:23 pm

UPDATE:

Uare now supports sliders! :3

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? :crazy:
(See the joystick example on github)
Last edited by Ulydev on Tue Oct 27, 2015 12:26 pm, edited 1 time in total.

User avatar
Tesselode
Party member
Posts: 555
Joined: Fri Jul 23, 2010 7:55 pm

Re: Uare : A simple and customisable UI library

Post by Tesselode » Tue Oct 27, 2015 12:23 am

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

User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

Re: Uare : A simple and customisable UI library

Post by Ulydev » Tue Oct 27, 2015 12:25 pm

UPDATE:

Contents and scrollable elements are here! Hurray! :rofl:

Image

You can now make scrollable windows and draw stuff into them.
Tesselode wrote:How would you draw something in the contents of a window?
That's exactly what this new update is for! :awesome:

User avatar
zorg
Party member
Posts: 2995
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Uare : A simple and customisable UI library

Post by zorg » Tue Oct 27, 2015 1:22 pm

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)
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

User avatar
Ulydev
Party member
Posts: 445
Joined: Mon Nov 10, 2014 10:46 pm
Location: Paris
Contact:

Re: Uare : A simple and customisable UI library

Post by Ulydev » Wed Oct 28, 2015 12:25 am

zorg wrote: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! :awesome:

Zireael
Party member
Posts: 139
Joined: Fri Sep 02, 2016 10:52 am

Re: Uare: A simple and customisable UI library

Post by Zireael » Sat Oct 15, 2016 5:35 pm

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

Post Reply

Who is online

Users browsing this forum: No registered users and 16 guests