Une page-bot qui crée des images de texte pour discuter en idéoscript

Messages : 276 Date d'inscription : 21/11/2009 Localisation : Chine

Salut l'Atlier !
Voici un projet qui a démarré avec le confinement covid et la decouverte du Toki Pona, un outil en deux morceaux develope par "jan Damaru", David Martin Rubio:

- Un page PHP qui converti un texte en une image, avec choix de police, couleurs et taille. L'originale en Toki Pona est le "Pali Sitelen". Ma version perso est le Hyliabot , ici: http://www.notesdevoyage.com/ftp/Texte/Langues/Hyliabot/

- Un bot sur Telegram qui sert d’intermédiaire dans un canal de discussion pour convertir des requêtes de texte en interrogeant la page PHP ci dessus. Sans sortir de la conversation, l'utilisateur voit apparaître l'image de son texte et clique dessus pour l’intégrer dans le fil de discussion.

Pendant 3 ans j'ai bloque sur l'adaptation du Bot qui demandait de bricoler un peu de Python, et surtout propulser le bot sur un serveur toujours en ligne, susceptible d’être sollicite par les utilisateurs Telegram.

Ce soir je viens de me rendre compte qu'en fait utiliser directement la page-bot marche bien Smile

Il suffit d'y accéder par son explorateur internet de téléphone, créer l'image de sa phrase, la copier, et la coller dans une conversation. Et ce dans n'importe quel messagerie !
Plus besoin d'un bot spécifique a un environnement messagerie, ne besoin de l'avoir dispo sur un serveur.

Cette page-bot a vocation a proposer un maximum d'ideoscripts. Pour l'instant elle propose l'Alfare de Djino, ainsi que mes Larasem, Larafon, Hylien, Alfunanto, Alfunepta, Phono Braille, et d'autres scripts de Zelda: le Gerudo, Sheikah, l'Hylien de Kasuto et celui de Sarinili, le vieux perse, et enfin un script de Toki Pona.

Partagez moi vos polices ici pour les y ajouter ! cheers

Voici le fil Discord associe a ce sujet:
https://discord.com/channels/350328682633494530/498117905230069790

Messages : 6535 Date d'inscription : 28/02/2010 Localisation : France - Nord

J'ai été voir. Je salue l'effort.

Je trouve dommage que la réponse soit donnée dans une autre page avec perte du texte d'origine.
Je pense que la même chose aurait pu être entièrement faite en JS, sans fatalement passer par une technologique serveur (CGI). Oui, la page aurait été plus grosse, mais bcp moins de soucis de prog. À vue de nez, un gros JSON pour servir de BdD, et c'aurait pu fonctionner. J'ai d'ailleurs déjà pratiqué ce genre de choses, sans trop de pb.

Il y a dj un peu de JS :

Code:: function sitelenSin(){
   sitelen=document.getElementById("sitelen");
   sitsrc = "/?";
   inputs = document.forms["myForm"].elements;
   for (i = 0; i < inputs.length; ++i) {
   sitsrc = sitsrc + inputs[i].name +"=" + encodeURI(inputs[i].value) + "&";
   }
   sitelen.src = sitsrc;
}

Code:: function walolipu(e){
   var code = (e.keyCode ? e.keyCode : e.which);
   if (code==0 || code == 32|| code == 13) {
   sitelenSin();
   }
}

Un peu d'aide et quelques exemples auraient été un plus Smile

Je n'ai plus mes codes pour discord.

Quelques exemples (images) ici, eurent été les bienvenus.

_________________
En collaboration : yazik ; en pause : dudyi, ∂atyit
En pause : ditaiska köojame, llîua, diònith, frenkvëss, thialim, (monurpilf), yadios, Epçune !, endietc
Aboutie : suok et lignée pré-mihia-thialim, thianshi, diarrza, uosmigjar (essai : ortogrévsinte, sinywila, SESI, KISSI)
langues parlées: allemand - italien - elko - baragouin de globish

Niluusu kivanu ki-so∂em-korondo-s-uvi gu koyoodnißju. (dudyi) / Midevim iſeet dotſe iJebiriotoẏot éß umowonêyû. (∂atyit)
Je rêve que les humains deviennent les jardiniers de la vie dans le système solaire.

Messages : 276 Date d'inscription : 21/11/2009 Localisation : Chine

Merci Patrick pour ta revue critique du code Very Happy

C'est claire que je ne lui demande pas de miracle, juste de me faire les vignette et je suis déjà super content ! (et le code écrit a moitie en Toki Pona haha, quelle geekerie ultime)
La réponse sur une autre page, je crois que c'est pour le bot Telegram, de façon a ce que la requête puisse tenir sur l'URL, et que la page php renvoie l'image et rien d'autre.
Sur téléphone ça fait passer d'un onglet a l'autre pour copier l'image.

