Announcement

  •  » Engine
  •  » Filter on dimensions and width/height ratio

#1 2012-11-02 12:09:59

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Filter on dimensions and width/height ratio

Hi,

I have just tested [Bugtracker] ticket 2718 and I admit I find it very good! (especially the ratio "quick links" which automatically fills the min/max ratio).

http://piwigo.org/forum/showimage.php?pid=136692&filename=piwigo-2.5-batch-manager-filter-on-dimensions.png

On the UX side, I think we can deliver the feature "as is" for 2.5 but I believe a slider based interface might be more efficient.

http://piwigo.org/forum/showimage.php?pid=136692&filename=piwigo-2.5-batch-manager-filter-on-dimensions-sliders.png

What do you think?

Offline

 

#2 2012-11-02 12:15:15

mistic100
Former Piwigo Team
Lyon (FR)
2008-09-27
3277

Re: Filter on dimensions and width/height ratio

that's visually much better :-)

does this involve there will be three filters (Widh, Height, Ratio) instead of two (Dimensions, Ratio) ?

or the two sliders can be in one filter... i'll try

Offline

 

#3 2012-11-02 12:19:53

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: Filter on dimensions and width/height ratio

mistic100 wrote:

that's visually much better :-)

Visually I agree, but also a better user experience as well. Of course, we can prefill the slider with the data of the photos. For example, if widths in piwigo_images.width are between 645 and 3888 pixels, that will automatically be our boundaries.

mistic100 wrote:

does this involve there will be three filters (Widh, Height, Ratio) instead of two (Dimensions, Ratio) ?

Actually I would say : only one filter "Dimensions and ratio" which displays 3 sliders.

Offline

 

#4 2012-11-02 12:21:30

Zaphod
Former Piwigo Team
2006-11-13
441

Re: Filter on dimensions and width/height ratio

That looks just great.

Offline

 

#5 2012-11-02 13:20:56

flop25
Piwigo Team
2006-07-06
7037

Re: Filter on dimensions and width/height ratio

Wow awesome guys!


To get a better help : Politeness like Hello-A link-Your past actions precisely described
Check my extensions : more than 30 available
who I am and what I do : http://fr.gravatar.com/flop25
My gallery : an illustration of how to integrate Piwigo in your website

Offline

 

#6 2012-11-02 14:42:21

rvelices
Former Piwigo Team
2005-12-29
1960

Re: Filter on dimensions and width/height ratio

cool, already have a slider in jquery ui : http://jqueryui.com/slider/

Offline

 

#7 2012-11-02 14:45:15

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: Filter on dimensions and width/height ratio

rvelices wrote:

cool, already have a slider in jquery ui : http://jqueryui.com/slider/

Yes, this is the one I have used on another project recently (and from which I made the mockup)

Offline

 

#8 2012-11-10 21:10:30

mistic100
Former Piwigo Team
Lyon (FR)
2008-09-27
3277

Re: Filter on dimensions and width/height ratio

Offline

 

#9 2012-11-10 21:56:04

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: Filter on dimensions and width/height ratio

Well done mistic100. I have to improve the CSS to have something more like my screenshot :-) (I'll do it)

Questions/remarks:

1) in my gallery, I have no panoramic ratio, so when I click on "Panoramas", the 2 sliders are on 1.64 (and I have no result) which is less than what was defined as panoramic previously (ie 2+). Shouldn't we deactivate the "panoramas" link if we know there are no such values?

2) Why do I have no result on ratio 1.64? After a quick read on the code, I thought it was a "real" value, so I wonder why it matches no photo

3) the bounds are defined by the values existing in the database, but why aren't the intermediate values? On my gallery, I have "Width : between 2592 and 3888 pixels", why can I select width 2593, 2594... while the only values in my database are 2592 and 3888? (all photos are coming from the same camera) On my other project, I have implemented the "only existing values" in the slider and I think it's more relevant, because any change in the slider truly affects the filtered result.

Offline

 

#10 2012-11-11 00:36:15

mistic100
Former Piwigo Team
Lyon (FR)
2008-09-27
3277

Re: Filter on dimensions and width/height ratio

I don't see real difference with your screenshot but okay :)

1) yes this can be done

2) 1.64 is a "ceil", the real max ratio is perhaps 1.63456546..... (as the min ratio is a "floor")

3) how did you implement the "only existing values" ? I don't see this option on the Slider documentation

edit: I found this http://stackoverflow.com/a/857671 but I think this is becoming too much complicated, and I don't know how efficient is "SELECT DISTINCT width" on a very large table

edit2: right now I have no idea about how to force the slider positions as well as the input values (the solution at stackoverflow only force the value of the input)

Offline

 

#11 2012-11-11 01:30:41

