I'm working on an embedded ESP32 design using one of the web server examples included in the esp-idf examples. I'm able to get the device into soft AP mode and display a simple web page. Now that I have that working, I'm trying to build a page with a graphic.
I'm using the Linux hex tool "xxd -i " to convert the HTML file into a hex dump array for the C include file. It works fine if the document is just HTML, but I'm stuck on trying to do this with an image.
I went as far as using xxd on both the HTML file and the image file and using "netconn_write" to write out both files. I also tried combining them into a single hex dump file. At this point I'm not sure how to proceed, any help is greatly appreciated.
You can use this utility to embed any number of binary files in your executable. Don't forget to set a correct mime type. Also, if the file is big, you have to rate limit the sending, which might become a non-trivial task.
Therefore I suggest to use a filesystem and an embedded web server to do the job. Take a look at https://github.com/cesanta/mongoose-os/tree/master/fw/examples/mjs_hello (disclaimer: I am one of the developers). It'll take you few minutes to get a firmware with working HTTP server, ready for you prototypes.
You can use de directive EMBED_FILES directly in CMakeLists.txt. For example, to add the file favicon.jpg image, in my CMakeLists.txt, in the same directory of main.c:
idf_component_register(SRCS "main.c"
INCLUDE_DIRS "."
EMBED_FILES "favicon.jpg")
And somewhere in the main.c:
/* The favicon */
static esp_err_t favicon_handler(httpd_req_t *req)
{
extern const char favicon_start[] asm("_binary_favicon_jpg_start");
extern const char favicon_end[] asm("_binary_favicon_jpg_end");
size_t favicon_len = favicon_end - favicon_start;
httpd_resp_set_type(req, "image/jpeg");
httpd_resp_send(req, favicon_start, favicon_len);
return ESP_OK;
}
static const httpd_uri_t favicon_uri = {
.uri = "/favicon.ico",
.method = HTTP_GET,
.handler = favicon_handler,
.user_ctx = NULL
};
You can add as many files you need in this way, text, html, json, etc... (respecting device memory, of course).
Related
I have a personal website that's all static html.
It works perfectly for my needs, except for one tiny thing.
I want to dynamically change a single word on a single page: the name of the current map for a game server I'm running.
I can easily run a cron job to dump the name of the map into a file in the site's html directory, call it mapname.txt. This file contains a single line of text, the name of the map.
How would I update, say, game.html to include this map name?
I would very strongly prefer to not pull in some massive framework, or something like php or javascript to accomplish this.
I want the lightest weight solution possible. Using sed is an option, although definitely a hacky one. What's the tiniest step up from static html?
If you say "dynamically", do you mean:
If the information changes ...
A) the user should see it after they have re-loaded the page?
B) the page should update without the need to reload?
For A, you can use PHP (or any other language your server supports) to read the data from the file and print it into the web page. This will happen on server side.
For B, you can use JS that queries the file and updates the HTML. This will happen on client side.
To change text there are a few way though only two appropriate methods.
First is using textContent:
document.getElementById('example').textContent = 'some example text';
Secondly is the older nodeValue however it's a bit more tricky since you have to specify the exact textNode (e.g. .firstChild):
document.getElementById('example').firstChild.nodevalue = 'some example text';
You're 100% on the mark about not using frameworks or libraries, almost everything exists without the suck.
I'm not going to test this though this is a very stripped down version of my ajax function from my web platform. Some people might scream about the Fetch API however the syntax is an absolute mess. I recommend figuring out how to standardize this function so you can use it for everything instead of making copies of the code for every instance. Mine supports both GET and POST requests.
function ajax(method, url, param_id_container_pos, id_container)
{
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.timeout = 8000;
xhr.open(method,url,true);
xhr.send(null);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
if (xhr.getResponseHeader('content-type'))
{
var type = xhr.getResponseHeader('content-type').split('/')[1];
if (type.indexOf(';') >- 1) {type = type.split(';')[0];}
}
else {var type = 'xml';}//Best guess for now.
console.log(type,xhr);
console.log(xhr.responseText);
//console.log(type,xhr.responseXML);
//document.getElementById('example').textContent = xhr.responseText;
}
}
}
You're also going to have to ensure that the url is set to an absolute path. I use path variable in my platform (see my profile for the link, wildly clean and organized code).
There are plenty of ways to make this function reusable and I highly recommend doing that. For now use the last non-curley-bracket line to update your line of text.
I use my NODEMCU ESP8266 to control my LED strip behind my couch. I have a web-server that posts the HTML with server.send() in every loop. Now I want the website to show the current state of the led stripe, but I can't just integrate the variables into the HTML code of the website because the server is obviously going to treat it like HTML instead of actually reading the variables.
//a variable I use for the LEDs
int colorCode;
// thats in the handler function
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
// thats the website
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE HTML>
<html lang="de">
...website...
</html>
)=====";
I just need a small hint as to how I can integrate variables like int colorCode into the HTML before it gets sent to the server with server.send().
Similar has been done by, e.g., the OpenEVSE hardware project, which builds its JSON responses in Arduino strings (String JSON):
json += "{";
json += "\"rssi\":"+String(WiFi.RSSI(i));
json += ",\"hidden\":"+String(WiFi.isHidden(i)?"true":"false");
json += "}";
You could do the same as long as send() receives the right type of string. It would involve dropping the PROGMEM, probably the const, and likely using a high-level string class for convenience. Note that there are several reasons OpenEVSE chooses to keep the HTML static:
AJAX lets their app be more responsive than one that must be reloaded every page, and
an ESP8266's limited memory goes much further when it does not need to build a whole webpage.
Practically speaking: program memory can store large strings, but they will not be dynamic. If the string is not known at compile time, then it will have to be assembled at run time, and RAM will be used to keep track of it. Building the webpage in a string makes sense as long as the page is small and the variables few.
My goal is to convert a C++ program in to a .pexe file in order to execute it later on a remote computer. The .pexe file will contain some mathematical formulas or functions to be calculated on a remote computer, so I’ll be basically using the computational power of the remote computer. For all this I’ll be using the nacl_sdk with the Pepper library and I will be grateful if someone could clarify some things for me:
Is it possible to save the outputs of the executed .pexe file on the remote computer in to a file, if it’s possible then how? Which file formats are supported?
Is it possible to send the outputs of the executed .pexe file on the remote computer automatically to the host computer, if it’s possible then how?
Do I have to install anything for that to work on the remote computer?
Any suggestion will be appreciated.
From what I've tried it seems like you can't capture the stuff that your pexe writes to stdout - it just goes to the stdout of the browser (it took me hours to realize that it does go somewhere - I followed a bad tutorial that had me believe the pexes stdout was going to be posted to the javascript side and was wondering why it "did nothing").
I currently work on porting my stuff to .pexe also, and it turned out to be quite simple, but that has to do with the way I write my programs:
I write my (C++) programs such that all code-parts read inputs only from an std::istream object and write their outputs to some std::ostream object. Then I just pass std::cin and std::cout to the top-level call and can use the program interactively in the shell. But then I can easily swap out the top-level call to use an std::ifstream and std::ofstream to use the program for batch-processing (without pipes from cat and redirecting to files, which can be troublesome under some circumstances).
Since I write my programs like that, I can just implement the message handler like
class foo : public pp::Instance {
... ctor, dtor,...
virtual void HandleMessage(const pp::Var& msg) override {
std::stringstream i, o;
i << msg.AsString();
toplevelCall(i,o);
PostMessage(o.str());
}
};
so the data I get from the browser is put into a stringstream, which the rest of the code can use for inputs. It gets another stringstream where the rest of the code can write its outputs to. And then I just send that output back to the browser. (Downside is you have to wait for the program to finish before you get to see the result - you could derive a class from ostream and have the << operator post to the browser directly... nacl should come with a class that does that - I don't know if it actually does...)
On the html/js side, you can then have a textarea and a pre (which I like to call stdin and stdout ;-) ) and a button which posts the content of the textarea to the pexe - And have an eventhandler that writes the messages from the pexe to the pre like this
<embed id='pnacl' type='application/x-pnacl' src='manifest.nmf' width='0' height='0'/>
<textarea id="stdin">Type your input here...</textarea>
<pre id='stdout' width='80' height='25'></pre>
<script>
var pnacl = document.getElementById('pnacl');
var stdout = document.getElementById('stdout');
var stdin = document.getElementById('stdin');
pnacl.addEventListener('message', function(ev){stdout.textContent += ev.data;});
</script>
<button onclick="pnacl.postMessage(stdin.value);">Submit</button>
Congratulations! Your program now runs in the browser!
I am not through with porting my compilers, but it seems like this would even work for stuff that uses flex & bison (you only have to copy FlexLexer.h to the include directory of the pnacl sdk and ignore the warnings about the "register" storage location specifier :-)
Are you using the .pexe in a browser? That's the usual case.
I recommend using nacl_io to emulate POSIX in the browser (also look at file_io. This will allow you to save files locally, retrieve them, in any format you fancy.
To send the output use the browser's usual capabilities such as XMLHttpRequest. You need PNaCl to talk to JavaScript for this, you may want to look at some of the examples.
A regular web server will do, it really depends on what you're doing.
I try to import a local .json-file using d3.json().
The file filename.json is stored in the same folder as my html file.
Yet the (json)-parameter is null.
d3.json("filename.json", function(json) {
root = json;
root.x0 = h / 2;
root.y0 = 0;});
. . .
}
My code is basically the same as in this d3.js example
If you're running in a browser, you cannot load local files.
But it's fairly easy to run a dev server, on the commandline, simply cd into the directory with your files, then:
python -m SimpleHTTPServer
(or python -m http.server using python 3)
Now in your browser, go to localhost:3000 (or :8000 or whatever is shown on the commandline).
The following used to work in older versions of d3:
var json = {"my": "json"};
d3.json(json, function(json) {
root = json;
root.x0 = h / 2;
root.y0 = 0;
});
In version d3.v5, you should do it as
d3.json("file.json").then(function(data){ console.log(data)});
Similarly, with csv and other file formats.
You can find more details at https://github.com/d3/d3/blob/master/CHANGES.md
Adding to the previous answers it's simpler to use an HTTP server provided by most Linux/ Mac machines (just by having python installed).
Run the following command in the root of your project
python -m SimpleHTTPServer
Then instead of accessing file://.....index.html open your browser on http://localhost:8080 or the port provided by running the server. This way will make the browser fetch all the files in your project without being blocked.
http://bl.ocks.org/eyaler/10586116
Refer to this code, this is reading from a file and creating a graph.
I also had the same problem, but later I figured out that the problem was in the json file I was using(an extra comma). If you are getting null here try printing the error you are getting, like this may be.
d3.json("filename.json", function(error, graph) {
alert(error)
})
This is working in firefox, in chrome somehow its not printing the error.
Loading a local csv or json file with (d3)js is not safe to do. They prevent you from doing it. There are some solutions to get it working though. The following line basically does not work (csv or json) because it is a local import:
d3.csv("path_to_your_csv", function(data) {console.log(data) });
Solution 1:
Disable the security in your browser
Different browsers have different security setting that you can disable. This solution can work and you can load your files. Disabling is however not advisable. It will make you vulnerable for all kind of threads. On the other hand, who is going to use your software if you tell them to manually disable the security?
Disable the security in Chrome:
--disable-web-security
--allow-file-access-from-files
Solution 2:
Load your csv/json file from a website.
This may seem like a weird solution but it will work. It is an easy fix but can be unpractical though. See here for an example. Check out the page-source. This is the idea:
d3.csv("https://path_to_your_csv", function(data) {console.log(data) });
Solution 3:
Start you own browser, with e.g. Python.
Such a browser does not include all kind of security checks. This may be a solution when you experiment with your code on your own machine. In many cases, this may not be the solution when you have users. This example will serve HTTP on port 8888 unless it is already taken:
python -m http.server 8888
python -m SimpleHTTPServer 8888 &
Open the (Chrome) browser address bar and type the underneath. This will open the index.html. In case you have a different name, type the path to that local HTML page.
localhost:8888
Solution 4:
Use local-host and CORS
You may can use local-host and CORS but the approach is not user-friendly coz setting up this, may not be so straightforward.
Solution 5:
Embed your data in the HTML file
I like this solution the most. Instead of loading your csv, you can write a script that embeds your data directly in the html. This will allow users use their favorite browser, and there are no security issues. This solution may not be so elegant because your html file can grow very hard depending on your data but it will work though. See here for an example. Check out the page-source.
Remove this line:
d3.csv("path_to_your_csv", function(data) { })
Replace with this:
var data =
[
$DATA_COMES_HERE$
]
You can't readily read local files, at least not in Chrome, and possibly not in other browsers either.
The simplest workaround is to simply include your JSON data in your script file and then simply get rid of your d3.json call and keep the code in the callback you pass to it.
Your code would then look like this:
json = { ... };
root = json;
root.x0 = h / 2;
root.y0 = 0;
...
I have used this
d3.json("graph.json", function(error, xyz) {
if (error) throw error;
// the rest of my d3 graph code here
}
so you can refer to your json file by using the variable xyz and graph is the name of my local json file
Use resource as local variable
var filename = {x0:0,y0:0};
//you can change different name for the function than json
d3.json = (x,cb)=>cb.call(null,x);
d3.json(filename, function(json) {
root = json;
root.x0 = h / 2;
root.y0 = 0;});
//...
}
I have no idea how to achieve this, but I have a HTML form, with several different elements in it.
For testing, right now, all I would like to do is write a piece of C code that will take anything that is submitted and print this out on the screen.
I can write my own parsing code - I just cannot work out how to get the form data to print directly to the screen.
Thanks in advance.
Assuming you have a web server configured to allow you to do CGI, your HTML form needs to be written to either GET or POST the form data to the CGI script. You can then implement a CGI script in C to process the form data.
As a starter CGI script, you can simply echo whatever is provided in the input as the output.
int main () {
int c;
puts("Content-type: text/plain");
puts("Connection: close");
puts("");
while ((c = getchar()) != EOF) {
putchar(c);
}
return 0;
}
You need an HTTP server, with settings that let you run CGI scripts. This could be a server installed locally in your computer, using e.g. XAMPP, or it could be a web server that you have access to.
Then you will write a C program that uses CGI conventions for I/O. As output, it should write a complete HTML document with accompanying HTTP headers. You will need to compile the program into an executable, upload the executable on the HTTP server, and put the URL of the executable into the action attribute of the form.
For details etc., check out Getting Started with CGI Programming in C.
Here's an example of a form echoing script in C, which you might find helpful in terms of responding to both GET and POST methods, parsing the query string or input, etc:
http://www.paulgriffiths.net/program/c/formecho.php