Use SPIFFS for funny stuff - JavaScript as an example

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
User avatar
moelski
Normal user
Posts: 161
Joined: 31 Aug 2016, 06:33
Location: Germany - NRW
Contact:

Use SPIFFS for funny stuff - JavaScript as an example

#1 Post by moelski » 29 Sep 2016, 20:30

Hi @all,

tozett asked if I can post some notes about the way I´m using SPIFFS in my WLAN Candle project.
Ok here it is - and I know it´s still a little bit "rough" but works like a charme 8-)

Ok let my explain my first thoughts about this ... For my candle I need a color picker to choose the candle color.
And hey there is a file storage and the webserver can handle the files ... Why not use it directly ...
So I placed 2 files in SPIFFS - one webpage with HTML sample code for the color picker and the color picker JavaScript file.
And it works without any problems. HTML calls the Javascript and all is working fine.

So let´s try to use this in ESPEasy directly - or let me say within a plugin PLUGIN_WEBFORM_LOAD call.
First thing we have to ensure is that the javascript file is included in the HTML header. So in the webserver.ino there is a function
called "addHeader". We change the initial string a little bit and we are done:

Code: Select all

  str += F("<script language=\"javascript\"><!--\n");
  str += F("function dept_onchange(frmselect) {frmselect.submit();}\n");
  str += F("//--></script>\n");
  str += F("<script src=\"jscolor.min.js\"></script>\n");
  str += F("<head><title>");
  str += Settings.Name;
  str += F("</title>");

jscolor.min.js is the javascript file for the color picker and it is simply placed in the SPIFFS.
You can use the upload function from ESPEasy to get the file there. Just call http://<IP-ESPEASY>/upoload .

And here is the drawback at the moment ... the js file is included in every webpage - even those where it is not needed.
So there are 2 solutions for that I have to check.
1) try to include the js file in the PLUGIN_WEBFORM_LOAD part.
2) add some flag to addHeader function to include the js file only on device config pages.
Maybe both will work - I have to check that.

Let´s move to the plugin where you want to use the JS file ...
As I said before you have to add some code in the PLUGIN_WEBFORM_LOAD call:

Code: Select all

        string += F("<TR><TD>Color<TD><input class=\"jscolor {onFineChange:'update(this)'}\" value='");
        string += hexvalue;
        string += F("'>");

        string += F("<script script type='text/javascript'>");
        string += F("function update(picker) {");
        string += F("    document.getElementById('plugin_102_red').value = Math.round(picker.rgb[0]);");
        string += F("    document.getElementById('plugin_102_green').value = Math.round(picker.rgb[1]);");
        string += F("    document.getElementById('plugin_102_blue').value = Math.round(picker.rgb[2]);");
        string += F("}");
        string += F("</script>");
This is just included to the normal HTML stuff you can find there for config.
And that´s all :P

Conclusion
For me personal SPIFFS is a great enrichment for ESPEasy. It works flawless for the last days - no problems at all.
And there are 3MB of storage for extra data - like JavaScript Addons.
It´s not the fastest data storage but I think it´s ok. In case of JavaScript you can use the minified version to reduce filesize.

I hope this helps some people ... Feel free to give me hints or questions about the topic :)

So long ...
Dominik
Attachments
Color Picker in action with JavaScript file from SPIFFS
Color Picker in action with JavaScript file from SPIFFS
IMG-20160920-WA0001.jpg (75.21 KiB) Viewed 17719 times
regards
Dominik

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#2 Post by tozett » 30 Sep 2016, 11:20

i fiddled with SPIFFS and now (without ESPeasy) i have some code-snippets to upload/delete files on SPIFFS via browser/client.
also i server .html-pages from SPIFFS, if there is one, else call some routines (like in ESPeasy).
i loaded up stylesheet and fonts to use bootstrap, makes easy to have shiny web-gui.

i fiddle ajax-mini into my testpages from SPIFFS, to get only specific data from the esp.
this works.

i am a programmer by copy-n-paste, maybe someone with more experience will take the snippet to a working SPIFFS plugin for esp?
i could be an alternative for some pages of the espeasy and maybe a good start to use SPIFFS/webserver more?

