Développement d'une barre de contribution intégrable

Si c’est mon système qui est aussi utilisé dans l’image, alors c’est déjà fait.

Si la langue est définie dans l’URL, alors on la prend, sinon on regarde la langue préférée avec Accept-Language. Si cette langue n’est pas dispo, on prend la langue par défaut. Une amélioration serait de regarder toutes les langues de l’entête, dans l’ordre.

Edit: Ça fonctionne, il faut juste ajouter le paramètre lang vide dans l’url. Sinon la détection est désactivée.

2 Likes

Salut @Paidge !

Vu que ton financement participatif pour les images et le générateur n’est pas atteint, je te suggère de proposer explicitement le don vers ta clef sur la page du générateur. Par exemple, au moment de générer l’URL à intégrer.

J’ai utilisé le générateur, et j’ai dû fouiller sur le forum pour faire un don… C’est absolument contre-intuitif, et réservé à celleux qui ont suivi tes aventures depuis le début :smiley:

2 Likes

Merci pour ton retour. En fait j’avais mis un lien hypertexte en bas de page sur le pseudo Paidge qui redirigeait vers la page Cesium du compte mais comme l’instance g1.duniter.fr a fermé ses portes, ça redirige vers cesium.app. Je vais voir effectivement pour corriger ça :wink:

J’ai fait une MR :

  • Ajout de barres pour voir la somme des contributions par jour
  • On peut voir le tooltip sans viser un point au pixel près avec le curseur
  • La courbe est en escalier, ce qui représente mieux les données (une transaction n’est pas interpolée dans le temps, elle est ponctuelle)

Une démo ici

Améliorations possibles :

  • Changer les couleurs (contraste faible entre les barres et la courbe)
  • Pouvoir changer la période d’une barre (un jour, une semaine…)
6 Likes

Bravo à vous pour tout ca !

  • Avoir une légère transparence dans la couleur de la courbe. cf sous Cesium
3 Likes

@Paidge J’ai découvert un optimiseur SVG : https://github.com/petercollingridge/SVG-Optimiser

Je l’ai appliqué sur le logo SVG de Dunitrust car ce dernier était un peu lourd (On passe de 239Ko a 142Ko soit un gain de 60%), tu peut également l’appliquer sur les autres logos si tu le souhaite :slight_smile:

4 Likes

Une idée qui me vient.
Avoir dans la barre et le graphe le montant à atteindre en fonction du temps.
Par exemple, une seconde jauge qui avance au cours du temps.
Dans le graphe, une fonction f(x) = x.
Ça permettrait de savoir où on en est (dessus, dessous) sur le mois présent pour le financement du projet Duniter, par exemple.

3 Likes

Tu veux dire une courbe de fonction linéaire pour atteindre l’objectif ? Du genre si il faut 10 jours pour avoir 50 Junes, une fonction f(x)= 5x, x étant le nbre de jours ? Soit f(x)=(Montant_a_atteindre/nb_jours)x ? Si c’est ce que je pense, elle pourrait remplacer avantageusement la droite horizontale f(x)=montant_a_atteindre.

1 Like

Exact, c’est ce à quoi je pensais.
Ainsi qu’un deuxième niveau (autre couleur) dans la jauge.

1 Like

Ou un truc qui se basse sur les données historiques pour comparer la progression actuelle à la progression moyenne des mois précédents. Probablement beaucoup plus compliqué à mettre en place ceci dit :sweat_smile:

1 Like

Là je n’ai pas compris :stuck_out_tongue:

Dans la barre verticale il y a un indicateur (remplissage de la barre) dans la jauge d’avancement du financement.
L’idée serait d’avoir un autre indicateur (d’une autre couleur, transparent, en dessous/dessus, je sais pas comment intégrer ça) qui indique l’objectif au jour le jour. Ce second indicateur avancerait au jour le jour.

1 Like

Je galère à chaque fois à trouver à l’URL de ton instance de barre de financement. Tu peux la lister sur le dépôt de la barre de financement. Sauf si tu ne shouaite pas qu’on utilise trop ton serveur et qu’on l’héberge le notre. On pourraît en faire une app YunoHost. Mais, ça sera pas pour maintenant pour ma part. J’aimerai déjà retaper les apps YunoHost/Duniter existantes.

2 Likes

Je me suis fait la réflexion ces derniers jours :wink: Même moi je ne la connais pas par coeur :stuck_out_tongue: Je pensais ptet à utiliser un nom de domaine de type financement.duniter.org. Après c’est vrai que mon serveur n’est pas une bête de course. Les instances Diaspora et Peertube qui sont dessus ne sont pas très véloces :confused:

:star_struck: :star_struck: :star_struck:

Salut @Paidge et les autres…

J’ai regardé le code et il y a un truc que je ne comprend pas bien. Pourquoi passer par du php pour générer la barre alors que tout peut être fait dans le navigateur ?

En tant que tel, cela oblige à avoir un serveur apache qui va générer la barre avec les fichiers iframe.php et image.php alors que l’on pourrait se passer d’un serveur en faisant directement une requête sur l’api g1.duniter.fr.
Vous pensez peut-être à faire un cache serveur pour décharger g1.duniter.fr ? Ça peut en parti se remplacer par du localstorage sur le navigateur.

Il vaut mieux faire tout ce que l’on peut sur un navigateur et pas sur un serveur non ?

6 Likes

Je pense que paidge est plutôt expérimenté avec PHP.
Voici la raison pour laquelle c’est fait sur le serveur et pas dans le client (moteur JS) en JavaScript.

1 Like

@yyy a commencé une POC en Javascript, mais il n’a pas été au bout du projet. Je suis entièrement d’accord que passer par un serveur est overkill. Mais cette barre PHP est exemplaire et peux servir de base à une migration en full JS !

1 Like

Comment fait-on pour générer une image directement dans le navigateur ?

J’avais d’ailleurs demandé sur ce fil si quelqu’un savait faire ça (car le besoin est là, clairement). Serais-tu capable de faire ça @ManUtopiK ?

Tu peux utiliser le canvas, mais le mieux c’est de créer un svg ! Le svg peut même s’animer en y ajoutant du javascript dedans ! Using Javascript with SVG

4 Likes