# Web Navigator ## Components * FBX model (animated camera, animated backplane, clickable volumes, occlusion mesh) * VP visualizations (2k and 4k. Dimensions need to be in power of 2) * Database with Wohnungsspiegel and information pro apartment * card element, detailed element etc HTML templates * visual contents pro apartment (floorplan PDFs, pano, visus) * other contents pro apartment (view link, address link, link to application etc) * compass images dependant on project * list of default cameras or camera range pro apartment (apartment visibilities) * ... ### Flowchart https://docs.google.com/drawings/d/1PYzzdmopkRsk7X0n567tg0nRDnS08qseP_uNtVF3JvQ/edit ## Visualizations and Model The FBX model needs to include * Animated camera. * Animated backplane perpendicular to camera onto which the VP visualitations are applied as texture. * Clickable volumes that are named according to apartment/rental object ID (eg. 31.02 or CHH_03.12). * Occlusion mesh - a volume slightly smaller than the clickable columes to occlude the back faces of clickable volumes. ![Knowledgebase](https://knowledge.raumgleiter.com/wp-content/uploads/2021/03/settings1.png) More detailed steps how to prepare the clickable volumes, camera, backplane, occlusion volume, etc are in Knolwedgebase: https://knowledge.raumgleiter.com/docs/knowledge-base/new-products/wohnungsfinder/ NB: the mesh names (for clickables, occlusion volume and backplane) as well as camera names must be consistent - in case of any changes, the names must also be adjusted in the code. NB: camera animation direction must be consistent - in case of any changes, the interaction and buttons need to be adjusted in code. ## Database The data table is hosted on Google Sheets under app@raumgleiter.com account (PW in Keepass). https://docs.google.com/spreadsheets/d/1aQfICxVBo11_rfncaQpmNkmAPTS4qhaEFV1-KOXF_hU/edit#gid=1577659403 config.js defines the document ID which is connected as well the Sheet name and the ``` "googleApi": { discoveryDocs : ["https://sheets.googleapis.com/$discovery/rest?version=v4"], scopes : "https://www.googleapis.com/auth/spreadsheets.readonly", apiKey : 'AIzaSyB8pXgIDmaMOhRFurb_5S-AC4nas7kOTPk', spreadsheetId : '1aQfICxVBo11_rfncaQpmNkmAPTS4qhaEFV1-KOXF_hU', sheetId : 'Live', cellRange : 'A5:AE' } ``` interface.js reads the table in as an array according to the cellRange given in config.js. It also generates an object with data per apartment a la: ``` let objInfo = { direction : (lang == "de") ? apartments[i][1] : apartments[i][1].replace("Süd","South").replace("Ost","East").replace("Nord","North"), type : (lang == "de") ? apartments[i][2] : apartments[i][2].replace("Typ","Type"), title : apartments[i][3], description : (lang == "de") ? apartments[i][4] : apartments[i][4].replace("Zimmer","Rooms"), area : parseFloat(apartments[i][5]), loggia_area : parseFloat(apartments[i][6]), pricem2 : parseFloat(apartments[i][7].replace(/\’/g, '')), pricegross : (apartments[i][8] == "null") ? null : parseFloat(apartments[i][8].replace(/\’/g, '')), state_simplyfied : (lang == "de") ? apartments[i][10] : apartments[i][11], floorplanURL : apartments[i][13], viewURL : apartments[i][14], confiURL : apartments[i][15], panoURL : apartments[i][16], rooms : parseFloat(apartments[i][19]), floor : parseInt(apartments[i][20]), //aptNr : parseInt(apartments[i][21]), minCam : apartments[i][22], maxCam : apartments[i][23], meshName : apartments[i][25] } ``` NB: parameters such as rooms, floor, aptNr and meshName are generated based on values from the incoming data (from the copied XLS). Min and max camera range ar added manually. #### Database updates Only app@raumgleiter.com user can make updates in the table ([Restricted via Data > Protected sheets & ranges](https://support.google.com/docs/answer/1218656?co=GENIE.Platform%3DDesktop&hl=en#zippy=%2Cprotect-a-range-or-sheet)) In case there is a new XLS for prices etc, this should be copied to the sheet "Incoming". Recommended to first do a copy of the previous one. The structure and order of columns should not be changed. If it has changed, the "Live" sheet needs to be checked and relinked. Columns A to I are read and shown in the "Live" sheet (headers from row 9 and data from row 11 onwards). In case of updates it is recommended to also do a copy of this sheet before any bigger changes and link it to the old "Incoming" sheet. #### Changing apartment status External **invited** users should only be able to change the status["de"] column inputs. English translation of that is automatically generated. Any other changes should be done by RG. https://docs.google.com/spreadsheets/d/1_kIvpcYryp3Q4CCM8sqCbZO10-cRaG7ZGLIekaXkbWM/edit?usp=sharing #### Google Sheets API The database / table API can be managed in Google Console (app@raumgleiter.com & PW in Keepass). https://console.cloud.google.com/apis/dashboard?folder=&organizationId=&project=pilatus-tower ##### Attributes Guide Data -------------------------------------- Name Index Reference Geschoss Zahl 0 A Geschoss Namen 1 B Ausrichtung 2 C Wohnungstyp 3 D Whgs.-Nr. 4 E Wohnung (Anzahl Zimmer) 5 F Fläche NWF 6 G Fläche Aussenfläche 7 H Aussenfläche Typ 8 I CHF /m2 9 J Kaufpreis 10 K Public -------------------------------------- status["de"] 12 M status["en"] 13 N Content -------------------------------------- floortype 14 O floorplanURL 15 P viewURL 16 Q panoURL 17 R configuratorURL 18 S imgs 19 T App Attributes & Helpers -------------------------------------- rooms 21 V floor 22 W aptNr 23 X minCam 24 Y maxCam 25 Z uniqueType 26 AA checkup_cam 27 AB WhgsNr without period 28 AC Prefix 29 AD manual middle cam 30 AE viewDirection 31 AF ## Check 3rd party cookies & localStorage support This is used in interface.js for checking whether localStorage and third party cookies can be used or not. If not, then e.g. the favorites are not shown and Biganto FreePano is not opened in modal but in another tab (otherwise it didnt load because Biganto uses localStorage). The solution is based on: //https://stackoverflow.com/questions/43923761/how-to-detect-third-party-cookies-had-being-blocked-without-a-page-refresh It is hosted on AWS: https://rg-services.s3.eu-central-1.amazonaws.com/3rd-party-check/start.html ## Running locally Because the repository has a "public" folder, then instead of starting the localhost with `http-server` it needs to be started with e.g. (where 8000 is a freely chosen ID): `http-server . -p 8000` # Gartenstrasse Projekt Informationen ## Link zum Download dynamische Preisliste: `       Preisliste ` ## Link für Mermarkter (Kontrolle Status): https://docs.google.com/spreadsheets/d/1_kIvpcYryp3Q4CCM8sqCbZO10-cRaG7ZGLIekaXkbWM/edit#gid=698287265 ## Link zum Navigator für Einbetten (Hosting): https://app.raumgleiter.com/4517_02_gartenstrasse_navigator/?lang=de&view=6