Conseils SVG-PHP pour un novice

[Qubik]

Bonjour à toutes et à tous,

J'ai appris (il y a 10 ans) la façon rudimentaire pour créer un site WEB à partir de zéro. Reste que je n'ai plus utilisé ces compétences (je suis graphiste/DA papier à 100%), et puis, les changements dans le domaine WEB sont fulgurants, et mes souvenirs sont bien effacés.

Or, je veux créer aujourd'hui un site/application internet qui dessine, selon les donnée saisies, un schéma technique vectoriel aux dimensions personnalisables. J'ai commencé donc à créer la page/appli Web (et je précise que je dispose des algorithmes, car j'avais réalisé ce projet en VisualBasic + Excel, ça marche d'enfer et c'est très utile, d'ou mon idée de l'application Web).

Je suis arivé à concevoir la structure HTML, par un menu lateral avec ses onglets ouvrables bourrés de cases et données à remplir, et un grand espace vide à côté pour placer mon dessin, vectorien SVG. Et jusque là tout va bien.

Reste la question sur la façon de créer le dessin vectoriel SVG. Ne voulant pas dévoiler tout le code et les calculs soujacents pour la création du SVG avec du JS "frontend", j'ai pensé de le générer un dessin en SVG par du code PHP. Et ça marche, pour le moment limité à un simple rectangle d'essai qui se redimensionne. Reste que la méthode est plutôt fastidieuse par PHP, et me semble bien que par NodeJS soit pareil.

En cherchant, je suis tombé sur la bibliothèque "svg.js", qu'efectivement semble plus maniable, mais cette bibliothèque fonctionne aussi côté serveur (soit en/ou comme NodeJS) ?.

Et encore une question, comment on installe cette bibliothèque (ou une autre) sur mamp pour pouvoir la tester (et successivement sur le serveur..).

Franchement je n'y connais rien à ce niveau et je ne veux pas non plus m'embarquer dans des études de programmation et getion de site et bibliothèques encore plus complexes que la solution PHP pour générer du SVG, solution certes fastidieuse, mais que je maitrise et comprends ...

Enfin, si quelqu'un peut me donner un conseil simple, avant de m'engager dans un "total inconnu", je lui en serais gré.

Merci d'avance et bonne journé !
-----

[umfred]

je suis tombé sur celle-ci de mon côté https://github.com/sharonchoong/svg-exportJS où est décrit comment l'"installer" (on insert une ou deux lignes vers le cdn du code pour avoir une version sûr en ligne ou vers le chemin de ton site où tu auras copier le fichier
Pour svg.js, c'est le même principe pointer vers le cdn ou vers le fichier téléchargé (cf la page d'installation https://svgjs.dev/docs/3.0/installation/ )

Je pense que ces scripts ne seront que du côté client

[Ikhar84]

Tu as deux solutions :
1. Générer une image en PHP (jpg c'est sûr en natif, svg sûrement).
Le code est pur backend et tes calculs resteront à l'abri.

2. Générer l'image côté front, en natif avec Canevas ou utiliser une librairie "graphique" JS quelconque (qui utilisera sûrement Canevas).
Dans ce second cas ton code JS (ou la librairie) utilisera des variables JS dont les valeurs seront calculés en PHP dans le back et "injectées" dans un élément SCRIPT avant l'appel de tes fonctions JS ou l'initialisation ou l'appel à la librairie choisie.

Il te suffit de coller le code de la librairie dans un dossier de ton serveur (comme js/ ou vendor/libunetelle, par exemple), ou lier une source cdn comme script externe...

[Qubik]

Merci @umfred,

J'avais lu en effet ce gebre procédé (et merci de me donner le lien sur cette bibliothèque "sgvExportJS" que je ne connaissez pas).
Reste que comme tu le dit, le script JS généré l'est du côté client, chose qui me dérange, car du coup, on peut facilement copier et reproposer ailleurs mes "préciuex" algorithmes. Donc que dire, dans ce cas, je préfère rester sur le PHP... qu'au déla du rectagle d'essai, va devenir d'un compléxité peu maniable qui me suer de peur...

[A voir en vidéo sur Futura]

[Qubik]

Merci à toi aussi @Ikhar84,

Tu me confirmes (malheureusement) que les solutions ne sont pas légion.
Il n'y a pas mille pour créer un SVG côté serveur, et les coder en PHP n'est pas pire qu'en JS.

Quoi qu'il en soit, si je comprends bien, la solution 1 (l'actuelle, totalement en backend), pourrait être substituée par la 2 (backend pour les calculs et frontend pour la créationdu du SVG).
Chose bien intéressante, mais à condition que "Canvas" soit plus simple à manipuler avec mes dizaines de traits et courbes variables, sans compter sur l'intallation des biblio's, et à ce niveau je ne sais absolument pas comment m'y prendre pour les rendre disponibles, soit dans MAMP que côté serveur.

Peut-tu alors (courtoisement) me donner quelques renseignements ? Renseignements très concis ! Basiques ! Et le plus important de tous est : le jeu vaut-il la chandelle ? Le pire enemi du compliqué c'est la complication (inutile).

Et puis je suis certes novice, mais tout de même familier au codage, à l'anciènne (quand Windows n'existait même pas et le MsDOS était "le système")... La logique des algorithmes est toujours la même, il suffit d'écrire dans la langue machine du XXI siècle, et c'est ce que je fais actuellemnt, non sans difficulté : sono una pippa ! (Comme on dit en italien, une langue parmi les autres).