J'aimerais bien pouvoir personnaliser un peu la page principale du formulaire, y mettre de la couleur, et aussi des lien vers de la documentation vers chacune des langues proposées. Et pourquoi pas aussi, intégrer des images pour faire un jolie ambiance de robot ancestral, genre technologie des Anciens. cyclops

Salut Velonzo, pas besoin d'aller voir sur Discord, la page-bot est ici :
http://www.notesdevoyage.com/ftp/Texte/Langues/Hyliabot/

Messages : 6535 Date d'inscription : 28/02/2010 Localisation : France - Nord

Napishtim a écrit:: Merci Patrick pour ta revue critique du code C'est claire que je ne lui demande pas de miracle, juste de me faire les vignette et je suis déjà super content ! (et le code écrit a moitie en Toki Pona haha, quelle geekerie ultime)
La réponse sur une autre page, je crois que c'est pour le bot Telegram, de façon a ce que la requête puisse tenir sur l'URL, et que la page php renvoie l'image et rien d'autre.
Sur téléphone ça fait passer d'un onglet a l'autre pour copier l'image.

C'est vrai que la simplicité est de donner la réponse sur une autre page.
Le mode "console en continu" comme avec l'ancien MsDos ou Unix est plus productif. Tu écris ton texte, la réponse est juste en dessous. Puis tu écris ton texte en dessous de la réponse etc.

Texte1
Image1
Texte2
Image2

etc...

Napishtim a écrit:: J'aimerais bien pouvoir personnaliser un peu la page principale du formulaire, y mettre de la couleur, et aussi des lien vers de la documentation vers chacune des langues proposées. Et pourquoi pas aussi, intégrer des images pour faire un jolie ambiance de robot ancestral, genre technologie des Anciens.

Là, c'est juste du HTML avec du CSS, ce qui n'est pas trop compliqué, si tu ne cherches pas à faire compliqué. Il suffit de savoir ce que tu désires AVANT de coder. La solution la + simple consiste à dessiner sa page (papier+crayon ou logiciel de dessin) avant de mettre la main sur le clavier.

Messages : 6535 Date d'inscription : 28/02/2010 Localisation : France - Nord

J'ajoute au passage qu'on trouve ci et là des générateurs de page web gratuits ou pas chers. On ne fait pas exactement tout ce qu'on veut, mais ça va nettement plus vite ! Il suffit de récupérer les codes (HTML+CSS+JS) avec une petite retouche, et hop, c'est ok.

Perso, j'ai un Dreamweaver at home, mais c'est un peu cher quand même ! Ceci dit, il n'est pas rare que mes pages HTML soient issues directement de Notepad++ (gratuit), car je connais prsq par cœur mes balises et mon JS.

Un peu de tout :
»» https://fr.w3docs.com/snippets/css.html

Pour le CSS, un lien assez pratique avec 8 possibilités :
»» https://fr.w3docs.com/css3-maker/border-radius

Squelette HTML5 :
»» https://www.c2script.com/outils-webmasters/generateur-de-page-html5

Messages : 276 Date d'inscription : 21/11/2009 Localisation : Chine

Merci Patrick pour tes conseils !
Mes (in)compétences informatiques ne me permette que des bidouillages simples sur Notepad++.

Je pense que ce qu'il me faudrait se réduit a 3 modifs sur l'aspect du formulaire:
1- mettre le fond en noir
2- integrer une image PNG en bandeau d'en-tete
3- mettre une zone de texte en dessous des formulaires avec quelques liens URL.

voici le formulaire : http://www.notesdevoyage.com/ftp/Texte/Langues/Hyliabot/includes/form.php

Est-ce que tu ( Rolling Eyes

) saurais comment editer le code pour faire avoir les 3 modif ci dessus ?

Code:: <head>
  <link rel="stylesheet" href="assets/style.css" />
</style>
<script type="text/javascript" src="assets/script.js"></script>
</head>
<body>
<form name="myForm" action="./" method="get" target="_new">
<textarea name="m" class="lp0" placeholder="Your Text Here" rows="3" cols="80" onBlur="sitelenSin()" onKeypress="walolipu(event, this)"></textarea><br/>
<b class='lp'>Size</b><input type="range" min="2" max="50" value="16" class="pokanimi" name="s" onChange="sitelenSin()"/><br/>
<b class='lp'>Text-Color</b><select name="c" class="pokanimi" onChange="sitelenSin()">
   <option value="000000" selected="selected">Black</option>
   <option value="FF00FF">Magenta</option>
   <option value="FF0000">Red</option>
   <option value="FF6600">Orange</option>
   <option value="FFFF00">Yellow</option>
   <option value="00FF00">Green</option>
   <option value="33CC99">Teal</option>
   <option value="00FFFF">Cyan</option>
   <option value="0000FF">Blue</option>
   <option value="9933CC">Purple</option>
   <option value="FFFFFF">White</option>