i am starting to get a little bit deeper into easy modern web-gui:
may a startpoint to take over to ESPeasy? i will give it a try...
http://www.w3schools.com/bootstrap/default.asp

to interest some people, may worth seen what is possible?
https://github.com/esp8266/Arduino/issu ... -214698254
Attachments
9e214f52-0bab-11e6-9de4-d8205e94cd62[1].png
9e214f52-0bab-11e6-9de4-d8205e94cd62[1].png (72.67 KiB) Viewed 17693 times
Last edited by tozett on 30 Sep 2016, 12:22, edited 1 time in total.

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#3 Post by tozett » 30 Sep 2016, 11:30

moelski wrote: tozett asked if I can post some notes about the way I´m using SPIFFS in my WLAN Candle project.
hi dominik,
i had some troubles with neopixel-libs on the espeasy, so i am interested in the rest of your code, specially wich LED (ws2812?) and library you used. (did not found it on the playground?) i had _no_ touble with the latest http://fastled.io/ , worked smoothy, has its own non-blocking delay (?!), and ran fine in my testing.

may there is a chance, you show more of your wifi-Candle?
:mrgreen:

User avatar
moelski
Normal user
Posts: 161
Joined: 31 Aug 2016, 06:33
Location: Germany - NRW
Contact:

Re: Use SPIFFS for funny stuff - JavaScript as an example

#4 Post by moelski » 30 Sep 2016, 12:55

i loaded up stylesheet and fonts to use bootstrap, makes easy to have shiny web-gui.
How long did it take to load a HTML page with bootstrap stuff?

I figured out that loading from spiffs is not really fast.
So having a full blown Framework could be a little bit overwhelming für SPIFFS?
may there is a chance, you show more of your wifi-Candle?
Yes.
Give me some additional time to make a better / more userfriendly version ;)
specially wich LED (ws2812?)
WS2812
regards
Dominik

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#5 Post by tozett » 30 Sep 2016, 14:01

moelski wrote:I figured out that loading from spiffs is not really fast.
So having a full blown Framework could be a little bit overwhelming für SPIFFS?
it seems only sometime, only very, very little slower. but not even remarkable.
i can post some snippets to experiment. there is also a sketch with a spiffs-browser to experiment..

framework is not a problem, because bootstrap is sleek small and lean,
and i took (at first) only css and fonts, with some small ajax.
thats working astonishing very good on the esp. so it is promising to polish ESPeasy for projects, which are not mainly sensor- and time-related.
a very good option for webgui enhancment, i guess.

and the gui is modern, shiny, and i guess, really worth the trouble.. :)

User avatar
moelski
Normal user
Posts: 161
Joined: 31 Aug 2016, 06:33
Location: Germany - NRW
Contact:

Re: Use SPIFFS for funny stuff - JavaScript as an example

#6 Post by moelski » 30 Sep 2016, 15:53

Hi !

Would be worth trying it - espacially for my WLAN-Candle.
It would increase the WAF (woman acceptance factor) :D

Can you send me some demo stuff for first test?

Dominik
regards
Dominik

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#7 Post by tozett » 02 Oct 2016, 08:20

i put my snippets in a readable form together, than i post i here.

meanwhile i searched for the stuning example with esp8266 and bootstrap gui (like i tried it),
and it seems to be from http://www.hallard.me ...here: http://hallard.me/wifinfo/

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#8 Post by tozett » 02 Oct 2016, 14:44

hi dominik,
i a trying to put my pieces together,
but as it was a testing setup it is not polished as it should.

and i am still looking for better solutions than mine.. :P

i found it a hallard.me, i posted some screenshots before. now i found the source.

https://github.com/hallard/remora_soft

i downloaded it and put the index.html locally in my chrome-browser and it shows,
what is possible with bootstrap html. WOW!! that what i was looking for.

after a first glance, i have the impression it was made somehow clever,
because all html-functions are scripted within the html-page (means in the browser on client side)
and not on the ESP(easy) side. Cool !

