ViĞnette, création d'affichettes pour Ğmarchés

Bonjour !

edit - ViĞnette 1.0 est sortie, avec un gros travail de traduction !


J’ai déjà fait l’annonce de ViĞnette sur le forum d’en face il y a deux mois, mais je profite de la sortie d’une nouvelle version pour l’annoncer ici. J’en suis assez fier :slight_smile:

vignette

ViĞnette est une petite appli web, qui sert uniquement à générer des affichettes pour les Ğmarchés. Elle est basée entre autres, sur le travail de @tortue concernant les paperwallets. Je crois que c’est la première appli « grand public » qui affiche le checksum.

C’est une appli statique. Il suffit de télécharger la version et la décompresser sur son serveur pour l’installer. (je rencontre un bug pour l’utilisation en local). Comme mon hébergement est assez limité, n’hésitez pas à l’installer où il vous semble bon :slight_smile:

6 Likes

Yo Mato, j’adore.

Je t’ai rajouté dans mon site, rubrique apps du crevard :

@jytou j’ai mis aussi watchit et resync !

3 Likes

Salut !

J’ai le plaisir de vous annoncer deux versions de ViĞnette pour le prix d’une, pour prendre en compte des remarques d’utilisateurs.

Ajouts :

  • aide concernant la taille de l’image
  • option « carte de visite » qui affiche la clef publique avec une fonte plus grosse:
    • en format réduit 4…4 caractères
    • sans checksum (pour le moment) pour ne pas perturber les utilisateurs.
  • affichage de l’URL du générateur :
    • soit en bas si l’URL est courte avec la version 0.10.1
    • soit sur le coté si l’URL est longue, avec la 0.10

C’est disponible à l’adresse :
https://g1cotis.fr/vignette

2 Likes

Hi!

I’d like to work on the localization of ViGnette. I’ve opened an issue:

Just waiting for your guidance :wink:

Thanks!

Hi ! It is very nice of you !

I just merged the ‹ dev › branch into ‹ master › since many improvements happened there. Be sure to pull last changes on master.

As you can see in the code, all strings are hardcoded in french. I have never implemented i18n. I don’t think it would be really difficult, but it is not in my top priorities for coming months.

So you have two choices :

  • KISS (my favourite) : fork the repo, translate all strings hard-coded, serve it for each language you wish. I will add links to the french homepage pointing to foreign language pages. When creating a real i18n system (see below) I shall get all translated strings from foreign language HTML/JS files

  • Use an i18n system (I would go for something like static-i18n - npm) and make a MR. I don’t think I will accept the MR as is: as a maintainer, I want to understand the build system, and there is no better way for this than writing it myself

1 Like

Thank you! I’ll go for 1) The KISS option :slight_smile: Probably my fork enable some languages: Catalan, Spanish and English at least.

I’ll be on touch with you!

Cheers

Just starting the fork:

https://vignette.girala.net/

1 Like

By the way, @matograine , what are this code for?

    //---- main script for image generation ----
    const CREATOR_PUBKEY = "TaJGgFayeGBouUNJcUPwvGTQWxh9iz4ghDGD887ZTSe";
    const CREATOR_PUBKEY_CK = "TaJGgFayeGBouUNJcUPwvGTQWxh9iz4ghDGD887ZTSe:EsZ";

And what is the difference between the first and second line?

Well, let people give me Ğ1 if they think ViĞnette is useful. Some already did :+1: . When you create a vignette, there is a button on the side allowing to copy this pubkey.

This account is a Ğ1cotis that spreads the money to three other accounts :

  • me
  • tuxmain for an alternate server
  • another Ğ1cotis account for many crowdfunding
  • … I will add you as soon as one translation is available.

The checksum :EsZ

  1. how is it used on ViGnette? Is there any code where is it used??

  2. how have you generate it?

Ps I’m going to do my donation right now :slight_smile:

I never use the checksum alone, always with the pubkey.

  • When people give a pubkey as input, I ask a confirmation if they input this one, just to make sure it is no mistake. (scr/main.js l.124)

  • If, after generating a vignette, they want to make a donation, I display this pubkey and copy it to the clipboard. (scr/main.js l.431)

$ silkaj checksum TaJGgFayeGBouUNJcUPwvGTQWxh9iz4ghDGD887ZTSe
TaJGgFayeGBouUNJcUPwvGTQWxh9iz4ghDGD887ZTSe:EsZ

@arbocenc I just thought that you might want to translate the Ğ1 logo with « Monnaie libre acceptée ».

I wrote it in SVG (displays well in browser only…). So it is pretty easy to modify the strings, and change the offset of the text to keep it centered (property ‹ StartOffset › od the ‹ textPath › tags).

And export it to PNG afterwards.

