HTML5 Canvas game file system - html

I'm currently working on an html5 game using javascript and heavy use of the canvas element.
As of right now the game is stored on my local hard drive and I'm running it on google chrome locally, no webserver, as of now at least. I am looking for a way to read and maybe possibly write plain text files within the local folder of the game.
I would be fine with just being able to read text files because I can just use web storage to store anything I want into the browser. The text files would be used to store levels and then read by javascript and interpreted as the tiles that is shown on screen. These text files are going to be staying in the same folder as the website is at all times.

You might want to use WebStorage instead, as it's designed for things like you describe.
http://dev.w3.org/html5/webstorage/
Note that often when you start using features like this, because of strict security on browsers you will probably need to run your own local HTTP server to make use of these things.

Related

Can I make CNC Editor with HTML5?

I would like to make my own CNC Editor.
I am looking for some guidance. I don’t know if it is even possible with HTML5. But it would be great if I can. If possible, please list what I should research and learn.
I don’t need it to be online accessible, I will only have it on my computer. I will be accessing it via local network from multiple different computers. I don’t want it accessing the internet, because it’s not always available.
Desired Features:
⁃ Read and Write files with different extensions (all files used are easily opened in notepad)
⁃ Store and retrieve data from a simple database file.
⁃ Make calculations
⁃ Have a text Editor window
⁃ Have a Display area for simple vector graphics depending on data loaded and provided by user.
It is possible but requires a lot of work. I would say that these are technologies you would need to master in order to pull this off:
Node.js (use express.js) - for storing and retrieving files from database and for reading/writing local files with extensions you want (server-side)
Vue.js or Angular.js or React - for building frontend interface to manipulate your vector graphics. It can also do calculations and It's good with svgs and that kind of stuff.
Electron.js (not mandatory) - it wraps it in native-app like experience. This framework actually gives you ability to write desktop apps for any os and arch.
So as I said, It would be a lot of work but its possible in the end.
Funny coincidence is that my brother is planning to build CNC machine so I might be doing this as well in next couple of months. Feel free to contact me if you need any further help!
UPDATE: You cant do it with just HTML5. It would be like trying to make wooden space shuttle.

Embed frame of a local .exe in a web browser

The question may sound a little odd but I'm currently in a project where this could help solving many problems.
Is it somehow possible to embed an .exe into any web browser? I don't want to run the program directly in the browser (would be major security risk I guess), I just want the window of the .exe being embeded into a browser page. So the .exe is running locally on the system but instead of a "windows window" I have it displayed in the web browser. Think of it like VNC, I only need my "video" and the possiblity of user interaction (the program is an interactive 3D visualization).
I don't have much hope for this being possible so I'm also glad about any suggestion that would allow me to display web pages while my program is running in the same (fullscreen) window. Doesn't necessarily has to be a "real" browser but should allow basic stuff like HTML, CSS etc.
This kinda sound more like a SuperUser question rather than a StackOverflow one.
Anyway, I have a number of possible solutions for you:
You could use a second monitor.
Maybe all you really need is setting the "exe" window to "always be on top".
I could swear that used to be an option in the Windows' default Task Manager in the earlier versions of Windows but I use a 3rd-party piece of software for around 10 years now for that and many other purposes, however there are many such options to be found online.
Can't risk endorsing the one I use here, since it tends to spook people into thinking I'm trying to infect them with HAX.
In case you have the sources for the "exe" you are running, have you considered going the other way around and building a web renderer into your desktop program? Something like WebKit, Servo and suchlike.
Or you could make the program listen on a port to network packets you can be sending from the page you'd have to make — like a remote control.
Then there's also the cgi-bin option if you run the server.
And, to see what you're controlling, you might wanna stream it to some streaming platform (if you get it to stream an obscured window), embed their player widget in an iframe on your custom local webpage and keep the website you are reaching in another frame.
Maybe even code the program to read XInput and stream it through Mixer using its MixPlay feature to control it.
Hope any of this helps.

How do I produce a screenshot of a flash swf on the server?