mistic100
Former Piwigo Team
Lyon (FR)
2008-09-27
3277

Re: Filter on dimensions and width/height ratio

I found this http://stackoverflow.com/a/967619
don't really know how it works but it works !

Offline

 

#12 2012-11-11 08:28:16

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: Filter on dimensions and width/height ratio

This is how I did:

Code:

  function set_amount(amount_selector, min, max, values) {
    var min_value = values[min];
    var max_value = values[max];

    var label = "";
    if (min != max) {
      label = "between " + min_value + " and " + max_value;
    }
    else {
      label = min_value;
    }

    jQuery(amount_selector).html(label);
  }

  var naissance_values = [-525,-495,-480,-445,-254,-185,-170,0,1165,1240,1345,1363,1420,1425,1431,1435,1455,1458,1465,1469,1474,1475,1492,1494,1495,1502,1517,1519,1528,1532,1533,1536,1541,1544,1547,1550,1558,1559,1561,1562,1564,1567,1568,1569,1570,1571,1572,1575,1576,1579,1580,1581,1583,1585,1586,1589,1590,1591,1592,1595,1596,1598,1600,1601,1602,1603,1604,1605,1606,1608,1609,1610,1611,1612,1613,1614,1616,1617,1618,1619,1620,1621,1622,1623,1625,1626,1627,1628,1630,1631,1634,1635,1638,1639,1640,1642,1644,1645,1647,1648,1650,1652,1653,1654,1655,1656,1657,1659,1661,1664,1668,1670,1672,1673,1674,1676,1680,1682,1683,1684,1685,1686,1688,1689,1692,1693,1694,1695,1697,1701,1702,1703,1705,1706,1707,1709,1710,1712,1713,1717,1719,1720,1721,1722,1723,1727,1728,1729,1732,1733,1734,1735,1737,1739,1740,1741,1742,1745,1746,1747,1748,1749,1750,1751,1752,1755,1756,1758,1759,1760,1761,1762,1763,1764,1766,1767,1769,1770,1771,1772,1773,1774,1775,1777,1778,1779,1780,1781,1783,1786,1787,1788,1790,1791,1792,1793,1794,1795,1796,1797,1798,1799,1800,1801,1802,1803,1804,1805,1806,1807,1808,1809,1810,1811,1812,1813,1814,1815,1816,1817,1818,1819,1820,1821,1822,1823,1824,1825,1826,1827,1828,1829,1830,1831,1832,1833,1834,1836,1837,1838,1839,1840,1841,1842,1844,1845,1846,1847,1848,1849,1850,1851,1852,1853,1854,1855,1856,1857,1858,1859,1860,1861,1862,1863,1864,1865,1866,1867,1868,1869,1870,1871,1872,1873,1874,1875,1876,1877,1878,1879,1880,1881,1882,1883,1884,1885,1886,1887,1888,1889,1890,1891,1892,1893,1894,1895,1896,1897,1898,1899,1900,1901,1902,1903,1904,1905,1906,1907,1908,1909,1910,1911,1912,1913,1914,1915,1916,1917,1918,1919,1920,1921,1922,1923,1924,1925,1926,1927,1928,1929,1930,1931,1932,1933,1934,1935,1936,1937,1938,1939,1940,1941,1942,1943,1944,1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1986,1994];

  jQuery( "#slider-naissance" ).slider({
    range: true,
    min: 0,
    max: naissance_values.length - 1 ,
    values: [ 0, naissance_values.length - 1 ],
    slide: function( event, ui ) {
      set_amount("#amount-naissance", ui.values[0], ui.values[1], naissance_values);
    },
    stop: function( event, ui ) {
      oTable.fnDraw();
    }
  });

  set_amount(
    "#amount-naissance",
    jQuery("#slider-naissance").slider("values", 0),
    jQuery("#slider-naissance").slider("values", 1),
    naissance_values
  );

Live example on http://mascarille.fr/index?/liste-auteurs click on "Rechercher" then on "Annee de naissance". I did not care about the scale on the slider (and I don't think it's necessary because you may lack of precision on small values if you have a few big values).

Here I have "many" possible values and there is no performance problem. This is not an image widths list and I think that in real life, a Piwigo gallery has much less distinct values.

A "select distinct width" will not take longer than a "select * from table where width between A and B". We have a numeric value, this is fast (faster than a string I think), I will make some benchmark if you want but I  think there won't be any performance problem.

Offline

 

#13 2012-11-19 17:33:42

plg
Piwigo Team
Nantes, France, Europe
2002-04-05
13791

Re: Filter on dimensions and width/height ratio

mistic100, I'm working on "only existing values"

Offline

 
  •  » Engine
  •  » Filter on dimensions and width/height ratio

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2024 · Contact