Vectoriel : besoin de conseils
LeChatNoir
Membre, Modérateur
Salut !
Je suis en train de cogiter sur le futur de mon appli.
Comme certains le savent, ClimbingAway est un annuaire des sites d'escalade du monde entier.
Ce que nous n'avons pas, ce sont les topos. Les topos, ce sont des descriptions des secteurs sur un site d'escalade, avec pour chaque secteur, les voies, leurs cotations, etc...
En France, nous nous interdisons pour l'instant de fournir ces topos d'un point de vue éthique. En effet, les topos sont rédigés par les équipeurs et c'est leur gagne pain.
Par contre, en espagne, la philosophie est différente et la plupart des topos sont gratuits. Donc je réfléchis à un système permettant de les gérer dans l'appli.
La plupart du tps, un topo ressemble à ça : http://daniandrada.b...01_archive.html
Je vois plusieurs problèmes ici :
=> une image en fond : lourd en poids et n'apporte pas grand chose...
=> les infos en sur-impression, lorsquelles sont incluent dans l'image, sont pas très lisibles.
/xd-laugh.gif' class='bbc_emoticon' alt='xd' /> ! Idée ! /xd-laugh.gif' class='bbc_emoticon' alt='xd' />
"L'autre" plupart des topos/smile.png' class='bbc_emoticon' alt=':)' /> ressemblent à ça : http://www.escalade-...topo_vovray.htm
Et là ! Tilt ! Je me dit : "Voilà ce qu'il faut faire !"
Du vectoriel !
Ca pèsera rien du tout et ça sera facile à afficher.
Mais voilà . Comment ?
J'ai trouvé des classes pour facilement lire du SVG et l'afficher sur écran sous iOS. Mais pas d'interactivité là dedans...
Je cherche donc un moyen :
=> de retracer facilement en vectoriel et schématiquement, un topo
=> d'indiquer sur les lignes des voies que la zone est "touch sensitiv"
=> si l'utilisateur "tap", ça affiche le détail de la voie.
Je pensais au début à Illustrator pour "fabriquer" les topos mais l'aspect "zone sensibles" ne pourra pas être géré...
Du coup, je me dit qu'il va peut être falloir que je me fabrique une appli pour ça mais ça me parait compliqué.
Je vous expose donc tout ça pour voir si l'un d'entre vous a une idée plus lumineuse...
Merci ! Désolé de la longueur du post.../ph34r.png' class='bbc_emoticon' alt='' />
Je suis en train de cogiter sur le futur de mon appli.
Comme certains le savent, ClimbingAway est un annuaire des sites d'escalade du monde entier.
Ce que nous n'avons pas, ce sont les topos. Les topos, ce sont des descriptions des secteurs sur un site d'escalade, avec pour chaque secteur, les voies, leurs cotations, etc...
En France, nous nous interdisons pour l'instant de fournir ces topos d'un point de vue éthique. En effet, les topos sont rédigés par les équipeurs et c'est leur gagne pain.
Par contre, en espagne, la philosophie est différente et la plupart des topos sont gratuits. Donc je réfléchis à un système permettant de les gérer dans l'appli.
La plupart du tps, un topo ressemble à ça : http://daniandrada.b...01_archive.html
Je vois plusieurs problèmes ici :
=> une image en fond : lourd en poids et n'apporte pas grand chose...
=> les infos en sur-impression, lorsquelles sont incluent dans l'image, sont pas très lisibles.
"L'autre" plupart des topos
Et là ! Tilt ! Je me dit : "Voilà ce qu'il faut faire !"
Du vectoriel !
Ca pèsera rien du tout et ça sera facile à afficher.
Mais voilà . Comment ?
J'ai trouvé des classes pour facilement lire du SVG et l'afficher sur écran sous iOS. Mais pas d'interactivité là dedans...
Je cherche donc un moyen :
=> de retracer facilement en vectoriel et schématiquement, un topo
=> d'indiquer sur les lignes des voies que la zone est "touch sensitiv"
=> si l'utilisateur "tap", ça affiche le détail de la voie.
Je pensais au début à Illustrator pour "fabriquer" les topos mais l'aspect "zone sensibles" ne pourra pas être géré...
Du coup, je me dit qu'il va peut être falloir que je me fabrique une appli pour ça mais ça me parait compliqué.
Je vous expose donc tout ça pour voir si l'un d'entre vous a une idée plus lumineuse...
Merci ! Désolé de la longueur du post...
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
Tu peux peut être jeter un coup d'oe“il sur les projets Open Source de ce type pour voir comment faire.
Bonjour,
Pour le SVG tu peut partir de SVGKit
Voir https://github.com/SVGKit/SVGKit
Effectivement, ça risque d'être complexe à mettre en oeuvre...
Mais... c'est ça qui est bon non ?
Miam
Plus sérieusement, je suis intéressé par ton retour d'expérience, ayant un projet qui aura des besoins similaires.
En fait, je veux faire un peu comme les itinéraires dans "Plans".
En gros : j'ai une image de fond (qui peut être une photo) ; ce sera une simple bitmap.
En surimpression, je viens coller les voies.
Et quand on touch une voie, elle réagit.
Comme les itinéraires 1/2 dans plan en fait....
Je sais pas vraiment comment c'est implémenté...
Concernant SVGKit, la branche "officielle" de github me semble à l'abandon... Le seul gars qui répond, c'est un gars qui a fait un fork et ce fork s'éloigne bcp de la branche initiale...
J'ai tenté de l'utilisé puisque le gars semble actif (je parle de la branche adamgit). Passé les pb de compilation, j'ai commencé par me heurter à un problème de parsing qu'il a rapidement corrigé.
Ensuite, dans mon utilisation, je dois pouvoir :
=> conserver des layers par vecteurs (pour gérer des animations et/ou événements)
=> agrandir/réduire la frame de mon SVG (en fonction des écrans et iPhone/iPad)
=> détecter les "touch"
Le Kit propose 2 approches pour gérer l'affichage du SVG :
Pour le redimensionnement, vu comme j'ai galéré à intégrer le truc, j'ai voulu insister un peu et voir avec lui pourquoi ce n'était pas possible. Il m'a juste répondu qu'il n'y arrivait pas et que si je voulais améliorer le truc, je pouvais y aller ^^
C'est là qu'Ali est entré en jeu car je l'ai appelé au secours... Et bien sûr, Ali m'a carrément bien aidé et on a résolu le pb en 2/2... Seulement, voilà , le gars dit que notre solution casse les transformations 3D car on utilise sublayerTransform...
Bon, au final, je pense que je vais utiliser cette version de SVGKit mais je me demande si je n'aurai pas dû aborder le pb autrement...
Quant à l'utilisation de SVGKit, vous l'aurez compris, disons que c'est pas mal comme framework, mais réservé à des utilisateurs avertis...
C'est quand même dommage que les SVG soient pas nativement supportés sous iOS...
Tu pourrais creer des PDF contenant du vectoriel et des liens (CGPDFContextSetURLForRect) en utilisant la librairie SVG que tu as trouvée avec le simulateur iOS ou les API Mac. Ensuite tu n'aurais plus qu'à distribuer les PDF. Les URL seraient des schemes custom pour s'ouvrir dans ta propre app (à verifier, ou tu pourrais les intercepter avec un peu plus de code).
Je crois avoir lu que si tu utilises des fonctions de dessins basiques, le PDF créé sera vectoriel.
Si tout ca fonctionne, il reste le soucis que les hotspots seront rectangulaires.
Mais le point que tu soulèves est effectivement problématique...
Les voies sont en générale bien verticales et le "hit" test de CALAyer ne donne pas une expérience utilisateur satisfaisante....
Pour chaque voie, j'ajoute donc une "shape" qui va largement couvrir la voie. Ces shapes sont sans couleur donc ne se voient pas. Par contre, ce sont elles qui vont détecter le touch.
De cette manière, je contrôle plutôt bien le découpage et les évènements et surtout, la distinction de voies qui démarrent au même endroit par exemple...
Alors après, je ne suis pas fermé aux PDF et suis bien conscient que pour l'heure, la solution vers laquelle je me dirige apparait encore un peu "bancale" ; tout du moins, faite de bric et de broc...
PS : Draken, je suis un visionnaire ! Je savais que les vecteurs étaient puissants sans soupçonner une seule seconde qu'ils pouvaient réfuter E=MC2
Le gosse de 15 ans qui a écris un petit programme en Python pour modéliser la trajectoire d'un groupe de galaxies naines à partir d'observations astronomiques ne s'attendait pas non plus à trouver un résultat non conforme avec la Relativité. Cette histoire fait du buzz dans les milieux scientifique depuis quelques jours, aprés la parution d'un article dans la revue scientifique Nature.
Le dessous de l'histoire c'est qu'un astrophysicien anglais travaillant à l'observatoire de Strasbourg a fait suivre à son fils un stage sur l'utilisation du langage Python. Le rejeton a alors bricolé un utilitaire pour aider son pére dans son étude des galaxies naines gravitant autour d'Androméde, une galaxie voisine de la nôtre. Découvrant que la trajectoire de ces galaxies est très étrange, le papa a écris un article dans l'une des plus célèbres revues scientifiques, créditant son fils dans la liste des contributeurs de la découverte. Plutôt sympa, je trouve !
Sinon, tu as une autre solution relativement simple à évaluer c'est le HTML5+UIWebview.
Le HTML 5 est censé géré les SVG, non ? Safari gère les balises canvas, je n'ai jamais testé les balises svg.
Là tu peux avoir des événements et changer l'apparence en dynamique.
Le HTML5 gère le svg...
Mais je n'ai pas exploré cette piste parce que le HTML5, ça me fait penser à des murs dont la peinture ne serait pas encore sèche ^^
[font=helvetica, arial, sans-serif]Je suis nouveau sur cocoacafe (et dans le dev iOS). [/font]
[font=helvetica, arial, sans-serif]Je tente en ce moment de faire une petite appli de géolocalisation. [/font]
[font=helvetica, arial, sans-serif]J'ai un fichier KML que j'ai converti en SVG (précision : je ne souhaite pas afficher le fichier KML dans une MapView car la MapView, en affichant le fichier KML, affiche aussi la carte de l'endroit en dessous ce que je ne souhaite pas).[/font]
[font=helvetica, arial, sans-serif]J'aimerai utiliser ce SVG dans une scrollView et pouvoir appliquer des animations dessus (une rotation par exemple lorsque l'utilisateur pivote sur lui-même). L'image devra également être interactive avec des points d'intérêts ajoutés sur l'image.[/font]
[font=helvetica, arial, sans-serif]Après avoir recherché les frameworks existants sous iOS pour la gestion des SVG, j'ai arrêté mon choix sur SVGKit.[/font]
[font=helvetica, arial, sans-serif]Ce que j'ai fait jusqu'à présent en partant de la branche officielle de SVGKit me donne le résultat suivant : mon SVG est interactif avec l'ajout de POI, redimensionnable, scrollable mais je ne peux pas l'animer.[/font]
[font=helvetica, arial, sans-serif]Je me suis donc penché sur le fork suivant : https://github.com/S...t/tree/2013base qui propose les deux approches décrites par LeChatNoir ci-dessus à savoir :[/font]
[font=helvetica, arial, sans-serif]" • SVKFastImageView : charge le SVG comme une image. Pas d'animation ni de "touch" possible mais dimensionnement possible.[/font]
[font=helvetica, arial, sans-serif]• SVKLayeredImageView : charge le SVG en conservant les vecteurs (un vecteur = un layer) donc touch et animations possibles. Par contre, redimensionnement : nada :-( "[/font]
[font=helvetica, arial, sans-serif]J'ai vu dans la discussion suivante : https://github.com/a...omment-11758401 que LeChatNoir et AliGator ont apporté des modifications à la classe SVKLayeredImageView en changeant la méthodeinitWithSVGKImage et en ajoutant la méthode setFrame. Ces modifications rendaient le SVG redimensionnable lors d'une rotation du device si j'ai bien compris (ça devrait marcher dans une scrollView aussi j'imagine ?).[/font]
[font=helvetica, arial, sans-serif]J'ai modifié en conséquence la classe chez moi mais j'ai un soucis : lors d'un redimensionnement par zoom l'image devient floue.[/font]
[font=helvetica, arial, sans-serif]Ma question est à la suivante : où et comment dois-je changer le frame du contentView de ma scrollView (l'image du contentView correspond à mon SVG) pour que l'image reste nette après un zoom/dezoom ?[/font]
[font=helvetica, arial, sans-serif]Dans le code de la méthode scrollViewDidEndZooming ? ou de viewForZoomingInScrollView ?
J'ai fait quelques essais ici et là sans succès : à chaque redimensionnement, mon image vectorielle devient floue... (par contre les animations fonctionnent bien... mais ces flous c'est juste horrible!)
Un tout petit exemple (j'essaye pour le moment de faire ça dans la démo du fork : demo-iOS) pourrait me permettre de faire un bond de géant dans mon projet !![/font]
[font=helvetica, arial, sans-serif]Par avance merci ![/font]
Présentation... du code ?
Les modifications apportées au fichier SVGKLayeredImageView.m sont les suivantes (cf https://github.com/adamgit/SVGKit/issues/25#issuecomment-11758401):
Modification de la méthode d'init :
- (id)initWithSVGKImage:(SVGKImage*) im
{
if( im == nil )
{
NSLog(@[%@] WARNING: you have initialized an [%@] with a blank image (nil). Possibly because you're using Storyboards or NIBs which Apple won't allow us to decorate. Make sure you assign an SVGKImage to the .image property!", /size][/color][color=#B818A3][size=3]self[/size][/color][color=#000000][size=3] [/size][/color][color=#420C81][size=3]class[/size][/color][color=#000000][size=3, /size][/color][color=#B818A3][size=3]self[/size][/color][color=#000000][size=3] [/size][/color][color=#420C81][size=3]class[/size][/color][color=#000000][size=3);
}
self = color=#b818a3]super[/color] [color=#420c81]init[/color;
if (self)
{
((SVGKLayer*) self.layer).SVGImage = im;
self.layer.anchorPoint=CGPointMake(0, 0);
self.frame = CGRectMake( 0,0, im.CALayerTree.frame.size.width, im.CALayerTree.frame.size.height ); // default: 0,0 to width x height of original image
self.backgroundColor = /color]UIColor[color=#000000] [/color][color=#420c81]clearColor[/color][color=#000000;
}
return self;
}
Et ajout de la méthode setFrame :
-(void)setFrame:(CGRect)frame {
CGFloat ratioX=1,ratioY=1;
if (frame.size.width!=self.image.size.width && self.image.size.width>0)
ratioX=frame.size.width/self.image.size.width;
if (frame.size.height!=self.image.size.height && self.image.size.height>0)
ratioY=frame.size.height/self.image.size.height;
if (ratioX!=1 && ratioY!=1) {
NSLog(@ratioX : %f, ratioY: %f,ratioX,ratioY);
self.layer.sublayerTransform=CATransform3DMakeScale(ratioX, ratioY, 1);
}
[super setFrame:frame];
}
L'init est faite dans la méthode loadResource du fichier DetailViewController du projet demo :
self.contentView = [[/color][color=#538187]SVGKLayeredImageView[/color][color=#000000] [/color][color=#420C81]alloc[/color][color=#000000 initWithSVGKImage:document] autorelease];
La méthode viewForZoomingInScrollView par défaut fait ceci :
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)finalScale
{
view.transform = CGAffineTransformIdentity; // this alters view.frame! But *not* view.bounds
view.bounds = CGRectApplyAffineTransform( view.bounds, CGAffineTransformMakeScale(finalScale, finalScale));
[view setNeedsDisplay];
self.scrollViewForSVG.minimumZoomScale /= finalScale;
self.scrollViewForSVG.maximumZoomScale /= finalScale;
}
et la méthode scrollViewDidEndZooming :
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)finalScale
{
view.transform = CGAffineTransformIdentity; // this alters view.frame! But *not* view.bounds
view.bounds = CGRectApplyAffineTransform( view.bounds, CGAffineTransformMakeScale(finalScale, finalScale));
[view setNeedsDisplay];
self.scrollViewForSVG.minimumZoomScale /= finalScale;
self.scrollViewForSVG.maximumZoomScale /= finalScale;
}
Où modifier le frame du contentView ? Avec quelle valeur ?
Merci !
Je me suis donc présenté là : http://forum.cocoacafe.fr/topic/10192-bonsoir-tout-le-monde/
Alors alors... Je me suis remis là dessus (j'ai dû m'interrompre un certain temps).
Je n'avais pas implémenté le zoom jusqu'à présent.
Je vient de le faire en indiquant juste à ma scrollView quelle vue il doit resizer (je lui indique ma vue qui embarque et mon image de fond et mon SVG). Résultat des courses, ça zoom et ça fonctionne.
Par contre, effectivement, ça floute... Preuve que les layers ne sont pas redessiner en fin de zoom...
Je me demande si c'est pas une volonté de SVGKit pour garantir les perfs...
Dans mon cas, c'est pas gênant. Cf. copies écran.
Par contre, je comprend que ça puisse être génant... Le SVG est justement fait pour ça ^^
Je fais le même constat chez moi, le zoom fonctionne... mais ça floute. Sur un iPad c'est moche...
Avec le framework officiel de SVGKit, le zoom fonctionne sans floutage. Par contre impossible de faire des animations comme cela est fait dans le fork AdamGit.
Je pensais qu'avec les modifications que vous aviez apportées à la classe SVGKLayeredImageView de ce fork, je pourrais avoir le beurre et l'argent du beurre ! Le redimensionnement net et les animations mais non...
Quelqu'un aurait-il une idée pour rendre cela possible ?
Autre solution pour moi (qui serait idéale) : pouvoir utiliser des fichiers KML dans une MapView pour afficher mes plans sans avoir de fonds de carte Google et pouvoir ainsi visualiser mes plans (et seulement mes plans) en mode offline.
A priori c'est impossible en utilisant une MkMapView : http://stackoverflow.com/questions/4151496/hiding-an-mkmapview
Je cite :
[font=Arial,]"When you are using MKMapView your are under Google Earth Api terms and conditions, so there is no chance of hiding, removing or stoping the Map being loaded from Google earth. You will not be able to find any property in MapKit to disable the maps being loaded."[/font]
Quelqu'un saurait-il faire cela autrement qu'avec une MkMapView ?
Merci
Mais bon, c'est pareil, les fonds de cartes s'afficheront...
J'ai fait pas mal de recherches sur Google mais j'ai fait chou blanc jusqu'à maintenant...
- ou [font=helvetica, arial, sans-serif]pouvoir utiliser des fichiers KML dans une MapView pour afficher mes plans sans avoir de fonds de carte Google ou Apple (depuis iOS 6) et pouvoir ainsi visualiser mes plans (et seulement mes plans) en mode offline[/font]
[font=helvetica, arial, sans-serif]- ou solutionner mon problème avec SVGKit qui est exposé ci-dessus.[/font]
[font=helvetica, arial, sans-serif]Merci ![/font]
Tu peux toujours utiliser des overlays pour "cacher" les cartes originales.
Il y a des samples Apple pour la lecture de fichier KML et pour créer des overlays custom.
C'était l'une des solutions proposées dans le lien que j'ai donné plus haut : http://stackoverflow.com/questions/4151496/hiding-an-mkmapview
[font=Arial,]
"I will sugest you can draw a very big polygon with the the help of MKOverlay above the google map and try to overlay your custom map above it so that the google map will be hidden by the the very big polygon and your custom maps and annotations will be present.[/font][font=Arial,]
It may not be a good idea. But its a trick that can workout."[/font][font=Arial,]
La réponse de la personne à qui a été proposée cette solution :[/font][font=Arial,]
"So the issue here is that using MKOverlay still takes significant time to draw to the screen. During this time, the user can usually see the underlying Google map - What I would like is to prevent the user from ever seeing it in the first place."[/font][font=Arial,]
Et c'est aussi ce que je pense.[/font][font=Arial,]
J'avais dans l'idée qu'une autre classe que MkMapView permettrait peut-être de désactiver l'affichage d'une carte (ou la masquer) sans perte de performances ?![/font]
En fait la méthode propre ce serait d'utiliser un autre système d'affichage pour la carte.
Par exemple routeme. C'est ce que j'utilise dans une app pour afficher une carte de France custom stockée en local sur l'iPhone.
Je pense qu'on s'éloigne un peu du sujet initial (affichage svg) cela dit, il faudrait peut-etre ouvrir un nouveau sujet.
L'utilisation d'un tel hack avec une MkMapView peut être, je suppose, une cause de rejet de l'application.
Je vais essayer de creuser la piste du hack avec routeMe.
Je suis preneur de tout retour d'expérience si quelqu'un s'est déjà penché sur ce problème