...
| 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.
Discover TQL EndPoint URL (Code; JS)
...
Creating Model
Model is where we capture consuming of TQL Queries.
List of Queries
Discovering TQL EndPoints URL
Code Block language xml theme Midnight title Application TQL endpoint discovery query linenumbers true <Query> <Find> <project> <projName eq='Greenhouse'/> </project> </Find> </Query> <GetProjectEndPoints> <ProjectSysId> Find.Result.Project.SysId </ProjectSysId> </GetProjectEndPoints>Gather App related queries.
Code Block language xml theme Midnight title View - Greenhouse Monitoring App linenumbers true <Query> <Find> <Greenhouse> <GreenhouseID ne=''/> </Greenhouse> </Find> </Query>
Create JS Service
| 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> |
Test Queries via Query Editor
...