Pixtuff 3.0

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Després d'anys treballant amb Pixtuff 2.3 (sota Windows, bd Acess), i portar molt endarrerit la classificació de fotos, és hora de migrar a Mysql i un entorn Linux. Després d'avaluar Coppermine (massa diferent el model de dades), continuaré treballant amb el model de dades de Pixtuff.

M'interessa visualitzar les dades i cercar les dades a través de la web (cosa que ja estava implementada a Pixtuff 2.3, això sí, s'haurà de millorar la capa CSS i utilitzar les últimes tecnologies web).

Quant a l'aplicació d'escriptori de moment em quedaré sense, i he de valorar si introduir la classificació de les fotos directament amb un script (INSERTS) és prou ràpid.

Els avantatges d'integrar-ho en el servidor Linux són:

Desavantatges:

Es podria aconseguir la integració amb Coppermine, però donat que aquest programa no m'acaba de convèncer (el model de dades està orientat als àlbums i no directament a les fotos; no hi ha gestió correcta de paraules claus i categories; no hi ha events. El disseny i la usabilitat no mata). Per tant, no val la pena destinar esforços a la integració, i continuaré amb una nova versió de Pixtuff purament web.

Si en el futur hi ha un projecte Open Source que sigui convincent, es podria migrar la bd de Pixtuff.

Base de dades

/*
CLASSIF (id_classif (PK), classif)
ESDEV (id_esdev (PK), esdev, id_esdev_pare (FK))
KEYWORD (id_keyword (PK), keyword)
FOTO (id_foto (PK), nom_fitxer, titol, data, tamany, width, height, id_cd, id_esdev, chkseq, ubicacio, info, exif, fitxeraudio)
FOTO_CLASSIF (id_foto (FK), id_classif (FK))
FOTO_KEYWORD (id_foto, id_keyword)
SLIDESHOW (id_slideshow (PK), titol, musica)
SLIDESHOW_DETALL (id_slideshow (PK), id_foto (PK), ordre, temps, efecte)
CERCAR (nom_cerca (PK), titol, id_foto, fitxer, classif, succes, paraulaclau, modedia, dia, tamany, chk_midaresolucio, cd, simple, chk_map_gps, chk_fitxeraudio)
FOTO_GPS (id_foto (PK), X, Y, zoom)
*/

CREATE DATABASE joanillofotos DEFAULT CHARACTER SET utf8;
USE joanillofotos;

DROP VIEW C3;
DROP VIEW C2;
DROP VIEW C1;
DROP TABLE FOTO_GPS;
DROP TABLE CERCAR;
DROP TABLE SLIDESHOW_DETALL;
DROP TABLE SLIDESHOW;
DROP TABLE FOTO_KEYWORD;
DROP TABLE FOTO_CLASSIF;
DROP TABLE FOTO;
DROP TABLE KEYWORD;
DROP TABLE ESDEV;
DROP TABLE CLASSIF;

CREATE TABLE CLASSIF(
id_classif smallint primary key,
classif varchar(50) not null,
usual bool
) TYPE=InnoDB;

REM canvi respecte pixtuff.mdb. Afegeixo la clau forània a id_esdev_pare, i ara per identificar els pares no és id_esdev_pare=0 sinó id_esdev_pare=id_esdev

CREATE TABLE ESDEV(
id_esdev smallint primary key,
esdev varchar(255) not null,
id_esdev_pare smallint,
usual bool
) TYPE=InnoDB;

ALTER TABLE ESDEV ADD FOREIGN KEY(id_esdev_pare) REFERENCES ESDEV(id_esdev) ON DELETE CASCADE;

CREATE TABLE KEYWORD(
id_keyword smallint primary key,
keyword varchar(50) not null,
usual bool
) TYPE=InnoDB;

