Store/load data via (private) website on server with dialog box - javascript

Searching for a number of questions/answers, I could not find a solution for my application:
I wrote a web application (HTML/JavaScript and some PHP) to read and control an apparatus through RS232. Commands and data can be submitted and received through a simple serial connection. I use a dedicated Raspberry Pi Zero as a webserver. (Internet Of Things application)
I can read data, change it and store it again in the apparatus. So far so good.
Now I want the possibility to store this data, preferably on the raspberry (the server). This is quite simple with fopen/fwrite/fclose you might think... Yes but what I want is a button on my webpage, and when I click that button I want a save/load dialog popping up in which I can either choose a filename or make one up (for saving), and then store a string of (human-readable) hex bytes in a file on the server. I need a 2nd button ´load´ with which I can load such a string from a file on the server and send it to my apparatus.
I´d like a dedicated directory on the server in which I can navigate, all the rest should be blocked from reading/writing. (In /var/www/html/syx/ or /var/www/html/php/syx/, but both open for discussion)
The string of bytes is either 70 bytes long or (bulk dump save/load) 64*70 bytes long. These are settings of the apparatus that I´d like to save.
I´d like to stay on the page that calls the file-dialog if possible, opening a new page would destroy my variables (so I read). Is a pop-up possible?
Now javascript cannot touch the server, and I did not find a save/load dialog box popup for PHP. Is there a simple solution? I´d rather not use a database like SQL.
2nd best would be client-side storage instead of server-side storage, but that is also pretty hard, so it seems...
Regards
Arjen

You could use a Modal Dialog to open the "pop-up" and AJAX calls to run your PHP code to store your data. Take a look at W3.CSS Modal. It is simple to use and has a companion W3.JS lib for the AJAX part.

Related

dynamic scraping in nativescript? need to scrape page, with ability to click html button

do any package exist/ or process exist in native-script, for scraping dynamic content, means ability to click HTML button?
or
do i need to switch to cordova, for this ability?
From what I understand from your question (and subsequent comments) you want to (in a NativeScript app):
Load a website
Select a value in two select boxes
Press the submit button
The big question here is what happens when you press the submit button. Most probably this will result in a POST/PATCH being sent to a server.
The way of solving this would be:
Use the HTTP Module of NativeScript to download the web page.
Use Cheerio (or just plain regular expressions) to get the data needed to render the two select boxes and the URI to where to post the form.
Based on the data from (2) create and populate the two select boxes in NativeScript and save the POST uri somewhere.
Create an "on-submit" function which, based on the select boxes, creates the payload in the format the server wants it and then use HTTP Module again to post it to the URI.
To see the network traffic going on between the client (your browser) and the server, just open up the Networks Panel of your web browser, e.g. for Chrome or Firefox.
Looking at the network data should get tell you where to POST the data and how the payload should look like.
This can, of course, also be seen by looking at the code of the webpage.

Is it possible to generate a text or xml file from local storage data and save it in a folder?

I'm working on a website that is going to be offline. All the html files will be in a folder stored on the hard-disc. I've managed to do 90% of the work and the last part I have no idea of. Here is what it is:
I have stored a list of products in the localStorage as various strings under the keys - like buying objects and it goes to the cart, the cart objects are in localStorage. I created a page that showed the list of all the products in the localStorage. It can be cleared if the user clears them. Now I need to create a page where all the objects that was selected before, regardless of the localStorage being cleared, show as list in this page. You can take it as the page that lists products that have been ordered in the past, i.e even after the cart is cleared the products will show in the past-orders page.
I do not know any server side codes, I did everything using JavaScript as it was supposed to be a simple project, but I'm stuck at this part. So I cannot use PHP or anything to generate files or use a database to store stuff.
Here's what I thought but I don't think it works but wanted to confirm if it does or not:
Generate an XML file or a .txt file and store it in the drive and then clear the localStorage. But I don't think it is possible. If its possible just using JavaScript please point me in the right direction and I'll research and come up with something.
P.S. the website will be entirely offline what I mean is the users will never connect to the internet for this to work. Also there won't be a server or localhost.
Thank you!
The site is completely offline, but functionality is similar to an eCommerce site. You click a button and some content from the website stores in the localStorage and I have to call it in multiple pages, when a user clicks another button, localStorage clears but whatever was selected before must be available without localStorage. Hmmmm.. Consider a quiz site where you answer everything and when you take a new quiz, old scores will be stored somewhere else and it won't change when you take a new test.
Is it possible to attain this functionality without a server side script? It seems the final-targeted-users won't know how to install any softwares that can provide a localhost or a server or something like that.
Client-side, browser's JavaScript runtimes don't have local file system access excepting a very limited one when uploading files to a remote server, and anyway, browers won't give you direct access to the file.
You'll need some kind of server-side logic behind the scenes if you want full I/O in the local file system.
Perhaps you can take a look at NodeJS, a server-side JavaScript runtime that can work as lighty Web server on either small and large projects, and it has built-in server-side JavaScript I/O functions.
Otherwise, you're absolutely stuck in the client-side Web browser's sandbox limitations.
U can refer documents of knockoutjs and NodeJS.. That would probablky help... A far as my knowledger is concerned NodeJS does contain a way to handle your problem.

Python - Transferring session between two browsers

