STM32 Web server - How html file in "SPI Flash" read "image" in flash - webserver

I'm working on STM32. I'm trying to build a web server based on STM32. First, I implement a file system on SPI flash and write it to the browser with LWIP Libraries. Everything work fine with a html file without any "src". Now i want to add images on web page which means i need to have images on my SPI flash as well. I guess i should format the image first before i store it? and if it is stored in SPI flash. how html use the image? anyone has idea about it?
if ((buflen >=5) && (strncmp(buf, "GET /", 5) == 0))
{
FileNodeId = Find_File_Node(WEBPAGE);
if(Load_File_Table() != VAT_SUCCESS) return VAT_UNKNOWN;
else{
for(int i = 1;i <= File_Table[FileNodeId].numSector;i++){
READSector(WEBPAGE,&webbuf[0],i);
int html_length=strlen(&webbuf[0]);
netconn_write(conn,&webbuf[0], html_length, NETCONN_COPY);
memset(&webbuf[0],0,4080);
}
}
netbuf_delete(inbuf);
}
This is how I write my html page to the web browser with LWIP Lib. And the html is stored in link listed flash file system.

Nothing special.
When browser load html page it parse whole tree of objects. Objects of images presents with url to image.
<img src="url_path/image_name.png"/>
Then browser load each image in separete request. So your server will get request with image path for each one and must return right http package with image without any additional formats. As you return image, your package must content corresponding headers:
Content-Length: image_len_in_bytes
Content-Type: image_media_type
There image_media_type can be image/gif, image/png, image/jpeg, image/bmp, image/x-icon or may be another if you will use.
So you have enough code for send any images, just change content type.

Related

Wrong encoding when load html stream from c# webbrowser to htmlagilitypack

I have a winform app to show a html web page. When the user click a button, I want to get some Nodes from html code. In my webBrowser every is fine. When I try to decode the class from a specific node witch the encoding is in Greek, wrong encoding appears.
Code:
HtmlAgilityPack.HtmlDocument document = new HtmlAgilityPack.HtmlDocument();
document.Load(webBrowser1.DocumentStream);
var ShopName = ShopData.SelectNodes(".//div[#class='shop cf']").ToList()[0].SelectNodes(".//div[#class='shop-name']").ToList()[0].InnerText;
I had tried to change Web Browser Encoding (WebBrowser1_DocumentCompleted). I had also tried to change the HtmlAgilityPack Load, by adding greek encoding
Any Ideas?
When you document.load(), you can ask it to detect the encoding automatically or supply the encoding:
document.load(webBrowser1.DocumentStream, true);
or
document.load(webBrowser1.DocumentStream, Encoding.UTF8);

Downloading a PDF from an HTTP POST call

