<h1><a name="mobile_ui" id="mobile_ui">Mobile UI</a></h1>
<div class="level1">

<p>

Mit PNP4Nagios 0.6.14 ist ein Webinterface f&uuml;r mobile Endger&auml;te in PNP4Nagios integriert worden.
</p>

<p>
Das Design wurde mit <a href="http://jquerymobile.com/" class="urlextern" title="http://jquerymobile.com/"  rel="nofollow">jQuery Mobile</a> realisiert und ist somit mit den aktuellen mobilen Browsern kompatibel. Auf der Liste der <a href="http://jquerymobile.com/gbs/" class="urlextern" title="http://jquerymobile.com/gbs/"  rel="nofollow">unterst&uuml;tzten Ger&auml;te</a> sind die einzelnen Browser aufgef&uuml;hrt und nach Grad der Unterst&uuml;tzung klassifiziert.
</p>

</div>
<!-- SECTION "Mobile UI" [1-423] -->
<h1><a name="landing_page" id="landing_page">Landing Page</a></h1>
<div class="level1">

<p>

Das Webinterface wurde so gestaltet, dass die &uuml;blichen Links auf das klassische Interface abgefangen und auf die entsprechende mobile Seite umgeleitet werden. Somit k&ouml;nnen weiterhin innerhalb der Nagios-Mails Links zu PNP-Graphen eingebunden werden, die je nach Endger&auml;t auf die passende Seite verweisen.

</p>
<table class="inline">
	<tr class="row0">
		<th class="col0"> Classic </th><th class="col1"> Mobile </th>
	</tr>
	<tr class="row1">
		<td class="col0 leftalign"> /pnp4nagios/graph                         </td><td class="col1"> /pnp4nagios/mobile </td>
	</tr>
	<tr class="row2">
		<td class="col0 leftalign"> /pnp4nagios/graph?host=localhost          </td><td class="col1"> /pnp4nagios/mobile/host/localhost </td>
	</tr>
	<tr class="row3">
		<td class="col0"> /pnp4nagios/graph?host=localhost&amp;srv=ping </td><td class="col1"> /pnp4nagios/mobile/graph/localhost/ping </td>
	</tr>
</table>

</div>
<!-- SECTION "Landing Page" [424-1019] -->
<h1><a name="browser-erkennung" id="browser-erkennung">Browser-Erkennung</a></h1>
<div class="level1">

<p>

Browser werden anhand ihres “User-Agent”-Strings als mobile Browser erkannt.
Die Erkennung kann in der Datei <code>pnp4nagios/etc/<a href="/de/pnp-0.6/webfe_cfg" class="wikilink1" title="de:pnp-0.6:webfe_cfg">config_local.php</a></code> beeinflusst werden.
</p>
<pre class="code">
$conf[&#039;mobile_devices&#039;] = &#039;iPhone|iPod|iPad|android&#039;;
</pre>

<p>
Die Option &#039;mobile_devices&#039; beinhaltet einen regul&auml;ren Ausdruck, welcher mit dem “User Agent” des Browsers verglichen wird.
</p>

<p>
Der “User Agent” eines Browsers wird im Webserver-Access-Log protokolliert und sieht f&uuml;r ein iOS-Device in etwa wie folgt aus.
</p>
<pre class="code">
&quot;Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7&quot;
</pre>

</div>
<!-- SECTION "Browser-Erkennung" [1020-1721] -->
<h1><a name="screenshots" id="screenshots">Screenshots</a></h1>
<div class="level1">

<p>

Screenshot aufgenommen mit einem iPhone und iOS 4.2

</p>
<table class="inline">
	<tr class="row0">
		<td class="col0"> <a href="/_detail/mobile-home.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-home.png"><img src="/_media/mobile-home.png?w=150" class="media" title=" Home Screen" alt=" Home Screen" width="150" /></a> </td><td class="col1"> Homescreen </td><td class="col2"> <a href="/_detail/mobile-loading.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-loading.png"><img src="/_media/mobile-loading.png?w=150" class="media" title=" Loading..." alt=" Loading..." width="150" /></a> </td><td class="col3"> Loading … </td>
	</tr>
	<tr class="row1">
		<td class="col0"> <a href="/_detail/mobile-hostlist.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-hostlist.png"><img src="/_media/mobile-hostlist.png?w=150" class="media" title=" Hosts Liste " alt=" Hosts Liste " width="150" /></a> </td><td class="col1"> Liste aller Hosts </td><td class="col2"> <a href="/_detail/mobile-servicelist.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-servicelist.png"><img src="/_media/mobile-servicelist.png?w=150" class="media" title=" Liste aller services" alt=" Liste aller services" width="150" /></a> </td><td class="col3"> Liste aller Services eines Hosts</td>
	</tr>
	<tr class="row2">
		<td class="col0"> <a href="/_detail/mobile-graphs.png?id=de%3Apnp-0.6%3Amobile" class="media" title="mobile-graphs.png"><img src="/_media/mobile-graphs.png?w=150" class="media" title=" Graphen" alt=" Graphen" width="150" /></a> </td><td class="col1"> Graphen eines Services </td><td class="col2"> </td><td class="col3"> </td>
	</tr>
</table>

</div>
<!-- SECTION "Screenshots" [1722-] -->