Stephan Michels

Chemical Diagram Editor

2021-08-02T22:32:04+02:00

For some time now we have been developing a new application for MacOS for creating structure diagrams in chemistry. This application is used to create graphics of chemical structures or reactions for scientific articles, books or online content.

The focus is on very good integration with MacOS. This includes a native application, support for Dark Mode and TouchBar and technologies such as QuickLook, Spotlight and a beautiful user interface.

The application will support several standard exchange formats such as ChemDraw, MOL Files, Smiles and Inchi Strings.

We hope to be able to start the lower test phase with selected testers soon. If you are interested, we would like to hear from you.

Interface Inspector

2013-09-21T22:32:04+02:00

I finally finished first my own software product called Interface Inspector. I wrote the Interface Inspector to debug my own applications during the development to see which are the visible views and their properties. I often have the problem that I don’t know why specific views are not visible or display a wrong content. With this tool I can now inspect the running application and see all necessary information. Moreover I can introspect other applications to see how they manage to build a specific design. A great way to learn from others.

The Interface Inspector is currently published as a public beta version and I hope this tool will be helpful for others too.

Debug all called Objective-C methods

2013-01-31T12:10:28+01:00

Once in a while I need to know which methods are called in my code. The simplest solution is to add a breakpoint on the function called objc_msgSend. This function is responsible for the call of every method in Objective-C

id objc_msgSend(id theReceiver, SEL theSelector, ...)

In Xcode you can add actions to breakpoints. In my case add a debugger command to evaluate the receiver and the selector. So I added following command:

expr -- (void)printf("[%s %s]\n",(char *) object_getClassName(*(long*)($rdi)), (char *)($rsi))

You might ask where I get the register names from. I found a good article on expaining the various registers of the different platforms: “Inspecting Obj-C parameters in gdb”.

Important is that you enable “Automatically continue after evaluating”.

Now you get a Output like this

[__NSCFConstantString copy]
[__NSCFConstantString copyWithZone:]
[NSObject valueWithRect:]
[NSObject valueWithBytes:objCType:]
[NSConcreteValue init]
[NSObject resolveInstanceMethod:]
[NSConcreteValue description]
[NSConcreteValue getValue:]
[NSObject stringWithFormat:]

Implementation of an inspector tab bar

2012-05-29T19:32:24+02:00

For my own project I tried to create a similar tab bar like I have seen in the Xcode
inspector. Some of you might be interested in the source code, so I made it free and without any
restriction.

It took some time to find out how to create NSButtons witch look and work identical to
the tab bar buttons like in Xcode. First I created an custom NSButtonCell subclass to
draw the shadows left and right of the button to mimic the shadow of the selected
button.

- (void)drawBezelWithFrame:(NSRect)frame inView:(NSView *)controlView {
  // Draw background only if the button is selected
  if (self.state == NSOnState) {
     [... draw shadow ...]
  }
}

To get the etched look of icons you have to use template images and set the bezel style
of the button cell.

self.bezelStyle = NSTexturedRoundedBezelStyle;

For the functional part, I have struggled a long time with the button action which has been
sent on the mouse up event. I wanted to switch the views on the mouse down event. Following
statement allows the button to send the action of the mouse down event.

[button sendActionOn:NSLeftMouseDownMask];

The next problem was that button changed it’s state even if the button has already been
selected. To prevent this behavior I overrode the following method in the button cell.

// prevent automatic state changes
- (NSInteger)nextState {
  return self.state;
}

Everything else was straight forward. I hope you find the tips and tricks useful. You
can find the source code on GitHub.

NSRulerView und NSRulerMarker

2012-02-05T14:14:07+01:00

Ich wollte für ein kleines Demoprogram (für grafische Eingabe) Lineale und Guides hinzufügen, ähnlich wie bei Photoshop und anderen Programmen. Guides sind Hilfslinien, die Linealen hinzugefügt werden, um Objekte an diesen Hilfslinien auszurichten.

Nun hab ich dabei die Gelegenheit genutzt, meine Erkenntnisse bei der Implementierung der Guides zu dokumentieren.

Apple hat Lineale bereits bei der Benutzung von NSScrollView vorgesehen und sie lassen sich mit relativ wenig Code aktivieren. Dabei werden Lineale über die Instanzen der Klasse NSRulerView dargestellt.