i am far away from beeing a web-developer, nor i am an experienced coder,
but this example has the potential to be copied to the ESPeasy.

at least, means at first, i should try to apply this clever inner workings to my SPIFFS-experiment.
on which i have already a .html-page on spiffs, an getting some data via microajax in the background from the espeasy/esp8266.

but making all .css styling on bootstrap with javascriting on clientside in browser,
and only getting small amounts of data from the esp8266 is the best way i have seen, so far.

may worth looking at it, to style the "candles" WAF ?

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#9 Post by tozett » 02 Oct 2016, 15:05

i investigated a little further,
and the key to the clever table seems to be in the renaming of bootstrap-table.js to remura.js.

in the chrom inspector a saw the inner code of remura.js, an there it seems as hallard capsuled it and uses

http://bootstrap-table.wenzhixin.net.cn/

this table can get its data from a .json url.

http://bootstrap-table.wenzhixin.net.cn ... ted/#usage

as far as my expriment was,
i had a table and loaded data in the background with ajax to it.

but that all in one place, better looking, no coding:

http://issues.wenzhixin.net.cn/bootstra ... -ajax.html


WOW! what possibilities for ESPeasy.

but at the same moment is think, this is somehow a (big) little over my skills...
:oops: :cry:

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#10 Post by tozett » 03 Oct 2016, 14:37

now the code-pieces, how i managed to serve .html (or .html.gz)-files from spiffs.

it was meant for testing, i am no real coder, but in my testcode it works stable and satisfactory good for me.

1. i assume SPIFFS was flashed to the ESP.

2. in the server-handle i snapped into the .onnotfound a search-routine for files on spiffs.
if found, serve them.

2.1 i have a file-page, to upload and delete files on spiffs. working
2.1 i have a test-page, which is served from spiffs. only buttons to click, and trigger functions on the esp.

