These are chat archives for esp8266/Arduino

12th
Jun 2018
Chris Dalby
@moose4621
Jun 12 2018 20:14
@ashthespy Thanks Ash for your time. I'm seems it is the decoding of the array at the client end that I seem unable to comprehend. I cannot find an example closely related to this situation that I am able to pick apart and use. I've read so many tutorials but here I am still with no idea how to pull apart the blob or uint8 array to use in the form.
Ash
@ashthespy
Jun 12 2018 21:45
@moose4621 let me see if I can dig up an example from my stuff
Ash
@ashthespy
Jun 12 2018 21:52
Here is a simple example
Chris Dalby
@moose4621
Jun 12 2018 21:53
@ashthespy Thanks Ash, but why don't I see the link?
Ash
@ashthespy
Jun 12 2018 21:54
I have a simple struct
struct RGBW {
        /*
           Construct a RgbwColor using R, G, B, W values (integers in the range of [0
           - (2^n)-1])
         */
        RGBW(uint32_t r, uint32_t g, uint32_t b, uint32_t w) :
                R(r), G(g), B(b), W(w){
        };


        /*
           Construct a RgbwColor using only HSI values
         */
        RGBW(const HSLW& color);

        RGBW(const HSLW& color, float w);
        /*
           For later init
         */
        RGBW()
        {
        };

        // a helper funtion to printf
        char * printRGBW(char* buff);
        // RGBW Members - in intin point
        uint32_t R;
        uint32_t G;
        uint32_t B;
        uint32_t W;
};
Sorry -- digging through all bits of code on a newly setup machine!
This is sent to the client with a straightforward webSocket.sendBIN(num, binRGBWArry,sizeof(LastRGBW));
On the client side :
$websocket('ws://192.168.4.1:81', {
    binaryType: 'arraybuffer'
});
/
dataStream.onMessage(function(message) {
    try { // Q&D check if msg is JSON or string
        res = JSON.parse(message.data);
    } catch (e) {
        res = message.data;
    }
})
This will give you binRGBW: 0x04 0x00 0x00 0x00 0x04 0x00 0x00 0x00 0x53 0x00 0x00 0x00 0x00 0x00 0x00 0x00
Ash
@ashthespy
Jun 12 2018 22:01
Since we know it's a uint32_t to begin with, we can cast it back with TypedArrays
This should get you started - I can whip up a better example tomorrow from my main machine if you are still having issues!
den har
@denman0000_gitlab
Jun 12 2018 22:04
Hi all .. I have an issue trying to access .js files from SPIFFS on esp8266 .. as far as i can tell the files get copied and the .html file containing the javascript and its links loads fine .. but viewing the source of the page and selecting the .js file pointed to renders the error NOT FOUND .. I would appreciate any pointers please
Chris Dalby
@moose4621
Jun 12 2018 22:05
Awesome. Thanks Ash. I am still a little unclear as to how each element of the array is referenced but I need to study the Typed Arrays link yet. Thank you so much.
Ash
@ashthespy
Jun 12 2018 22:05
Oh in mycase it's quite simple
        uint32_t R;
        uint32_t G;
        uint32_t B;
        uint32_t W;
Becomes binRGBW = new Uint32Array(res);
so Uint32Array(4) [ 4, 4, 83, 0 ]
Chris Dalby
@moose4621
Jun 12 2018 22:07
Is that server or client side?
Ash
@ashthespy
Jun 12 2018 22:07
All client side Js
Chris Dalby
@moose4621
Jun 12 2018 22:07
Ok great. thanks.
den har
@denman0000_gitlab
Jun 12 2018 22:08
Hi @Moose .. you replying to me ?
Ash
@ashthespy
Jun 12 2018 22:08
res = message.data; if (res.byteLength == 16){ // QandD RGB check binRGBW = new Uint32Array(res); console.log(binRGBW);} }
Chris Dalby
@moose4621
Jun 12 2018 22:09
@denman0000_gitlab Sorry no, I am not able to help you.
Ash
@ashthespy
Jun 12 2018 22:09
Meh doesn't want to format it for some reason.
but you get the idea right?
What does your struct look like? you can also manually unpack the data - I recall writing a module for this, but for node
den har
@denman0000_gitlab
Jun 12 2018 22:11
@ Moose .. thank you for the reply :-) ...hoping Someone can as I think it's just something small I'm missing either having setup the SPIFF to hold the .js and .min.js or there's some little trick that must be done in order for the client browser to be able to access the .js files
Ash
@ashthespy
Jun 12 2018 22:11
but it's quite trivial - you just traverse the bytearray and do your casts
Chris Dalby
@moose4621
Jun 12 2018 22:12
@ashthespy Yeah maybe. Sever side:
void sendSettings()
{
uint8_t payload[] = {0, 0};
payload[0] = setpointVariable;
payload[1] = targetGroundSpeed;
webSocket.broadcastBIN(payload, sizeof(payload));
}
Ash
@ashthespy
Jun 12 2018 22:14
Hmm that looks like just bytes directly right?
Chris Dalby
@moose4621
Jun 12 2018 22:14
@denman0000_gitlab Do you have something like this in your script

