ClicMenu : A la campagne

[mothsart]

Une petite illustration que j'ai griffonné hier soir https://cloud.indie.host/s/aepmEK7Ca6w2z3c
J'ai fait essayer ton jeu à mes enfants et ils ont compris sans explications (ou quasiment) donc mission accompli en terme de d'ergonomie !

[Philippe Dpt35]

Super !

L'application association d'images est quasiment terminée, si l'on excepte l'habillage, mais qui devrait demander beaucoup moins de travail.

Dans l'original, il s'agit s'afficher des tableaux sur des panneaux d'exposition, et le décor est minimaliste.
Je prévois plutôt de présenter ça comme des images à classer dans des albums.

En revanche le problème que ça pose est celui des images à classer. Dans chaque application (il y a deux applications identiques), il y a 5 séries de 15 images, soit 75 images par application.

J'ai copié les images originales, mais il faudra peut-être tenter de contacter l'auteur pour lui demander son autorisation.

[mothsart]

Surement pas grand chose : à la campagne ne marche pas sur chrome. Si on choisi "nombre de 1 à x", le bouton "commencer" reste disabled. Sans doute un soucis de javascript à ce moment précis non compatible.

[Philippe Dpt35]

Je vais regarder ça, mais comme sous PrimTux on utilise Firefox, c'est lui que je privilégie.

[Philippe Dpt35]

Surement pas grand chose : à la campagne ne marche pas sur chrome. Si on choisi "nombre de 1 à x", le bouton "commencer" reste disabled. Sans doute un soucis de javascript à ce moment précis non compatible.

C'est curieux, car il fonctionne parfaitement quand je suis en local, mais effectivement pas lorsque je lance depuis un site distant !

[Philippe Dpt35]

En fait j'avais un problème de cache. Là ça fonctionne. Comme il y a certainement eu des modifications depuis que tu as testé, peux-tu revérifier si ça fonctionne effectivement maintenant (après avoir vidé le cache !) ?

[mothsart]

Oui, ça fonctionne bien sur chrome.

[mothsart]

Un petit aperçu en milieu de parcours : https://cloud.indie.host/s/QbCr7YfDi9A7PMZ
Cette fois, j'ai essayé de me chronométrer.
30 minutes de croquis et 5x30 minutes sur inkscape (je fais des sessions de 30 minutes : ça me force à en faire le plus possible en un temps record sans m'attarder sur les détails (mon principal défaut) et sans faire des sessions de graphisme trop longues. (c'est vite lassant, je pourrais pas être graphiste à 100%)
Si je termine en 5h (ce qui me semble bien optimiste) : je pourrais dire qu'il faut 10 fois plus de temps à illustrer qu'à faire un croquis.

[Philippe Dpt35]

C'est super !

C'est sûr que l'adaptation des applications clicmenu demandera beaucoup de travail.

En ce qui me concerne, n'étant plus en activité, je n'ai pas de contraintes de temps. Je fais ça à mon rythme, par intérêt intellectuel. Malheureusement je n'ai pas de compétences en graphisme. On devrait bien pouvoir trouver des personnes qui aiment bien le graphisme et les outils graphiques pour les illustrations ! On peut tenter un appel à volontaires !

D'un point de vu rationnel, il faudra étoffer l'équipe de développement si l'on veut avancer ! Maintenant, acceptons de faire ce qu'on peut comme on peut. C'est toujours mieux que rien !

J'ai quasiment terminé l'application "Au jardin", qui est structurellement identique à "A la campagne": des légumes à planter dans 3 jardins. Mais je vais en profiter pour travailler sur une fonctionnalité supplémentaire: laisser l'objet déplacé à l'endroit où la souris l'a lâché.

Avec la deuxième application d'associations d'images qui ne demande qu'un travail de récupération et nommage des images, cela en fait déjà 4 de pratiquement terminées en dehors du graphisme. Et je ne suis que débutant en développement javascript, c'est donc plutôt encourageant.

Plus j'avancerai, plus j'aurai d'outils à disposition, et plus vite je produirai !

[Philippe Dpt35]

Voici l'application terminée avec la mise en place du graphisme réalisé par mothsart:
https://www.de-bric-et-de-broc.fr/test/a...pagne.html

C'est normalement du complet responsive.

J'attends vos retours pour les bugs éventuels, et les propositions d'amélioration.

[mothsart]

L'image est étiré sur firefox et y'a des soucis de positionnement sur chrome (au drag and drop).
Comme ça, je dirais que c'est parce que tu n'as pas de noeud parent avec la propriété "display: flex;".

[Philippe Dpt35]

Du coup là je bute !
J'avais défini la taille de l'image de fond à 100% en largeur et hauteur sous Firefox, ce qui me permettait de positionner les éléments relativement à l'élément conteneur de l'image de fond. Cela conduit effectivement à une déformation sous Firefox, mais acceptable pour occuper tout l'écran.

Chrome respecte quand à lui les proportions de l'image, ce qui fait que les éléments qui sont positionnés par rapport à l'élément conteneur de l'image ne le sont plus par rapport à l'image.

