Dokumentacja integracji

01 / START

Wybierz sposób osadzania.

BlueBox przygotowuje cyfrowego bliźniaka z materiałów Twojej maszyny i przekazuje adresy oraz identyfikatory do wdrożenia. Poniższe przykłady korzystają z naszych publicznych modeli demonstracyjnych.

Nie musisz przebudowywać całej strony. Potrzebujesz możliwości dodania iframe lub własnego JavaScriptu oraz zgody w polityce bezpieczeństwa witryny.

02 / HTML

Wklej. Otwórz. Gotowe.

1. Dodaj blok HTML w miejscu, w którym ma pojawić się maszyna.
2. Wklej poniższy kod i zapisz stronę.
3. Otwórz stronę na komputerze i telefonie. Sprawdź obracanie widoku oraz ruch maszyny.

<iframe
  src="https://blueboxsimulation.com/blueboxweb/twin/embed?machine=jubilee-solder&lang=pl&presentation=scene"
  title="Cyfrowy bliźniak robota lutowniczego"
  loading="lazy"
  style="display:block;width:100%;height:460px;border:0"
></iframe>

presentation=scene pokazuje samą scenę 3D. Usuń ten parametr, aby pokazać sterowanie, informacje i dostępne opcje konfiguracji. lang=pl / lang=en wybiera język; cfg pozwala przekazać wybraną konfigurację.

Dla pełnego interfejsu przeznacz więcej wysokości, np. 720 px na komputerze i 1100 px na telefonie, lub pozostaw przewijanie wewnątrz iframe. Widoczny odnośnik do źródeł zachowuje informacje o autorach modeli demo.

03 / JAVASCRIPT

Komponent w Twoim układzie.

Załaduj moduł raz na stronie. Następnie dodaj element bluebox-twin dla każdej przygotowanej maszyny. Wewnętrzny arkusz stylów jest odseparowany przez Shadow DOM.

<script type="module"
  src="https://blueboxsimulation.com/blueboxweb/twin/bluebox-twin.js"></script>

<bluebox-twin
  machine="router5"
  brand="bluebox-pl"
  lang="pl"
  base="https://blueboxsimulation.com/blueboxweb/twin/"
  share-url="https://blueboxsimulation.com/blueboxweb/pl/maszyny/router5?cfg={cfg}"
  style="display:block;height:720px"
></bluebox-twin>

<a href="https://blueboxsimulation.com/blueboxweb/pl/maszyny/router5#product-documents"
  target="_blank" rel="noopener">Źródła i licencje modelu</a>

Na wąskim ekranie pełny interfejs rośnie w pionie. Dla samej sceny ustaw presentation="scene", tabindex="0" i opis aria-label, a kontenerowi nadaj konkretną wysokość. Spacja zatrzymuje i wznawia ruch aktywnej sceny. Przy preferencji ograniczonego ruchu scena startuje w pauzie.

04 / EVENTS

Reaguj na konfigurację.

Podepnij nasłuchiwanie przed dodaniem komponentu do DOM lub załadowaniem modułu. twinready oznacza gotowy model, twinerror błąd ładowania, a configchange przekazuje konfigurację w event.detail.cfg. Dla konfigurowalnej maszyny zdarzenie pojawia się także przy pierwszym załadowaniu.

const twin = document.querySelector('bluebox-twin');

twin.addEventListener('twinready', () => {
  console.log('Ready');
});

twin.addEventListener('twinerror', () => {
  // Show a loading error and a retry action.
});

twin.addEventListener('configchange', event => {
  console.log(event.detail.cfg);
});

Te zdarzenia dotyczą komponentu JavaScript. Iframe na innej domenie nie udostępnia ich stronie nadrzędnej. Obecnie nie ma API postMessage ani publicznych metod start/pauza/kamera; służą do tego widoczne kontrolki i klawiatura sceny.

05 / REFERENCE

Parametry komponentu.

Zmiany machine, brand, base, lang i presentation ponownie ładują bliźniaka. Nieznane lub niezgodne wartości cfg są normalizowane przez reguły konkretnej maszyny.

06 / HANDOFF

Co przygotować do wdrożenia?

Konstruktor / osoba od maszyny

• Pliki CAD, jednostki i oznaczenie części ruchomych.
• Osie i zakresy ruchu, opis cyklu oraz materiały pokazujące rzeczywisty proces.
• Warianty wyposażenia i reguły wyboru, jeśli model ma być konfigurowalny.

Developer / agencja

• Adres i technologia strony, dostęp do bloku HTML lub kodu oraz wymagania CSP.
• Miejsce osadzenia, docelowe wymiary, język i sposób otwierania zapytań.
• Test na docelowych urządzeniach przed publikacją.

Marketing / właściciel produktu

Wskaż proces, który kupujący powinien zrozumieć, zatwierdź nazwy i informacje o produkcie oraz ustal osobę odbierającą zapytania. Agencja może dalej prowadzić stronę; BlueBox dostarcza uzgodnioną część interaktywną.

07 / TROUBLESHOOTING

Gdy coś nie działa.

Ten przewodnik opisuje osadzanie przygotowanych modeli. Nie udostępnia źródłowych plików CAD, połączenia z PLC, ERP lub CRM ani publicznego edytora maszyn.

Pomoc przy integracji: tomasz@blueboxsimulation.com