I'm writing a flash app using the open source tools. I would like to load a data file in to the app and capture a screenshot of the stage on the server. The only part that seems mysterious is running the app on the server. In fact, I don't even care if it's the same app running on the server and in the browser--if I can use the flash stage and drawing routines to produce an image server-side, I'm happy. If I have to delve in to flex, fine. Right now I'm having problems finding any starting point at all.
I gather Adobe has some commercial products that may fit the bill, but I'd like to stick with open source, apache, and linux. I know this is probably possible with haxe/neko, but I'd like to use more mainstream tools if possible. Am I asking too much?
EDIT/CLARIFICATION: Many thanks for the responses so far, but I think I've been a bit muddy in my description. I've already written the actual stage-grabbing stuff using the same PNGEncoder class as was suggested. The problem is in actually running the swf on the server side. I don't want to let the client take the screen shot itself, because this opens up the possibility of the client maliciously submitting a screenshot which does not correspond to what is on the stage, that is, I don't want users uploading porn. If I could run the the actionscript code on the server, then I could generate the screenshot from my data files and be sure that the screenshot matches the data, but I have no idea how to run the actionscript or swf on the server.
Swfs run on a client computer, not on the server. The only way it would run on the server would be if you set up a special environment on your server so that it ran a web browser, opened up the page and ran the swf. But even then it would have no correlation to what an external user was doing.
You'll need to run it client side. As far as your security concerns, the best way to get rid of those is to have the php writing the actual image only accept an encrypted form of the image file, which the flash can encrypt. That way they can't simply use the PHP file to upload whatever image they want unless they happened to encrypt it the exact same that your swf did. Next encrypt the swf itself (I recommend SWF Shield) so that a potential hacker cannot read the code to know how to encrypt the image.
We just completed a similar project where we rendered JPGs from SWFs that loaded dynamic data, we used IECapt
Did you try actionscript print commands?
Try and look at this:
http://www.phpclasses.org/browse/package/4312.html
I know this question is long dead, but I had a similar problem and ended up writing a script using applescript + ui scripting to grab the inside area of the preview window of the standalone flash player in OS X. You can grab it off github here.
How about swfdec-thumbnailer from the swfdec-gnome package? It's used to create thumbnails of SWF files but can accept arbitrarily large resolutions with the -s argument.
EDIT: swfdec-gnome has been deprecated in Ubuntu 10.10 in favour of Gnash. Here is a guide on taking screenshots with Gnash (note that certain features like gradients are not yet properly supported).

Best way to handle file uploads through HTTP

File uploads through web pages using the standard HTML input always seems clunky to me. If the user tries to upload a large file, it can go on forever and they get no queue that the file is actually being uploaded.
I have tried to do things like provide a gif graphic that is an animated graphic bar, but it doesn't give the user any indication of how much is uploaded. I have even tried to do a progress bar with AJAX, but those were always ugly and never seemed to work right.
This has been an issue with many of my clients, and often I'm asked if there is a better way. Sometimes I'll just provide them an FTP site so they can upload it there, but that's not a practical solution either.
What do you think the best way to handle HTTP file uploads from HTML is? What are some good ideas / examples you have seen around the internet?
There are several techniques for asynchronous file transfer with a progress bar over HTTP, most of which involve either Flash or XMLHttpRequest.
There are a number of client side controls that one can use.
You can
Build your own ActiveX control. Windows/IE only
Use Flash to queue up files and upload them one at a time to the server using the stanard file upload protocol.
Use a signed java applet to upload.
Write a browser plugin.
Some random links from google:
http://www.element-it.com/MultiPowUpload.aspx
http://www.codeproject.com/KB/aspnet/FlashUpload.aspx
http://www.dmxzone.com/forum/go/?36564
I'll add swfupload to this. It's an open source flash uploader that can degrade gracefully if the user doesn't have flash.
There's really only the one mechanism for uploading via a browser. You can, however, dress it up and make it more user friendly by providing a progress bar to show that the upload is progressing and at what speed.
This is typically done by targeting the upload form at a hidden iframe and using AJAX calls to find out how much of the file has reached the server.
Here's one example of this:
Megaupload
If you running a mod_perl2 apache there is the Apache2::UploadProgress module. This adds an id to the http upload request, you then query the server for the progress of that upload. Has built in support for creating an AJAX progress bar in a popup window or within the page doing the upload. If you want to build your own progress display you can get the info back as XML or JSON data.
The YUI Uploader utility uses a Flash-based uploader, is well documented, and has several examples for you to try. I've used it on several projects, and would recommend it.
I use this one for a fairly simple and complete tool. The base sourcecode is good and you can easily customize it if necessary.
AJAX File Upload
Interesting, no one has mentioned NeatUpload upload component by Dean Brettle, it has lots of interesting features and runs on MONO, too

What is the best client side browser library to upload multiple files over http?

What is the best client side http library to upload multiple files? If it can handle directories that's a huge bonus. I'm looking for something that is open source or free. I'm looking for something like FTP, but that works over http, through the browser. Uploading multiple files through a normal HTML 4.x form is a bit of a hassle when it comes to uploading more than 5-6 files.
Feel free to share your personal experiences.
Uploadify is also another great multiple file uploader. It was built off of SWFUpload and they added new features to it.
Some of the features that I have found most helpful are:
The user can upload all the files at once using ctrl + clicking on all of
the files
As the files are being downloaded a queue is displayed which
shows the files being downloaded including a completeion bar.
As files are completed they are removed from the queue
It also allows you to specify which file types the user is
able to download (they can only see the ones you choose)
I'd recommend something like SWFUpload for that. It's main feature is its support for progress bars, but it also allows for queuing files which is particularly handy (this is actually the second time I've recommended it today).
Just to make sure other options are documented (SWFUpload is great) - another good solution is FancyUpload2.
You could use a Java based solution. I've been using JumpLoader on one of my web pages and haven't had any problems with it. It can also upload directories, which other solutions mentioned here do not support.
Another option that I have used before is uploading and then extracting ZIP files. I have used PEAR::Archive_Zip to extract. Requires more knowledge on the user's side, but supports directories and unlimited files (depending on the memory alloted to PHP).
Take a look at jquery-html5-upload it doesn't require Flash, and has a sexy jQuery API.