1<script>
2(function($scope) {
3
4let amount = 10 //amount of LEDs
5let label = "LED bar Graph"
6
7let on1 = "#00FF00"
8let off1 = "#006600"
9let on2 = "#FFFF00"
10let off2 = "#666600"
11let on3 = "#FF0000"
12let off3 = "#660000"
13
14let threshold1 = 1/2 // the limit between color 1 and color 2
15let threshold2 = 4/5 //  the limit between color 2 and color 3
16
17var bargraph = new Array(amount).fill("#000000")
18
19$scope.$watch('msg', function() {
20
21if ($scope.msg){
22    if ($scope.msg.hasOwnProperty('payload') && typeof $scope.msg.payload == "number"){
23        $scope.msg.label = label
24        $scope.msg.payload = parseInt($scope.msg.payload)
25
26        if ($scope.msg.payload > amount){
27            $scope.msg.payload = amount
28        }
29        for (var i = 0; i < $scope.msg.payload; i++){
30            if (i < amount*threshold1){
31                bargraph[i] = on1
32            }else if (i < amount*threshold2){
33                bargraph[i] = on2
34            }else{
35                bargraph[i] = on3
36            }
37        }
38        for (var i = $scope.msg.payload; i < amount; i++){
39            if (i < amount*threshold1){
40                bargraph[i] = off1
41            }else if (i < amount*threshold2){
42                bargraph[i] = off2
43            }else{
44                bargraph[i] = off3
45            }
46        }
47        $scope.msg.bargraph = bargraph.reverse()
48    }else if (typeof $scope.msg.payload !== "number"){
49        $scope.msg = {"bargraph":[...bargraph], "payload": 0, "label":"Led Bar Graph"}
50    }   
51}else{
52    $scope.msg = {"bargraph":[...bargraph], "payload": 0, "label":"Led Bar Graph"}
53}
54    });
55})(scope);
56</script>
57
58<style>
59.bargraph {
60    float: right;
61    padding: 3px;
62    width: 3px;
63    height: 10px;
64    margin: 4px 2px 8px 0px;
65    border-radius: 0%;
66}
67</style>
68
69<div>{{msg.label}}
70<span ng-repeat="led in msg.bargraph track by $index">
71    <span class="bargraph" style="background-color: {{led}}; box-shadow: black 0 -1px 1px 0px, inset black  0 -1px 4px, {{led}} 0 3px 15px;"></span>
72</span>
73</div>