readme: capturas y dibujos nuevos, sin Karvan

- capturas de un nodo de prueba con contenido de acampada: lanzador, tribus,
  votacion de semaforo, modulos, ajustes, barra, salas y el tema del dev
- portada y esquema de la interfaz al dia; dos esquemas nuevos: como va la
  rama encima de Oasis y como funcionan las llamadas
- el README cuenta las novedades de esta version y explica la rama

Arreglos que salieron al hacer las capturas:
- el boton de No molestar del Telefono ocupaba una fila entera arriba de cada
  pagina; ahora va en la barra de arriba, junto al avatar
- Ajustes marcaba English aunque el idioma fuera otro (settings_view se queda
  con el idioma del arranque): el selector lo lee al pintar
- barras de la votacion juntas y con las etiquetas en el mismo tipo
- Personalizar la barra: una fila por atajo, sin sangria

docs/capturas/generar_portada.py

@@ -1,8 +1,9 @@
 #!/usr/bin/env python3
-"""Portada y esquema de la interfaz del README, con la paleta del tema Acampada.
+"""Portada y esquemas del README, con la paleta del tema Acampada.
 
-Las capturas de movil (01..07) se hacen aparte, con la app arrancada; este script
-solo compone 00-portada.png a partir de ellas y dibuja esquema-interfaz.png.
+Las capturas de movil (01..08) se hacen aparte, con la app arrancada en un nodo de
+pruebas a 412x915 y escala 2; este script compone 00-portada.png a partir de ellas y
+dibuja esquema-interfaz.png, esquema-rama.png y esquema-llamadas.png.
 El texto vive aqui: se cambia y se relanza, nunca se retocan los PNG a mano.
 
     python3 docs/capturas/generar_portada.py
@@ -47,8 +48,8 @@ def portada():
     d.rectangle((80, bottom + 12, 420, bottom + 20), fill=FG)
     d.text((80, 196), "Rama PRUEBAS del hacklab · base Oasis 1.3.3 · tema Acampada, pensado para el pulgar",
            font=font(SANS, 27), fill=MUTED)
-    shots = [("01-portada.png", "Lanzador de módulos"), ("03-karvan.png", "Karvan: salas efímeras"),
-             ("04-foros.png", "Filtros en fichas"), ("06-barra.png", "Tu barra de 4 atajos")]
+    shots = [("01-portada.png", "Lanzador de módulos"), ("02-tribus.png", "Tribus en filas"),
+             ("03-votacion.png", "Votar en semáforo"), ("07-oasismobile.png", "O el tema del dev")]
     pw, gap, top = 320, 50, 270
     x = (W - (4 * (pw + 20) + 3 * gap)) // 2
     cap = font(ANTON, 34)
@@ -87,8 +88,8 @@ def esquema():
     d.rounded_rectangle((px0, py0, px1, py1), 30, outline=FG, width=5)
     d.rounded_rectangle((px0 + 16, py0 + 20, px1 - 16, py0 + 84), 14, fill=BG, outline=FG, width=3)
     s = font(SANS, 15)
-    d.text((px0 + 46, py0 + 42), "logo · (Personal | Social) · avatar", font=s, fill=FG)
-    secciones = [("COMUNIDAD", 8), ("BIBLIOTECA", 2), ("HERRAMIENTAS", 5)]
+    d.text((px0 + 46, py0 + 42), "logo · no molestar · avatar", font=s, fill=FG)
+    secciones = [("COMUNIDAD", 8), ("BIBLIOTECA", 2), ("GOBERNANZA", 2)]
     y = py0 + 110
     for nombre, n in secciones:
         d.text((px0 + 40, y), nombre, font=font(ANTON, 17), fill=FG)
