How to pack images into one .png file using TexturePacker2? - libgdx

Right now I pack images like this:
TexturePacker2.Settings settings = new TexturePacker2.Settings();
settings.flattenPaths = true;
settings.combineSubdirectories = true;
TexturePacker2.process(directory, "pack", atlasName);
But if there are many subdirectories in directory, then for each subdirectory TexturePacker2 creates a separate .png file with suffixes 1, 2, 3 and so on. How can I tell it to pack all images in all subdirectories into one .png file?

See this link for more information on the TexturePacker2. Putting every subdirectory in an own packfile is the default behaviour, because most of the time you don't want everything in one file, because it would get too big. This way you can organize your textures in groups. One very simple way to avoid this behaviour would be to put everything into one directory and then use the gdx-texturepacker.jar UI to pack it, telling it to use a max width/height of 4096 or maybe even more. The UI does not offer you combineSubdirectories and flattenPaths though.
Thus going the "code way" was the right choice. This offers you all possibilities of the TexturePacker2. It also lets you define the maximum size of one page by setting maxWidth and maxHeight in the TexturePacker2.Settings. If this is high enough, the packer will not need to create several pages.

Instead of:
TexturePacker2.process(directory, "pack", atlasName);
you should use:
TexturePacker2.process(settings, directory, "pack", atlasName);

Related

HTML Filepicker without sending file itself - only filepath [duplicate]

How can I create a directory chooser in html page.
If I use input file element I can select file only, but I need to select directory instead.
I need to do this beacause the user should select a right path inside his computer.
Any solutions ?
Try this, I think it will work for you:
<input type="file" webkitdirectory directory multiple/>
You can find the demo of this at https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3 ,
and if you need further information you can find it
here.
Can't be done in pure HTML/JavaScript for security reasons.
Selecting a file for upload is the best you can do, and even then you won't get its full original path in modern browsers.
You may be able to put something together using Java or Flash (e.g. using SWFUpload as a basis), but it's a lot of work and brings additional compatibility issues.
Another thought would be opening an iframe showing the user's C: drive (or whatever) but even if that's possible nowadays (could be blocked for security reasons, haven't tried in a long time) it will be impossible for your web site to communicate with the iframe (again for security reasons).
What do you need this for?
As of 2022 there is now a directory picker API:
https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker
async function getDir() {
const dirHandle = await window.showDirectoryPicker();
// run code for dirHandle
}
In case if you are the server and the user (e.g. you are creating an app which works via browser and you need to choose a folder) then try to call JFileChooser from the server when some button is clicked in the browser
JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);
This code snipped is from here
This is my solution. It is the same as the above answers but you should notice that webkitdirectory = "true".
<input id="design" type="file" webkitdirectory = "true" directory/>
I did a work around. I had a hidden textbox to hold the value. Then, on form_onsubmit,
I copied the path value, less the file name to the hidden folder. Then, set the fileInput box to "". That way, no file is uploaded.
I don't recall the event of the fileUpload control. Maybe onchange. It's been a while. If there's a value, I parse off the file name and put the folder back to the box. Of, course you'd validate that the file as a valid file.
This would give you the clients workstation folder.
However, if you want to reflect server paths, that requires a whole different coding approach.
This isn't provided by HTML because of the security risk. <input type='file' /> is closest, but not what you are looking for.
If you're still using IE11 on Windows 10, you may try this example that uses an ActiveX control to achieve what you want.
Again if the OS is Windows, you can use VB scripts to access the core control files to browse for a folder.
If you do not have too many folders then I suggest you use if statements to choose an upload folder depending on the user input details.
E.g.
String user= request.getParameter("username");
if (user=="Alfred"){
//Path A;
}
if (user=="other"){
//Path B;
}

Serving Polymer App to a /path not at root

