De menubalkcijfers van Mole laten passen

Mole kan twee getallen naast de kleine mol in de menubalk tonen, standaard CPU en geheugen. Mensen zeggen me al lang dat het nooit helemaal goed naast de iconen eromheen zat, al kon niemand precies zeggen waarom. Deze keer maakte ik een schermafbeelding van mijn eigen menubalk en ging ik onderdeel voor onderdeel. Het probleem was niet één getal. Corps, gewicht en afstand zagen er elk op zichzelf aanvaardbaar uit, en samen lieten ze Mole opvallen tussen alles op de balk.

Begin bij de buren

In mijn schermafbeelding stond links van Mole Stats, een open-source monitor voor de menubalk. Ik las de code waarmee die de menubalk tekent: de kleine cellen zetten een licht label van 7 pt boven een gewone waarde van 12 pt, de netwerksnelheid op twee regels is 9 pt, en nergens op de balk staat vet. Mole gebruikte twee regels halfvette tekst van 8 pt. Gemeten op dezelfde schermafbeelding was de tekst van Mole 12 pixels hoog en die van Stats 13 tot 16, dus Mole was een maat kleiner dan de buren en de enige vette tekst op de balk, wat het tot een kleine grijze vlek maakte.

Ik had dit al een paar keer bijgesteld, van 10 pt naar 9 pt naar 8 pt, en elke keer keek ik naar de mol op zichzelf in plaats van naast andere statusonderdelen. De tekst werd dus steeds kleiner terwijl het gewicht nooit veranderde. De menubalk is gedeelde ruimte, en niemand leest het onderdeel van één app los, dus deze keer volgde ik de stijl die mensen al elke dag lezen: lichte labels van 7 pt, gewone waarden van 12 pt, medium van 9 pt voor de indeling op twee regels en de netwerksnelheid, niets vet, en de hiërarchie alleen door het formaat.

De inkt meten, niet het vak

Toen het lettertype vaststond, kwamen de afstandsproblemen naar boven. De ruimte tussen de mol en het eerste getal, de ruimte tussen twee meetwaarden en de ruimte tussen een label en zijn waarde werden elk op hun eigen manier berekend, zodat het onderdeel nooit als één geheel las. De oude code mat afstanden vanaf beeldranden of tekstvakken, maar het oog ziet inkt, en de lege ruimte tussen een vak en de inkt verschilt per teken. Twee tussenruimten die allebei op 3 pt stonden, konden er twee keer zo verschillend uitzien.

De mol liet dit het duidelijkst zien. Het spriteblad van elk figuur heeft zijn eigen doorzichtige marge, dus een vaste afstand vanaf de beeldrand liet maar 6,5 pt naast de mol en meer naast een ander figuur. Nu zoekt Mole de rechtse dekkende pixel over elk animatieframe en meet vanaf daar, zodat welk figuur je ook kiest, de afstand tot de getallen ongeveer 12 pt is.

De ruimte tussen twee meetwaarden had een vergelijkbare val. Elke cel reserveert ruimte voor de breedste meting, 100% voor percentages, zodat de menubalk niet verschuift als een meting van 9% naar 44% gaat, en bij tweecijferige waarden blijft er ongeveer 13 pt tussen de cellen. Zodra beide cellen 100% bereiken, verdwijnt die gereserveerde speling. Eén versie tijdens dit werk liet maar 3 pt tussen de cellen, en bij volle belasting drukte de indeling op twee regels 100%999 KB/s als één reeks. Cellen houden nu minstens 6 pt afstand, zodat ze ook bij volle belasting gescheiden blijven. Labels en waarden staan verticaal 3,5 pt uit elkaar, hetzelfde als bij Stats.

Links uitgelijnde regels kunnen er nog scheef uitzien

In de oude cellen stond het label gecentreerd boven het getal, en het las als een bijschrift dat erboven zweefde. Deze keer zijn label en waarde allebei links uitgelijnd en getekend vanaf dezelfde x-coördinaat, dus ze horen op één lijn te staan. Ingezoomd zat het label altijd een beetje links van het getal. De oorzaak zit in het lettertype: elk teken heeft een kleine ingebouwde marge aan de linkerkant. De tabelcijfers van 12 pt hebben 0,7 tot 1,0 pt daarvan, het cijfer 1 heeft 1,7 pt, en de hoofdletters in een label van 7 pt hebben maar 0,3 tot 0,6 pt. Ze beginnen op hetzelfde punt, maar de zichtbare streken eindigen 1 tot 3 pixels uit elkaar, het duidelijkst als een meting met 1 begint.

De oplossing schuift het label naar de eerste streek van de waarde en laat de waarde met rust. De meting verandert elke seconde, en als die zou verschuiven telkens als het eerste cijfer verandert, zou het getal dat je bekijkt heen en weer waggelen. Het kleine label erboven verplaatsen vermijdt dat; het beweegt alleen, met minder dan 1 pt, als de meting een andere tiental overschrijdt.

Zelfs met de streken precies uitgelijnd leek de waarde nog iets naar rechts te staan. Dat is een bekende illusie als een groot cijfer onder kleine tekst staat: een rond cijfer van 12 pt is veel groter dan een licht bijschrift van 7 pt, en het oog leest de rand van het grotere teken als verder naar binnen. Ik vergeleek 0, 0,5 en 1 pt. Bij 1 pt leek het getal al naar buiten te duwen, dus de waarde hangt nu 0,3 pt naar links, iets meer dan een halve pixel, net genoeg zodat de twee regels op dezelfde rand lijken te staan.

