Journal

n°19

Extraire un nombre décimal en Javascript

Javascript

30 nov 2018

function extractFloat(element) {
    element = element.toString();
    var match = element.match(/-?\s*\d+(\.\d+)?/); // captures the first 0 or -0 or -0.0 match

    if(match) {
    return match[0].replace(/\s+/g, ''); // removes whitespaces (if any)
    } else {
    return false;
  }
}

console.log(extractFloat("margin-top: - 66.67 px")); // -66.67
console.log(extractFloat("I ate 10 apples in the last 5 days")); // 10
console.log(extractFloat("2*a")); // 2
console.log(extractFloat(-5.0)); // -5

n°18

Fonction JS « est un nombre »

Javascript

29 nov 2018

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

n°17

Equivalent JS de la fonction Python int()

Javascript, Web

23 nov 2018

function int(n) {
    n = Math.round(n);

    if(!isNaN(n)){
        return n;
    } else { return 0; }
}

Si on est joueur, on peut (fin 2018) déjà utiliser les nouvelles fonctionnalités Javascript de l'élément Number pour tester si on a bien un entier, via Number.isInteger(n), voir cette doc. Attention, il n'y par exemple pas de support Internet Explorer, ni navigateur BlackBerry OS.

n°16

Utiliser HERE Maps comme fournisseur de tuiles avec Leaflet

Web, Javascript

10 sept 2018

Une bonne alternative aux fournisseurs habituels que sont Google Maps ou OpenStreetMaps est Here Maps (ex-Nokia, aujourd'hui détenu par les constructeurs automobile allemands, ). D'expérience c'est un peu plus lent que Google Maps mais on évite la publicité déguisée. Les cartes sont claires et le graphisme élégant.

var HereMaps = L.tileLayer(''https://{s}.aerial.maps.api.here.com/maptile/2.1/maptile/newest/terrain.day/{z}/{x}/{y}/256/png8?app_id=VgTVFr1a0ft1qGcLCVJ6&app_code=LJXqQ8ErW71UsRUK3R33Ow', {
    maxZoom: 20,
    subdomains:['1','2','3','4'],
    attribution: '&copy; HERE'
});

HereMaps.addTo(map);

Plus d'information sur la construction de la requète, voir la documentation de HERE.

Les codes (jeton) API app_code et app_id utilisés ici sont ceux de la carte de la page d'accueil de HERE. C'est très probablement interdit de l'utiliser pour vos projets et risque de changer dans le temps. A noter que HERE propose un service gratuit sous 250 000 transactions par an pour vous procurer vos propres codes.

Pour info, pour récupérer les codes API courants de la carte publique HERE, le plus simple est d'écouter les requêtes serveurs en naviguant sur la page. Faites Ctrl+Maj+I, onglet Réseau, déplacez vous sur la carte et regardez les adresses des tuiles qui chargent.

Mise à jour : adresse mise à jour au 29/11/20.

n°15

Commande Rhino équivalente au MatchProperties d'Autocad

Python, Rhino3D

24 août 2018

import rhinoscriptsyntax as rs

def acadMatch(source):
    rs.Command("_SelWindow")

    targets = rs.SelectedObjects()
    if targets:
        rs.MatchObjectAttributes(targets, source)
        rs.UnselectAllObjects()
        acadMatch(source)
    else:
        print "No target object found."

sources = rs.SelectedObjects()
if len(sources) > 0:
    source = sources[0]
else:
    source = rs.GetObject("Select source object")

if source:
    rs.UnselectAllObjects()
    acadMatch(source)
else:
    print "No source object found."