So the first thing I want to do with a new Polymer app is deploy to a directory on an existing website. The only thing that seems to work is deploying to root /.
Let's take the Shop example. I do:
polymer init and choose shop
polymer build
Robocopy.exe .\build\bundled\ C:\inetpub\wwwroot\p\ /MIR
start http://localhost/p/
You see I'm on Windows. I assume that using IIS is irrelevant, since I'm relying on the server just to serve static content.
What do I need to edit in the shop template to make it work at the url http://localhost/p/?
The polymer-cli created apps came with assumption of serving from root level '/'. In generated project index.html you will find two comments
<!--
The `<base>` tag below is present to support two advanced deployment options:
1) Differential serving. 2) Serving from a non-root path.
Instead of manually editing the `<base>` tag yourself, you should generally either:
a) Add a `basePath` property to the build configuration in your `polymer.json`.
b) Use the `--base-path` command-line option for `polymer build`.
Note: If you intend to serve from a non-root path, see [polymer-root-path] below.
-->
<base href="/">
<!-- ... -->
<script>
/**
* [polymer-root-path]
*
* By default, we set `Polymer.rootPath` to the server root path (`/`).
* Leave this line unchanged if you intend to serve your app from the root
* path (e.g., with URLs like `my.domain/` and `my.domain/view1`).
*
* If you intend to serve your app from a non-root path (e.g., with URLs
* like `my.domain/my-app/` and `my.domain/my-app/view1`), edit this line
* to indicate the path from which you'll be serving, including leading
* and trailing slashes (e.g., `/my-app/`).
*/
window.Polymer = {rootPath: '/'};
// ...
</script>
if in this index.html file you comment out base tag and set window.Polymer rootPath to something like '/0/polymer-test/build/es5-bundled/' you will be able to navigate in app on http://localhost/0/polymer-test/build/es5-bundled/
The Polymer shop-app assumes it will be deployed on the server root. Therefore it has all of the links and routes hard-coded to that assumption.
This means, that you will have to change all of the following:
all absolute links between the pages,
all pattern parameters in app-route elements (this is not necessary when useHashAsPath = true),
all absolute imports, including the lazy ones via importHref,
update the absolute locations within the service worker (use instructions from here) and
all references to static content (CSS, images, JS files)
I'm guessing your main goal isn't porting the shop-app, but rather future proofing your own app so that it can also be deployed to non-root locations on the server.
For this, I will mention two ways, depending on which value of useHashAsPath you use for the app-location element. This setting defaults to false, which means that you must use full URLs, instead of the hashbang equivalents.
Scenario 1: useHashAsPath = true
This is the easiest of both approaches, since you simply treat all URLs between the pages as absolute links. For example: Tabs.
The next step is to reference all static content and imports via relative links.
The last step is to update your service worker as shown here.
Scenario 2: useHashAsPath = false
If you dislike the hashbang URLs, go for this scenario. As you can figure out, this approach is a bit more difficult, but still manageable (especially when you start from scratch).
Firstly, you should still use absolute links, since relative links between a complex routing scheme can quickly cause problems (e.g. when not all pages are on the same directory level).
But since absolute links are a no-go, you will have to add some additional pre-processing upon build time. The point is to prefix all links with, say __ROOT__, and then replace all of those values with your actual document root. The links would then look like something this:
Some page
And you would use gulp-replace or something similar to replace __ROOT_ with /your-document-root across all of your source files in order to produce something like this:
Some page
At this point, you've got your links fixed. But this is only part of the problem. You must also apply the same fix to all of your app-route elements. For example:
<app-route pattern="__ROOT__/some/page" [...]></app-route> // Other parameters ommited
As with other resources, such as images and CSS files, you can also include them as absolute links and add the __ROOT__ prefix, but I would advise against this and would rather use relative paths.
The last step is to update your service worker as shown here.
Read more about routing: https://www.polymer-project.org/1.0/blog/routing

Is there an 'easy' way to split an enormous HTML file into multiple pages

I was given an html log file that has ~306K lines. I know there are better formats for this but would like to be able to view the file online. I think breaking the file up into smaller bits and "paging" is probably the way to go of any way other than manually doing the following:
take header of initial page and copy to every new file
copy 5-10k lines of the initial file and paste into a new body
copy the footer of the initial file and copy to every new file
Then give basic naming conventions of 1.html, 2.html, 3.html and create sublinks on every page in the new footer. Is there an automated way to do this?
You can use something like this
text = document.getElementById('text').value; var pieces = new Array(); var total = Math.ceil(text.length/10000); for(i=0;i<total;i++){
pieces[i] = text.substr(([i]*10000),10000)); }
then send it to a file(the way you want, ajax, or some write-txt)
if your html file is properly formatted (i.e with line-breaks) you can take out the header and footer and split the content every let's say 1000 lines (or any amount that guarantees meaningful data). that sound's doable with a shell script.

Groovy Project (html parsing, file downloading, file creating)

