LövelyToasts: Toast messages!

[Lucyy]

Hi! I made a small library to display customisable toast messages and I'm pretty happy how it turned out so I thought I'd share it here



It has features such as:

• Customisable toasts (color, text color, font, padding, screen location)
• Tap toasts to dismiss them! (works with mouse as well as touch screens!)
• Queue multiple toast messages!

To use it you simply require the file and add it to love's update and draw functions

Code: Select all

lovelyToasts = require("lib.lovelyToasts")

function love.update(dt)
  lovelyToasts.update(dt)
end

function love.draw()
  lovelyToasts.draw()
end

After that you can display toasts wherever you want by calling

Code: Select all

lovelyToasts.show("This is a Lövely toast :)")

After that you can customise the toast's appearance by changing the values in lovelyToasts.style, or changing the toast's behaviour by changing lovelyToasts.options. Full documentation on this can be found on the GitHub page

GitHub page: http://github.com/Loucee/Lovely-Toasts

[togFox]

This is extremely timely as I've been delaying building something like this myself.

If you don't tap to dismiss then what is the other option? Timed?

[Lucyy]

This is extremely timely as I've been delaying building something like this myself.

If you don't tap to dismiss then what is the other option? Timed?

Hi! The other option is either a default 3 second delay or passing your own duration to the lovelyToasts.show function:

Code: Select all

lovelyToasts.show("This is a Lövely toast :)", 5) -- Show toast for 5 seconds

[togFox]

Integrated and worked well enough. Unfortunately the X value (drawing from the left) is not quite right. It's always on the first third of the screen. I see you are doing a screenwidth/2 - textwidth/2, and this makes sense but it is not centred on my screen. I d/l a font (non-standard) so maybe something odd with that?

I guess this is the right time to ask for an X override as well as a Y override. I'd like the toast to appear above the avatar's head.

[Lucyy]

Integrated and worked well enough. Unfortunately the X value (drawing from the left) is not quite right. It's always on the first third of the screen. I see you are doing a screenwidth/2 - textwidth/2, and this makes sense but it is not centred on my screen. I d/l a font (non-standard) so maybe something odd with that?

I guess this is the right time to ask for an X override as well as a Y override. I'd like the toast to appear above the avatar's head.

Hi! There is already a Y override the third argument in lovelyToasts.new is for the location, you can use the pre-defined positions "top", "middle", and "bottom", or you can provide your own Y value here.

As for the X value not being centered properly, would you mind showing me the code you use?

[togFox]

garrGameMessageLog is my array that stores all the messages (toast) I want to display. If a message is queued then I send it to lovelyToasts (which has it's own queue) then removes it from the message queue.

Code: Select all

if #garrGameMessageLog > 0 then
	lovelyToasts.show(garrGameMessageLog[1].text,3)
	RemoveGameMessage(1)
end

Perhaps it thinks my screensize is smaller than it is. I shall check ...

Edit: Yup - it thinks screensize is 800 and not 1920 hence 'centering' it off to the left. I'll see what I can do.

Edit: Fixed.

[Lucyy]

garrGameMessageLog is my array that stores all the messages (toast) I want to display. If a message is queued then I send it to lovelyToasts (which has it's own queue) then removes it from the message queue.

Code: Select all

if #garrGameMessageLog > 0 then
	lovelyToasts.show(garrGameMessageLog[1].text,3)
	RemoveGameMessage(1)
end

Perhaps it thinks my screensize is smaller than it is. I shall check ...

Edit: Yup - it thinks screensize is 800 and not 1920 hence 'centering' it off to the left. I'll see what I can do.

Edit: Fixed.

Hi! I'm glad you resolved the issue, but now I'm curious too xD what ended up being the issue/fix?

[togFox]

The REQUIRE is at the top of the file (of course) so the width is 800 by default. Later on, in LOVE.LOAD() I do a setmode to 1920 but it's too late. LovelyToasts has already captured 800 and continues to use 800.

My hack (for now) is to move those two declarations above lovelyToasts, which is a bit ugly, because all my other declarations are grouped elsewhere:

Code: Select all

-- ** needs to be placed above the lovelyToasts require
local gintScreenWidth = 1920
local gintScreenHeight = 1080

_ = love.window.setMode(gintScreenWidth, gintScreenHeight,{fullscreen=true,display=1,resizable=false})	-- display = monitor number (1 or 2)

lovelyToasts = require("lovelyToasts")

I guess LT should recheck screen width (and height) on each update but that seems very inefficient. Maybe a lovelyToasts.Initialise() on love.load to do that?

[Lucyy]

The REQUIRE is at the top of the file (of course) so the width is 800 by default. Later on, in LOVE.LOAD() I do a setmode to 1920 but it's too late. LovelyToasts has already captured 800 and continues to use 800.

My hack (for now) is to move those two declarations above lovelyToasts, which is a bit ugly, because all my other declarations are grouped elsewhere:

Code: Select all

-- ** needs to be placed above the lovelyToasts require
local gintScreenWidth = 1920
local gintScreenHeight = 1080

_ = love.window.setMode(gintScreenWidth, gintScreenHeight,{fullscreen=true,display=1,resizable=false})	-- display = monitor number (1 or 2)

lovelyToasts = require("lovelyToasts")

I guess LT should recheck screen width (and height) on each update but that seems very inefficient. Maybe a lovelyToasts.Initialise() on love.load to do that?

Hi! Thanks for reporting this, I fixed the issue in the library and uploaded it to GitHub as well as updated the script attached to the post

[togFox]

That fixed it. Thanks. I've incorporated it into my project.

Some time in the distant future I'll include an optional X value so I can do speech bubbles.