I'm currently working on this game and I'm having trouble with image loading. Or should I say "dis-loading?"
I had this image file 'circle' and I used this image file to create sprite 'ball'. I deleted this file 'circle' and put new file and renamed it to 'circle'. Basically, I replaced it.
BUT, when I save my work and refresh my game, it still uses old file, although it's not in my asset folder anymore! When I change the file name to something else like 'circle1' then it suddenly works again(meaning new image is loaded). And then when I switch back to 'circle', it goes back to old image.
game.load.image('circle', 'assets/circle.gif');
P.S. I tried restarting my computer and my MAMP server.
This happens because the browser caches the assets. Basically put, the browser looks in the cache first, sees that a file with this name and this URL is already there and decides that it needs not to turn to the server and thus it shows you the old file. Clear the browser's cache and you should see the new file.
A workaround from Phaser's point of view would be to add simple versioning to the files, so instead of
game.load.image('circle', 'assets/circle.gif');,
you do the following:
var version = 1;
game.load.image('circle', 'assets/circle.gif' + '?' + version);
and change version's value every time you change an asset.
Took a while to figure out. (Still not sure)
I think if I create a new sprite with the image, it let the new image file to replace all the old ones. I don't know why. Please explain me if you know why or exact way of fixing this.
Related
Let's say I have a folder of about 100 images on my website called "IMG"
Now let's say I have a div element: <div id="templateDiv"></div>
Using javascript, how would I add all images from "IMG/" into that div without adding <img src="IMG/IMGNAME.jpg"> for every image?
Sorry, I'm not very good at explaining.
Just ignore the fact that would take ages to load.
EDIT
Ok my bad explanation skills have made me change my question.
How do I automatically make array of all files in website directory?
Okay, your question is incredibly unclear, but from reading all your other comments and things, it seems you simply want to get an array that contains the filename of every file in a directory? If that's what you want, then it won't be possible (I don't believe) since only the server knows which files are where, and you can't request the contents of a directory from a server using JavaScript.
However if you were using Node.js on a local directory, then it could be done. But I don't believe that's your case.
That being said, you have three alternative options:
Name every image file 1.png, 2.png, 3.png, etc. Then use a for loop and get each one using (i + 1) + ".png"
If you can't rename the files, but the files are named via user input, you could collect the user's input at the time of file creation and add the name of the newly created file into another file/an array/localStorage so that it could be retrieved later.
If you can't rename the files, but the filenames are also never known to the program that needs them, then you could create an array of all the filenames (manually) and iterate over that to find all the files that you want.
Please, somebody let me know if I'm wrong and if there actually is a way to make a request to a server that tells the client all the files in a directory. That seems incredibly unlikely though.
Another potential solution just came to mind. You could write a PHP script (or Node.js or any server-side language, really) that scans a directory, creates a list of all the filenames there, and then sends that back over HTTP. Then you could simply make an XMLHttpRequest to that PHP file and have it do the work. How does that sound?
I have a working Gulp script that I use to create my SVG sprites along with a preview page. But now I want to enrich the preview page, more precisely each icon in it, with information that I have in a separate json file. But I don't have any idea how to do this.
It should look something like this:
function taskFactory(name, spriteMode) {
return gulp.src(srcSvgDir + '*.svg')
.pipe(svgSprite(config))
.pipe(jeditor((json) => {
// read json file for this sprite
// iterate entries in json
// Find the location in preview page (by selector or placeholder string) and paste the information from the json entry.
}))
.pipe(gulp.dest(destDir));
}
But I have no idea if I even have access to this preview page that is being created. If anyone has a completely different idea, I'm open to anything.
In a case of emergency, I could write a C# console app that, after creating the sprite and preview page, parses and edits the latter file. I don't think that's so nice though, since I want to create it purely with Gulp.
For website used js file resources, even I modify the js files it still cached on the some user's pc, then it will make problem cause the new code depends on modification on the new js file rather the old js file.
How to check this!? while when I used my pc it give me no problem such like other users
You have to append a dynamic value to your JS-source like this:
<script src="/path/to/your.js?v=2"></script>
Notice the ?v=2, if you increase this value every time you change your JS-file, the users will always have the updated version.
This new version will stay cached until you change the parameter again.
I'm making a Windows store app (in Javascript) that generates a PDF. I convert this to base64 and then save that to file (if I want). This works fine.
(the PDF is a one page document (~30kb) with text, vector graphics and a small image)
Now I would like to be able to print this pdf directly from the app without having to open it in a separate application. Of course I've been doing a lot of searching, but the information I've come accross never seems to work. It either is in the wrong language, doesn't do what I'm looking for or just doesn't work. Also the Microsoft documentation is pretty vague and lacks decent examples.
Anyway, from what I've understood you can actually render a pdf page to bitmap and then send that to the printer. I decided to give it a try, so what I'm trying to do first is to save the pdf as an image to file.
Now I've managed to create a pdfPage object, now I'm supposed to do this:
pdfPage.renderToStreamAsync(outputStream).done( /* Your success and error handlers */ );
The outputStream is supposed to be a IRandomAccessStream object, but I can't seem to instance one. It doesn't show in the Streams list and when I type it in manually it doesn't work... Using InMemoryRandomAccessStream instead seems to work though.
var outputStream = new Windows.Storage.Streams.IRandomAccessStream(); //this don't work?
Even if outputStream is good, how do I save it to file? I've saved IBuffer's to file before, can I convert it to an IBuffer somehow? I can't find any information on that.
Also I believe it should be possible to show the outputStream as an image in the app. I can only find C# examples of this. How does this work in JS/HTML?
Okay I figured out how to save it:
Windows.Storage.ApplicationData.current.temporaryFolder.getFileAsync("mydocument.pdf").then(function (file) {
var pdfDocument = Windows.Data.Pdf.PdfDocument;
pdfDocument.loadFromFileAsync(file).then(function (pdf) {
page1 = pdf.getPage(0);
var accessStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
page1.renderToStreamAsync(accessStream).done(function () {
Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("page1image.png", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (file) {
file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (filestream) {
Windows.Storage.Streams.RandomAccessStream.copyAndCloseAsync(accessStream.getInputStreamAt(0), filestream.getOutputStreamAt(0)).then(function () { console.log('done') });
});
});
});
});
});
Why do these seeminlgy straightforward things have to be so complicated?
The whole rasterization doesn't work too well. I mean to get a decent resolution (600dpi) the file takes some time to generate. I noticed that even the printer needs a couple of breaks while printing to keep up. This doesn't happen at all when I print the pdf directly. Also you lose the CMYK definition.
But what my real concern is: when I print an image it always adds 2cm margins to the page. The pdf image has margins of its own already so now it's double. 2cm is way too much anyway. I can't find any settings anywhere where I can change this.
So: does anyone know how to change the margins when printing from a Windows store app?
I've always been required show download size next to the file hyperlink. Only the file in question is rebuilt everyday and the file size can change often. So needless to say the size has been wrong for months. I'm not going to update our site daily to display needless info.
instead of
click here to download (20mb)
I'd prefer
click here to download [sizeof('file.xxx')]
The best solution would be javascript based or similar.
Since the file is on the server the solution would be best using ASP.NET. This blog post shows how to find the size of a file on the server. You may be able to adapt it to your needs.
javascript isn't really the best language to query the file system. There are ways to do it but they are all very hacky and you should stay away from them.
You can get the file size dynamically using server side code though :
long fileSize = (new FileInfo(# ".\file")).Length;
So in your markup, you could have something like :
<asp:Hyperlink runat="server" ID="hyperlinkFile" ...>
In your code behind, set it properly :
this.hyperlinkFile.Text = "Click here to download" + fileSize.ToString();
Use XMLHttpRequest to send a HEAD to the file and parse the HTTP Header that you get back, looking for the Content-Length field.
Something like:
var client = new XMLHttpRequest();
client.onreadystatechange = function() {
if(this.readyState == 2) {
alert(client.getResponseHeader("Content-Length"));
}
}
client.open("HEAD", address);
client.send();
More information here:
http://ajaxpatterns.org/XMLHttpRequest_Call
The final solution will be a mix between server code (asp.net) and client code (js).
You can build a REST service, that based on the file name or path, returns the size.
You can implement a js function that updates the inner text of every with the result of the REST service call.
Do something like this
click here to download (<%= C# or VB code for file size %>)
Inside the <%= %> tag you can put C# or VB code to find the file size. The server will evaluate it and then put the result where that tag is.
Just create a column name 'FileSize' in your database and fill it with asp.net after your upload has finished. This makes sure you won't overload your server too much.
[edit]Sorry didnt see your file size changes every day[/edit]
In that case you could write a little FileSystem Watcher and let it run in the background on your server or you could just get the filesize by checking the FileSystem info, way easier.
I thought about this more...I read all your answers, then clicked on some links to download various files from other websites. The browser tells me the size after I click 'download' in the dialog box.
I'm going to change the mind set that it is even necessary to include in the link.
Our site has so many pointless...('well other sites have this feature')...and the person I replaced didn't realize or care he that those other sites were built with a CMS that does all that automatically. Example: He was hard coding at the bottom of each page 'last updated: 01/01/1900' every time he saved the document.
edit:
I don't like the way I phrased this answer the other day. I realized that it is unnecessary to include the file size in the hyperlink, when all the major browsers will indicate the file size once you click 'download'. Like in my example above, there are so many instances I can find where the developer or webmaster before me added additional work for themselves by including "features" like filesizes/timestamps/etc... In my opinion adding features like that have/are:
No ROI
Likely to always be wrong
Required to have constant maintenance
Cheap way to make your site look "dynamic"
The last thing you do