Guía del mosaico
La rotación define cómo se orienta cada baldosa dentro del mosaico. El simulador dispone de cuatro patrones para distribuir un mismo diseño en una cuadrícula de 4 × 4.
Antes de empezar
0° conserva la orientación original. Los ángulos positivos giran en sentido horario, alrededor del centro de cada baldosa.
La flecha es una referencia ilustrativa: permite distinguir los giros incluso si el diseño real es simétrico.
Catálogo actual
La misma baldosa, una orientación por posición.
Cada baldosa avanza 90° hacia la derecha. Al bajar una fila, el inicio retrocede 90°, creando una secuencia diagonal.
| 0° | 90° | 180° | 270° |
| 270° | 0° | 90° | 180° |
| 180° | 270° | 0° | 90° |
| 90° | 180° | 270° | 0° |
Todas las baldosas conservan su orientación original. El mismo diseño se repite en las dieciséis posiciones.
| 0° | 0° | 0° | 0° |
| 0° | 0° | 0° | 0° |
| 0° | 0° | 0° | 0° |
| 0° | 0° | 0° | 0° |
Combina la orientación original con media vuelta. Las baldosas vecinas alternan entre 0° y 180°, como un tablero de ajedrez.
| 0° | 180° | 0° | 180° |
| 180° | 0° | 180° | 0° |
| 0° | 180° | 0° | 180° |
| 180° | 0° | 180° | 0° |
Repite un bloque de 2 × 2: arriba, 0° y 90°; abajo, 270° y 180°. Cada bloque reúne las cuatro orientaciones.
| 0° | 90° | 0° | 90° |
| 270° | 180° | 270° | 180° |
| 0° | 90° | 0° | 90° |
| 270° | 180° | 270° | 180° |
Configuración
El patrón se selecciona automáticamente según el producto activo. En la implementación actual, el campo codigo_sku_madre del producto indica el ID de rotación.
codigo_sku_madre recibido desde la API.id_rotacion y busca el patrón en las rotaciones cargadas desde la base de datos.Las definiciones se administran en Configuración > Rotaciones y se guardan en la tabla rotaciones. js/app.js las carga al iniciar desde modelo/rotacionesLeer.php. La función normalizeProduct() asigna el ID, drawMosaicGrid() selecciona los ángulos y drawTile() realiza el giro.
La consola del navegador registra [Rotación del mosaico] cuando cambia el producto o la rotación, e informa el ID recibido, el aplicado y si se usó la opción predeterminada.
Para incorporar otro patrón, créalo en el mantenedor con un ID, nombre y 16 ángulos. Esta guía ilustra los cuatro patrones iniciales.