[scrollView setHasHorizontalRuler:YES];
[scrollView setHasVerticalRuler:YES];

[scrollView setRulersVisible:YES];

Dabei lassen sich Lineare in drei Zonen unterteilen. Zunächst gibt es einen Bereich in welchem das Lineal bzw. die Skala dargestellt wird, gefolgt von einem Bereich in welchem die Marker dargestellt werden. Weiterhin gibt es noch einen Bereich für einen sogenannten Accessory View. Der Accessory View kann benutzt werden um verschiedene Steuerelemente unterzubringen. Ein Beispiel wäre ein Button um alle Hilfslinien zu löschen.

Für die Marker benutzt Apple die Klasse NSRulerMarker und sie lassen sich direkt zu einer NSRulerView Instanz hinzufügen. Zur Darstellung benötigt die Klasse einen NSRulerMarker, ein NSImage sowie einen Ursprungspunkt, der die Grafik im Verhältnis zur Position des Markers positioniert.

NSImage *markerImage = [self horizontalMarkerImage];
NSRulerMarker *rulerMarker = [[NSRulerMarker alloc] initWithRulerView:horizontalRuler markerLocation:location image:markerImage imageOrigin:NSMakePoint(markerImage.size.width / 2.0f, markerImage.size.height / 2.0f)];
[scrollView.horizontalRulerView addMarker:rulerMarker];
[rulerMarker release];

Für die Manipulation der Marker benutzt der Ruler View eine Art Delegate Pattern, wobei sich der Delegate beim Ruler View „Client View“ nennt. Der Client View ist beim Scroll View in der Regel der Document View und lässt sich wie folgt anmelden:

[scrollView.horizontalRulerView setClientView:self.scrollView.documentView];
[scrollView.verticalRulerView setClientView:self.scrollView.documentView];

Für die Funktionen „Bewegen“, „Entfernen“ und „Hinzufügen“ gibt es eine Reihe von Delegate-Methoden, welche der Client View implementieren kann. Dabei gruppieren sich diese Methoden in drei Gruppen jeweils für das Bewegen, das Entfernen und das Hinzufügen der Marker. Folgende Methoden existieren z.B. für das Bewegen der Marker.

rulerView:shouldMoveMarker:
rulerView:willMoveMarker:toLocation:
rulerView:didMoveMarker:

Dabei gibt es eine Methode, die entscheidet ob die jeweilige Aktion überhaupt möglich ist. Es gibt eine Methode, die über den Fortschritt der Aktion informiert und eine Methode, die das Ende der Aktion signalisiert.

Ich habe mir die Mühe gemacht zu analysieren, in welcher Reihenfolge die Methoden aufgerufen werden und habe dies in einem Sequenzdiagramm dargestellt. Zunächst habe ich analysiert was passiert, wenn ich versuche einen Marker zu bewegen. Dabei ist mir aufgefallen, dass Marker nur bewegt werden können, wenn man mit der Maus in dem Marker-Bereich des Ruler View klickt. Das ist leider eine unpraktische Eigenschaft, da ich versucht habe den Marker im Lineal-Bereich anzuzeigen.

Wenn ich nun in den Marker-Bereich klicke, sucht der Ruler View in den gegebenen Markern nach einem Treffer und ruft mit dem gefundenen Marker die eigene Methode trackMarker:withMouseEvent: auf. Die Methode ruft wiederum die Methode trackMouse:adding: von diesem Marker auf und organisiert die weitere Kommunikation mit dem Client View. Vermutlich verwendet der Marker eine modale Event-Verfolgungsschleife (Mouse-Tracking Loop Approach).

Um festzustellen ob der Marker überhaupt bewegt werden darf wird rulerView:shouldMoveMarker: vom Client View ausgeführt und nur wenn diese Methode YES liefert, lässt sich der Marker bewegen. Sobald nun die Mouse bewegt wird, wird der Client View über die Methode rulerView:willMoveMarker: informiert. Interessant ist der Rückgabewert der Methode. Mit dem Rückgabewert kann der Client View Einfluss auf die neue Position nehmen, z.B. um nur diskrete Positionen zu erlauben.

Sobald nun die Maus losgelassen wird, ist die Bewegung beendet und die Methode rulerView:didMoveMarker: wird aufgerufen. Hier lassen sich nun Aktionen mit der neuen Position des Markers durchführen.

