tcp/ip: designing a web-based monitor and control...
TRANSCRIPT
TCP/IP: Designing a Web-Based
Monitor and Control Device
COM4201
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 2HIF 2131TCP/IP: Designing a Monitor and Control Device 2
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. Slide 3HIF 2131TCP/IP: Designing a Monitor and Control Device 3
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
Crash Course in Networking
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 5HIF 2131TCP/IP: Designing a Monitor and Control Device 5
Crash Course in Networking
Basic Ethernet Topology
MAC and IP Addresses
Microchip Hardware
Development Tools
Lab 1: Join the Network
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 6HIF 2131TCP/IP: Designing a Monitor and Control Device 6
Basic Ethernet Topology
Hub
Repeats all traffic
Mostly obsolete
Switch
Directs traffic to
specific destination
Common “in-room”
Router
Routes traffic
Acts as gateway
Other functionality
Local
Subnet
Switch
or Hub
Router
Internet
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 7HIF 2131TCP/IP: Designing a Monitor and Control Device 7
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 8HIF 2131TCP/IP: Designing a Monitor and Control Device 8
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 9HIF 2131TCP/IP: Designing a Monitor and Control Device 9
MAC and IP Addresses
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 10HIF 2131TCP/IP: Designing a Monitor and Control Device 10
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
Router
192.168.1.101
192.168.1.100
Internet
Private Local Subnet
192.168.1.1
Public IP Address
64.34.168.230
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 11HIF 2131TCP/IP: Designing a Monitor and Control Device 11
MAC and IP Addresses
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 12HIF 2131TCP/IP: Designing a Monitor and Control Device 12
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 13HIF 2131TCP/IP: Designing a Monitor and Control Device 13
Microchip Ethernet Hardware
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 14HIF 2131TCP/IP: Designing a Monitor and Control Device 14
Microchip Ethernet Hardware
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 15HIF 2131TCP/IP: Designing a Monitor and Control Device 15
Development Tools
PICDEM.netTM 2
PIC18F97J60
ENC28J60
Ethernet PICtailTM
PICDEM HPC 2
Explorer
Ethernet PICtail Plus
Explorer 16
PIC24, dsPIC, PIC32
DM163024
AC164121
AC164123
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 16HIF 2131TCP/IP: Designing a Monitor and Control Device 16
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 17HIF 2131TCP/IP: Designing a Monitor and Control Device 17
Review:
Crash Course in Networking
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
Introducing our Project
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 19HIF 2131TCP/IP: Designing a Monitor and Control Device 19
Introducing our Project
Project Demonstration
Web Page Development
HTML Structure and Tags
Packaging Web Pages
Lab 2: Web Page Development
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 20HIF 2131TCP/IP: Designing a Monitor and Control Device 20
Introducing our Project
Web-Enabled Vending Machine
Add network capabilities to existing design
Build web page interface
Check stock
Set products and prices
Demonstration
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 21HIF 2131TCP/IP: Designing a Monitor and Control Device 21
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 22HIF 2131TCP/IP: Designing a Monitor and Control Device 22
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>
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 23HIF 2131TCP/IP: Designing a Monitor and Control Device 23
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 24HIF 2131TCP/IP: Designing a Monitor and Control Device 24
Sample HTML Page
<html>
<head>
non-displayed header content...
</head>
<body>
displayable content...
text, images, links...
</body>
</html>
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 25HIF 2131TCP/IP: Designing a Monitor and Control Device 25
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 26HIF 2131TCP/IP: Designing a Monitor and Control Device 26
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>
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 27HIF 2131TCP/IP: Designing a Monitor and Control Device 27
Completed Sample Page
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 28HIF 2131TCP/IP: Designing a Monitor and Control Device 28
Packaging Web Pages
Your Embedded
Application
MPFS2
Utility
EEPROMUsing
EEPROM?
Web Pages
yes
MPFS2 Utility
File system for embedded devices
Creates file system image
Uploads image to running application
Application programs to EEPROM
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 29HIF 2131TCP/IP: Designing a Monitor and Control Device 29
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 30HIF 2131TCP/IP: Designing a Monitor and Control Device 30
Want to Learn More?
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
TLS8221
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 31HIF 2131TCP/IP: Designing a Monitor and Control Device 31
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
The Microchip TCP/IP Stack
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 33HIF 2131TCP/IP: Designing a Monitor and Control Device 33
The Microchip TCP/IP Stack
About the Stack
The TCP/IP Layer Model
Layers at a Glance
Selecting an Application
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 34HIF 2131TCP/IP: Designing a Monitor and Control Device 34
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 35HIF 2131TCP/IP: Designing a Monitor and Control Device 35
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
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 36HIF 2131TCP/IP: Designing a Monitor and Control Device 36
The TCP/IP Layer Model
Communication Protocol
Layers
Each handles a specific task
Independent functions
Shared functionality
Communicate only with the layer below
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 37HIF 2131TCP/IP: Designing a Monitor and Control Device 37
The TCP/IP Layer Model
Ethernet MAC/PHY (Silicon)
UDP
ARP
TCP
Teln
et
NB
NS
Application
DN
S
SN
TP
DH
CP
SN
MP
SM
TP
HT
TP
FT
P
Transport
Addressing
Physical
IP
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 38HIF 2131TCP/IP: Designing a Monitor and Control Device 38
Layers at a Glance
Foundation Layers
Functionality handled by the stack
Interact only with TCP and/or UDP
Just send and retrieve data
Ethernet MAC/PHY (Silicon)
UDP
ARP
TCP Transport
Addressing
Physical
IP
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 39HIF 2131TCP/IP: Designing a Monitor and Control Device 39
Layers at a Glance
Application Layers
Custom applications built on these layers
Request and transmit data
Respond to incoming requests
Teln
et
NB
NS
Application
DN
S
SN
TP
DH
CP
SN
MP
SM
TP
HT
TP
FT
P
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 40HIF 2131TCP/IP: Designing a Monitor and Control Device 40
Application Examples
NetBIOS Name Service (Server)
Local Host Names
Domain Name Service (Client)
Global host name resolution
Simple Network Time Protocol (Client)
Determines the absolute time
Dynamic Host Configuration Protocol (Both)
Automatic IP and network configuration
Simple Network Management Protocol (Server)
Enterprise monitoring and control (AN870)
Telnet (Server)
Command-line interface
Simple Mail Transfer Protocol (Client)
Sends e-mail messages
Hyper-Text Transfer Protocol (Server)
Serves web pages and processes web form input
Telnet
NBNS
DNS
DNS
DHCP
SNMP
SMTP
HTTP
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 41HIF 2131TCP/IP: Designing a Monitor and Control Device 41
Application Examples
Custom Applications
HTTP Client
Streaming data / audio
Serial to Ethernet bridge
Data logging
Bootloader
Other data transfer
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 42HIF 2131TCP/IP: Designing a Monitor and Control Device 42
Selecting an Application
Requirements:
Provide status monitoring
Allow for device control
Desires:
Cross-platform graphical interface
Easy to implement
Solution: HTTP Web Server
© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 43HIF 2131TCP/IP: Designing a Monitor and Control Device 43
Review:
The Microchip TCP/IP Stack
Microchip‟s Stack
No-fee license, source code provided
The TCP/IP Layer Model
Abstract common functionality
Selecting an Application
HTTP web server