Latex/Asymptote to Image for Website? - javascript

I'm working on a database of math problems right now - all the problems are formatted in LaTeX, but there are Asymptote images as well.
It doesn't look like Mathjax supports Asymptote - what would be the best way to get the images from each math problem? How does Art of Problem Solving's TeXeR get Asymptote?
Could we send the code and render the image client-side, or should we extract the asy code for each problem, get an image, save these images to the database, and link each image to its respective problem?

I'm very late here, but I'll suggest something anyway.
What I would do is simply render all the images serverside. You can have Asymptote rerender images if there are any changes to the original file.
That way you save bandwidth and processing time for the client a lot. You may have a lot more data to store, but this way you'd also have a bit more control over the pics.
Asymptote lets you define the output, that way you can have Your server automatically create them based completely on the original problem, name them accordingly. That way they are already 'linked'.
This is probably the best answer I can give without code.

Related

Update html 'permanenlty' with no database?

I made a website for crowd-funding. I know that we should have used a platform for this. (other issues determined us not to)
The page that I have created has no database behind.
What I am trying to do is create some kind of hidden form that updates the sum that was raised so far.
I am not a very technical person but I do know that modifications made through javascript / jQuery ar usually temporary.
But, since scripts like website visit counters do exist I am wondering and appealing to the collective wisdom of this community:
Is there a way to update an attribute of a html element through some kind of hidden form without a database behind?
Perhaps writing to a .json file and updating the attribute from the data?
(I need to do this today as I will not be at the office during the campaign and it is very hard for a person that has no technical skills to do it... not that hard, but still, not user friendly.)
In order to display variable data, you need to get these data somewhere.
Do you have write access to your server file system?
What service level do you expect during data manipulation? Does it suffice if you just go and upload modified file every time manually?
What about embed in your Web page an IMG and then upload it with always the same name and different content?
There is a database even behind "dummy" hit counters, no magic.

Load a few thumbnails with one HTTP request

