TCP/IP: Designing A Web-Based Monitor and Control Device

TCP/IP: Designing a Web-Based
Monitor and Control Device
COM4201
Objectives
 Describe the communication layers required
in TCP/IP embedded designs
 Describe the Application layer components
required of Web based embedded designs
 Capture and modify a simple HTML/CSS web
page design
 Modify an existing HTML/CSS web page to
include dynamic variables
 Integrate status and control requirements
within the Microchip TCP/IP stack
 Specify the layout considerations for using
an Ethernet Phy in embedded applications
© 2008 Microchip Technology Incorporated. All Rights Reserved. TCP/IP: Designing aHIF
Monitor
2131 and Control Device Slide22
Agenda
 Crash Course in Networking
 Lab 1 – Join the Network
 Introducing our Project
 Lab 2 – Web Page Design
 The Microchip TCP/IP Stack
 Planning for Applications
 Lab 3 – Integrating the Stack
 Lab 4 – Removing Blocking Code
 Implementing Web Applications
 Building with HTTP2
 Lab 5 – Web-Based Status Monitoring
 Lab 6 – Web-Based Control
 Hardware Design Guidance
Monitor
Crash Course in Networking
 Basic Ethernet Topology

 MAC and IP Addresses
 Microchip Hardware
 Development Tools
 Lab 1: Join the Network
Monitor
Basic Ethernet Topology
 Hub
 Repeats all traffic
 Mostly obsolete Switch
or Hub
 Switch
 Directs traffic to
specific destination
 Common “in-room” Local
Subnet
 Router Router
 Routes traffic
 Acts as gateway
Internet
 Other functionality
Monitor
Basic Ethernet Topology
 “Star Topology”
 More like a tree
 Routers (at the root) serve as gateways to
rest of the world
 Other configurations exist (obsolete)
Definitions
MAC: Media Access Control (Hardware) Address

IP: Internet Protocol (Software) Address
NAT: Network Address Translation
Monitor
MAC and IP Addresses
 MAC Addresses
 Associated with hardware
 Six bytes: 00:04:A3:00:12:34
 Specific to IEEE 802. networks
 Ethernet, WiFi, etc
 Only usable within the local network
 Sold in blocks by the IEEE
 Globally unique
 US$550 / 4096 pcs or US$1650 / 16M pcs
Monitor
 Internet Protocol (IP) Addresses

 Assigned by software (DHCP or manual)
 Four bytes as dotted-quad: 192.168.1.100
 New version (IPv6) will have 128 bits
 Globally routable
 Administered by regional authorities
 Typically leased by your ISP
 Some allocated for private networks
 192.168.*, 10.*, 169.254.*, and 172.16.*
 Behind firewall and/or router
Monitor
Network Address Translation
 32-bit address space insufficient

 NAT Provides one-to-many routing
 Share one global IP among many machines
 Router/gateway makes all outgoing connections
 Can port-forward incoming connections
 Also provides security
Public IP Address Private Local Subnet
64.34.168.230 192.168.1.1
192.168.1.101
Internet
Router
192.168.1.100
Monitor
10
 Finding Nodes:
 Start with host name
 www.microchip.com
 Local name, e.g. MCHPBOARD
 Resolve host name to IP address
 DNS for global addresses
 NBNS for local addresses
 Resolve IP address to MAC
 Use Address Resolution Protocol (ARP)
 Router or gateway may respond
Monitor
11
Microchip Ethernet Hardware
 ENC28J60 – In Production
 Stand-alone 10Mbps Ethernet Controller
 Integrated MAC + PHY + 8kB SRAM
 3.3V, 20MHz SPI interface
 28-pin SOIC, SSOP, QFN, SPDIP
Monitor
12
 ENC624J600 – Under Development

 Stand-alone 10/100Mbps Controller
 Integrated MAC + PHY + 24kB SRAM
 3.3V, 20MHz SPI or 8/16 parallel interface
 44-pin TQFP and QFN, 64-pin TQFP
 Pre-programmed MAC Address
 Hardware encryption acceleration for SSL
 RSA, AES, MD5, SHA-1
