---
layout: page
title: Screenshots
permalink: /screenshots/
---

<div class="row">

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/console.png" alt="Console View" />

			<div class="caption">
				<p class="lead">Console View</p>

				<p>This is the main ZoneMinder console. As you can see it lists the monitors and their states and also details various other information such as alarm counts. I've had to scale this a bit to get it to fit which has messed it up a bit, you can click on the image to view it full size. There are several things you can click on in this view.</p>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/montage.png" alt="Montage View" />

			<div class="caption">
				<p class="lead">Montage View</p>

				<p>Clicking on the 'montage' link takes you to this page which shows all active monitors and their current state.</p>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/watch.png" alt="Watch View" />

			<div class="caption">
				<p class="lead">Watch View</p>

				<p>This image shows a 'live' feed from one of the monitors. Under the live images are lists of some previous events for this monitor.</p>
			</div>
		</div>
	</div>

</div>

<div class="row">

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/control.png" alt="PTZ View" />

			<div class="caption">
				<p class="lead">PTZ View</p>

				<p>The monitor in the previous shot happened to be using a controllable Pan/Tilt/Zoom (PTZ) camera. So instead of the event listing you can instead display a panel to control the camera as in this image.</p>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/timeline.png" alt="Timeline View" />

			<div class="caption">
				<p class="lead">Timeline View</p>

				<p>Viewing events in the Timeline View.</p>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/events.png" alt="Events View" />

			<div class="caption">
				<p class="lead">Events View</p>

				<p>The Events View</p>
			</div>
		</div>
	</div>

</div>

<div class="row">

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/filter.png" alt="Filter View" />

			<div class="caption">
				<p class="lead">Filter View</p>

				<p>This is the filter window which allows you to customise or select which events you see, or load previously saved filters and save filters to automatically delete, archive or email events etc.</p>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/event.png" alt="Event View" />

			<div class="caption">
				<p class="lead">Event View</p>

				<p>Whichever event list view you choose (and you can always flip between them), you can review or get more detail about an event by clicking on it to bring up the window shown here. This event is about one third of the way through replay which you can tell by the progress bar just under the image. You can also click on this to navigate to certain locations in events.</p>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/stills.png" alt="Stills View" />

			<div class="caption">
				<p class="lead">Stills View</p>

				<p>Replaying the event is good for getting an idea of what was going on. However it is often useful to be able to inspect certain frames more closely. Clicking on the 'Stills' link takes you to this view, where you can view the individual frames that make up an event. Frames that triggered the alarm, via motion detection, are highlighted by a red border.</p>
			</div>
		</div>
	</div>

</div>


<div class="row">

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/zones.png" alt="Zones View" />

			<div class="caption">
				<p class="lead">Zones View</p>

				<p>One of the keys to using ZoneMinder successfully is the concept of zones. Zones are areas within an image that you can define for the purposes of motion detection, or even ignoring motion. From the Console view you can click on the Zones column to get this summary view of the zones for a monitor. The zones are displayed on the image and also listed below. They are colour coded depending on their purpose.</p>
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/zone.png" alt="Zone View" />

			<div class="caption">
				<p class="lead">Zone View</p>

				<p>Clicking on one of the zones in the image will bring up a configuration screen where you can define the shape and sensitivity of the zone in order to maximise detection or prevent false alarms for instance.  Picking on one of the zones in the image will bring up a configuration screen where you can define the shape and sensitivity of the zone in order to maximise detection or prevent false alarms for instance.
			</div>
		</div>
	</div>

	<div class="col-md-4">
		<div class="thumbnail">
			<img class="img-responsive img-thumbnail" src="/images/options.png" alt="Options View" />

			<div class="caption">
				<p class="lead">Options View</p>

				<p>There are various options you can use to control ZoneMinder. In fact there are lots! Here is a shot of the Options dialog which is accessible from the Console view. There are several tabs that group the options into categories. Clicking on the ? by an option will give you help for that option.</p>
			</div>
		</div>
	</div>

</div>