Load image with current date_time using Javascript - javascript

I have some images in a folder save automatically from a web camera naming by current date_time. Now i just want to load each image after some seconds(let say 4 sec) which matches to my server current date_time.
Using java script..
I can get server time using PHP
**
I more simple words, Is there any
jquery plugin that load images from
folder with respect to image name
where the name is based on current
date_time?
**
Thanks

You can't know the exact server time from from javascript(unless your server and your computer are the same one). Getting time from server using any of the server languages to synchronize time between client and server will not work because of the response time of server. How about another idea. Write a page on server that will return list of last images(or last image), query it with javascript and show the last image(s).

Related

how to get data from ESP8266 WiFi AccessPoint withouit refresh HTML page

Currently I am getting data from a hardware device(charge/load controller) over WiFi, it has an ESP8266 configured as an AccessPoint.
The WiFi is setup to ignore all request from computer, just send its data once per second.
The data is a single string representing about 20 JavaScript Variables...
var xx1="text1";
var xx2="text2"; etc...
I get the data by refreshing the HTML5 page, process with JavaScript & logging to localStorage.
It all works well except I can only refresh about 3 second interval minimum for reliable consistent data-logging. The browser (FireFox) takes a while to complete refresh.
Q. Is there a way I can get every 'data send' using JavaScript without page refresh, this way I can log just the periodic strings I choose from 1 second to xxx second.
I suspect I might need to install some library component to access with my JavaScript ?, i would need to embed this into my HTML file if possible or have it reside in the same folder.
I have been learning JS for about 2 weeks now, getting most from examples & my mistakes.

Efficient way to display images(serve images) in MEAN stack application?

I am developing a MEAN stack application and i want to display the images with some responses.
Exact Requirement: There is search box , when user enter the name of the image , server should respond with that image and browser display that image.
I have maximum of 70 images with size 30kb maximum.
Should I store these inside the mongoDB and for every request node server hit the mongodb and serve that image in the response or I serve it with Angular.js?
Please recommend the efficient way to do that.
You can setup a folder for static content (CSS, images, etc) do it in your expess.js configuration probably you'll find something like this:
app.use(express.static(path.resolve('./public')));
app.use('/images',express.static(path.resolve('youPathToStaticimages')));
Then create a collection with the image metadata, like file name, size, uploaded date, friendly name and maybe tags or any other field that you can query.
Then use an endpoint / $resource combination and retrieve the data and display the images in the client with a simple HTML image tag (IMG) and use ng-src, probably within a ngRepeat.
For me that could be the easiest way to do it, also you can set some sort of cache policy to your image folder in apache or ngnix.
You've got a little over 2mb of data which can be easily cached. Transferring from the database to the web server or retrieving from disk is extra work. Load all the images into your node thread and when the keyword comes through send the cached image.

Refresh the browser cache for same call to an event updated file

