Game Maker Studio HTML5 localStorage issue - html

I'm embedding GMStudio game in browser using . I need to send some data to the game from site's frontend in JSON and to receive some data from the game in frontend to make consequent actions.
So, my idea before was to save data in cookies/localStorage and to get it in the game somehow, using HTTP functionality or DLL's. Also, I'd like to emit messages from the game using window.parent.postMessage and receive them in frontend correctly.
Alas, I did not find a way to implement this. I hope there's some consistent approach to this problem about which I do not know.
The backup plan is to use Game Maker http_post_string and web sockets to get user's data before game's start and to make frontend do something after game's ending. It's clumsy and insecure, however.

The standard approach is to make a JavaScript extension.
That is done by creating a blank extension, adding a blank JS file to it, defining the functions via the context menu on it, and then adding the implementations into the JS file. Then you'll be able to call them from GML side as per usual.
This way you can access LocalStorage\Cookies, transmit\receive data from JS backends, and overall mess with the runtime as you please (with various degrees of understanding required to access internal data).

Related

How do I create a web page to show dynamic data?

I have a microcontroller that monitors 4 different sensor variables (temperature, pressure, weight, speed) with each variable being read at a different rate. The microcontroller also runs a lightweight webserver. I want to create a simple webpage such that when a client connection is made to the webserver, it will display the values of the 4 variables. While I am somewhat familiar with HTML I can’t figure out how to populate a webpage with the data.
Am looking for some pointers on how to do this.
Secondly, I know the page that is displayed is static. How can it be made dynamic in that when a new value is read, the page is updated with that value.
I am sure there are ‘standard’ ways to do this but I have no clue what the mechanisms are called or how they work.
Any guidance is really appreciated. – Thanks!
J
Perhaps SSI (Server Side Includes) is what you need to show dynamic data inside HTML page. Usually lightweight webserver for micro-controller would had this feature implemented already.
You need to implement Web 2.0 feature by yourself to extend your lightweight webserver. For client side you can use the js library from Socket.IO
Alternatively you can have a socket.io server (by python) play for this web 2.0 feature, and your micro-control just update its data to the web server by JSON API. Then socket.io server update the received data to the clients. This is what I've done on my previous MCU project.

http push django comet

I want to make a django server to refresh the content that you approach the database, if the idea is to first make the user see the current contents of the database and as the valley became the new content, this content comes and is placed above the previous content without reloading the page, in another part of the site is to make you change the current content with the new as it gets to the database?
evserver clearer is my choice, but really do not know how and what would be the most simple and efficient?
I think you should avoid HTTP Polling. Here's why:
if the frequency of the setInterval combined with the number of users on your web app is going to lead to a big resource drain. If you go through slides 9 to 19 in this presentation you'll see some quite dramatic figures for using Push (Note: this example uses a hosted service but hosting your own realtime server and using Push also has similar benefits)
between setInterval calls the data displayed in your app is potentially out of data. Using a Push technology means the instant that new data is available it can be push and displayed in your app. You don't want users looking at an app and thinking they are seeing correct information when they are not.
You should take a the following StackOverflow questions:
Django / Comet (Push): Least of all evils?
Need help understanding Comet in Python (with Django)
For Python/Comet see:
Python Comet Server
The latest recommendation for Comet in Python?
I'd recommend you also start considering "WebSockets" as well as "Comet". Most Comet servers now prefer to use a WebSocket connection when possible.
If you'd prefer to avoid installing and managing your own Comet/WebSocket solution then you could use a realtime hosted service which will allow you Push data through them using a REST API and your clients can receive events by embedding a JavaScript library and writing a small about of code to subscribe and receive the event.
The steps are quite straightforward:
Write a model to store data in DB
Write a view that will generate JSON-serialized data upon POST request.
Write a template that will contain JavaScript with setInterval() that will
proceed AJAX requests to the view and render recieved data. (I'd suggest using JQuery as it's well documented and widespread).

how to dynamically update HTML5 canvas via server push without page reload?

What I would like to do is create a canvas that will show a network map. It's not really a network map but in terms of explaining it the network map example works best to not bog you down with details that don't pertain to my question.
On the network map I want to display routes the traffic takes. These routes change in time, sometimes as frequently as multiple times per minute. On the server side I have a log file to which each route change is appended as it happens.
I know how to create the canvas, I know how to draw my routes onto the canvas.
Is it possible to have the server push an update to the canvas without requiring a page reload/refresh, essentially requiring no user interaction at all? The routes drawn just automagically change?
This would need to work on IIS so a jscript or .Net based solution would be necessary. I won't be able to install PHP, Python, Ruby etc.
Thanks in advance for any insights you can provide.
I recommend that you look at a WebSockets solution to push the information from the server to the client (JavaScript). When you receive the update you can update the canvas as required.
Technologies you should look at if your preferred server technology is .NET would be a service like Pusher, who I work for, and our .NET APIs which let you push updates to the client via our REST API.
If you would prefer to host your own realtime infrastructure then you could look at WebSync (which is actually a Comet technology) which integrates with IIS and also XSockets. There are also a number of realtime technologies on this guide which may interest you. If you've any further questions just let me know.
Server-Sent Events: http://www.html5rocks.com/en/tutorials/eventsource/basics
( Server-sent events is a technology for providing push notifications from a server to a browser client in the form of DOM events. The Server-Sent Events EventSource API is now being standardized as part of HTML5[1] by the W3C. )
Yes, I've done this before (with an ajax-based drawing application). It's very possible. Send packets of information via AJAX (JSON or something), interpret them, and draw them on the client's canvas element. This is trivial to design (and easy to implement using something like jQuery). It seems that you already figured out you need to have a server-side script that pushes information to a web page and a web page that actually draws stuff on the canvas. That's essentially all it is.

Downloading a lot of slippery data

I have access to a web interface for a large amount of data. This data is usually accessed by people who only want a handful of items. The company that I work for wants me to download the whole set. Unfortunately, the interface only allows you to see fifty elements (of tens of thousands) at a time, and segregates the data into different folders.
Unfortunately, all of the data has the same url, which dynamically updates itself through ajax calls to an aspx interface. Writing a simple curl script to grab the data is difficult due to this and due to the authentication required.
How can I write a script that navigates around a page, triggers ajax requests, waits for the page to update, and then scrapes the data? Has this problem been solved before? Can anyone point me towards a toolkit?
Any language is fine, I have a good working knowledge of most web and scripting languages.
Thanks!
I usually just use a program like Fiddler or Live HTTP Headers and just watch what's happening behind the scenes. 99.9% of the time you'll see that there's a querystring or REST call with a very simple pattern that you can emulate.
If you need to directly control a browser
Have you thought of using tools like WatiN which are actually used for UI testing purposes but I suppose you could use it to programmaticly make requests anywhere and act upon responses.
If you just need to get the data
But since you can do whatever you please you can just make usual web requests from a desktop application and parse results. You could customize it to your own needs. And simulate AJax requests at will by setting certain request headers.
Maybe this ?
Website scraping using jquery and ajax
http://www.kelvinluck.com/2009/02/data-scraping-with-yql-and-jquery/

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