[HELP] Making a Save button

[nice]

Hello boys and girls!
I need some help with making a save button for my MS paint clone project, because I don't know where to start with this thing:

1. I have a image (SaveIcon.png) that I'll need to be clickable.
2. The save function needs to "screenshot"/save where you have drawn your image on your "canvas" (800x480).
3. I want the save icon to be placed to the right of the UI because on the left I have a box that sows colours that you're using.
4. I also want to be able to name the file before saving the image.

I really need some help with this because I don't really know if I can do it myself..

Code: Select all

function love.load()

squares = {}
Lines = {}
currentLine = {0, 0, 0, 0}
lineSize = 16
mouseIsDown = false

-- Colors
   daColors = 
   --[[White]]--
   {{255, 255, 255},

   --[[Blue]]--
   {50, 130, 185}, 

   --[[Brown]]--
   {143, 114, 30}, 

   --[[Green]]--
   {50, 158, 30}, 

   --[[Orange]]--
   {199, 129, 68},

   --[[Pink]]--
   {226, 131, 239},

   --[[Purple]]--
   {143, 83, 185}, 

   --[[Red]]--
   {171, 91, 75}, 

   --[[Turquoise]]--
   {50, 137, 151}, 

   --[[Black]]--
   {0, 0, 0}}
   curColor = 1 

-- User Interface
   ui = love.graphics.newImage("heliumUI.png")

-- White Background
   love.graphics.setBackgroundColor(255, 255, 255)

end

function love.update( dt )
-- The Brush
local x, y = love.mouse.getPosition()

   if love.mouse.isDown( "l" ) and not love.keyboard.isDown("lshift") then
      local newPosition = {}
      newPosition.x = x - 8
      newPosition.y = y - 8
      newPosition.color = daColors[curColor]    
      table.insert( squares, newPosition )
   end
   
   if mouseIsDown then
      currentLine.x2 = x
      currentLine.y2 = y
   end
   
end


-- Draws All The Graphics --
function love.draw()
   local x, y = love.mouse.getPosition()
   
   love.graphics.setLineWidth(1) 
   for key, square in ipairs( squares ) do
      love.graphics.setColor(square.color)
      love.graphics.rectangle( "fill", square.x, square.y, 16, 16 ) 
   end

   -- Draws Current Colour
   love.graphics.setColor(daColors[curColor])
   love.graphics.rectangle("fill", 47, 515, 100, 50)
   
   -- Draws A 16x16 Square That Follows The Mouse 
   love.graphics.rectangle("line", x - 8, y - 8, 16, 16)
   
      love.graphics.setLineWidth(lineSize)
    for i = 1, #Lines do
         love.graphics.setColor(Lines[i].color)
         love.graphics.line(Lines[i].x1, Lines[i].y1, Lines[i].x2, Lines[i].y2)
    end

    love.graphics.setColor(daColors[curColor])
    love.graphics.line(currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2)

   -- User Interface
   love.graphics.setColor(255, 255, 255)
   love.graphics.draw(ui, 0, 480)
 
end

function love.mousepressed(x, y, button)
   
   -- Drop Tool -- I'll leave this here in case you ever need it.
--   if button == "l" and love.keyboard.isDown("lshift") then
--      local screenshot = love.graphics.newScreenshot()
--      local r, g, b = screenshot: getPixel(x - 1, y - 1)
--      daColors[curColor] = {r, g, b}
--   end

   if button == "r" then
      mouseIsDown = true
      currentLine = {x1 = x, y1 = y, x2 = x, y2 = y}
   end

end

function love.mousereleased(x, y, button)
   if button == "r" and mouseIsDown then
      mouseIsDown = false
      currentLine.color = daColors[curColor]
      table.insert(Lines, currentLine)
      currentLine = {0, 0, 0, 0}
   end
end

function love.keypressed(key)
-- Select Your Color By Pressing The Number Keys (1 to 0)
   if key == "1" then
      curColor = 1 -- White
   elseif key == "2" then
      curColor = 2 -- Blue
   elseif key == "3" then
      curColor = 3 -- Brown
   elseif key == "4" then
      curColor = 4 -- Green
   elseif key == "5" then
      curColor = 5 -- Orange
   elseif key == "6" then
      curColor = 6 -- Pink
   elseif key == "7" then
      curColor = 7 -- Purple
   elseif key == "8" then
      curColor = 8 -- Red
   elseif key == "9" then
      curColor = 9 -- Turquoise
   elseif key == "0" then
      curColor = 10 -- Black
   elseif key == "f" then
      squares = {}
      Lines = {}
      love.graphics.setBackgroundColor(daColors[curColor])
   end   
end

[Zilarrezko]

Alright, I couldn't sleep tonight, so I worked on it. I'm glad that I am the first to post, because I didn't want my work to go to waste.

I had to make references back to some of my code. But I tried to make it as abstract and simple as possible (Without using a whole lot of functions which would cause someone trying to learn from it to jump from file to file or something like that.).

Here it is,

_working.love

(5.35 KiB) Downloaded 233 times

If you have any specific questions, just ask.

However, some things I'll point out...

The saved .png file is in the [insertusernamehere]/AppData/roaming/love/helium folder. At least that's where mine saves on windows 8. If you have another operating system, Check at the top of this wiki page. I checked multiple times, and it's saving for me.

It's probably misleading, but I named everything that deals with saving in the table saveIcon. saveIcon was originally the image userdata, but I decided to make it a table, and saveIcon.image is the actual saveIcon's image data.

