...
All the implementation steps must be against Simulated Greenhouse project.
Creating View
a) Main View - Single Page HTML file
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> |
b) Creating Style Sheet
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
body{
background: url(images/greenhouse.jpg);
background-size: cover;
padding: 0; margin: 0;
}
.header{
background: #000; color: #fff; margin-bottom:
20px;
}
.greenhouseDetails{
background: #39404a;
color: #fff;
}
.statusBlock{
background: #39404a;
color: #fff;
padding: 30px; margin: 30px 0;
} |
Take on of the scree with Request / Response and Notification/Subscription and build the UI.
...