@@ -108,12 +109,12 @@ def esquema():
     cajas = [
         ((bx0, 190, bx1, 340), "ARRIBA — LA BARRA SUPERIOR",
          ["El logo vuelve al inicio y el avatar abre tu perfil.",
-          "Con muchos módulos activos salen los filtros Personal y Social;",
-          "en modo activistas todo cabe en una pantalla y no hacen falta."], BG),
+          "En medio, el botón de No molestar del Teléfono.",
+          "Con muchos módulos activos salen también los filtros Personal y Social."], BG),
         ((bx0, 375, bx1, 565), "EN MEDIO — EL LANZADOR",
          ["Los módulos activos en una rejilla de iconos, por secciones,",
           "como el cajón de apps del móvil. Los nombres son los del Oasis",
-          "oficial: Comunidad, Biblioteca, Herramientas…",
+          "oficial: Comunidad, Biblioteca, Gobernanza…",
           "Solo en la pantalla de inicio; dentro de cada módulo, filtros en fichas."], BG),
         ((bx0, 600, bx1, 750), "ABAJO — LOS ATAJOS",
          ["Cuatro módulos a tu elección: ni uno más, que es para el pulgar.",
@@ -132,6 +133,79 @@ def esquema():
     out.save(HERE / "esquema-interfaz.png", optimize=True)
 
 
+def flecha(d, a, b, ancho=4):
+    ang = math.atan2(b[1] - a[1], b[0] - a[0])
+    tip = lambda da, r: (b[0] - r * math.cos(ang + da), b[1] - r * math.sin(ang + da))
+    d.line((a, tip(0, 12)), fill=FG, width=ancho)
+    d.polygon([b, tip(0.45, 20), tip(-0.45, 20)], fill=FG)
+
+
+def titulo(d, texto, sub):
+    d.text((46, 26), texto, font=font(ANTON, 46), fill=FG)
+    bottom = d.textbbox((46, 26), texto, font=font(ANTON, 46))[3]
+    d.rectangle((46, bottom + 10, 260, bottom + 16), fill=FG)
+    d.text((46, bottom + 30), sub, font=font(SANS, 18), fill=MUTED)
+
+
+def esquema_rama():
+    """Como va la rama encima de Oasis: lo del dev abajo, lo nuestro encima."""
+    W, H = 1400, 760
+    out = Image.new("RGB", (W, H), BG)
+    d = ImageDraw.Draw(out)
+    titulo(d, "CÓMO VA LA RAMA ENCIMA DE OASIS",
+           "Oasis lo cambia el dev, casi una versión al día. La rama solo cambia cómo se ve y se usa en el móvil.")
+    capa = [
+        ((60, 210, 380, 400), "ASPECTO",
+         ["mobile_base.css: la maqueta", "mobile_ux.css: márgenes, letra,", "botones y piezas nuevas",
+          "Acampada.css: el skin"], NEON),
+        ((400, 210, 720, 400), "PANTALLAS",
+         ["mobile_ui.js y las vistas", "mobile_*.js. En una vista", "del dev, como mucho una", "línea que las llama"], NEON),
+        ((740, 210, 1060, 400), "RUTAS",
+         ["fork_routes.js y", "mobile_layer.js, delante", "del router del dev: lo que", "no atienden pasa al suyo"], NEON),
+        ((1080, 210, 1340, 400), "ANDROID",
+         ["envoltorio propio:", "permisos de micro y", "cámara, y el puente", "de audio del Teléfono"], NEON),
+    ]
+    for box, t, l, r in capa:
+        caja(d, box, t, l, r)
+    d.text((60, 166), "LO DE LA RAMA", font=font(ANTON, 26), fill=FG)
+    for x in (220, 560, 900, 1210):
+        flecha(d, (x, 418), (x, 478))
+    caja(d, (60, 500, 1340, 690), "OASIS DEL DEV: NO SE TOCA",
+         ["backend.js y su middleware · los modelos (lo que se publica y cómo se cuenta) · SSB y su arranque",
+          "las traducciones · style.css y mobile.css · los temas, también OasisMobile.css",
+          "De 6.400 líneas cambiadas en 43 ficheros suyos (octubre) a 1.045 en 40. Ver GUIA_DE_DESARROLLO.md"], BG)
+    out.save(HERE / "esquema-rama.png", optimize=True)
+
+
+def esquema_llamadas():
+    """Las llamadas son las del dev; la rama solo enchufa el movil."""
+    W, H = 1400, 700
+    out = Image.new("RGB", (W, H), BG)
+    d = ImageDraw.Draw(out)
+    titulo(d, "LLAMADAS: LAS DEL DEV, CON EL MÓVIL ENCHUFADO",
+           "Teléfono y Salas son de Oasis. La rama no tiene llamadas propias: solo hace que suenen en Android.")
+    cajas = [
+        ((50, 200, 360, 430), "TELÉFONO Y SALAS",
+         ["De Oasis, tal cual.", "Llamadas de uno a uno", "con buzón de voz; salas", "de hasta 50, con vídeo,", "grabación y emisión."], BG),
+        ((400, 200, 700, 430), "LOS ENCHUFES",
+         ["setAudioFactory", "setVideoFactory", "setStreamFactory", "", "Los deja el propio dev."], BG),
+        ((740, 200, 1040, 430), "EL PUENTE",
+         ["main.js enchufa ahí", "phone_*_android.js:", "el audio y la cámara", "pasan por la app de", "Android."], NEON),
+        ((1080, 200, 1350, 430), "EL MÓVIL",
+         ["Micrófono, cámara", "y altavoz. Los permisos", "se piden la primera vez", "que llamas o entras", "en una sala."], NEON),
+    ]
+    for box, t, l, r in cajas:
+        caja(d, box, t, l, r)
+    for a, b in (((362, 315), (398, 315)), ((702, 315), (738, 315)), ((1042, 315), (1078, 315))):
+        flecha(d, a, b)
+    caja(d, (50, 480, 1350, 630), "¿Y CON LA APK OFICIAL?",
+         ["No declara micrófono ni cámara y su navegador interno deniega esas peticiones:",
+          "en Android las llamadas no pueden sonar. Por eso esta rama trae su propio envoltorio."], BG)
+    out.save(HERE / "esquema-llamadas.png", optimize=True)
+
+
 if __name__ == "__main__":
     portada()
     esquema()
+    esquema_rama()
+    esquema_llamadas()