ESP8266 Community Forum

Posted: **Fri Jan 06, 2017 4:17 pm**

Hi all

Hope you can assist.
I am loading a script in my html page.
When i use - <script type="text/javascript" src="http://bls-bla/bla.js"></script> - it works.
i a trying to embed the script in the code, in the .h file so i don't have to have internet access for it to work.
When i copy the script and convert the html file to .h, it fail.

Any idea where i can start to look?

Posted: **Fri Jan 06, 2017 10:14 pm**

Hello,

I have a project that uses JavaScript, maybe these excerpts will help.

In a header file named PAGE_ajax.js.h,

Code: Select all

const char PAGE_ajax_js[] PROGMEM = R"=====(
var xmlHttp = createXmlHttpObject();

function createXmlHttpObject()
{
 if(window.XMLHttpRequest)
 {
    xmlHttp=new XMLHttpRequest();
 }
 else
 {
    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
 }
 return xmlHttp;
}


function processInfo()
{
 if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
 {
   xmlHttp.open('POST','xmlInfo',true);
   xmlHttp.onreadystatechange=handleServerResponseInfo;
   xmlHttp.send(null);
 }
 setTimeout('processInfo()',1000);
}
 
function handleServerResponseInfo()
{
 if(xmlHttp.readyState==4 && xmlHttp.status==200)
 {
   var xmlDoc = xmlHttp.responseXML;
   
   var rssi    = xmlDoc.getElementsByTagName("xRSSI")[0].childNodes[0].nodeValue;
   var recon   = xmlDoc.getElementsByTagName("xWiFiRecon")[0].childNodes[0].nodeValue;
   var rtime   = xmlDoc.getElementsByTagName("xRunTime")[0].childNodes[0].nodeValue;
   var Heap    = xmlDoc.getElementsByTagName("xHeap")[0].childNodes[0].nodeValue;
      
   var DocObj = document.getElementById('idRSSI');
   DocObj.innerHTML=rssi;          

   var DocObj = document.getElementById('idWiFiRecon');
   DocObj.innerHTML=recon;          

   var DocObj = document.getElementById('idHeap');
   DocObj.innerHTML=Heap;          

   var DocObj = document.getElementById('idRunTime');
   DocObj.innerHTML=rtime;          
 }
}
)=====";

The js file is included in a webpage like this, in a file named PAGE_Info.h

Code: Select all

const char PAGE_Info_Head[] = R"=====(
<!DOCTYPE html>
<head>
<title>Information</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<script src="ajax.js"></script>
</head>
)=====";

/*  Place this at the top of the HTML body  */
const char PAGE_Info_Menu[] = R"=====(
<div id="Menu">
  <ul>
    <li><a href="PAGE_Door_Status">Home</a></li>
    <li><a href="PAGE_History">History</a></li>
    <li class="active"><a href="PAGE_Info">Information</a></li>
    <li><a href="PAGE_WiFi_Settings">WiFi Settings</a></li>
  </ul>
</div>
)=====";

The header files are include in the .ino file as,

Code: Select all

//  Include the HTML Pages
#include "Page_Style.css.h"
#include "PAGE_ajax.js.h"

#include "Page_Door_Status.h"
#include "Page_History.h"
#include "Page_Info.h"
#include "Page_WiFi_Settings.h"

And the URLs are assigned handlers in Setup() like this,

Code: Select all

void setup( void )
{
  CommInit();
  
  //  Initialize I2C
  Wire.begin(I2C_SDA, I2C_SCL); 

  //  Configure I/O of PCA9536 I2C 4-bit Port Expander.
  PCA9536_ConfigureSet( PCA9536_IO_CNFG ); 

  StartWiFiSTA();

  server.on( "/xmlHome", HandleXML_Home ); 
  server.on( "/xmlInfo", HandleXML_Info ); 
  server.on( "/style.css", HandleStyleSheet );
  server.on( "/ajax.js", HandleJavaScript );
  
  server.on( "/", HandleDoorStatus );
  server.on( "/PAGE_Door_Status", HandleDoorStatus );
  server.on( "/PAGE_History", HandleHistory );
  server.on( "/PAGE_Info", HandleInfo );  
  server.on( "/PAGE_WiFi_Settings", Handle_WiFi_Settings );
  
  server.on( "/favicon.ico",  HandleFavoriteIcon );
  server.onNotFound( HandleNotFound ); 

  server.begin();
  Serial.println( "HTTP server started" );

  UtilityHeapMonitorInit();
  
  //  Start the Periodic ISR, and assign a callback function
  Periodic.attach_ms( 100, PeriodicISR );
  
  Serial.println( "Type 'help' for Comm Menu Commands" );
    
  EventLogAdd( EVENT_INIT_DONE );
}

Handler functions for the js looks like this:

Code: Select all

static void HandleJavaScript( void )
{
  server.send( 200, "text/plain", PAGE_ajax_js );
  yield();
  
  Serial.println("Handle ajax.js");
  yield();
}

Best Regards,
GregryCM

ESP8266 Community Forum

.js in HTML

.js in HTML

Re: .js in HTML