Esp8266 - Interactive SMS from the Web Page

UPDATE: Mon Nov 30 21:34:56 PST 2015
Added Links and Detail
Added RAW HTML listing

In the previous post I listed a code snippet that provides non-interactive SMS from the Esp8266. But sometime it is desirable to provide a simple interactive SMS interface for the Web User. An interactive SMS interface could be used to "page the SysAdmin" with the web user's supplied message.

Example Interactive Web SMS Interface

The interactive SMS interface is simple and requires only some HTML code to be inserted within a web page. Note: the previous post was a SMS method where user interaction was not needed nor desired.

Note: the Open SMS Gateway domain name that is used in the example is "textbelt.com", read their web page for details for Canadian and International use.

The following are excerpts from my ERB-EspWebServer.

Note: the RAW HTML code could be extracted from the example below and used with any Web Server.

The Setup:

// The Setup

    #define OPT_MONITOR_DEBUG_OUTPUT 1
   
    // ERB - Force format stings and string constants into FLASH Memory
    // I use E() as an Alias for F() so that DEBUG code can be inserted
    #define  E(x) F(x)
    // Used as an F() when being used as the first Element
    // of a Multi-Element Expression
    #define sE(x) String( F(x) )


// Defaults for Pager
    #define DEFAULT_PAGER_GATEWAY "textbelt.com"
    #define DEFAULT_PAGER_NUMBER  "202-555-1212"

    #define SYSTEM_ADMIN_PAGER_NUMBER DEFAULT_PAGER_NUMBER

Web Server Code Arduino Sketch Snippet:

    // Pager - User Interactive Web Interface
    sz += wprintln( E("\r\n<!-- Pager - User Interactive Web Interface -->") );
    sz += wprintln( E("<center>") );
    sz += wprintln( E("<hr width='75%' />") );

    sz += wprintln(sE("<form action="http://")
          + DEFAULT_PAGER_GATEWAY + E("/text method='POST' target='SMS_Report' >") );
       sz += wprintln( E("  <b>Page SysAdmin with </b>") );
       sz += wprintln(sE("  <input name='number' type='hidden' value='")
             + SYSTEM_ADMIN_PAGER_NUMBER + E("' />") );
       sz += wprintln( E("  <b>Message:</b>") );
       sz += wprintln(sE("  <input name='message' type='text' value='")
             + gDeviceName + E(": ' />") );
       sz += wprintln( E("  <input type='submit' value='GO' />") );
    sz += wprintln( E("</form>") );
    
    sz += wprintln( E("Or<br>") );
    
    sz += wprintln(sE("<form action="http://")
          + DEFAULT_PAGER_GATEWAY + E("/text method='POST' target='SMS_Report' >") );
       sz += wprintln( E("  <b>SMS Number:</b>") );
       sz += wprintln( E("  <input name='number' type='tel' />") );
       sz += wprintln( E("  <b>Message:</b>") );
       sz += wprintln(sE("  <input name='message' type='text' value='")
             + gDeviceName + E(": ' />") );
       sz += wprintln( E("  <input type='submit' value='GO' />") );
    sz += wprintln( E("</form>") );

    sz += wprintln( E("</center>") );

Note: I use my own custom "wprintln" function within the above example, modify as necessary.

For reference and to make things simple, I have extracted just the HTML from the above Sketch, as shown below.

HTML:

<!-- Pager - User Interactive Web Interface -->
<center>
<hr width='75%'>

<form method='POST' action='http://textbelt.com/text' target='SMS_Report' >
  <b>Page SysAdmin with </b>
  <input type='hidden' name='number' value='202-555-1212' />
  <b>Message:</b>
  <input type='text' name='message' value='Nod129: ' />
  <input type='submit' value='GO' />
</form>

Or<br>

<form method='POST' action='http://textbelt.com/text' target='SMS_Report' >
  <b>SMS Number:</b>
  <input type='tel' name='number' />
  <b>Message:</b>
  <input type='text' name='message' value='Nod129: ' />
  <input type='submit' value='GO' />
</form>

</center>

If you find this useful, leave a comment.

-- Home Page: https://WA0UWH.blogspot.com