How to Display Weather Data on a Web Page



Similar documents
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Appendix for Tx5xx and P85x1 manuals

{color:blue; font-size: 12px;}

Working with forms in PHP

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

HTML Tables. IT 3203 Introduction to Web Development

A send-a-friend application with ASP Smart Mailer

WHITEPAPER. Skinning Guide. Let s chat Velaro info@velaro.com by Velaro

1 of 8 9/14/2011 5:40 PM

8 STEPS TO CODE KILLER RESPONSIVE S

Contents. Downloading the Data Files Centering Page Elements... 6

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots

Web layout guidelines for daughter sites of Scotland s Environment

WEB PROGRAMMING LAB (Common to CSE & IT)

CHAPTER 10. When you complete this chapter, you will be able to:

CSS - Cascading Style Sheets

Chapter 22 How to send and access other web sites

Contents. Introduction Downloading the Data Files... 2

CS412 Interactive Lab Creating a Simple Web Form

ITNP43: HTML Lecture 4

How to use SSO with SharePoint 2010 (FBA) using subdomains. Moataz Esmat EXT.1386

Making Responsive s

Website Login Integration

Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7

Using Style Sheets for Consistency

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

Website Planning Checklist

Caldes CM2: Marketing s Support Document v1.12

HTML TIPS FOR DESIGNING

Professional & Workgroup Editions

Creating the Surf Shop website Part3 REVISED

Coding Standards for Web Development

Basic tutorial for Dreamweaver CS5