I am considering starting a project so that I can learn more and keep the things I have learned thus far from getting rusty.
A lot of the project will be new things so I thought I would come here and ask for advice on what to do and how to go about doing it.
I enjoy photoshop and toying around with it, so I thought I would mix my project with something like that. So I decided my program will do something along the lines of grab new resources for photoshop put them in their own folder on my computer. (from deviantart for now)
For now I want to focus on a page like this:
http://browse.deviantart.com/resources/applications/psbrushes/?order=9
I'm not fluent with understanding exactly what is going on in the html source so it is a bit hard to see what is going on.
But lets say I am on that page and I have the following options chosen:
Sorted by Popular
Sorted by All Time
Sorted by 24 Items Per Page
My goal is to individually go to each thumbnail and grab the following:
The Author
The Title
The Description
Download the File (create folder based on title name)
Download the Image (place in folder with the file above)
Create text file with the author, title, and description in it
I would like to do that for each of the 24 items on the page and then go to the next page and do the same. (I am thinking of just going through the first five pages as I don't have too much interest in trying out brushes that aren't too popular)
So, I'm posting this for a sense of direction and perhaps some help on how to parse such a page to get what I'm looking for. I'm sure this project will keep me busy for awhile, but I'm hoping it will become useful in teaching me things.
Any help and suggestions are always appreciated.
.
.
EDIT
Each page is made up of 24 of these:
<div class="tt-a" usericon="http://a.deviantart.net/avatars/s/h/shad0w-gfx.gif" collect_rid="1:19982524">
<span class="shad0w" style="background-image: url ("http://sh.deviantart.net/shad0w/x/107/150/logo3.png");">
<a class="t" title="Shad0ws Blood Brush Set by ~Shad0w-GFX, Jun 28, 2005" href="http://Shad0w-GFX.deviantart.com/art/Shad0ws-Blood-Brush-Set-19982524?q=boost%3Apopular+in%3Aresources%2Fapplications%2Fpsbrushes&qo-0">Shad0ws Blood Brush Set</a>
My assumption is, I want to grab all my information from the:
<a class="t" ... >
Since it contains the title, author, and link to where the download url and large image is located.
If this sounds correct, how would one go about getting that info for each object on the page. (24 per page) I would assume by using CyberNeko. I'm just not exactly sure how to get to the proper level where is located and for each of them on the page
.
.
EDIT #2
I have some test code that looks like this:
divs = []
client = new WebClient(BrowserVersion.FIREFOX_3)
client.javaScriptEnabled = false
page = client.getPage("http://browse.deviantart.com/resources/applications/psbrushes/?order=9&offset=0")
divs = page.getByXPath("//html/body/div[2]/div/div/table/tbody/tr/td[2]/div/div[5]/div/div[2]/span/a[#class='t']")
divs.each { println it }
The XPath is correct, but it prints out:
<?xml version="1.0" encoding="UTF-8"?><a href="http://Shad0w-GFX.deviantart.com/
art/Shad0ws-Blood-Brush-Set-19982524?q=boost%3Apopular+in%3Aresources%2Fapplicat
ions%2Fpsbrushes&qo=0" class="t" title="Shad0ws Blood Brush Set by ~Shad0w-G
FX, Jun 28, 2005">Shad0ws Blood Brush Set
Can you explain what I need to do to just get the href out of there? Is there a simple way to do it with HtmlUnit?
Meeting the requirements you've listed above is actually pretty easy. You can probably do it with a simple Groovy script of about 50 lines. Here's how I would go about it:
The URL of the first page is
http://browse.deviantart.com/resources/applications/psbrushes/?order=9&offset=0
To get the next page, simply increase the value of the offset parameter by 24:
http://browse.deviantart.com/resources/applications/psbrushes/?order=9&offset=24
So now you know how to construct the URLs for the pages you need to work with. To download the content of this page use:
def pageUrl = 'http://browse.deviantart.com/resources/applications/psbrushes/?order=9&offset=0'
// get the content as a byte array
byte[] pageContent = new URL(pageUrl).bytes
// or get the content as a String
String pageContentAsString = new URL(pageUrl).text
Now all you need to do is parse out the elements of the content that you're interested in as save it in files. For the parsing, you should use a HTML parser like CyberNeko or Jericho.

Directory Chooser in HTML page

How can I create a directory chooser in html page.
If I use input file element I can select file only, but I need to select directory instead.
I need to do this beacause the user should select a right path inside his computer.
Any solutions ?
Try this, I think it will work for you:
<input type="file" webkitdirectory directory multiple/>
You can find the demo of this at https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3 ,
and if you need further information you can find it
here.
Can't be done in pure HTML/JavaScript for security reasons.
Selecting a file for upload is the best you can do, and even then you won't get its full original path in modern browsers.
You may be able to put something together using Java or Flash (e.g. using SWFUpload as a basis), but it's a lot of work and brings additional compatibility issues.
Another thought would be opening an iframe showing the user's C: drive (or whatever) but even if that's possible nowadays (could be blocked for security reasons, haven't tried in a long time) it will be impossible for your web site to communicate with the iframe (again for security reasons).
What do you need this for?
As of 2022 there is now a directory picker API:
https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker
async function getDir() {
const dirHandle = await window.showDirectoryPicker();
// run code for dirHandle
}
In case if you are the server and the user (e.g. you are creating an app which works via browser and you need to choose a folder) then try to call JFileChooser from the server when some button is clicked in the browser
JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);
This code snipped is from here
This is my solution. It is the same as the above answers but you should notice that webkitdirectory = "true".
<input id="design" type="file" webkitdirectory = "true" directory/>
I did a work around. I had a hidden textbox to hold the value. Then, on form_onsubmit,
I copied the path value, less the file name to the hidden folder. Then, set the fileInput box to "". That way, no file is uploaded.
I don't recall the event of the fileUpload control. Maybe onchange. It's been a while. If there's a value, I parse off the file name and put the folder back to the box. Of, course you'd validate that the file as a valid file.
This would give you the clients workstation folder.
However, if you want to reflect server paths, that requires a whole different coding approach.
This isn't provided by HTML because of the security risk. <input type='file' /> is closest, but not what you are looking for.
If you're still using IE11 on Windows 10, you may try this example that uses an ActiveX control to achieve what you want.
Again if the OS is Windows, you can use VB scripts to access the core control files to browse for a folder.
If you do not have too many folders then I suggest you use if statements to choose an upload folder depending on the user input details.
E.g.
String user= request.getParameter("username");
if (user=="Alfred"){
//Path A;
}
if (user=="other"){
//Path B;
}