Here is what I'm trying to accomplish (IE 9+, Chrome, FF, Safari) without the use of JQuery:
Make an http POST call to my API endpoint with some data
Server dynamically generates a PDF and returns the PDF as a binary attachment
Browser does default download behavior and downloads the PDF without refreshing the page
Basically I want to get the behavior similar to <a href="test.pdf"> but for a dynamically generated PDF after making a POST call instead of a GET call.
I've tried lots of different things, but they either didn't work cross browser (such as using $window.open() with a blob URL), were blocked by popup blockers (any $window call outside of the click scope), or didn't cause the PDF to be automatically downloaded (any $http POST solution).
I finally found one solution that seems to work which creates a form using javascript and submits it.
var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', myurl);
var params = {foo: 'bar'};
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement('input');
hiddenField.setAttribute('type', 'hidden');
hiddenField.setAttribute('name', key);
hiddenField.setAttribute('value', params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
This successfully accomplishes the 3 steps above, but now I've run into a new problem. There is no way to determine when the PDF file has been successfully downloaded. This is preventing me from removing the form and from displaying a friendly 'Please wait...' message to the user. There is also the additional problem that submitting the form cancels any outstanding ajax requests as well which isn't optimal.
I have full control over both the server and the client, so what's the best way to fix this? I don't want to have to save the PDF on the server so passing back a url and doing a second GET request from the client won't work in this case. Thanks!
You can make an server response behave as a download by applying some HTTP headers:
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="SOME_NAME.pdf"
Content-Transfer-Encoding: binary
If you're initiating the download through JS only (instead of having the user click a download link), then check out this question for some caveats.
Update: Syntax for POST
Better Update: Form solution with iframe target
You can detect that your server-side script has finished (and subsequently, that the download is ready to begin) by having the form target an iframe. I believe this should also fix the issue of cancelling outstanding Ajax calls, but I'm not certain. Here is the code to do it (just stick this into your code example after the for loop and before document.body.appendChild(form);):
var frame = document.createElement('iframe');
frame.setAttribute('id', 'pdfFrame');
frame.onload = function(){
document.body.removeChild(form);
document.body.removeChild(frame);
alert('Download ready!');
}
document.body.appendChild(frame);
form.setAttribute('target', 'pdfFrame');
You can replace my alert with your code to remove the 'Please wait...'.

GWT:How to generate pdf save/open window?

I am using GWT2.4 version in my application.In this I application I have created Form using GWT control (like textbox,textaera).
I have also created preview of form.In that preview I have button of pdf generation.
Now I want to create behavior to deal with pdf link same as browsers(Mozilla/chrome).
For example in Mozilla on click of pdf link it asks for either save or open in a pop up window.
While debugging I found a jar name iText which can be used to create pdf, I want to implement browsers behavior in this also.
Please help me out.
Thanks in advance.
Read file contents into byte array.
Then do request for servlet or service, for eg. this way:
Window.Location.replace("rest/downloadPdf");
That Service should return Response with the right content type:
#Path("downloadPdf")
#GET
#Produces({"application/pdf"})
#Consumes(MediaType.TEXT_PLAIN)
public Response downloadPdf() throws Exception {
byte[] bytes = getYourPDFContents();
return Response
.ok(bytes, MediaType.APPLICATION_OCTET_STREAM)
.header("Content-Disposition", "attachment; filename=\"yourFile.pdf\"")
.build();
}
Browser will then show save as dialog.
That's example of Service, you must include Jersey library into your project to be able to use method like I've wrote above .

GWT dynamic data in new browser window at client side

I've got GWT module where I do some stuff and I have search results - doesn't matter in which form. Now after searching, and clicking on for example "Export to HTML" button,I would like to create new html page (for example from client side code by creating simple string which contains only listed results of searching list of results ) and open it in new browser window. I know that there is Window.open(...) method, but there I must specify url which i don't have. I want to create this new html page by client side - without server inference (I don't want to create some resource on server side and then paste url to this resource to client side). Is there any possibility to achieve this? If there is no option, other method which would satisfy me, is to open standard dialog box for saving, which will allow to save results in a html file.
Thanks for helps.
Kind regards.
Here's the code I use to print:
native void openPrintWindow(String contents) /*-{
var printWindow = window.open("", "PrintWin");
if (printWindow && printWindow.top) {
printWindow.document.write(contents);
printWindow.print();
printWindow.close();
} else {
alert("The print feature works by opening a popup window, but our popup window was blocked by your browser. If you can disable the blocker temporarily, you'll be able to print here. Sorry!");
}
}-*/;
Seems like you could adapt it for your purposes with some simple rewording and by removing the call to print()! The contents variable just holds flat HTML. There are no trips to the server.
openPrintWindow("<h1>Search Results</h1><ol><li>etc...");
The method of opening new window from client js which allows user to save that generated content from browser's save as menu is data:url scheme, content written to opened page via println usualy not saved. But data:url works only in morden browsers. And the content written should be quite small to fit browser's url length resteiction.
See example from this article http://en.wikipedia.org/wiki/Data_URI_scheme#JavaScript

How to handle file uploads to a dedicated image server?

I got a webserver with a running application. There's a webpage with a form: some text data and a file upload field. Now, what I would like to have is it working like this:
The file is sent to the dedicated server, diffrent then the one application is running on. The server should return some kind of path (or anything that identifies the uploaded and saved file and allows to create an URL). Then, both this path and user-filled data should be submitted to the webserver with application, for any kind of database storage.
Problem is, there are 2 diffrent servers, so I can't upload the file with javascript, can I? Another way would be just to use iframe and put the upload form in there - but then I think I can't access the result of the upload (still inside the iframe) with javascript to pass the file path to my main server.
I could also just upload the file to same server my application is running on and then just rsync it to the other one - but I'd like to avoid it if I can, trying to minimalize the traffic actually :)
How do you handle such thing in your applications?
If you used an iframe, you could submit the upload form to the dedicated image server, and in the case of a successful result, have it in turn load a page from the original server with the info (eg. image path) "passed along" as a GET parameter.
POST to dedicated server, server stores image and calls back to web server through a web service or other to give it any info required.