[Ikhar84]

Sur le lien que je t'ai donné plus haut, il.y a des "tutos" et exemples de code.
Essaies d'abord par un document web très simple..
Pas de PHP...

Utilises l'élément Canevas et dessines quelques lignes... (chemins) simples...

https://developer.mozilla.org/fr/doc...ntext2D/lineTo

Tu devrais retrouver ta logique VB...

Dans un second temps, le point de départ et d'arrivée de tes chemins seront stockés dans des variables...

Tu pourras ensuite jouer avec les couleurs.

On verra plus tard le côté PHP si tu le souhaites...

[Qubik]

Bonjour Ikhar84
et merci pour ces conseils et ce lien.

Mais j’ai pensé à un système bien simple, rapide, et qui tient sur quelques lignes de code (à voir).

Cela dépends bien du dessin dont je te parle (chose que tu ne pouvais pas savoir).
En effet, ce dessin est basé sur trois typologies, identiques, si ce n’est que selon les choix de l’utilisateur, éléments qui le dessinent changent de taille, position, et quelque fois ne sont pas visibles. Ces éléments à redimensionner en plus, ne sont pas plus d’une vingtaine par dessin.

Or, les attributs des “class” SVG sont modifiables par CSS. Et j’ai fait un essais sur un simple rectangle ' "class="rectangleX" ' avec un code CSS type :

.rectangleX {
opacity: 0.75;
stroke: #8af704;
}

...et ça marche.
En sachant que je peux insérer des variables dans le CSS, je pourrais alors injecter mes valeurs calculées en PHP, pour changer une à une les dimension ou la position (outre que la visibilité) de chaque figure SVG, en leur attribuant des noms de class du genre “forme01”, “forme02”, ... jusqu'à "forme20”, (la dernière de la collection).

Cela dit, et en considérant que CSS permet aussi l'utilisation de variables de type array avec les boucles For-Each, je pourrais aussi appeler ces données en les récupérant dans un tableau SQL qui contiendra toutes ces donnés recalculées en PHP, tableau à deux dimensions, avec des lignes/colonnes du genre :

"Nom de CLASS" \ "Origine X" \ "Origine Y" \ "Longueur" \ "Largeur" \ etc...

Comme tu peux observer ici, la première colonne contient le "nom de CLASS", car ainsi faisant (si possible) je n'aurai même pas besoin d'ecrire en CSS chaque "class" ligne par ligne, car le nom même de la class sera récupéré dans le tableau, nom qui corresponds au figures "classés" du SVG de base, SVG présent dès le début sur la page WEB avec des valeurs par default.

Il suffirait alors d'une simple boucle dans le code CSS pour modifier les éléments du SVG quand l'utilisateur valide ses données modifiées (comme la taille, visibilité, etc)... à condition de pouvoir utiliser une variable CSS aussi pour définir le nom d'une "class", du genre :

.var(élément X, de la colonne "Noms de CLASS" de mon array) {
opacity: var(--array(x,x));
stroke: var(--array(x,x));
}

(Voir cette discussion : https://stackoverflow.com/questions/...-array-of-data)

C'est juste un exemple (je ne connais pas encore la syntaxe des variables CSS), je réfléchis seulement à la procédure, la syntaxe peut attendre.
Si ce n'est pas faisable (le nom de "class" variable) que dire : ou je liste une à une les 20 "class" nommées dans le CSS, ou peut-être, un petit coup de JS le permettra ? (et là je coince...).

Enfin, j'espère d'avoir bien expliqué ce que cogite (et ce n'est pas évident ).

Qu'en penses-tu/pensez-vous ?

[Qubik]

Que je suis bête et cérébral...

Tout ce remue ménage est inutile, il me suffit de faire la même chose que maintenant en concatenant des "string" pour créer un SVG dans le code HTML (comme je vais aujourd'hui, avec ces variables que je récupère sur le "input case" du HTML). Seule bonne idée, celle de les trraiter de manière it

S'agissant de 3 seuls dessin de base composés d'environ 20 figures, pas compliqué d'assembler ces instructions en PHP... donc, les modifier en CSS ne sert à rien, mise à part la contemplation de la "béauté" d'un code fait d'un seul algorithme dans une boucle...

Ne considérez pas ce que je viens d'écrire. Et merci pour tous ces conseils, vous êtes gentils et compétents.
Du reste, je ne me priverais pas de retourner si nécessaire.
Bonne soirée !

[Qubik]

Excusez-moi pour les quelques erreurs d'orthographe, j'ai écrit rapidement sans trop me relire (et je n'ai pas pu me corriger, car au-delà de 5 minutes ce forum l'interdit).
De plus, sans blâme, j'ai commencé à apprendre cette belle langue française à l'âge de 33 ans. Il y a longtemps certes, mais tout de même...

Je reviendrai vers vous pour vous montrer mon « œuvre » et en faire un peu de publicité, car il s'agit d'un outil qui n'existe pas encore sur le Web, bien qu'il soit très utile (d'où la nécessité de préserver une partie de mon code et de mes calculs, qu'exposés en « frontend », risquent d'être copiés d'un coup de souris).