Skip to content

pin-with-label.md

Latest commit

 

History

History
105 lines (88 loc) · 21.7 KB

pin-with-label.md

File metadata and controls

105 lines (88 loc) · 21.7 KB
sidebar_position 3
title Pin with Label
sidebar_label Pin with Label
description Learn how to create annotated pins with labels for marking important points and displaying information in your 3D models.
tags
code
occt
rete
blockly
typescript

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';

OCCT category icon with a stylized logo representation

Pin with Label

Pin with label is a powerful annotation tool that creates visual markers with text labels to highlight important points, display calculated values, or provide contextual information in your 3D models. These pins consist of a line connecting two points with customizable text labels, making them perfect for technical documentation, design reviews, and educational materials.

Understanding Pin with Label

Pin with label annotations combine geometric positioning with text information to create clear, professional annotations. They're essential for communicating design intent, displaying calculated properties, and marking critical features in your models.

Key components include:

  • Start Point: The point where the pin originates (usually on or near your geometry)
  • End Point: The point where the pin terminates (typically positioned for optimal label visibility)
  • Direction Vector: Controls the orientation of the label text
  • Label Text: The information to display (can be static text or dynamic calculated values)
  • Label Positioning: Offset and size controls for optimal readability

Simple Pin with Static Label

The most basic use case is creating a pin with static text to mark important points in your model.

0003211000Important Point0.30.4","version":"0.20.7","type":"blockly"}} title="Simple pin with static label" /> {\n // Define points for the pin\n const startPoint: Point3 = [0, 0, 0];\n const endPoint: Point3 = [3, 2, 1];\n const direction: Vector3 = [1, 0, 0];\n\n // Create pin with label options\n const pinOptions = new PinWithLabelDto();\n pinOptions.startPoint = startPoint;\n pinOptions.endPoint = endPoint;\n pinOptions.direction = direction;\n pinOptions.offsetFromStart = 0;\n pinOptions.label = \"Important Point\";\n pinOptions.labelOffset = 0.3;\n pinOptions.labelSize = 0.4;\n\n // Create and draw the pin\n const pin = await bitbybit.occt.dimensions.pinWithLabel(pinOptions);\n bitbybit.draw.drawAnyAsync({ entity: pin });\n}\n\n// Execute the function\nstart();","version":"0.20.7","type":"typescript"}} title="Simple pin with static label" />

This basic example demonstrates the essential components of a pin with label:

  • Start Point at origin [0, 0, 0] - where the pin begins
  • End Point at [3, 2, 1] - where the pin terminates and the label appears
  • Direction Vector [1, 0, 0] - controls label text orientation (pointing along X-axis)
  • Static Label text "Important Point" - simple text annotation
  • Label positioning with 0.3 offset and 0.4 size for good readability

Pin with Calculated Properties

A more practical application combines pin labels with calculated geometric properties, similar to how technical drawings display measurements and specifications.

radiusspherevolumeradius2.5sphereradius000volumesphere00radius43ADDradius21000Vol: {0} m3volume20.30.4sphere","version":"0.20.7","type":"blockly"}} title="Sphere with volume pin label" /> {\n // Parametric radius value\n const radius = 2.5;\n\n // Create a sphere\n const sphereOptions = new SphereDto();\n sphereOptions.radius = radius;\n sphereOptions.center = [0, 0, 0] as Point3;\n\n const sphere = await solid.createSphere(sphereOptions);\n\n // Calculate sphere volume\n const volume = await solid.getSolidVolume({ shape: sphere });\n const roundedVolume = math.roundToDecimals({ number: volume, decimalPlaces: 2 });\n\n // Format volume as text with units\n const volumeText = text.format({\n text: \"Vol: {0} m3\",\n values: [text.toString({ item: roundedVolume })]\n });\n\n // Create pin with calculated volume label\n const pinOptions = new PinWithLabelDto();\n pinOptions.startPoint = [0, 0, radius] as Point3; // Start at top of sphere\n pinOptions.endPoint = [4, 3, radius + 2] as Point3; // Position for visibility\n pinOptions.direction = [1, 0, 0] as Vector3;\n pinOptions.offsetFromStart = 0;\n pinOptions.label = volumeText;\n pinOptions.labelOffset = 0.3;\n pinOptions.labelSize = 0.4;\n\n // Create and draw the pin\n const pin = await dimensions.pinWithLabel(pinOptions);\n \n // Draw both sphere and pin\n bitbybit.draw.drawAnyAsync({ entity: sphere });\n bitbybit.draw.drawAnyAsync({ entity: pin });\n}\n\n// Execute the function\nstart();","version":"0.20.7","type":"typescript"}} title="Sphere with volume pin label" />

This example demonstrates how to combine pin labels with calculated geometric properties:

  • Parametric Sphere: Created with a configurable radius (2.5 units)
  • Volume Calculation: Uses getSolidVolume to compute the sphere's volume
  • Dynamic Formatting: Rounds volume to 2 decimal places and formats with units ("Vol: 65.45 m³")
  • Smart Positioning: Pin starts at the sphere's top surface and extends to a clear viewing position
  • Responsive Layout: Pin height adjusts based on sphere radius for consistent visual presentation

This pattern is commonly used in engineering applications where you need to annotate models with calculated properties that update automatically when geometry parameters change.