Démo immobilière web & iPad


24 juillet 2012

Ayant été mandaté pour réaliser l'équivalent numérique* d'une plaquette commerciale pour un programme immobilier, j'ai pu intégrer quelques briques logicielles intéressantes au sein d'une application qui se trouve être un "simple" site : des pages classiques, un 360°, un diaporama et un panoramique utilisant des cube map. Le tout utilisant uniquement du JS et du CSS3...

Le point un peu embêtant avec cette démo est qu'il faut attendre le chargement la première fois que l'on la regarde : il y a plus de 20 Mo à télécharger pour voir le panoramique, le 360° et les images... Par contre, si on veut la revoir, les données étant stockées dans le cache de Safari sur iPad, l'accès est immédiat.

Accès à la démo...
* Certains, peu instruits, parleraient de digital. Je préfère ne rien dire...

iOS, relation entre CALayer et UIView


21 décembre 2011
When a layer needs to be displayed and has no valid backing store (perhaps because the layer received a setNeedsDisplay message), the system sends the display message to the layer. The -[CALayer display] method looks roughly like this:
- (void)display {
    if ([self.delegate respondsToSelector:@selector(displayLayer:)]) {
        [[self.delegate retain] displayLayer:self];
        [self.delegate release];
        return;
    }

    CABackingStoreRef backing = _backingStore;
    if (!backing) {
        backing = _backingStore = ... code here to create and configure
            the CABackingStore properly, given the layer size, isOpaque,
            contentScale, etc.
    }

    CGContextRef gc = ... code here to create a CGContext that draws into backing,
        with the proper clip region
    ... also code to set up a bitmap in memory shared with the WindowServer process

    [self drawInContext:gc];
    self.contents = backing;
}

So, if you override display, none of that happens unless you call [super display]. And if you implement displayLayer: in FooView, you have to create your own CGImage somehow and store it in the layer's contents property. The -[CALayer drawInContext:] method looks roughly like this:
- (void)drawInContext:(CGContextRef)gc {
    if ([self.delegate respondsToSelector:@selector(drawLayer:inContext:)]) {
        [[self.delegate retain] drawLayer:self inContext:gc];
        [self.delegate release];
        return;
    } else {
        CAAction *action = [self actionForKey:@"onDraw"];
        if (action) {
            NSDictionary *args = [NSDictionary dictionaryWithObject:gc forKey:@"context"];
            [action runActionForKey:@"onDraw" object:self arguments:args];
        }
    }
}

The onDraw action is not documented as far as I know. The -[UIView drawLayer:inContext:] method looks roughly like this:
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)gc {
    set gc's stroke and fill color spaces to device RGB;
    UIGraphicsPushContext(gc);
    fill gc with the view's background color;
    if ([self respondsToSelector:@selector(drawRect:)]) {
        [self drawRect:CGContextGetClipBoundingBox(gc)];
    }
    UIGraphicsPopContext(gc);
}

...I used Hopper to disassemble the IOS simulator libraries...

Profiles de l'élément Canvas


17 août 2011

Afin de savoir ce qu'un élément Canvas peut faire, autant le bombarder d'opérations simples :

  • Bresenham : on trace des lignes avec un algo basique qui permettait d'afficher 12 lignes par frame en 50Hz sur un Atari ST...
  • Lignes : en utilisant une image bien connue, j'essaye d'afficher le maximum de lignes, prises au hasard, au sein du canvas.
  • Colonnes : pareil que précédemment mais avec... des colonnes...

Les deux derniers tests ont été implémentés pour essayer d'imaginer la faisabilité d'un Doom-like dans un Canvas :)

Test / Canvas

Effets graphiques utilisant Canvas


16 août 2011

Pour découvrir l'élément Canvas et la façon de l'utiliser, rien de mieux que d'implémenter des effets que je connais bien pour les avoir implémentés en assembleur 68000 il y a 25 ans !

Test / Canvas

CSS : un style assez joli pour un formulaire


12 août 2011

Voici une classe CSS (cross-platform) que je trouve agréable et qui sied plutôt bien à l'hébergement de formulaires courts :

Champ 1 :
Champ 1 :

C'est mignon d'avoir pensé à une ombre, à des coins arrondis et à un gradient interne. C'est anglais en plus.

1 2 3 4 5 6 7 8 9........ 18 19 20