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) => {
@@ -116,7 +133,7 @@ actualizarUltimoIdDestino(nuevoDestinoId: number) {
 enviarCaminos(actual: number, paquete: number, destino: number) {
 enviarCaminos(actual: number, paquete: number, destino: number) {
   this.backendService.enviarCaminos(actual, paquete, destino).then(response => {
   this.backendService.enviarCaminos(actual, paquete, destino).then(response => {
     console.log('Caminos recibidos:', response);
     console.log('Caminos recibidos:', response);
-    
+
     // Transformación del array a string
     // Transformación del array a string
     const caminosString = this.formatearYQuitarUltimo(response);
     const caminosString = this.formatearYQuitarUltimo(response);
     console.log('Caminos formateados:', caminosString);
     console.log('Caminos formateados:', caminosString);
@@ -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

@@ -3,12 +3,12 @@
   <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
   <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
     <!-- Itera sobre cada bloque dentro de la fila del mapa, escucha el evento de click y aplica la clase si el bloque seleccionado es recogida o entrega-->
     <!-- Itera sobre cada bloque dentro de la fila del mapa, escucha el evento de click y aplica la clase si el bloque seleccionado es recogida o entrega-->
     <div *ngFor="let celda of row; let colIndex = index" class="map-block"
     <div *ngFor="let celda of row; let colIndex = index" class="map-block"
-         (click)="enCeldaClickeada(celda, rowIndex, colIndex)" 
-         [class.selected-pickup]="SeleccionadoIdRecogida === celda.id"  
-         [class.selected-delivery]="SeleccionadoIdEntrega === celda.id"> 
-         
+         (click)="enCeldaClickeada(celda, rowIndex, colIndex)"
+         [class.selected-pickup]="SeleccionadoIdRecogida === 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;
@@ -50,7 +51,7 @@ export class MapaComponent implements OnInit {
 
 
   esCeldaValida(celdaId: string, row: number, col: number): boolean {
   esCeldaValida(celdaId: string, row: number, col: number): boolean {
     if (celdaId !== '01' && celdaId !== '02') return false;
     if (celdaId !== '01' && celdaId !== '02') return false;
-    
+
     let conexionesValidas = 0;
     let conexionesValidas = 0;
 
 
     if (celdaId === '01') {
     if (celdaId === '01') {
@@ -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 {
@@ -102,7 +115,7 @@ export class MapaComponent implements OnInit {
 
 
   /**
   /**
  * @brief Emite un evento cuando se hace clic en un bloque válido.
  * @brief Emite un evento cuando se hace clic en un bloque válido.
- * 
+ *
  * Si se hace clic en un bloque no seleccionable, se emite un evento diferente y se muestra una alerta.
  * Si se hace clic en un bloque no seleccionable, se emite un evento diferente y se muestra una alerta.
  * Este método maneja la lógica de determinar si un bloque es seleccionable basándose en un listado predefinido
  * Este método maneja la lógica de determinar si un bloque es seleccionable basándose en un listado predefinido
  * y notifica a los consumidores del componente a través de eventos.
  * y notifica a los consumidores del componente a través de eventos.