CREATE TABLE FOTO(
id_foto mediumint primary key,
nom_fitxer varchar(50) not null,
titol varchar(255),
data datetime not null,
tamany int,
width smallint,
height smallint,
id_cd varchar(5),
id_esdev smallint,
chkseq bool,
ubicacio varchar(255),
info tinytext COMMENT 'amb aquest tipus és suficient per ficar molta informació',
exif varchar(255),
fitxeraudio bool
) TYPE=InnoDB;

ALTER TABLE FOTO ADD FOREIGN KEY(id_esdev) REFERENCES ESDEV(id_esdev) ON DELETE CASCADE;

CREATE TABLE FOTO_CLASSIF(
id_foto mediumint,
id_classif smallint,
PRIMARY KEY (id_foto, id_classif)
) TYPE=InnoDB;

ALTER TABLE FOTO_CLASSIF ADD FOREIGN KEY(id_foto) REFERENCES FOTO(id_foto) ON DELETE CASCADE;
ALTER TABLE FOTO_CLASSIF ADD FOREIGN KEY(id_classif) REFERENCES CLASSIF(id_classif) ON DELETE CASCADE;

CREATE TABLE FOTO_KEYWORD(
id_foto mediumint,
id_keyword smallint,
PRIMARY KEY (id_foto, id_keyword)
) TYPE=InnoDB;

ALTER TABLE FOTO_KEYWORD ADD FOREIGN KEY(id_foto) REFERENCES FOTO(id_foto) ON DELETE CASCADE;
ALTER TABLE FOTO_KEYWORD ADD FOREIGN KEY(id_keyword) REFERENCES KEYWORD(id_keyword) ON DELETE CASCADE;

CREATE TABLE SLIDESHOW(
id_slideshow smallint primary key,
titol varchar(100) not null,
musica varchar(50)
) TYPE=InnoDB;

CREATE TABLE SLIDESHOW_DETALL(
id_slideshow smallint not null,
id_foto mediumint not null,
ordre smallint not null,
temps smallint COMMENT 'número de segons',
efecte varchar(50) COMMENT 'efecte de la transició'
) TYPE=InnoDB;

ALTER TABLE SLIDESHOW_DETALL ADD FOREIGN KEY(id_slideshow) REFERENCES SLIDESHOW(id_slideshow) ON DELETE CASCADE;
ALTER TABLE SLIDESHOW_DETALL ADD FOREIGN KEY(id_foto) REFERENCES FOTO(id_foto) ON DELETE CASCADE;

CREATE TABLE CERCA(
nom_cerca varchar(50) PRIMARY KEY,
titol varchar(50),
id_foto varchar(6),
fitxer varchar(50),
classif varchar(50),
esdev varchar(50),
keyword varchar(50),
modedia varchar(1),
dia varchar(50),
tamany varchar(8),
chk_midaresolucio bool,
cd varchar(50),
simple varchar(255),
chk_map_gps bool,
chk_fitxeraudio bool
) TYPE=InnoDB;

CREATE TABLE FOTO_GPS(
id_foto mediumint PRIMARY KEY,
X decimal,
Y decimal,
zoom smallint
) TYPE=InnoDB;

CREATE VIEW C1 AS 
SELECT FOTO.id_foto, nom_fitxer, titol, data, keyword, id_esdev
FROM (FOTO LEFT JOIN FOTO_KEYWORD ON FOTO.id_foto=FOTO_KEYWORD.id_foto) LEFT JOIN KEYWORD ON KEYWORD.id_keyword=FOTO_KEYWORD.id_keyword;

CREATE VIEW C2 AS 
SELECT C1.id_foto AS id_foto, C1.nom_fitxer, C1.titol, C1.data, C1.id_esdev AS id_esdev, C1.keyword, CLASSIF.classif
FROM C1 LEFT JOIN (FOTO_CLASSIF LEFT JOIN CLASSIF ON FOTO_CLASSIF.id_classif=CLASSIF.id_classif) ON C1.id_foto=FOTO_CLASSIF.id_foto;

