...
All the implementation steps must be against Simulated Greenhouse project.
Creating View
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<!DOCTYPE html>
<html ng-app="GreenhouseUIApp">
<head>
<title>Smart Greenhouse</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js"></script>
<script type="text/javascript" src="config/url_config.js"></script>
<script type="text/javascript" src="controllers/mainController.js"></script>
<script type="text/javascript" src="services/queryService.js"></script>
</head>
<body>
<div ng-controller="mainController">
<div class="row text-center header">
<h2>SMART GREENHOUSE</h2>
</div>
<div class="row text-center greenhouseDetails">
<h4>{{selectedGreenhouse.GreenhouseName}} |
Zones: {{selectedGreenhouse.ZoneCount}} |
Location: ({{selectedGreenhouse.Location.latitude}},
{{selectedGreenhouse.Location.longitude}})</h4>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-3 statusBlock">
<div>
<h3>Internal Status</h3>
</div>
<div>Temperature: {{selectedGreenhouse.InternalEnv.Temperature}}
°C</div>
<div>Humidity: {{selectedGreenhouse.InternalEnv.Humidity}} %</div>
<div>Amb. Light: {{selectedGreenhouse.InternalEnv.Light}} lux</div>
<div>Soil Moisture:
{{selectedGreenhouse.InternalEnv.SoilMoisture}} cb</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-4 statusBlock">
<div>
<h3>External Conditions</h3>
</div>
<div>Temperature: {{selectedGreenhouse.ExternalEnv.Temperature}}
°C</div>
<div>Humidity: {{selectedGreenhouse.ExternalEnv.Humidity}} %</div>
<div>Sunlight: {{selectedGreenhouse.ExternalEnv.Light}} lux</div>
<div>Soil Moisture:
{{selectedGreenhouse.ExternalEnv.SoilMoisture}} cb</div>
<div>Wind: {{selectedGreenhouse.ExternalEnv.Wind}} mph</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html> |
Take on of the scree with Request / Response and Notification/Subscription and build the UI.
...