Encontrar una pieza de repuesto a menudo puede ser una molestia, incluso para los productos más simples. Llamar al servicio de atención al cliente e intentar descifrar exactamente qué widget está intentando pedir puede ser casi imposible sin tener el SKU exclusivo o el Número de pieza necesarios. En serio, ¿quién tiene eso en la mano? Afortunadamente, SOLIDWORKS Composer tiene una manera fácil de generar contenido web 2D interactivo que puede ayudar a sondear los ensamblajes para identificar perfectamente estas partes (consulte estos ejemplos). Esta publicación del blog lo guiará a través de los cuatro pasos para crear estas imágenes interactivas a partir de sus datos CAD.

El proceso de creación de contenido interactivo realmente se reduce a 4 pasos simples:

1. Crear vistas
2. Crear enlaces 
3. Exportar imágenes como SVG
4. Instertar en HTML

Paso uno: Crear puntos de vista

Echemos un vistazo a estos pasos para comenzar a capturar sus imágenes interactivas en SOLIDWORKS Composer. Los puntos calientes pueden ser realmente útiles para seleccionar subconjuntos del conjunto de nivel superior que será el punto de partida. Determine cómo planea dividir sus ensamblajes para navegar fácilmente. Cada zona activa puede tener su propio color único al ubicar la zona activa y anular la opción de color predeterminada. También recomiendo que el cambio de nombre de estos hotspots sea descriptivo del subconjunto, estos avisos son visibles en la información sobre herramientas al pasar el cursor sobre.

Propiedades de Hotspot

Seleccioné la batería de este conjunto y creé otra vista (los enlaces para conectar las vistas se agregarán en el segundo paso para que no tenga que preocuparse por eso ahora). Usando las herramientas de transformación, es fácil crear una vista explosionada. A menudo, con más subconjuntos simplificados, esto será suficiente para tratar de encontrar la pieza adecuada, especialmente con una Lista de materiales interactiva creada. Es un proceso simple, así que también podría adjuntar uno a cada vista explosionada que cree.

Creación de una lista de materiales desde una vista explosionada

1. Crear una lista de materiales a partir de selecciones 

   -Deberá seleccionar en la ventana los elementos explosionados para incluir

2. Generar ID de lista de materiales

3. Crear globos

4. Mostrar / Ocultar tabla de lista de materiales

Por supuesto, todos estos tienen propiedades personalizadas con las que vale la pena jugar para darle un buen aspecto final, así que dedique un tiempo a familiarizarse con ellas. SIEMPRE habilite el resaltado de lista de materiales para obtener la retroalimentación entre la vista explosionada y la tabla real. Por lo general, dimensiono el texto, cambio el estilo a paramétrico y le agrego algo de sombreado a la tabla, pero en realidad todo depende de las preferencias del usuario.

Lista de materiales / lista interactiva

Propiedades de la lista de materiales

Generar vistas de partes individuales rápidamente

Es un proceso bastante rápido para crear vistas para cada parte individual a partir de las vistas explosionadas que ha creado. Comience haciendo clic derecho en una parte de la vista explosionada del subgrupo y seleccionando «Mostrar selección y ocultar otros» lo llevará a un paso. Luego, simplemente tome una foto de la vista y vuelva a la vista de explosión para repetir este proceso. En realidad, lo que estamos tratando de lograr en este primer paso es tomar una foto de cada subconjunto y luego cada pieza si desea brindar tanta profundidad a su usuario final. En algunos casos, la lista de materiales interactiva es suficiente, en otros es posible que desee ir al paso adicional hacia la parte individual.

 
Mostrar selección y ocultar otros

Vistas de todas las partes, ensamblajes y subconjuntos

Añadir botones web

Esta también es una buena oportunidad para agregar cualquier imagen de soporte a las vistas que está capturando.

Consejo profesional: tome íconos comunes para complementar lo que Composer incluye en la instalación. Inicio, atrás, adelante, diferentes vistas, cualquier cosa que pueda agregarse a la navegación puede hacerse en formato de imagen 2D y agregarse a su biblioteca de imágenes de los Talleres.

PASO DOS: Crea enlaces

Crea enlaces Esto nos lleva al segundo paso, creando los enlaces. Los enlaces se pueden crear DE casi cualquier cosa A casi cualquier cosa. Para este tipo de contenido, todo lo que necesitamos es un enlace desde nuestras zonas activas definidas para ensamblajes y piezas para vistas en ensamble a la vista adecuada. Esencialmente, profundizar desde el nivel superior, a los subconjuntos, a las vistas explosivas y finalmente a la parte final.