Das Hinzufügen von Markern funktioniert ein wenig anders, ist aber insgesamt recht ähnlich. Eine Möglichkeit für das Hinzufügen ist über einen Klick in den Marker-Bereich. Nachdem in den Bereich geklickt wird und der Ruler View keinen Marker für diese Position gefunden hat, ruft der View die Methode rulerView:handleMouseDown: vom Client View auf. Diese Methode gibt dem Client View die Möglichkeit auf Maus-Ereignisse einzugehen. Eine weitere Möglichkeit ist, einen Marker manuell zu instanzieren und zu dem Markern des Ruler Views hinzuzufügen.

Der geplante Weg ist vermutlich, dass der Client View den Ruler View aufruft damit dieser den Marker verwaltet. Ab dem Moment gleicht die Sequenz der Vorherigen.

Bei meiner Suche nach der Funktionsweise der Ruler Views bin ich auf ein schönen Artikel über die Darstellung von Zeilennummern im Ruler View gestoßen: „Displaying Line Numbers with NSTextView“.

Die hypot-Funktion

2012-01-08T20:19:38+01:00

In diversen Fällen ist mir aufgefallen, dass nur Wenige die Funktion hypot („euclidean distance function“) kennen. Mit dieser Funktionen lässt sich elegant der Abstand zwischen zwei Punkten berechnen anstatt die Quadratwurzel aus dem Abstandsquadrat zu berechnen, welcher über den Satz von Pythagoras berechnet wurde.

NSPoint p1, p2;
CGFloat dx = p2.x - p1.x;
CGFloat dy = p2.y - p1.y;

CGFloat length = sqrtf(dx * dx + dy * dy);

Der Abstand lässt sich leichter und wie ich finde weniger fehleranfällig wie folgt berechnen:

CGFloat length = hypotf(dx, dy);