Et je ne vois pas comment positionner les éléments par rapport à l'image telle qu'elle est affichée, et non par rapport au conteneur de l'image !

As-tu des pistes à me proposer, mothsart ?

[Philippe Dpt35]

PS: je précise que, par souci de facilité, j'ai travaillé sur l'image entière. Il reste bien entendu la solution de la découpe des parties, et là je vois comment faire.

Donc ma question porte sur la solution de facilité, en conservant l'image entière sans découpe !

[Steph]

C'est bête mais une iframe imposant un 1024x768 ne suffirait pas?
Sinon j'aime bien, peut-on avoir un tux qui sourit quand on a bon dans la popup? Je mettrais la consigne en jaune en gras et sur 2 lignes avec l'info de suppression sur la 2ème ligne.

[Philippe Dpt35]

@Steph:
as-tu une adresse où récupérer des images de tux souriants ?

[Steph]

Dans omnitux il y en a un paquet, je les avais récupérés + d'autres pour Eiffel, regarde dans /usr/share/pixmaps

[Philippe Dpt35]

Pas vu de clipart satisfaisant dans /usr/share/pixmaps.

Sinon, j'ai trouvé ça sur le Net:
https://openclipart.org/detail/182875/pinguin
https://openclipart.org/detail/170140/li...ny-penguin
https://www.opendesktop.org/s/Cliparts/p/1102372/

Qu'en pensez-vous ?

[mothsart]

As-tu des pistes à me proposer, mothsart ?

Sans grande réflexion, je pense que rajouter ça devrait déjà bien te décoincer :

Code :

#zone-exercice {
...
background: url("img/fond.svg") no-repeat center center fixed;
    background-size: auto;
background-size: cover;
}

Pour plusieurs projets que j'ai réalisés, j'ai carrément inclus le svg dans mon html (https://mothsart.github.io/labo/frontend/shootingstand/ par ex) car ça peut être vraiment un casse-tête de bien positionner du html avec du svg.

C'est quand même bête de faire du vectoriel et en définitive finir par un truc qui pourrait être une bête image.
Si déjà on fait du neuf, faut faire les choses bien.

Pour les cliparts, les 3 sont bien avec une préférence pour le 1er.

[Philippe Dpt35]

C'est quand même bête de faire du vectoriel et en définitive finir par un truc qui pourrait être une bête image.
Si déjà on fait du neuf, faut faire les choses bien.

C'est moi qui ne maîtrise pas suffisamment le svg pour en exploiter les possibilités.
Je suis preneur de tout lien vers des infos utiles pour ce faire !

[Philippe Dpt35]

Sans grande réflexion, je pense que rajouter ça devrait déjà bien te décoincer :

Code :

#zone-exercice {
...
background: url("img/fond.svg") no-repeat center center fixed;
    background-size: auto;
background-size: cover;
}

J'avais essayé des choses dans ce sens, mais cela tronque le bas ou la droite de l'image selon la taille de la fenêtre.
Il y aura donc un compromis à faire. Sauf si j'apprends à mieux exploiter le svg !

[mothsart]

La doc sur le svg + html + css est pas forcément évidente à trouver.

J'avais effectivement effectués plein de tests pour mon éditeur de svg et la seul solution viable que j'avais trouvé était d'inclure le svg dans le html :
Tes animaux doivent être dans le svg (si il faut, tu peux remettre des éléments html dans du svg, comme ici : https://mothsart.github.io/labo/frontend/shootingstand/) également et tu peux faire ton drag and drop directement sur un noeud du svg.

Je vais néanmoins demander conseil à des collègues spécialisés dans le front si ils ont une astuce...

[Steph]

C'est quand même bête de faire du vectoriel et en définitive finir par un truc qui pourrait être une bête image.
Si déjà on fait du neuf, faut faire les choses bien.

Mais je n'ai pas écrit ça dans ce fil :dry:

[Philippe Dpt35]

C'est quand même bête de faire du vectoriel et en définitive finir par un truc qui pourrait être une bête image.
Si déjà on fait du neuf, faut faire les choses bien.

Mais je n'ai pas écrit ça dans ce fil :dry:

Je me disais bien aussi que je ne me souvenais pas d'avoir lu ça.
C'était dans quel contexte ?

Mais ça n'enlève rien à la pertinence de la remarque dans ce contexte.
Mothsart a dû indiquer ça pour que je ne risque pas de me reposer sur mes lauriers ! :lol:

[mothsart]

Oulala : j'ai pas fait exprès. Mon objectif n'était pas d'usurper l'identité mais de répondre à :

C'est bête mais une iframe imposant un 1024x768 ne suffirait pas?

Sinon, après concertation avec un collègue, je pense avoir la solution Philippe. Je vais récup ton dépot et te faire un pull request. ça sera plus simple.

[Philippe Dpt35]

Il faut que tu prennes la branche "habillage", mothsart, pour avoir la mise en place de ton graphisme.