W jaki sposób wykonać zrzut ekranu spaceru Street View mojej firmy?

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.

Najprostszą formą 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 {display:none;}

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.

    Leave Your Comment Here