I have no idea how to save to the directory from which the code is running from. Maybe someone will come by and educate both of us, otherwise we have to deal with the outrageous circumstances.

[nice]

Alright, I couldn't sleep tonight, so I worked on it. I'm glad that I am the first to post, because I didn't want my work to go to waste.

I had to make references back to some of my code. But I tried to make it as abstract and simple as possible (Without using a whole lot of functions which would cause someone trying to learn from it to jump from file to file or something like that.).

Here it is,

_working.love

If you have any specific questions, just ask.

However, some things I'll point out...

The saved .png file is in the [insertusernamehere]/AppData/roaming/love/helium folder. At least that's where mine saves on windows 8. If you have another operating system, Check at the top of this wiki page. I checked multiple times, and it's saving for me.

It's probably misleading, but I named everything that deals with saving in the table saveIcon. saveIcon was originally the image userdata, but I decided to make it a table, and saveIcon.image is the actual saveIcon's image data.

I have no idea how to save to the directory from which the code is running from. Maybe someone will come by and educate both of us, otherwise we have to deal with the outrageous circumstances.

The computer that I'm using is a Mac so we will see what the difference will become.
I will take a look at it myself later today to see if it works and see if changes are required and I will also see if the saved image can appear on your desktop or in a folder of your choice.
Thanks for the help!

[EDIT]
If there's a lua overlord that have experience with this it would be greatly appreciated!

[slime]

I will also see if the saved image can appear on your desktop or in a folder of your choice.

It can't, but you can make a hotkey or button to open a Finder/Explorer window to the folder containing the image.

Something like this:

Code: Select all

function OpenFolder()
    love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end

[Positive07]

Not a lua overlord unfortunately, but you can use the io lua library, it allows you to read and WRITE files to wherever you want, not just the save directory... so you could:

• save your image as a png in the save directory
• read it with love.filesystem
• open a file with io for write (in binary format so you should use "wb")
• write all the things you read from love.filesystem into the io file (it's like copying a file)

Some notes, io lets you save everywhere so the user should specify a path on his own, or you should use a known path, you must never use a path that you are not sure that exists in all the OS's so you should try to stick with the save directory, the working directory, the user directory or the appdata directory... since you can use the filesystem API to get their paths

[wiki]love.filesystem.getAppdataDirectory[/wiki]()
[wiki]love.filesystem.getWorkingDirectory[/wiki]()
[wiki]love.filesystem.getUserDirectory[/wiki]()
...

I did something similar for my latest project but backwards, I copy a file from anywhere on the PC to the save directory

Or as stated above use [wiki]love.system.openURL[/wiki]() to open the save folder (I recommend you to use this)

[nice]

It can't, but you can make a hotkey or button to open a Finder/Explorer window to the folder containing the image.

Something like this:

Code: Select all

function OpenFolder()
    love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end

So you mean like a keypressed function?
From what I understand it will it open up the image on your browser? and after that you can save from there?

Some notes, io lets you save everywhere so the user should specify a path on his own, or you should use a known path, you must never use a path that you are not sure that exists in all the OS's so you should try to stick with the save directory, the working directory, the user directory or the appdata directory... since you can use the filesystem API to get their paths

[wiki]love.filesystem.getAppdataDirectory[/wiki]()
[wiki]love.filesystem.getWorkingDirectory[/wiki]()
[wiki]love.filesystem.getUserDirectory[/wiki]()
...

So if I were saving in the directories and this might sound a bit stupid but where do I find these directories?

[Positive07]

Code: Select all

function OpenFolder()
    love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end

This opens the folder, where LÖVE saves your files, with the Explorer... it doesnt open the file... but you could

Code: Select all

function OpenFolder()
    love.system.openURL("file://"..love.filesystem.getSaveDirectory()..filename)
end

The Save directory and the Appdata directory should be the same, they are where your game saves everything
The working directory is where love.exe is found, the user directory is for example "C:\Users\nice" (but it depends on the OS)

They vary depending on where love.exe is, the OS, the username and the filesystem identity so they are not always the same

[nice]

Code: Select all

function OpenFolder()
    love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end

This opens the folder, where LÖVE saves your files, with the Explorer... it doesnt open the file... but you could

Code: Select all

function OpenFolder()
    love.system.openURL("file://"..love.filesystem.getSaveDirectory()..filename)
end

The Save directory and the Appdata directory should be the same, they are where your game saves everything
The working directory is where love.exe is found, the user directory is for example "C:\Users\nice" (but it depends on the OS)

They vary depending on where love.exe is, the OS, the username and the filesystem identity so they are not always the same

I'm currently using a mac but I do want everyone to use this and save but how should I make it so the "saving" of the image is as smooth (and pain free) as possible?

[Positive07]

Save to the save directory... that is your best choice.

Then place other button that says something like "Open containing folder..." and when ever it is pressed trigger the command slime posted before

Mari0 did this, if you were looking at the maps and pressed "m" it would open the map folder (which was in the save directory) with the Explorer (not to be confused with Internet Explorer)

[nice]

Save to the save directory... that is your best choice.

Then place other button that says something like "Open containing folder..." and when ever it is pressed trigger the command slime posted before

Mari0 did this, if you were looking at the maps and pressed "m" it would open the map folder (which was in the save directory) with the Explorer (not to be confused with Internet Explorer)

I´ll have to think about this, I had hoped on one function but if it is as you say then perhaps this will be the best way to do it.