Ahora aquí está la salsa secreta: en lugar de vincularse con VIEW, lo vinculará con el archivo SVG que se creará desde esa vista. Por ejemplo, desde el menú principal crearé un enlace desde el punto de acceso de la batería al ‘battery_pack.svg’. Estaremos creando estos archivos en el próximo paso al exportar los archivos svg. Estos enlaces se crean dentro de los archivos SVG cuando se crean los archivos de imagen vectorial. Una vez cargado en línea o probado localmente (recomiendo Chrome), todo debería funcionar sin problemas siempre y cuando se encuentren en el mismo directorio raíz.

Ahora que ha creado sus enlaces y actualizado todas las vistas, es hora de comenzar a guardar los archivos SVG. Me gusta hacer una serie de imágenes de prueba para asegurarme de que las imágenes finales se verán bien. Bajo los talleres en ilustraciones técnicas, puede refinar los grosores de línea, agregar / eliminar color, cambiar los estilos de contorno y probar la imagen svg final a través del botón de vista previa. Aquí están los ajustes que generalmente uso para la salida SVG en blanco y negro:

Ajustes de salida SVG recomendados

PASO TRES: Exportar imágenes como SVG

El siguiente es el paso tres, exportar los archivos SVG a un directorio común. Utilizo una subcarpeta ‘_svg’ en la misma ubicación en la que se guardan los archivos HTML. Esto facilita la referencia al archivo SVG «menú principal» que luego hará referencia a todos los archivos svg posteriores. Cuando esté guardando estas imágenes, Composer también creará una serie de subcarpetas en esa misma ubicación para guardar cualquier imagen de soporte (como los iconos de navegación que mencioné anteriormente). Mantenga estos archivos en este directorio también. Cada imagen 2D compatible recibe un nuevo nombre y se hace referencia en el archivo SVG. PODRÍA crear una instancia de una sola imagen si una imagen se usa más de una, pero tendría que buscar y cambiar el nombre en el SVG y realmente no vale la pena el tiempo extra para ahorrar algunos kilobytes de espacio.

Retención de imágenes exportadas en el directorio HTML

Eso es todo para la creación de contenido interactivo. En este punto, debería poder abrir su primera imagen, en este caso nombré al primer SVG que quiero que mi usuario final comience con «Myomo Home.svg». Dado que todos los enlaces creados hacen referencia a los archivos SVG adicionales, abrirá la siguiente imagen en el navegador. Comience a probar y asegúrese de que todos sus enlaces sean válidos.

Si ve que NO están funcionando, verifique en Composer que el enlace apunta al archivo SVG en la ubicación correcta, y también desmarco el ‘Pack Linked Resource’ en las propiedades del evento para mantener los archivos SVG separados. Esto hace que la actualización de archivos sea un proceso más fácil.

Desmarque ‘Packed link resource’

PASO CUATRO: Insertar en HTML

Ahora es solo el último paso, agregar su línea de código HTML para hacer referencia al archivo SVG y cargarlo al servicio de alojamiento. Por supuesto, una búsqueda en Google sobre cómo agregar un enlace SVG al HTML, pero la línea básica necesaria es solo esto (su sintaxis será diferente):

<object data=”_svg/myomo home.svg” type=””image/svg+xml” width=”80%”>

Los datos del objeto en este caso apuntan a la subcarpeta en el directorio donde guardé todos mis archivos SVG, por lo tanto, _svg /. Luego, solo el nombre del ‘menú principal’ o ‘inicio’ svg que desea que el usuario final comience con «myomo_home.svg». Agregué el porcentaje de ancho, use un porcentaje de la página visible frente a una definición de píxeles para que los archivos svg será receptivo

Código HTML de ejemplo

El proceso es realmente bastante simple una vez que lo ejecutas. Casi todo su tiempo está en la captura de imágenes y la creación de enlaces. El lado HTML es solo una línea de código para traer ese primer archivo SVG que hará referencia al resto. Entonces, con poco esfuerzo y la ayuda de SOLIDWORKS Composer, puede crear un contenido en línea interactivo realmente genial (y no solo limitado a los catálogos de piezas). Ahora ve y pruébalo! Para obtener más información sobre cómo SOLIDWORKS Composer puede ayudarlo a agilizar las publicaciones técnicas, como los manuales de instalación, las instrucciones de ensamblaje con imágenes fáciles de seguir, llame hoy mismo a su distribuidor local.