In meinen Verständnis hatte ich immer angenommen, dass die Funktion schneller sein könnte. Und um dies zu überprüfen habe ich ein kleines Programm (git://gist.github.com/1579069.git) geschrieben. Ich musste allerdings feststellen, dass tatsächlich die Funktion hypot langsamer war. Da der Unterschied wie ich finde minimal ist, werde ich weiterhin die Funktion hypot bevorzugen.

Result 1273819835.661994 in 14.537325 seconds (Sqrt)

Result 1273819836.367576 in 19.332056 seconds (Hypot)

Teilkurven von Bezier-Splines

2012-01-08T20:10:22+01:00

Ich hatte folgendes Problem: Ich hatte eine Kurve, dargestellt durch ein Bezier-Spline, an deren Enden jeweils ein Pfeil angezeigt werden sollte. Nun sollte aber die Kurve nicht jeweils um die Länge der Pfeilspitzen verlängert werden, sondern die Kurve sollte um die Länge der Spitzen verkürzt werden.

Als Beispiel wurde hier ein Bezier-Spline mit den beiden Knotenpunkten p1 und p4, sowie mit den Kontrollpunkten p2 und p3 dargestellt. Die Idee ist nun eine Teilkurve zu finden, welche von Start bis End geht.

Nun lassen sich Teile von Splines nicht einfach berechnen wie z.B. bei geraden Linien, weil Splines parametrisierte Kurven sind. Selbst die Länge von Bezier-Splines lässt sich nicht ohne weiteres berechnen. Bei der Suche nach einer Lösung bin auf den wundervollen Artikel „Adaptive Subdivision of Bezier Curves“ von Maxim Shemanarev gestoßen.

Dieser Artikel handelt hauptsächlich von der Berechnung der Länge von Bezier-Splines. Seine Lösung benutzt eine ganze besondere Eigenschaft von Bezier-Splines, bei der von Bezier-Splines zwei Bruchstücke einfach über Trigonometrie berechnen werden können.

In der Darstellung wird gezeigt, dass wir zwei neue Kurven erhalten mit jeweils p1 und p1234 bzw. p1234 und p4 als Knotenpunkte, sowie p12 und p123 bzw. p234 und p34 als Kontrollpunkte.

Mit Hilfe von Intervallschachtelung lassen sich nun die Bruchstücke immer weiter verkleinern. Dabei werden die Bruchstücke dahingehend unterschieden, ob sich die Bruchstücke in dem gewünschten Intervall befinden oder nicht.

Auch hier hab ich ein kleines Demo-Programm geschrieben, um den Algorithmus auszuprobieren. Der Algorithmus ist als Kategorie von NSBezierPath wegen der einfachen Wiederverwendbarkeit implementiert. Auch um die Kategorie universell zu gestalten, habe ich darauf geachtet, dass der Algorithmus mit Linien-Segmenten und auch mit unterbrochen Segmenten umgehen kann. Der Code ist wieder zu finden auf Github.

Blobular Nachbau

2012-01-04T09:02:06+01:00

Vor einiger Zeit bin ich auf ein ganz interessantes Javascript Demo gestoßen. Und zwar geht es um die Darstellung von zwei Kreisen mit einer Kontaktfläche, ähnlich zu zwei Tropfen, welche sich durch die Oberflächenspannung bei geringer Distanz verbinden.

Um diese Grafik zu erzeugen wird mit Hilfe einer Probe Volumen, dessen Radius die Krümmung kontrolliert, die Kontaktfläche modelliert. Im folgenden Schema wird hoffentlich verdeutlich wie ich dabei vorgegangen bin.

Zuerst wird die Position der Probe Volumen (c1, c2) mit Hilfe der Positionen der Kreise (b1, b2) und der Radien (r1, r2) bestimmt. Dabei werden die Schnittpunkte der beiden Kreise durch die Positionen der Kreise der Radien und des Radius des Probevolumens (rp) bestimmt (grün dargestellt).

Der Radius der grünen Kreise ist dabei einmal r1+ rp und entsprechend für den anderen Kreis r2 + rp.

Wie die Schnittpunkte von zwei Kreisen berechnet werden wird ganz gut von dem Artikel „Intersection of two circles“ von Paul Bourke beschrieben.

Die Schnittpunkte bilden nun die Positionen der Probe-Volumen und mit den Winkeln zwischen Positionen der Kreise lassen sich die Winkel bestimmen, mit welchen die verschiedenen Bögen berechnet werden können.

Jetzt gibt es noch einen Spezialfall, wenn beide Kreise weiter voneinander entfernt sind, dann fangen die Probe-Volumen an sich zu überlappen. Als Folge erhalte ich nun zwei getrennte Flächen. Dabei bilden die beiden Schnittpunkte der Probe-Volumen (m1, m2) weitere Stützpunkte für die resultierenden Flächen.

Für Interessierte ist der Code zu finden auf Github. Die Kreise lassen sich per Maus verschieben und der Radius des Probe-Volumen lässt sich über das Menü steuern. Eine interessante Erweiterung für eine zukünftige Version wäre z.B. mehr als zwei Kreise zu haben.

Einleitung

2011-12-13T09:27:22+01:00

Hallo Zusammen,
ich will ein Blog führen zu den täglichen Herausforderungen, auf die ich so während meiner Arbeit treffe, in der Hoffnung, dass der eine oder andere davon profitieren kann. Die meisten Artikel werden sich auf Cocoa Programmierung für die Mac und iOS Platform beziehen, da das mein Hauptarbeitsfeld und Hobby ist.

Ich arbeite hauptsächlich als freiberuflicher Programmierer an Projekten für das iPhone, iPad und Mac. In meiner Freizeit (wenn ich welche habe), schreibe ich an meinen eigenen Mac Applikationen.

Ein bisschen zu meiner Person: Ich habe jahrelang mein Geld als Java Programmierer von Webapplikationen verdient und war der Sprache und Platform überdrüssig geworden. Und mal ehrlich: Kein Mensch kann Desktop Applikationen in Java ernst nehmen. Vielleicht noch Eclipse, aber das war es auch schon.

Jedenfalls habe ich dann begonnen Cocoa zu programmieren, als Hobby und noch bevor das iPhone Mainstream wurde. Mit dem Einzug von iPhone und später dem iPad habe ich eine Reihe von Projekten nebenberuflich geführt. Dies war so erfolgreich, dass ich mich später dazu entschied mich selbstständig zu machen. Und bis jetzt auch noch nicht bereut habe.

Aus naheliegenden Gründen bin ich deshalb immer interessiert an Anfragen bzgl. neuer Projekte. Einfach ein Mail schicken an stephan.michels@gmail.com