A ajouter dans un bouton (voir article. On peut même prendre l'icône d'Autocad pour faire encore plus vrai.

n°14

HTTPS, HSTS et redirection chez OVH

Web

14 août 2018

Pour forcer l'usage de SSL pour l'accès à votre site, c'est-à-dire forcer l'accès via « https:// » plutôt que « http:// », il convient d'ajouter les lignes suivantes à votre fichier .htaccess. Le code ci-dessous supprime aussi au passage le « www. » qui peut se glisser après « http:// ».

RewriteEngine on
RewriteCond %{SERVER_PORT} 80 [OR]
RewriteCond %{HTTP_HOST}  ^www\.website\.com$ [NC]
RewriteRule ^(.*) https://website.com/$1 [QSA,L,R=301]

Le code a pour effet de réécrire toutes les adresses en ajoutant un « s » à « http:// » pour forcer l'usage de ce protocole. On sait que cela a comme inconvénient de permettre initialement la connexion en HTTP (non sécurisée) pour lire le fichier .htaccess et seulement ensuite rediriger vers la page en HTTPS. Lors de cette première connexion non sécurisée une interception, puis éventuellement redirection vers un site maquillé, est possible. C'est le cas à chaque fois que l'on se connecte au site sans « https:// » dans l'adresse. Pour cette raison, HSTS (HTTP Strict Transport Security) a été inventé. Cette option enregistre sur le navigateur client et pour une durée donnée la préférence d'accès en HTTPS à tel site et opère la réécriture directement au niveau du navigateur client. On a ainsi besoin de se connecter qu'une seule fois de manière non sécurisée pour lire le fichier .htaccess. Cela limite les risques. HSTS se définit comme suit, dans le fichier .htaccess.

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

On peut même inscrire son site sur une liste blanche que les navigateurs ont en mémoire à l'installation et éviter absolument toute connexion non sécurisée.

Le risque, c'est que si le site en question n'a pas de certificat SSL, le perd, ou redirige vers un autre site sans certificat, le navigateur revoie un erreur. Et l'on ne pourra plus se connecter en HTTP au site car le navigateur a enregistré qu'il fallait toujours se connecter en HTTPS. Changer votre .htaccess n'aura pas d'effet, car l'information est stockée localement sur le navigateur de vos visiteurs. Cela, jusqu'à l'expiration du max-age (en secondes) défini dans le .htaccess comme ci-dessus. Le HSTS est donc assez dangereux si on y prend pas garde, surtout si vous le configurez pour une durée longue. Pour info, vous pouvez effacer la mémoire de votre navigateur concernant les préférence HSTS de tel site. Sur Firefox, voir Historique > clic droit sur le site Oublier ce site.

Si vous avez configuré des redirections avec votre hébergement OVH, elles ne pourront pas se faire en HTTPS à ma connaissance. Elles pourront cependant bien mener en bout de chaîne à une page en HTTPS. Par exemple, http://page.domaine.co peut rediriger vers https://domaine.com/pages/page mais l'accès à https://page.domaine.com vous renverra une erreur de certificat. En effet, le serveur de redirection d'OVH par lequel on transit est différent du serveur prévu dans le certificat délivré pour votre site. Pour renvoyer vers une page en HTTPS, il faut opter pour une redirection visible. Ainsi, si vous utilisez les redirections OVH, il ne faut pas utiliser HSTS.

Attention, des applications (CMS ou autre) que vous avez installé sur votre site, peuvent contenir des directives HSTS dans le .htaccess de leur sous-dossier mais qui s'appliquent à l'ensemble du domaine. C'est le cas de Own/Next-cloud ou FileRun par exemple. Il faudra alors éditer le fichier .htaccess en question et mettre un "#" devant la ligne configurant le HSTS pour le désactiver.

n°13

Triangulation de Delaunay entre des points dans QGIS

Python, Qgis

13 mai 2018

Au travers de l'interface Python, on peut construire une triangulation de Delaunay entre des points QGIS. Ou plutôt : on ne peut pas directement – du moins pas à ma connaissance – mais on peut faire appel à librairie externe qui sait le faire.

Triangulation de Delaunay entre des points

C'est légèrement bricolé, mais efficace. J'utilise les fonctions du projet delaunay de Peter Beard. On a besoin ici uniquement du fichier geometry.py qui contient les routines géométriques nécessaires. Pour faire appel à ces fonctions dans pyQGIS, il faut placer le fichier dans le dossier lib de l'installation Python de QGIS. Sous Windows et si vous avez installé QGIS via OSGeo, ce sera ici C:\OSGeo4W64\apps\Python27\Lib.

Ci-dessous le code d'une utilisation typique

# coding: utf8

from qgis.core import *
from qgis.gui import *
from PyQt4.QtCore import *
from PyQt4.QtGui import *

import math
from geometry import *
# by Peter Beard, https://github.com/PeterBeard/delaunay
# to import Python external library to QGIS, put the .py (here geometry.py) file in C:\OSGeo4W64\apps\Python27\Lib

inputPts = [QgsPoint(7.7,48.6), QgsPoint(2.3,48.9), QgsPoint(4.3,50.8), QgsPoint(13.4,52.5), QgsPoint(12.6,55.7), QgsPoint(-0.1,51.5), QgsPoint(5.4,43.3)]
#Qgis Point objects (Strasbourg, Paris, Berlin, Copenhagen, London, Marseille)


# Translate Points (Qgis Point objects) into geometry.py points

delaunayPts = []
for pt in inputPts:
    geometryPoint = Point(pt.x(), pt.y())
    delaunayPts.append(geometryPoint)

delaunayTriangles = delaunay_triangulation(delaunayPts) #returns geometry.py Triangle objects


# Get lines from group of Delaunay triangles

delaunayLines = [] #Pairs (here tuples) of Qgis Point objects (start and end of line)

for triangle in delaunayTriangles:
    pointA = QgsPoint(triangle[0].x, triangle[0].y)
    pointB = QgsPoint(triangle[1].x, triangle[1].y)
    pointC = QgsPoint(triangle[2].x, triangle[2].y)

    if pointA in inputPts and pointB in inputPts:
    #excludes automatically created bounding points from geometry.py

        lineA = (pointA, pointB)
        delaunayLines.append(lineA)

    if pointA in inputPts and pointC in inputPts:
        lineB = (pointA, pointC)
        delaunayLines.append(lineB)

    if pointB in inputPts and pointC in inputPts:
        lineC = (pointB, pointC)
        delaunayLines.append(lineC)


# Delete duplicates

def removeTupleDuplicatesinArray(array):
    duplicateFreeArray = []

    for t in array:
        if (t[0],t[1]) not in duplicateFreeArray and (t[1],t[0]) not in duplicateFreeArray:
            duplicateFreeArray.append(t)
    return duplicateFreeArray

delaunayLines = removeTupleDuplicatesinArray(delaunayLines)


# Preview lines

for line in delaunayLines:
    rb = QgsRubberBand( qgis.utils.iface.mapCanvas(), True )
    rb.setColor (Qt.blue)
    rb.addPoint(QgsPoint(line[0].x(), line[0].y()))
    rb.addPoint(QgsPoint(line[1].x(), line[1].y()))

n°12

Exporter une image d'un canvas protégé depuis Firefox

Web

1er mai 2018

Certains sites d'archive offrent à leurs visiteurs des lecteurs d'image qui permettent la visualisation d'une partie de la photo en gros plan (et donc en haute résolution) mais empêchent le téléchargement de l'image entière à cette résolution. Comme en cartographie, elle est découpée en carreaux pour empêcher d'obtenir l'adresse de l'image haute définition par l'écoute du réseau. Ces carreaux sont cependant bien réassemblés par le lecteur pour permettre la navigation en gros plan. Pour télécharger l'image complète en haute définition, on peut donc exporter une « capture » du lecteur si celui-ci est un objet <canvas>.

Je vais prendre l'exemple d'une image sur le site des Bibliothèques spécialisées de Paris. Sur ce site, on nous laisse télécharger les images mais dans une résolution inférieure que celle du <canvas>.

Avec l'Inspecteur de la barre d'outils de développement (F12) de Firefox on cherche l'élément <canvas>. Puis Clic droit dessus et « Ouvrir dans la console ». La console s'ouvre avec le nom de l'objet renseigné, généralement temp0. On copie-colle dans la console les trois lignes suivantes en prenant soin de modifier temp0 si le nom de l'objet est différent.

var d = temp0.toDataURL();
var w = window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");

On exécute, l'image extraite s'affichera dans un nouvel onglet.

Une astuce supplémentaire pour obtenir la meilleure résolution possible consiste à forcer un <canvas> de grande taille en réduisant le niveau de zoom du navigateur (Ctrl -) avant d'executer le script. Idem pour obtenir la totalité de l'image est non uniquement un gros plan.

n°11

Ajouter des règles CSS (en CSS !) à une page via Javascript

Javascript, Web

11 avr 2018

Evite de devoir retraduire en instructions purement Javascript. Ajoute au DOM un élément <style>.

var cssRules = "body{background-color: rgba(150,200,200,1);} div{border: .5vw white solid;} p{text-size: 10vw; color: white;}";

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(cssRules));

document.head.appendChild(style);

Attention au formatage des règles CSS (sauts de ligne, apostrophes, ...) si l'on reprend son code depuis un fichier CSS.

n°10

Rogner plusieurs images d'un coup avec ImageMagick

Windows

5 mar 2018

Pour automatiser le rognage d'une série d'images, par exemple pour enlever le filigrane (logo), on peut utiliser les exécutables de ImageMagick. Pour utiliser ImageMagick sur Windows, le plus simple est de télécharger la version portable du logiciel et de placer les fichiers téléchargés dans un dossier qui contient les images à traiter.

Dans l'invité de commande (~Terminal), on va ensuite chercher ce dossier pour faire appel aux fonctionnalités. Pour faire propre, je garde le dossier ImageMagick comme sous-dossier de mon répertoire de travail contentenant les images. Ici je l'ai renommé im, d'où la commande suivante.

im\convert *.jpg -crop 1920x1000+0+0 converted_%04d.jpg

Dans cet exemple, 1920 par 1000px sera la taille finale de toutes les images, avec le rognage démarré en haut à gauche.