diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..855664c --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,25 @@ +name: ci +on: + push: + branches: + - main +permissions: + contents: write +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-python@v4 + with: + python-version: 3.x + - uses: actions/cache@v3 + with: + key: mkdocs-material-${{ github.ref }} + path: .cache + restore-keys: | + mkdocs-material- + - name: Install mkdocs with plugins + run: pip install mkdocs-material + - name: build documentation + run: mkdocs gh-deploy --clean --force diff --git a/README.md b/README.md new file mode 100644 index 0000000..1f2a250 --- /dev/null +++ b/README.md @@ -0,0 +1,29 @@ +Documentation +============= + +In this repository we create the website, project-wide documentation and, combined with the documentation for +each package, we use mkdocs to build a static html website and publish it to https://netherlands3d.eu/docs using +Github Pages. + +Writing your own additions +-------------------------- + +> Important: In this repository we have the project-wide docs, if you want to write documentation for a package you +> should do so in that package's `Documentation~` folder. + +To add onto this documentation you can do so using Markdown by adding or changing files in the `docs` folder. Every +file in that folder is copied and transformed onto Github Pages using Github Actions. This means that if you need +additional assets, such as images, you can add those to the docs folder as well. + +Previewing +---------- + +To preview the generated documentation you can start the `.\bin\develop.bat` script from this folder and mkdocs will +start building and watching the files in the docs folder. This also means you do not need to restart this command +on every change, mkdocs is watching the docs folder and will rebuild automatically while it is running. + +> Make sure that you have docker installed, mkdocs is ran through docker so that you do not need to install it on your +> own system. + +The location where you can preview the docs is at: http://localhost:8000. + diff --git a/bin/build.bat b/bin/build.bat new file mode 100644 index 0000000..bd60a91 --- /dev/null +++ b/bin/build.bat @@ -0,0 +1 @@ +docker run --rm -it -p 8000:8000 -v %cd%:/docs squidfunk/mkdocs-material build diff --git a/bin/develop.bat b/bin/develop.bat new file mode 100644 index 0000000..059a832 --- /dev/null +++ b/bin/develop.bat @@ -0,0 +1 @@ +docker run --rm -it -p 8000:8000 -v %cd%:/docs squidfunk/mkdocs-material diff --git a/docs/BAG.md b/docs/BAG.md new file mode 100644 index 0000000..e6aaec4 --- /dev/null +++ b/docs/BAG.md @@ -0,0 +1,45 @@ +# BAG informatie na klikken op gebouw + +!!! warning + + Dit deel van de documentatie is nog gebaseerd op een oudere versie van het project. We werken aan een nieuwe versie + die deze spoedig zal vervangen. + +Het Netherlands3D pakketje bevat een voorbeeld om BAG informatie op te halen van een pand door er op te klikken. +Importeer het BAG-information voorbeeld via de Package Manager*. + +*![img](./imgs/bag/image1.png)* + +*Je kunt de Package Manager boven in Unity vinden onder 'Window/Package Manager'* + +Open vervolgens de geimporteerde voorbeeld Scene genaamd ‘ShowBAGInformationOnClick’ + +Je kan de scene even uitproberen door op de **Play** knop te drukken. +Klik nu op een van de panden die worden ingeladen door te TileHandler, en je zult zien dat het pand wordt uitgelicht met een kleur en de daarbij behorende BAG informatie wordt getoond in een voorbeeld interface. + +![img](./imgs/bag/image2.png) + +Toevoegen aan eigen Scene/TileHandlerOm dit te laten werken in je eigen scene moeten we een aantal dingen kopieren. +Om te beginnen hebben we het Select Sub Objects script nodig die op het Buildings object staat in de TileHandler van de voorbeeld Scene. +Kopieer die dmv. rechtermuisklik, ‘Copy Component’, en vervolgens ‘Paste Component As New’ op je eigen Buildings object in je scene. +Op deze manier kopieer je ook de instellingen van het voorbeeld direct mee. + +![img](./imgs/bag/image3.png)*Verander eventueel de Selection Vertex Color om een andere selectiekleur te gebruiken* + +Kopieer dan de volgende objecten vanuit de voorbeeld Scene naar je eigen Scene: + +**InputEvents -** Dit systeem zorgt er voor dat je muis klik acties worden verstuurd + +**BAGBuildingDataLoader** - Dit systeem download de Pand BAG informatie + +**BAGResidenceDataLoader** - Dit systeem download de adressen van een pand + +**Canvas** - Dit Canvas bevat de voorbeeld interface met de twee panelen + +**EventSystem** - Deze zorgt er voor dat het Canvas aanklikbaar is. Misschien heb je deze al in je eigen Scene. Dan kan je deze overslaan. + +We moeten er ook nog voor zorgen dat het materiaal dat in je Scene wordt toegewezen aan de gebouwen ondersteuning heeft om de gebouwkleur te wijzigen. Stel daarom bij je Binary Mesh Layer van je gebouwen object bij Default Material List het Buildings_SelectionVertexColoring materiaal in. + +![img](./imgs/bag/image4.png) + +*Je kan een materiaal vanuit je Assets op het element slepen, of via het bolletje rechts opzoeken* diff --git a/docs/Beginnen.md b/docs/Beginnen.md new file mode 100644 index 0000000..1ea8b12 --- /dev/null +++ b/docs/Beginnen.md @@ -0,0 +1,132 @@ +# Beginnen met Netherlands3D in Unity + +!!! warning + + Dit deel van de documentatie is nog gebaseerd op een oudere versie van het project. We werken aan een nieuwe versie + die deze spoedig zal vervangen. + +## Systeemeisen + +Een laptop waarop je software mag installeren (nog) geen Apple en het liefst met een i5 CPU (of hoger) +en een externe GPU (grafische kaart). +Windows 10 of hoger (in ieder geval 64 bits). +Een losse muis om beter te kunnen navigeren. + +## Git installeren + +Zorg om te beginnen dat Git is geinstalleerd op het systeem. Dit maakt het mogelijk om pakketjes te installeren. + +Git is te downloaden vanaf https://gitforwindows.org/ + +Installatie met de standaard opties is voldoende. Herstart je systeem na de installatie. + +## Unity installeren + +Download en installeer Unity3D via + +Je download daarmee de 'Unity Hub'. Vanuit deze Hub kan je verschillende versies van Unity downloaden. + +'Sign in' met een bestaand Unity account, of maak eerst een nieuw account aan via 'Create account' en doe dan 'Sign in' + +Ga eventueel akkoord met het activeren van een 'FREE personal license'. + +Kies in het 'Install Unity Editor' scherm rechtsonderin 'skip installation'. Wij willen namelijk een specifieke versie gaan installeren. + +Installeer via 'Installs / Install Editor' de LTS (long term service) versie 2021.3.6f1 + +![image-20220509104007559](./imgs/beginnen/image0.png) + +Maak na het installeren in de Hub een nieuw Unity project aan via 'Projects / New Project' en kies als template '3D Core'. + +Kies een naam voor je project en de locatie op je computer + +![image-20220509104007559](./imgs/beginnen/new_project.png) + +Het project wordt vervolgens automatisch geopend in Unity. + +## Netherlands3D packages beschikbaar maken + +Met Netherlands3D worden alle packages gepubliceerd op [OpenUPM](https://openupm.com), een Unity Package +Registry voor Open Source packages. + +OpenUPM raadt aan om hun CLI tool te gebruiken om packages mee te installeren, maar het is ook mogelijk om deze +als Scoped Registry toe te voegen middels de volgende stappen: + + +* open Edit/Project Settings/Package Manager. +* Voeg een nieuwe Scoped Registry toe, of bewerk de bestaande OpenUPM verwijzing. + ``` + Name: package.openupm.com + URL: https://package.openupm.com + Scope(s): eu.netherlands3d + ``` +* Klik op Save (of Apply) + +Om een overzicht te zien van alle packages die je op deze manier kan installeren volg je deze stappen: + +* Open de Package Manager +* In de dropdown `Packages: In Project`, selecteer `My Registries` + +In dit overzicht staan alle packages die beschikbaar vanuit Netherlands3D, en andere Scopes mocht je +die ingesteld hebben staan. + +## Netherlands3D opzetten + +Open in Unity de package-manager (window package manager) + +![](./imgs/beginnen/image1.png) + +Klik op het + icoon in de linkerbovenhoek, kies voor "Add package from git URL", vul daar in "" en klik op "Add". + +![](./imgs/beginnen/image2.png) + +![](./imgs/beginnen/image3.png) + +Unity gaat nu even iets voor zichzelf doen. + +Er komt een melding om de editor opnieuw te starten, klik op Yes + +![](./imgs/beginnen/editor_herstart.png) + + + +Unity herstart nu en laat daarna, als alles goed gegaan is, de package Netherlands3D zien in de package-manager. + +![](./imgs/beginnen/image4.png) + +Onder het kopje "Samples" staat een lijst met pakketjes, dit zijn de modules in netherlands3D die je kunt toevoegen aan je eigen project. + +![](./imgs/beginnen/image5.png) + +We beginnen met het TileSystem. Dit is de module die het 3D-model van de stad laat zien. +Klik hiervoor op het knopje "Import" naast "TileSystem". + +Unity heeft nu in de Assets map een mapje "Samples" aangemaakt met daarin een mapje "Netherlands3D" en daarin een mapje met een +versienummer. In dit mapje staat alles wat je nodig hebt om het 3D-model van de stad in het project te laten zien. + +Nu maken we in de Assets map een nieuwe map aan met de naam "RenderPipeline" (let op de hoofdletters). + +![](./imgs/beginnen/create_folder.png) + +![](./imgs/beginnen/image8.png) + +Geef een rechter-muisklik op deze nieuwe map en kies via create > rendering > voor URP Asset (with Universal Renderer). + +![](./imgs/beginnen/image9.png) + +Unity geeft je nu de optie om de naam van dit nieuwe bestand te wijzigen, maar dat is niet nodig. Geef een enter om de voorgestelde naam te accepteren. Direct na het accepteren van de bestandnaam maakt Unity nog een tweede bestand aan. + +![](./imgs/beginnen/image10.png) + +De laatste handeling die we moeten doen is aan Unity vertellen dat deze, zojuist gemaakt bestandjes, gebruikt moeten worden door de Universal +Render Pipeline. Dit doen we in de project Settings ( Edit project Settings. In het project settings menu kiezen we in de linker kolom voor "Graphics".) + +![](./imgs/beginnen/image11.png) + +Boven in het Graphicsmenu klikken we op het rondje naast het invulveld bij Scriptable Render Pipeline Settings. + +![](./imgs/beginnen/image12.png) + +In het menuutje dat opent dubbelklikken we op het bestandje dat we zojuist hebben aangemaakt. + +![](./imgs/beginnen/image13.png) diff --git a/docs/Camera.md b/docs/Camera.md new file mode 100644 index 0000000..792b1f0 --- /dev/null +++ b/docs/Camera.md @@ -0,0 +1,63 @@ +# Bestuurbare Camera + +!!! warning + + Dit deel van de documentatie is nog gebaseerd op een oudere versie van het project. We werken aan een nieuwe versie + die deze spoedig zal vervangen. + +Om door de wereld te navigeren hebben we een camera nodig die we zelf kunnen besturen. +Hier hebben we natuurlijk een pakketje voor klaar staan in Netherlands3D. + +Controleer eerst of je Unity project juist is ingesteld om met invoer om te gaan. + +Onder ‘Edit/Project Settings/Player/Other options’ moet ‘Active input handling’ ingesteld staan op ‘Both’. + +Het is mogelijk dat Unity opnieuw moet starten na het toepassen. + +![img](./imgs/camera/image1.png) + + + +Importeer nu het Netherlands3D voorbeeld ‘Cameras’ uit de Package Manager: + +![img](./imgs/camera/image2.png) + +**Je kunt de Package Manager boven in Unity vinden onder ‘Window/Package Manager’* + +Verwijder eerst een eventuele standaard camera uit je eigen scene. Vervolgens kan je FreeCamera en de CameraInputSystemProvider kopieren naar je eigen scene om die camera te gebruiken. + +![img](./imgs/camera/image3.png) + +Druk vervolgens op **Play** om je scene met de nieuwe camera te testen. + + + +## Camera bediening + +### Muis + +- **Camera verslepen**: Klik en slepen Linkermuisknop +- **In- en uitzoomen**: Scrollen +- **Draai om punt**: Muiswiel indrukken of Alt + Linkermuisknop +- **Rondkijken**: Ctrl+Linkermuisknop + slepen + +### Toetsenbord + +- **W of pijl omhoog**: Naar voren schuiven +- **S of pijl omlaag**: Naar achteren schuiven + +- **A of pijl naar links**: Naar links schuiven +- **D of pijl naar rechts**: Naar rechts schuiven +- **Q**: Naar links draaien +- **E**: Naar rechts draaien +- **R**: Omhoog draaien +- **F**: Omlaag draaien +- **PageUp**: Camera omhoog bewegen +- **PageDown**: Camera omlaag bewegen + +### Gamepad + +- **Linker Stick**: Camera in richting van stick bewegen +- **Rechts Stick**: Camera draaien +- **Linker Stick indrukken**: Omhoog bewegen +- **Rechter Stick indrukken**: Omlaag bewegen diff --git a/docs/DataKlaarzetten.md b/docs/DataKlaarzetten.md new file mode 100644 index 0000000..cca30f8 --- /dev/null +++ b/docs/DataKlaarzetten.md @@ -0,0 +1,132 @@ +# Data Klaarzetten + +In de [vorige handleiding](TileSystemGebruiken.md) hebben we een unity-project gemaakt waarin we Amsterdam in 3D zien. +Hartstikke leuk, maar wat moet je doen om een ander gebied te kunnen zien. + +In deze handleiding gaan we 3D-modellen van gebouwen en terrein bemachtigen en deze voorbereiden voor gebruik in Unity. + +In de volgende handleiding gaan we het Unity-project zodanig aanpassen dat we dit nieuwe 3D-model kunnen laten zien. + +## Gebouwendata downloaden + +De TU Delft heeft voor heel nederland 3D-modellen van (bijna) alle gebouwen in nederland gegenereerd. +Deze modellen kunnen we downloaden en gebruiken. + +Ga hiervoor naar [3dbag.nl](http://3dbag.nl) en zoek het knopje "Downloads" +Op deze pagina kun je een tegel selecteren en vervolgens op "Confirm Selection" klikken. + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image1.png) + +Op de pagina die vervolgens download je de tegel in cityJSON formaat door op het bestand onder de kop File te klikken. +Let op dat je het bestand kiest dat eindigt op ".json" + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image2.png) + +Vervolgens klik je op "Pick Another Tile" totdat je alle tegels binnen het gebied dat je wilt hebben gehad hebt. + +Alle gedownloade bestanden staan nu waarschijnlijk in de downloads-folder. +Het is aan te raden deze bestanden te verplaatsen naar een nieuwe map. + +## Terreindata downloaden + +Het kadaster heeft voor heel Nederland een terreinmodel gegenereerd op basis van de BGT en luchtfotos en deze beschikbaar gesteld op + +Eenmaal per jaar wordt er een nieuwe versie gemaakt. + +In de dataset van luchtfotojaar 2020 zit een probleem waardoor de watervlakken deels ontbreken, wij raden op dit moment aan luchtfotojaar 2019 te gebruiken. + +Selecteer hier een tegel die je wilt hebben en klik op de download-link achter 3D Basisbestand Volledig. + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image3.png) + +Herhaal dit voor alle tegels binnen het gebied waarin je geïnteresseerd bent. + +De bestanden die gedownload worden zijn gezipt, dus pak ze uit en plaats alle resulterende .json-bestanden in een aparte map (als het goed is 4 stuks per tegel en een txt bestand). + +## Het omzetten voorbereiden + +Om de data van de 3dBag en de 3DBasisvoorziening soepel te kunne gebruiken in unity hebben wij een conversietool gemaakt. + +Om deze tool te downloaden ga je naar + +Op deze pagina staan alle versies van de tool die ooit gereleased zijn. +De bovenste in de lijst heeft altijd het icoontje "Latest", deze willen we downloaden. +Dit doen we door onder het kopje "Assets" op het zip-bestand te klikken. + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image4.png) + +Pak het zip-bestandje uit naar een map die je makkelijk terug kunt vinden. + +Er staan een heleboel bestanden in deze nieuwe map, maar laat je daar niet door intimideren. +Het enige bestand in deze map die voor het gebruik belangrijk is, is TileBakeTool.exe + +Om de TilebakeTool te vertellen wat deze precies moet doen hebben we een instellingenbestandje nodig. + +Voor de 3DBag en 3DBasisvoorziening hebben we deze al voorbereid voor je. + +Ga naar + +Klik op 3Dbasisvoorzieing.json. gihub laat nu de inhoud van dit bestandje zien. + +![](./imgs/dataklaarzetten/image5.png) + +Klik nu bovenin op "copy raw contents", open windows kladblok en plak de +inhoud met ctrl+v. + +![Afbeelding met tekst Automatisch gegenereerde +beschrijving](./imgs/dataklaarzetten/image6.png) + + + +Vervolgens slaan we dit bestand op onder de naam 3DBasisvoorziening.json + +Doe hetzelfde voor de bestanden "panden TUDelftLod1-2.json" en "panden TUDelftLod2-2.json" + +## Datasets omzetten + +Om de tilebaketool aan het werk te kunnen zetten hoeven we deze alleen nog maar te vertellen waar de bronbestanden staan en waar de resultaten +geplaatst moeten worden. Dit doen wij in het instellingenbestand. + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image7.png) + +"sourceFolder" verwijst naar de map waarin de gedownloade en uitgepakte bestanden met de terreindata staan. +Let erop dat hier een "/" achter de mapnaam geplaatst moet worden. + +"outputFolder" verwijst naar de map waarin de resultaten geplaatst moeten worden, aangevuld met een stuk tekst waarmee de naam van de +nieuwe bestanden moet beginnen. In het bovenstaande voorbeeld wordt de output dus geplaatst in de map 'brondata/terreintest/output' op de E-schijf, en alle bestandsnamen in de output beginnen met het voorvoegsel "Terrein-". + +> **LET OP**: 3D-Bassisvoorziening heeft voor de 2019 en de 2020 versies verschillende LOD-niveau benamingen. + +Voor de 2019-versie moet in het instellingen-bestand bij "lod :" 1.0 ingevuld worden, voor de 2020-versie moet dit 1.2 zijn. + +Wanneer we nu deze instellingen aangepast en opgeslagen hebben kunnen we de tilebaketool aan het werk zetten. Dit doen we op de volgende manier: + +Open de windows verkenner 2 keer en plaats deze naast elkaar in het scherm. +In de ene verkenner open je de map met het instellingenbestand en in de andere verkenner open je de map met de tilebaketool. + +Vervolgens klik je op het instellingenbestand, sleep je deze op tilebaketool.exe in de andere verkenner en laat hem los. + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image8.png) + +Op dit moment opent er een venster met een zwarte achtergrond, dit is de tilebaketool die vertelt wat hij op dit moment doet. + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image9.png) + +Wanneer de Tilebaketool klaar is (voor het maaiveld kan dit enkele uren duren) zijn er in de outputfolder en heleboel bestanden gemaakt. + +Voor elke vierante kilometer zijn 5 bestanden gegenereerd: + +![Afbeelding met tekst Automatisch gegenereerde beschrijving](./imgs/dataklaarzetten/image10.png) + +Het bestand dat eindigt op .bin bevat de geometrie. + +Het bestand dat eindigt op .bin.br bevat de geometrie, en is gecomprimeerd. +Deze bestanden worden gebruikt als de 3D-viewer in een webbrowser draait. + +Het bestand dat eindigt op -data.bin bevat data waaruit we kunnen herleiden welke stukjes geometrie bij een uniek object-id horen (bijvoorbeeld een bag-id) + +Het bestand dat eindigt op .gltf zorgt er voor dat je de geometrie in het .bin-bestand kan openen in paint3D of andere software die gltf-bestanden kan openen. + + + +Als bovenstaande allemaal is gelukt kan je de eigen data in Unity gaan koppelen, volg hiervoor de handleiding DataKoppelen.md diff --git a/docs/DataKoppelen.md b/docs/DataKoppelen.md new file mode 100644 index 0000000..e890238 --- /dev/null +++ b/docs/DataKoppelen.md @@ -0,0 +1,33 @@ +# Eigen data koppelen in Unity + +## RD-coördinaat kiezen + +Om je eigen data te koppelen moet je eerst een relatief RD-coördinaat bepalen binnen je eigen gebied. Het is makkelijk om hiervoor deze website te gebruiken: (https://www.msimons.nl/osm/). Klik hiervoor op een centraal punt binnen je gebied en rond het getal af in het venster rechtsonderin + +![](./imgs/DataKoppelen/image1.png) + +kopieer of onthoudt deze getallen, om ze later in Unity in te vullen. + +## Relatief coördinaat instellen in Unity + +Open je nieuwe project in Unity en zoek in de Hierachy naar 'RDOrigin'. Vul dan het geselecteerde coördinaat in onder tab 'inspector', in bovenstaand geval X 155000 en Y 463000. + +![](./imgs/DataKoppelen/image2.png) + + + +## Eigen data koppelen in Unity + +Ga in de verkenner naar het pad waar de eigen data is opgeslagen (dat kan een usb-stick, externe harddisk, of webserver locatie zijn) en kopieer het pad van een voorbeeld ".bin" bestand. + +![](./imgs/DataKoppelen/image3.png) + +en plak deze in de inspector onder het kopje 'Dataset' bij 'Path' + +![](./imgs/DataKoppelen/image4.png) + +Wijzig de coördinaten in {x} en {y}, zoals hierboven te zien is en wijzig alle \ in /. Selecteer en kopieer deze regel voor een eventueel ander LOD niveau (voor gebouwen en 3D Basisvoorziening 2020) + +Wijzig dan alleen het lod getal in de regel naar de gewenste. + +Herhaal deze handeling ook voor de gebouwen (hier zelfs twee keer voor verschillende LOD's) en wanneer alle paden correct zijn ingevuld, kan je op play drukken. Als het goed is zie je dan de terreinen en gebouwen van je eigen gebied in beeld. Het kan zijn dat de camera nog niet helemaal goed staat. Kijk daarvoor in de handleiding 'Camera.md' \ No newline at end of file diff --git a/docs/Embedding.md b/docs/Embedding.md new file mode 100644 index 0000000..74c3714 --- /dev/null +++ b/docs/Embedding.md @@ -0,0 +1,62 @@ +Embedding Netherlands3D on Your Website +======================================= + +You can easily embed Netherlands3D on your own website using an iframe. This allows you to showcase the 3D +representation of the Netherlands directly within your web pages. You can also customize the location and features +displayed using a query string. + +## Using an Iframe + + + +To embed Netherlands3D with [Rijksdriehoekformaat (EPSG:28992)](https://epsg.io/28992) coordinates, use the following +HTML code snippet. Replace the `src` attribute value with the URL of the Netherlands3D digital twin you'd like to embed: + +```html + + +``` + +* **src**: Set this attribute to the URL of the Netherlands3D digital twin. You can customize the location and features + using the query string. + +* **width and height**: Adjust these attributes to define the dimensions of the iframe on your webpage. Make sure the + width + fits your design, and the height provides an optimal viewing experience. + +* **frameborder**: Set this attribute to "0" to remove the iframe border. + +## Configuring Location and Features + +You can customize the location and features displayed in your embedded Netherlands3D using a query string. In the query +string, the origin parameter should follow the format `origin=X,Y,elevation`, where `X` and `Y` is the position of +the camera in [Rijksdriehoekformaat (EPSG:28992)](https://epsg.io/28992) coordinates and elevation is the desired +viewing elevation. + +Here's an example URL with a query string for your reference: + +``` +https://netherlands3d.eu/twin/?origin=161088,503050,300&features=terrain,buildings,trees,sun +``` + +* **origin**: This parameter sets the initial view location in the + [Rijksdriehoekformaat (EPSG:28992)](https://epsg.io/28992) coordinate system. It follows the format + `origin=X,Y,elevation`, where elevation is a value between `0` and `1400`. + +* **features**: Use this parameter to specify which features to display in the digital twin. You can include multiple + features, separated by commas. + +## Using the Setup Wizard + +For an even easier way to generate the query string with the desired configuration, you can visit the +[Netherlands3D Setup Wizard (https://netherlands3d.eu/twin/)](https://netherlands3d.eu/twin/). This interactive tool +allows you to select the location, features, and other options, and it generates the corresponding query string for your +iframe. + +Once you have the query string, insert it into the `src` attribute of your iframe code, and you'll have a fully +customized embedded Netherlands3D digital twin on your website. diff --git a/docs/Layers.md b/docs/Layers.md new file mode 100644 index 0000000..236fca9 --- /dev/null +++ b/docs/Layers.md @@ -0,0 +1,77 @@ +Layers in Netherlands3D +======================================= + +## Layers +Layers in Netherlands3D are objects that have an effect on the 3D environment. Layers are hierarchical, similar to GameObjects in Unity. Because of this. the Layer data structure makes use of Unity's GameObject/Transform hierarchy in order to minimize custom coding of the data structure, and to visualize the data structure in the Unity Editor hierarchy. + +## Functionality of layers +All layers have the following basic functionality: +- Parenting: This works similar to the Unity Hierarchy. +- Reordering: This works similar to changing the sibling index within the same parent in the Unity hierarchy. +- Visibility: This works similar to setting a GameObject active/inactive in the Unity hierarchy. +- Properties: Each layer can have its own settings specific to the layer type, or even more specific to the content of the layer. This is similar to how the inspector in Unity will display all components and serialized fields of a GameObject. + +The layer data structure hierarchy is managed by the class [`LayerData`](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerData.cs). There should only be 1 LayerData object in the scene. + +## Layer types +Layers are split in 2 categories: +1. Regular layers that do not need their own GameObject hierarchy (basic layers) +2. Layers that do require a GameObject hierarchy (referenced layers) + +### Basic layers +The first category of layers is the most simple. These layers are an extension of the `LayerNL3DBase` class. + +* **[Folder layer](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerTypes/FolderLayer.cs)**: + +The most simple form of a Layer in this category is a `FolderLayer`. This layers has no functionality, except for providing the user with a way to organise other layers. It is similar to an empty GameObject. + +* **[Polygon selection layer](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerTypes/PolygonSelectionLayer.cs)**: + +A `PolygonSelectionLayer` is a layer that represents a polygon in the 3D environment. This layer can be created by providing a `List` of points (either by user input or from another source). This will create a layer in the hierarchy, with a visualisation that will listen to user input so that the layer can be selected by the user by clicking on the visualisation in the scene. + +### Referenced layers +In case a layer has an internal hierarchy (such as a hierarchy of object parts, or a container with different tile objects) a layer can be integrated in the layer system as a referenced layer. A referenced layer exists outside of the Layer data structure, but has a connection to it through a [`ReferencedProxyLayer`](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerTypes/ReferencedProxyLayer.cs) . The ReferencedProxyLayer will pass the required actions that affect the layer to its reference outside of the layer hierarchy, thereby making the referenced layer comply with the layer functionalities. +In order to do this, the layer object outside of the hierarchy must have an extension of the abstract class `ReferencedLayer` attached to it. This class will automatically create the `ReferencedProxyLayer`, thereby creating the connection to the layer system. + +The following Layers are referenced layers: +* **[Hierarchical object layer](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerTypes/HierarchicalObjectLayer.cs)**: + +A `HierarchicalObjectLayer` is an object that can be placed in the 3D environment. By default, this object can be moved by the transform handles. Objects of this type either come from a library of developer defined objects, or by user uploads. The most simple Hierarchical object layer is a GameObject with a `MeshFilter`, `MeshRenderer`, `Collider`, and `HierarchicalObjectLayer` component attached. More complex Hierarchical object layers can have nested GameObjects with each their own internal logic. + +* **[Cartesian tile layer](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerTypes/CartesianTileLayer.cs)**: + +A `CartesianTileLayer` is a layer that makes use of the Netherlands3D custom tile file format. The objects and tiles in the layer are managed by the `TileHandler` and through the class `CartesianTileLayer` can interact with the layer system. For more information see the section on Cartesian Tiles. + +* **[3D tile layer](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerTypes/Tile3DLayer2.cs)**: + +A `Tile3DLayer2` is a layer that makes use of the 3D Tiles file format. These layers are managed by `Read3DTileset` and through the class `Tile3DLayer2` can interact with the layer system. For more information see the section on 3D Tiles. + +* **[Object scatter layer](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerTypes/ObjectScatterLayer.cs)**: + +An `ObjectScatterLayer` is a special type of layer that will scatter the combined mesh of a `HierarchicalObjectLayer` in the area defined by a `PolygonLayer`. To do this, create a `PolygonLayer` and make a `HierarchicalObjectLayer` the child of the `PolygonLayer`. This will convert the `HierarchicalObjectLayer` to an `ObjectScatterLayer`. Unparenting the ObjectScatterLayer from a PolygonLayer will revert the layer back to a `HierarchicalObjectLayer`. The `ObjectScatterLayer` has scatter settings that determine how the scattering should occur. + +!!! warning + + The scattering is achieved through GPUInstancing, and therefore the mesh and material should support this. All objects in the ObjectLibrary support scattering. + +## Layer UI +Each Layer can have an associated UI component defined by the class [`LayerUI`](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerUI.cs). This component controls the UI elements associated with the layer. Interacting with the LayerUI will affect the corresponding `LayerNL3DBase`. +The Layer UI hierarcy is managed by [`LayerManager`](https://github.com/Netherlands3D/twin/blob/main/Assets/Scripts/Layers/LayerManager.cs). This class holds a references to the layer type icons that are requested by LayerUI. + +## Creating your own layers of an existing type +In order to add one of your own layers as an option through the existing UI, the following steps should be followed: +1. Create a prefab with the layer object. Make sure this object has a component of either `LayerNL3DBase` or `ReferencedLayer` attached to it. +2. Instantiate the prefab. If this is done in the existing LayerPanel UI, add a button or toggle in the prefab `AddLayerPanel.prefab` in the appropriate panel sub section. Then have the script that controls the button or toggle logic instantiate the prefab made in step 1. + +## Creating your own layers of a new type +Follow the following steps to create a new layer type: +1. Choose if the new layer type can be a simple layer (direct extension of `LayerNL3DBase`) or it needs to be a more complex referenced layer (extension of `ReferencedLayer`). +2. Extend the chosen class and implement the required methods. +3. Add your own logic to the new class +4. Add a reference to the appropriate type and icon in LayerManager to ensure the new layer does not use the default `?` icon. + +## Layers and Functionalities +Specific layers or specific types of layers can also be enabled/disabled with the functionalities system. Follow these steps to do this: +1. Add a `FunctionalityListener` to the prefab of the layer. Add the functionality you want to link the layer to, and in the `OnDisableFunctionality` event, add a function that will destroy the gameObject itself. This will clean up any active layers when disabling the functionality. +2. For any buttons that instantiate the prefab above, add a `FunctionalityListener` to the button that will enable/disable the button's gameObject when the functionality is enabled/disabled respectively. This will ensure the user cannot instantiate layers from functionalities that are disabled. +3. (Optional) In case your layers should by default spawn when the functionality is enabled, add a PrefabSpawner script to the scene where the functionality and the associated prefab are set in the inspector. diff --git a/docs/SelectionTools.md b/docs/SelectionTools.md new file mode 100644 index 0000000..3975dca --- /dev/null +++ b/docs/SelectionTools.md @@ -0,0 +1,32 @@ +# SelectionTools (Geavanceerde gebruikers) + +Het 'SelectionTools' pakket bied enkele voorbeelden om gebieden of lijnen te selecteren door met de muis te tekenen. +Deze tool is bedoeld voor geavanceerde Netherlands3D gebruikers met Unity ervaring. +Deze tools kunnen gebruikt worden om, als voorbeeld, API's te bevragen met boundingbox of polygoon queries. + +## Rechthoekig gebied selecteren + +Om een rechthoeking gebied te selecteren gebruik je de AreaSelection tool, te vinden in de voorbeeldscene 'AreaSelection' + +Om deze tool samen te laten werken met de FreeCamera moet **Shift ** ingedrukt worden om vervolgens met de klik+sleep actie van de muis de selectie te maken. (Shift blokkeert de sleepactie van de camera) + +De output van dit systeem is vervolgens een event met een Bounds object. +In het voorbeeld wordt deze omgezet naar een RD boundingbox zoals deze vaak gebruikt wordt in API's, en in beeld getoond als tekst: + +**bbox=120700,486800,121200,487200** + +## Polygoon selecteren + +De voorbeeldscenes PolygonSelection en PolygonSelection_WithHandles laten een voorbeeld zien van het PolygonSelection systeem waarmee een gebruiker met een muisklik punten kan plaatsen om zo de lijn van een polygoon te tekenen. + +De scenes gebruiken dezelfde tool, alleen is bij de 'WithHandles' scene de mogelijkheid om handles (handgrepen) te plaatsen bij het plaatsen van punten ingeschakeld. Deze handles maken het mogelijk om de lijn van de polygoon te 'finetunen' door de punten te verschuiven na het tekenen van de vorm. + +De output van het PolygonSelection systeem is een event met een Vector3 List. Deze lijst bevat alle coordinaten van de punten in de volgorde hoe deze geplaatst zijn. +Met de 'Winding Order' kan deze lijst op volgorde gezet worden zodat de punten met de klok mee lopen, of juist tegen de klok in. + +Met twee losse events voor 'Selected Polygon Area' en 'LineHasChanged' kan de lijst verstuurd worden bij het plaatsen van een punt, en/of bij het afronden/sluiten van de vorm of lijn. + +## Lijn plaatsen + +HetPolygonSelection systeem kan ook niet-gesloten polygonen tekenen. In dat geval hebben we het over een lijn. +Door 'Require Closed Polygon' uit te zetten kan een polygoon afgerond worden met **Enter ** zonder dat deze afgesloten wordt. diff --git a/docs/TileSystemGebruiken.md b/docs/TileSystemGebruiken.md new file mode 100644 index 0000000..bd50dc0 --- /dev/null +++ b/docs/TileSystemGebruiken.md @@ -0,0 +1,24 @@ +# TileSystem gebruiken + +Om het TileSystem in actie te zien gaan we in de assetsFolder naar de eerder geimporteerde Sample. +In deze sample openen we de map "Scenes". + +![](./imgs/beginnen/image14.png) + +Vervolgens slepen we het bestand "LoadLayersFromScene" naar de hierarchy. + +![](./imgs/beginnen/image15.png) + +Om een goed beeld te kunnen krijgen willen we de Main Camera nog even verplaatsen. Dit doen we door in de Hierarchy de Main Camera aan te klikken: + +![](./imgs/beginnen/image16.png) + +En vervolgens in de inspector de Position en Rotation aan te passen. + +![](./imgs/beginnen/image17.png) + +Nu we toch in de Inspector voor de camera bezig zijn zetten we ook onder het kopje "Camera", "Projection", "Clipping plane" de afstand voor Far even van 1000 op 6000. + +Klik vervolgens op **"Play"**, et voila, we zien het 3D-model van Amsterdam. + +Je bent nu klaar om met de volgende stap te beginnen "het koppelen van je eigen dataset", volg hiervoor de handleiding 'DataKlaarzetten.md' diff --git a/docs/WMSLagen.md b/docs/WMSLagen.md new file mode 100644 index 0000000..0997646 --- /dev/null +++ b/docs/WMSLagen.md @@ -0,0 +1,30 @@ +# WMS functionaliteiten toevoegen + +## Werkwijze + +We hebben de mogelijkheid gebouwd om WMS services (pixel gebaseerde api) binnen Netherlands 3D in te laden. Hiervoor is de sample WMS-layer beschikbaar in de package. Importeer deze en sleep de map op de assets map in Unity (hiermee voorkom je dat bij updates de laag en eigen instellingen wordt overschreven). + +![](./imgs/wms/image01.png) + +Ga naar de map scenes en sleep onderstaande scene in de hierarchy + +![](./imgs/wms/image02.png) + +![](./imgs/wms/image03.png) + +Sleep vervolgens de items uit het Canvas van de ingesleepte scene, naar het canvas in de hoofdscene. Doet dit ook met de wmsLayerManager, maar sleep deze in de root. + +![](./imgs/wms/image04.png) + +Het enige wat nu nog moet gebeuren is de Renderpipeline instellingen wijzigen. Open de project settings via het edit menu van Unity. + +![](./imgs/wms/image05.png) + +En zoek naar de graphics instellingen. + +![](./imgs/wms/image06.png) + +Klik op het bolletje helemaal rechts en kies voor de UniversalRP-HighQuality pipeline asset. + +Sluit dit venster en probeer de functie uit door op play te drukken. + diff --git a/docs/Zonnestand.md b/docs/Zonnestand.md new file mode 100644 index 0000000..adb99ad --- /dev/null +++ b/docs/Zonnestand.md @@ -0,0 +1,20 @@ +# Zonnestand + Shaduwen + +Het Netherlands3D pakketje bevat een voorbeeld om de zonnestand en schaduwen te laten bepalen aan de hand van een locatie en de datum/tijd. + +Importeer het voorbeeld vanuit de Package Manager*: +![img](./imgs/zonnestand/image1.png)*Je kunt de Package Manager boven in Unity vinden onder ‘Window/Package Manager’* + +![img](./imgs/zonnestand/image2.png) + +De voorbeeld scene heeft een prefab met de naam ‘Sun’. +Deze bevat het script SunTime waarmee je de locatie en tijd kan instellen. +Stel de GPS locatie van dit script in via de Inspector: + +![img](./imgs/zonnestand/image3.png) + +Het Canvas in de Scene laat een voorbeeld interface zien waarmee een gebruiker de tijd en animatie snelheid kan aanpassen. +Je kan de Sun prefab kopieren naar je eigen scene. +Zorg er wel voor dat je een eventueel bestaand ‘Directional Light’ verwijder uit je scene. +De Directional Light in de Sun prefab gaat namelijk zorgen voor de belichting en schaduwen. +Wanneer je ook het stukje interface wil gebruiken kan je ook het Canvas en EventSystem naar je eigen scene kopieren. \ No newline at end of file diff --git a/docs/_nieuws.md b/docs/_nieuws.md new file mode 100644 index 0000000..a379a67 --- /dev/null +++ b/docs/_nieuws.md @@ -0,0 +1,29 @@ +## Nieuws + +
+ +- ![](images/homepage/artikelen/get-started-in-5-minutes.png) + + __Beginnen in 5 minuten__ + + Ontdek de mogelijkheden van Netherlands3D. + + [Lees verder :octicons-arrow-right-24:](#) + +- ![](images/homepage/artikelen/to-cloud-or-not-to-cloud.png) + + __Je eigen cloud, of niet?__ + + Beheer je Netherlands3D zelf of laat je je ontzorgen? + + [Vind het uit :octicons-arrow-right-24:](#) + +- ![](images/homepage/artikelen/customization.png) + + __Toon de kaart die jij wil__ + + Wil je jouw project, stad, gemeente of provincie laten zien? Dat kan. + + [Ontdek de opties :octicons-arrow-right-24:](#) + +
diff --git a/docs/_uitgelicht.md b/docs/_uitgelicht.md new file mode 100644 index 0000000..673ef95 --- /dev/null +++ b/docs/_uitgelicht.md @@ -0,0 +1,29 @@ +## Uitgelicht + +
+ +- :octicons-clock-16: __Beginnen in 5 minuten__ + + --- + + Ontdek de mogelijkheden van Netherlands3D. + + [Lees verder :octicons-arrow-right-24:](organisations/beginnen-in-vijf-minuten.md) + +- :octicons-cloud-16: __Je eigen cloud, of niet?__ + + --- + + Beheer je Netherlands3D zelf of laat je je ontzorgen? + + [Vind het uit :octicons-arrow-right-24:](organisations/hosting.md) + +- :octicons-paintbrush-16: __Toon de kaart die jij wil__ + + --- + + Wil je jouw project, stad, gemeente of provincie laten zien? Dat kan. + + [Ontdek de opties :octicons-arrow-right-24:](organisations/personalisering.md) + +
diff --git a/docs/_wat-is-netherlands3d.md b/docs/_wat-is-netherlands3d.md new file mode 100644 index 0000000..204ffe9 --- /dev/null +++ b/docs/_wat-is-netherlands3d.md @@ -0,0 +1,81 @@ +## Wat is Netherlands3D? + +
+ +### Visualiseren van data + +
+_Zoek je een mogelijkheid om data aantrekkelijk en in samenhang in +beeld te brengen in een 3D omgeving? Dat kan in Netherlands 3D!_ + +Netherlands3D maakt het mogelijk datasets vanaf verschillende bronnen +en in verschillende bestandsformaten te koppelen en in samenhang te +visualiseren. Heb je een interessante dataset of link in GeoJSON of WFS +formaat? Ontdek dan hoe deze er in Netherlands 3D uit ziet. +Gecombineerd met andere datasets en in 3D context geeft dit vaak nèt +dat beetje extra informatie dat je nodig hebt. + +Naast het visualiseren van data, zijn er ook een aantal functionaliteiten +beschikbaar die je kunt inzetten om jouw project tot een succes te +maken. Kies de relevante tools simpelweg bij het opstarten van +Netherlands 3D. +
+
+ +
+ +### Wat onderscheid Netherlands3D van andere viewers? + +
+_Netherlands 3D richt zich op data-visualisatie. Het aantrekkelijk, +integraal en begrijpelijk verbeelden van data staat centraal._ + +Wat Netherlands 3D verder onderscheid is dat jij als gebruiker zelf kiest +welke data er gevisualiseerd wordt en welke functionaliteiten je daarbij +wilt gebruiken. Dus geen lijsten met vooraf gedefinieerde kaartlagen +maar slechts koppelmogelijkheden naar databronnen en externe +applicaties waar jij op dat moment in jouw project behoefte aan hebt. +Denk aan bronnen van jouw lokale server, het landelijke dataloket PDOK +of diverse dataportalen van gemeentelijke en provinciale organisaties. +
+
+ +
+ +### Heel Nederland uniform en consistent beschikbaar + +
+_Netherlands 3D combineert voor heel Nederland een aantal basis +datasets waardoor een eenduidig 3D beeld van Nederland ontstaat._ + +Op dit moment zijn dat de 3D BAG, de 3D Basisvoorziening en boomlocaties +uit de BGT. Het gezamenlijke 3D beeld dat ontstaat kun je gebruiken als +input voor jouw project. Groot voordeel is dat deze brondata voor heel +Nederland uniform en consistent beschikbaar wordt gemaakt. Dus altijd +gemakkelijk en vanaf één plek te gebruiken. Het kan ook input zijn als +basis voor rekenmodellen en simulatiesoftware of juist de output +daarvan zijn zodat uitkomsten aan een breed publiek getoond kunnen +worden. Voor het realiseren van koppelingen tussen Netherlands 3D en +reken- simulatie- en analysetools, nodigen we iedereen actief uit om +mee te ontwikkelen. +
+
+ +
+ +### 3D omgeving op maat + +
+_Wil iets specifieks dat meer aansluit bij jouw project of organisatie?_ + +Netherlands 3D biedt een oplossing om een eigen 3D omgeving op maat +in te richten. Bijvoorbeeld een aangepaste startlocatie of vooraf +ingestelde functionaliteiten en datasets. Meldt je dan als organisatie aan. +Tot slot is er voor ontwikkelaars de mogelijkheid om actief mee te +bouwen aan het platform. + +We nodigen iedereen dan ook actief uit om +met ons mee te denken en te bouwen. En wil je dat allemaal niet? +Gebruik dan gewoon [de basisviewer van Netherlands 3D hier](https://netherlands3d.eu/twin/)! +
+
diff --git a/docs/about-us/index.md b/docs/about-us/index.md new file mode 100644 index 0000000..8d60953 --- /dev/null +++ b/docs/about-us/index.md @@ -0,0 +1,24 @@ +--- +hide: + - navigation +--- + +# Over Ons + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales est nec dolor luctus cursus. Sed tincidunt orci +fermentum varius mattis. Quisque ut molestie augue, sit amet ornare sem. Praesent sit amet auctor nisi. Vivamus ornare +tincidunt arcu in euismod. Proin ipsum ante, semper et sollicitudin eget, venenatis maximus nulla. Suspendisse potenti. +Nulla facilisi. + +Fusce rutrum mi vel purus interdum imperdiet. Curabitur tempus fermentum odio et venenatis. In hac habitasse platea +dictumst. Praesent pellentesque odio vel suscipit malesuada. Nulla facilisis mauris euismod pulvinar ullamcorper. Ut +tincidunt lacus vitae nibh faucibus iaculis. Phasellus vitae risus ex. + +Donec at orci urna. Ut ac turpis nec quam luctus cursus. Nunc lobortis quam vitae iaculis dignissim. Vestibulum pretium, +nulla id volutpat luctus, mauris leo rhoncus tortor, ut fringilla massa purus in erat. Donec blandit id sem et accumsan. +Pellentesque at eleifend urna. Mauris quis odio odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. +Vivamus sollicitudin magna libero, eget congue odio mollis gravida. Praesent arcu tellus, ultrices id porttitor vitae, +tincidunt quis dolor. Vivamus aliquet nulla non augue molestie, sed elementum nisl maximus. Curabitur ut augue eu urna +ornare hendrerit sed at dolor. Duis vulputate ullamcorper viverra. Proin id urna sed turpis euismod blandit. Etiam +gravida ipsum eu ligula lacinia, ut ultricies magna porta. Cras sem metus, commodo tincidunt ultricies fringilla, +facilisis sit amet enim. diff --git a/docs/articles/index.md b/docs/articles/index.md new file mode 100644 index 0000000..ef8a57a --- /dev/null +++ b/docs/articles/index.md @@ -0,0 +1,6 @@ +# Artikelen + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales est nec dolor luctus cursus. Sed tincidunt orci +fermentum varius mattis. Quisque ut molestie augue, sit amet ornare sem. Praesent sit amet auctor nisi. Vivamus ornare +tincidunt arcu in euismod. Proin ipsum ante, semper et sollicitudin eget, venenatis maximus nulla. Suspendisse potenti. +Nulla facilisi. diff --git a/docs/articles/posts/nieuwe-website.md b/docs/articles/posts/nieuwe-website.md new file mode 100644 index 0000000..54be17f --- /dev/null +++ b/docs/articles/posts/nieuwe-website.md @@ -0,0 +1,39 @@ +--- +draft: false +date: 2024-04-25 +categories: + - Nieuws +--- + +# Nieuwe website + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales est nec dolor luctus cursus. Sed tincidunt orci +fermentum varius mattis. Quisque ut molestie augue, sit amet ornare sem. Praesent sit amet auctor nisi. Vivamus ornare +tincidunt arcu in euismod. Proin ipsum ante, semper et sollicitudin eget, venenatis maximus nulla. Suspendisse potenti. +Nulla facilisi. + + + +Fusce rutrum mi vel purus interdum imperdiet. Curabitur tempus fermentum odio et venenatis. In hac habitasse platea +dictumst. Praesent pellentesque odio vel suscipit malesuada. Nulla facilisis mauris euismod pulvinar ullamcorper. Ut +tincidunt lacus vitae nibh faucibus iaculis. Phasellus vitae risus ex. + +Donec at orci urna. Ut ac turpis nec quam luctus cursus. Nunc lobortis quam vitae iaculis dignissim. Vestibulum pretium, +nulla id volutpat luctus, mauris leo rhoncus tortor, ut fringilla massa purus in erat. Donec blandit id sem et accumsan. +Pellentesque at eleifend urna. Mauris quis odio odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. +Vivamus sollicitudin magna libero, eget congue odio mollis gravida. Praesent arcu tellus, ultrices id porttitor vitae, +tincidunt quis dolor. Vivamus aliquet nulla non augue molestie, sed elementum nisl maximus. Curabitur ut augue eu urna +ornare hendrerit sed at dolor. Duis vulputate ullamcorper viverra. Proin id urna sed turpis euismod blandit. Etiam +gravida ipsum eu ligula lacinia, ut ultricies magna porta. Cras sem metus, commodo tincidunt ultricies fringilla, +facilisis sit amet enim. + +Pellentesque nibh dui, iaculis at vehicula in, iaculis ut dui. Donec ac nisl eget massa pellentesque vehicula. Morbi +interdum magna ac leo malesuada commodo. Nulla ac risus ut lectus eleifend semper. Nullam placerat sem quis lectus +aliquam tristique. Nullam ante nisl, laoreet ut elit eu, laoreet gravida ex. Aenean eget sagittis magna. Donec non +faucibus leo. Nullam rutrum euismod nisl, sed consequat arcu imperdiet et. Vivamus sit amet mi placerat, luctus sem a, +posuere sem. Aliquam feugiat est eget risus dapibus efficitur. + +Nam vehicula sollicitudin nibh, at efficitur ligula tincidunt in. Pellentesque turpis nibh, tempor vitae consequat non, +molestie ac turpis. Duis tempor vulputate urna, non iaculis velit faucibus vel. Aliquam erat volutpat. Donec eu +porttitor lacus, in dignissim odio. Nam at laoreet sapien, pharetra scelerisque sapien. Nulla sed quam pretium, +pellentesque dolor pharetra, aliquam nulla. diff --git a/docs/developers/basis-in-een-uur.md b/docs/developers/basis-in-een-uur.md new file mode 100644 index 0000000..8248ef7 --- /dev/null +++ b/docs/developers/basis-in-een-uur.md @@ -0,0 +1,154 @@ +# Basis in een uur + +!!! warning + + Dit deel van de documentatie is nog gebaseerd op een oudere versie van het project. We werken aan een nieuwe versie + die deze spoedig zal vervangen. + +Naast het beginnen vanaf een nieuw project om daar samples van de package in te laden, bieden we nu ook een basis layout aan, waar de volgende samples uit de package al in zitten: + +- Freecamera +- Sun +- Tilehandler +- BAGBuildingDataLoader +- BAGResidenceDataLoader +- wmsLayerManager +- Eenvoudige layout met canvas Group voor automatisch uitlijnen vensters +- plek voor eigen logo + +## Repository opzetten + +Hiervoor heb je een git-client nodig, zoals [tortoise](https://tortoisegit.org/download/) (uitgebreid) of [Github Desktop](https://desktop.github.com/) (eenvoudig). download en installeer één van deze en ga naar de website waar je repositories kan maken (in dit geval Gitlab). + +Maak een nieuwe repository aan. + +*![img](../imgs/basis/image1.png)* + +*New project/repository* + +Klik op blank project. + +*![img](../imgs/basis/image2.png)* + +Vul hier een project naam en andere gegevens in....let op dat je in ieder geval een README file aanvinkt. Public of private is een eigen keus, maar de beste is natuurlijk public (om deze reden is Netherlands 3D ook public). + +*![img](../imgs/basis/image3.png)* + +Klik op create project en we zijn zover dat we de (cloud) omgeving kunnen gaan clonen naar je lokale machine. + +*![img](../imgs/basis/image4.png)* + +In mijn geval gebruik in de SSH versie, omdat ik een Putty-key geïnstalleerd heb (extra beveiligingssleutel, zodat je weet dat je alleen van deze site iets up- of download). Klik op "copy URL" en ga naar een verkenner in windows op de plek waar je de lokale repository wilt plaatsen. + +"*Deze handleiding volgt de Tortoise manier*" + +Klik met de rechtermuisknop op je verkenner en kies bij Tortoise voor "clone" + +*![img](../imgs/basis/image5.png)* + +en stel de juiste namen in het venster in. "*omdat ik SSH gebruik heb ik hier load Putty Key aangevinkt*" + +*![img](../imgs/basis/image6.png)* + +klik op OK en de lokale repository wordt gebouwd. + +Ga naar deze website [Gitlab]([https://gitlab.com/ajkoelewijn/nwv/-/tree/main/noordwestveluwe) (donor repository) en klik op download source code. + +*![img](../imgs/basis/image12.png)* + + + +Pak de inhoud van map "nwv-main" uit in de map utr_netherland3d en ga naar de map in verkenner. + +Vanaf nu wordt het interessant. + +"*Wat we nu gaan doen is de computer vertellen (aan de hand van een eerder gemaakte repository die we als donor gebruiken) welke mappen/bestanden wel en niet meegaan naar de online omgeving. Dit scheelt heel veel tijd en MB's. Geen zorgen dit gaat alleen om bestanden die Unity nodig heeft om te draaien, niet voor wijzigingen in het project.*" + +Allereerst voegen we het bestand ".gitignore" toe aan de cloud repositiory. + +"*LET OP! Deze handeling is de basis van het werken met Repositories.*" + +Ga naar de repository (in verkenner) en zoek met rechtermuisknop naar "tortoise" en "commit" + +*![img](../imgs/basis/image8.png)* + +voeg een message toe (anders kan je niet committen) en klik met rechtermuis op gitignore om het bestand aan de repo toe te voegen. + +*"Het bestand "README.md" wordt direct meegenomen, omdat deze al in de repository bestond en is gewijzigd bij het kopiëren van de data uit de donormap."* + +*![img](../imgs/basis/image9.png)* + +Klik vervolgens op op commit en daarna op push om het bestandje ook daarwerkelijk te uploaden. + + + +*![img](../imgs/basis/image10.png)* + +Klik op ok in het volgende venster. "Local" en "Remote" staan allebei op main. + +*![img](../imgs/basis/image11.png)* + +"*commit is zeg maar, het toevoegen van bestanden aan een database en push en pull zijn commando's voor het up- en downloaden van bestanden die in de database voorkomen*" + + + +## Project laden met data donor repository + +Nu gaan we een nieuw project maken in Unity hub. + +Maak na het installeren in de Hub een nieuw Unity project aan via 'Projects / New Project' en kies als template '3D (URP) Core'. + +Kies de eerder gemaakte map voor de repository basis. + +*![img](../imgs/basis/image13.png)* + +Het project wordt vervolgens automatisch geopend in Unity. + +Nu kunnen we de mappen "Assets", "Packages", "ProjectSettings" en "UserSettings" kopiëren uit de zip file naar de project map. + +*![img](../imgs/basis/image14.png)* + + + +*![img](../imgs/basis/image15.png)* + + + +Ga weer naar de Unity omgeving en zoek in de scene map naar de scene NWV. Open deze en klik met de rechtermuis op de naam in de Hierarchy en kies voor "Save Scene As" kies een naam (in dit geval Utrecht) en zet de Scene in de map "Scenes" + +*![img](../imgs/basis/image16.png)* + + + +Nu kan de donorscene weggegooid worden. + +*![img](../imgs/basis/image17.png)* + +Controleer of de scene werkt door op play te drukken. Er verschijnen dan tegels van NoordWestVeluwe, maar dat fixen we in de volgende paragraaf. Sluit de play mode weer af. + +De enige stap is nog om lighting instellingen goed te zetten. + +Klik op "Window" en "Rendering" en kies voor "lighting" + +*![img](../imgs/basis/image18.png)* + +Kies daarna voor "New Lighting Settings". Unity maakt dan een light setting aan die gebruikt wordt in de playmode. + +*![img](../imgs/basis/image19.png)* + +Als je dit hebt gedaan klik dan op het tabje "Environment" + +*![img](../imgs/basis/image20.png)* + +Klik op het rondje rechts van "Sun Source" en kies in "Scene" voor "Directional Light" + +*![img](../imgs/basis/image21.png)* + + + +## Eigen Data koppelen + +De scene werkt nu met gegevens voor NoordwestVeluwe, maar je wilt natuurlijk eigen data koppelen. Hiervoor kunnen we weer gebruik maken van de handleiding [Datakoppelen.md](https://github.com/Amsterdam/Netherlands3D/blob/main/PackageUserManual/Dutch/DataKoppelen.md) + + + diff --git a/docs/developers/contributing/documentation.md b/docs/developers/contributing/documentation.md new file mode 100644 index 0000000..5babbed --- /dev/null +++ b/docs/developers/contributing/documentation.md @@ -0,0 +1,59 @@ +# Contributing to our Documentation + +Thank you for your interest in contributing to the Netherlands3D documentation. This guide provides all the necessary +information to help you get started with contributing to our documentation, which is composed of Markdown documents in +our GitHub repository and is automatically built using MkDocs whenever a pull request is merged. + +## Getting Started + +First, you'll need to set up your environment for making contributions: + +1. **Fork the Repository**: Go to https://github.com/Netherlands3D/docs and fork the repository to your GitHub account. +2. **Clone the Fork**: Clone your forked repository to your local machine to make changes. +3. **Install MkDocs (Optional)**: If you wish to preview your changes locally, you'll need to install MkDocs. Follow the + installation guide on their website. + +## Making Contributions + +### Language and Voice + +* For user and organisation facing parts of the documentation, write in Dutch using the passive voice. +* For developer-facing documentation, write in English. + +### Adding or Editing Content + +1. **Create a New Branch**: Before making any changes, create a new branch in your forked repository. +2. **Add/Edit Markdown Files**: Make your changes or add new content in the appropriate Markdown (.md) files. Be sure to + follow + the language and voice guidelines mentioned above. +3. **Update mkdocs.yml**: If you are adding a new page, don't forget to update the mkdocs.yml configuration file to + include + your new page in the navigation. + +### Previewing Your Changes + +If you've installed MkDocs locally, you can preview your changes by running the following command in your project +directory: + +```bash +mkdocs serve +``` + +This will start a local web server. Open your web browser and go to http://127.0.0.1:8000 to see your changes. + +### Submitting Your Contributions + +Once you are satisfied with your changes: + +1. **Commit Your Changes**: Add your changes to your fork and commit them with a clear commit message. +2. **Push to Your Fork**: Push your changes to your GitHub fork. +3. **Create a Pull Request**: Go to the original Netherlands3D/docs repository and create a new pull request. Target the + main branch for your pull request and provide a clear description of your changes. +4. **Review Process**: Your pull request will be reviewed by the Netherlands3D documentation team. Be open to feedback + and make any requested changes. + +### Conclusion + +Contributing to the Netherlands3D documentation is a collaborative effort. We appreciate your willingness to contribute +and look forward to improving our documentation with your help. If you have any questions or need assistance, please +open an issue in the GitHub repository. diff --git a/docs/developers/packages/creating-and-managing-packages.md b/docs/developers/packages/creating-and-managing-packages.md new file mode 100644 index 0000000..ba9475d --- /dev/null +++ b/docs/developers/packages/creating-and-managing-packages.md @@ -0,0 +1,233 @@ +Creating and managing Packages +============================== + +Netherlands3D is a framework where you, as developer, can pick the functionality that you need from a series of +packages. This guide will empower you to develop your own packages by providing step-by-step instructions how +you can create your own package, release it and last, but not least, publish it to [OpenUPM](https://openupm.com). + +## Variables / Placeholders + +Before we get started, let's define some terms as if they were variables. This documentation and the template files +in the Gist mentioned in the chapter [Creating a new package](#creating-a-new-package) uses various placeholders. These +can recognized as they are between brackets, for example `{NAME}`. + +This table provides an overview of them and their meaning. + +| Name | Explanation | Example | +|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------| +| NAME | The name of the code repository, this is usually the DISPLAY_NAME in PascalCase. It is recommended to limit the name to two words, if more words add clarity than that takes precedence. | PeriodicSnapshots | +| PACKAGE_NAME | The package name as known in the package manager and/or package.json; always starts with `eu.netherlands3d.` and followed by the display name -or similar- in kebab-case | eu.netherlands3d.periodic-snapshots | +| DISPLAY_NAME | The human-readable name of a package, shown in the README or in the Package Manager | Periodic Snapshots | +| REPOSITORY_NAME | Alias of NAME, used to make explicit that we want the repository name there. | PeriodicSnapshots | +| VERSION | The version number in the package.json, according to SemVer. **Important**: contrary to the git tag, this does not start with a letter `v` | 1.0.1 | +| DESCRIPTION | A single-line short description describing the package, can also be used on Github as the description for the repository | This package provides the means to do take a series of snapshots for specific moments throughout the year. | +| LONG_DESCRIPTION | The description of the package detailing what it is used for. | | +| USAGE_INFORMATION | Documentation how to use this package. | *See existing packages for examples* | +| NOTE | One or more entries in the CHANGELOG -according to [Keep A Changelog](http://keepachangelog.com/en/1.0.0/)- describing what has been added, changed, removed or deprecated in a package | | + +This vocabulary and their definitions will help to have a consistent experience when working with packages. + +## Creating a new package + +When creating a new package, it is recommended to first create it as an embedded package in the +[Netherlands3D twin project](https://github.com/Netherlands3D/twin). This will help to prototype and experiment until +the point where it is stable enough to be distributed. + +This can be done using the following steps: + +1. Clone the Netherlands3D Twin project, located at https://github.com/Netherlands3D/twin. + +2. Make sure Unity is not open while performing the following steps; it generally tends to crash when it updates while setting up a package. + +3. Create a directory for your [embedded package](https://docs.unity3d.com/Manual/CustomPackages.html#EmbedMe) in the + `Packages` folder. + + !!! warning "Important" + + The directory name *MUST* follow the structure `eu.netherlands3d.[name]` where `name` is in lower-case [kebab-case](https://www.pluralsight.com/blog/software-development/programming-naming-conventions-explained#kebab-case). + +4. Copy the template files, located at https://gist.github.com/mvriel/8a8251b492d9d8f742da16667c49e412, and fill in the placeholders. + +5. Set up the package according to the following recommended directory structure: https://docs.unity3d.com/Manual/cus-layout.html + +6. Start Unity and allow for it to install the new package, you should see your new package in the "Installed Packages" section of the Package Manager with the tag `Custom` behind the name. + +7. When you want to add Scripts to this package: Make sure you have created the folder `Runtime\Scripts` as a location to store them and add an Assembly Definition with the name `{PACKAGE_NAME}.Runtime`. + +## Promoting an embedded package + +It takes time and effort to get a package into a usable and moderately stable condition. Because of this the recommended +way of working is to first create an embedded package in the Twin project -like an incubator project- and once it is +moderately stable: promote it to its own repository. + +Promoting an embedded package is done by one of the project maintainers -if not alone for the fact that a repository +needs to be made- and follows the following sequence of steps: + +1. Create a repository whose name matches the `{NAME}` placeholder, thus a PascalCase representation of the + human-readable name. + +2. Move all files from the `Packages\{PACKAGE_NAME}` folder in the Twin repository to the newly made repository's root + folder + +3. Check and adjust, at least, the URL's for the LICENSE, README and CHANGELOG in the `package.json`. + +4. Release and publish the promoted package, see the chapters on [releasing](#releasing-a-package) and + [publishing](#publishing-a-package) for the involved steps. + +5. In the Twin project, add a reference to `{PACKAGE_NAME}` to the package.json or install the package through + the package manager. + + !!! warning "Important" + + After a package is added to OpenUPM for the first time, it can take between 30 and 60 minutes for it to + show up in the package listing. + +Once a package is promoted, you can no longer edit it as part of the Twin project; in the next chapter +[Changing a Package](#changing-a-package) it is described how you can change a promoted package without all too much +hassle. + +## Changing a package + +> To be written + +## Releasing a package + +When you want to release a new version of a package you generally go through the following steps: + +!!! tip + + Before releasing, make sure you have tested your package in [the Twin](https://github.com/Netherlands3D/twin) -or + another Netherlands3D-based project- installed as a local package. + + Especially important is: + + * verifying that the correct dependencies are set and installed + * that the Assembly Definition can be used and + * that the Assembly Definition does not depend on Assembly Definitions that are not a dependency of your package, + especially Netherlands3D.Core.Runtime should be avoided + + Failure to do so may cause extra work because once a package is released, it is impossible to change something + in the release and a new release must be made. + +1. Go to the repository of your package. If there is none: see the chapter on + [Promoting an embedded package](#promoting-an-embedded-package) and do that first. + +2. Ensure the version number in the package.json is updated + +3. Check the CHANGELOG.md: + + 1. Does it contain all changes since the last version? + 2. Is the top-entry `[Unreleased]`? Fill in the new version number and add a date, see: https://keepachangelog.com/en/1.0.0/#effort + +4. Ensure any changes in the above are in the main branch + +5. Go to "Releases" on Github (`https://github.com/Netherlands3D/{NAME}/releases`) and + + 1. Draft a new release + ![Draft new release](../../imgs/packages/draft-release.png) + 2. Click on "Choose a tag" + 3. Enter the version number from the package.json with a preceding letter `v`, for example: `v1.0.1`. + 4. Click on the option "Create new tag: `v{VERSION}` on publish" + 5. (optional) Add a release title and description + 6. Click on the button "Publish Release" + +Once a new release/tag has been made, your new release of your package is all set! If it has already been +published on [OpenUPM](https://openupm.com) before, no further action is needed. OpenUPM will automatically pick +up on the new tag and make the new version available. + +When the package has not been published on OpenUPM yet, now is a good time to do it. + +## Publishing a package on OpenUPM + +When a package is released for the first time, it needs to be published by registering it on OpenUPM. + +!!! tip + + Before publishing, make sure you have tested your package in https://github.com/Netherlands3D/twin -or another + Netherlands3D-based project- installed as a local package. + + Especially important is: + + * verifying that the correct dependencies are set and installed + * that the Assembly Definition can be used and + * that the Assembly Definition does not depend on Assembly Definitions that are not a dependency of your package, + especially Netherlands3D.Core.Runtime should be avoided + + Failure to do so may cause extra work because once a package is published, it is inconvenient to unpublish it or + change publication details such as the name. + +To do so, you can take the following steps: + +1. Go to https://openupm.com. + +2. Click on the "+" button in the menu bar to add a new package + ![Screenshot of OpenUPM showing add button](../../imgs/packages/openupm-add-package-location.png) + +3. Fill out the Github repository name in the intended field and click on "Go". + ![Screenshot of OpenUPM where repository can be submitted](../../imgs/packages/openupm-provide-repository-location.png) + A form expands where you can verify the package name, ReadMe location and more + +4. Enter your github username in the "Discovered by" field; this is used to base a fork of OpenUPM from and add the + package as a pull request. + + ![](../../imgs/packages/openupm-submission-form.png) + + !!! note + + The section "Advanced" is for advanced use when multiple packages are hosted in the same repository; at the moment + this method is not recommended and as such that part of the submission form can be skipped + +5. Check the "Promotion" section if the package fits any of these categories, and check these. + +6. Click on the "Verify Package" button, all other fields can be left unchanged. + +As soon as the steps above have completed, you are asked to fork the `OpenUPM` repository and to commit these changes in +a feature branch. At this point you can use the "Create pull request" button to create a pull request to OpenUPM. + +!!! tip + + If this is your first time submitting a package to OpenUPM, the maintainer of OpenUPM needs to approve the Pull + Request manually; this is generally done within 24 hours. Any subsequent pull requests will be automatically merged. + +After the pull request is merged, it will take 30 to 60 minutes for `OpenUPM` to add the package to the registry. + +## FAQ + +> Can I depend on the `Netherlands3D.Core.Runtime` assembly? + +At time of writing, this assembly is within the code of the https://github.com/Amsterdam/Netherlands3D skeleton; meaning +that this dependency only works when the package is used within a project that is based on this skeleton. This can be +a problematic dependency since we are actively working on moving the contents of this skeleton into components. + +Because of the above, it is not recommended for a published package to depend on the `Netherlands3D.Core.Runtime` +assembly. + +If code from this assembly is needed, it is recommended to extract this code into another package that you can depend +on or duplicate it into your own package until such a package can be made. + +For more information on this, see the question `Can I depend on Assemblies that are not in my own package?`. + +> Can I depend on Assemblies that are not in my own package? + +You sure can! As long as these assemblies are in a package that is published in a Unity Package Registry such as +OpenUPM, and that you have added that package as a dependency to your `package.json` file. + +If you add an assembly whose package cannot be included in your `package.json` -either because it is not a package or +a git-based package- then you will need to add installation instructions in the README. Without these instructions, +any user of the package will have a missing assembly -and thus errors- without knowing how to fix it. + +> One of the packages does not show up in the Package Manager after publishing + +Have you checked the minimum unity version in the `package.json`? If the minimum version is newer than your +installed version, it will not be visible. + +> Why OpenUPM and not add packages through a Git URL? + +Good question! When you add packages through a Git URL you lose certain features that packages hosted on a registry do +have. This includes but is not limited to: + +1. Unable to update to a new version: when you use a Git tag/release, then you need to uninstall and reinstall the + package when a new becomes available instead of just using the `Update` button. + +2. Git-url based packages cannot be used as dependencies: this means that if a package depends on another, with git + urls you need to manually install the correct dependencies and face possible version conflicts with newer versions. diff --git a/docs/developers/ui/blocks/property-anatomy.png b/docs/developers/ui/blocks/property-anatomy.png new file mode 100644 index 0000000..b1e61f4 Binary files /dev/null and b/docs/developers/ui/blocks/property-anatomy.png differ diff --git a/docs/developers/ui/blocks/property-example.png b/docs/developers/ui/blocks/property-example.png new file mode 100644 index 0000000..2a02c1d Binary files /dev/null and b/docs/developers/ui/blocks/property-example.png differ diff --git a/docs/developers/ui/blocks/property-panel-and-sections.md b/docs/developers/ui/blocks/property-panel-and-sections.md new file mode 100644 index 0000000..116569b --- /dev/null +++ b/docs/developers/ui/blocks/property-panel-and-sections.md @@ -0,0 +1,124 @@ +# Properties + +## Design + +### Usage + +The "Properties" block in Netherlands3D serves as a critical interface element, allowing users to interact with and +modify the attributes of various layers within the application. This documentation provides insights into the design +considerations and implementation strategies for this block, ensuring a seamless integration within the Netherlands3D +platform. + +This block enables users to access and adjust the transformation properties (position, rotation, scale) of selected 3D +objects or layers. Additionally, it provides access to specific attributes for certain objects, such as Windmills, which +may include properties like axis height or rotor diameter. + +
+ ![property-example.png](property-example.png "A screenshot of a windmill with an open properties panel") +
A screenshot of a windmill with an open properties panel
+
+ +### Anatomy + +
+ ![property-anatomy.png](property-anatomy.png "Anatomical breakdown of the properties block") +
Anatomical breakdown of the properties block
+
+ +The Properties panel is constructed using a Card component, organized into several key areas for intuitive +user interaction: + +1. [Card](../components/cards.md): The overarching container for the Properties panel, designed for clarity and + cohesion. +2. [Card Header](../components/cards.md): Displays the Properties icon and the term "Eigenschappen," indicating the + panel's purpose. +3. Section: Each layer or object type, such as Windmills, has its dedicated section within the card. +4. Section Header: Identifies the specific layer or object type, e.g., "Windmolen" for Windmills, guiding users to the + relevant properties. +5. Section Content: Contains form elements for adjusting the specific properties of the selected layer or object. This + area is designed for direct interaction, allowing users to modify attributes like axis height or rotor diameter. + +### Design Principles + +* **Clarity**: The use of a card-based layout ensures that the Properties panel is easily navigable and understandable, + with distinct sections for different layers or objects. +* **Consistency**: Maintaining a uniform structure across different sections ensures that users have a cohesive + experience, regardless of the variety of objects or layers they interact with. +* **Immediate Feedback**: Interactions within the Properties panel are designed to provide immediate visual feedback in + the Netherlands3D environment, emphasizing the panel's role in direct manipulation of objects and layers. + +### Interaction + +Users interact with the Properties panel by selecting an object or layer within the Netherlands3D platform, and clicking +on the properties button with that layer. + +Upon opening, the panel updates to display the relevant sections for the chosen item. Adjustments made within the form +elements of a section are immediately applied, allowing users to see the effects of their changes in real-time. This +design supports a tactile and intuitive experience, encouraging exploration and modification within the digital twin +environment. + +## Implementation + +### Overview + +The Properties panel's functionality in the Netherlands3D platform is achieved through a combination of Unity prefabs +and scripting. This implementation ensures dynamic interaction within the UI, allowing for the seamless addition of +properties sections based on the selected layer or object. + +### Prefab Structure + +- **Main Properties Prefab:** The core of the Properties panel, this prefab is a part of the default canvas and acts as + the container for all dynamically added sections. + +- **Section Prefabs:** Individual prefabs for each type of section (e.g., Windmill properties) that can be instantiated + within the main Properties panel. + +### Scripting and Interfaces + +#### IPropertySection Interface + +An essential element in the dynamic nature of the Properties panel is the `IPropertySection` interface. This interface +allows for the detection and instantiation of properties sections based on the presence of specific MonoBehaviours +within a layer's prefab. + +- **Detection and Instantiation:** A script running in the layer system detects MonoBehaviours that implement + the `IPropertySection` interface on a layer's prefab being added to the scene. Upon detection, the `AddToProperties` + method of the interface is called. + +- **Factory Behavior:** Implementations of the `IPropertySection` can act as factories, instantiating the appropriate + section prefab and adding it to the Properties panel as a "slot". The `AddToProperties` method is being provided with + the properties content area to which the section can be added. + +##### AddToProperties Method + +The `AddToProperties` method is where the logic for instantiating the section prefab and integrating it into the +Properties panel is defined. This method allows for flexibility in the UI, permitting custom designs per section while +adhering to the overall design guidelines. + +!!! example + + ### Example: Windmill Property Section + + The Windmolen prefab, used for the Windmill implementation in the Object Library, includes a MonoBehaviour + named `WindmillPropertySectionInstantiator` that demonstrates this system in action. + + - **Functionality:** The `WindmillPropertySectionInstantiator` responds to the addition of a Windmill object and + instantiates a dedicated section within the Properties panel. This section is specifically designed to bind and + display the properties of the windmill, such as axis height or rotor diameter. + + - **Binding:** The script binds the windmill's data to the instantiated section, ensuring that any adjustments made + within the Properties panel are immediately reflected in the windmill's properties within the scene. + +### Implementation Steps + +Given an existing layer's prefab: + +**Implement the IPropertySection interface:** For each layer requiring a properties section, create a MonoBehaviour +that implements `IPropertySection` and defines how its section prefab should be instantiated and added to the +Properties panel. + +### Design Adherence + +While implementing sections, it's crucial to adhere to the established design rules to maintain consistency across the +Properties panel. However, the flexibility of this system allows for the introduction of unique UI elements where +necessary to better represent specific properties. diff --git a/docs/developers/ui/components/accordion-anatomy.png b/docs/developers/ui/components/accordion-anatomy.png new file mode 100644 index 0000000..caaf2f3 Binary files /dev/null and b/docs/developers/ui/components/accordion-anatomy.png differ diff --git a/docs/developers/ui/components/accordion.md b/docs/developers/ui/components/accordion.md new file mode 100644 index 0000000..e9f8374 --- /dev/null +++ b/docs/developers/ui/components/accordion.md @@ -0,0 +1,92 @@ +# Accordion + +## Design + +### Usage + +The Accordion component in the Netherlands3D platform is a versatile UI element designed to efficiently manage and +display hierarchical content in a compact form. Featuring a title, an optional label, and a toggle mechanism indicated +by a chevron, the Accordion allows for an organized presentation of content sections, each with its dedicated header to +signify its integration within the Accordion. This component is ideal for: + +* Settings Menus: Grouping related settings or options to streamline user navigation, such as layer property sections. + +* Grouping Content: Grouping related content to focus on related information, such as quality indicator dossiers. + +* Interactive FAQs: Presenting frequently asked questions in a concise, expandable format. + +### Modes of Operation + +1. Fixed Mode: This mode locks the Accordion in an always-open state, without the option to collapse or expand. The + absence of a chevron signifies its static nature. + +2. Multiple Open Mode: Allows for multiple Accordions within a group to be opened or closed independently. The chevron + points up when opened, indicating a "roll-up" action, and down when closed, suggesting a "roll-down" action. + +3. Single Open Mode: In a group of Accordions, only one can be open at a time. Opening another Accordion automatically + closes the previously open one. This mode features a chevron pointing down when closed; and when open, the chevron is + hidden, supplemented by an additional outline to highlight the Accordion is considered to be an active -or selected- + Accordion. + +### Anatomy + +
+ ![accordion-anatomy.png](accordion-anatomy.png "Anatomical breakdown of the accordion component") +
Anatomical breakdown of the Accordion component
+
+ +1. **Title**: A text representative of the Accordion's content. + +2. **Icon (Optional)**: Provides additional context or classification. + +3. **Expand/Contract Toggle (Optional)**: A chevron-based toggle mechanism indicating the Accordion's state and + possible actions. + +4. **Content Section**: The expandable area containing detailed content or components. + +5. **Content Header**: A header within the content section styled specifically to emphasize its connection to the + Accordion. + +### Design Principles + +#### Title and Icon + +The title provides a succinct summary of the content contained within the Accordion, while the optional icon offers +additional context or categorization. + +Both elements are designed to be immediately visible to enhance usability and guide the user's navigation through the +content sections. + +#### Expand/Contract Toggle + +The Expand/Contract Toggle includes a chevron symbol that visually communicates the Accordion's state and possible +actions to the user. The direction of the chevron indicates the effect of the interaction (down for roll-down, up for +roll-up). + +The toggle may be absent when there is no action available, as can be the case for the fixed mode of operation or when +no roll-up is provided because one element always needs to be open. + +#### Content Section + +The content section beneath each Accordion title is designed for expandability, housing detailed information or +additional UI components. + +Optionally, a specific header within the content section further emphasizes its association with the Accordion. + +### Best Practices + +* **Clarity**: Ensure the title and label (if used) are clear and informative, guiding the user's understanding of the + content within. + +* **Intuitive Interaction**: Design the Expand Toggle for easy recognition and interaction, with chevron icons that + intuitively indicate the possible actions. + +* **Consistency**: Maintain visual and functional consistency across all Accordion components, especially within groups + operating in multiple or single open modes. + +## Implementation + +!!! info + + As of writing, there is no component in Unity available to provide the Accordion component. This part of the + documentation should be updated as soon as one is available. diff --git a/docs/developers/ui/components/cards.md b/docs/developers/ui/components/cards.md new file mode 100644 index 0000000..8711e23 --- /dev/null +++ b/docs/developers/ui/components/cards.md @@ -0,0 +1,14 @@ +# Cards + +## Usage + +Cards are surfaces that display content and actions on a single topic. + +They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on +them in a way that clearly indicates hierarchy. + +## Anatomy + +!!! info + + The contents of this chapter need to be written diff --git a/docs/developers/ui/components/double-slider-anatomy.png b/docs/developers/ui/components/double-slider-anatomy.png new file mode 100644 index 0000000..4371eb7 Binary files /dev/null and b/docs/developers/ui/components/double-slider-anatomy.png differ diff --git a/docs/developers/ui/components/double-sliders.md b/docs/developers/ui/components/double-sliders.md new file mode 100644 index 0000000..6ec5fe9 --- /dev/null +++ b/docs/developers/ui/components/double-sliders.md @@ -0,0 +1,66 @@ +# Double Slider + +## Design + +### Usage + +Similar to the slider component, the double slider component in the Netherlands3D platform provides +a graphical interface element enabling users to select a range between two values from a predefined scale. +Accompanied by two Text Fields, this component allows for both graphical adjustment +and direct numerical input, ensuring a versatile and user-friendly experience. The main difference between +the double slider and the regular slider is that the double slider has two handles and input fields, +defining the minimum and maximum value of the range. + +#### Immediate effects + +Changes made with double sliders are immediate, allowing the user to make slider adjustments while determining a selection. +Sliders shouldn’t be used to adjust settings with any delay in providing user feedback. + +#### Current state + +Sliders reflect the current state of the settings they control. + +### Anatomy + +
+ ![double-slider-anatomy.png](double-slider-anatomy.png "Anatomical breakdown of the double slider component") +
Anatomical breakdown of the double slider component
+
+ +1. Slider Track: The horizontal line along which the double slider thumb moves, representing the range of possible values. +2. Minimum Slider Thumb: The circular control that users drag to select the minimum value on the slider track. +3. Minimum Text Field (Optional): Adjacent to the double slider, this field displays the currently selected minimum value and allows for manual + entry. It can be configured as readonly or omitted based on specific requirements. +4. Maximum Slider Thumb: The circular control that users drag to select the maximum value on the slider track. +5. Maximum Text Field (Optional): Adjacent to the double slider, this field displays the currently selected maximum value and allows for manual + entry. It can be configured as readonly or omitted based on specific requirements. +## Implementation + +This chapter guides you through adding the double slider prefab to your scene, configuring its behavior, and responding to user +input. + +### Adding the Slider to Your Scene + +1. **Prefab Placement:** Locate the double slider prefab in the project's asset directory. Drag and drop the prefab into your + scene or hierarchy where you need the slider component to appear. + +3. **Initial Setup:** By default, the double slider comes with linked Text Fields for numerical input. Together, they provide + a cohesive component for value selection. + +### Configuring the Slider + +#### Listening to Value Changes + +Use the Unity Editor to attach a listener function to the slider's `onMinValueChanged` and `onMaxValueChanged` events. These functions will be called +whenever the slider's minimum or maximum value changes, respectively, whether through direct manipulation of the double slider or numerical entry in the Text +Fields. + +#### Customizing the Text Field + +- **Readonly Option:** The `DoubleSlider` MonoBehaviour includes a `readonly` boolean. When set to true, the Text + Fields becomes readonly, allowing users to see the value but preventing manual entry. This is useful in situations + where you want to restrict input to slider manipulation only. + +- **Omitting the Text Field:** If your use case does not require numerical input, you can deactivate the Text Fields + entirely. Simply set the Text Field GameObjects to inactive, and the double slider will automatically expand to fill the + space, maintaining the UI's visual continuity. diff --git a/docs/developers/ui/components/slider-anatomy.png b/docs/developers/ui/components/slider-anatomy.png new file mode 100644 index 0000000..d6d2853 Binary files /dev/null and b/docs/developers/ui/components/slider-anatomy.png differ diff --git a/docs/developers/ui/components/sliders.md b/docs/developers/ui/components/sliders.md new file mode 100644 index 0000000..65ac502 --- /dev/null +++ b/docs/developers/ui/components/sliders.md @@ -0,0 +1,61 @@ +# Slider + +## Design + +### Usage + +The slider component in the Netherlands3D platform provides a graphical interface element enabling users to select a +value or range from a predefined scale. Accompanied by a Text Field, this component allows for both graphical adjustment +and direct numerical input, ensuring a versatile and user-friendly experience. + +#### Immediate effects + +Changes made with sliders are immediate, allowing the user to make slider adjustments while determining a selection. +Sliders shouldn’t be used to adjust settings with any delay in providing user feedback. + +#### Current state + +Sliders reflect the current state of the settings they control. + +### Anatomy + +
+ ![slider-anatomy.png](slider-anatomy.png "Anatomical breakdown of the slider component") +
Anatomical breakdown of the slider component
+
+ +1. Slider Track: The horizontal line along which the slider thumb moves, representing the range of possible values. +2. Slider Thumb: The circular control that users drag to select a value on the slider track. +3. Text Field (Optional): Adjacent to the slider, this field displays the currently selected value and allows for manual + entry. It can be configured as readonly or omitted based on specific requirements. + +## Implementation + +This chapter guides you through adding the slider prefab to your scene, configuring its behavior, and responding to user +input. + +### Adding the Slider to Your Scene + +1. **Prefab Placement:** Locate the slider prefab in the project's asset directory. Drag and drop the prefab into your + scene or hierarchy where you need the slider component to appear. + +3. **Initial Setup:** By default, the slider comes with a linked Text Field for numerical input. Together, they provide + a cohesive component for value selection. + +### Configuring the Slider + +#### Listening to Value Changes + +Use the Unity Editor to attach a listener function to the slider's `onValueChanged` event. This function will be called +whenever the slider's value changes, whether through direct manipulation of the slider or numerical entry in the Text +Field. + +#### Customizing the Text Field + +- **Readonly Option:** The `PropertySlider` MonoBehaviour includes a `readonly` boolean. When set to true, the Text + Field becomes readonly, allowing users to see the value but preventing manual entry. This is useful in situations + where you want to restrict input to slider manipulation only. + +- **Omitting the Text Field:** If your use case does not require numerical input, you can deactivate the Text Field + entirely. Simply set the Text Field GameObject to inactive, and the slider will automatically expand to fill the + space, maintaining the UI's visual continuity. diff --git a/docs/developers/ui/components/text-fields.md b/docs/developers/ui/components/text-fields.md new file mode 100644 index 0000000..eaa16f7 --- /dev/null +++ b/docs/developers/ui/components/text-fields.md @@ -0,0 +1,54 @@ +# Text Field + +## Design + +### Usage + +"Text Fields" in the Netherlands3D platform allow users to input or modify text information. They can be used singularly +or in combination with other components like a [Slider](sliders.md) or Form Label in the +[Properties](../blocks/property-panel-and-sections.md) block. They're an essential part of Netherlands3D's user +interface, providing users with interactive fields to enter or manipulate various properties. + +### Parts + +The Text Field component comprises two main parts: + +1. **Form Label**: The descriptive text associated with the Text Field, explaining what value is being manipulated. This + is a reusable part and can be shared with other components like the [Slider](sliders.md). + +2. **Form Field**: It serves as the component for user text input or changing text information. It is styled to account + for different states like Idle, Focus, Pressing, and Read-Only. + +### Anatomy + +!!! note + + Add an image to showcase the anatomy of a form field and elaborate some more on this in the text + +1. **Form Label**: Positioned above or adjacent to the Form Field, providing a textual description of the information + required or displayed. + +2. **Form Field**: The interactive text input area where users can enter or modify data. It transitions between various + states (Idle, Focus, Pressed, Read-only) to visually communicate its current mode of interaction. + +### Design Principles + +* **Clarity**: Labels are clear and informative, ensuring users understand what information is required. + +* **Feedback**: Built-in states (Idle, Focused, Pressed, and Read-Only) provide immediate visual feedback to users, + aiding an interactive experience. + +## Implementation + +The Text Field is modeled using Unity prefabs and scripting, offering dynamic interaction within the user interface, +allowing for adaptive properties adjustment based on user input. + +### Adding a Text Field to Your Scene + +* Prefab Placement: Locate the Text Field prefab in the project's asset directory. Drag and drop the prefab into your + scene where you need the Text Field component to appear. + +### Configuring the Text Field + +You can utilize the Unity Editor to add listener functions that get triggered on text value change events, enabling you +to manipulate and use the user-input text as per application needs. diff --git a/docs/developers/ui/introduction.md b/docs/developers/ui/introduction.md new file mode 100644 index 0000000..40e98e1 --- /dev/null +++ b/docs/developers/ui/introduction.md @@ -0,0 +1,50 @@ +# Introduction + +Welcome to the foundational section of our technical documentation, where we introduce the user interface (UI) design +system of Netherlands3D. This documentation is crafted to guide developers, designers, and contributors through the +design architecture that shapes the user experience within our digital twin environment. + +## Purpose of the Design System + +The design system serves as a comprehensive framework that harmonizes UI design and development, ensuring consistency, +scalability, and efficiency across the application. It is the blueprint that orchestrates the visual and interactive +elements, making the digital twin not only a technological marvel but also an intuitive and engaging experience for +users. + +## Overview of the UI Design System + +At the heart of our UI design system are two fundamental concepts: **Blocks** and **Components**. These elements are the +building blocks of our application's interface, structured to offer clarity and flexibility in design and +implementation. Inspired by the BEM (Block, Element, Modifier) methodology, our system disambiguates between blocks and +components to streamline the development process and enhance the UI's modularity and reusability. + +### Blocks + +Blocks are the larger, more general sections of the UI that function as the containers for components. They define the +structural layout and set the stage for the detailed elements within. Blocks can be as broad as the entire application +window or as specific as a user interaction panel. + +### Components + +Components, on the other hand, are the more granular, reusable elements that reside within blocks. They are the nuts and +bolts of the UI, encompassing buttons, sliders, text fields, and other interactive elements. Components are designed +with flexibility in mind, allowing them to be adapted and reused across different blocks. + +## Objectives of This Documentation + +The subsequent chapters of this documentation are dedicated to diving deeper into the specifics of blocks and +components, outlining their characteristics, how they are designed, and how they interact within the UI framework of our +digital twin platform. Our goals are to: + +- **Clarify the distinction** between blocks and components, providing a clear understanding of their roles within the + UI design system. +- **Guide the design and development** process, offering insights into best practices for creating and integrating + blocks and components. +- **Facilitate scalability and customization**, enabling developers and designers to extend the UI efficiently and + creatively. + +As we proceed, this documentation will serve as a reference for enhancing and expanding the user interface of +Netherlands3D, ensuring that the developers and designers within the ecosystem are aligned. + +In the next chapter, we will explore the concept of blocks in detail, examining their structure, functionality, and how +they contribute to the overall user experience of the application. diff --git a/docs/developers/ui/keeping-our-documentation-current.md b/docs/developers/ui/keeping-our-documentation-current.md new file mode 100644 index 0000000..144fad9 --- /dev/null +++ b/docs/developers/ui/keeping-our-documentation-current.md @@ -0,0 +1,21 @@ +# Keeping Our Documentation Current + +**Important Note**: While we strive to maintain this documentation as the definitive guide to our UI design system, the +realm of digital development is one of constant evolution. To accommodate this, we ensure that the most up-to-date +design resources and UI guidelines are housed in an internal Figma board. This board is regularly updated to reflect the +latest design decisions, component updates, and UI patterns adopted by our team. + +## Accessing the Latest Information + +For the most current design specifications and UI elements, we encourage team members to refer to our internal Figma +board. This resource is designed to be a living document, offering real-time updates and insights into our UI design +strategy. + +## Requesting Documentation Updates + +We understand that despite our best efforts, there may be instances where this documentation does not fully capture the +latest UI developments or design nuances. In such cases, we welcome requests for documentation updates. + +By fostering a culture of continuous improvement and open communication, we aim to ensure that our UI design system +supports the dynamic needs of our project and team. Whether you're a developer, a designer, or a project stakeholder, +your contributions and feedback are invaluable to the ongoing refinement of Netherlands3D. diff --git a/docs/developers/ui/locating-components-in-unity.md b/docs/developers/ui/locating-components-in-unity.md new file mode 100644 index 0000000..e914e96 --- /dev/null +++ b/docs/developers/ui/locating-components-in-unity.md @@ -0,0 +1,47 @@ +## Overview + +To maintain consistency and efficiency in the development of the Netherlands3D platform, a systematic approach is +adopted for organizing components within Unity and Figma. This documentation outlines the structure and location of +Unity Components in relation to their counterparts in Figma, facilitating easy navigation and management for developers +and designers alike. + +## Unity Structure + +### Prefabs and Scripts + +Location: Within the Unity project, two primary folders, Prefabs and Scripts, house the components essential for +building the UI and functionality of the Netherlands3D platform. + +UI/Components Subfolder: Both Prefabs and Scripts contain a subfolder named UI/Components. This subfolder is dedicated +to storing UI-related prefabs and scripts, mirroring the component organization seen in Figma. + +### Component Grouping + +Structure: The UI/Components folder in Unity is organized into subfolders that reflect the component grouping structure +found in Figma's Assets tab. This methodical arrangement ensures that for every component designed in Figma, there is a +corresponding prefab or script in Unity. +Examples: If Figma has groups such as Input Controls, Navigation, and Data Display, similar subfolders will be present +under Unity's UI/Components, ensuring a one-to-one mapping of design assets to development assets. + +## Figma Structure + +### Assets Tab + +Component Grouping: Figma's Assets tab utilizes a structured approach to organize design components into groups, +facilitating easy access and reference for designers. +Naming Convention: Each component and group within Figma is named systematically, aligning with the naming used in +Unity's UI/Components folder structure to maintain consistency. + +## Bridging Design and Development + +### Synchronized Organization + +Purpose: The mirrored folder structure between Unity and Figma aims to streamline the workflow, allowing designers and +developers to easily locate corresponding components across platforms. +Best Practices: Regular updates and reviews of the folder structures are recommended to ensure ongoing alignment as new +components are added or existing ones are modified. +Navigation and Usage +Finding Components: Developers and designers can quickly locate a specific component's prefab, script, or design asset +by navigating to the UI/Components folder in Unity or the corresponding group in Figma's Assets tab. +Consistency: This organizational strategy enhances collaboration, ensuring that both design and development teams are +working with the same component definitions and expectations. diff --git a/docs/developers/ui/understanding-blocks.md b/docs/developers/ui/understanding-blocks.md new file mode 100644 index 0000000..9d8e69b --- /dev/null +++ b/docs/developers/ui/understanding-blocks.md @@ -0,0 +1,73 @@ +# Understanding Blocks + +In the Netherlands3D platform, our design system is structured for clear organization and effective scaling. Blocks form +the fundamental part of this structure, acting as the primary containers for the interface's elements. This chapter +focuses on blocks, explaining their purpose, features, and their role in creating a unified user experience in +Netherlands3D. + +## What Are Blocks? + +Blocks are the large-scale elements of our UI design system. They serve as the main sections that organize and contain +various components. Think of blocks as the framework of a building, providing structure and defining the layout within +our digital environment. In Netherlands3D, blocks have specific functions, such as guiding navigation, displaying +information, facilitating user interactions, or showcasing data visually. + +## Features of Blocks + +- **Modular:** Blocks are designed as self-contained units that can be mixed and matched in different layouts, offering + flexibility and reuse across the platform. + +- **Scalable:** They are built to support the platform's growth, making it easy to add new features or adapt to changing + user needs without disrupting the existing design. + +- **Consistent:** Despite their variety, blocks maintain a unified design language and user experience across + Netherlands3D. + +## Designing Blocks + +Creating blocks for Netherlands3D requires attention to: + +- **User Needs:** Design each block with the user's requirements in mind, ensuring it fulfills its intended purpose + effectively. + +- **Adaptability:** Make blocks adaptable for different types of content and scenarios within the platform. + +## Managing Blocks + +The evolution of Netherlands3D involves regular updates to blocks, including additions, removals, or modifications. This +process entails: + +1. **Planning:** Identifying the need based on user feedback or new functionalities. + +2. **Design and Development:** Crafting the block to fit Netherlands3D's design norms and technical specifications. + +3. **Testing:** Ensuring compatibility and performance across devices. + +4. **Implementation:** Incorporating the block into Netherlands3D and monitoring its effectiveness. + +## Distinction Between Blocks and Components + +Blocks and components are fundamental elements of the Netherlands3D UI, but they serve distinct purposes. + +**Blocks** are the overarching sections that structure and organize the user interface, similar to the chapters in a +book. They are designed for flexibility, accommodating a variety of components to fulfill different functionalities +within the platform. Blocks ensure a consistent layout and design language across Netherlands3D, providing a cohesive +user experience. + +**Components**, on the other hand, are the detailed, interactive or static elements such as buttons, text fields, and +sliders that reside within blocks. These elements are highly customizable and reusable, designed to perform specific +functions or convey particular information. Components depend on blocks for context and placement, but their modularity +allows them to be used in multiple scenarios across the platform. + +The primary distinction lies in their scale and function: blocks form the UI's structural foundation, while components +populate these structures with content and interactivity. Understanding this difference is crucial for efficient design +and development within Netherlands3D, ensuring a robust and user-friendly interface. + +## Conclusion + +Blocks are foundational to the Netherlands3D UI design system, offering the structural basis for our digital twin +platform. By leveraging blocks effectively, we can ensure a robust, user-friendly interface that reflects the innovative +spirit of digital twin technology. + +The following chapter will detail the components within these blocks, including their design and role in enhancing the +interactive experience of Netherlands3D. diff --git a/docs/developers/ui/understanding-components.md b/docs/developers/ui/understanding-components.md new file mode 100644 index 0000000..8ebd7d2 --- /dev/null +++ b/docs/developers/ui/understanding-components.md @@ -0,0 +1,50 @@ +# Understanding Components + +In this chapter, we delve deeper into the essence of components—the dynamic and interactive elements that enable users +to engage with the Netherlands3D platform effectively. Components are the individual pieces of the user interface, such +as buttons, sliders, dropdown menus, and data visualization charts, which users interact with directly. + +## What Are Components? + +Components are the versatile and interactive building blocks housed within the UI's structural blocks. They range from +**input fields** (where users can enter data), **buttons** (like 'Submit' or 'Cancel'), **sliders** (for adjusting +settings or zoom levels), to more complex elements such as the **minimap** (allowing users to explore). + +## Features of Components + +- **Reusability:** Designed for reuse, components like **toggle switches** for on/off settings ensure consistency and + streamline development across Netherlands3D. + +- **Customization:** Components can be tailored for different informational purposes to adhere to the specific aesthetic + of the platform. + +- **Interactivity:** Interactive components, such as **accordions**, for customization features or detailed content + display, to engage users directly, offering a dynamic experience. + +## Designing Components + +The design of components focuses on the user's needs, aiming for clarity, efficiency, and aesthetic harmony: + +- **User-Centric Design:** Components are crafted to be intuitive and accessible for easy + navigation or with validation to guide user input. + +- **Aesthetic Consistency:** Despite their diversity, components maintain the Netherlands3D's cohesive design language, +- reinforcing brand identity. + +## Managing Components + +The lifecycle of components in Netherlands3D involves continuous evaluation and refinement: + +1. **Identification of Needs:** New functionalities might require the development of novel components interaction with + the 3D environment or its data. + +2. **Rigorous Testing:** Components undergo extensive testing. + +3. **Iterative Improvement:** Feedback might lead to the evolution of components, such as enhancing them + for better data visualization or for improved usability. + +## Conclusion + +Components are vital for the interactive and functional richness of the Netherlands3D platform. Each component plays a +crucial role in engaging users and facilitating a smooth experience. Through careful design and management, components +ensure Netherlands3D remains an intuitive, efficient, and visually appealing platform. diff --git a/docs/images/favicon.ico b/docs/images/favicon.ico new file mode 100644 index 0000000..f4736f5 Binary files /dev/null and b/docs/images/favicon.ico differ diff --git a/docs/images/hero.png b/docs/images/hero.png new file mode 100644 index 0000000..26a7067 Binary files /dev/null and b/docs/images/hero.png differ diff --git a/docs/images/homepage/artikelen/customization.png b/docs/images/homepage/artikelen/customization.png new file mode 100644 index 0000000..6f90943 Binary files /dev/null and b/docs/images/homepage/artikelen/customization.png differ diff --git a/docs/images/homepage/artikelen/get-started-in-5-minutes.png b/docs/images/homepage/artikelen/get-started-in-5-minutes.png new file mode 100644 index 0000000..63165d1 Binary files /dev/null and b/docs/images/homepage/artikelen/get-started-in-5-minutes.png differ diff --git a/docs/images/homepage/artikelen/to-cloud-or-not-to-cloud.png b/docs/images/homepage/artikelen/to-cloud-or-not-to-cloud.png new file mode 100644 index 0000000..549c599 Binary files /dev/null and b/docs/images/homepage/artikelen/to-cloud-or-not-to-cloud.png differ diff --git a/docs/images/homepage/partners/gemeente-amsterdam.png b/docs/images/homepage/partners/gemeente-amsterdam.png new file mode 100644 index 0000000..7621673 Binary files /dev/null and b/docs/images/homepage/partners/gemeente-amsterdam.png differ diff --git a/docs/images/homepage/partners/gemeente-rotterdam.png b/docs/images/homepage/partners/gemeente-rotterdam.png new file mode 100644 index 0000000..2b164b8 Binary files /dev/null and b/docs/images/homepage/partners/gemeente-rotterdam.png differ diff --git a/docs/images/homepage/partners/gemeente-utrecht.png b/docs/images/homepage/partners/gemeente-utrecht.png new file mode 100644 index 0000000..1d62d21 Binary files /dev/null and b/docs/images/homepage/partners/gemeente-utrecht.png differ diff --git a/docs/images/homepage/partners/provincie-flevoland.png b/docs/images/homepage/partners/provincie-flevoland.png new file mode 100644 index 0000000..b7f92fc Binary files /dev/null and b/docs/images/homepage/partners/provincie-flevoland.png differ diff --git a/docs/images/homepage/partners/provincie-utrecht.png b/docs/images/homepage/partners/provincie-utrecht.png new file mode 100644 index 0000000..6317c0c Binary files /dev/null and b/docs/images/homepage/partners/provincie-utrecht.png differ diff --git a/docs/images/logo-text.svg b/docs/images/logo-text.svg new file mode 100644 index 0000000..9c46eb4 --- /dev/null +++ b/docs/images/logo-text.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/logo.png b/docs/images/logo.png new file mode 100644 index 0000000..5aec53a Binary files /dev/null and b/docs/images/logo.png differ diff --git a/docs/imgs/DataKoppelen/image1.png b/docs/imgs/DataKoppelen/image1.png new file mode 100644 index 0000000..bf741cc Binary files /dev/null and b/docs/imgs/DataKoppelen/image1.png differ diff --git a/docs/imgs/DataKoppelen/image2.png b/docs/imgs/DataKoppelen/image2.png new file mode 100644 index 0000000..270bc69 Binary files /dev/null and b/docs/imgs/DataKoppelen/image2.png differ diff --git a/docs/imgs/DataKoppelen/image3.png b/docs/imgs/DataKoppelen/image3.png new file mode 100644 index 0000000..8a53f26 Binary files /dev/null and b/docs/imgs/DataKoppelen/image3.png differ diff --git a/docs/imgs/DataKoppelen/image4.png b/docs/imgs/DataKoppelen/image4.png new file mode 100644 index 0000000..11f44ef Binary files /dev/null and b/docs/imgs/DataKoppelen/image4.png differ diff --git a/docs/imgs/bag/image1.png b/docs/imgs/bag/image1.png new file mode 100644 index 0000000..34ec5f6 Binary files /dev/null and b/docs/imgs/bag/image1.png differ diff --git a/docs/imgs/bag/image2.png b/docs/imgs/bag/image2.png new file mode 100644 index 0000000..0985458 Binary files /dev/null and b/docs/imgs/bag/image2.png differ diff --git a/docs/imgs/bag/image3.png b/docs/imgs/bag/image3.png new file mode 100644 index 0000000..dd50881 Binary files /dev/null and b/docs/imgs/bag/image3.png differ diff --git a/docs/imgs/bag/image4.png b/docs/imgs/bag/image4.png new file mode 100644 index 0000000..81b4359 Binary files /dev/null and b/docs/imgs/bag/image4.png differ diff --git a/docs/imgs/basis/image1.png b/docs/imgs/basis/image1.png new file mode 100644 index 0000000..8f56790 Binary files /dev/null and b/docs/imgs/basis/image1.png differ diff --git a/docs/imgs/basis/image10.png b/docs/imgs/basis/image10.png new file mode 100644 index 0000000..2d67120 Binary files /dev/null and b/docs/imgs/basis/image10.png differ diff --git a/docs/imgs/basis/image11.png b/docs/imgs/basis/image11.png new file mode 100644 index 0000000..2c1bde3 Binary files /dev/null and b/docs/imgs/basis/image11.png differ diff --git a/docs/imgs/basis/image12.png b/docs/imgs/basis/image12.png new file mode 100644 index 0000000..caa2f25 Binary files /dev/null and b/docs/imgs/basis/image12.png differ diff --git a/docs/imgs/basis/image13.png b/docs/imgs/basis/image13.png new file mode 100644 index 0000000..0a41083 Binary files /dev/null and b/docs/imgs/basis/image13.png differ diff --git a/docs/imgs/basis/image14.png b/docs/imgs/basis/image14.png new file mode 100644 index 0000000..39b04d7 Binary files /dev/null and b/docs/imgs/basis/image14.png differ diff --git a/docs/imgs/basis/image15.png b/docs/imgs/basis/image15.png new file mode 100644 index 0000000..e756246 Binary files /dev/null and b/docs/imgs/basis/image15.png differ diff --git a/docs/imgs/basis/image16.png b/docs/imgs/basis/image16.png new file mode 100644 index 0000000..c95a565 Binary files /dev/null and b/docs/imgs/basis/image16.png differ diff --git a/docs/imgs/basis/image17.png b/docs/imgs/basis/image17.png new file mode 100644 index 0000000..dff0fe4 Binary files /dev/null and b/docs/imgs/basis/image17.png differ diff --git a/docs/imgs/basis/image18.png b/docs/imgs/basis/image18.png new file mode 100644 index 0000000..0597439 Binary files /dev/null and b/docs/imgs/basis/image18.png differ diff --git a/docs/imgs/basis/image19.png b/docs/imgs/basis/image19.png new file mode 100644 index 0000000..29c9c76 Binary files /dev/null and b/docs/imgs/basis/image19.png differ diff --git a/docs/imgs/basis/image2.png b/docs/imgs/basis/image2.png new file mode 100644 index 0000000..0bdf598 Binary files /dev/null and b/docs/imgs/basis/image2.png differ diff --git a/docs/imgs/basis/image20.png b/docs/imgs/basis/image20.png new file mode 100644 index 0000000..142658b Binary files /dev/null and b/docs/imgs/basis/image20.png differ diff --git a/docs/imgs/basis/image21.png b/docs/imgs/basis/image21.png new file mode 100644 index 0000000..6f89aba Binary files /dev/null and b/docs/imgs/basis/image21.png differ diff --git a/docs/imgs/basis/image3.png b/docs/imgs/basis/image3.png new file mode 100644 index 0000000..f5194cd Binary files /dev/null and b/docs/imgs/basis/image3.png differ diff --git a/docs/imgs/basis/image4.png b/docs/imgs/basis/image4.png new file mode 100644 index 0000000..d75da6c Binary files /dev/null and b/docs/imgs/basis/image4.png differ diff --git a/docs/imgs/basis/image5.png b/docs/imgs/basis/image5.png new file mode 100644 index 0000000..b151860 Binary files /dev/null and b/docs/imgs/basis/image5.png differ diff --git a/docs/imgs/basis/image6.png b/docs/imgs/basis/image6.png new file mode 100644 index 0000000..361baaf Binary files /dev/null and b/docs/imgs/basis/image6.png differ diff --git a/docs/imgs/basis/image7.png b/docs/imgs/basis/image7.png new file mode 100644 index 0000000..5dbad14 Binary files /dev/null and b/docs/imgs/basis/image7.png differ diff --git a/docs/imgs/basis/image8.png b/docs/imgs/basis/image8.png new file mode 100644 index 0000000..ce7b17b Binary files /dev/null and b/docs/imgs/basis/image8.png differ diff --git a/docs/imgs/basis/image9.png b/docs/imgs/basis/image9.png new file mode 100644 index 0000000..0dd85cc Binary files /dev/null and b/docs/imgs/basis/image9.png differ diff --git a/docs/imgs/beginnen/create_folder.png b/docs/imgs/beginnen/create_folder.png new file mode 100644 index 0000000..9c143a6 Binary files /dev/null and b/docs/imgs/beginnen/create_folder.png differ diff --git a/docs/imgs/beginnen/editor_herstart.png b/docs/imgs/beginnen/editor_herstart.png new file mode 100644 index 0000000..bcab9dc Binary files /dev/null and b/docs/imgs/beginnen/editor_herstart.png differ diff --git a/docs/imgs/beginnen/image0.png b/docs/imgs/beginnen/image0.png new file mode 100644 index 0000000..8e0202f Binary files /dev/null and b/docs/imgs/beginnen/image0.png differ diff --git a/docs/imgs/beginnen/image1.png b/docs/imgs/beginnen/image1.png new file mode 100644 index 0000000..a7295a7 Binary files /dev/null and b/docs/imgs/beginnen/image1.png differ diff --git a/docs/imgs/beginnen/image10.png b/docs/imgs/beginnen/image10.png new file mode 100644 index 0000000..f774be8 Binary files /dev/null and b/docs/imgs/beginnen/image10.png differ diff --git a/docs/imgs/beginnen/image11.png b/docs/imgs/beginnen/image11.png new file mode 100644 index 0000000..6183001 Binary files /dev/null and b/docs/imgs/beginnen/image11.png differ diff --git a/docs/imgs/beginnen/image12.png b/docs/imgs/beginnen/image12.png new file mode 100644 index 0000000..5cd321e Binary files /dev/null and b/docs/imgs/beginnen/image12.png differ diff --git a/docs/imgs/beginnen/image13.png b/docs/imgs/beginnen/image13.png new file mode 100644 index 0000000..48467a9 Binary files /dev/null and b/docs/imgs/beginnen/image13.png differ diff --git a/docs/imgs/beginnen/image14.png b/docs/imgs/beginnen/image14.png new file mode 100644 index 0000000..7dd937c Binary files /dev/null and b/docs/imgs/beginnen/image14.png differ diff --git a/docs/imgs/beginnen/image15.png b/docs/imgs/beginnen/image15.png new file mode 100644 index 0000000..ea40867 Binary files /dev/null and b/docs/imgs/beginnen/image15.png differ diff --git a/docs/imgs/beginnen/image16.png b/docs/imgs/beginnen/image16.png new file mode 100644 index 0000000..0f6b832 Binary files /dev/null and b/docs/imgs/beginnen/image16.png differ diff --git a/docs/imgs/beginnen/image17.png b/docs/imgs/beginnen/image17.png new file mode 100644 index 0000000..3fb2cbf Binary files /dev/null and b/docs/imgs/beginnen/image17.png differ diff --git a/docs/imgs/beginnen/image2.png b/docs/imgs/beginnen/image2.png new file mode 100644 index 0000000..5602dbb Binary files /dev/null and b/docs/imgs/beginnen/image2.png differ diff --git a/docs/imgs/beginnen/image3.png b/docs/imgs/beginnen/image3.png new file mode 100644 index 0000000..ff4294d Binary files /dev/null and b/docs/imgs/beginnen/image3.png differ diff --git a/docs/imgs/beginnen/image4.png b/docs/imgs/beginnen/image4.png new file mode 100644 index 0000000..80d9835 Binary files /dev/null and b/docs/imgs/beginnen/image4.png differ diff --git a/docs/imgs/beginnen/image5.png b/docs/imgs/beginnen/image5.png new file mode 100644 index 0000000..633880d Binary files /dev/null and b/docs/imgs/beginnen/image5.png differ diff --git a/docs/imgs/beginnen/image6.png b/docs/imgs/beginnen/image6.png new file mode 100644 index 0000000..c6bb84b Binary files /dev/null and b/docs/imgs/beginnen/image6.png differ diff --git a/docs/imgs/beginnen/image7.png b/docs/imgs/beginnen/image7.png new file mode 100644 index 0000000..ca79e45 Binary files /dev/null and b/docs/imgs/beginnen/image7.png differ diff --git a/docs/imgs/beginnen/image8.png b/docs/imgs/beginnen/image8.png new file mode 100644 index 0000000..90601fa Binary files /dev/null and b/docs/imgs/beginnen/image8.png differ diff --git a/docs/imgs/beginnen/image9.png b/docs/imgs/beginnen/image9.png new file mode 100644 index 0000000..ee64359 Binary files /dev/null and b/docs/imgs/beginnen/image9.png differ diff --git a/docs/imgs/beginnen/new_project.png b/docs/imgs/beginnen/new_project.png new file mode 100644 index 0000000..ab9c543 Binary files /dev/null and b/docs/imgs/beginnen/new_project.png differ diff --git a/docs/imgs/camera/image1.png b/docs/imgs/camera/image1.png new file mode 100644 index 0000000..9413603 Binary files /dev/null and b/docs/imgs/camera/image1.png differ diff --git a/docs/imgs/camera/image2.png b/docs/imgs/camera/image2.png new file mode 100644 index 0000000..8b91b77 Binary files /dev/null and b/docs/imgs/camera/image2.png differ diff --git a/docs/imgs/camera/image3.png b/docs/imgs/camera/image3.png new file mode 100644 index 0000000..5a58fa5 Binary files /dev/null and b/docs/imgs/camera/image3.png differ diff --git a/docs/imgs/dataklaarzetten/image1.png b/docs/imgs/dataklaarzetten/image1.png new file mode 100644 index 0000000..9645e49 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image1.png differ diff --git a/docs/imgs/dataklaarzetten/image10.png b/docs/imgs/dataklaarzetten/image10.png new file mode 100644 index 0000000..a92d651 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image10.png differ diff --git a/docs/imgs/dataklaarzetten/image2.png b/docs/imgs/dataklaarzetten/image2.png new file mode 100644 index 0000000..e3a222c Binary files /dev/null and b/docs/imgs/dataklaarzetten/image2.png differ diff --git a/docs/imgs/dataklaarzetten/image3.png b/docs/imgs/dataklaarzetten/image3.png new file mode 100644 index 0000000..c23f194 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image3.png differ diff --git a/docs/imgs/dataklaarzetten/image4.png b/docs/imgs/dataklaarzetten/image4.png new file mode 100644 index 0000000..9ae6637 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image4.png differ diff --git a/docs/imgs/dataklaarzetten/image5.png b/docs/imgs/dataklaarzetten/image5.png new file mode 100644 index 0000000..80224d5 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image5.png differ diff --git a/docs/imgs/dataklaarzetten/image6.png b/docs/imgs/dataklaarzetten/image6.png new file mode 100644 index 0000000..643d5b7 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image6.png differ diff --git a/docs/imgs/dataklaarzetten/image7.png b/docs/imgs/dataklaarzetten/image7.png new file mode 100644 index 0000000..c5cb612 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image7.png differ diff --git a/docs/imgs/dataklaarzetten/image8.png b/docs/imgs/dataklaarzetten/image8.png new file mode 100644 index 0000000..4e75c2e Binary files /dev/null and b/docs/imgs/dataklaarzetten/image8.png differ diff --git a/docs/imgs/dataklaarzetten/image9.png b/docs/imgs/dataklaarzetten/image9.png new file mode 100644 index 0000000..779a9a5 Binary files /dev/null and b/docs/imgs/dataklaarzetten/image9.png differ diff --git a/docs/imgs/packages/draft-release.png b/docs/imgs/packages/draft-release.png new file mode 100644 index 0000000..5a048e8 Binary files /dev/null and b/docs/imgs/packages/draft-release.png differ diff --git a/docs/imgs/packages/openupm-add-package-location.png b/docs/imgs/packages/openupm-add-package-location.png new file mode 100644 index 0000000..39ad8b9 Binary files /dev/null and b/docs/imgs/packages/openupm-add-package-location.png differ diff --git a/docs/imgs/packages/openupm-provide-repository-location.png b/docs/imgs/packages/openupm-provide-repository-location.png new file mode 100644 index 0000000..4541d9c Binary files /dev/null and b/docs/imgs/packages/openupm-provide-repository-location.png differ diff --git a/docs/imgs/packages/openupm-submission-form.png b/docs/imgs/packages/openupm-submission-form.png new file mode 100644 index 0000000..37fc568 Binary files /dev/null and b/docs/imgs/packages/openupm-submission-form.png differ diff --git a/docs/imgs/wms/image01.png b/docs/imgs/wms/image01.png new file mode 100644 index 0000000..380bc30 Binary files /dev/null and b/docs/imgs/wms/image01.png differ diff --git a/docs/imgs/wms/image02.png b/docs/imgs/wms/image02.png new file mode 100644 index 0000000..07ab6aa Binary files /dev/null and b/docs/imgs/wms/image02.png differ diff --git a/docs/imgs/wms/image03.png b/docs/imgs/wms/image03.png new file mode 100644 index 0000000..6fa574a Binary files /dev/null and b/docs/imgs/wms/image03.png differ diff --git a/docs/imgs/wms/image04.png b/docs/imgs/wms/image04.png new file mode 100644 index 0000000..3d52aef Binary files /dev/null and b/docs/imgs/wms/image04.png differ diff --git a/docs/imgs/wms/image05.png b/docs/imgs/wms/image05.png new file mode 100644 index 0000000..f617506 Binary files /dev/null and b/docs/imgs/wms/image05.png differ diff --git a/docs/imgs/wms/image06.png b/docs/imgs/wms/image06.png new file mode 100644 index 0000000..14fa6d0 Binary files /dev/null and b/docs/imgs/wms/image06.png differ diff --git a/docs/imgs/zonnestand/image1.png b/docs/imgs/zonnestand/image1.png new file mode 100644 index 0000000..e01ef49 Binary files /dev/null and b/docs/imgs/zonnestand/image1.png differ diff --git a/docs/imgs/zonnestand/image2.png b/docs/imgs/zonnestand/image2.png new file mode 100644 index 0000000..10b9372 Binary files /dev/null and b/docs/imgs/zonnestand/image2.png differ diff --git a/docs/imgs/zonnestand/image3.png b/docs/imgs/zonnestand/image3.png new file mode 100644 index 0000000..b85893c Binary files /dev/null and b/docs/imgs/zonnestand/image3.png differ diff --git a/docs/imgs/zonnestand/image4.png b/docs/imgs/zonnestand/image4.png new file mode 100644 index 0000000..27a7f89 Binary files /dev/null and b/docs/imgs/zonnestand/image4.png differ diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..caace8f --- /dev/null +++ b/docs/index.md @@ -0,0 +1,47 @@ +--- +title: "Start" +hide: + - navigation + - toc +--- + +
+ +
+ +![](images/logo-text.svg) + +# Netherlands3D + +Netherlands3D, het open-source Digital Twin-framework ontworpen voor Nederland. + +Door middel van datavisualisatie stelt Netherlands3D u in staat om gedetailleerde, op data gebaseerde modellen weer te +geven. + +[Start](https://netherlands3d.eu/twin/){ .md-button .md-button--primary } +[Wat is het?](#wat-is-netherlands3d){ .md-button } +
+ +[//]: # (Dit is een uitgeschakelde include naar de uitgelicht sectie, verwijder de ; om dit te laten werken) +-8<- "; docs/_uitgelicht.md" + +-8<- "docs/_wat-is-netherlands3d.md" + +[//]: # (Dit is een uitgeschakelde include naar de nieuws sectie, verwijder de ; om dit te laten werken) +-8<- "; docs/_nieuws.md" + +
+ +## In samenwerking met + +
+ +- ![](images/homepage/partners/gemeente-amsterdam.png) +- ![](images/homepage/partners/gemeente-utrecht.png) +- ![](images/homepage/partners/provincie-flevoland.png) +- ![](images/homepage/partners/provincie-utrecht.png) +- ![](images/homepage/partners/gemeente-rotterdam.png) + +
+ +
diff --git a/docs/organisations/beginnen-in-vijf-minuten.md b/docs/organisations/beginnen-in-vijf-minuten.md new file mode 100644 index 0000000..1c150ff --- /dev/null +++ b/docs/organisations/beginnen-in-vijf-minuten.md @@ -0,0 +1,30 @@ +# Beginnen in 5 minuten + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales est nec dolor luctus cursus. Sed tincidunt orci +fermentum varius mattis. Quisque ut molestie augue, sit amet ornare sem. Praesent sit amet auctor nisi. Vivamus ornare +tincidunt arcu in euismod. Proin ipsum ante, semper et sollicitudin eget, venenatis maximus nulla. Suspendisse potenti. +Nulla facilisi. + +Fusce rutrum mi vel purus interdum imperdiet. Curabitur tempus fermentum odio et venenatis. In hac habitasse platea +dictumst. Praesent pellentesque odio vel suscipit malesuada. Nulla facilisis mauris euismod pulvinar ullamcorper. Ut +tincidunt lacus vitae nibh faucibus iaculis. Phasellus vitae risus ex. + +Donec at orci urna. Ut ac turpis nec quam luctus cursus. Nunc lobortis quam vitae iaculis dignissim. Vestibulum pretium, +nulla id volutpat luctus, mauris leo rhoncus tortor, ut fringilla massa purus in erat. Donec blandit id sem et accumsan. +Pellentesque at eleifend urna. Mauris quis odio odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. +Vivamus sollicitudin magna libero, eget congue odio mollis gravida. Praesent arcu tellus, ultrices id porttitor vitae, +tincidunt quis dolor. Vivamus aliquet nulla non augue molestie, sed elementum nisl maximus. Curabitur ut augue eu urna +ornare hendrerit sed at dolor. Duis vulputate ullamcorper viverra. Proin id urna sed turpis euismod blandit. Etiam +gravida ipsum eu ligula lacinia, ut ultricies magna porta. Cras sem metus, commodo tincidunt ultricies fringilla, +facilisis sit amet enim. + +Pellentesque nibh dui, iaculis at vehicula in, iaculis ut dui. Donec ac nisl eget massa pellentesque vehicula. Morbi +interdum magna ac leo malesuada commodo. Nulla ac risus ut lectus eleifend semper. Nullam placerat sem quis lectus +aliquam tristique. Nullam ante nisl, laoreet ut elit eu, laoreet gravida ex. Aenean eget sagittis magna. Donec non +faucibus leo. Nullam rutrum euismod nisl, sed consequat arcu imperdiet et. Vivamus sit amet mi placerat, luctus sem a, +posuere sem. Aliquam feugiat est eget risus dapibus efficitur. + +Nam vehicula sollicitudin nibh, at efficitur ligula tincidunt in. Pellentesque turpis nibh, tempor vitae consequat non, +molestie ac turpis. Duis tempor vulputate urna, non iaculis velit faucibus vel. Aliquam erat volutpat. Donec eu +porttitor lacus, in dignissim odio. Nam at laoreet sapien, pharetra scelerisque sapien. Nulla sed quam pretium, +pellentesque dolor pharetra, aliquam nulla. diff --git a/docs/organisations/getting-started.md b/docs/organisations/getting-started.md new file mode 100644 index 0000000..fbed346 --- /dev/null +++ b/docs/organisations/getting-started.md @@ -0,0 +1,39 @@ +# Getting Started + +Netherlands3D provides several ways to get started and integrate the digital twin into your projects. Choose the method +that best fits your needs and level of expertise: + +## Embed or share Netherlands3D + +Embedding Netherlands3D is perfect for webmasters, bloggers, or anyone who wants to add the Netherlands3D digital twin +to their website or content management system (CMS) without needing to worry about complex setup. It's a quick and easy +way to showcase the digital twin. + +You can also use it as a shareable link, making it easy to share the digital twin with others. + +_Target Audience_: Webmasters, organisations without their own infrastructure, one-off showcases or demonstrations. + +- [Learn how to embed Netherlands3D using an iframe](../Embedding.md) +- [Get a Shareable Link]() + +## Self-Host Netherlands3D + +Self-hosting Netherlands3D is great if you have your own website and need more control. It's suitable for those who want +to interact with subscription services or databases and want to customize their setup. If you have a domain and some +technical skills, this option is for you. + +_Target Audience_: government or private organisations with their own domain and infrastructure + +- [Host Netherlands3D using Docker]() +- [Build Netherlands3D from Source]() +- [Build a fully customized Digital Twin using our packages]() + +## Use the Hosted Version (Apply for Access) + +The hosted version provides an Azure Subscription with a pre-built environment, eliminating the need for you to bring +your own infrastructure. After onboarding, you can customize the environment to suit your specific requirements. This +option is suitable for those who need to interact with subscription services and prefer a pre-configured setup. + +_Target Audience_: Organisations who want a pre-built environment without the need for their own infrastructure. + +- [Apply for Access to the Hosted Version]() diff --git a/docs/organisations/hosting.md b/docs/organisations/hosting.md new file mode 100644 index 0000000..75a017f --- /dev/null +++ b/docs/organisations/hosting.md @@ -0,0 +1,30 @@ +# Beheer je Netherlands3D zelf of laat je je ontzorgen? + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales est nec dolor luctus cursus. Sed tincidunt orci +fermentum varius mattis. Quisque ut molestie augue, sit amet ornare sem. Praesent sit amet auctor nisi. Vivamus ornare +tincidunt arcu in euismod. Proin ipsum ante, semper et sollicitudin eget, venenatis maximus nulla. Suspendisse potenti. +Nulla facilisi. + +Fusce rutrum mi vel purus interdum imperdiet. Curabitur tempus fermentum odio et venenatis. In hac habitasse platea +dictumst. Praesent pellentesque odio vel suscipit malesuada. Nulla facilisis mauris euismod pulvinar ullamcorper. Ut +tincidunt lacus vitae nibh faucibus iaculis. Phasellus vitae risus ex. + +Donec at orci urna. Ut ac turpis nec quam luctus cursus. Nunc lobortis quam vitae iaculis dignissim. Vestibulum pretium, +nulla id volutpat luctus, mauris leo rhoncus tortor, ut fringilla massa purus in erat. Donec blandit id sem et accumsan. +Pellentesque at eleifend urna. Mauris quis odio odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. +Vivamus sollicitudin magna libero, eget congue odio mollis gravida. Praesent arcu tellus, ultrices id porttitor vitae, +tincidunt quis dolor. Vivamus aliquet nulla non augue molestie, sed elementum nisl maximus. Curabitur ut augue eu urna +ornare hendrerit sed at dolor. Duis vulputate ullamcorper viverra. Proin id urna sed turpis euismod blandit. Etiam +gravida ipsum eu ligula lacinia, ut ultricies magna porta. Cras sem metus, commodo tincidunt ultricies fringilla, +facilisis sit amet enim. + +Pellentesque nibh dui, iaculis at vehicula in, iaculis ut dui. Donec ac nisl eget massa pellentesque vehicula. Morbi +interdum magna ac leo malesuada commodo. Nulla ac risus ut lectus eleifend semper. Nullam placerat sem quis lectus +aliquam tristique. Nullam ante nisl, laoreet ut elit eu, laoreet gravida ex. Aenean eget sagittis magna. Donec non +faucibus leo. Nullam rutrum euismod nisl, sed consequat arcu imperdiet et. Vivamus sit amet mi placerat, luctus sem a, +posuere sem. Aliquam feugiat est eget risus dapibus efficitur. + +Nam vehicula sollicitudin nibh, at efficitur ligula tincidunt in. Pellentesque turpis nibh, tempor vitae consequat non, +molestie ac turpis. Duis tempor vulputate urna, non iaculis velit faucibus vel. Aliquam erat volutpat. Donec eu +porttitor lacus, in dignissim odio. Nam at laoreet sapien, pharetra scelerisque sapien. Nulla sed quam pretium, +pellentesque dolor pharetra, aliquam nulla. diff --git a/docs/organisations/index.md b/docs/organisations/index.md new file mode 100644 index 0000000..1b7e299 --- /dev/null +++ b/docs/organisations/index.md @@ -0,0 +1,12 @@ +# Voor organisaties + +## Onder ontwikkeling + +We werken momenteel aan de ontwikkeling van deze sectie om een uitgebreide bron van informatie te bieden. +Het doel is om organisaties te ondersteunen met gidsen, best practices en antwoorden op +veelgestelde vragen die essentieel zijn voor het gebruik van het Netherlands3D platform. + +In de tussentijd moedigen we u aan om contact met ons op te nemen bij vragen met betrekking tot het platform. + +Blijf op de hoogte voor updates en verbeteringen aan deze sectie. We kijken ernaar uit om te voorzien in de +informatie en hulpmiddelen die nodig zijn om goed gebruik te maken van Netherlands3D. diff --git a/docs/organisations/personalisering.md b/docs/organisations/personalisering.md new file mode 100644 index 0000000..4284901 --- /dev/null +++ b/docs/organisations/personalisering.md @@ -0,0 +1,30 @@ +# Toon de kaart die jij wil + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales est nec dolor luctus cursus. Sed tincidunt orci +fermentum varius mattis. Quisque ut molestie augue, sit amet ornare sem. Praesent sit amet auctor nisi. Vivamus ornare +tincidunt arcu in euismod. Proin ipsum ante, semper et sollicitudin eget, venenatis maximus nulla. Suspendisse potenti. +Nulla facilisi. + +Fusce rutrum mi vel purus interdum imperdiet. Curabitur tempus fermentum odio et venenatis. In hac habitasse platea +dictumst. Praesent pellentesque odio vel suscipit malesuada. Nulla facilisis mauris euismod pulvinar ullamcorper. Ut +tincidunt lacus vitae nibh faucibus iaculis. Phasellus vitae risus ex. + +Donec at orci urna. Ut ac turpis nec quam luctus cursus. Nunc lobortis quam vitae iaculis dignissim. Vestibulum pretium, +nulla id volutpat luctus, mauris leo rhoncus tortor, ut fringilla massa purus in erat. Donec blandit id sem et accumsan. +Pellentesque at eleifend urna. Mauris quis odio odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. +Vivamus sollicitudin magna libero, eget congue odio mollis gravida. Praesent arcu tellus, ultrices id porttitor vitae, +tincidunt quis dolor. Vivamus aliquet nulla non augue molestie, sed elementum nisl maximus. Curabitur ut augue eu urna +ornare hendrerit sed at dolor. Duis vulputate ullamcorper viverra. Proin id urna sed turpis euismod blandit. Etiam +gravida ipsum eu ligula lacinia, ut ultricies magna porta. Cras sem metus, commodo tincidunt ultricies fringilla, +facilisis sit amet enim. + +Pellentesque nibh dui, iaculis at vehicula in, iaculis ut dui. Donec ac nisl eget massa pellentesque vehicula. Morbi +interdum magna ac leo malesuada commodo. Nulla ac risus ut lectus eleifend semper. Nullam placerat sem quis lectus +aliquam tristique. Nullam ante nisl, laoreet ut elit eu, laoreet gravida ex. Aenean eget sagittis magna. Donec non +faucibus leo. Nullam rutrum euismod nisl, sed consequat arcu imperdiet et. Vivamus sit amet mi placerat, luctus sem a, +posuere sem. Aliquam feugiat est eget risus dapibus efficitur. + +Nam vehicula sollicitudin nibh, at efficitur ligula tincidunt in. Pellentesque turpis nibh, tempor vitae consequat non, +molestie ac turpis. Duis tempor vulputate urna, non iaculis velit faucibus vel. Aliquam erat volutpat. Donec eu +porttitor lacus, in dignissim odio. Nam at laoreet sapien, pharetra scelerisque sapien. Nulla sed quam pretium, +pellentesque dolor pharetra, aliquam nulla. diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css new file mode 100644 index 0000000..dfe4346 --- /dev/null +++ b/docs/stylesheets/extra.css @@ -0,0 +1,183 @@ +.md-typeset h2 { + margin-top: 3.2rem; +} + +/*****************************************************************************/ +/** Full-width tricks ********************************************************/ +/*****************************************************************************/ + +.md-container { + /** + We use tricks to create a full-width background color, + but hiding the overflow prevents the page from breaking + **/ + overflow: hidden; +} + +.md-header__button.md-logo { + display: flex; + justify-content: center; + align-items: center; + padding: 0; +} + +.md-header__button.md-logo img { + height: 1.8rem; +} + +/*****************************************************************************/ +/** HERO *********************************************************************/ +/*****************************************************************************/ + +.hero { + margin-top: -1.5rem; + margin-bottom: 1.5rem; + background-image: url('../images/hero.png'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 24rem; +} + +.hero p { + margin: 0; + padding: 0; +} + +@media screen and (min-width: 425px) { + .hero { + margin: 0 calc(50% - 50vw) -3rem; + position: relative; + top: -2.5rem; + } +} + +/*****************************************************************************/ +/** HERO Teaser **************************************************************/ +/*****************************************************************************/ + +.teaser { + background: var(--md-primary-fg-color); +} + +.teaser h1 { + display: none; +} + +@media screen and (min-width: 425px) { + .teaser { + margin-top: 0; + position: absolute; + top: 15vw; + padding: .75rem 1.5rem .75rem; + max-width: 20rem; + border-radius: .25rem; + border: 1px solid var(--md-default-fg-color--lightest); + } +} + +@media screen and (min-width: 768px) { + .teaser { + top: 7.5vw; + } +} + +@media screen and (min-width: 1220px) { + .teaser { + top: 10vw; + } +} + +/*****************************************************************************/ +/** Photo Cards - Grid Cards with photos filling the card to the border ******/ +/*****************************************************************************/ + +.photo-cards { + li > p:first-of-type { + margin: -.8rem -.8rem 0 -.8rem; + margin-top: -.8rem !important; + } +} + +/*****************************************************************************/ +/** Full Width Colored Sections **********************************************/ +/*****************************************************************************/ + +.full-width { + position: relative; + padding: 1rem 0; +} + +.full-width::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: -50vw; + right: -50vw; + background-color: #f7f7f7; + z-index: -1; +} + +.md-content__inner > .full-width:last-child { + margin-bottom: -2rem; +} + + +/*****************************************************************************/ +/** Specialised styling for the 'In Samenwerking Met' card section ***********/ +/*****************************************************************************/ + +.in-cooperation-with { + /* make sure heading padding doesn't collapse, but don't add a significant padding ourselves */ + padding-top: 0.1rem; + margin-top: 2.5rem; +} +.md-typeset .in-cooperation-with__partners { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); +} +.md-typeset .in-cooperation-with__partners li { + display: flex !important; + align-items: center; + justify-content: center; +} +.md-typeset .in-cooperation-with__partners img { + max-height: 150px; + filter: grayscale(100%); + opacity: 0.6; +} +.md-typeset .in-cooperation-with__partners img:hover { + filter: grayscale(0%); + opacity: 1; +} + +/*****************************************************************************/ +/** Two column flex layout ***************************************************/ +/*****************************************************************************/ + +.two-column { + display: flex; + flex-direction: column; +} + +.two-column + .two-column { + margin-top: 1.5rem; + border-top: 2px dotted var(--md-default-fg-color--lighter); + padding-top: 1.5rem; +} + +@media screen and (min-width: 768px) { + .two-column { + gap: 2rem; + flex-direction: row; + } + + .two-column h2, + .two-column h3 + { + flex: 0 0 16.66667%; + + margin-top: .7rem; + padding-top: 0; + } +} diff --git a/index.html b/index.html deleted file mode 100644 index 991fd32..0000000 --- a/index.html +++ /dev/null @@ -1,479 +0,0 @@ - - - - - - - - - - - - Netherlands3D - - - - - - - - -
- -
-
-
-
-

- Logo - Netherlands3D -

-

- Netherlands3D, the open-source Digital Twin framework designed for the Netherlands. Through data visualization, Netherlands3D empowers you to create detailed, data-driven models. -

-
- Get started - Go to Github -
-
-
-
- ...
-
-
- - - -
- -
- -
-
-
-
-
-
- -
-

Coordinates

-

A C# library for the handling and converting between various coordinate systems.

-
- - - - - - - - -
-
- - - - - - - - -
-
- -
-

Next?

-

There are a great number packages in the pipeline, watch this space.

-
-
-
-
-
- - - - - -
-

Unity Packages

-

In order to create a great - User Experience our packages make use of OpenUPM. In this way you can load our packages and keep up to date as if they are part of Unity itself.

-

We created a set of - Packages that are dynamic and come to help you.

-
- Coordinates - Tile Handler - - - - Simulations -
- View all
-
-
-
-
-
-
-
- -
-

Documentation & examples

-

Netherlands3D comes with a lot of fully coded - examples that help you get started faster.

-
    -
  • -
    -
    - -
    -

    Built by Developers for Developers

    -
    -
    • -
  • -
    -
    - -
    -

    Carefully crafted code for Packages

    -
    -
    • -
  • -
    -
    - - - -
    -

    Extendable from the start

    -
    -
    • -
-
-
-
- -
-
-
-
- -
-
-
-
-
- -
-

Open Source

-

Since we believe data should be open, - we wanted to continue this too. You can give this - version a try to feel the design and also test the quality of the code!

-

- Get it free on Github and please help us spread the news with a Star!

- - Github Star - -
-
- - -
-
-
-
-
-
- - - -
-
-
-

😍 -

-

Does this sound good to you?

-

Cause if you do, you can be part of it. - Hit the buttons below to navigate to get The Framework for your next project. -

-
Get startedGo to Github
-
-
-
-
-
- -
- - diff --git a/mkdocs.yml b/mkdocs.yml new file mode 100644 index 0000000..a3258b1 --- /dev/null +++ b/mkdocs.yml @@ -0,0 +1,93 @@ +site_name: "" +theme: + name: material + logo: images/logo.png + favicon: images/favicon.ico + language: nl + palette: + - media: "(prefers-color-scheme: light)" + scheme: default + primary: white + accent: indigo + toggle: + icon: material/brightness-7 + name: Switch to dark mode + - media: "(prefers-color-scheme: dark)" + scheme: slate + primary: black + toggle: + icon: material/brightness-4 + name: Switch to light mode + features: + - navigation.indexes + - navigation.sections + - navigation.tabs + - navigation.instant + - navigation.expand + - navigation.path + - navigation.footer + - navigation.tracking +plugins: + - search: + - blog: + blog_dir: articles + categories_url_format: "{slug}" +extra_css: + - stylesheets/extra.css +markdown_extensions: + - admonition + - attr_list + - md_in_html + - pymdownx.details + - pymdownx.superfences: + custom_fences: + - name: mermaid + class: mermaid + format: !!python/name:pymdownx.superfences.fence_code_format + - pymdownx.caret + - pymdownx.mark + - pymdownx.snippets + - pymdownx.tilde + - pymdownx.emoji: + emoji_index: !!python/name:material.extensions.emoji.twemoji + emoji_generator: !!python/name:material.extensions.emoji.to_svg +nav: + - 'index.md' +# - 'Eindgebruikers': + - 'Voor organisaties': + - 'organisations/index.md' + - 'organisations/beginnen-in-vijf-minuten.md' + - 'organisations/hosting.md' + - 'organisations/personalisering.md' + - 'Voor ontwikkelaars': + - 'developers/basis-in-een-uur.md' + - 'Beginnen.md' + - 'TileSystemGebruiken.md' + - 'DataKlaarzetten.md' + - 'DataKoppelen.md' + - 'Features': + - 'Embedding.md' + - 'BAG.md' + - 'Camera.md' + - 'Layers.md' + - 'Packages': + - 'developers/packages/creating-and-managing-packages.md' + - 'User interface': + - 'developers/ui/introduction.md' + - 'developers/ui/keeping-our-documentation-current.md' + - 'developers/ui/understanding-blocks.md' + - 'developers/ui/understanding-components.md' + - 'Blocks': + - 'developers/ui/blocks/property-panel-and-sections.md' + - 'Components': + - 'developers/ui/components/accordion.md' + - 'developers/ui/components/cards.md' + - 'developers/ui/components/sliders.md' + - 'developers/ui/components/double-sliders.md' + - 'developers/ui/components/text-fields.md' + - 'Contributing': + - 'developers/contributing/documentation.md' +# - 'Artikelen': +# - 'articles/index.md' +# - 'Over ons': +# - 'about-us/index.md'