First steps in creating a web application
It is nice to have some modules that serve up weather data but it is of course not enough. In this article we show how to use those modules as components in a CherryPy application. We also see what the HTML looks like that we use to structure the information in the web application and load all necessary Jascript files and supporting CSS.
Serving a CherryPy application
The first steps in setting up our web application is importing the cherrypy module and the classes from the weather package that we created earlier:
import os
current_dir = os.path.dirname(os.path.abspath(__file__))
import cherrypy
from weather.services import Hourly,Raw,Monthly
basepage = "".join(open(os.path.join(current_dir,'basepage.html')).readlines())
In the last line we also read in a file called basepage.html that we will look at later as it forms the basis of our application (we use a separate file so that we don't have to mix to much Python and HTML. Syntax highlighters don't like that). The next step is to configure the tree of URLs that serve the different kinds of data:
class Root:
hourly = Hourly('/home/michel/sitescripts/pywws/weatherdata')
raw = Raw('/home/michel/sitescripts/pywws/weatherdata')
monthly= Monthly('/home/michel/sitescripts/pywws/weatherdata')
@cherrypy.expose
def index(self):
return basepage
We configure the server to listen on any address and by default it will listen on port 8080. If you need another port you may configure this with the server.socket_port option.
cherrypy.config.update({'global':{'server.socket_host':'0.0.0.0'}})
Finally we start the CherryPy server by passing an instance of the Root class we defined to serve the application to the quickstart() function. We pass in additional configuration items to make sure we have a log file in a place we can access and that any reference to an URL that starts with /static is mapped to a directory with the same name relative to the location from where started the script.
If we save this script as weatherservice.py we can run it with python weatherservice.py. To test it we may direct our webserver either to the name of the host where we run the script or to localhost, e.g. http://localhost:8080/ or http://www.example.com:8080/.
cherrypy.quickstart(Root(),
config={
'/':{
'log.access_file' : os.path.join(current_dir,"access.log"),
'log.screen' : False
},
'/static':{
'tools.staticdir.on' :True,
'tools.staticdir.dir' :current_dir+"/static"
}
}
)
Structuring data with HTML
We serve a single basic HTML page to structure all the data elements in our web application and use AJAX calls from a small piece of Javascript to fill in the actual data. The base page starts of with ahead section that accomplishes several things: loading the jQuery and jQueryUI libraries, provinding access to a graphical canvas, even in Internet Explorer (that is what the conditional comments do) and load the Flot plugin. The final two lines incorporate our own application specific Javascript (weather.js) and CSS file (weather.css).
<html> <head> <title>Weather Overview</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css" type="text/css" media="all" /> <!--[if IE]><script language="javascript" type="text/javascript" src="/static/js/flot/excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="/static/js/flot/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="/static/js/weather.js"></script> <link rel="stylesheet" href="/static/css/weather.css" type="text/css" media="all" /> </head>
The body of the HTML is structured with two div elements. The first one is structured with an unordered list in a pattern that is suitable to apply jQueryUI's tab widget. Each of the tabs contains another div, each with its own id and marked as a graph class. These we will convert to graphs with the Flot plugin later.
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Temperature and wind</a></li>
<li><a href="#tabs-2">Humidity and rain</a></li>
<li><a href="#tabs-3">Summary and extremes</a></li>
<li><a href="#tabs-4">Indoor values</a></li>
</ul>
<div id="tabs-1">
<div id="tempandwind" class="graph" style="width:840px;height:300px"></div>
</div>
<div id="tabs-2">
<div id="humidityandrain" class="graph" style="width:840px;height:300px"></div>
</div>
<div id="tabs-3">
<p>here will be a table</p>
</div>
<div id="tabs-4">
<div id="indoorvalues" class="graph" style="width:840px;height:300px"></div>
</div>
</div>
The second div will hold radio buttons to select a reporting period and the level of detail in the graphs. These will be styled as jQueryUI button widgets and fitted with click handlers to make the graphs interactive.
<div id="nav"> <div id="period"> <input type="radio" id="p1" name="period" checked="checked" /> <label for="p1">Day</label> <input type="radio" id="p2" name="period"/> <label for="p2">Week</label> <input type="radio" id="p3" name="period" /> <label for="p3">Month</label> </div> <div id="detail"> <input type="radio" id="d1" name="detail" checked="checked" /> <label for="d1">Low</label> <input type="radio" id="d2" name="detail"/> <label for="d2">High</label> </div> </div> </body> </html>
In the next part we will look at the necessary Javascript and how to use the Flot plugin.
This professional hacker is absolutely reliable and I strongly recommend him for any type of hack you require. I know this because I have hired him severally for various hacks and he has never disappointed me nor any of my friends who have hired him too, he can help you with any of the following hacks:
ReplyDelete-Phone hacks (remotely)
-Credit repair
-Bitcoin recovery (any cryptocurrency)
-Make money from home (USA only)
-Social media hacks
-Website hacks
-Erase criminal records (USA & Canada only)
-Grade change
-funds recovery
Email: onlineghosthacker247@ gmail .com