From ed1602691b747971c7968812d71a82af0a606560 Mon Sep 17 00:00:00 2001 From: Mathieu Livebardon Date: Fri, 16 Feb 2024 14:48:07 +0100 Subject: [PATCH 1/5] update(showroom):remove about and help button of the sidebar ; create littles buttons bottom left of the screen; add a code button redirects to .html code --- examples/assets/img/icons/code.png | Bin 0 -> 2041 bytes examples/show_room.html | 57 ++++++++++++++++++++++++++--- examples/widget_base_map.html | 2 +- packages/show_room/src/index.js | 12 +++++- packages/show_room/src/style.css | 39 ++++++++++++++++++++ 5 files changed, 102 insertions(+), 8 deletions(-) create mode 100644 examples/assets/img/icons/code.png diff --git a/examples/assets/img/icons/code.png b/examples/assets/img/icons/code.png new file mode 100644 index 0000000000000000000000000000000000000000..55640aad6bf0593bbbb88caaa330b59e8aaa6bcd GIT binary patch literal 2041 zcmaJ?eKb^gAD=>Dd01t=gsxE;VaB{+W(~%Sm>A|vVvd~FyjNMl6eYnV!f>`6fyq)mhOC9vIGaH53(%^i@+1%gWS|mKafp*mEkpoPaELKX zp_fq20~4Xp3=Oy=BO*$kktAm+hynh9pO%daz#t|Cv~aQtWotRaH@a-x)?ZVIz#9mb z#3B9>ltd^3c!&lBm}GBHIhDZ#d{|_vH=V&^c>pvosxQUMmqMj`QoY#>FE)(^yj?`x zn?{kq7W22g^@X1}#6%2JvniDH^mKAMos4Ld6e^3wqIl6LG@2)l@I?2jFsas4g}N*& z@Ih3rfz%j;r~tj9REDHt93md+A1T1Cd9Var^_pIqjOT>Ut}YTPp))Ie#VVw(nmfj4Qhp_OByt*G~wt5`V} z`ifi%9t=g_-2ZF#@)bTodh^}r;)i#`532Bq*WjZ~0^$(@!4MMgxl!7o2}x4u7s~b7 zMOmc-VS)7z8a{qCd`@2SF==tfhx})fOAi)}_8tDmm$H4BuEO}tE9ZK%l%?a9mS(Xa ztuEjKlN3E28_hPSc4{kR{I6%T!6Su<8ApF{ch36Aif0ODt@Zy+`*`-m{6a6QkChi0 ze_7JK=n*t?;ysIkwcQ3!R$Z4%Kd`Y8s8nRC{Sg(tw4h)r6@nm>X45UMt}hlA7OwW~ zX>V`W4Gaueu3mE}5KxcDq+{5elsoS0)~(C%=7bjy4-dDTpTF?UH~Y?I zW?b8?OIo9oepOR5ldVuZu~zzZoAf_^{94!C+>9(PE}nF9bo|^Snnt6QC(!MkoR&;} zF0I&&r(lCcRz(L~txw6yN_KK^m~bPJ8r+I{{A=H{w9^r-@yjI~xD`W31hYWa2oPEM{Ic<^AWOfJ7jHABC9xGra8WMq?v$Al~; zW%^V5BM0vp7Y_~&R+N>MVaIBKAW@V>TkNC~1UL8Hz8&scW3iF8dh_$I`}_L?r`XO- zO-(gbRi3(Qyi->O@7|pW5sM2Q?s9KD<(RqN@A8s2z^Qm%H}muJA2XOt=ETHA^1~)H zGjnlcYwBmMi(OL=Lt6>=(i$5ZqjGa|zvXhdtB!Ub{MRYvXQZQhlH%h}naxZ#_4f9< zW@cvo;9*NG3E<_F3@`Mh*=SG?I-TCbc5N{9bJ<@=3+W4L{QbvpqqefV8PrkCYhOJ@ zI1y=b$<0>KG5UOTbkr!3)za0`@lTW6vZ^mchg-`3o0pf@Sx`_AmKJ;5xZAQyM9SV3 z8(VtSCLy%=R=4b{vu8JLEZp%6Y5(aZ$a!HhusfjU`ud^I3!l%ue3_P#TU%KdBtr>Cc>wSFltWgcacz|+DPfu_fkk8oLcMUU`$MJ36M3=QMr z4U9u}UwU7fn0VeM-}qVY$%-OT+cCqcF{j$|CDG3PcV5-k*N0%&>gry+U*hPiDGi#P zoxQSi=gt;>aByzZzn>>}eEqF#H1WrMPSb?FIevjofW_2n^Qk(50b!SYav0;F^0fXj76eD|tApYX{12ZL BMa}>K literal 0 HcmV?d00001 diff --git a/examples/show_room.html b/examples/show_room.html index cde3ee93a..44277618a 100644 --- a/examples/show_room.html +++ b/examples/show_room.html @@ -76,6 +76,10 @@ app.addURLButton('./assets/img/icons/link.png'); + const infoUI = document.createElement('div'); + infoUI.id = 'root_InfoUI'; + document.body.appendChild(infoUI); + // HELP HTLM const xhrHelpMarkdown = new XMLHttpRequest(); xhrHelpMarkdown.open('GET', './assets/md/help.md'); @@ -85,11 +89,26 @@ xhrHelpMarkdown.status >= 200 && xhrHelpMarkdown.status < 300 ) { - const docHtml = document.createElement('div'); - docHtml.innerHTML = new showdown.Converter() + const docHelpHtml = document.createElement('div'); + + docHelpHtml.innerHTML = new showdown.Converter() .makeHtml(xhrHelpMarkdown.responseText) .replace(/..\/img\//g, './assets/img/'); - app.addCustomHtml('./assets/svg/help.svg', docHtml, 'Help'); + docHelpHtml.hidden = true; + docHelpHtml.title = 'Help'; + docHelpHtml.classList.add('container'); + docHelpHtml.style.width = '50%'; + infoUI.appendChild(docHelpHtml); + + const buttonHelp = document.createElement('a'); + const iconHelp = document.createElement('img'); + iconHelp.src = './assets/svg/help.svg'; + buttonHelp.appendChild(iconHelp); + + buttonHelp.addEventListener('click', () => { + docHelpHtml.hidden = !docHelpHtml.hidden; + }); + infoUI.appendChild(buttonHelp); } }; xhrHelpMarkdown.send(); @@ -103,15 +122,41 @@ xhrAboutMarkdown.status >= 200 && xhrAboutMarkdown.status < 300 ) { - const docHtml = document.createElement('div'); - docHtml.innerHTML = new showdown.Converter() + const docAboutHtml = document.createElement('div'); + docAboutHtml.innerHTML = new showdown.Converter() .makeHtml(xhrAboutMarkdown.responseText) .replace(/..\/img\//g, './assets/img/'); - app.addCustomHtml('./assets/svg/about.svg', docHtml, 'About'); + docAboutHtml.hidden = true; + docAboutHtml.title = 'About'; + docAboutHtml.style.width = '50%'; + docAboutHtml.style.transform = 'translate(100%)'; + docAboutHtml.classList.add('container'); + + infoUI.appendChild(docAboutHtml); + + const buttonAbout = document.createElement('a'); + const iconAbout = document.createElement('img'); + iconAbout.src = './assets/svg/about.svg'; + buttonAbout.appendChild(iconAbout); + buttonAbout.addEventListener('click', () => { + docAboutHtml.hidden = !docAboutHtml.hidden; + }); + infoUI.appendChild(buttonAbout); } }; xhrAboutMarkdown.send(); + // CODE + const buttonCode = document.createElement('a'); + const iconCode = document.createElement('img'); + iconCode.src = './assets/img/icons/code.png'; + buttonCode.appendChild(iconCode); + buttonCode.href = + 'https://github.com/VCityTeam/UD-Viz/blob/master/examples/show_room.html'; + buttonCode.target = '_blank'; + infoUI.appendChild(buttonCode); + + // WIDGETS app.addWidgetGeocoding( configs['geocoding_server'], './assets/svg/geocoding.svg' diff --git a/examples/widget_base_map.html b/examples/widget_base_map.html index eadec9803..a486fd178 100644 --- a/examples/widget_base_map.html +++ b/examples/widget_base_map.html @@ -1,4 +1,4 @@ - +0 widget base map diff --git a/packages/show_room/src/index.js b/packages/show_room/src/index.js index efbef40f4..3c0ab259f 100644 --- a/packages/show_room/src/index.js +++ b/packages/show_room/src/index.js @@ -277,6 +277,8 @@ export class ShowRoom { ); } if (configs.baseMap) { + // Add a WMS imagery layer + this.frame3DPlanar.itownsView.addLayer( new itowns.ColorLayer(configs.baseMap['name'], { updateStrategy: { @@ -412,7 +414,7 @@ export class ShowRoom { // url camera matrix button const urlCameraMatrixButton = document.createElement('img'); urlCameraMatrixButton.src = pathIcon; - urlCameraMatrixButton.title = 'Camera Position Url'; + urlCameraMatrixButton.title = 'Copy Camera Position Url'; this.menuSideBar.appendChild(urlCameraMatrixButton); urlCameraMatrixButton.onclick = () => { @@ -437,6 +439,7 @@ export class ShowRoom { const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = 'Widget Geocoding'; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { @@ -581,6 +584,7 @@ export class ShowRoom { // PLUG WITH SIDEBAR BUTTON const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = 'Widget SMDB'; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { @@ -629,6 +633,7 @@ export class ShowRoom { const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = 'Widget Guided Tour'; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { @@ -657,6 +662,7 @@ export class ShowRoom { const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = 'Widget Camera Positioner'; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { @@ -683,6 +689,7 @@ export class ShowRoom { const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = 'Widget LayerChoice'; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { @@ -710,6 +717,7 @@ export class ShowRoom { const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = 'Widget SlideShow'; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { @@ -739,6 +747,7 @@ export class ShowRoom { const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = 'Widget Sparql'; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { @@ -760,6 +769,7 @@ export class ShowRoom { addCustomHtml(pathIcon, customHtml, label) { const sideBarButton = document.createElement('img'); sideBarButton.src = pathIcon; + sideBarButton.title = label; this.menuSideBar.appendChild(sideBarButton); sideBarButton.onclick = () => { if (customHtml.parentElement) { diff --git a/packages/show_room/src/style.css b/packages/show_room/src/style.css index 8f7ddc99c..7c80b9983 100644 --- a/packages/show_room/src/style.css +++ b/packages/show_room/src/style.css @@ -101,6 +101,43 @@ margin: 5px 10px 5px 5px; } + +/*********************************** Info UI */ + +#root_InfoUI { + position: fixed; + left: var(--sidebar-widget-sidebar-width); + bottom: 0px; + z-index: 3; + display: flex; + margin-left: 10px; +} + +#root_InfoUI > a { + display: block; + background-color: #aebbc2; + border-radius: 20px; + width: 40px; + height: 40px; + margin: 2px; +} + +#root_InfoUI > a:hover { + background-color: #000000; + cursor: pointer; +} + +.container { + position: fixed; + top: 0; + height: 80%; + overflow: scroll; + background: whitesmoke; +} + +.container img{ + width: 100%; +} /*********************************** AUTHENTIFICATION */ #_sidebar_widget_profile { @@ -171,3 +208,5 @@ .context-menu button { cursor: pointer; } + + From d8dda18d8a7011a239d170d7f5fe168c788f7256 Mon Sep 17 00:00:00 2001 From: Mathieu Livebardon Date: Tue, 20 Feb 2024 11:52:55 +0100 Subject: [PATCH 2/5] update(showroom):add tiltes to html element --- examples/show_room.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/show_room.html b/examples/show_room.html index 44277618a..44b704d03 100644 --- a/examples/show_room.html +++ b/examples/show_room.html @@ -101,6 +101,7 @@ infoUI.appendChild(docHelpHtml); const buttonHelp = document.createElement('a'); + buttonHelp.title = 'help'; const iconHelp = document.createElement('img'); iconHelp.src = './assets/svg/help.svg'; buttonHelp.appendChild(iconHelp); @@ -135,6 +136,7 @@ infoUI.appendChild(docAboutHtml); const buttonAbout = document.createElement('a'); + buttonAbout.title = 'about'; const iconAbout = document.createElement('img'); iconAbout.src = './assets/svg/about.svg'; buttonAbout.appendChild(iconAbout); @@ -148,6 +150,7 @@ // CODE const buttonCode = document.createElement('a'); + buttonCode.title = 'Access to code'; const iconCode = document.createElement('img'); iconCode.src = './assets/img/icons/code.png'; buttonCode.appendChild(iconCode); From 4660407ea11e7f6d29adbbc831e03f7a0d71893b Mon Sep 17 00:00:00 2001 From: Mathieu Livebardon Date: Tue, 20 Feb 2024 11:53:22 +0100 Subject: [PATCH 3/5] fail --- examples/widget_base_map.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/widget_base_map.html b/examples/widget_base_map.html index a486fd178..eadec9803 100644 --- a/examples/widget_base_map.html +++ b/examples/widget_base_map.html @@ -1,4 +1,4 @@ -0 + widget base map From 939977d0f2d4d40324171d14ec1d5e0e622f2562 Mon Sep 17 00:00:00 2001 From: Mathieu Livebardon Date: Wed, 21 Feb 2024 10:57:44 +0100 Subject: [PATCH 4/5] update(showroom):delete extralines --- packages/show_room/src/style.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/show_room/src/style.css b/packages/show_room/src/style.css index 7c80b9983..764623c7a 100644 --- a/packages/show_room/src/style.css +++ b/packages/show_room/src/style.css @@ -101,7 +101,6 @@ margin: 5px 10px 5px 5px; } - /*********************************** Info UI */ #root_InfoUI { @@ -127,7 +126,7 @@ cursor: pointer; } -.container { +.container { position: fixed; top: 0; height: 80%; @@ -135,7 +134,7 @@ background: whitesmoke; } -.container img{ +.container img { width: 100%; } /*********************************** AUTHENTIFICATION */ @@ -208,5 +207,3 @@ .context-menu button { cursor: pointer; } - - From 5d6f96cc1be562d0d0630a0b02633d134d70171a Mon Sep 17 00:00:00 2001 From: Mathieu Livebardon Date: Wed, 21 Feb 2024 14:11:05 +0100 Subject: [PATCH 5/5] fix(showroom):css about and help --- examples/show_room.html | 58 ++++++++++++++++++++++++-------- packages/show_room/src/index.js | 3 ++ packages/show_room/src/style.css | 29 ++++++++++++++-- 3 files changed, 73 insertions(+), 17 deletions(-) diff --git a/examples/show_room.html b/examples/show_room.html index 44b704d03..0482b8741 100644 --- a/examples/show_room.html +++ b/examples/show_room.html @@ -78,7 +78,7 @@ const infoUI = document.createElement('div'); infoUI.id = 'root_InfoUI'; - document.body.appendChild(infoUI); + app.frame3DPlanar.domElementUI.appendChild(infoUI); // HELP HTLM const xhrHelpMarkdown = new XMLHttpRequest(); @@ -89,16 +89,25 @@ xhrHelpMarkdown.status >= 200 && xhrHelpMarkdown.status < 300 ) { - const docHelpHtml = document.createElement('div'); + const modal = document.createElement('div'); + modal.classList.add('modal'); + modal.hidden = true; + app.frame3DPlanar.domElementUI.appendChild(modal); + + const container = document.createElement('div'); + container.classList.add('container'); + modal.appendChild(container); + + const buttonClose = document.createElement('button'); + buttonClose.innerText = 'Close'; + container.appendChild(buttonClose); + const docHelpHtml = document.createElement('div'); docHelpHtml.innerHTML = new showdown.Converter() .makeHtml(xhrHelpMarkdown.responseText) .replace(/..\/img\//g, './assets/img/'); - docHelpHtml.hidden = true; docHelpHtml.title = 'Help'; - docHelpHtml.classList.add('container'); - docHelpHtml.style.width = '50%'; - infoUI.appendChild(docHelpHtml); + container.appendChild(docHelpHtml); const buttonHelp = document.createElement('a'); buttonHelp.title = 'help'; @@ -106,8 +115,14 @@ iconHelp.src = './assets/svg/help.svg'; buttonHelp.appendChild(iconHelp); + buttonClose.onclick = () => { + modal.hidden = true; + }; + modal.addEventListener('click', (event) => { + if (event.target == modal) modal.hidden = true; + }); buttonHelp.addEventListener('click', () => { - docHelpHtml.hidden = !docHelpHtml.hidden; + modal.hidden = false; }); infoUI.appendChild(buttonHelp); } @@ -123,25 +138,40 @@ xhrAboutMarkdown.status >= 200 && xhrAboutMarkdown.status < 300 ) { + const modal = document.createElement('div'); + modal.classList.add('modal'); + modal.hidden = true; + app.frame3DPlanar.domElementUI.appendChild(modal); + + const container = document.createElement('div'); + container.classList.add('container'); + modal.appendChild(container); + + const buttonClose = document.createElement('button'); + buttonClose.innerText = 'Close'; + container.appendChild(buttonClose); + const docAboutHtml = document.createElement('div'); docAboutHtml.innerHTML = new showdown.Converter() .makeHtml(xhrAboutMarkdown.responseText) .replace(/..\/img\//g, './assets/img/'); - docAboutHtml.hidden = true; docAboutHtml.title = 'About'; - docAboutHtml.style.width = '50%'; - docAboutHtml.style.transform = 'translate(100%)'; - docAboutHtml.classList.add('container'); - - infoUI.appendChild(docAboutHtml); + container.appendChild(docAboutHtml); const buttonAbout = document.createElement('a'); buttonAbout.title = 'about'; const iconAbout = document.createElement('img'); iconAbout.src = './assets/svg/about.svg'; buttonAbout.appendChild(iconAbout); + + buttonClose.onclick = () => { + modal.hidden = true; + }; + modal.addEventListener('click', (event) => { + if (event.target == modal) modal.hidden = true; + }); buttonAbout.addEventListener('click', () => { - docAboutHtml.hidden = !docAboutHtml.hidden; + modal.hidden = false; }); infoUI.appendChild(buttonAbout); } diff --git a/packages/show_room/src/index.js b/packages/show_room/src/index.js index 3c0ab259f..cc507f2ab 100644 --- a/packages/show_room/src/index.js +++ b/packages/show_room/src/index.js @@ -73,6 +73,9 @@ export class ShowRoom { layer: null, }; this.frame3DPlanar.domElement.onclick = (event) => { + if (checkParentChild(event.target, this.frame3DPlanar.domElementUI)) { + return; + } if (contextSelection.feature) { contextSelection.feature.userData.selectedColor = null; contextSelection.layer.updateStyle(); diff --git a/packages/show_room/src/style.css b/packages/show_room/src/style.css index 764623c7a..5c8a61b1f 100644 --- a/packages/show_room/src/style.css +++ b/packages/show_room/src/style.css @@ -127,16 +127,39 @@ } .container { - position: fixed; - top: 0; - height: 80%; + margin: 9rem; + max-width: 100vw; overflow: scroll; background: whitesmoke; + padding: 2rem; } .container img { + max-height: 50vh; + max-width: 100%; + display: block; + margin: 0 auto; +} + +.container > button { + width: 100%; + padding: 10px; + cursor: pointer; +} + +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 1050; width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + outline: 0; + background-color: #83838379; } + /*********************************** AUTHENTIFICATION */ #_sidebar_widget_profile {