</select><br/>
<b class='lp'>Back-Color</b><select name="b" class="pokanimi" onChange="sitelenSin()">
   <option value="000000">Black</option>
   <option value="FF00FF">Magenta</option>
   <option value="FF0000">Red</option>
   <option value="FF6600">Orange</option>
   <option value="FFFF00">Yellow</option>
   <option value="00FF00">Green</option>
   <option value="33CC99">Teal</option>
   <option value="00FFFF">Cyan</option>
   <option value="0000FF">Blue</option>
   <option value="9933CC">Purple</option>
   <option value="FFFFFF" selected="selected">White</option>
   <option value="0e1621">Telegram dark</option>
   <option value="313338">Discord dark</option>
</select><br/>
<select name="f" class="alanimi" onChange="sitelenSin()">
<?php
   $data_dir_obj = dir ("plugins");
   while ($listfonts[] = $data_dir_obj->read());
   sort($listfonts);
   $data_dir_obj->close();
   foreach($listfonts as $font)
   {
   if(is_file("plugins/".$font."/params.json"))
   {
   $fontparams = json_decode ( file_get_contents ( "plugins/".$font."/params.json" ) );
   }
   else continue;
   if($font=="linjapona") $select=" select='select'";
   else $select="";
   print '<option value="'.$font.'" $select>'.$fontparams->name.'</option>'."\n";
   }

?>

</select><br/>
<br/>
<input type="image" src="./?m=+" id="sitelen"/>
</form>

</body>

Moi avoir pige que quick de l'inter de PatrikGC.

_________________
En collaboration : yazik ; en pause : dudyi, ∂atyit
En pause : ditaiska köojame, llîua, diònith, frenkvëss, thialim, (monurpilf), yadios, Epçune !, endietc
Aboutie : suok et lignée pré-mihia-thialim, thianshi, diarrza, uosmigjar (essai : ortogrévsinte, sinywila, SESI, KISSI)
langues parlées: allemand - italien - elko - baragouin de globish

Niluusu kivanu ki-so∂em-korondo-s-uvi gu koyoodnißju. (dudyi) / Midevim iſeet dotſe iJebiriotoẏot éß umowonêyû. (∂atyit)
Je rêve que les humains deviennent les jardiniers de la vie dans le système solaire.

Messages : 6535 Date d'inscription : 28/02/2010 Localisation : France - Nord

Napishtim a écrit:: Je pense que ce qu'il me faudrait se réduit a 3 modifs sur l'aspect du formulaire:
1- mettre le fond en noir
2- integrer une image PNG en bandeau d'en-tete
3- mettre une zone de texte en dessous des formulaires avec quelques liens URL.

J'y vais de tête :

Fond noir --> 000=noir pur, 111=très très noir, 222=très noir
Attention, si le fond est noir, il faut changer la couleur de l'écriture ! (color=#fff <-- blanc)

Code:: <head>
   <style>
   body {
   background-color: #000;
   color: #fff;
   }
   </style>

Image PNG

Code:: <body>
<img href="monimage.png" />

Texte + liens

Code:: </form>
<p>Mon texte en dessous du formulaire</p>
<ul>
<li><a href="page01.html">Lien 1</a></li>
<li><a href="page02.html">Lien 2</a></li>
</ul>

Je pense que tu comprendras où insérer ces codes Smile

Messages : 6535 Date d'inscription : 28/02/2010 Localisation : France - Nord

Velonzio Noeudefée a écrit:: Moi avoir pige que quick de l'inter de PatrikGC.

Quoi toi pas piger ?
Ça y en être programmation HTML+CSS

Messages : 276 Date d'inscription : 21/11/2009 Localisation : Chine

Merci ! Je teste ce weekend

Messages : 6535 Date d'inscription : 28/02/2010 Localisation : France - Nord

Napishtim a écrit:: Merci ! Je teste ce weekend

Bon test !
Si tu as d'autres questions, n'hésite pas Smile

Messages : 276 Date d'inscription : 21/11/2009 Localisation : Chine

Merci, ça marche bien avec les 3 point !

Messages : 6535 Date d'inscription : 28/02/2010 Localisation : France - Nord

Napishtim a écrit:: Merci, ça marche bien avec les 3 point !

Tant mieux Smile

Deux solutions pour une amélioration :
1 - Afficher le résultat dans la même page, en dessous du formulaire.
2 - Afficher le résultat dans une nouvelle page, tout en conservant celle du formulaire.

» Idéoscript zunais
» Idéoscript ou idéographie ?
» Avez vous déjà créé une idéolangue tonale ?
» Leno gi-nasu, une langue crée par le mexicain Andrés de la Cruz Michel
» Une jeune youtubeuse finlandaise crée une langue pour Star Wars