From 3de85a45f663ee7e06e5b64cb64fde5713e08781 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Wed, 31 Jul 2024 17:47:43 +0200 Subject: [PATCH 01/14] Utiliser 8 classes quantiles. refs #81 --- sql/migration.sql | 11 +++++++++++ .../fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/sql/migration.sql b/sql/migration.sql index a67e071..0df4eb2 100644 --- a/sql/migration.sql +++ b/sql/migration.sql @@ -208,6 +208,17 @@ END; $BODY$ language plpgsql; +-- +-- #81 : SEXTILES => QUANTILES +-- +CREATE OR REPLACE FUNCTION upgrade20240731() RETURNS boolean AS $BODY$ +BEGIN + UPDATE "indicator" SET "quantiletype" ='QUANTILES'; + RETURN true; +END; +$BODY$ +language plpgsql; + --- -- -- Keep this call at the end to apply migration functions. diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 9615a5c..ee49e9f 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -168,7 +168,7 @@ public final class CanvasTitle extends CanvasWidget { } final int nbOfIntervals = colorIntervals.size(); final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.7)); + final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.8)); final int cellHeight = 2 * LINE_HEIGHT; final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; final double cellBottom = cellTop + cellHeight; -- GitLab From e9196c207ba3771c14d0eac504a2067da5d44704 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Wed, 31 Jul 2024 17:58:46 +0200 Subject: [PATCH 02/14] Utiliser 8 classes quantiles. refs #81 --- .../main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index ee49e9f..fa10610 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -168,7 +168,7 @@ public final class CanvasTitle extends CanvasWidget { } final int nbOfIntervals = colorIntervals.size(); final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.8)); + final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.9)); final int cellHeight = 2 * LINE_HEIGHT; final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; final double cellBottom = cellTop + cellHeight; -- GitLab From 3ca9e2b5b5ba43e7623db9227eb091857dbe08ea Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Wed, 31 Jul 2024 17:47:43 +0200 Subject: [PATCH 03/14] Utiliser 8 classes quantiles. refs #81 --- sql/migration.sql | 11 +++++++++++ .../fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/sql/migration.sql b/sql/migration.sql index a67e071..0df4eb2 100644 --- a/sql/migration.sql +++ b/sql/migration.sql @@ -208,6 +208,17 @@ END; $BODY$ language plpgsql; +-- +-- #81 : SEXTILES => QUANTILES +-- +CREATE OR REPLACE FUNCTION upgrade20240731() RETURNS boolean AS $BODY$ +BEGIN + UPDATE "indicator" SET "quantiletype" ='QUANTILES'; + RETURN true; +END; +$BODY$ +language plpgsql; + --- -- -- Keep this call at the end to apply migration functions. diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index c51ad11..85e67b9 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -162,7 +162,7 @@ public final class CanvasTitle extends CanvasWidget { } final int nbOfIntervals = colorIntervals.size(); final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.7)); + final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.8)); final int cellHeight = 2 * LINE_HEIGHT; final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; final double cellBottom = cellTop + cellHeight; -- GitLab From 279c4b0aaceadf8e2cf232271d4af26fba61e5eb Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Wed, 31 Jul 2024 17:58:46 +0200 Subject: [PATCH 04/14] Utiliser 8 classes quantiles. refs #81 --- .../main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 85e67b9..794d104 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -162,7 +162,7 @@ public final class CanvasTitle extends CanvasWidget { } final int nbOfIntervals = colorIntervals.size(); final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.8)); + final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.9)); final int cellHeight = 2 * LINE_HEIGHT; final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; final double cellBottom = cellTop + cellHeight; -- GitLab From 13e448617886d4955ece85aa976c83a322972cfb Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 10:29:16 +0200 Subject: [PATCH 05/14] =?UTF-8?q?Adapter=20les=20tailles=20de=20police=20?= =?UTF-8?q?=C3=A0=20la=20densit=C3=A9=20de=20pixels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../www/client/ui/map/CanvasAttributions.java | 30 +++- .../www/client/ui/map/CanvasTitle.java | 149 +++++++++++++----- 2 files changed, 134 insertions(+), 45 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java index 6afb1a5..ea3540b 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java @@ -3,6 +3,8 @@ package fr.agrometinfo.www.client.ui.map; import java.util.LinkedHashSet; import java.util.Set; +import org.pepstock.charba.client.utils.Window; + import com.google.gwt.canvas.dom.client.Context2d; import com.google.gwt.canvas.dom.client.Context2d.TextAlign; import com.google.gwt.canvas.dom.client.TextMetrics; @@ -27,9 +29,9 @@ import ol.layer.Group; public final class CanvasAttributions extends CanvasWidget { /** - * Line height for the lines of title. + * Font size for title and scale (not adjusted to pixel density). */ - private static final int LINE_HEIGHT = 8; + private static final int BASE_FONT_SIZE = 8; /** * Margin around the box. @@ -65,6 +67,22 @@ public final class CanvasAttributions extends CanvasWidget { return attributions; } + /** + * @return Font for title and scale. + */ + private static String getFont() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + } + + /** + * @return Line height for the lines of title. + */ + private static int getLineHeight() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)); + } + /** * Constructor. * @@ -85,6 +103,8 @@ public final class CanvasAttributions extends CanvasWidget { DomGlobal.console.error("Canvas must not be null!"); return; } + final int lineHeight = getLineHeight(); + final Set<String> uniqueAttributions = new LinkedHashSet<>(); final Collection<Base> layers = getMap().getLayerGroup().getLayers(); for (final Base l : layers.getArray()) { @@ -109,15 +129,15 @@ public final class CanvasAttributions extends CanvasWidget { div.setInnerHTML(String.join(" − ", uniqueAttributions)); final String line = div.getInnerText().trim(); final Context2d ctx = canvas.getContext2d(); - ctx.setFont("8px " + FONT_FAMILY); + ctx.setFont(getFont()); final TextMetrics measure = ctx.measureText(line); final double width = measure.getWidth(); ctx.setFillStyle("rgba(255, 255, 255, .8)"); ctx.fillRect(// canvas.getWidth() - width - MARGIN - 2 * PADDING, // - canvas.getHeight() - LINE_HEIGHT - MARGIN - 2 * PADDING, // + canvas.getHeight() - lineHeight - MARGIN - 2 * PADDING, // width + 2 * PADDING, // - LINE_HEIGHT + 2 * PADDING); + lineHeight + 2 * PADDING); ctx.setFillStyle("#000000"); ctx.setTextAlign(TextAlign.LEFT); ctx.fillText(line, // diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 794d104..35c73b3 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -4,6 +4,8 @@ import java.util.ArrayList; import java.util.List; import java.util.StringJoiner; +import org.pepstock.charba.client.utils.Window; + import com.google.gwt.canvas.dom.client.Context2d; import com.google.gwt.canvas.dom.client.Context2d.TextAlign; import com.google.gwt.canvas.dom.client.TextMetrics; @@ -25,63 +27,94 @@ import ol.Map; */ public final class CanvasTitle extends CanvasWidget { + /** + * Font size for title and scale (not adjusted to pixel density). + */ + private static final int BASE_FONT_SIZE = 12; + + /** + * Size of colored border (not adjusted to pixel density). + */ + private static final int BASE_BORDER_SIZE = 1; + /** * Font color for title and scale. */ private static final String FONT_COLOR = "#000000"; /** - * Line height for the lines of title. + * Width / height computed from SVG file. */ - private static final int LINE_HEIGHT = 12; + private static final double LOGO_SIZE_RATIO = 2.1087; /** - * Size of colored border. + * Width of logo (not adjusted to pixel density). */ - private static final int BORDER_SIZE = 1; + private static final int BASE_LOGO_WIDTH = 150; /** - * Width of logo. + * To format scale bounds. */ - private static final int LOGO_WIDTH = 150; + private static final NumberFormat NUMBER_FORMAT = NumberFormat.getFormat("0.#"); /** - * Width / height computed from SVG file. + * @return Size of colored border (not adjusted to pixel density). */ - private static final double LOGO_SIZE_RATIO = 2.1087; + private static int getBorderSize() { + final double pixelRatio = Window.getDevicePixelRatio(); + return (int) (BASE_BORDER_SIZE * pixelRatio); + } /** - * Total width of title box, PADDING included. + * @return Font for title and scale. */ - private static final int MAX_WIDTH = 370; + private static String getFont() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + } /** - * To format scale bounds. + * @return Line height for the lines of title. */ - private static final NumberFormat NUMBER_FORMAT = NumberFormat.getFormat("0.#"); + private static int getLineHeight() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)); + } /** - * Keep space around logo, scale and text. + * @return Height of logo. */ - private static final int PADDING = 5; + private static int getLogoHeight() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO)); + } /** - * @return total width of title box, PADDING included, limited to screen width. + * @return Width of logo. */ - private static int getWidth() { - return Math.min(UiUtils.getScreenWidth(), MAX_WIDTH); + private static int getLogoWidth() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_LOGO_WIDTH * pixelRatio)); } /** - * Lines for the title. + * @return Keep space around logo, scale and text. */ - private List<String> title; + private static int getPadding() { + final double pixelRatio = Window.getDevicePixelRatio(); + return (int) (BASE_FONT_SIZE * pixelRatio / 2); + } /** * Color intervals used to set background color of cells. */ private List<ColorInterval> colorIntervals; + /** + * Lines for the title. + */ + private List<String> title; + /** * Constructor. * @@ -96,9 +129,13 @@ public final class CanvasTitle extends CanvasWidget { */ @Override protected void draw() { - final int availableWidth = getWidth() - LOGO_WIDTH - BORDER_SIZE * 2; + final int logoWidth = getLogoWidth(); + final int padding = getPadding(); + final int width = getWidth(); + + final int availableWidth = width - logoWidth - getBorderSize() * 2; final Context2d ctx = getCanvas().getContext2d(); - ctx.setFont("10px " + FONT_FAMILY); + ctx.setFont(getFont()); final List<String> lines = new ArrayList<>(); for (final String line : title) { if (line == null) { @@ -113,9 +150,9 @@ public final class CanvasTitle extends CanvasWidget { ctx.setFillStyle(FONT_COLOR); ctx.setTextAlign(TextAlign.CENTER); int i = 0; - final int x = PADDING + LOGO_WIDTH + (getWidth() - LOGO_WIDTH) / 2; + final int x = padding + logoWidth + (width - logoWidth) / 2; for (final String line : lines) { - ctx.fillText(line, x, (double) PADDING + LINE_HEIGHT + LINE_HEIGHT * i); + ctx.fillText(line, x, (double) padding + getLineHeight() * (i + 1)); i++; } this.drawScale(); @@ -127,28 +164,35 @@ public final class CanvasTitle extends CanvasWidget { * @param nbOfLines number of lines to set the box height */ private void drawBorder(final int nbOfLines) { + final int borderSize = getBorderSize(); + final int logoHeight = getLogoHeight(); + final int padding = getPadding(); + final int width = getWidth(); + final Context2d ctx = getCanvas().getContext2d(); - final int totalScaleHeight = 3 * LINE_HEIGHT; + final int totalScaleHeight = 3 * getLineHeight(); final double height = Math.max(// - LINE_HEIGHT * nbOfLines + 2d * BORDER_SIZE, // - BORDER_SIZE + PADDING + LOGO_WIDTH / LOGO_SIZE_RATIO + PADDING + totalScaleHeight + BORDER_SIZE); + getLineHeight() * nbOfLines + 2d * borderSize, // + borderSize + padding + logoHeight + padding + totalScaleHeight + borderSize); ctx.setFillStyle("#818181"); - ctx.fillRect(0, 0, getWidth(), height + 2 * PADDING); + ctx.fillRect(0, 0, width, height + 2 * padding); ctx.setFillStyle("#ffffff"); - ctx.fillRect(0, 0, (double) getWidth() - BORDER_SIZE, height + 2 * PADDING - BORDER_SIZE); + ctx.fillRect(0, 0, (double) width - borderSize, height + 2 * padding - borderSize); } /** * Draw the logo. */ private void drawLogo() { + final int logoWidth = getLogoWidth(); + final int logoHeight = getLogoHeight(); final Context2d ctx = getCanvas().getContext2d(); final ImageElement logoImg = ApplicationUtils.getApplicationLogo(); ctx.drawImage(logoImg, // - 0d + BORDER_SIZE + PADDING, // - 0d + BORDER_SIZE + PADDING, // - LOGO_WIDTH, // - LOGO_WIDTH / LOGO_SIZE_RATIO // + 0d + getBorderSize() + getPadding(), // + 0d + getBorderSize() + getPadding(), // + logoWidth, // + logoHeight // ); } @@ -160,16 +204,21 @@ public final class CanvasTitle extends CanvasWidget { DomGlobal.console.error("colorIntervals must not be null!"); return; } + final int borderSize = getBorderSize(); + final int lineHeight = getLineHeight(); + final int logoHeight = getLogoHeight(); + final int padding = getPadding(); + + final Context2d ctx = getCanvas().getContext2d(); + ctx.setFont(getFont()); + final double scaleLabelWidth = ctx.measureText("0000.00").getWidth(); final int nbOfIntervals = colorIntervals.size(); - final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.9)); - final int cellHeight = 2 * LINE_HEIGHT; - final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; + final int cellWidth = (int) ((getWidth() - scaleLabelWidth) / nbOfIntervals); + final int cellHeight = 2 * lineHeight; + final double cellTop = borderSize + padding + logoHeight + padding; final double cellBottom = cellTop + cellHeight; - final double labelTop = cellBottom + LINE_HEIGHT; - final Context2d ctx = getCanvas().getContext2d(); - ctx.setFont("11px " + FONT_FAMILY); - double x = PADDING; + final double labelTop = cellBottom + lineHeight; + double x = padding; for (final ColorInterval value : colorIntervals) { final String line = NUMBER_FORMAT.format(value.getMin()); ctx.setFillStyle("#" + value.getColor()); @@ -188,6 +237,26 @@ public final class CanvasTitle extends CanvasWidget { } } + /** + * @return total width of title box, paddings and borders included, adapted to indicator description. + */ + private int getMaxWidth() { + final int logoWidth = getLogoWidth(); + final Context2d ctx = getCanvas().getContext2d(); + ctx.setFont(getFont()); + final String largestDescription = "Nombre de jours chauds (Tmax > 35°C) (j)"; + final int largestDescriptionWidth = (int) ctx.measureText(largestDescription).getWidth(); + return logoWidth + 2 * getPadding() * 2 + getBorderSize() * 2 + largestDescriptionWidth; + } + + /** + * @return total width of title box, PADDING included, limited to screen width. + */ + private int getWidth() { + final double pixelRatio = Window.getDevicePixelRatio(); + return Math.min((int) (UiUtils.getScreenWidth() * pixelRatio), getMaxWidth()); + } + /** * @param intervals Color intervals used to set background color of cells. * @param lines the title splitted in lines -- GitLab From 71040eaf79beea58b40e698b0e411c3527703fb3 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 10:57:01 +0200 Subject: [PATCH 06/14] PMD --- .../agrometinfo/www/client/ui/map/CanvasAttributions.java | 2 +- .../java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java index ea3540b..5a1f4e7 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java @@ -80,7 +80,7 @@ public final class CanvasAttributions extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)); + return (int) (BASE_FONT_SIZE * pixelRatio); } /** diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 35c73b3..a8f6197 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -78,7 +78,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)); + return (int) (BASE_FONT_SIZE * pixelRatio); } /** @@ -86,7 +86,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLogoHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO)); + return (int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO); } /** @@ -94,7 +94,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLogoWidth() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_LOGO_WIDTH * pixelRatio)); + return (int) (BASE_LOGO_WIDTH * pixelRatio); } /** -- GitLab From 6b50013b7d79b34eb0bea20569b26460ccda03de Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 11:58:25 +0200 Subject: [PATCH 07/14] =?UTF-8?q?Adapter=20la=20taille=20des=20cr=C3=A9dit?= =?UTF-8?q?s=20=C3=A0=20la=20largeur=20de=20la=20carte.=20fixes=20#70?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../www/client/ui/map/CanvasAttributions.java | 107 ++++++++++++++---- .../www/client/ui/map/CanvasTitle.java | 38 +++++-- .../agrometinfo/www/client/util/UiUtils.java | 7 ++ 3 files changed, 117 insertions(+), 35 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java index 5a1f4e7..e7f94b2 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java @@ -1,6 +1,8 @@ package fr.agrometinfo.www.client.ui.map; +import java.util.ArrayList; import java.util.LinkedHashSet; +import java.util.List; import java.util.Set; import org.pepstock.charba.client.utils.Window; @@ -14,6 +16,7 @@ import com.google.gwt.dom.client.DivElement; import com.google.gwt.dom.client.Document; import elemental2.dom.DomGlobal; +import fr.agrometinfo.www.client.util.UiUtils; import ol.Collection; import ol.Map; import ol.layer.Base; @@ -27,11 +30,22 @@ import ol.layer.Group; * @author Olivier Maury */ public final class CanvasAttributions extends CanvasWidget { + /** + * Attribution separator. + */ + private static final String SEP = " − "; + + /** + * Font size for title and scale for small devices (not adjusted to pixel + * density). + */ + private static final int BASE_FONT_SIZE_SMALL = 6; /** - * Font size for title and scale (not adjusted to pixel density). + * Font size for title and scale for normal devices (not adjusted to pixel + * density). */ - private static final int BASE_FONT_SIZE = 8; + private static final int BASE_FONT_SIZE_NORMAL = 8; /** * Margin around the box. @@ -67,12 +81,23 @@ public final class CanvasAttributions extends CanvasWidget { return attributions; } + /** + * @return Font size for title and scale according to devices (not adjusted to + * pixel density). + */ + private static int getBaseFontSize() { + if (UiUtils.isSmallScreen()) { + return BASE_FONT_SIZE_SMALL; + } + return BASE_FONT_SIZE_NORMAL; + } + /** * @return Font for title and scale. */ private static String getFont() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + return ((int) (getBaseFontSize() * pixelRatio)) + "px " + FONT_FAMILY; } /** @@ -80,7 +105,7 @@ public final class CanvasAttributions extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_FONT_SIZE * pixelRatio); + return (int) (getBaseFontSize() * pixelRatio); } /** @@ -105,19 +130,70 @@ public final class CanvasAttributions extends CanvasWidget { } final int lineHeight = getLineHeight(); + final Set<String> uniqueAttributions = getAttributions(); + + final Context2d ctx = canvas.getContext2d(); + ctx.setFont(getFont()); + final int availableWidth = canvas.getWidth() - 2 * PADDING; + + double width = 0; + final List<String> lines = new ArrayList<>(); + lines.add(""); + for (final String attribution : uniqueAttributions) { + final String line = lines.get(lines.size() - 1).concat(attribution); + final TextMetrics measure = ctx.measureText(line); + final double lineWidth = measure.getWidth(); + if (lineWidth > availableWidth) { + lines.add(attribution.concat(SEP)); + } else { + lines.set(lines.size() - 1, line.concat(SEP)); + if (lineWidth > width) { + width = lineWidth; + } + } + } + + final int nbOfLines = lines.size(); + ctx.setFillStyle("rgba(255, 255, 255, .8)"); + ctx.fillRect(// + canvas.getWidth() - width - MARGIN - 2 * PADDING, // + canvas.getHeight() - nbOfLines * lineHeight - MARGIN - 2d * PADDING, // + width + 2 * PADDING, // + nbOfLines * lineHeight + 2d * PADDING); + ctx.setFillStyle("#000000"); + ctx.setTextAlign(TextAlign.LEFT); + double i = 1; + for (final String line : lines) { + final String str; + if (line.endsWith(SEP)) { + str = line.substring(0, line.length() - SEP.length()); + } else { + str = line; + } + ctx.fillText(str, // + canvas.getWidth() - width - MARGIN - PADDING, // + canvas.getHeight() - MARGIN - PADDING - (nbOfLines - i) * lineHeight); + i++; + } + } + + private Set<String> getAttributions() { final Set<String> uniqueAttributions = new LinkedHashSet<>(); + final DivElement div = Document.get().createDivElement(); final Collection<Base> layers = getMap().getLayerGroup().getLayers(); for (final Base l : layers.getArray()) { String attributions = getAttributions(l); if (attributions != null) { - uniqueAttributions.add(attributions); + div.setInnerHTML(attributions); + uniqueAttributions.add(div.getInnerText().trim()); } else if (l instanceof Group) { final Group group = (Group) l; for (final Base layer : group.getLayers().getArray()) { if (layer.getVisible()) { attributions = getAttributions(layer); if (attributions != null) { - uniqueAttributions.add(attributions); + div.setInnerHTML(attributions); + uniqueAttributions.add(div.getInnerText().trim()); } } } @@ -125,23 +201,6 @@ public final class CanvasAttributions extends CanvasWidget { GWT.log("CanvasAttributions.draw() " + l.getClass().getCanonicalName()); } } - final DivElement div = Document.get().createDivElement(); - div.setInnerHTML(String.join(" − ", uniqueAttributions)); - final String line = div.getInnerText().trim(); - final Context2d ctx = canvas.getContext2d(); - ctx.setFont(getFont()); - final TextMetrics measure = ctx.measureText(line); - final double width = measure.getWidth(); - ctx.setFillStyle("rgba(255, 255, 255, .8)"); - ctx.fillRect(// - canvas.getWidth() - width - MARGIN - 2 * PADDING, // - canvas.getHeight() - lineHeight - MARGIN - 2 * PADDING, // - width + 2 * PADDING, // - lineHeight + 2 * PADDING); - ctx.setFillStyle("#000000"); - ctx.setTextAlign(TextAlign.LEFT); - ctx.fillText(line, // - canvas.getWidth() - width - MARGIN - PADDING, // - canvas.getHeight() - MARGIN - PADDING); + return uniqueAttributions; } } diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index a8f6197..7e0e826 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -28,9 +28,16 @@ import ol.Map; public final class CanvasTitle extends CanvasWidget { /** - * Font size for title and scale (not adjusted to pixel density). + * Font size for title and scale for small devices (not adjusted to pixel + * density). */ - private static final int BASE_FONT_SIZE = 12; + private static final int BASE_FONT_SIZE_SMALL = 10; + + /** + * Font size for title and scale for normal devices (not adjusted to pixel + * density). + */ + private static final int BASE_FONT_SIZE_NORMAL = 12; /** * Size of colored border (not adjusted to pixel density). @@ -57,6 +64,17 @@ public final class CanvasTitle extends CanvasWidget { */ private static final NumberFormat NUMBER_FORMAT = NumberFormat.getFormat("0.#"); + /** + * @return Font size for title and scale according to devices (not adjusted to + * pixel density). + */ + private static int getBaseFontSize() { + if (UiUtils.isSmallScreen()) { + return BASE_FONT_SIZE_SMALL; + } + return BASE_FONT_SIZE_NORMAL; + } + /** * @return Size of colored border (not adjusted to pixel density). */ @@ -70,7 +88,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static String getFont() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + return ((int) (getBaseFontSize() * pixelRatio)) + "px " + FONT_FAMILY; } /** @@ -78,15 +96,14 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_FONT_SIZE * pixelRatio); + return (int) (getBaseFontSize() * pixelRatio); } /** * @return Height of logo. */ private static int getLogoHeight() { - final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO); + return (int) (getLogoWidth() / LOGO_SIZE_RATIO); } /** @@ -94,7 +111,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLogoWidth() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_LOGO_WIDTH * pixelRatio); + return (int) Math.min(UiUtils.getScreenWidth() * pixelRatio / 2, BASE_LOGO_WIDTH * pixelRatio); } /** @@ -102,7 +119,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getPadding() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_FONT_SIZE * pixelRatio / 2); + return (int) (getBaseFontSize() * pixelRatio / 2); } /** @@ -250,11 +267,10 @@ public final class CanvasTitle extends CanvasWidget { } /** - * @return total width of title box, PADDING included, limited to screen width. + * @return total width of title box, PADDING included, limited to canvas width. */ private int getWidth() { - final double pixelRatio = Window.getDevicePixelRatio(); - return Math.min((int) (UiUtils.getScreenWidth() * pixelRatio), getMaxWidth()); + return Math.min(getCanvas().getWidth(), getMaxWidth()); } /** diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java b/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java index cdb1780..26445d2 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java @@ -87,6 +87,13 @@ public final class UiUtils { return getBrowserName().toLowerCase().contains("opr"); } + /** + * @return if screen width < 1000 px + */ + public static native boolean isSmallScreen() /*-{ + return screen.width < 1000; + }-*/; + /** * No Constructor. */ -- GitLab From a6452e2df4276dd78c28e5215daa5561da353911 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 12:07:22 +0200 Subject: [PATCH 08/14] Correction largeur logo sur mobile --- .../www/client/ui/map/CanvasTitle.java | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 7e0e826..8aec988 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -99,21 +99,6 @@ public final class CanvasTitle extends CanvasWidget { return (int) (getBaseFontSize() * pixelRatio); } - /** - * @return Height of logo. - */ - private static int getLogoHeight() { - return (int) (getLogoWidth() / LOGO_SIZE_RATIO); - } - - /** - * @return Width of logo. - */ - private static int getLogoWidth() { - final double pixelRatio = Window.getDevicePixelRatio(); - return (int) Math.min(UiUtils.getScreenWidth() * pixelRatio / 2, BASE_LOGO_WIDTH * pixelRatio); - } - /** * @return Keep space around logo, scale and text. */ @@ -254,6 +239,21 @@ public final class CanvasTitle extends CanvasWidget { } } + /** + * @return Height of logo. + */ + private int getLogoHeight() { + return (int) (getLogoWidth() / LOGO_SIZE_RATIO); + } + + /** + * @return Width of logo. + */ + private int getLogoWidth() { + final double pixelRatio = Window.getDevicePixelRatio(); + return (int) Math.min(getCanvas().getWidth() / 2, BASE_LOGO_WIDTH * pixelRatio); + } + /** * @return total width of title box, paddings and borders included, adapted to indicator description. */ -- GitLab From 21192f1bcaf57cd2727ac6db336e31af3a0effd2 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Wed, 31 Jul 2024 17:47:43 +0200 Subject: [PATCH 09/14] Utiliser 8 classes quantiles. refs #81 --- sql/migration.sql | 11 +++++++++++ .../fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/sql/migration.sql b/sql/migration.sql index a67e071..0df4eb2 100644 --- a/sql/migration.sql +++ b/sql/migration.sql @@ -208,6 +208,17 @@ END; $BODY$ language plpgsql; +-- +-- #81 : SEXTILES => QUANTILES +-- +CREATE OR REPLACE FUNCTION upgrade20240731() RETURNS boolean AS $BODY$ +BEGIN + UPDATE "indicator" SET "quantiletype" ='QUANTILES'; + RETURN true; +END; +$BODY$ +language plpgsql; + --- -- -- Keep this call at the end to apply migration functions. diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index c51ad11..85e67b9 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -162,7 +162,7 @@ public final class CanvasTitle extends CanvasWidget { } final int nbOfIntervals = colorIntervals.size(); final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.7)); + final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.8)); final int cellHeight = 2 * LINE_HEIGHT; final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; final double cellBottom = cellTop + cellHeight; -- GitLab From bae335651caa0874682dcdabd6de0847197d5e55 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Wed, 31 Jul 2024 17:58:46 +0200 Subject: [PATCH 10/14] Utiliser 8 classes quantiles. refs #81 --- .../main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 85e67b9..794d104 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -162,7 +162,7 @@ public final class CanvasTitle extends CanvasWidget { } final int nbOfIntervals = colorIntervals.size(); final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.8)); + final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.9)); final int cellHeight = 2 * LINE_HEIGHT; final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; final double cellBottom = cellTop + cellHeight; -- GitLab From f115adabe1208265c87adf136fd87c1807d6bf81 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 10:29:16 +0200 Subject: [PATCH 11/14] =?UTF-8?q?Adapter=20les=20tailles=20de=20police=20?= =?UTF-8?q?=C3=A0=20la=20densit=C3=A9=20de=20pixels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../www/client/ui/map/CanvasAttributions.java | 30 +++- .../www/client/ui/map/CanvasTitle.java | 149 +++++++++++++----- 2 files changed, 134 insertions(+), 45 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java index 6afb1a5..ea3540b 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java @@ -3,6 +3,8 @@ package fr.agrometinfo.www.client.ui.map; import java.util.LinkedHashSet; import java.util.Set; +import org.pepstock.charba.client.utils.Window; + import com.google.gwt.canvas.dom.client.Context2d; import com.google.gwt.canvas.dom.client.Context2d.TextAlign; import com.google.gwt.canvas.dom.client.TextMetrics; @@ -27,9 +29,9 @@ import ol.layer.Group; public final class CanvasAttributions extends CanvasWidget { /** - * Line height for the lines of title. + * Font size for title and scale (not adjusted to pixel density). */ - private static final int LINE_HEIGHT = 8; + private static final int BASE_FONT_SIZE = 8; /** * Margin around the box. @@ -65,6 +67,22 @@ public final class CanvasAttributions extends CanvasWidget { return attributions; } + /** + * @return Font for title and scale. + */ + private static String getFont() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + } + + /** + * @return Line height for the lines of title. + */ + private static int getLineHeight() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)); + } + /** * Constructor. * @@ -85,6 +103,8 @@ public final class CanvasAttributions extends CanvasWidget { DomGlobal.console.error("Canvas must not be null!"); return; } + final int lineHeight = getLineHeight(); + final Set<String> uniqueAttributions = new LinkedHashSet<>(); final Collection<Base> layers = getMap().getLayerGroup().getLayers(); for (final Base l : layers.getArray()) { @@ -109,15 +129,15 @@ public final class CanvasAttributions extends CanvasWidget { div.setInnerHTML(String.join(" − ", uniqueAttributions)); final String line = div.getInnerText().trim(); final Context2d ctx = canvas.getContext2d(); - ctx.setFont("8px " + FONT_FAMILY); + ctx.setFont(getFont()); final TextMetrics measure = ctx.measureText(line); final double width = measure.getWidth(); ctx.setFillStyle("rgba(255, 255, 255, .8)"); ctx.fillRect(// canvas.getWidth() - width - MARGIN - 2 * PADDING, // - canvas.getHeight() - LINE_HEIGHT - MARGIN - 2 * PADDING, // + canvas.getHeight() - lineHeight - MARGIN - 2 * PADDING, // width + 2 * PADDING, // - LINE_HEIGHT + 2 * PADDING); + lineHeight + 2 * PADDING); ctx.setFillStyle("#000000"); ctx.setTextAlign(TextAlign.LEFT); ctx.fillText(line, // diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 794d104..35c73b3 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -4,6 +4,8 @@ import java.util.ArrayList; import java.util.List; import java.util.StringJoiner; +import org.pepstock.charba.client.utils.Window; + import com.google.gwt.canvas.dom.client.Context2d; import com.google.gwt.canvas.dom.client.Context2d.TextAlign; import com.google.gwt.canvas.dom.client.TextMetrics; @@ -25,63 +27,94 @@ import ol.Map; */ public final class CanvasTitle extends CanvasWidget { + /** + * Font size for title and scale (not adjusted to pixel density). + */ + private static final int BASE_FONT_SIZE = 12; + + /** + * Size of colored border (not adjusted to pixel density). + */ + private static final int BASE_BORDER_SIZE = 1; + /** * Font color for title and scale. */ private static final String FONT_COLOR = "#000000"; /** - * Line height for the lines of title. + * Width / height computed from SVG file. */ - private static final int LINE_HEIGHT = 12; + private static final double LOGO_SIZE_RATIO = 2.1087; /** - * Size of colored border. + * Width of logo (not adjusted to pixel density). */ - private static final int BORDER_SIZE = 1; + private static final int BASE_LOGO_WIDTH = 150; /** - * Width of logo. + * To format scale bounds. */ - private static final int LOGO_WIDTH = 150; + private static final NumberFormat NUMBER_FORMAT = NumberFormat.getFormat("0.#"); /** - * Width / height computed from SVG file. + * @return Size of colored border (not adjusted to pixel density). */ - private static final double LOGO_SIZE_RATIO = 2.1087; + private static int getBorderSize() { + final double pixelRatio = Window.getDevicePixelRatio(); + return (int) (BASE_BORDER_SIZE * pixelRatio); + } /** - * Total width of title box, PADDING included. + * @return Font for title and scale. */ - private static final int MAX_WIDTH = 370; + private static String getFont() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + } /** - * To format scale bounds. + * @return Line height for the lines of title. */ - private static final NumberFormat NUMBER_FORMAT = NumberFormat.getFormat("0.#"); + private static int getLineHeight() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_FONT_SIZE * pixelRatio)); + } /** - * Keep space around logo, scale and text. + * @return Height of logo. */ - private static final int PADDING = 5; + private static int getLogoHeight() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO)); + } /** - * @return total width of title box, PADDING included, limited to screen width. + * @return Width of logo. */ - private static int getWidth() { - return Math.min(UiUtils.getScreenWidth(), MAX_WIDTH); + private static int getLogoWidth() { + final double pixelRatio = Window.getDevicePixelRatio(); + return ((int) (BASE_LOGO_WIDTH * pixelRatio)); } /** - * Lines for the title. + * @return Keep space around logo, scale and text. */ - private List<String> title; + private static int getPadding() { + final double pixelRatio = Window.getDevicePixelRatio(); + return (int) (BASE_FONT_SIZE * pixelRatio / 2); + } /** * Color intervals used to set background color of cells. */ private List<ColorInterval> colorIntervals; + /** + * Lines for the title. + */ + private List<String> title; + /** * Constructor. * @@ -96,9 +129,13 @@ public final class CanvasTitle extends CanvasWidget { */ @Override protected void draw() { - final int availableWidth = getWidth() - LOGO_WIDTH - BORDER_SIZE * 2; + final int logoWidth = getLogoWidth(); + final int padding = getPadding(); + final int width = getWidth(); + + final int availableWidth = width - logoWidth - getBorderSize() * 2; final Context2d ctx = getCanvas().getContext2d(); - ctx.setFont("10px " + FONT_FAMILY); + ctx.setFont(getFont()); final List<String> lines = new ArrayList<>(); for (final String line : title) { if (line == null) { @@ -113,9 +150,9 @@ public final class CanvasTitle extends CanvasWidget { ctx.setFillStyle(FONT_COLOR); ctx.setTextAlign(TextAlign.CENTER); int i = 0; - final int x = PADDING + LOGO_WIDTH + (getWidth() - LOGO_WIDTH) / 2; + final int x = padding + logoWidth + (width - logoWidth) / 2; for (final String line : lines) { - ctx.fillText(line, x, (double) PADDING + LINE_HEIGHT + LINE_HEIGHT * i); + ctx.fillText(line, x, (double) padding + getLineHeight() * (i + 1)); i++; } this.drawScale(); @@ -127,28 +164,35 @@ public final class CanvasTitle extends CanvasWidget { * @param nbOfLines number of lines to set the box height */ private void drawBorder(final int nbOfLines) { + final int borderSize = getBorderSize(); + final int logoHeight = getLogoHeight(); + final int padding = getPadding(); + final int width = getWidth(); + final Context2d ctx = getCanvas().getContext2d(); - final int totalScaleHeight = 3 * LINE_HEIGHT; + final int totalScaleHeight = 3 * getLineHeight(); final double height = Math.max(// - LINE_HEIGHT * nbOfLines + 2d * BORDER_SIZE, // - BORDER_SIZE + PADDING + LOGO_WIDTH / LOGO_SIZE_RATIO + PADDING + totalScaleHeight + BORDER_SIZE); + getLineHeight() * nbOfLines + 2d * borderSize, // + borderSize + padding + logoHeight + padding + totalScaleHeight + borderSize); ctx.setFillStyle("#818181"); - ctx.fillRect(0, 0, getWidth(), height + 2 * PADDING); + ctx.fillRect(0, 0, width, height + 2 * padding); ctx.setFillStyle("#ffffff"); - ctx.fillRect(0, 0, (double) getWidth() - BORDER_SIZE, height + 2 * PADDING - BORDER_SIZE); + ctx.fillRect(0, 0, (double) width - borderSize, height + 2 * padding - borderSize); } /** * Draw the logo. */ private void drawLogo() { + final int logoWidth = getLogoWidth(); + final int logoHeight = getLogoHeight(); final Context2d ctx = getCanvas().getContext2d(); final ImageElement logoImg = ApplicationUtils.getApplicationLogo(); ctx.drawImage(logoImg, // - 0d + BORDER_SIZE + PADDING, // - 0d + BORDER_SIZE + PADDING, // - LOGO_WIDTH, // - LOGO_WIDTH / LOGO_SIZE_RATIO // + 0d + getBorderSize() + getPadding(), // + 0d + getBorderSize() + getPadding(), // + logoWidth, // + logoHeight // ); } @@ -160,16 +204,21 @@ public final class CanvasTitle extends CanvasWidget { DomGlobal.console.error("colorIntervals must not be null!"); return; } + final int borderSize = getBorderSize(); + final int lineHeight = getLineHeight(); + final int logoHeight = getLogoHeight(); + final int padding = getPadding(); + + final Context2d ctx = getCanvas().getContext2d(); + ctx.setFont(getFont()); + final double scaleLabelWidth = ctx.measureText("0000.00").getWidth(); final int nbOfIntervals = colorIntervals.size(); - final double logoHeight = LOGO_WIDTH / LOGO_SIZE_RATIO; - final int cellWidth = (int) (getWidth() / (nbOfIntervals + 0.9)); - final int cellHeight = 2 * LINE_HEIGHT; - final double cellTop = BORDER_SIZE + PADDING + logoHeight + PADDING; + final int cellWidth = (int) ((getWidth() - scaleLabelWidth) / nbOfIntervals); + final int cellHeight = 2 * lineHeight; + final double cellTop = borderSize + padding + logoHeight + padding; final double cellBottom = cellTop + cellHeight; - final double labelTop = cellBottom + LINE_HEIGHT; - final Context2d ctx = getCanvas().getContext2d(); - ctx.setFont("11px " + FONT_FAMILY); - double x = PADDING; + final double labelTop = cellBottom + lineHeight; + double x = padding; for (final ColorInterval value : colorIntervals) { final String line = NUMBER_FORMAT.format(value.getMin()); ctx.setFillStyle("#" + value.getColor()); @@ -188,6 +237,26 @@ public final class CanvasTitle extends CanvasWidget { } } + /** + * @return total width of title box, paddings and borders included, adapted to indicator description. + */ + private int getMaxWidth() { + final int logoWidth = getLogoWidth(); + final Context2d ctx = getCanvas().getContext2d(); + ctx.setFont(getFont()); + final String largestDescription = "Nombre de jours chauds (Tmax > 35°C) (j)"; + final int largestDescriptionWidth = (int) ctx.measureText(largestDescription).getWidth(); + return logoWidth + 2 * getPadding() * 2 + getBorderSize() * 2 + largestDescriptionWidth; + } + + /** + * @return total width of title box, PADDING included, limited to screen width. + */ + private int getWidth() { + final double pixelRatio = Window.getDevicePixelRatio(); + return Math.min((int) (UiUtils.getScreenWidth() * pixelRatio), getMaxWidth()); + } + /** * @param intervals Color intervals used to set background color of cells. * @param lines the title splitted in lines -- GitLab From 9838169c5ae6399dabb577d6270f6554ed3505a9 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 10:57:01 +0200 Subject: [PATCH 12/14] PMD --- .../agrometinfo/www/client/ui/map/CanvasAttributions.java | 2 +- .../java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java index ea3540b..5a1f4e7 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java @@ -80,7 +80,7 @@ public final class CanvasAttributions extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)); + return (int) (BASE_FONT_SIZE * pixelRatio); } /** diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 35c73b3..a8f6197 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -78,7 +78,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)); + return (int) (BASE_FONT_SIZE * pixelRatio); } /** @@ -86,7 +86,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLogoHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO)); + return (int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO); } /** @@ -94,7 +94,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLogoWidth() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_LOGO_WIDTH * pixelRatio)); + return (int) (BASE_LOGO_WIDTH * pixelRatio); } /** -- GitLab From e8f2215f3461eaef6a50f0bd2fb9e34456842107 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 11:58:25 +0200 Subject: [PATCH 13/14] =?UTF-8?q?Adapter=20la=20taille=20des=20cr=C3=A9dit?= =?UTF-8?q?s=20=C3=A0=20la=20largeur=20de=20la=20carte.=20fixes=20#70?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../www/client/ui/map/CanvasAttributions.java | 107 ++++++++++++++---- .../www/client/ui/map/CanvasTitle.java | 38 +++++-- .../agrometinfo/www/client/util/UiUtils.java | 7 ++ 3 files changed, 117 insertions(+), 35 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java index 5a1f4e7..e7f94b2 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasAttributions.java @@ -1,6 +1,8 @@ package fr.agrometinfo.www.client.ui.map; +import java.util.ArrayList; import java.util.LinkedHashSet; +import java.util.List; import java.util.Set; import org.pepstock.charba.client.utils.Window; @@ -14,6 +16,7 @@ import com.google.gwt.dom.client.DivElement; import com.google.gwt.dom.client.Document; import elemental2.dom.DomGlobal; +import fr.agrometinfo.www.client.util.UiUtils; import ol.Collection; import ol.Map; import ol.layer.Base; @@ -27,11 +30,22 @@ import ol.layer.Group; * @author Olivier Maury */ public final class CanvasAttributions extends CanvasWidget { + /** + * Attribution separator. + */ + private static final String SEP = " − "; + + /** + * Font size for title and scale for small devices (not adjusted to pixel + * density). + */ + private static final int BASE_FONT_SIZE_SMALL = 6; /** - * Font size for title and scale (not adjusted to pixel density). + * Font size for title and scale for normal devices (not adjusted to pixel + * density). */ - private static final int BASE_FONT_SIZE = 8; + private static final int BASE_FONT_SIZE_NORMAL = 8; /** * Margin around the box. @@ -67,12 +81,23 @@ public final class CanvasAttributions extends CanvasWidget { return attributions; } + /** + * @return Font size for title and scale according to devices (not adjusted to + * pixel density). + */ + private static int getBaseFontSize() { + if (UiUtils.isSmallScreen()) { + return BASE_FONT_SIZE_SMALL; + } + return BASE_FONT_SIZE_NORMAL; + } + /** * @return Font for title and scale. */ private static String getFont() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + return ((int) (getBaseFontSize() * pixelRatio)) + "px " + FONT_FAMILY; } /** @@ -80,7 +105,7 @@ public final class CanvasAttributions extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_FONT_SIZE * pixelRatio); + return (int) (getBaseFontSize() * pixelRatio); } /** @@ -105,19 +130,70 @@ public final class CanvasAttributions extends CanvasWidget { } final int lineHeight = getLineHeight(); + final Set<String> uniqueAttributions = getAttributions(); + + final Context2d ctx = canvas.getContext2d(); + ctx.setFont(getFont()); + final int availableWidth = canvas.getWidth() - 2 * PADDING; + + double width = 0; + final List<String> lines = new ArrayList<>(); + lines.add(""); + for (final String attribution : uniqueAttributions) { + final String line = lines.get(lines.size() - 1).concat(attribution); + final TextMetrics measure = ctx.measureText(line); + final double lineWidth = measure.getWidth(); + if (lineWidth > availableWidth) { + lines.add(attribution.concat(SEP)); + } else { + lines.set(lines.size() - 1, line.concat(SEP)); + if (lineWidth > width) { + width = lineWidth; + } + } + } + + final int nbOfLines = lines.size(); + ctx.setFillStyle("rgba(255, 255, 255, .8)"); + ctx.fillRect(// + canvas.getWidth() - width - MARGIN - 2 * PADDING, // + canvas.getHeight() - nbOfLines * lineHeight - MARGIN - 2d * PADDING, // + width + 2 * PADDING, // + nbOfLines * lineHeight + 2d * PADDING); + ctx.setFillStyle("#000000"); + ctx.setTextAlign(TextAlign.LEFT); + double i = 1; + for (final String line : lines) { + final String str; + if (line.endsWith(SEP)) { + str = line.substring(0, line.length() - SEP.length()); + } else { + str = line; + } + ctx.fillText(str, // + canvas.getWidth() - width - MARGIN - PADDING, // + canvas.getHeight() - MARGIN - PADDING - (nbOfLines - i) * lineHeight); + i++; + } + } + + private Set<String> getAttributions() { final Set<String> uniqueAttributions = new LinkedHashSet<>(); + final DivElement div = Document.get().createDivElement(); final Collection<Base> layers = getMap().getLayerGroup().getLayers(); for (final Base l : layers.getArray()) { String attributions = getAttributions(l); if (attributions != null) { - uniqueAttributions.add(attributions); + div.setInnerHTML(attributions); + uniqueAttributions.add(div.getInnerText().trim()); } else if (l instanceof Group) { final Group group = (Group) l; for (final Base layer : group.getLayers().getArray()) { if (layer.getVisible()) { attributions = getAttributions(layer); if (attributions != null) { - uniqueAttributions.add(attributions); + div.setInnerHTML(attributions); + uniqueAttributions.add(div.getInnerText().trim()); } } } @@ -125,23 +201,6 @@ public final class CanvasAttributions extends CanvasWidget { GWT.log("CanvasAttributions.draw() " + l.getClass().getCanonicalName()); } } - final DivElement div = Document.get().createDivElement(); - div.setInnerHTML(String.join(" − ", uniqueAttributions)); - final String line = div.getInnerText().trim(); - final Context2d ctx = canvas.getContext2d(); - ctx.setFont(getFont()); - final TextMetrics measure = ctx.measureText(line); - final double width = measure.getWidth(); - ctx.setFillStyle("rgba(255, 255, 255, .8)"); - ctx.fillRect(// - canvas.getWidth() - width - MARGIN - 2 * PADDING, // - canvas.getHeight() - lineHeight - MARGIN - 2 * PADDING, // - width + 2 * PADDING, // - lineHeight + 2 * PADDING); - ctx.setFillStyle("#000000"); - ctx.setTextAlign(TextAlign.LEFT); - ctx.fillText(line, // - canvas.getWidth() - width - MARGIN - PADDING, // - canvas.getHeight() - MARGIN - PADDING); + return uniqueAttributions; } } diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index a8f6197..7e0e826 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -28,9 +28,16 @@ import ol.Map; public final class CanvasTitle extends CanvasWidget { /** - * Font size for title and scale (not adjusted to pixel density). + * Font size for title and scale for small devices (not adjusted to pixel + * density). */ - private static final int BASE_FONT_SIZE = 12; + private static final int BASE_FONT_SIZE_SMALL = 10; + + /** + * Font size for title and scale for normal devices (not adjusted to pixel + * density). + */ + private static final int BASE_FONT_SIZE_NORMAL = 12; /** * Size of colored border (not adjusted to pixel density). @@ -57,6 +64,17 @@ public final class CanvasTitle extends CanvasWidget { */ private static final NumberFormat NUMBER_FORMAT = NumberFormat.getFormat("0.#"); + /** + * @return Font size for title and scale according to devices (not adjusted to + * pixel density). + */ + private static int getBaseFontSize() { + if (UiUtils.isSmallScreen()) { + return BASE_FONT_SIZE_SMALL; + } + return BASE_FONT_SIZE_NORMAL; + } + /** * @return Size of colored border (not adjusted to pixel density). */ @@ -70,7 +88,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static String getFont() { final double pixelRatio = Window.getDevicePixelRatio(); - return ((int) (BASE_FONT_SIZE * pixelRatio)) + "px " + FONT_FAMILY; + return ((int) (getBaseFontSize() * pixelRatio)) + "px " + FONT_FAMILY; } /** @@ -78,15 +96,14 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLineHeight() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_FONT_SIZE * pixelRatio); + return (int) (getBaseFontSize() * pixelRatio); } /** * @return Height of logo. */ private static int getLogoHeight() { - final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_LOGO_WIDTH * pixelRatio / LOGO_SIZE_RATIO); + return (int) (getLogoWidth() / LOGO_SIZE_RATIO); } /** @@ -94,7 +111,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getLogoWidth() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_LOGO_WIDTH * pixelRatio); + return (int) Math.min(UiUtils.getScreenWidth() * pixelRatio / 2, BASE_LOGO_WIDTH * pixelRatio); } /** @@ -102,7 +119,7 @@ public final class CanvasTitle extends CanvasWidget { */ private static int getPadding() { final double pixelRatio = Window.getDevicePixelRatio(); - return (int) (BASE_FONT_SIZE * pixelRatio / 2); + return (int) (getBaseFontSize() * pixelRatio / 2); } /** @@ -250,11 +267,10 @@ public final class CanvasTitle extends CanvasWidget { } /** - * @return total width of title box, PADDING included, limited to screen width. + * @return total width of title box, PADDING included, limited to canvas width. */ private int getWidth() { - final double pixelRatio = Window.getDevicePixelRatio(); - return Math.min((int) (UiUtils.getScreenWidth() * pixelRatio), getMaxWidth()); + return Math.min(getCanvas().getWidth(), getMaxWidth()); } /** diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java b/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java index cdb1780..26445d2 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/util/UiUtils.java @@ -87,6 +87,13 @@ public final class UiUtils { return getBrowserName().toLowerCase().contains("opr"); } + /** + * @return if screen width < 1000 px + */ + public static native boolean isSmallScreen() /*-{ + return screen.width < 1000; + }-*/; + /** * No Constructor. */ -- GitLab From 2f895137949bcc443fe4ec62161d99a64a84c954 Mon Sep 17 00:00:00 2001 From: Olivier Maury <Olivier.Maury@inrae.fr> Date: Thu, 1 Aug 2024 12:07:22 +0200 Subject: [PATCH 14/14] Correction largeur logo sur mobile --- .../www/client/ui/map/CanvasTitle.java | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java index 7e0e826..8aec988 100644 --- a/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java +++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/map/CanvasTitle.java @@ -99,21 +99,6 @@ public final class CanvasTitle extends CanvasWidget { return (int) (getBaseFontSize() * pixelRatio); } - /** - * @return Height of logo. - */ - private static int getLogoHeight() { - return (int) (getLogoWidth() / LOGO_SIZE_RATIO); - } - - /** - * @return Width of logo. - */ - private static int getLogoWidth() { - final double pixelRatio = Window.getDevicePixelRatio(); - return (int) Math.min(UiUtils.getScreenWidth() * pixelRatio / 2, BASE_LOGO_WIDTH * pixelRatio); - } - /** * @return Keep space around logo, scale and text. */ @@ -254,6 +239,21 @@ public final class CanvasTitle extends CanvasWidget { } } + /** + * @return Height of logo. + */ + private int getLogoHeight() { + return (int) (getLogoWidth() / LOGO_SIZE_RATIO); + } + + /** + * @return Width of logo. + */ + private int getLogoWidth() { + final double pixelRatio = Window.getDevicePixelRatio(); + return (int) Math.min(getCanvas().getWidth() / 2, BASE_LOGO_WIDTH * pixelRatio); + } + /** * @return total width of title box, paddings and borders included, adapted to indicator description. */ -- GitLab