Suppose I display a few dozens thumbnails in a few web pages (10 thumbnails per page). I would like to load them as quickly as possible.
Does it make sense to get a few thumbnails with one HTTP request (one thumbnail is ~10K) ? How would you suggest do it with JavaScript?
You can, but you need to jump through a few hoops:
1) Base-64 encode the images on the server as a single file.
2) Send them to the client as a single request blob, via AJAX.
3) Decode the images back into pieces.
4) Use Data-URIs to insert them into the DOM.
...not really worth it.
Regarding network performance it does really make sense.
You could, for example, put a predefinited number of thumbails along in a single image.
On client side you can treat that image like using "css sprite" tecnique
(http://www.w3schools.com/css/css_image_sprites.asp)
If it's important for you to send the images as fast as possible I would consider sending them as a sprite. Unfortunately this may be somewhat difficult on the back end if the provided images may vary. If they are static and the same for every user it is way easier as you can manually prepare the images and the front end code to display the correct image parts.
In combination with the sprite approach it would also be useful to enable progressive/interlaced loading in order to deliver visible results as fast as possible.

create html elements on the serverside VS get data as JSON and create tags with javascript

I want to create a AJAX search to find and list topics in a forum (just topic link and subject).
The question is: Which one of the methods is better and faster?
GET threads list as a JSON string and convert it to an object, then loop over items and create a <li/> or <tr>, write data (link, subject) and append it to threads list. (jQuery Powered)
GET threads list which it wrapped in HTML tags and print it (or use innerHTML and $(e).html())
Thanks...
I prefer the second method.
I figure server-side you have to either convert your data to JSON or html format so why not go directly to the one the browser understands and avoid having to reprocess it client-side. Also you can easily adapt the second method to degrade gracefully for users who have disabled JavaScript (such that they still see the results via standard non-JS links.)
I'm not sure which way is better (I assume the second method is better as it would seem to touch the data less) but a definitive way to found out is try both ways and measure which one does better.
'Faster' is probably the second method.
'Better' is probably subjective.
For example, I've been in situations (as a front end dev) where I couldn't alter the html the server was returning and i wished they would have just delivered a json object so i could design the page how i wanted.
Also, (perhaps not specific to your use case), serving up all the html on initial page load could increase the page size and load time.
Server generated HTML is certainly faster if the javascript takes long time to process the JSON and populate the html.
However, for maintainability, JS is better. You can change HTML generation just by changing JS, not having to update server side code, making a delta release etc etc.
Best is to measure how slow it really is. Sometimes we think it is slow, but then you try it out in real world and you don't really see a big difference. You might have the major delay in transmitting the JSON object. That delay will still be there and infact increase if you send an html representation from the server.
So, if you bottleneck really is parsing JSON and generating html, not the transmission from server, then sending html from server makes sense.
However, you can do a lot of optimization in producing the html and parsing JSON. There are so many tricks to make that faster. Best if you show me the code and I can help you make a fast JS based implementation or can tell you to do it on the server.

How can I make a Playstation 3 Game card?

I want to make a ps3 card like this one:
http://gamercards.exophase.com/2516.png
using the data from the ps3 network site, this one
http://us.playstation.com/publictrophy/index.htm?onlinename=bruno_shady
but I want to make something different, something that show only the name of the person and the games that the person has, to post on a forum that I frequent...
How can I do it, or what do I need to do it?
something simple would be nice, and that it update itself from one to one day, or even more, two, etc...
You would need a server side language to do that - like PHP.
You will need:
A way of catch the data from the PlayStation website. It can be done quite easy using the curl library and RegExps.
A way of compose the final image. You should have one or more base image(s). You will need to load the image with a image library like GD in PHP and draw on it the necessary text.
A cache system. Actually it not necessary but your server will waste too much resource otherwise. It's about of saving the generated image in the hard disk at the first request and send it on every request, with a refrest rate of some hours or days.

Embedding an image in an AJAX response

Is it possible (and supported cross-browser) to embed an image into the XML of an AJAX response, and then load that image using JavaScript?
I have a system that does some calculations based on the number of sessions running through it. The results are then graphed, and returned in two parts:
1) XML containing information about the graph, totals, and Image map data allowing the user to click on relevant areas.
2) The graph image.
As the data can change between the two requests (and could be expensive to calculate), I'd prefer to do it in a single request (return the image with the XML). The current implementation caches the stats for a small period so that the results of multiple requests will still match. As the amount of data that needs to be cached is going to be increasing (from ~2.5K to ~1.2MB), I would like to try an alternative method.
NOTE: I do not want to use inline b64 PNG images as they are not supported in IE.
Can you not store the image on the server and send the URL to the client?
As this seems like more work that it's worth, I've decided that a simpler solution would be:
1) Send XML data to the client with the details of what is to be graphed.
2) Client sends a request for the image, including the data to graph (similar to the Google Chart API).
This decouples the chart rendering from the data, and then it can be used in the future to generate generic charts for other data sets. The other benefit is that it doesn't require any caching server-side since only 1 request is used.
You might want to check this link to see if this concept will work. This link maybe useful.
I think trying to combine both set of data in the XML would be interesting.
Have you considered using Google's Chart API?
Well actually you can but it's probably not going to be worth it. It seems like a vector based method such as canvas and the VML alternatives for IE would be a better alternative for rendering graphs. Then you only have to pass the graph data to the browser.
If storing is not an option. Create image in memory and flush the binary image data to response from a script, like a php file. Just use the correct header:
Content-type: image/png
The image gets regenerated every time.
To be absolutely sure the image does not get cached, append some random parameter to the querystring.
You could return the image to the ajax-client, and then include the XML data in a X-HTTP-Header for the image.
But you need to find out if it is possible to read the X-header from the ajax-client though.

Categories