String formatBytes(size_t bytes) { // convert sizes in bytes to KB and MB
if (bytes < 1024) {
return String(bytes) + "B";
} else if (bytes < (1024 1024)) {
return String(bytes / 1024.0) + "KB";
} else if (bytes < (1024
1024 * 1024)) {
return String(bytes / 1024.0 / 1024.0) + "MB";
}
}

String getContentType(String filename) { // determine the filetype of a given filename, based on the extension
if (filename.endsWith(".html")) return "text/html";
else if (filename.endsWith(".css")) return "text/css";
else if (filename.endsWith(".js")) return "application/javascript";
else if (filename.endsWith(".ico")) return "image/x-icon";
else if (filename.endsWith(".gz")) return "application/x-gzip";
else if (filename.endsWith(".gif")) return "image/gif";
else if (filename.endsWith(".png")) return "image/png";
else if (filename.endsWith(".mp3")) return "audio/mpeg mp3";
return "text/plain";
}

@ashthespy Yes, just 3 digit values.
Ash
@ashthespy
Jun 12 2018 22:17
What does your js side dump look like?
Chris Dalby
@moose4621
Jun 12 2018 22:17
@ashthespy Actually they should be int.
Ash
@ashthespy
Jun 12 2018 22:17
It should just be an array buffer with the 3 values
two sorry
den har
@denman0000_gitlab
Jun 12 2018 22:18
@Moose no not at all .. Have seen those in example code but no idea that they are for .. thought it's only for when files are to be uploaded to the SPIFFS or when directory listing is requested from the SPIFFS
Chris Dalby
@moose4621
Jun 12 2018 22:19
@ashthespy if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
var e=document.getElementById("R").value=buffer[0];
var e=document.getElementById("G").value=buffer[1];
}
Ash
@ashthespy
Jun 12 2018 22:21
That probably gives you an undefined..
Chris Dalby
@moose4621
Jun 12 2018 22:22
@denman0000_gitlab That's about all I can offer. I am not the one to be giving help. Good luck.
Ash
@ashthespy
Jun 12 2018 22:22
var buffer = new Uint8Array(event.data) might work out better
but to be honest - Js isn't my strongest suit. I just go with with these guys say
den har
@denman0000_gitlab
Jun 12 2018 22:23

@moose4621 I have the following :
//SPIFFS LIBRARY

include <FS.h>

if (!SPIFFS.begin())
{
// Serious problem
Serial.println("SPIFFS Mount failed");
} else {
Serial.println("SPIFFS Mount succesfull");
}
and this .....
server.serveStatic("/dt", SPIFFS, "/dtpicker1.html");
which calls the html page containing the javascript which in turn points to the .js
like this:

<script type="text/javascript" src="jquery1124min.js"></script>