CREATE VIEW C3 AS 
SELECT C2.id_foto, nom_fitxer, titol, data, keyword, classif, ESD2.esdev AS ESD1, ESD1.esdev AS ESD2
FROM C2 LEFT JOIN (ESDEV AS ESD1 LEFT JOIN ESDEV AS ESD2 ON ESD1.id_esdev_pare=ESD2.id_esdev) ON C2.id_esdev=ESD1.id_esdev;

Per veure com funcionen les vistes, per exemple

mysql> select * from C3 where id_foto=1104;
+---------+-------------------+-------------+---------------------+---------+----------+-------------+----------------+
| id_foto | nom_fitxer        | titol       | data                | keyword | classif  | ESD1        | ESD2           |
+---------+-------------------+-------------+---------------------+---------+----------+-------------+----------------+
|    1104 | 031225_143950.JPG | Mare i Eric | 2003-12-25 00:00:00 | Eric    | família | Nadal'03-04 | dinar de Nadal |
|    1104 | 031225_143950.JPG | Mare i Eric | 2003-12-25 00:00:00 | mare    | família | Nadal'03-04 | dinar de Nadal |
+---------+-------------------+-------------+---------------------+---------+----------+-------------+----------------+

A partir d'aquí ja podem fer una cerca simple: (substituir hh pel que correspongui)

SELECT * FROM C3
WHERE titol like '%hh%' OR id_foto like '%hh%' OR nom_fitxer like '%hh%' OR data=STR_TO_DATE('hh','%d/%m/%Y') OR keyword like '%hh%'
OR classif like '%hh%' OR (ESD1 like '%hh%' or ESD2 like '%hh%') 
ORDER BY id_foto, classif, keyword;

Migració de Microsoft Access (.mdb) a mysql. Dades antigues

De mdb exporto a CSV (en aquest punt canvio cometes simples per cometes dobles). Des del full de càlcul del Openoffice, importo el CSV, i genero els INSERTs.

per executar un script i controlar més tard els errors que hi ha hagut:

$ mysql -h localhost -u root -p joanillofotos -f  < fotos2.sql  > error.log 2>&1  

Molta documentació diu que es fa amb:

$ mysql -h localhost -u root -p joanillofotos < fotos.sql > control.out