SVG code
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="-1.25 -1.25 2.5 2.5">
	<defs> 
 	  	<!-- path for upper text-->
        <path id="uppertext" fill="none" stroke="red" stroke-width="0.1"
        d="M -3.5,0 A 3.5,3.5 0 0,1 3.5,0" />       
	    <!-- path for lower text-->
        <path id="lowertext" fill="none" stroke="red" stroke-width="0.1"
        d="M -4.3,0 A 4.3,4.3 0 0,0 4.3,0" />
    </defs>
    <mask id="hole">
		<rect x="-256" y="-256" width="512" height="512" fill="white" />
		<circle r="4.8" cx="0" cy="0" fill="black"/>
	</mask>
	<style>
	    .text { font: bold 1.1px sans-serif; }
	</style>
	<g id="gbreve" transform="scale(0.25)">
	  	<circle id="donut" r="5" cx="0" cy="0" fill="black" mask="url(#hole)"/>
	  	<circle id="centercircle" r="3.1" cx="0" cy="0" fill="black"/>
		<path id="g" d="M 0.7071,0.7071 A 1,1 0 1,1 0.866,-0.5 L 1.7321,-1 A 2,2 0 1,0 1.4142,1.4142 l 0.3536,0.3536 v -1.4142 h -1.4142 z" fill="white"/>
		<path id="breve" d="M 1,0 h 1 A 2,2 0 0,0 -0.5176,-1.9319 L -0.2588,-0.9659 A 1,1 0 0,1 1,0 z" transform="translate(0 -3.14159) scale(0.5) rotate(142.5)" fill="white"/>
		<circle cx="0" cy="2.5" r="0.3536" fill="white"/>

        <text id="test-monnaielibre" class="text" fill="black">
            <textPath href="#uppertext" startOffset="0.2">Monnaie libre Ğ1</textPath>
        </text>     
        <text id="test-acceptee" class="text" fill="black" >
            <textPath href="#lowertext" startOffset="3.8">Acceptée</textPath>
        </text>
	</g>	
</svg>
1 Like

Hi!

Vignette is already available for some languages here:

https://vignette.girala.net

Then, I agree be added to G1cotis account… I should change some public keys, because right now I’m using 2 keys: yours and mine, depending on the page…

Do you agree with it?

1 Like

This is a great work, thank you very much ! :partying_face:

I add your key fnjD1EuHFeJ5V8TTqKXXxPrvBPP2R7gRWfqR2FtrKB8 to the Ğ1Cotis account so it will be used for next iteration (tell me if you prefer another). I have some troubles on my Ğ1cotis instance. I just set it back up (hopefully). I will transfer 25% of the gifts to your address.

Note : It seems you did not translate some error messages.

image

1 Like

My fault! I didn’t realize these strings exist :-p

I’ve opened an issue: Error #1154: Els missatges d'error no estan traduits - Vignette - Calbasi.net: gestor de projectes

I think it won’t be very difficult to do.

But it would be really nice if I can “extract” the strings from the code and use l10n files… I have no experience with it, but it would be exciting to work in a more professional way :-p I guess it is not very difficult to achieve…

Hi @arbocenc !

I have written a build script for translation and copied your work. The result (branch dev) can be used at https://g1cotis.fr/vi, which is the address I use to expose unfinished work on viĞnette.

I will add the strings for JS strings, but 3 translations are still missing in CA:

"MAIN_PAGE_FORM_RECOMMEND_IMAGE_SIZE": "Taille recommandée : 900x900 px",
"FORM_HELP_TRANSFORM_G1": "'_G_', '_g_', 'G1' et 'g1' seront remplacés par 'Ğ', 'ğ', 'Ğ1 et 'ğ1'.",
"FORM_HELP_CHECKSUM": "Avec ou sans checksum."

Thanks a lot :heart: for your work that gave me motivation on this subject. Will you have time to translate the missing strings, or would you like me to ask on the spanish forum ?

Now , the translation of ViĞnette will be much easier !

Great!

About the strings without translation, here you are:

Catalan:

"MAIN_PAGE_FORM_RECOMMEND_IMAGE_SIZE": "Mida recomanada : 900x900 px",
"FORM_HELP_TRANSFORM_G1": "'_G_', '_g_', 'G1' i 'g1' seran reemplaçades per 'Ğ', 'ğ', 'Ğ1 i 'ğ1'.",
"FORM_HELP_CHECKSUM": "Amb o sense checksum."

Spanish:

"MAIN_PAGE_FORM_RECOMMEND_IMAGE_SIZE": "Tamaño recomendado : 900x900 px",
"FORM_HELP_TRANSFORM_G1": "'_G_', '_g_', 'G1' y 'g1' serán reemplazadas por 'Ğ', 'ğ', 'Ğ1 y 'ğ1'.",
"FORM_HELP_CHECKSUM": "Con o sin checksum."

If you prefer a merge request, just tell me :-p

By the way, there is an issue with your translation, Catalan language code is NOT « cat », but « ca ». Could you change it on your code?

ViĞnette 1.0 is out !

:champagne: :tada:

I finished the build script, and published a new release. Now ViĞnette is available in four languages at ViĞnette. :partying_face:

I think this is worth a 1.0 tag !

A build is also available on the gitlab, with FR as default (landing) language. Anyone can build a website with their prefered language as default page, please refer to the README.

Thanks again @arbocenc for the translation.
Thanks also @tuxmain, I copied some code you wrote and it makes the crypto lib 200x lighter. (3k0 vs. 600 ko).
And thanks @me :wink: for the build script. I hope I will see Italian or German translations soon :smiley:

Feel free to test !

4 Likes

J’ai fait quelques corrections à la traduction espagnole (dont des problèmes d’encodage du genre é) dans un fork, mais je n’ai pas l’autorisation de faire une PR.

L’image contient « Acceptamos G1 » mais c’est plus correctement « Aceptamos » avec un seul C.

Content que mon implémentation de la checksum en JS serve à quelque chose !

1 Like

Salut @matograine le site ViĞnette n’est pas fonctionnel.
Je l’avais recommandé alors on utilise le site d’Attilax ViĞnette qui lui, est fonctionnel.