src/app/modules/overview/overall-ground/overall-ground.component.html

@@ -1,13 +1,27 @@
 <div class="p-3" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
-  <div fxFlex="70" class="map-image">
+  <div fxFlex="50" class="map-image">
     <div class="card-state">
       <img src="assets/images/ground.png">
-      <p class="state t1" id="State1">{{ state1 ==  '' ? '%STATE%' : state1}}</p>
-      <p class="state t2" id="State2">{{ state2 ==  '' ? '%STATE%' : state2}}</p>
-      <p class="state t3" id="State3">{{ state3 ==  '' ? '%STATE%' : state3}}</p>
-      <p class="state t4" id="State4">{{ state4 ==  '' ? '%STATE%' : state4}}</p>
-      <p class="state t5" id="State5">{{ state5 ==  '' ? '%STATE%' : state5}}</p>
-      <p class="state t6" id="State6">{{ state6 ==  '' ? '%STATE%' : state6}}</p>
+
+      <p class="state t1" id="State1"  [ngClass]="{'sensor-on': state1 === 'ON'}">
+        <img [src]="getImageSource(state1)" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t2" id="State2"  [ngClass]="{'sensor-on': state2 === 'ON'}">
+        <img [src]="getImageSource(state2)" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t3" id="State3"  [ngClass]="{'sensor-on': state3 === 'ON'}">
+        <img [src]="getImageSource(state3)" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t4" id="State4"  [ngClass]="{'sensor-on': state4 === 'ON'}">
+        <img [src]="getImageSource(state4)" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t5" id="State5"  [ngClass]="{'sensor-on': state5 === 'ON'}">
+        <img [src]="getImageSource(state5)" style="width: 30px; height: 30px">
+      </p>
+      <p class="state t6" id="State6"  [ngClass]="{'sensor-on': state6 === 'ON'}">
+      <img [src]="getImageSource(state6)" style="width: 30px; height: 30px">
+    </p>
+
     </div>
   </div>
   <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">

src/app/modules/overview/overall-ground/overall-ground.component.scss

@@ -1,5 +1,5 @@
 button {
-  padding: 50px 30px !important;
+  padding: 30px 50px;
 }
 .red-bg {
   background-color: red !important;
@@ -105,6 +105,7 @@ p {
   }
   .state{
     position: absolute;
+    color: red;
     &.t1{
       top: 8%;
       left: 10%;
@@ -115,19 +116,59 @@ p {
     }
     &.t3{
       top: 8%;
-      left: 18%;
+      right: 12%;
     }
     &.t4{
-      top: 8%;
-      left: 18%;
+      top: 47%;
+      right: 12%;
     }
     &.t5{
-      top: 8%;
-      left: 18%;
+      top: 88%;
+      left: 47%;
     }
     &.t6{
-      top: 8%;
-      left: 18%;
+      top: 47%;
+      left: 10%;
+    }
+  }
+
+  .sensor-on {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    background: linear-gradient(#ff0000, #C70039);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    img{
+      z-index: 9;
+    }
+    &:before, &:after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 100%;
+      background: #ff0000;
+      border-radius: 50%;
+      z-index: 1;
+    }
+
+    &:before {
+      animation: sensor-on 2s ease-out infinite;
+    }
+
+    &:after {
+      animation: sensor-on 2s 1s ease-out infinite;
     }
   }
+ @keyframes sensor-on{
+    100%{
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+}
+.button-on {
+
 }

src/app/modules/overview/overall-ground/overall-ground.component.ts

@@ -72,6 +72,9 @@ export class OverallGroundComponent implements OnInit, OnDestroy{
         this.socketService$.sendMessage(str);
     }
 
+    getImageSource(state: string): string {
+      return state === 'ON' ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png';
+    }
     onMessage(message: any) {
         if (message.id == '0' && message.type === 'get') {
             this.state1 = message.state1 === '1' ? 'ON' : 'OFF';
@@ -80,8 +83,8 @@ export class OverallGroundComponent implements OnInit, OnDestroy{
             this.state4 = message.state4 === '1' ? 'ON' : 'OFF';
             this.state5 = message.state5 === '1' ? 'ON' : 'OFF';
             this.state6 = message.state6 === '1' ? 'ON' : 'OFF';
-
         }
-
+      this.Sstate1 = this.state5 === 'ON';
+      this.Sstate2 = this.state6 === 'ON';
     }
 }