Chris Dalby
@moose4621
Jun 12 2018 22:23
@ashthespy Console dump
Server: Blob(2)size: 2type: ""proto: Blob
WebSocket.js:21 Server: calon
WebSocket.js:21 Server: caloff
Ash
@ashthespy
Jun 12 2018 22:25
Ah I see you have a blob..
den har
@denman0000_gitlab
Jun 12 2018 22:25
@moose4621 ..thank you kindly for the info .. will keep bashing on .. hopefully i can find a solution ... and in meantime will constinue to searchf ro help
Ash
@ashthespy
Jun 12 2018 22:26
try {binaryType:'arraybuffer'} when you init the websocket client
@denman0000_gitlab quick tip - try getting one of the simple examples off the webserver library working - then you can snip and tuck your code in there!
den har
@denman0000_gitlab
Jun 12 2018 22:32
@Ash .. none seem to have a .js usage example :(
@Ash and google info seems sparse to as most examples point to a CDN for their .js .. while I am trying to serve mine from the esp8266 SPIFFS
Chris Dalby
@moose4621
Jun 12 2018 22:34
@ashthespy I am also sending string messages. Would that interefere with them?
den har
@denman0000_gitlab
Jun 12 2018 22:34
@Ash .. looking now :-) will pingback . TY
Ash
@ashthespy
Jun 12 2018 22:35
nope - it's specifically sets only the binaryType
scroll up for my hacky test to check if it's binary or not ;-)
Chris Dalby
@moose4621
Jun 12 2018 22:38
@ashthespy I broke it.
var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
connection.onopen = function () {
connection.send('Connect ' + new Date());
connection.send("D");
connection.send('ping');
binaryType:'arraybuffer';
};
Uncaught SyntaxError: Invalid or unexpected token
2(index):42 Uncaught ReferenceError: sendRPM is not defined
at HTMLInputElement.oninput ((index):42)
oninput @ (index):42
Ash
@ashthespy
Jun 12 2018 22:40
Can you gist your JS - I have a few mins - can fix it for you
Chris Dalby
@moose4621
Jun 12 2018 22:43
Both if possible.
Ash
@ashthespy
Jun 12 2018 22:43
var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']); should be
var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino'], {binaryType:'arraybuffer'});
den har
@denman0000_gitlab
Jun 12 2018 22:45
@ashthespy do you think I need to add a read handler in the code perhaps ? Like the one in this file ? https://github.com/toblum/McLighting/blob/master/Arduino/McLighting/spiffs_webserver.h
@moose4621 .. you might have been spot on
Ash
@ashthespy
Jun 12 2018 22:46
@denman0000_gitlab yep
Chris Dalby
@moose4621
Jun 12 2018 22:47
@denman0000_gitlab Thats a first.
Ash
@ashthespy
Jun 12 2018 22:47
wait @moose4621 what does the ['arduino'] do over there?
Chris Dalby
@moose4621
Jun 12 2018 22:49
@ashthespy ?? Don't know. It was included in an example I copied.
Ash
@ashthespy
Jun 12 2018 22:51
Ah!
A quick google tells us it's the protocol
Chris Dalby
@moose4621
Jun 12 2018 23:25
@ashthespy If you need more context, the whole package is here. https://github.com/moose4621/Seeder-Controller
Ash
@ashthespy
Jun 12 2018 23:26
@moose4621 didn't it work?
it = var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino'], {binaryType:'arraybuffer'});
Chris Dalby
@moose4621
Jun 12 2018 23:29
Same result.
Server: Blob(2) {size: 2, type: ""}size: 2type: ""proto: Blob
WebSocket.js:21 Server: calon
WebSocket.js:21 Server: caloff
WebSocket.js:117 RPM: #a00000
WebSocket.js:117 RPM: #6400000
Ash
@ashthespy
Jun 12 2018 23:29
         if(event.data instanceof ArrayBuffer ){
      var buffer = new Uint8Array(event.data);
      console.log(“Received arraybuffer”);
      var e=document.getElementById("R").value=buffer[0];
      var e=document.getElementById("G").value=buffer[1];
}
Chris Dalby
@moose4621
Jun 12 2018 23:33
No. Does not do anything.
More from console.
Server: Blob(2) {size: 2, type: ""}size: 2type: ""proto: Blobsize: (...)slice: ƒ slice()type: (...)constructor: ƒ Blob()Symbol(Symbol.toStringTag): "Blob"get size: ƒ ()get type: ƒ ()proto: Object
WebSocket.js:21 Server: calon
WebSocket.js:21 Server: caloff
Ash
@ashthespy
Jun 12 2018 23:35
Why do you still have blobs and not ArrayBuffers/
Blobs are normally meant for files I believe.
den har
@denman0000_gitlab
Jun 12 2018 23:36
@ashthespy Hi again .. I tried that example ..https://github.com/esp8266/Arduino/blob/master/libraries/ESP8266WebServer/examples/FSBrowser/FSBrowser.ino.... it shows fancy graphs etc and a file viewer and uploader which doesn't function at all after selection is made .. I believe I did perform all the steps like upload the data directory suggested and so forth .. still can't identify what is needed to expose the .js files to the html to use
Ash
@ashthespy
Jun 12 2018 23:38
@moose4621 to confirm - you pass the binaryType option to your websocket init?
Chris Dalby
@moose4621
Jun 12 2018 23:39
In the WebSockets.js Yes.
Ash
@ashthespy
Jun 12 2018 23:41
try a console.log(connection.binaryType); after your var connection blah blah line
I reckon it will spit out blob
@denman0000_gitlab to be frank, I tried spiffs js once long ago and decided to self host my stuff in the local network - so don't have much experience!
Chris Dalby
@moose4621
Jun 12 2018 23:43
@ashthespy Didn't seem any different. blob
WebSocket.js:22 Server: Blob(2) {size: 2, type: ""}size: 2type: ""proto: Blobsize: (...)slice: ƒ slice()type: (...)constructor: ƒ Blob()Symbol(Symbol.toStringTag): "Blob"get size: ƒ ()get type: ƒ ()proto: Object
WebSocket.js:22 Server: calon
WebSocket.js:22 Server: caloff
@denman0000_gitlab Try this example. worked for me.
Ash
@ashthespy
Jun 12 2018 23:45
@moose4621 what does your var connection line look like now?
Chris Dalby
@moose4621
Jun 12 2018 23:45
var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino'], {binaryType:'arraybuffer'});
console.log(connection.binaryType);
Ash
@ashthespy
Jun 12 2018 23:46
var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
connection.binaryType = 'arraybuffer';
connection.onopen = function () {
    connection.send('Connect ' + new Date());
    connection.send("D");
    connection.send('ping');
};
Chris Dalby
@moose4621
Jun 12 2018 23:47
Server: ArrayBuffer(2) {}
WebSocket.js:71 The specified value "undefined" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
connection.onmessage @ WebSocket.js:71
WebSocket.js:72 The specified value "undefined" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
connection.onmessage @ WebSocket.js:72
WebSocket.js:22 Server: calon
WebSocket.js:22 Server: caloff
den har
@denman0000_gitlab
Jun 12 2018 23:49
@ashthespy not much in terms of example out there .. and quite a few are a little convoluted in a sense ..what happened to KISS :-)
Chris Dalby
@moose4621
Jun 12 2018 23:51
@denman0000_gitlab That link I gave you has many good exmples of spiffs and websockets, etc.
Ash
@ashthespy
Jun 12 2018 23:51
@moose4621 Yay - now your halfway there!
@denman0000_gitlab Hmm - check out @moose4621 's link looks quite detailed with explanations!
den har
@denman0000_gitlab
Jun 12 2018 23:51
@moose4621 ..seems we have travelled along the same roads/paths .. nice link that one .. did pick up a bit from there .. the websockt stuff looks somewhat interesting indeed.. again there could have been a few simpler examples .. a few pieces of the puzzle missing re websockets
@ashthespy I concur .. it's a great link :-) definitely good examples
Ash
@ashthespy
Jun 12 2018 23:52
@denman0000_gitlab I disagree - we are in the information age today! Google + places like this makes things much easier then just a few years ago! :-)
den har
@denman0000_gitlab
Jun 12 2018 23:52
what I couldn't figure out re websockets is how to have a few of them in one shot
@ash .. Agreed my man :-) and even information overload .. but don't you find certain bleeding edge stuff is missing explanation sometimes ?
Ash
@ashthespy
Jun 12 2018 23:54
What do you mean @denman0000_gitlab - you can have multiple ESP's all running their servers -- and connect to all of them with one client side Js script!
den har
@denman0000_gitlab
Jun 12 2018 23:54
and would we be here if the info was easy to put together ? hehe
Ash
@ashthespy
Jun 12 2018 23:54
Hmm @denman0000_gitlab for sure! especially given my slow absorption rate!!
den har
@denman0000_gitlab
Jun 12 2018 23:55
hahaha I feel like cotton wo0l sometimes .. theres just sooo much cool stuff and info .. but putting it all together ..arrrgh and to try beat the clock and fit life in tooo :-( no easy task
Chris Dalby
@moose4621
Jun 12 2018 23:55
I have to go and earn a living unfortunately.
den har
@denman0000_gitlab
Jun 12 2018 23:55
we're now travelling at the speed of thought :-)
agreed @moose4621
good luck with your mission @moose4621
@moose4621 see you around here sometime and you too @ashthespy
Ash
@ashthespy
Jun 12 2018 23:57
Cya!
den har
@denman0000_gitlab
Jun 12 2018 23:57
@moose4621 and @ashthespy I totally appreciate the help guys :-) you rock
Chris Dalby
@moose4621
Jun 12 2018 23:57
@denman0000_gitlab Good luck.
den har
@denman0000_gitlab
Jun 12 2018 23:57
i'm trying a few more uploads and tweaks lets see
thanks moose :-)
Chris Dalby
@moose4621
Jun 12 2018 23:58
@ashthespy I have to leave it there for now. Maybe back in about 8 hours.
den har
@denman0000_gitlab
Jun 12 2018 23:59
Now going to set path to the .js for each ,js and see if that works
server.serveStatic("/jquery1124min.js", SPIFFS, "/jquery1124min.js");
Ash
@ashthespy
Jun 12 2018 23:59
I would have slept and awoken by then!
den har
@denman0000_gitlab
Jun 12 2018 23:59
bwahahaa power nap ?
Chris Dalby
@moose4621
Jun 12 2018 23:59
OK. Is it worth branching the Git?