I have a website which shows imes, personal records, results, limits, etc for Dutch swimmers.
On of the things i would like to add is a graph showing the progression of the swimmer over time for a certain stroke/distance.
For this i would like to use the HTML5 canvas.
I did some tutorials, read some sites and i am able to draw a nice graph via javascript.
But now : how to get both the database and (probably) javascript to work together ?
How do i get the values from my database to the javascript function, so it can draw the chart on my canvas ?....
Put the database on the server. Add a script (php? Python? whatever your webserver has) to retrieve the values from the database via SQL and turn them into JSON (javascript object notation).
In your javascript, make an AJAX script to the server's data page described above, and voila, data in the browser.
The main problem is that javascript (particularly in a browser) is expected to come from, and communicate with, a server. It doesn't really have client-side database connection libraries.
If you want to do it all client-side, then I suggest you ignore canvas and html, and go with the c# option.
Related
I've spent most of the Christmas reading through the Bing Maps information. However, there are so many different options and choices that I'm getting stuck on the plentifulness.
In one of the most obvious URLs I see both non-API and API approaches. That's confusing. There are AJAX, REST and Spacial Services and, to the best of my understanding, they do pretty much the same. That's confusing too... :)
So, here's the question. I'd like to create a web page that given a certain input (e.g. XML or JSON) will provide me with an image. The image is supposed to be a map with plotted pins (that contain my descriptions), controls for zoom/pan and (preferably) even traveling routes (automatically computed or provided by me) between those pins. Also, It'd be great if I could set a semi-transparent polygons covering some areas.
Which API am I supposed to use?!
I sis something like that a few years ago with Google Maps but as far I recall, I only sent in a XML file and the map was hosted more or less at Google's.
If you're building a web site, then you'll have to choose between the AJAX Control and the REST services. Basically, the AJAX Control allows you to embedded a map in your page, add pushpins, draw shapes, display routes...etc.
See http://www.bingmapsportal.com/ISDK/AjaxV7#CreateMap1 for a live demo.
The REST services are more useful for tasks simple like static imagery as well as requests like (reverse)geocoding and routing, that don't involve user interaction.
If you want a full "map control" that allows the user to interact with keyboard/mouse, use the AJAX API. If you're not, REST services could be enough.
EDIT:
AJAX API = AJAX control = AJAX v7
Spatial Data Services is a REST API that allows to compute spatial requests against a large number of data. It shouldn't be used to display a map.
If you're interested in something that allows your users to pan/zoom, create pushpins by clicking on the map...etc., then the AJAX control is the most suitable. It offers all the javascript stuff to display a dynamic map that allows user interaction.
If your XML file is in GeoRSS or GPX format then take a look at the modules for Bing Maps here which show you how to do this in a few lines of code: https://bingmapsv7modules.codeplex.com/
If your XML file is a custom format then take a look at the GeoRSS module to see how to read XML in JavaScript.
If you have more than a thousand items in your XML file I would highly recommend storing your data in the Bing Spatial Data Services which will expose it as a spatial REST service, or uploading it to a database and using a web service to load the data to the map. Loading more than 1,000 pushpins to a JavaScript map could be slow. Using a service you can load only the data that is in view which would make your app much faster.
I am new to asp.net and Google maps. I want to achieve tracking capability on my asp.net page. I want to create a number of markers and then move them along a path.
Can any one help me understand, how do I do it?
I want google maps to work as AJAX
this can be done in many ways, I will dish out a very easy solution,
1.Your webpage should load a map and add markers representing your assets with an id.
2. Your web page should ping your web server every sec to query for change
3. If your server has a change to report it should reply back with the latest latlon for those ids as a json
4.you can then update the positions of those markers.
If you can implement http push(long polling/websockets) then even better as you will get near realtime updates
This assumes that your web server is being updated by your tracking device.
your webservice should always return the latest position it has for the assets.
Updating your markers(assets) on client side is pretty easy as well,
To 'move' your existing marker, you'll wanna make sure its global and then you can just update its position within the function with something like:
marker.setPosition(results[0].geometry.location);
This website that keeps updating some live information about the bus timings in Helsinki.
I want to parse the live information from the website and display it on my WP7 phone. The user needs to enter the bus stop number and the WP7 app should show the buses/trams currently in the bus stop.
Is there any way I could obtain the real time information from the website?
If you look at the source of the website (http://www.omatlahdot.fi/omatlahdot/web?command=fullscreen&stop=1020455) -- in IE right-click on the page and select View Source -- you'll see that there's really very little in the actual source file, in particular none of the data is there. All of the hard work is coming from the referenced javascript file scripts/fullscreen_header.js (full path is http://www.omatlahdot.fi/omatlahdot/scripts/fullscreen_header.js). You want to download that .js file and study how it retrieves data with AJAX calls. Start with the reloadPage function.
You can make these same calls (e.g., using WebClient) to retrieve the data into your application. If you want to extract the data from the returned HTML, I'd consider parsing it simply as a string since I am assuming that it would have a very regular structure and dragging in a general-purpose HTML parser would probably be overkill.
Alternatively, you might find out if the omatlahodot.fi provides the data as JSON or XML feeds, so you don't have to "screen-scrape" the HTML. I don't read Finnish, so I can't help you with that. Look around on their websites (maybe a section called "dev" or "api") or send them an email inquiry.
Please let us know how it works out!
I ran into this problem multiple times in my career, and never was able to find a elegant solution for it. Imagine you have a simple page, that has a repeater. You populate that repeater on the server-side through the databinding. That's great, works fast and does what it's supposed to. But now you want to add paginator to that repeater, or otherwise change the output. Doing it through Ajax is a preferred way to enable rich client interaction.
So you create a web-service that serves you the data as JSON, but now you are stuck... Either you have to write complicated client-side code to find each field that you need to modify in each repeater-item, or you have to blow away the whole server-side output of the repeater and construct new HTML from the scratch, or, the method that I've been using lately, take the first repeated item, blow away everything else and clone the first item as many time as you need to and modify it's fields.
All of the described methods are not optimal, because no matter what, they require quite a bit of repeated logic on the server-side (i.e. template in repeater) and on the client-side (javascript to display JSON data). There's got to be a better, easier way to do this. First thing that comes to mind, is instead of returning JSON from the web-server, return HTML of the pre-populated repeater. But for something like that, I might as well use ASP.NET AJAX Update panel. The output isn't going to be any smaller with a stand-alone web-service.
Next thing that I thought of, is JavaScript templates. What if there would be some way to take unprocessed repeater template on the server-side, and convert it to JavaScript template that could be either embedded on the page at load, or served as part of the web-service response. However, I couldn't find any existing solutions for something like this. And I can't think of a simple way to do that myself. Any ideas?
P.S. Rendering JavaScript template to the client-side on page load, and using JavaScript to populate it without the initial view being rendered on the server (no repeater and databinding) is out of the question. I care too much about performance.
Firstly, I don't believe that using client template with JSON data even on first load will adversely affect the performance unless we are talking about devices with different form factors such as phones etc.
However, if you must use server side templating/rendering then why not make server return the html for the repeater. This can be done by putting repeater logic into a different user control/page and processing only that page on ajax request. And this is not at all equivalent to using UpdatePanel (as stated by you) - UpdatePanel posts entire page data (including view-state) having more request size. The response size is also larges because it must contain the view-state. On server side also, use of UpdatePanel results in loading complete control tree with state data and post-back event processing. Sending only the requisite html is much better approach and will fit your needs perfectly - only issue is the html would be larger in size as compared to JSON.
Lastly, there are some interesting projects such as Script# - Script# converts C# code into java-script. You may build something similar (using script# itself) to convert the server side templating code into eqivalent JS code. More viable approach on similar lines could be use T4 templating to convert a technology-agnostic template into both server side code (markup + code or pure code) and equivalent JS-code.
After thinking about all pros and cons of different approaches, I stopped on the following method. I created a custom ASP.NET databound control, that can render HTML, however, when the page is requested with query string parameters, instead of just doing standard rendering, it will use Response.Clear() and Response.End() and in between of those two commands output JSON version of data based on the query string parameters. Also on the first rendering of the page, it will also output JavaScript template using reflections to read names of the variables from the control's template area.
This method works great, all I have to do, is drop my control on the page, data bind it, and it works as a true AJAX grid that supports pagination, sorting and filtering. However it does have limitation. In the control's template you can only specify variables, not expressions. Otherwise reflections can't convert it to a JavaScript variable. But I can live with that.
Other possibilities that I considered is a separate web-service that takes a type of the page as parameter and uses reflection to get data bound object as well as create template for the grid. I also though about writting my own version of update panel, that would not use view state and only send in part of the page.
I need to develop a chat system in ASP.Net. I have gone through lots of SO question asked on similar topic, but did'nt find any one satisfactory. Is it possible to create it from scratch or do i need to go for some API's. My requirement is limited to my site users only, can say intranet based.
Please help me.
To make the text chat is one think that you can done with a simple table, everyone write on it, every one read time to time, and you show it to the page.
Here is an example http://www.codeproject.com/KB/ajax/ChatRoom.aspx
The Video/Audio chat is a complicate one. You can start with this example
http://www.codeproject.com/KB/IP/videochat.aspx
and you can read more here: how to work with videos in ASP.NET?
Text chat is relatively simple. It involves three tier architecture. 1) Javascript timer. 2) WCF Ajax Enabled web service or Generic Http Handler, 3) Data Storage (Preferably SQL).
1) On the page - sending: input text box + button (used to send). The button click event handler or the text box's key down (for enter key) and blur events would invoke a post (via JQuery, plain ol' JavaScript or whatever Javascript library you use) to the WCF service/Generic handler, sending the contents of the text box, along with the chartroom name, the addressee, and the recipient.
2) On the server: WCF Service/Generic Http handler receives the post and stores it in DB.
3) On the page - receiving: using JQuery for example, you would create a javascript timer on document ready (when the page loaded). On every timer's tick event you want to create a GET (or post) via your handy JavaScript framework (or Plain Javascript) to your WCF service/ Generic Handler requesting the latest records stored in the DB for that chatroom. Append the result received (assuming xml/html/json) to the Div or whatever element is used to display your "chats".
This is a very simplified chat in jquery/asp.net.
As far as audio-video is concerned, you have a few problems. 1) The browser itself has no means of interacting with the mike, speakers, and video camera, unless it uses a plugin. Moreover, browsers typically have no way of knowing how to decode a video stream (though some of the smarter ones have it built in... chrome, firefox). 3) Javascript has no way interacting with all the necessary hardware as it lives inside the browser.
All that said, you can use a plugin such as Flash or Silverlight, (that has built in access to the necessary hardware), or whatever. You will also have a conceptual dilemma with those as you have to simultaneously deal with 2 streams - one for coming in, another going out and displaying both. However it is possible.