De breedte van elk getal reserveren

Als iets in de menubalk van breedte verandert, schuift elk icoon rechts ervan mee, dus elk soort meting heeft ruimte nodig voor de breedste vorm. Twee gaten doken op. Ventilatorsnelheid wordt 850 onder 1000 rpm geschreven en 2.1k erboven, en de twee vormen reserveerden verschillende breedtes, zodat de hele menubalk sprong als de ventilator 1000 rpm passeerde. Swap gebruikte rechtstreeks het byteformaat van het systeem, wat 10.52 GB gaf, of 1,2 Go op een Frans systeem: te lang voor een cel van 12 pt, en de breedte veranderde met de meting. Beide ventilatorvormen delen nu één breedte, en swap in de menubalk is altijd een korte vorm van hoogstens drie cijfers, zoals 512 MB, 1.2 GB of 12 GB. De volledige waarde blijft in het popover.

Netwerksnelheid kreeg onderweg één correctie. Onder 10 KB/s toonde die vroeger één decimaal, zodat een rustige 0.0 KB/s boven 86 KB/s stond met een decimaalteken in de ene regel en niet in de andere, en het rechts uitgelijnde paar nooit gelijk oogde. Een tiende kilobyte per seconde zegt je heel weinig, dus KB/s is nu altijd een geheel getal. MB/s houdt één decimaal onder 10, waar het verschil tussen 1.5 MB/s en 1 MB/s er echt toe doet.

Hoe je het instelt

Open in de instellingen van Mole het tabblad Menubalk. Inhoud menubalk heeft drie opties: Symbool toont alleen de mol, Live gegevens toont alleen de getallen, en Symbool en gegevens toont de mol met getallen ernaast, dus kies Live gegevens of Symbool en gegevens om de getallen uit dit stuk te zien. Onder Gegevensindeling geeft Naast elkaar de cellen met het label boven de waarde en Gestapeld de twee regels kleine tekst. Eerste statuswaarde en Tweede statuswaarde kiezen de twee meetwaarden, standaard CPU en geheugen, en je kunt elk ervan omzetten naar GPU, temperatuur, vermogen, ventilator, swap of de batterij van een Bluetooth-apparaat. Toon live netwerksnelheid aanzetten voegt upload en download rechts toe. De mol zelf kun je wijzigen onder Menubalkfiguur, en Draai richting om keert het figuur om.

Mensen vragen soms waarom de mol zo snel rent. Het tempo is de CPU-meting: hoe drukker de Mac, hoe sneller hij rent. De snelheid weerspiegelt het totale CPU-gebruik en het belastingsgemiddelde over één minuut, aangepast aan het aantal kernen. Volledig inactief zet hij ongeveer elke 1,3 seconde een stap, en vanaf 70% stopt het versnellen op ongeveer vier stappen per seconde. De curve stijgt sneller bij lage belasting, zodat 10% en 30% duidelijk verschillen, wat betekent dat hij met een browser open en wat schrijfwerk al ongeveer twee keer zo snel rent als wanneer de Mac inactief is, en code compileren of video exporteren laat hem echt rennen. Het tempo is een bewust signaal, daarom is er geen aparte snelheidsinstelling. Andere figuren bewegen in hun eigen tempo, omdat elk een ander aantal animatieframes heeft. Als alleen de mol wordt getoond, laat aanwijzen dezelfde hint zien: "Rent sneller als de CPU drukker is".

Wat ik probeerde en liet zoals het was

Op een gegeven moment leek de temperatuurcel me te groot. Ik maakte één versie met de eenheid op 9 pt en een andere op 10 pt, en in beide zakte de kleinere ° naar de basislijn, zodat 58°C las als de typefout 58°c, en het procentteken merkbaar kleiner werd dan het teken dat Stats er vlak naast toont. Opnieuw meten liet zien dat het getal precies even groot was als de CPU-cel; het leek alleen groter omdat 58°C één hoofdletter meer heeft dan 44%. Het formaat bleef dus zoals het was.

Er was ook een oude regel dat alleen de indeling op twee regels naast het figuur mocht staan, nooit deze cellen met het label boven de waarde. De versie waartegen die regel was geschreven, gebruikte 12 pt halfvet. Zonder het vet geldt de reden niet meer, dus beide indelingen mogen nu naast het figuur staan, en cellen zijn de standaard.

Achteraf is geen van deze wijzigingen groot. Het zijn halve pixels, één decimaalteken en een paar punten afstand, en samen beslissen ze of een icoon in de menubalk opgaat of eruit springt. Bouw je een menubalk-app, zet dan je onderdeel en een paar populaire buren in één schermafbeelding en vergelijk ze, meet de inkt in plaats van het vak, en reserveer de breedste breedte van elke meting. Na die drie zal het er waarschijnlijk niet meer uit de toon vallen.

Al deze waarden worden nu door tests gedekt, één elk voor gewicht, breedte en labeluitlijning, zodat een latere wijziging ze minder snel ongedaan maakt. Het is hetzelfde idee als Mole ontwerpen zodat het uit de weg blijft: wat in de menubalk staat, is het best als je er elke dag naar kijkt en het nooit opmerkt.