Odometria

src/app/app.component.ts

@@ -20,7 +20,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
 
   private publishInterval: Subscription = new Subscription(); //Variable para publicar datos cada 10 segundos
   private publishInterval: Subscription = new Subscription(); //Variable para publicar datos cada 10 segundos
   //0202000105030705000200041109060110031000000200080101100110000106010701
   //0202000105030705000200041109060110031000000200080101100110000106010701
-  message: string = '0202000105030705000200041109060110031000000200080101100110000106010701'; //Variable para mostrar el mensaje MQTT
+  message: string = ''; //Variable para mostrar el mensaje MQTT
   @ViewChild(MapaComponent) mapaComponent!: MapaComponent;
   @ViewChild(MapaComponent) mapaComponent!: MapaComponent;
   @ViewChild(CrearPedidoDialogComponent) pedidodialog!: CrearPedidoDialogComponent;
   @ViewChild(CrearPedidoDialogComponent) pedidodialog!: CrearPedidoDialogComponent;
 
 
@@ -32,6 +32,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.subscribeToTopic(); //Nos suscribimos al inicializar la aplicación
     this.subscribeToTopic(); //Nos suscribimos al inicializar la aplicación
     this.startPublishing(); //Publicamos datos cada 10 segundos
     this.startPublishing(); //Publicamos datos cada 10 segundos
     this.subscribeToFinaliza();
     this.subscribeToFinaliza();
+    this.subscribeToTopicPosicion();
 
 
   }
   }
 
 
@@ -62,6 +63,22 @@ subscribeToTopic() {
     this.mapaComponent.ngOnInit();
     this.mapaComponent.ngOnInit();
   });
   });
 }
 }
+subscribeToTopicPosicion() {
+  this.subscription = this.mqttService.observe('equipoD/posicion').subscribe((data: IMqttMessage) => {
+    try {
+      const idUnico = parseInt(data.payload.toString()); // Convertir el mensaje a número
+      if (!isNaN(idUnico)) { // Verificar que es un número válido
+        console.log('ID de posición recibida:', idUnico);
+        this.mapaComponent.actualizarPosicionRobot(idUnico);
+      } else {
+        console.error('Mensaje MQTT no contiene un ID válido');
+      }
+    } catch (e) {
+      console.error('Error al procesar mensaje MQTT:', e);
+    }
+  });
+}
+
 subscribeToFinaliza() {
 subscribeToFinaliza() {
   this.finalizaSubscription = this.mqttService.observe('finalizacion').subscribe({
   this.finalizaSubscription = this.mqttService.observe('finalizacion').subscribe({
     next: (message) => {
     next: (message) => {
@@ -151,4 +168,6 @@ enviarMensajeMQTT(mensaje: string) {
   });
   });
 }
 }
 
 
+
+
 }
 }

src/app/app.module.ts

@@ -14,8 +14,8 @@ import { HttpClientModule } from '@angular/common/http';
 
 
 // Configuración de MQTT
 // Configuración de MQTT
 export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
 export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
-  hostname: '192.168.48.245', //Nombre de host o ip
-  port: 8083,  // Puerto de conexión
+  hostname: '192.168.43.45', //Nombre de host o ip
+  port: 9001,  // Puerto de conexión
   path: '/mqtt',
   path: '/mqtt',
   protocol: 'ws'  // Usar 'wss' para conexiones seguras
   protocol: 'ws'  // Usar 'wss' para conexiones seguras
 };
 };

src/app/mapa/mapa.component.html

@@ -8,7 +8,7 @@
          [class.selected-delivery]="SeleccionadoIdEntrega === celda.id">
          [class.selected-delivery]="SeleccionadoIdEntrega === celda.id">
 
 
       <!-- Muestra la imagen del bloque, obteniendo la ruta a través del servicio -->
       <!-- Muestra la imagen del bloque, obteniendo la ruta a través del servicio -->
-      <img [src]="'assets/' + getRutaIdDeCelda(celda.id)" [alt]="'Bloque ' + celda.id">
+      <img [src]="celda.robotPresente ? 'assets/robot-icon.png' : ('assets/' + getRutaIdDeCelda(celda.id))" [alt]="celda.robotPresente ? 'Robot' : ('Bloque ' + celda.id)">
     </div>
     </div>
   </div>
   </div>
 </div>
 </div>

src/app/mapa/mapa.component.ts

@@ -23,9 +23,10 @@ export class MapaComponent implements OnInit {
   @Input() interactivo: boolean = true;
   @Input() interactivo: boolean = true;
   @Output() celdaSeleccionada = new EventEmitter<{ id: string, idUnico: number, row: number, col: number }>();
   @Output() celdaSeleccionada = new EventEmitter<{ id: string, idUnico: number, row: number, col: number }>();
   @Output() celdaInvalidaClickeada = new EventEmitter<void>();
   @Output() celdaInvalidaClickeada = new EventEmitter<void>();
-  mapMatrix: {id: string, idUnico: number}[][] = [];
+// Extiende la definición de cada celda en tu matriz del mapa
+  mapMatrix: {id: string, idUnico: number, robotPresente: boolean}[][] = [];
   //0202000105030705000200041109060110031000000200080101100110000106010701
   //0202000105030705000200041109060110031000000200080101100110000106010701
-  @Input() mapStr: string = "0202000105030705000200041109060110031000000200080101100110000106010701"; // Cadena de texto que representa las casillas del mapa
+  @Input() mapStr: string = ""; // Cadena de texto que representa las casillas del mapa
   rows: number = 7;
   rows: number = 7;
   cols: number = 5;
   cols: number = 5;
   SeleccionadoIdRecogida: string | null = null;
   SeleccionadoIdRecogida: string | null = null;
@@ -70,12 +71,24 @@ export class MapaComponent implements OnInit {
  * Crea la matriz del mapa basada en una cadena de texto predefinida que representa los bloques del mapa.
  * Crea la matriz del mapa basada en una cadena de texto predefinida que representa los bloques del mapa.
  * Utiliza el servicio `MapaService` para crear la matriz de bloques a partir de los IDs suministrados.
  * Utiliza el servicio `MapaService` para crear la matriz de bloques a partir de los IDs suministrados.
  */
  */
-  ngOnInit(): void {
-    this.mapMatrix = this.MapaService.creaMapaMatriz(this.mapStr, this.rows, this.cols);
-
-  }
+ngOnInit(): void {
+  this.mapMatrix = this.MapaService.creaMapaMatriz(this.mapStr, this.rows, this.cols).map(row => row.map(celda => ({...celda, robotPresente: false})));
+}
 
 
+actualizarPosicionRobot(idUnico: number): void {
+  // Limpiar la posición anterior del robot
+  this.mapMatrix.forEach(row => row.forEach(celda => celda.robotPresente = false));
 
 
+  // Encontrar la nueva posición del robot y marcarla
+  for (let row = 0; row < this.mapMatrix.length; row++) {
+    for (let col = 0; col < this.mapMatrix[row].length; col++) {
+      if (this.mapMatrix[row][col].idUnico === idUnico) {
+        this.mapMatrix[row][col].robotPresente = true;
+        return;  // Finaliza la función una vez que encuentres y actualices la posición correcta
+      }
+    }
+  }
+}
 
 
 /*
 /*
   enviarPedido(pedido: any): void {
   enviarPedido(pedido: any): void {