Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndresLopezCorrales/La-casa-del-bordadito/llms.txt

Use this file to discover all available pages before exploring further.

The Embroidery Canvas is La Casa del Bordadito’s signature interactive feature. Users choose a pattern from a grid of thumbnails, then paint each cell of the canvas by selecting a colour from the palette and tapping matching cells. The canvas validates every tap — only the correct colour fills a cell — making it a guided, gamified recreation of the traditional Punto de Cruz (cross-stitch) technique. Progress is persisted to Firebase Realtime Database so users can close the app and continue exactly where they left off.

​
Data models

​
PatronBordado

Each embroidery pattern stored in Firebase Realtime Database maps to this Kotlin class: 
data class PatronBordado(
    var id: String = "",
    var nombre: String = "",
    var columnas: Int = 0,
    var filas: Int = 0,
    var urlImagen: String = "",
    var paleta: List<ColorPatron> = emptyList(),
    var matriz: List<List<Int>> = emptyList(),
    var porcentaje: Int = 0,
    var activo: Boolean = false
)
FieldTypeDescription
idStringRealtime Database key, assigned after fetch
nombreStringDisplay name of the pattern
columnasIntNumber of columns in the grid
filasIntNumber of rows in the grid
urlImagenStringThumbnail URL shown in the pattern selector
paletaList<ColorPatron>Ordered list of colours used in this pattern
matrizList<List<Int>>2-D grid of colour IDs; 0 means the cell is transparent/empty
porcentajeIntCached completion percentage
activoBooleanOnly true patterns are shown to customers

​
ColorPatron

data class ColorPatron(
    var id: Int = 0,
    var hex: String = "",
    var nombre: String = ""
)
Each entry in the paleta list describes one colour swatch. The numeric id matches the values stored in matriz, linking every cell to its required colour.

​
ProgresoUsuario

data class ProgresoUsuario(
    val puntosPintados: Map<String, Int> = emptyMap()
    // Key: "fila_columna"  Value: colorID
)
Progress is stored as a flat map. The key encodes the cell address as "fila_columna" (e.g. "3_7"), and the value is the colour ID that was painted. 
{
  "puntosPintados": {
    "0_0": 2,
    "0_1": 2,
    "1_3": 5,
    "2_2": 1
  }
}
This document lives in Firebase Realtime Database at: 
progreso/{uid}/{patronId}

​
How the canvas works

BordadoCanvasView is a custom View subclass that draws the entire grid directly on a Canvas.
1

Grid layout

Cell size is calculated as canvasWidth / columnas. Every cell in the matriz is drawn as a rectangle. Cells with a colour ID of 0 are left blank (transparent border only). Unpainted cells display the required colour number as centred text so users know which palette swatch to select.
2

Colour selection

The palette bar below the canvas renders one coloured square per ColorPatron. Tapping a swatch sets colorSeleccionadoId on the canvas view and highlights the selected square with a black border stroke.
3

Painting a cell

When the user taps the canvas, the touch coordinates are transformed back to model space by reversing the current scale and pan offset:
val touchX = (x - mPosX) / mScaleFactor
val touchY = (y - mPosY) / mScaleFactor
val col = (touchX / cellSize).toInt()
val fila = (touchY / cellSize).toInt()
If matriz[fila][col] matches colorSeleccionadoId, the cell is added to puntosPintados and the canvas redraws.
4

Wrong-colour feedback

Selecting the wrong colour does not paint the cell. Instead, a red border (paintError) flashes over the tapped cell for 500 ms via a Handler delay, giving immediate tactile feedback without penalising the user permanently.
5

Progress saved

Every successful paint triggers onPuntoPintado, which writes the full ProgresoUsuario object to progreso/{uid}/{patronId} in Firebase Realtime Database. The progress bar and percentage label update at the same time.
6

Pattern completed

When porcentaje reaches 100, an AlertDialog congratulates the user and offers to add the physical embroidery kit to the cart at a fixed price of 250 MXN.

​
Zoom and pan

The canvas supports multi-touch pinch-to-zoom through ScaleGestureDetector:
BehaviourDetail
Minimum zoom1.0× — canvas fills the view with no white borders
Maximum zoom10.0×
Pan boundsEnforced by applyBounds() so the canvas cannot be scrolled past its own edges
Zoom focusZooms toward the midpoint between the two pinch fingers
Grid line widthScaled inversely (strokeWidth = 1f / mScaleFactor) so lines stay visually consistent at all zoom levels
Zoom in to 4× or higher when working on dense patterns with many small cells. The colour number in each cell scales up with the canvas, making it much easier to read without squinting.

​
Admin: uploading patterns

Admins see a FAB in the pattern-selection screen. Tapping it opens a dialog where a raw JSON string can be pasted and uploaded directly to patrones/{id} in Realtime Database. New patterns are forced to activo = false on upload and must be manually activated by an admin before customers can see them.

Build docs developers (and LLMs) love

Get started for freeTalk to us