🧵 WEE User Guide
Web Embroidery Editor — Guía de usuario
📑 Índice
🎯 Introducción
Wee es un editor de bordado computarizado diseñado para crear, visualizar y compartir diseños de bordado utilizando el formato abierto .ows. Está construido sobre tecnologías web y funciona directamente desde tu navegador, sin necesidad de instalar software adicional.
Con Wee puedes:
- ✏️ Dibujar formas vectoriales (líneas, curvas, polígonos)
- 🧵 Generar puntadas de bordado automáticas (Run, Satin, Tatami)
- 👁️ Visualizar tus diseños en 2D y en 3D
- 📂 Importar y exportar archivos en formato .ows (OpenWebStitch Document)
- 📚 Gestionar capas, colores y propiedades de objetos
Esta guía te acompañará paso a paso en el uso de todas las funcionalidades.
🖥️ Interfaz de usuario
Al abrir Wee, verás una pantalla dividida en varias áreas:
┌─────────────────────────────────────────────────────────────────────────────┐
│ PANEL SUPERIOR (herramientas y acciones) │
├──────────┬───────────────────────────────────────────────────┬─────────────┤
│ Panel │ Canvas │ Panel │
│ Izquierdo│ │ Derecho │
│ (64px) │ │ (280px) │
│ │ │ │
│ Botones │ │ Capas │
│ de │ │ Propiedades │
│ Herrami- │ │ Puntadas │
│ entas │ │ Telas │
│ │ │ Atajos │
├──────────┴───────────────────────────────────────────────────┴─────────────┤
│ PANEL INFERIOR (colores, simulación, estado) │
└─────────────────────────────────────────────────────────────────────────────┘
Panel superior
- Archivo: Nuevo, Abrir, Guardar, Imprimir, Importar/Exportar
- Herramientas de edición: Copiar, Pegar, Deshacer, Rehacer, Agrupar
- Vista: Cambiar entre modo 2D (vectorial), Radiografía (puntadas) y 3D
- Zoom: Acercar, Alejar, Ajustar al máximo, Tamaño real
Panel izquierdo (herramientas)
Aquí se encuentran las herramientas de dibujo y edición:
- Selector (default): Seleccionar y transformar objetos
- Nodos: Editar puntos de control de los paths
- Run: Dibujar líneas y curvas para puntadas simples
- Satin: Crear columnas para puntadas satin
- Relleno: Dibujar polígonos para relleno Tatami
- Texto: Insertar texto (en desarrollo)
- Color: Cambiar color del objeto seleccionado
Canvas
El área central donde dibujas y visualizas tus diseños. Muestra el bastidor de 18 cm × 13 cm con una cuadrícula de 10 mm.
Panel derecho
Contiene pestañas para gestionar:
- Capas: Ver, ocultar, bloquear, reordenar y seleccionar objetos
- Propiedades: Ver y modificar atributos del objeto seleccionado
- Puntadas: Configurar algoritmos de bordado
- Telas: Seleccionar tipo de tela y estabilizador
- Atajos: Lista de atajos de teclado
Panel inferior
- Paleta de colores: Colores rápidos para aplicar a objetos
- Controles de simulación: Reproducir, pausar, detener
- Barra de estado: Muestra número de objetos, zoom, coordenadas del mouse y selección actual
🔧 Herramientas de dibujo
1. Selector (Seleccionar y transformar)
La herramienta por defecto te permite:
- Seleccionar: Haz clic en un objeto para seleccionarlo.
- Mover: Arrastra el objeto seleccionado.
- Redimensionar: Usa los tiradores (cuadrados blancos) en las esquinas y lados. Mantén Shift para mantener la proporción.
- Rotar: Usa el tirador circular que aparece encima del objeto. Mantén Ctrl para rotar en incrementos de 15°.
- Duplicar: Mantén Ctrl mientras arrastras un objeto.
- Múltiple: Mantén Shift mientras haces clic para seleccionar varios objetos.
2. Run (Líneas y curvas)
Herramienta para dibujar paths de puntada simple.
Cómo usarla:
- Haz clic para crear el primer nodo.
- Haz clic en otra posición para crear el segundo nodo (se formará una línea recta).
- Para crear una curva, haz clic y arrastra desde un nodo.
- Para cerrar el path, haz clic cerca del primer nodo (aparecerá un círculo naranja).
- Presiona Enter para guardar el path.
- Presiona Backspace para eliminar el último nodo.
- Presiona Escape para cancelar el dibujo.
Estilos de puntada:
- Simple: Una sola pasada.
- Doble: Dos pasadas (ida y vuelta).
- Triple: Tres pasadas para mayor refuerzo.
Puedes cambiar el estilo desde el flyout que aparece al pasar el mouse sobre el botón Run.
3. Satin (Columnas de puntada satin)
Herramienta para crear columnas de puntada satin (ideal para letras y bordes).
Cómo usarla:
- Haz clic para colocar el primer par de puntos (izquierdo y derecho).
- Arrastra para ajustar el ancho de la columna.
- Haz clic en otra posición para crear el siguiente par.
- Para cerrar la columna, haz clic cerca del primer par.
- Presiona Enter para guardar.
Ajustes desde el flyout:
- Fracción de esquina: Controla la suavidad de las curvas (0.25 = giro rápido, 0.80 = giro suave).
- Redondear esquinas: Activa/desactiva el redondeo automático de esquinas.
- Aceptar: Guarda la configuración y abre el selector de color.
4. Relleno (Tatami)
Herramienta para crear rellenos de puntada tipo Tatami.
Cómo usarla:
- Haz clic para crear el primer nodo.
- Haz clic en otras posiciones para crear el polígono.
- Cierra el polígono haciendo clic cerca del primer nodo (aparecerá un círculo naranja).
- Presiona Enter para guardar.
Parámetros ajustables:
- Densidad: Controla la separación entre líneas de puntada.
- Ángulo: Dirección de las líneas de relleno.
5. Nodos (Edición de puntos)
Herramienta para editar nodos individuales de un path existente.
Cómo usarla:
- Haz clic en un path para entrar en modo edición.
- Haz clic en un nodo para seleccionarlo.
- Arrastra para mover el nodo.
- Haz clic en el tirador de control de una curva para ajustarla.
- Presiona Supr para eliminar un nodo.
- Mantén Shift mientras haces clic en una línea para añadir un nodo.
- Presiona Escape para salir del modo edición (guardará los cambios automáticamente).
✍️ Cómo dibujar y editar
Dibujar un path simple (Run)
- Selecciona la herramienta Run (icono de paisaje).
- Haz clic en el canvas para colocar el primer punto.
- Haz clic en otro lugar para crear el segundo punto.
- Continúa añadiendo puntos para crear la forma deseada.
- Para cerrar el path, haz clic cerca del primer punto (verás un círculo naranja).
- Presiona Enter para guardar el path.
- Verás el path en color magenta y, al cambiar a modo 3D, las puntadas generadas.
Crear una curva
- Con la herramienta Run activa, haz clic para crear un nodo.
- En lugar de hacer clic en el siguiente punto, haz clic y arrastra.
- Verás una línea de preview con un punto de control.
- Suelta el mouse para fijar la curva.
- Continúa añadiendo más nodos o cierra el path.
Seleccionar y transformar
- Cambia a la herramienta Selector.
- Haz clic en un objeto para seleccionarlo.
- Aparecerán tiradores de transformación:
- Esquinas: Redimensionar (mantén Shift para mantener proporción).
- Lados: Estirar en una dirección.
- Círculo superior: Rotar.
- Arrastra el objeto para moverlo.
Duplicar objetos
- Método rápido: Selecciona un objeto, mantén Ctrl y arrastra.
- Método con teclado: Selecciona un objeto y presiona Ctrl + D.
Mover con teclado
- Flechas: Mover 1 píxel.
- Shift + Flechas: Mover 10 píxeles.
- Ctrl + Shift + Flechas: Mover al snap de la cuadrícula (10 px).
🧵 Generación de puntadas
Wee genera automáticamente puntadas de bordado a partir de tus dibujos.
Tipos de puntadas
- Run (puntada simple)
- Una sola línea de puntadas.
- Parámetros: longitud de puntada, repeticiones.
- Satin
- Puntadas en zigzag que cubren una columna.
- Ideal para letras y bordes estrechos.
- Parámetros: densidad, ancho, fracción de esquina.
- Tatami (relleno)
- Puntadas paralelas que rellenan una superficie.
- Ideal para áreas grandes.
- Parámetros: densidad, ángulo.
Configurar parámetros de puntada
Desde el panel derecho, en la pestaña Puntadas:
- Selecciona el algoritmo (Satin, Relleno, Tatami).
- Ajusta la densidad con el deslizador.
Desde la barra contextual (48px a la derecha del canvas):
- Cuando la herramienta Run está activa, puedes ajustar la longitud de puntada y las repeticiones.
- Cuando la herramienta Relleno está activa, puedes ajustar densidad y ángulo.
Visualizar en 3D
- Haz clic en el botón 3D en el panel superior (icono de despliegue).
- Verás las puntadas generadas en un modelo tridimensional.
- Puedes hacer zoom y paneo igual que en el modo 2D.
Ver solo puntadas (modo radiografía)
- Haz clic en el botón Radiografía en el panel superior.
- Verás las puntadas sin el dibujo vectorial.
- Útil para inspeccionar la generación de puntadas.
📚 Capas y propiedades
Gestionar capas
El panel derecho contiene la pestaña Capas, donde puedes:
- Ver lista de objetos: Cada objeto aparece con su nombre, thumbnail y tamaño.
- Seleccionar: Haz clic en un objeto de la lista para seleccionarlo.
- Ocultar/mostrar: Usa el icono del ojo para ocultar o mostrar un objeto.
- Bloquear/desbloquear: Usa el icono del candado para evitar modificaciones accidentales.
- Cambiar color: Haz clic en el cuadrado de color para abrir el selector de color.
- Reordenar: Arrastra los objetos en la lista para cambiar su orden de apilamiento.
Propiedades del objeto
En la pestaña Propiedades, al seleccionar un objeto, verás:
- Tipo: Path, Imagen, etc.
- Posición X/Y: Coordenadas del centro del objeto.
- Ancho y Alto: Dimensiones en píxeles.
- Rotación: Ángulo en grados.
También puedes:
- Congelar/Descongelar: Bloquear o desbloquear el objeto.
- Visible/Oculto: Mostrar u ocultar el objeto.
- Color de borde: Cambiar el color del objeto.
- Color de relleno: Cambiar el color de relleno (para imágenes).
Alinear y distribuir
Desde la pestaña Propiedades o desde la barra contextual, puedes:
- Alinear: Izquierda, Centro, Derecha, Arriba, Medio, Abajo.
- Distribuir: Horizontal o verticalmente entre objetos seleccionados.
- Voltear: Horizontal o verticalmente.
- Tamaño exacto: Establecer ancho y alto específicos.
- Centrar: Centrar la selección en el bastidor.
📂 Importar y exportar
Importar imágenes
- Haz clic en el botón Importar imagen (icono de imagen) en el panel superior.
- Selecciona un archivo de imagen (JPG, PNG, etc.).
- La imagen se cargará en el centro del bastidor.
- Puedes redimensionarla, rotarla y moverla como cualquier otro objeto.
Importar archivos .ows (OpenWebStitch Document)
- Haz clic en el botón Cargar bordado .ows (icono de descarga).
- Selecciona un archivo con extensión .ows.
- Los objetos del archivo se cargarán en el canvas.
Importar JSON de bordado
- Haz clic en el botón Importar JSON de bordado (icono de código).
- Selecciona un archivo JSON con formato de bordado.
- Los bloques se importarán como objetos editables.
Exportar bordado (guardar .ows)
- Haz clic en el botón Exportar bordado (icono de subida).
- El archivo se descargará automáticamente con el nombre
wee_design.ows.
Guardar imagen
- Haz clic en el botón Exportar imagen (icono de lupa).
- Se descargará una captura del canvas en formato de imagen.
⌨️ Atajos de teclado
Generales
| Tecla |
Acción |
| Ctrl + Z | Deshacer |
| Ctrl + Y | Rehacer |
| Ctrl + D | Duplicar objeto seleccionado |
| Supr / Del | Eliminar objeto seleccionado |
| Escape | Deseleccionar todo / Cancelar dibujo |
| Espacio | Activar arrastre de vista (pan) |
Mover y transformar
| Tecla |
Acción |
| Flechas | Mover objeto seleccionado 1 px |
| Shift + Flechas | Mover objeto 10 px |
| Ctrl + Shift + Flechas | Mover al snap de cuadrícula (10 px) |
| Shift + Redimensionar | Mantener proporción |
| Ctrl + Rotar | Incrementos de 15° |
Alinear y voltear
| Tecla |
Acción |
| Ctrl + Shift + L | Alinear izquierda |
| Ctrl + Shift + R | Alinear derecha |
| Ctrl + Shift + C | Alinear centro horizontal |
| Ctrl + Shift + T | Alinear arriba |
| Ctrl + Shift + B | Alinear abajo |
| Ctrl + Shift + M | Alinear medio vertical |
| Ctrl + Shift + H | Voltear horizontal |
| Ctrl + Shift + V | Voltear vertical |
Dibujo (Run, Relleno, Satin)
| Tecla |
Acción |
| Enter | Guardar path o columna |
| Backspace | Eliminar último nodo |
| Escape | Cancelar dibujo actual |
| + (en Satin) | Aumentar ancho de columna |
| - (en Satin) | Disminuir ancho de columna |
Edición de nodos
| Tecla |
Acción |
| Supr / Del | Eliminar nodo seleccionado |
| Shift + clic en línea | Insertar nodo en línea |
| Escape | Salir del modo edición (guarda cambios) |
💡 Consejos prácticos
1. Dibujar con precisión
- Usa la cuadrícula de 10 mm como guía.
- Activa el snap a la cuadrícula con Ctrl + Shift + Flechas al mover objetos.
- Para dibujar líneas rectas perfectas, crea nodos sin arrastrar.
2. Ahorrar tiempo
- Usa Ctrl + D para duplicar objetos rápidamente.
- Selecciona múltiples objetos con Shift + clic para alinearlos o transformarlos juntos.
- Cambia entre herramientas con un clic en los botones del panel izquierdo.
3. Visualizar el resultado final
- Cambia a modo 3D para ver cómo quedarán las puntadas.
- Usa el modo Radiografía para inspeccionar la densidad de puntadas.
4. Gestionar colores
- Haz clic en el cuadrado de color de un objeto en la lista de capas para cambiarlo.
- Usa la paleta de colores en el panel inferior para aplicar colores rápidos.
- Al dibujar, se abre automáticamente un selector de color para elegir el color del nuevo objeto.
5. Trabajar con imágenes
- Importa imágenes para usarlas como guía o fondo.
- Las imágenes se pueden mover, redimensionar y rotar como cualquier objeto.
- Ajusta la opacidad o bloquea la imagen para evitar moverla accidentalmente.
6. Deshacer y rehacer
- Wee guarda hasta 50 pasos de deshacer.
- Usa Ctrl + Z y Ctrl + Y para navegar por el historial de cambios.
7. Organizar el proyecto
- Nombra tus objetos haciendo doble clic en su nombre en la lista de capas.
- Reordena las capas arrastrándolas en la lista.
- Oculta temporalmente objetos para trabajar sin distracciones.
8. Exportar para producción
- Al exportar en formato .ows, todos los objetos y sus puntadas se guardan.
- Puedes abrir el archivo en cualquier aplicación compatible con OpenWebStitch.
🔍 Solución de problemas comunes
No veo las puntadas en 3D
- Asegúrate de que el objeto tenga generación de puntadas activada (en propiedades de bordado).
- Verifica que el objeto no esté oculto o bloqueado.
- Cambia a modo 3D desde el panel superior.
El path no se cierra
- Acerca el mouse al primer nodo para que aparezca un círculo naranja.
- Haz clic en ese círculo para cerrar.
- O presiona Enter para guardar como path abierto.
No puedo editar un objeto
- Verifica que no esté bloqueado (icono de candado en capas).
- Asegúrate de estar en la herramienta Selector o Nodos.
📖 Glosario
- Path
- Conjunto de nodos y aristas que forman una línea o curva.
- Nodo
- Punto de control que define la geometría de un path.
- Puntada
- Unidad básica de bordado (punto de aguja).
- Run
- Puntada recta simple (una línea de puntadas).
- Satin
- Puntada en zigzag que cubre una columna.
- Tatami
- Relleno con líneas paralelas de puntadas.
- Bastidor
- Área de trabajo de 18 cm × 13 cm.
- .ows
- Formato de archivo nativo de OpenWebStitch.
📬 Contacto y soporte
Si encuentras errores o tienes sugerencias, por favor reporta el problema a través del repositorio del proyecto o contacta al equipo de desarrollo.
🧵 ¡Disfruta creando tus diseños de bordado con Wee!
