Top Banner
TCP/IP: Designing a Web-Based Monitor and Control Device COM4201
43
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Microchip TCP/IP

TCP/IP: Designing a Web-Based

Monitor and Control Device

COM4201

Page 2: Microchip TCP/IP

© 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

Page 3: Microchip TCP/IP

© 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

Page 4: Microchip TCP/IP

Crash Course in Networking

Page 5: Microchip TCP/IP

© 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

Page 6: Microchip TCP/IP

© 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

Page 7: Microchip TCP/IP

© 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

Page 8: Microchip TCP/IP

© 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

Page 9: Microchip TCP/IP

© 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

Page 10: Microchip TCP/IP

© 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

Page 11: Microchip TCP/IP

© 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

Page 12: Microchip TCP/IP

© 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

Page 13: Microchip TCP/IP

© 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

Page 14: Microchip TCP/IP

© 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

Page 15: Microchip TCP/IP

© 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

Page 16: Microchip TCP/IP

© 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

Page 17: Microchip TCP/IP

© 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

Page 18: Microchip TCP/IP

Introducing our Project

Page 19: Microchip TCP/IP

© 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

Page 20: Microchip TCP/IP

© 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

Page 21: Microchip TCP/IP

© 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

Page 22: Microchip TCP/IP

© 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>

Page 23: Microchip TCP/IP

© 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

Page 24: Microchip TCP/IP

© 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>

Page 25: Microchip TCP/IP

© 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

Page 26: Microchip TCP/IP

© 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>

Page 27: Microchip TCP/IP

© 2008 Microchip Technology Incorporated. All Rights Reserved. Slide 27HIF 2131TCP/IP: Designing a Monitor and Control Device 27

Completed Sample Page

Page 28: Microchip TCP/IP

© 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

Page 29: Microchip TCP/IP

© 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

Page 30: Microchip TCP/IP

© 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

Page 31: Microchip TCP/IP

© 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

Page 32: Microchip TCP/IP

The Microchip TCP/IP Stack

Page 33: Microchip TCP/IP

© 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

Page 34: Microchip TCP/IP

© 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

Page 35: Microchip TCP/IP

© 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

Page 36: Microchip TCP/IP

© 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

Page 37: Microchip TCP/IP

© 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

Page 38: Microchip TCP/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

Page 39: Microchip TCP/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

Page 40: Microchip TCP/IP

© 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

Page 41: Microchip TCP/IP

© 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

Page 42: Microchip TCP/IP

© 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

Page 43: Microchip TCP/IP

© 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