The issue:
I have written a ton of code (to automate some pretty laborious tasks online), and have used the mechanize library for Python to handle network requests. It is working very well, except now I have encountered a page which I need javascript functionality... mechanize does not handle javascript.
Proposed Solution:
I am using PyQt to write the GUI for this app, and it comes packaged with QtWebKit, which DOES handle javascript. I want to use QtWebKit to evaluate the javascript on the page that I am stuck on, and the easiest way of doing this would be to transfer my web session from mechanize over to QtWebKit.
I DO NOT want to use PhantomJS, Selenium, or QtWebKit for the entirety of my web requests; I 100% want to keep mechanize for this purpose. I'm wondering how I might be able to transfer my logged in session from mechanize to QtWebKit.
Would this work?
Transfer all cookies from mechanize to QtWebView
Transfer the values of all state variables (like _VIEWSTATE, etc.) from mechanize to QWebView (the page is an ASP.net page...)
Change the User-Agent header of QWebView to be identical to mechanize...
I don't really see how I could make the two "browsers" appear more identical to the server... would this work? Thanks!
Since nobody answered, I will post my work-around.
Basically, wanted to "transfer" my session from Mechanize (the python module) to the QtWebKits QWebView (PyQt4 module) because the vast majority of my project was automated headless, but I had encountered a road block where I had no choice but to have the user manually enter data into a possible resulting page (as the form was different each time depending on circumstances).
Instead of transferring sessions, I met this requirement by utilizing QWebViews javascript functionality. My method went like this:
Load page in Mechanize, and save the downloaded HTML to a local temporary file.
Load this local file in QWebView.
The user can now enter required data into the local copy of this page.
Locate the form fields on this page, and pull the data the user entered using javascript. You can do this by getting the main frame object for the page (QWebView->Page()->MainFrame()), and then evaluating javascript code to accomplish the above task (use evaluateJavaScript()).
Take the data you have extracted from the form fields, and use it to submit the form with the connection you still have open with mechanize.
That's it! A bit of a work-around, but it works none-the-less :\

I need to generate a JSON file in browser using (currently) javascript

I have a website that allows users to select a date range from a data set. At least, that's the goal.
What I would like to have happen: the user selects a date range, presses the submit button, and a script generates a JSON file which MATLAB reads to generate the graphs.
Any thoughts on resources to help accomplish this?
You'll need the script that fires off to be server side. JavaScript is client side and can not, in any way, access, modify, or otherwise create files on the client. You'll have to use a language like PHP to create the file.
Example using PHP:
Once the file is created, force a request on the client side to fire asking for the file. Set the PHP header to Content-Disposition: attachment; filename="< Place file name here>".
This will prompt the browser to launch a download prompt allowing the user to download the file.
Hope this helps.
You can use Downloadify, a small Flash component with a Javascript interface that allows you to create files on the client that a user can download. That's what I used in a similar situation.
You could also try and use Data URI but they are a quite limited and browser specific so some issues may arise.
These may be alternative solutions to the previous answer that suggested using server side code to generate the file.

How to handle large data sets for server-side simulation --> client browser

Sorry for the somewhat confusing title. Not sure really how to title this. My situation is this- I have an academic simulation tool, that I in the process of developing a web front-end for. While the C++-based simulator is computationally quite efficient (several hundredths to a tenth of a second runtime) for small systems, it can generate a significant (in web app terms) amount of data (~4-6mb).
Currently the setup is as follows-
User accesses index.html file. This page on the left side has an interactive form where the user can input simulation parameters. On the right side is a representation of the system they are creating, along with some greyed out tabs for various plots of the simulation data.
User clicks "Run simulation." This submits the requested sim parameters to a runSimulation.php file via an AJAX call. runSimulation.php creates an input file based on the submitted data, then runs the simulator using this input file. The simulator spits out 4-6mb of data in various output files.
Once the simulation is done running, the response to the browser is another javascript function which calls a file returnData.php. This php script packages the data in the output files as JSON data, returns the JSON data to the browser, then deletes the data files.
This response data is then fed to a few plotting objects in the browser's javascript, and the plot tabs become active. The user can then open and interact with the plotted data.
This setup is working OK, however I am running into two issues:
The return data is slow- 4-6mb of data coming back can take a while to load. (That data is being gzipped, which reduces its side considerably, but it still can take 20+ seconds on a slower connection)
The next goal is to allow the user to plot multiple simulation runs so that they can compare the results.
My thought is that I might want to keep the data files on the server, while the users session is active. This would enable the ability to only load up the data for the plot the user wants to view (and perhaps loading other data in the background as they view the results of the current plot). For the multiple runs, I can have multiple data sets sitting on the server, ready for the user to download if/when they are needed.
However, I have a big issue with this line of thinking- how do I recognize (in php) that the user has left the server, and delete the data? I don't want the users to take over the drive space on the machine. Any thoughts on best practices for this kind of web app?
For problem #1, you don't really have any options. You are already Gzip'ing the data, and using JSON, which is a relatively lightweight format. 4~6 MB of data is indeed a lot. BTW if you think PHP is taking too long to generate the data, you can use your C++ program to generate the data and serve it using PHP. You can use exec() to do that.
However, I am not sure how your simulations work, but Javascript is a Turing-complete language, so you could possibly generate some/most/all of this data on the client side (whatever makes more sense). In this case, you would save lots of bandwidth and decrease loading times significantly - but mind that JS can be really slow.
For problem #2, if you leave data on the server you'll need to keep track of active sessions (ie: when was the last time the user interacted with the server), and set a timeout that makes sense for your application. After the timeout, you can delete the data.
To keep track of interaction, you can use JS to check if a user is active (by sending heartbeats or something like that).

Categories