Monitor
13
 PIC18F97J60 Family – In Production

 PIC18 with integrated 10Mbps MAC + PHY
 3.3V, 64-128K Flash, 3.8kB + 8kB RAM
 64, 80, or 100 pin TQFP
 Extra 8kB is memory mapped
Monitor
14
Development Tools
DM163024
 PICDEM.netTM 2
 PIC18F97J60
 ENC28J60
 Ethernet PICtailTM
 PICDEM HPC 2
Explorer
AC164121
 Ethernet PICtail Plus

 Explorer 16
 PIC24, dsPIC, PIC32
AC164123
Monitor
15
Lab 1: Join the Network
 Goals:
 Configure your development board
 MAC Address
 Local host name
 Compile and load TCP/IP Stack
 Upload demo web pages
 Test connectivity
Monitor
16
Review:
 Basic Ethernet Topology
 Hubs, Routers, Switches
 IP and MAC Addresses
 Microchip Hardware
 Stand-alone and integrated parts
 Development Tools
 PICDEM.netTM 2
 Ethernet PICtailTM Plus
Monitor
17
Introducing our Project
 Project Demonstration
 Web Page Development
 HTML Structure and Tags
 Packaging Web Pages
 Lab 2: Web Page Development
Monitor
19
 Web-Enabled Vending Machine

 Add network capabilities to existing design
 Build web page interface
 Check stock
 Set products and prices
 Demonstration
Monitor
20
Web Page Development
 Web Page Development

 HTML – Page content
 CSS – Style and layout
 Other Components
 GIF, JPG, PNG, JavaScript
 Avoid visual editors (large code)
Definition
HTML: Hyper-Text Markup Language

CSS: Cascading Style Sheets
Monitor
21
Sidetrack to HTML
 HTML is a markup language

 Use tags to indicate sections
 Tags…
 are structural
 wrap content
 must be /closed
 can be nested
 may have attributes with values
<tag attr=“value”>content</tag>
Monitor
22
HTML Structure
 All HTML documents have 3 tags

 <html> wraps entire document
 <head> is header content inside <html>
 <body> is viewable content inside <html>
 Extra whitespace is ignored
 Includes new lines
 Case-insensitive
 Syntax is lenient
Monitor
23
Sample HTML Page
<html>
<head>
non-displayed header content...
</head>
<body>
displayable content...
text, images, links...
</body>
</html>
Monitor
24
HTML Content Tags
 Common <body> tags

 <p> wraps a paragraph
 <h1> - <h6> creates headings
 <a> creates anchors (links)
 <b>, <i>, <u> provide inline formatting
 Visual elements within <body>
 <table> creates a table
 <form> creates a form
 <ul>, <ol> create (un)ordered lists
Monitor
25
Completed Sample Page
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>Compared to assembly, HTML is
<b>really</b> easy!</p>
</body>
</html>
Monitor
26
Completed Sample Page
Monitor
27
Packaging Web Pages
Web Pages MPFS2 Your Embedded

Utility Application
Using yes
EEPROM? EEPROM
 MPFS2 Utility
 File system for embedded devices
 Creates file system image
 Uploads image to running application
 Application programs to EEPROM
Monitor
28
Lab 2: Web Page Design
 Goals:
 Create a simple web page
 Test web page locally
 Compile and upload MPFS2 image
 Bonus:
 Use CSS to format
your page
Monitor
29
Want to Learn More?
TLS8221
 Very basic intro to HTML

 Need to learn more? TLS8221!
 In depth discussion on HTML
 Detailed CSS formatting and layout techniques
 Learn to create web page interfaces
Monitor
30
Review:
The Microchip TCP/IP Stack
 Vending Machine Application
 Principles of HTML
 Markup language
 Tag format and structure
 Packaging Web Pages
 Visual Elements with CSS
 Style and layout