3.0 the .html-files load microajax.js from spiffs and use this to grab the sensor-values from the esp.
3.1 the .hml-files load the bootstrap.css from spiffs (or cdn-internet). it makes easier to style the html-elements. and looks good.
(so i can easy edit only html-pages in webeditor, try, change, upload to esp. easy. ready. go

4. i installed a server-handle only to receive ajax-request (send to esp).
ajax makes the hmtl-page stay unchanged in browser window.
this handle/function takes post-values from forms or from GET-urls
and than set/fires what i want to do the esp, when somethin is clicked/changed on the webpage.

5. from here, one could think of a lot of other thinks.


This was the skeleteon.
i assembled a button-page for testing, which sends onclick the id-name pair to the ESP.
on the ESP i set some animation-modes from this values.
Thats it.

now the code pieces:

SERVER handles:

Code: Select all

 httpServer.on("/files", handleFileList2 );                 		//Filelist-page. generated. (put?)
 httpServer.onFileUpload( handleFileUpload );    					//call upload function, 	// called several times from Parsing.cpp while upload
 httpServer.on("/upload", HTTP_POST, handleFileList2 );             //after upload done, come here, to stay on the files-page. is there a possible alternative?
 httpServer.on("/spiffs/delete_file", spiffsDeleteFile );           //delete selected file
 httpServer.on( "/postdata", handlePostData ); 						//receive ajax-request, call functions on post-values
Functions:

Code: Select all

 longer code. it was put in the attachment, vanished ....
 
 i put here. i look, if i can put in on github...
***************
String uploadPath="";
/*********************************************************************************************/
void handleFileList2()
{

//if we have arguments in Query-string, send from the client-brower, we process them (delete file):


if ( httpServer.args() > 0 )   // get data from this page through POST/GET Fields 
    { 
      Serial.println("Deleting one SPIFFS File selected");
    
      for ( uint8_t i = 0; i < httpServer.args(); i++ ) 
        {  // Iterate through the fields
           Serial.println("Deleting one SPIFFS File:");
           
           if (httpServer.argName(i) == "file" )    //rename id to deletefile, also in javascript
              {
                  String fileName = httpServer.arg(i);
                  Serial.printf("Deleting File: %s\n", fileName.c_str() );
                  SPIFFS.remove(fileName); 
              
              }//end-if
        }//end-for
    }//end-if



//(than, or otherwise) we sample and send a html-page to the client-browser

  
  //String FileList = "File List:\n";
  //String FileList = "";
  //String FileName;

  /*
  webString = F("<!DOCTYPE HTML>");
  webString = F("<html><head>");
  webString = F("<link rel='stylesheet' href='style.css.gz' type='text/css' />");
  webString = F("<meta name='author' content='tozett'>");
  webString = F("</head><body>SPI-FlashFileSystem = SPIFFS.<br>");
*/

 webString =  F("<!DOCTYPE HTML>\r\n");   // html5 doct-type  According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted, but on older browser (esp/or them) crashes.. */

 webString +=  F("<html>") ;   
 webString +=  F("<head>") ;   
 webString +=  F("<title>FileList2</title>") ;   
 webString +=  F("<meta charset='utf-8' />") ;   
 webString +=  F("<link rel='stylesheet' href='style.css.gz' type='text/css' />") ;   
 webString +=  F("</head>") ;   
 webString +=  F("<body>") ; 

  //webString += F("<form action='/spiffs/delete_file' method='post'>  <!--the achtion-? is html5confirm-->");
  webString += F("<form action='?' method='post'>  <!--the achtion-? is html5confirm-->");
  webString += F("<table class='table table-condensed' border='0'  cellspacing='0' cellpadding='3' style='widt_:410px' >");
  //webString += F("<tr><td align='right'>MatrixMode 0-30:</td><td><input type='number' id='deletefile' name='deletefile' value=''><input style='margin-left: 10px;' type='submit' style='width:150px' value='Delete this'></td></tr> ");
  webString += F("<tr><td align='right'>File:</td><td><input type='text' id='file' name='file' value=''>");
  //webString += F("<a href='javascript:selFile()' style='border-style: solid; border-width: 2px; border-color: red; width: 150px' class='btn btn--m btn--blue'>Delete File</a>");
  //webString += F("<a href='javascript:selFile()' style='border-style: solid; border-width: 2px; border-color: red; width: 150px'>Delete File</a>");
  webString += F("<input style='margin-left: 10px;' type='submit' style='width:150px' value='Delete File'></td></tr>");
  
  webString += F("</table></form>");
  webString += F("<script>function selFile(value){document.getElementById('file').value = value;}</script>");
  
  webString += F("<table border='0' cellspacing='0' cellpadding='3'  class='table table-condensed' >");
  webString += F("<tr bgcolor='#DDDDDD' ><td><strong>dir/Name</strong></td><td><strong>Size</strong></td><td><strong>kB</strong></td><tr>");
  
  
  Dir dir = SPIFFS.openDir("/");
  Serial.println("File List:");
  
  while( dir.next() )
  {
    String FileName = dir.fileName();
    //FileName = dir.fileName();
    File f = dir.openFile("r");
    
    String FileSize = String(f.size());
    int whsp = 6-FileSize.length();
    
    while(whsp-->0)
      {
        Serial.print(" ");
        //FileName += " ";
      }//end-while
    
    //Serial.println(FileSize + " " + FileName);
    Serial.println(FileName + ", " + FileSize + " kB");
    //FileList += FileSize+" kB "+FileName+"\n";
    
    //webString += FileName + " [" + FileSize + " kB] " + "\n";
    webString += "<tr><td><a href='javascript:selFile(\""  +  String(FileName) + "\")'>"  + String(FileName) + "</a></td><td>" + " [" + FileSize + " kB] " + "</td></tr>";
    //webString += "<tr><td><a href='javascript:selFile(\'"  +  String(FileName) + "\')'>"  + String(FileName)  + "</a></td><td>" + " [" + FileSize + " kB] " + "</td></tr>";
    //Networks += "<tr><td><a href='javascript:selFile(\""  +  String(WiFi.SSID(i))  + "\")'>"  +  String(WiFi.SSID(i))  + "</a></td><td>" +  String(quality) + "%</td><td>" +  String((WiFi.encryptionType(i) == ENC_TYPE_NONE)?" ":"*")  + "</td></tr>";
    Serial.println( FileName );
  
  }//end-while-dir-next
  //webString += FileName;   
  webString += F("</table><hr>");       
  
  webString += F("<form method='POST' action='/upload' enctype='multipart/form-data'> ");  
  webString += F("<input type='text' id='uploadpath' name='uploadpath' value=''><br> ");  
  webString += F("<input style='border-style: solid; border-width: 2px; border-color: red;' type='file' name='File upload'> ");       
  webString += F("<input style='margin-left: 10px;' type='submit' value='UpLoad File to SPIFFS'></form><hr>");    
  //path
  webString += F("<form action='?' method='post'>  <!--the achtion-? is html5confirm-->");
  webString += F("<table class='table table-condensed' border='0'  cellspacing='0' cellpadding='3' style='widt_:410px' >");
  webString += F("<tr><td align='right'>Path to store to:</td><td><input type='text' id='uploadpath2' name='uploadpath2' value=''>");
  webString += F("<input style='margin-left: 10px;' type='submit' style='width:150px' value='Set Filepath'></td></tr>");
  
  webString += F("</body></html>");
  
  //Serial.print( "send: " );
  //Serial.println( webString );
  
  //debug spiffs files on serial:
  spiffsListFiles();
 
  //if ( httpServer.arg("switch") == "'..switch1_pin..'" )
  if ( httpServer.arg("uploadpath2") != "" )
    {
      uploadPath = httpServer.arg("uploadpath2"); //store in global var
    }
    else
    {
      uploadPath ="";  //clear upload path
    }
    Serial.print( "arg:uploadpath2: " );
    Serial.println( httpServer.arg("uploadpath2") );

  String reply = "";
  if (httpServer.args() > 0 )  /* is this page called with parameters? = Are there any POST/GET Fields ? */
    {
       for ( uint8_t i = 0; i < httpServer.args(); i++ ) {  // Iterate through the fields
            //reply += httpServer.arg(i) ;
            //reply += " NAME:" + httpServer.argName(i) + "\n VALUE:" + httpServer.arg(i) + "\n";
            reply = "debug.argname= " + httpServer.argName(i) + " ist " + httpServer.arg(i) ;
            Serial.println( reply );
        } /* end-for */
    } /* end-if*/
  //Serial.println( reply );



   
  //httpServer.sendHeader("Connection", "close");
  //httpServer.sendHeader("Access-Control-Allow-Origin", "*");
  //httpServer.send(200, "text/plain", webString);
  httpServer.send(200, "text/html", webString);  
  
}//end-fuction


File fsUploadFile;      //must be global defined. otherwise filesize may zero. (maybe because httpuload-routine is called more than once from core-lib before upload is complete?)
/*********************************************************************************************/
void handleFileUpload()
{
  //File fsUploadFile;      //must be global defined. otherwise filesize may zero. (maybe because httpuload-routine is called more than once from core-lib before upload is complete?)
  
  if(httpServer.uri() != "/upload") return;         //url-path must be /upload, otherwise exit.
  
  HTTPUpload& upload = httpServer.upload();
  String filename = upload.filename;

  //Serial.println( "handlefileUpload.show.uploadPath: " );
  //Serial.println( uploadPath );

  // no args on fileupload!!!   ->  One thing I figured out real quick is that the Webserver back-end code doesn't parse the Post parameters from a form when there's a file upload. (int server.args == 0) - See more at: http://www.esp8266.com/viewtopic.php?p=53882#sthash.qsKWNcHv.dpuf
  // -> But it will parse URL parameters.

  
  String reply = "";
  if (httpServer.args() > 0 )                       //tis this page called with parameters? = Are there any POST/GET Fields ? 
    {
       for ( uint8_t i = 0; i < httpServer.args(); i++ ) {  // Iterate through the fields
            //reply += httpServer.arg(i) ;
            //reply += " NAME:" + httpServer.argName(i) + "\n VALUE:" + httpServer.arg(i) + "\n";
            reply = "debug.handleupld.argname= " + httpServer.argName(i) + " ist " + httpServer.arg(i) ;
            Serial.println( reply );
        } //* end-for 
    } //* end-if
    

  if ( httpServer.arg("dir") != "" ) {uploadPath = httpServer.arg("dir"); }


  if ( !filename.startsWith("/")) {filename = "/" + filename;}    //root-dir-level, but there are no level on SPIFFS, https://github.com/esp8266/Arduino/issues/901
  
  Serial.print("start...handleFileUpload check uploadpath: "); 
  Serial.println(uploadPath);
  
  if ( uploadPath != " " ) {filename = uploadPath + filename; }
      
  Serial.print("start...handleFileUpload - Name: "); 
  Serial.println(filename);
  
  if ( upload.status == UPLOAD_FILE_START )
    {
      //String filename = upload.filename;  //this is done one level above

      /*
      if ( !filename.startsWith("/")) {filename = "/" + filename;}    //root-dir-level, but there are no level on SPIFFS, https://github.com/esp8266/Arduino/issues/901
      if ( uploadPath != "" ) {filename = uploadPath + filename; }
      
      Serial.print("start...handleFileUpload - Name: "); 
      Serial.println(filename);
      */
      
      fsUploadFile = SPIFFS.open(filename, "w");      //create file (must be global defined?), make handle for receive data
      filename = String();      //whats this?   here also wrong? https://github.com/luc-github/ESP3D/blob/127213fcb4d105aae07a3cf7dee8f79f78b8344b/esp3d/webinterface.cpp#L2332

      //create file succes?
      if( fsUploadFile )
        {
          Serial.println("start...success. file created."); 
        }
       else
       {
        Serial.println("start...error. file not created."); 
       }
      
    }//end-if-upload-start
     
  else if ( upload.status == UPLOAD_FILE_WRITE )
    {
      // no serial debug here?
      //Serial.print("uploading...handleFileUpload - Data: "); 
      //Serial.println(upload.currentSize);

      //fsUploadFile.write(upload.buf, upload.currentSize);     //uploading in progress, show stats...

      
      if( fsUploadFile )
        {
          fsUploadFile.write(upload.buf, upload.currentSize);     //uploading in progress, show stats...
          
          Serial.println("upload ongoing..."); 
  
          Serial.print("handleFileUpload - Size: ");
          Serial.println(upload.totalSize);
        }
        else
        {
          Serial.println("upload writing error. fsuploadFile is false..."); 
        }
        
    }//end-else-if-upload-write
    
    
  else if( upload.status == UPLOAD_FILE_END )
    {
      if( fsUploadFile )
      {
        fsUploadFile.close();
        Serial.print("END. handleFileUpload - Closed: ");
        
        delay(0);   //give some time?
        
        spiffsListFiles();
      }
  
      //Serial.print("handleFileUpload - Size: ");
      //Serial.println(upload.totalSize);
      
    }//end-if-upload-end

   delay(0);   //give some time? 
   //debug spiffs files on serial:
   //spiffsListFiles();
   
}//end-function

/*********************************************************************************************/
/*
String getContentType(String filename) {
  if (httpServer.hasArg("download")) return "application/octet-stream";
  else if (filename.endsWith(".htm")) return "text/html";
  else 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(".json")) return "application/json";
  else if (filename.endsWith(".png")) return "image/png";
  else if (filename.endsWith(".gif")) return "image/gif";
  else if (filename.endsWith(".jpg")) return "image/jpeg";
  else if (filename.endsWith(".ico")) return "image/x-icon";
  else if (filename.endsWith(".xml")) return "text/xml";
  else if (filename.endsWith(".pdf")) return "application/x-pdf";
  else if (filename.endsWith(".zip")) return "application/x-zip";
  else if (filename.endsWith(".gz")) return "application/x-gzip";
  return "text/plain";
}
*/

String getContentType(String filename) {
  if (httpServer.hasArg("download")) return F("application/octet-stream");
  else if (filename.endsWith(".htm")) return F("text/html");
  else if (filename.endsWith(".html")) return F("text/html");
  else if (filename.endsWith(".css")) return F("text/css");
  else if (filename.endsWith(".js")) return F("application/javascript");
  else if (filename.endsWith(".json")) return F("application/json");
  else if (filename.endsWith(".png")) return F("image/png");
  else if (filename.endsWith(".gif")) return F("image/gif");
  else if (filename.endsWith(".jpg")) return F("image/jpeg");
  else if (filename.endsWith(".ico")) return F("image/x-icon");
  else if (filename.endsWith(".xml")) return F("text/xml");
  else if (filename.endsWith(".pdf")) return F("application/x-pdf");
  else if (filename.endsWith(".zip")) return F("application/x-zip");
  else if(filename.endsWith(".otf")) return F("application/x-font-opentype");
  else if(filename.endsWith(".eot")) return F("application/vnd.ms-fontobject");
  else if(filename.endsWith(".svg")) return F("image/svg+xml");
  else if(filename.endsWith(".woff")) return F("application/x-font-woff");
  else if(filename.endsWith(".woff2")) return F("application/x-font-woff2");
  else if(filename.endsWith(".ttf")) return F("application/x-font-ttf");
  else if (filename.endsWith(".gz"))    //gziped version of files exist, so send the coreesponding filetype for a .gz file-ending (i.e. of a font or css)
    {    
      if (filename.indexOf(".htm.") >= 0 )       { return F("text/html"); }
      else if (filename.indexOf(".html.") >= 0 ) { return F("text/html"); }
      else if (filename.indexOf(".css.") >= 0 )  { return F("text/css"); }
      else if (filename.indexOf(".js.") >= 0 )   { return F("application/javascript"); }
      else if (filename.indexOf(".json.") >= 0 ) { return F("application/json"); }
      else if (filename.indexOf(".png.") >= 0 )  { return F("image/png"); }
      else if (filename.indexOf(".gif.") >= 0 )  { return F("image/gif"); }
      else if (filename.indexOf(".jpg.") >= 0 )  { return F("image/jpeg"); }
      else if (filename.indexOf(".ico.") >= 0 )  { return F("image/x-icon"); }
      else if (filename.indexOf(".xml.") >= 0 )  { return F("text/xml"); }
      else if (filename.indexOf(".pdf.") >= 0 )  { return F("application/x-pdf"); }
      else if (filename.indexOf(".zip.") >= 0 )  { return F("application/x-zip"); }
      else if(filename.indexOf(".otf") >= 0 )     { return F("application/x-font-opentype"); }
      else if(filename.indexOf(".eot") >= 0 )     { return F("application/vnd.ms-fontobject"); }
      else if(filename.indexOf(".svg") >= 0 )     { return F("image/svg+xml"); }
      else if(filename.indexOf(".woff") >= 0 )    { return F("application/x-font-woff"); }
      else if(filename.indexOf(".woff2") >= 0 )   { return F("application/x-font-woff2"); }
      else if(filename.indexOf(".ttf") >= 0 )     { return F("application/x-font-ttf"); }
            
    return "application/x-gzip";
    
    }//end-else-normal-gzip
    
  return "text/plain";    //default. if no type-extension

}//end-functions 

/*******************************************************************************************/
void spiffsDeleteFile(void)
{

   if ( httpServer.args() > 0 )   // get data from this page through POST/GET Fields 
    { 
      Serial.println("Deleting one SPIFFS File selected");
    
      for ( uint8_t i = 0; i < httpServer.args(); i++ ) 
        {  // Iterate through the fields
           Serial.println("Deleting one SPIFFS File:");
           
           
           if (httpServer.argName(i) == "file" )    //rename id to deletefile, also in javascript
              {
                  String fileName = httpServer.arg(i);
                  fileName.replace("/",""); // remove directory-part ?
                  
                  if(!SPIFFS.exists(fileName)) 
                    {
                      Serial.println("File does not exists!");
                      Serial.printf("No File to delete: %s\n", fileName.c_str() );
                    }
                   else 
                    {
                      Serial.printf("Deleting File: %s\n", fileName.c_str() );
                      SPIFFS.remove(fileName); 
                    }//end-else
              
              }//end-if-arg-name
        }//end-for
    }//end-if


}//end-function

/*******************************************************************************************/
String FNformatBytes(size_t bytes)
  {
  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";  
    } 
  else 
    {
      return String(bytes/1024.0/1024.0/1024.0)+"GB";
    }
}//end-function