Here is my scenario
Asp. net website
Angular app embedded via IFrame
First user clicks on the .net button that saves a response in a .csv file on the server. On every click different data is updated on the file
Then user clicks on the angular page, which gets the data from that file using a link.
Now the issue is with the caching. Because every time the same link is referred thus, browser shows the data from the previous request and don't actually read the updated file.
The reason I know it is caching issue is because, when I open it on fresh browser I see the updated content. After I run it second time with different request, again it shows me the same data
I have already tried
$http.get(url, {cache: false}
Response.Cache.SetCacheability(HttpCacheability.NoCache);
on my aspx page_load function.
How can I make it to read the updated file? Any help will be appreciated
Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();
Put this code in page load. Now there will be no data in cache browser will try to get the page from the server
Unfortunately I could not found any solution to my problem thus I have changed the logic.
Following is what I am doing now which is perfectly working:
1 Asp. net website
2 Angular app embedded via IFrame
3 First user clicks on the .net button that saves a response in a .csv file on the server. On every click different data is updated on the file. So, I am adding a function that adds the time stamp to name of file on each click
4 Sending the file to the client script via query string hash value . Adding the name of the file as hash value
5 At client side using $scope.$watch, watching the url and on each url change, gets the file name and loads the data from the location.
Now I am facing one more problem which is over here:
Add hash to the current url without reload in c#
If, anyone can help me with that?
Thanks

Javascript ajax wait until file is changed

I'm programming an website to control my Raspberry Pi robot. I'm driving two stepper motor using .py script I call it:
sudo ./GPS.py forward 100 30
Fist argument is way to go, second is how many steps to do, and the last is delay between steps.
The script open location.txt file (it looks like "100/50/18") and take coordinations x=100, y=50 and Alpha=18 degress. Then make a move, calculate new coordination and write it into this file.
Read part at the top of script:
fo = open("location.txt", "r")
data = fo.read()
fo.close()
coordinates= data.split("/")
temp1 = coordinates[0]
temp2 = coordinates[1]
temp3 = coordinates[2]
Alpha= float(temp3)
X = float(temp1)
Y = float(temp2)
Then it make all requested moves and calculations, and then at the end save new X,Y,Alpha back to file:
fo =open("location.txt", "w")
fo.write(str(X)+"/"+str(Y)+"/"+str(Alpha))
fo.close
Allright, this works perfect in Putty, but now I wanted to drive my robot through website, so I've made website to control it.
But now I have a problem. Now I have site like this:
HTTP --> Javascript --> PHP --> .PY script to move robot.
This works, but I have no idea how refresh X,Y,Alpha coordinates from location.txt on my website. I have an idea:
Javascript run .PY and wait it finishes, then JS open .txt and get data and finally set new coordinates to my webpage. But I don't know how to do it. This waiting to .PY finishes is killing me.
Thanks for your help!
Yacked2
PS.
I have apache installed on my Raspberry Pi, and I can donwload my .py script though webpage and I can open .txt file.
The classic web way of doing this would be to poll from the client until you are told of a change.
E.g.
Tweak your file so that it contains a date+time updated.
Implement a PHP script to open the file and serve the contents as a JSON object (with the date updated, X, Y and Alpha as properties)
On load of the page, load the location and store all 4 components.
When you send a move instruction to the server, start to poll for a change - periodically reload the JSON object until you have one with a changed date updated. You can then stop polling.
This updated location should then be stored and used to update your page.
Set a maximum number of times to poll and abort with error if you reach the maximum.
Let's say your main page contains
<div id="locationInfo" />
And you have implemented the PHP script getLocationInfo.php that returns a JSON object like this:
{ date_updated: "13-11-2013 15:45:98",
x_position: 105,
y_position: 120,
alpha: 123 }
In the main page you can have a script using jQuery that will (for example, something along the lines of - but more complex than)
$.get( "getLocationInfo.php", function( data ) {
var html = 'Location: ' + data.x_position + ', ' + data.y_position + ' #' + data.alpha
$( "#locationInfo" ).html( html );
});
All that's really missing from the above is the bit that repeatedly polls and aborts when date_updated has changed.
There is a simple example of polling described here by #johnny-craig: jQuery, simple polling example
In those examples you just need an exit condition for once you have the data you need (recognised by a change in date_updated)
It'll probably work, be pretty simple to implement, but suffers from the amount of duff requests being made from the web page. Though bear in mind the web has worked for a LONG time doing this kind of thing.
Alternatively, you can get all HTML5 about it and read up on websockets. Using websockets you can instigate the update from the server side, rather than the client side. There's less polling required and the response time on the client should be better.
Here's something that'll give you the basics:
http://www.html5rocks.com/en/tutorials/websockets/basics/

How build a list dynamically and pass/save user selected values from an HTML form to server?

I think in this case I need to write a client side script that onpageload/onchange gets options from server & builds a list dynamically. & stores new options to server via some JavaScript script. I will prefer to save user input in a file on server. I will be very thankful for any help.
Here is the stack we use for our web app and that works more or less the way you describe:
the user load an HTML page
the page make an ajax call and get the options as a JSON(either it exists already in the database, or a new option set is generated)
the json is rendered using a JS templating engine (PURE in our case)
the user change something
the same JSON is modified and sent by a POST to the server
the server read that JSON and store it in the database(you would write the data to your file). And then go back to the step 4, to wait for another user change.

Categories