Càmera, galeria de fotos i mapa


En aquesta activitat es crea la secció per fer fotos, la secció per visualitzar-les i gestionar-les i la secció per a un mapa.



Més concretament es pretén donar resposta a les preguntes següents:

  • Quin element HTML permet fer fotos?
  • Quin és el procediment per mostrar un mapa?
  • Com es poden incorporar marcadors a un mapa?


Càmera fotogràfica

La secció 2 de la webapp permet fer fotos amb la càmera del dispositiu. Ha d'incorporar:

  • Un botó per fer la foto
  • Una imatge per a la vista prèvia de la foto feta
  • Un botó per desar la foto

El fragment de la secció queda en la forma:

fer_foto.html
<div id="seccio_2" class="seccio">
  <div id="div_foto">    <!-- contenidor de la vista prèvia de la foto feta -->
    <img id="foto">
    <i id="icona_camera" class="fa-solid fa-image"></i>    <!-- icona que ocupa l'espai quan encara no s'ha fet la foto -->
  </div>
  <div id="div_control">    <!-- contenidor dels botons per fer i desar la foto -->
      <label for="obturador">    <!-- etiqueta auxiliar per ocultar el botó predeterminat -->
        <i class="fa-solid fa-circle-dot"></i>    <!-- icona del botó per fer la foto -->
      </label>
      <input type="file" accept="image/*" id="obturador" capture="camera" /> <!-- element que captura la imatge -->
      <i id="desa" class="fa-solid fa-check"></i>    <!-- icona del botó per desar la foto -->
  </div>
</div>

Tot i que l'element <input> incorpora l'atribut capture="camera", és possible que el dispositiu no tingui càmera o que la configuració del navegador o del propi dispositiu no autoritzi el seu ús. En aquests casos s'obre la galeria de fotos del dispositiu i se'n pot triar una.

Per operar sobre la foto realitzada s'ha d'incorporar un element <canvas> auxiliar. També s'ha d'incloure un contenidor per mostrar la foto en pantalla completa:

canvas.html
<canvas id="canvas"></canvas>
<div id="div_gran">
  <img id="foto_gran" />
</div>


Aquests són els selectors i les declaracions CSS corresponents:

fer_foto.css
#div_foto {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
#icona_camera {
    font-size: 40vmin;
    color: #950E17;
}
#foto {
    max-width: 60vmin;    /* dimensions màximes per a la prveisualització de les fotos */
    max-height: 60vmin;
    cursor: pointer;
}
#div_control {
    height: 25vmax;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#div_control i {
    cursor: pointer;
    font-size: 20vmin;    
    color: green;
}
#obturador {
    position: absolute;
    width: 0;
    opacity: 0;
}
#canvas, #desa {
    display: none;
}
#div_gran {
    display: none;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: black;
    max-height: 100vh;
    max-height: 100svh;
    max-height: -webkit-fill-available;
}
#foto_gran {
    max-width: 95vmin;
    max-height: 95vmax;
    cursor: pointer;
}
@media (orientation: landscape) {
    #seccio_2 {
        flex-direction: row;
    }
    #div_foto {
        flex-direction: column;
    }
    #div_control {
        width: 25vmax;
        height: auto;
        flex-direction: column;
    }
    #div_gran {
        max-height: 100vh;
        max-height: 100svh;
    }
    #foto_gran {
        transform: rotate(-90deg);    /* gir de 90 graus correponent al canvi d'orientació */
    }
}

Aquest és l'aspecte que s'obté en les dues orientacions:




Galeria de fotos

La secció 3 de la webapp és per a les fotos realitzades:

galeria.html
<div id="seccio_3" class="seccio">
  <div id="llista_titol">    <!-- capçalera de la llista de fotos -->
    <i class="fa-solid fa-image"></i>    <!-- per a la miniatura de les fotos -->
    <i class="fa-solid fa-calendar-days"></i>    <!-- per a la data de captura de les fotos -->
    <i class="fa-solid fa-trash"></i>    <!-- per esborrar les fotos -->    
  </div>
  <div id="llista_fotos">    <!-- contenidor, inicialment buit, on hi haurà una fila per a cada foto -->
  </div>
</div>


Aquests són els selectors i les declaracions CSS corresponents:

galeria.css
#llista_titol {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#llista_titol i {
    font-size: 4vmax;
    color:#950E17;
}
#llista_titol i:nth-child(1) {    /* primer <i> (miniatura de la foto) */
    flex: 2;
}
#llista_titol i:nth-child(2) {    /* segon <i> (data i hora) */
    flex: 3;
}
#llista_titol i:nth-child(3) {    /* tercer <i> (icona per esborrar la foto) */
    flex: 1;
}
#llista_fotos {
    height: 70vmax;
    overflow-y: scroll;
}
#llista_fotos::-webkit-scrollbar {
    display: none;    /* oculta la barra de desplaçament vertical */
}
@media (orientation: landscape) {
    #llista_fotos {
        height: 70vmin;
    }
}

Aquest és l'aspecte que s'obté en les dues orientacions:




Mapa

La secció 4 de la webapp mostra un mapa. La llibreria Javascript més utilitzada per mostrar mapes és Leaflet, s'ha de referenciar en la capçalera <head> del document index.html:

mapa.html
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

El mapa ocuparà tot l'espai de la secció 4, s'ha d'eliminar el text que conté: 

<div id="seccio_4" class="seccio">
    Secció 4    <!-- s'ha d'eliminar el text "Secció 4" -->
</div>