Monitor
31
 About the Stack

 The TCP/IP Layer Model
 Layers at a Glance
 Selecting an Application
Monitor
33
About the Stack
 Source code provided

 No-fee license agreement
 Use Microchip PIC® MCU or dsPIC® DSC
 Download: www.microchip.com/tcpip
 Suite of files
 „C‟ source code
 PC based utilities
 Example projects
 Standard Microchip technical support
Monitor
34
About the Stack
 Cross-platform
 PIC18, PIC24, dsPIC, PIC32
 MPLAB® C18, C30, C32, HI-TECH PICC-18
 RTOS Independent
 Modular Design
 Compile only what you need
 High performance
 Full TCP state machine
 Supports multiple connections
Monitor
35
The TCP/IP Layer Model
 Communication Protocol
 Layers
 Each handles a specific task
 Independent functions
 Shared functionality
 Communicate only with the layer below
Monitor
36
The TCP/IP Layer Model
SNMP
Telnet
NBNS
DHCP
SMTP
SNTP
HTTP
DNS
FTP
Application
UDP TCP Transport
IP ARP Addressing
Ethernet MAC/PHY (Silicon) Physical
Monitor
37
Layers at a Glance
 Foundation Layers
 Functionality handled by the stack
 Interact only with TCP and/or UDP
 Just send and retrieve data
UDP TCP Transport
IP ARP Addressing
Ethernet MAC/PHY (Silicon) Physical
Monitor
38
Layers at a Glance
SNMP
Telnet
NBNS
DHCP
SMTP
SNTP
HTTP
DNS
FTP
Application
 Application Layers
 Custom applications built on these layers
 Request and transmit data
 Respond to incoming requests
Monitor
39
Application Examples
NetBIOS Name Service (Server)
NBNS
Local Host Names
Domain Name Service (Client)
DNS
Global host name resolution
Simple Network Time Protocol (Client)
DNS
Determines the absolute time
Dynamic Host Configuration Protocol (Both)
DHCP
Automatic IP and network configuration
Simple Network Management Protocol (Server)
SNMP
Enterprise monitoring and control (AN870)
Telnet (Server)
Telnet
Command-line interface
Simple Mail Transfer Protocol (Client)
SMTP
Sends e-mail messages
Hyper-Text Transfer Protocol (Server)
HTTP
Serves web pages and processes web form input
Monitor
40
Application Examples
 Custom Applications
 HTTP Client
 Streaming data / audio
 Serial to Ethernet bridge
 Data logging
 Bootloader
 Other data transfer
Monitor
41
Selecting an Application
 Requirements:
 Provide status monitoring
 Allow for device control
 Desires:
 Cross-platform graphical interface
 Easy to implement
 Solution: HTTP Web Server

Monitor
42
Review:
 Microchip‟s Stack
 No-fee license, source code provided
 The TCP/IP Layer Model
 Abstract common functionality
 Selecting an Application
 HTTP web server
Monitor
43

TCP/IP: Designing A Web-Based Monitor and Control Device

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TCP/IP: Designing A Web-Based Monitor and Control Device

Uploaded by

Copyright:

Available Formats

TCP/IP: Designing a Web-Based

Monitor and Control Device

 Basic Ethernet Topology

 Lab 1: Join the Network

MAC: Media Access Control (Hardware) Address

 Internet Protocol (IP) Addresses

 32-bit address space insufficient

 ENC624J600 – Under Development

 PIC18F97J60 Family – In Production

 Ethernet PICtail Plus

 Lab 2: Web Page Development

 Web-Enabled Vending Machine

 Web Page Development

HTML: Hyper-Text Markup Language

 HTML is a markup language

 All HTML documents have 3 tags

 Common <body> tags

Web Pages MPFS2 Your Embedded

 Very basic intro to HTML

 About the Stack

 Source code provided

UDP TCP Transport

Ethernet MAC/PHY (Silicon) Physical

UDP TCP Transport

Ethernet MAC/PHY (Silicon) Physical

 Solution: HTTP Web Server

You might also like