How To Create A Web Page On A Windows (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (

Event-Based Programming Using Top-Down Design and Stepwise Refinement. AJAX Programming for the World Wide Web

Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief

Creating a Resume Webpage with

Xtreeme Search Engine Studio Help Xtreeme

ecommercesoftwareone Advance User s Guide -

Web Design with CSS and CSS3. Dr. Jan Stelovsky

CSS Techniques: Scrolling gradient over a fixed background

Web Design and Databases WD: Class 7: HTML and CSS Part 3

How to Properly Compose HTML Code : 1

Outline of CSS: Cascading Style Sheets

Web Development and Core Java Lab Manual V th Semester

Asset Management. By: Brian Johnson

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan

POS Design. RTI HTML and Graphical User Interface (GUI) Direct Mail Maintenance. Discussion Document

HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout

Basic Website Maintenance Tutorial*

Caldes CM12: Content Management Software Introduction v1.9

HTML tutorial. Purpose: Importance: Very few people code HTML by hand anymore. There are a multiplicity

Web Development CSE2WD Final Examination June (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Appendix IX. Codes written for developing the revised search tool in HTML

Designing HTML s for Use in the Advanced Editor

Web Reporting by Combining the Best of HTML and SAS

Embedding a Data View dynamic report into an existing web-page

Google Sites: Site Creation and Home Page Design

Configuring iplanet 6.0 Web Server For SSL and non-ssl Redirect

Further web design: HTML forms

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1

Web Development 1 A4 Project Description Web Architecture

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

Intell-a-Keeper Reporting System Technical Programming Guide. Tracking your Bookings without going Nuts!

HOTEL RESERVATION SYSTEM. Database Management System Project

Web Design with Dreamweaver Lesson 4 Handout

Website Development. 2 Text. 2.1 Fonts. Terry Marris September We see how to format text and separate structure from content.

Web Programming with PHP 5. The right tool for the right job.

Communication. Container-Exchange

Script Handbook for Interactive Scientific Website Building

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

How to code, test, and validate a web page

WIRIS quizzes web services Getting started with PHP and Java

Web Publishing Basics 2

Using Internet or Windows Explorer to Upload Your Site

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

Using IIS and UltraDev Locally page 1

USING THE INTRO (SPLASH) PAGE

deskspace responsive web builder: Instructions

PASTPERFECT-ONLINE DESIGN GUIDE

Building Your Website

ISE Web Portal Customization Options. Secure Access How-to User Guide Series

Chapter 24 Web Servers (PWS, IIS, Apache, Jigsaw) 805. A Web server communicating with several HTTP clients.

Yandex.Widgets Quick start

Campaign Guidelines and Best Practices

Table of Contents Find out more about NewZapp

Citrix StoreFront. Customizing the Receiver for Web User Interface Citrix. All rights reserved.

Client-side Web Engineering From HTML to AJAX

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

Create Your own Company s Design Theme

Introduction to XHTML. 2010, Robert K. Moniot 1

Webentwicklung für s iphone

So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.

Creating HTML authored webpages using a text editor

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

Create a GAME PERFORMANCE Portfolio with Microsoft Word

Tips and Tricks for Creating Multi-Sheet Microsoft Excel Workbooks the Easy Way with SAS. Vincent DelGobbo, SAS Institute Inc.

Transcription:

Columbia Weather Systems Weather MicroServer Tutorial How to Displaying your weather station s data on the Internet is a great way to disseminate it whether for general public information or to make it available simultaneously to multiple parties involved in an Incident Response, for example, responders, dispatchers, and commanders. With Columbia Weather Systems weather stations there are two ways to get the weather data onto a web site WeatherMaster Software and the Weather MicroServer. This paper gives the procedure for posting weather data to the Internet using the Weather MicroServer. (For information on using WeatherMaster to upload weather data, please refer to the WeatherMaster User Manual.) Setting this up is a fairly straightforward two-step process. You need to set up a web page to receive the XML file data and you need to modify the settings in the MicroServer browser interface. Please note: To display your weather data on a website in this method, your server must support.php files. Setting up the Web Page Create a web page that will draw the data from the XML file and present it in formatted text/graphics. You can see an example on our website at: http://www.columbiaweather.com/orionweather_3.php You can see the HTML code for this page in Appendix A. It begins with the following code: <?php $oriondata = readoriondata(); function readoriondata() $oriondataurl = orion52.xml ;?> $oriondata = array(); $xml = new SimpleXMLElement($orionDataUrl, 0, true); foreach ($xml->meas as $meas) $oriondata[(string) $meas[ name ]] = (string) $meas; return $oriondata; orion52.xml is the designated name of the XML file Columbia Weather uploads to our website. You can name your file whatever you want. To display a parameter value the syntax is: <?php echo $oriondata[ parameter name ];?> For example, to display wind speed use the following: <?php echo $oriondata[ mtwindspeed ];?>

2 XML parameter names are listed in the Weather MicroServer User Manual, Section 3: Operation, under the heading Measurements Definition. Setting Up the MicroServer You can set your Weather MicroServer to FTP the XML weather data file to your website automatically. The unit will FTP the file every 15 seconds. In the MicroServer browser interface, click on Data Output to bring up the screen shown at right. Make sure the FTP Output: is [Enabled]. Enter your FTP URL followed by /filename.xml. You can use any file name you want. For example: ftp://www.yoururl.com/filename.xml As another example, ours is: ftp://www.columbiaweather.com/orion52.xml (Recall the filename from the web page.) Enter your website s FTP user and password. If you do not know what it is, contact your network administrator. Set the Output Format: to [XML]. Click on the [Apply Changes] button. At this point an XML file will be uploaded to your website. About CWS Columbia Weather Systems goal is to help organizations leverage weather data to optimize resources and save lives. During the past decade, CWS has been at the forefront of innovation, utilizing cutting-edge technology to capture and communicate weather data wherever it is needed. Hundreds of organizations rely on CWS weather stations to monitor and disseminate weather information to manage operations, prepare for emergencies, and help mitigate disasters. For more information, contact Columbia Weather Systems, Inc. Email info@columbiaweather.com Call toll-free in US and Canada 1 888-508-7375 Phone 503-629-0887 www.columbiaweather.com

3 Appendix A: HTML Code for CWS Web Page <?php $oriondata = readoriondata(); function readoriondata() $oriondataurl = "orion52.xml"; $oriondata = array(); $xml = new SimpleXMLElement($orionDataUrl, 0, true); foreach ($xml->meas as $meas) $oriondata[(string) $meas['name']] = (string) $meas; return $oriondata;?> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>columbia Weather Systems Inc.</title> <style type="text/css" media="screen">.nav width:730px; background-image: url("http://www.columbiaweather.com/images/menubar.gif");.nav td a font: 12px Arial, Helvetica, san-sarif; color: #333366; text-decoration: none; font-weight: bold.nav td a:hover color: #FFFFFF;.head background-image: url("http://www.columbiaweather.com/images/header.gif"); H1 font: 15px Arial, Helvetica, san-sarif; color: #115F88; font-weight: bold; margin-bottom: 0%; margin-top: 1% TD font: 12px Arial, Helvetica, san-sarif; color: #336699.location font: 15px Arial, Helvetica, san-sarif; color: #336699; font-weight: bold;.parameter font: 17px Arial, Helvetica, san-sarif; color: #333366; font-weight: bold;.value font: 17px Arial, Helvetica, san-sarif; color: #6E5A3C; font-weight: bold;.contact font: 12px Arial, Helvetica, san-sarif; color: #336699; font-weight: bold;.contact a font: 12px Arial, Helvetica, san-sarif; color: blue;.footnav font: 12px Arial, Helvetica, san-sarif; color: blue;.foot font: 10px Arial, Helvetica, san-sarif; color: #336699;.foot a font: 10px Arial, Helvetica, san-sarif; color: blue;.quote font: 16px Arial, Helvetica, san-sarif; color: #FFFFFF; font-weight: bold.quote a font: 16px Arial, Helvetica, san-sarif; color: #FFFF33; text-decoration: none; font-weight: bold A:link color: blue

4 </style> <meta http-equiv="refresh" content="30"/> </head> <body bgcolor="#ffffff" onload=""> <table width="730" border="0" cellspacing="0" cellpadding="0" height="75" class="head"> <td width="18"></td> <table width="730" border="0" cellspacing="0" cellpadding="0" align="left" class="parameter"> <td colspan="2"> <table width="450" border="0" cellspacing="0" cellpadding="0" align="center"> <td class="location" width="225">hillsboro, Oregon</td> <td class="location" width="225">time Stamp:<?php echo $oriondata['mtsamptime'];?></td> <td class="parameter" width="225">wind Speed<br/> <div class="value"><?php echo $oriondata['mtwindspeed'];?> MPH</div></td> <td class="parameter" width="225">wind Direction<br/> <div class="value"><?php echo $oriondata['mtadjwinddir'];?> </div></td> <td class="parameter" width="225">3-sec Avg.<br/> <div class="value"><?php echo $oriondata['mt3secrollavgwindspeed'];?> MPH</div></td> <td class="parameter" width="225">3-sec Avg.<br/> <div class="value"><?php echo $oriondata['mt3secrollavgwinddir'];?> </div></td> <td class="parameter" width="225">2-min Avg.<br/> <div class="value"><?php echo $oriondata['mt2minrollavgwindspeed'];?> MPH</div></td> <td class="parameter" width="225">2-min Avg.<br/> <div class="value"><?php echo $oriondata['mt2minrollavgwinddir'];?> </div></td> <td class="parameter" width="225">10-min Avg.<br/> <div class="value"><?php echo $oriondata['mt10minrollavgwindspeed'];?> MPH</div></td> <td class="parameter" width="225">10-min Avg.<br/> <div class="value"><?php echo $oriondata['mt10minrollavgwinddir'];?> </div></td>

5 <td class="parameter" width="225">air Temperature<br/> <div class="value"><?php echo $oriondata['mttemp1'];?> F</div></td> <td class="parameter" width="225">avg Temperature Today<br/> <div class="value"><?php echo $oriondata['mtavgtemptoday'];?> F</div></td> <td class="parameter" width="225">heat Index<br/> <div class="value"><?php echo $oriondata['mtheatindex'];?> F</div></td> <td class="parameter" width="225">dew Point<br/> <div class="value"><?php echo $oriondata['mtdewpoint'];?> F</div></td> <td class="parameter" width="225">wind Chill<br/> <div class="value"><?php echo $oriondata['mtwindchill'];?> F</div></td> <td class="parameter" width="225">relative Humidity<br/> <div class="value"><?php echo $oriondata['mtrelhumidity'];?>%</div></td> <td class="parameter" width="225">barometric Pressure<br/> <div class="value"><?php echo $oriondata['mtadjbarompress'];?> In. Hg.</div></td> <td class="parameter" width="225">density Altitude<br/> <div class="value"><?php echo $oriondata['mtdensityaltitude'];?> Feet</div></td> <td class="parameter" width="225">rain for the Day<br/> <div class="value"><?php echo $oriondata['mtraintoday'];?> Inches</div></td> <td class="parameter" width="225">rain for the Week<br/> <div class="value"><?php echo $oriondata['mtrainthisweek'];?> Inches</div></td> <td class="parameter" width="225">rain for the Month<br/> <div class="value"><?php echo $oriondata['mtrainthismonth'];?> Inches</div></td> <td class="parameter" width="225">rain for the Year<br/> <div class="value"><?php echo $oriondata['mtrainthisyear'];?> Inches</div></td> <td class="parameter" width="225">rain Intensity<br/> <div class="value"><?php echo $oriondata['mtrainintensity'];?> Inches</div></td> <td class="parameter" width="225">rain Duration<br/> <div class="value"><?php echo $oriondata['mtrainduration'];?> Seconds</div></td> </td> <td colspan="2"><hr width="700" color="#336699"/></td> </body> </html>