W jaki sposób wykonać zrzut ekranu spaceru Street View mojej firmy?
- Google Street View Trusted
- 14 września 2020
Zdjęcia Street View w obiektach mają atrakcyjną formę i niekiedy pojawia się potrzeba, aby niektóre ujęcia wykorzystać w formie klasycznego zdjęcia, np. na stronie internetowej, w broszurach czy innych drukowanych materiałach.
„Wycinek i szkic” (w systemach Windows)
Ta metoda jest prosta i pozwala na wycięcie wybranego fragmentu ujęcia i nie wymaga dodatkowych aplikacji. Dostępna jest w nowszych systemach Windows. A skorzystać można z niej w następujący sposób.
Po otwarciu spaceru na interesującym nas ujęciu, wciskamy kombinację klawiszy windows+shift+S, co powinno spowodować aktywację niewielkiego menu, wybieramy pierwszą pozycję z tego menu.
Następnie zaznaczamy za pomocą myszki i kursora (przytrzymując przycisk myszki) interesujący nas fragment zdjęcia. Po wykonaniu tej operacji, w prawym dolnym rogu pojawi się miniaturka wykonanego zrzutu tak, jak na poniższej ilustracji. Należy kliknąć w tę miniaturkę, zanim zniknie.
Jeśli nie zdążymy kliknąć na miniaturkę, nadal będzie ona dostępna po kliknięciu ikony powiadomień po prawej stronie zegarka na dole ekranu (zwykle po jego prawej stronie). Następnie otworzymy okno ze zrzutem ekranu (jak na poniższym zdjęciu).
Tutaj możemy zapisać wykonany zrzut ekranu na dysku komputera za pomocą ikony dyskietki. Wówczas uzyskamy zdjęcie jpg lub png, które można załączyć w mailu, wykorzystać na stronie www, wstawić na facebooku, czy nawet wykorzystać w druku.
Metoda Print Screen
Kolejną metodą dokonania zrzutu ekranu ze spaceru wirtualnego Street View jest przejście do spaceru w trybie pełnego ekranu (w systemach Windows klawisz F11) i wykonanie polecenia print screen (przycisk na klawiaturze), który powoduje przesłanie zrzutu ekranu do schowka. Następnie zawartość schowka można umieścić w programie graficznym (Paint, Photoshop, Gimp) – należy otworzyć jeden z tego typu programów graficznych, utworzyć nowy dokument i wkleić zawartość schowka kombinacją ctrl+v. Oczywiście dużą niedogodnością jest wówczas fakt, że na ilustracji widoczne są elementy nawigacji i inne pola informacyjne, pochodzące z aplikacji Google Maps.
Możemy temu zapobiec, wycinając fragment ujęcia, który nas interesuje, w sposób widoczny na poniższej ilustracji – pozostawiając elementy nawigacyjne Google Maps poza obszarem zdjęcia. Jednak nie jest wystarczające wówczas, gdy potrzebujemy rzeczywiście szerokiego kadru.
Modyfikacja znaczników CSS w kodzie spaceru Street View
W takim wypadku przychodzi nam z pomocą narzędzie dla webmasterów DevTools, które oferuje nam bezpłatna przeglądarka Chrome (również w innych przeglądarkach jako opcja natywna bądź instalowana jako rozszerzenie). Jeśli chcesz pominąć proces z użyciem DevTools i od razu przejść do metody „na skróty”, przewiń na sam koniec artykułu, do akapitu „Jak szybko wyłączyć bloki Google Maps”.
Narzędzie DevTools uruchamiamy skrótem Ctrl+Shift+I, F12 (ostatnia używana zakładka) lub Ctrl+Shift+C (zakładka Elements). W systemie Mac odpowiednio Command+Option+I oraz Command+Option+C. W efekcie po prawej stronie ekranu przeglądarki powinien pojawić się panel DevTools, który pozwala nam wprowadzić „na żywo” pewne modyfikacji w kodzie strony (modyfikacje nie są trwałe i znikną po odświeżeniu strony). Celem, który chcemy osiągnąć jest usunięcie elementów aplikacji Google Maps, aby wykonać zrzut ekranu Street View Trusted i wykorzystać go na naszej stronie internetowej lub innych materiałach promocyjnych.
W momencie, gdy mamy dostęp do zakładki Elements, możemy wyszukać poszczególne elementy strony i je usunąć, korzystając z poleceń języka CSS. Na początek warto skorzystać z ikonki Inspect w lewym górnym rogu – 
. Następnie klikając w poszczególne bloki spaceru (jak mapa, czy blok w nagłówku itp.) możemy wyświetlić kod CSS, który je definiuje na stronie.
Jak widzimy, boks z nazwą firmy i autorem zdjęć utworzony jest za pomocą znacznika <div>, którego nazwa klasy to .widget-titlecard-contentcontainer. Natomiast po lewej stronie w panelu DevTools – w dolnej części – możemy teraz zdefiniować styl (zasadę css) tego bloku. W tej chwili interesuje nas głównie własność display. Jeśli istnieje, zmieniamy jej wartość na none, jeśli nie istnieje, dodajemy ten zapis w postacji diplay: none (najlepiej dla dynamicznej klasy element.style, która wyświetla się na samej górze dolnego panelu), co spowoduje, że blok zniknie z ekranu i odsłoni część ujęcia.
Tak samo postępujemy z pozostałymi blokami, które przysłaniają widok naszego spaceru wirtualnego. Przy czym należy pamiętać, że wyłączenie za pomocą tej zasady wskazany blok nie zawsze spowoduje, że zniknie on z ekranu. Wówczas powinniśmy przejść do wyższego poziomu, jak to widać na poniżej ilustracji, gdyż znaczniki w kodzie html są zapisane w sposób hierarchiczny, co widać w panelu DevTools w postaci wcięć. Bloki niższego rzędu są wpisane w bloki wyższego rzędu. Wyłączenie bloku niższego rzędu nie zawsze skutkuje wyłączeniem widoczności bloku, wówczas należy spróbować wyłączyć blok wyższego rzędu.
Powyższa ilustracja pokazuje sytuację z małym blokiem mapki w dolnej części ekranu. Po najechaniu na blok strzałką, wyświetli nam się <div> z klasą .widget-minimap.cover, natomiast aby go wyłączyć, należy nadać zasadę display:none dla klasy .widget-minimap, która jest jeden poziom wyżej.
Tak samo postępujemy z klasami:
- .widget-pane-toggle-button (strzałka – wysuń panel boczny)
- .widget-play-right, .widget-play-left (dwie strzałki przełączające widok)
- .app-vertical-widget-holder (panel poziomów – wymaga przejścia do znacznika wyższej hierarchii)
- .close-button-white
- .scene-footer-container
- div#watermark (znaczek Google)
- div#image-header (cień przy górnym brzegu, element, który naprawdę najtrudniej znaleźć)
Jak szybko wyłączyć bloki Google Maps
Można sobie wyobrazić, że istnieje metoda, która pozwoli włączyć wszystkie powyższe definicje jednym przyciskiem, bez konieczności wynajdywania każdego bloku i wyłączania go za każdym razem, gdy chcemy zrobić zrzut ekranu ze spaceru wirtualnego Street View Trusted po naszej firmie lub instytucji. I rzeczywiście tak jest!
Z pomocą przychodzi dodatek do przeglądarki Chrome Minimalist for Everything, który pozwala zastosować do wybranego rodzaju stron zdefiniowany fragment kodu css.
Konfigurując dodatek do przeglądarki należy utworzyć nowy moduł – New Module (w polu @includes można wpisać frazę *google.com/maps*) – kliknij „Zapisz zmiany/Save Changes”, następnie edytuj go i dodaj opcję – Add Option. Teraz w polu CSS możemy wkleić wszystkie klasy naszych bloków oddzielając je przecinkami i na końcu zdefiniować dla nich zasadę display:none.
Cały kod wygląda w ten sposób:
.widget-pane-toggle-button, div.widget-titlecard-contentcontainer, .widget-minimap, .widget-play-right, widget-play-left, .app-vertical-widget-holder, .close-button-white, .scene-footer-container, div#watermark, div#image-header, .QNI8Sb-minimap, .WzvKIe, #titlecard, #minimap, div#play.id-play {display:none;}
Niekiedy inżynierowie mogą coś modyfikować w kodzie Google Maps, wtedy ta lista może ulec pewnym zmianom. Potrzebę zmian, czy po prostu dopisania pewnych znaczników zauważymy, gdy po uruchomieniu rozszerzenia na mapach będziemy mieli jakieś okno, które wcześniej usunęliśmy. Oznacza to, że został zmieniony jakiś znacznik dotyczący tego okna i trzeba go dopisać do powyższej listy. My również tę listę w niniejszym wpisie aktualizujemy w miarę na bieżąco.
Po zapisaniu zmian, przechodzimy do naszego spaceru wirtualnego Street View. Dodatek widoczny jest w górnym pasku przeglądarki, w postaci ikonki z literką „M”. Po kliknięciu w ikonkę, mamy możliwość włączania i wyłączania zdefiniowanych stylów strony, które przygotowaliśmy.
Pewną niedogodnością może okazać się fakt, że po wyłączeniu bloków, może być nadal widoczny panel boczny ze zdjęciami, mimo że wcześniej go schowaliśmy. Aby zachować przycisk, pozwalający go wsunąć, z naszego kodu w Minimalist wystarczy usunąć linijkę .widget-pane-toggle-button,. Powodzenia. W razie problemów zachęcam do kontaktu.
Jak tworzymy panoramy? | Virtualpro
[…] tego się nadaje obraz panoramy, która jest już wczytana do aplikacji (takiej, jak Street View). Jak pozyskać taki obraz ze Street View, opisujemy w naszym tekście. Jakkolwiek również taka „zniekształcona” panorama ma swój niepowtarzalny urok 🙂 […]