/*********************************************************************************************/
void handlePostData()
  {        

  Serial.print( "-------------------------------");
  Serial.print( "handlePostData() called at: ");
  Serial.print ( hour() );
  Serial.print( " : ");
  Serial.print ( minute() );
  Serial.println( " (hrs:min)");
    
  if ( httpServer.args() > 0 )   // get data from this page through POST/GET Fields 
    {
      for ( uint8_t i = 0; i < httpServer.args(); i++ ) 
        {  // Iterate through the fields

          /*
          if (httpServer.argName(i) == "firstname") 
          {
            // Your processing for the transmitted form-variable 
            String fName = httpServer.arg(i);
            Serial.println(fName);
          }//end-if
          */
          Serial.print( "name: " );
          Serial.print( httpServer.argName(i) );
          Serial.print( " value: " );
          Serial.print( httpServer.arg(i) );
          Serial.print( " value to Int: " );
          Serial.print( httpServer.arg(i).toInt() );

          
          Serial.println(  );

          
          if ( httpServer.argName(i) == "matrixmode" ) 
            { 
              
            }//end-if-matrixmode


            
           }//end-for-iterate-server-args
      
      //button1:
      if ( httpServer.arg("switch1") == "'..switch1_pin..'" )
        {
          Serial.println( "arg:switch.has.value..1_pin. Now creating dummy-files." );
        }
        
      }//end-if-server-has-args

      //show URI
      //if(httpServer.uri() != "/upload") return;         //url-path must be /upload, otherwise exit.
      Serial.print( "URI: " ); 
      Serial.println( httpServer.uri() ); 

      //show headers...  (http://bienonline.magix.net/public/esp8266-webserver-klasse.html#esp-fun)

      /*
      // Gewünschte Header-Elemente festlegen (https://de.wikipedia.org/wiki/Liste_der_HTTP-Headerfelder)
      const char* Headers[] = {"User-Agent", "Connection"};
      
      // Speicherung anfordern 
      httpServer.collectHeaders(Headers, sizeof(Headers)/ sizeof(Headers[0]));
      */
      
      // Gespeicherte Header-Elemente ausgeben 
      Serial.print( "Headers count: " ); 
      Serial.println( httpServer.headers() ); 
      
      for (int i = 0; i < httpServer.headers(); i++) 
      {
        Serial.printf( "Header[%i]: %s\n", i, httpServer.header(i).c_str() );

        /*
        Serial.println( httpServer.header(i) );
        Serial.println( httpServer.header(i).c_str() );
        */
      }
      
      Serial.print("Host in headers: "); 
      Serial.println( httpServer.hostHeader() );

  //!!dont send any response to client!!    //gives browser error on ajax-request

  httpServer.send(200, "text/plain", "");     //send nothing?
  //httpServer.send(200, "text/html", "OK --> MD5: "+browserMD5);

    
}//end-func 
  

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Use SPIFFS for funny stuff - JavaScript as an example

#11 Post by tozett » 03 Oct 2016, 17:48

just to give an impression, i am testing all this, to get a 8x8matrix running.
i bought a 1 hardsoldered element of four 8x8 matrices in china.
the orientation of each segment was at first not changeable, but after research i found a max7129 lib together with adafruit glx-lib,
and today i made a progess and could change the orientation of each segment indivually in runtime.
thats what i needed the buttons on the webpage for. i can click them to set the orientation of each segment.
thats what i looks like, wich a running text. but segment 2 and 4 are rotated 90 degrees..
Attachments
ezgif.com-optimize (3).gif
ezgif.com-optimize (3).gif (223.86 KiB) Viewed 11329 times

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest