@octopan/telegram-green-house
Version:
Monitor & control green-house with Telegram & Raspberry Pi
56 lines (53 loc) • 2.98 kB
HTML
<html ng-app="angularModule" ng-controller="mainController as $ctrl">
<head>
<meta charset="utf-8">
<title>{{$ctrl.config.title}}</title>
<script src="/libs/angular.min.js" type="text/javascript"></script>
<script src="/libs/jquery.min.js" type="text/javascript"></script>
<script src="/libs/socket.io.min.js" type="text/javascript"></script>
<script src="/libs/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<link href="/libs/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="/styles.css" rel="stylesheet">
<script src="/script.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<a id="forkMeLink" href="{{$ctrl.config.linkToRepository}}" ng-if="$ctrl.config.linkToRepository">
<img style="position: absolute; top: 0; right: 0; border: 0; z-index: 10000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
</a>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="../" class="navbar-brand">{{$ctrl.config.title}}</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="body-container">
<div class="gauge-container_temperature" ng-show="$gauge.colors" ng-controller="gaugeController as $gauge" ng-init="$gauge.type = 'temperature'">
<svg viewBox="0 0 100 400" class="gauge-svg" preserveAspectRatio="none">
<rect ng-show="$gauge.isVisible(color)" ng-attr-x="0" ng-attr-y="{{400 * $index / $gauge.colors.length}}"
ng-attr-width="100" ng-attr-height="{{(400 / $gauge.colors.length) * 0.8 }}" fill="{{color}}" ng-repeat="color in $gauge.colors"></rect>
</svg>
</div>
<div class="gauge-container_humidity" ng-show="$gauge.colors" ng-controller="gaugeController as $gauge" ng-init="$gauge.type = 'humidity'">
<svg viewBox="0 0 100 400" class="gauge-svg" preserveAspectRatio="none">
<rect ng-show="$gauge.isVisible(color)" ng-attr-x="0" ng-attr-y="{{400 * $index / $gauge.colors.length}}"
ng-attr-width="100" ng-attr-height="{{(400 / $gauge.colors.length) * 0.8 }}" fill="{{color}}" ng-repeat="color in $gauge.colors"></rect>
</svg>
</div>
<div class="value-container_temperature">
{{$ctrl.sensors.temperature | number:1}} °C
</div>
<div class="value-container_humidity">
{{$ctrl.sensors.humidity | number:1}} %
</div>
<div class="status-container" ng-class="{'status-container__online': $ctrl.isOnline}">{{$ctrl.isOnline ? 'ONLINE' : 'OFFLINE'}}</div>
</div>
</body>
</html>