›

Création de jauges sous xcode 5

cbrasselcbrassel Membre
dans API AppKit #1

Bonjour,


 


Je cherche à  faire une application qui fera une grande utilisation de jauges voir de compteur (genre tableau de bord) .. un peu comme ça : screenshot_81.png


Connaitriez vous une ou plusieurs librairie(s) ou une méthode simple pour faire ça ?


 


 


Merci


Claude


Réponses

  • MalaMala Membre, Modérateur
    #2

    Pas de librairie toute faite qui me vienne à  l'esprit pour faire ça. Par contre, ça doit pas être bien long à  faire en direct avec des NSBezierPath. Un début d'ébauche pour la forme:



    
//// Color Declarations
    
NSColor* color = [NSColor colorWithCalibratedRed: 1 green: 0.114 blue: 0.41 alpha: 1];
    
 
    
//// Gradient Declarations
    
NSGradient* gradient = [[NSGradient alloc] initWithStartingColor: color endingColor: [NSColor whiteColor]];
    
 
    
//// Frames
    
NSRect frame = NSMakeRect(0, 0, 250, 125);
    
 
    
//// Subframes
    
NSRect gauge = NSMakeRect(NSMinX(frame), NSMinY(frame), NSWidth(frame), NSHeight(frame));
    
 
    
 
    
//// Gauge
    
{
    
    //// Bezier Drawing
    
    NSBezierPath* bezierPath = [NSBezierPath bezierPath];
    
    [bezierPath moveToPoint: NSMakePoint(NSMinX(gauge) + 1.00000 * NSWidth(gauge), NSMinY(gauge) + 0.00000 * NSHeight(gauge))];
    
    [bezierPath curveToPoint: NSMakePoint(NSMinX(gauge) + 0.50000 * NSWidth(gauge), NSMinY(gauge) + 1.00000 * NSHeight(gauge)) controlPoint1: NSMakePoint(NSMinX(gauge) + 1.00000 * NSWidth(gauge), NSMinY(gauge) + 0.55228 * NSHeight(gauge)) controlPoint2: NSMakePoint(NSMinX(gauge) + 0.77614 * NSWidth(gauge), NSMinY(gauge) + 1.00000 * NSHeight(gauge))];
    
    [bezierPath curveToPoint: NSMakePoint(NSMinX(gauge) + 0.00000 * NSWidth(gauge), NSMinY(gauge) + 0.00000 * NSHeight(gauge)) controlPoint1: NSMakePoint(NSMinX(gauge) + 0.22386 * NSWidth(gauge), NSMinY(gauge) + 1.00000 * NSHeight(gauge)) controlPoint2: NSMakePoint(NSMinX(gauge) + 0.00000 * NSWidth(gauge), NSMinY(gauge) + 0.55228 * NSHeight(gauge))];
    
    [bezierPath lineToPoint: NSMakePoint(NSMinX(gauge) + 0.20000 * NSWidth(gauge), NSMinY(gauge) + 0.00000 * NSHeight(gauge))];
    
    [bezierPath curveToPoint: NSMakePoint(NSMinX(gauge) + 0.50000 * NSWidth(gauge), NSMinY(gauge) + 0.60000 * NSHeight(gauge)) controlPoint1: NSMakePoint(NSMinX(gauge) + 0.20000 * NSWidth(gauge), NSMinY(gauge) + 0.33137 * NSHeight(gauge)) controlPoint2: NSMakePoint(NSMinX(gauge) + 0.33431 * NSWidth(gauge), NSMinY(gauge) + 0.60000 * NSHeight(gauge))];
    
    [bezierPath curveToPoint: NSMakePoint(NSMinX(gauge) + 0.80000 * NSWidth(gauge), NSMinY(gauge) + 0.00000 * NSHeight(gauge)) controlPoint1: NSMakePoint(NSMinX(gauge) + 0.66569 * NSWidth(gauge), NSMinY(gauge) + 0.60000 * NSHeight(gauge)) controlPoint2: NSMakePoint(NSMinX(gauge) + 0.80000 * NSWidth(gauge), NSMinY(gauge) + 0.33137 * NSHeight(gauge))];
    
    [bezierPath lineToPoint: NSMakePoint(NSMinX(gauge) + 1.00000 * NSWidth(gauge), NSMinY(gauge) + 0.00000 * NSHeight(gauge))];
    
    [bezierPath closePath];
    
    [bezierPath setMiterLimit: 4];
    
    [bezierPath setWindingRule: NSEvenOddWindingRule];
    
    [gradient drawInBezierPath: bezierPath angle: 180];
    
    [[NSColor redColor] setStroke];
    
    [bezierPath setLineWidth: 1];
    
    [bezierPath stroke];
    
}
    
 
    
 
    
//// Cleanup
    
[gradient release];

  • samirsamir Membre
    janvier 2014 modifié #3

    @Mala ça sent paintCode avec ton code, non  ? :)


     


    ça doit être moins pénible à  faire avec addArcWithCenter.... de UIBezierPath


  • MalaMala Membre, Modérateur
    #4

    C'est clair!  ;D


     


    D'ailleurs ce serait bien qu'Apple rationalise ses APIs entre iOS et OSX.


  • cbrasselcbrassel Membre
    #5


    @Mala ça sent paintCode avec ton code, non  ? :)


     


    ça doit être moins pénible à  faire avec addArcWithCenter.... de UIBezierPath




     


    UIBezierPath n'est-il pas spécifique à  iOS ?


     


    Je cherchais plutôt quelque chose sous OSX ..


     


    Et pour la version de Mala .. ça me semble un peu pénible .. surtout qu'il va falloir l'animer ..

  • AliGatorAliGator Membre, Modérateur
    janvier 2014 modifié #6
    CAShapeLayer est fait pour ça, côté animations.
  • samirsamir Membre
    janvier 2014 modifié #7


    UIBezierPath n'est-il pas spécifique à  iOS ?




    Oui c'est spécifique à  iOS. t'as NSBezierPath sous OS X.


     


     




    Je cherchais plutôt quelque chose sous OSX ..




    appendBezierPathWithArcFromPoint:toPoint:radius:   devrait faire l'affaire sous OS X.


     




     


    Et pour la version de Mala .. ça me semble un peu pénible .. surtout qu'il va falloir l'animer ..




    Je pense pas que t'a un autre moyen a part de sous-classe une NSView ( UIView) pour tes dessins. ça parait compliqué mais ça peux se faire. C'est un bon exercice en tout cas d'essayer de créer un composant réutilisable:) 


     


    Sinon si tu as la flemme ou pas trop le temps, regarde sur cocoacotrols, par exemple ce composant pourra t'être utile : https://www.cocoacontrols.com/controls/dcknob


  • MalaMala Membre, Modérateur
    janvier 2014 modifié #8


    Et pour la version de Mala .. ça me semble un peu pénible .. surtout qu'il va falloir l'animer ..




    5 min chrono à  coder... Et comme je suis de bonne humeur c'est cadeau!  ;)


     


    Pour l'animation, je te laisse voir. Il y a encore un peu de boulot si tu veux que ça s'anime dynamiquement. La ça se cale juste en temps réel sur le slider.


     


    Note: projet Xcode 5. La classe qui t'intéresse se nomme ArcProgressBar.


  • cbrasselcbrassel Membre
    #9

    Merci !


     


    Je termine un autre truc en cours et je m'y colle la semaine prochaine .. j'aurais sans doutes encore des questions  o:)


Connectez-vous ou Inscrivez-vous pour répondre.