però a mi no em funciona (suposo que em falta l'opció -v), TBD

el tema de stdin, stdout i stderr està explicat a:

--force, -f Continue even if an SQL error occurs. Si no s'utilitza l'opció -f, s'aturaria a la primera errada. També es pot utilitzar l'opció -v (verbose).

Si vull redirigir la sortida d'errors, faré 2>. Si vull redirigir tant stderr com stdout faig 2>&1


Per comprovar que està feta tota la migració:

SELECT COUNT(*) FROM FOTO_GPS;
SELECT COUNT(*) FROM CERCA;
SELECT COUNT(*) FROM SLIDESHOW_DETALL;
SELECT COUNT(*) FROM SLIDESHOW;
SELECT COUNT(*) FROM FOTO_KEYWORD;
SELECT COUNT(*) FROM FOTO_CLASSIF;
SELECT COUNT(*) FROM FOTO;
SELECT COUNT(*) FROM KEYWORD;
SELECT COUNT(*) FROM ESDEV;
SELECT COUNT(*) FROM CLASSIF;

Un cop tinc la bd a mysql, faig una còpia de seguretat de les dades originals que tenia a Access:

$ mysqldump --add-drop-table -i -C -uroot -p**** -r copia_joanillofotos_041011.dmp -v joanillofotos

i el copiem ràpidament a un lloc segur:

$ scp copia_joanillofotos_041011.dmp joan@wikijoan.dyndns.org:/mnt/disc_windows   (o /mnt/disc_xarxa)

Protocol Pixtuff 3.0

  1. script. reanomenar les imatges al format yymmdd_hhmiss. El que importa és la última data de modificació, que coincideix amb la data que es va tirar la foto si encara no s'ha editat.
  2. script. Classificar les fotos a /yyyy/month. Per ex, 2011/01, 2011/02,...
  3. Editar les fotos amb Gimp. Rotar i eliminar les dolentes o sobrants.
  4. script. Crear les còpies de 400px (pics) i thumbnails (80). Hi ha alguna manera amb imagemagick de detectar les fotos amb format vertical? Ho dic perquè a l'hora de redimensionar s'ha de tenir en compte.
  5. script automàtic. Fer una còpia de seguretat al disc de xarxa.
  6. Ara ja es pot classificar
  7. script automàtic. fer una còpia del mysql

L'estructura de directoris serà: (aquesta estructura permet cercar ràpidament una foto sense fer consulta a la BD)

fotosjoanillo/
   originals/
      2010/
         01/
         02/
         .../

      2011/
         01/
         02/
         .../
      ...
   pics/
      2010/
         01/
         02/
         .../

      2011/
         01/
         02/
         .../
      ...
   thumbnails/
      2010/
         01/
         02/
         .../

      2011/
         01/
         02/
         .../
      ...

scripts

prova_reanomenar_fitxers.txt

Un cop descarregades les fotos el primer que s'ha de fer és reanomenar les imatges. Després les visualitzaré una a una i eliminaré les repetides o que no tinguin prou qualitat. Si cal les editaré (contrast,...) Més tard generaré els pics i thumbnails i les copiaré en els directoris definitius, i ja es podrà fer una còpia de seguretat de les fotos, encara que no s'hagin classificat.

S'ha de retocar. Bàsicament funciona. Copio a una altra carpeta els fitxers reanomenats. Què passa si el destí és la mateixa carpeta? Hauria d'entrar carpeta origen i destí com a arguments en la crida del script. Carpeta origen serà /home/joan/fotos_descarrega i carpeta destí sera /home/joan/fotos_renom.

#!/bin/bash

folder=/home/joan/fotos_descarrega/
folder2=/home/joan/fotos_renom/

for i in $(ls $folder*.JPG);
do 
   echo $i;
   date -r $i +%y%m%d_%H%M%S;
   echo ${i#*.};
   #basename=`basename "$i"`;
   basename=`date -r $i +%y%m%d_%H%M%S`;
   echo $basename;
   echo $basename.${i#*.};
   cp "$i" $folder2$basename.${i#*.};

   #do cp "$i" "${i/.JPG}".jpg;

done

Una altra possibilitat per reanomenar els fitxers és, no a partir de la data de modificació, sinó a partir de les dades EXIF que estan a dins del fitxer, i que són accessibles des de bash mitjançant exiv2:


$ man exiv2

NAME

       exiv2 - Image metadata manipulation tool



SYNOPSIS

       exiv2 [options] [action] file ...



DESCRIPTION

       exiv2  is a program to read and write Exif, IPTC and XMP image metadata

       and image comments. 


Per exemple,


$ exiv2 111001_090016.JPG 

Warning: Directory Pentax, entry 0x0004: Data area exceeds data buffer, ignoring it.

File name       : 111001_090016.JPG

File size       : 3338316 Bytes

MIME type       : image/jpeg

Image size      : 1920 x 2560

Camera make     : PENTAX Corporation 

Camera model    : PENTAX Optio S5i 

Image timestamp : 2004:01:01 21:12:04

Image number    : 

Exposure time   : 1/500 s

Aperture        : F4.3

Exposure bias   : +1/3 EV

Flash           : No, auto

Flash bias      : 

Focal length    : 5.8 mm (35 mm equivalent: 35.0 mm)

Subject distance: 

ISO speed       : 80

Exposure mode   : 

Metering mode   : Center weighted average

Macro mode      : 

Image quality   : 

Exif Resolution : 1920 x 2560

White balance   : Auto

Thumbnail       : image/jpeg, 6487 Bytes

Copyright       : 

Exif comment    : 

Una altra possibilitat per extreure les dades EXIF és utilitzar la llibreria libexif12.

reanomenar_fitxers.sh

#!/bin/bash

folder=/home/joan/fotos_per_revisar/prova_originals/
folder2=/home/joan/fotos_per_revisar/prova_renom/

for i in $(ls $folder*.JPG);
do 
   echo $i; #fitxer amb tota la ruta
   #date -r $i +%y%m%d_%H%M%S; #per ex, 110326_092332
   #echo ${i#*.}; 					#per ex, JPG
   #basename=`basename "$i"`;
   basename=`date -r $i +%y%m%d_%H%M%S`;
   #echo $basename;				#per ex, 110326_092332
   echo $basename.${i#*.};		#per ex, 110326_092332.JPG
   cp "$i" $folder2$basename.${i#*.};

done

reanomenar_fitxers_v2.sh

Pot passar quan es fan vàries fotos ràpidament que hi hagi dues o més fotos que entrin dins el mateix segon, i aleshores al fer la còpia amb l'anterior script es perdrien. Per tal de solucionar-ho el següent script afegeix un subindex i no es matxaquen les fotos. En aquest cas, si vull que totes les fotos tinguin l'esquena dma_hms, aleshores s'ha de reanomenar manualment les fotos que tenen subindex.

#!/bin/bash

folder=/home/joan/fotos_descarrega/
folder2=/home/joan/fotos_renom/
index=1;
for i in $(ls $folder*.JPG);
do 
	echo;
	echo $i;
	date -r $i +%y%m%d_%H%M%S;
	#echo ${i#*.};
	#basename=`basename "$i"`;
	basename=`date -r $i +%y%m%d_%H%M%S`;
	#echo $basename;

	if [ -e "$folder2$basename.${i#*.}" ]
	then
		echo "ja existeix, es renombra a:"
		echo $basename-$index.${i#*.};
		cp "$i" $folder2$basename-$index.${i#*.};
		index=`expr $index + 1`
	else
		echo $basename.${i#*.};
		cp "$i" $folder2$basename.${i#*.};
		index=1;
	fi
done

generar_pics.sh

I amb aquest script es creen les carpetes equivalents de pics/ i thumbnails/ (amb totes les carpetes d'anys i mesos), i es fiquen les miniatures de 400pix i 80pix, que es generen amb convert (Imagemagick). El fet d'utilitzar la comanda -resize 400x400 fa que el tractament de les imatges verticals sigui el correcte, doncs no genera una imatge quadrada sino que manté les proporcions fent que el costa més gran sigui de 400.

#!/bin/bash

folder=/home/joan/fotos_renom/

for i in $(ls $folder*.JPG);
do 
   echo $i;
   basename=`basename "$i"`;
   #echo $basename;
   year=${basename:0:2}
   month=${basename:2:2}

   carpeta_pic=/home/joan/fotosjoanillo/pics/$year/$month/;
   carpeta_th=/home/joan/fotosjoanillo/thumbnails/$year/$month/;

   if [ ! -d "$carpeta_pic" ]; then
       mkdir -p $carpeta_pic
   fi

   if [ ! -d "$carpeta_th" ]; then
       mkdir -p $carpeta_th
   fi

   NAME=`echo "$basename" | cut -d'.' -f1`
   EXTENSION=`echo "$basename" | cut -d'.' -f2`
   nou_fitxer_pic=${NAME}_pic.${EXTENSION}
   nou_fitxer_th=${NAME}_th.${EXTENSION}
   echo $nou_fitxer_pic
   echo $nou_fitxer_th

   convert "$i" -resize 400x400 $carpeta_pic$nou_fitxer_pic;
   convert "$i" -resize 80x80 $carpeta_th$nou_fitxer_th;

done

generar_pics_arthropoda.sh

Inclou la generació de fitxers a 800 px (que és el màxim format que accepta Flickr), i genera una marca d'aigua per a aquests fitxers de 800px.

#!/bin/bash

folder=/home/joan/arthropoda/fotosarthropoda/fotos_prov2/

for i in $(ls $folder*.JPG);
do 
   echo $i;
   basename=`basename "$i"`;
   #echo $basename;
   year=${basename:0:2}
   month=${basename:2:2}

   carpeta_originals=/home/joan/arthropoda/fotosarthropoda/originals/$year/$month/;
   carpeta_pics400=/home/joan/arthropoda/fotosarthropoda/pics400/$year/$month/;
   carpeta_pics800=/home/joan/arthropoda/fotosarthropoda/pics800/$year/$month/;
   carpeta_th=/home/joan/arthropoda/fotosarthropoda/thumbnails/$year/$month/;

   if [ ! -d "$carpeta_originals" ]; then
       mkdir -p $carpeta_originals
   fi

   if [ ! -d "$carpeta_pics400" ]; then
       mkdir -p $carpeta_pics400
   fi

   if [ ! -d "$carpeta_pics800" ]; then
       mkdir -p $carpeta_pics800
   fi

   if [ ! -d "$carpeta_th" ]; then
       mkdir -p $carpeta_th
   fi

   cp "$i" $carpeta_originals$basename;

   NAME=`echo "$basename" | cut -d'.' -f1`
   EXTENSION=`echo "$basename" | cut -d'.' -f2`
   nou_fitxer_pic=${NAME}_pic.${EXTENSION}
   nou_fitxer_th=${NAME}_th.${EXTENSION}
   echo $nou_fitxer_pic
   echo $nou_fitxer_th

   convert "$i" -resize 400x400 $carpeta_pics400$nou_fitxer_pic;
   convert "$i" -resize 800x800 -pointsize 20 -gravity southeast -annotate 0 "Joan Quintana - joanillo (CC Lic)" $carpeta_pics800$nou_fitxer_pic;
   convert "$i" -resize 80x80 $carpeta_th$nou_fitxer_th;

done

recollocar.sh

Es tracta de ficar les fotos que estan a fotos_renom/ dins la carpeta corresponent que penja de fotosjoanillo/originals, és a dir, dins l'any i el mes correctes.

#!/bin/bash

folder=/home/joan/fotos_renom/

for i in $(ls $folder*.JPG);
do 
   echo $i;
   basename=`basename "$i"`;
   echo $basename;
   year=${basename:0:2}
   month=${basename:2:2}
   echo $year;
   echo $month;

   carpeta=/home/joan/fotosjoanillo/originals/$year/$month/;
   echo $carpeta

   if [ ! -d "$carpeta" ]; then
       mkdir -p $carpeta
   fi

   cp "$i" $carpeta$basename;

done

scripts. Utilitats

canviar l'any de les fotos en bloc

canvia_any_foto.sh:

#!/bin/bash
# canvia 100313 per 110313. Basat en sed

folder=/home/joan/fotos_per_revisar/fotos_bateig_amy_marcb/
folder2=/home/joan/fotos_per_revisar/fotos_bateig_amy_marcc/

for i in $(ls $folder*.JPG);
do 
   echo $i; #fitxer amb tota la ruta
   basename=`basename "$i"`;
	noufitxer=`echo $basename | sed -e "s/100313/110313/"`  
	echo $noufitxer;
   cp "$i" $folder2$noufitxer;

done

arreglar espais en blanc d'un fitxer (en bloc)

arreglar_espais_en_blanc.sh:

#!/bin/bash
# substitueix espais en blanc per _. Basat en sed
# hi ha bastant d'embolic amb els fitxers que contenen espais en blanc:
# http://stackoverflow.com/questions/301039/how-can-i-escape-white-space-in-a-bash-loop-list

folder=/home/joan/fotos_per_revisar/fotos_marta_02_2011/
folder2=/home/joan/fotos_per_revisar/fotos_marta_02_2011c/

entries=( $folder* )
for i in "${entries[@]}"; do
	#echo "$i"
	basename=`basename "$i"`;
	echo $basename;
	noufitxer=`echo $basename | sed -e "s/ /_/"`  
	noufitxer2=`echo $noufitxer | sed -e "s/ /_/"`  
	noufitxer3=`echo $noufitxer2 | sed -e "s/ /_/"`  
	echo $noufitxer3;
	mv "$i" $folder2$noufitxer3; #mv conserva el timestamp de modificació de l'arxiu. cp no ho fa
	#cp "$i" $folder2$noufitxer3;
done

marca d'aigua

convert 110501_120000.JPG -pointsize 100 -gravity southeast -annotate 0 "Joan Quintana - joanillo (CC Lic)" 110501_120000b.JPG

Galeria

Per construir una galeria de fotos amb un disseny modern una possibilitat és:

que com s'explica en una pregunta del forum es pot connectar a una base de dades: Per ex,

Bàsicament ja tinc la solució. Partint del fitxer demo.htm, faig el fitxer demo_bd.php:

<?php
$conn = mysql_connect("localhost", "root", "neodimi10") or
    die("Could not connect: " . mysql_error());
mysql_select_db("joanillofotos");

$query="SELECT id_foto,nom_fitxer,titol FROM FOTO";
$result = mysql_query($query) or die(mysql_error());
$img=mysql_fetch_full_result_array($result);

function mysql_fetch_full_result_array($result)
{
    $table_result=array();
    $r=0;
    while($row = mysql_fetch_assoc($result)){
        $arr_row=array();
        $c=0;
        while ($c < mysql_num_fields($result)) {       
            $col = mysql_fetch_field($result, $c);   
            $arr_row[$col -> name] = $row[$col -> name];           
            $c++;
        }   
        $table_result[$r] = $arr_row;
        $r++;
    }   
    return $table_result;
}

echo $images[2]['id_foto'];
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>JonDesign's SmoothGallery demo</title>
		<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
		<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
		<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
		<script src="scripts/jd.gallery.js" type="text/javascript"></script>
	</head>
	<body>

		<h1>
			<a href="http://english.jondesign.net/">
				<span class="company">JonDesign's</span>
			</a>SmoothGallery 2.1beta1 <sup>demo</sup></h1>
		<script type="text/javascript">
			function startGallery() {
				var myGallery = new gallery($('myGallery'), {
					timed: true
				});
			}
			window.addEvent('domready',startGallery);
		</script>
		<div class="content">
			<div id="myGallery">
				<div class="imageElement">
					<h3>Item 1 Title</h3>
					<p>Item 1 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/1.jpg" class="full" />
					<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
				</div>
<!--
				<div class="imageElement">
					<h3>Item 2 Title</h3>
					<p>Item 2 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/2.jpg" class="full" />
					<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 3 Title</h3>
					<p>Item 3 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/3.jpg" class="full" />
					<img src="images/brugges2006/3-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 4 Title</h3>
					<p>Item 4 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/4.jpg" class="full" />
					<img src="images/brugges2006/4-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 5 Title</h3>
					<p>Item 5 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/5.jpg" class="full" />
					<img src="images/brugges2006/5-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 6 Title</h3>
					<p>Item 6 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/6.jpg" class="full" />
					<img src="images/brugges2006/6-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 7 Title</h3>
					<p>Item 7 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/7.jpg" class="full" />
					<img src="images/brugges2006/7-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 8 Title</h3>
					<p>Item 8 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/8.jpg" class="full" />
					<img src="images/brugges2006/8-mini.jpg" class="thumbnail" />
				</div>
-->
				<?php generateImageHTML($img); ?>
			</div>
		</div>
	</body>
</html>

<?php
mysql_close($conn);
?>


<?php
function generateImageHTML($images)
{
   $imageArray = $images;
   

   foreach ($imageArray as $imageFile)
   {
      //$ImagePath = $ImageDir."/".$imageFile;
      $ImagePath = "aqua/".$imageFile['nom_fitxer'];
      $ThumbImagePath = "aqua/thumbs/thumb_".$imageFile['nom_fitxer'];
	  $ImageTitle = $imageFile['titol']; 
     
	echo"
      <div class='imageElement'>
         <h3>$ImageTitle</h3>
         <p>$Desc</p>
         <a href='$ImagePath' title='open image' class='open'></a>
         <img src='$ImagePath' class='full' />
         <img src='$ThumbImagePath' class='thumbnail' />
      </div>
      ";
   }

}
?>

Explicació de les fulles d'estil de la galeria

fitxer layout.css

body {
	color: #ccc;
	font-family: "Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
	margin: 0 auto;
	padding: 0;
	font-size: 1.2em;

el títol i la descripció vénen definits per aquests valors globals. Posa 0.6em però és millor 1.2em

fitxer jd.gallery.css

#myGallery, #myGallerySet, #flickrGallery
{
	width: 460px;
	height: 345px;
	z-index:5;
	border: 1px solid #000;
}

el width i el height fan referència al contenidor de la foto. Per tant, tindrà el mateix tamany que les meves fotos intermitges

.jdGallery .slideInfoZone -> és on hi ha la info del títol i descripció. Aquí és defineix l'altura de la caixa, etc

  1. myGallerySet -> fa referència al contenidor de les col.leccions de fotos. Es pot veure a demogroup.html. Si tinc moltes col.leccions, lo lògic és fer-ho més gran.

Carousel fa referència a les miniatures que apareixen a dalt. Per modificar l'altura del Carousel, he de tocar al mateix temps l'altura de .jdGallery div.carouselContainer i de .jdGallery .carousel per tal que estiguin d'acord.

A més, a dins del Carousel hi ha el contenidor de les miniatures, que puc modificar canviant el height de:

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper

El tamany dels thumbnails no està definit enlloc, doncs senzillament tots els thumbnails tenen el mateix tamany. Aquí dins puc canviar el border del thumbnail i d'altres coses:

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail

El tamany de la lletra del carousel es canvia a:

.jdGallery .carousel .label, .jdExtCarousel .label

maquetació de la pàgina web fotos.joanillo.org

Parteixo del disseny de http://smoothgallery.jondesign.net/

Per al disseny només ens cal layout.css. Els altres css i js són per a la funcionalitat de les galeries. Com es mostra a http://smoothgallery.jondesign.net/showcase/gallery/, els menús desplegables han d'anar per sobre de les galeries.

Jo el menú que he de dissenyar és:

(enllaços al bloc i a la wiki)

Programa Pixtuff_3.0.c

Amb llenguatge C tinc la llibreria The libexif C EXIF library: http://libexif.sourceforge.net/


Això és interessant perquè donada una carpeta amb imatges noves, pot ser interessant generar el fitxer amb tots els inserts per a les fotos, i després, ja manualment, fer els updates dels títols, les descripcions, classificació,... El que es guanya és que les dades EXIF, tamany, data de creació, localització, tot això ja ho tinc posat de forma automàtica i la foto ja queda indexada a la BD de forma automàtica.


A Pixtuff 3.0 desapareix el front-end d'escriptori, i la capa de visualització serà purament web. Ara bé, necessito una eina eficient per classificar de forma ràpida les fotos. Això ho aconseguiré amb un programa C que funcioni per línia de comandes, i que generarà un script amb totes les instruccions SQL que s'hauran d'executar. S'ha de cercar la màxima funcionalitat i rapidesa.


Aquest programa també ha d'incorporar la llibreria per accedir a mysql, doncs per a les fotos necessito associar classificació, esdeveniments i paraules clau.

Així d'entrada, el que se m'acut és: tinc dues finestres obertes i que no es solapen. La primera amb les fotos en mode presentació; la segona la consola on s'exeucta l'aplicació. En la segona es mostra el nom del fitxer, i de forma interactiva em demana el títol, descripció, classif, esdev i keywords. Es va generar un fitxer sql amb totes les comandes que s'executaran a posteriori. amb unes quantes tecles puc aconseguir ajudes per pantalla. (llista de paraules clau, classif, esdev,...).


creat per Joan Quintana Compte, octubre 2011

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
IES Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines