<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="magic-mirror.vala" xml:lang="sv">

  <info>
  <title type="text">Magisk spegel (Vala)</title>
    <link type="guide" xref="vala#examples"/>

    <desc>Använd din webbkamera som en spegel med GStreamer-ramverket och GTK+</desc>

    <revision pkgversion="0.1" version="0.1" date="2011-03-19" status="review"/>
    <credit type="author">
      <name>Daniel G. Siegel</name>
      <email its:translate="no">dgsiegel@gnome.org</email>
    </credit>
    <credit type="author">
      <name>Johannes Schmid</name>
      <email its:translate="no">jhs@gnome.org</email>
    </credit>
    <credit type="editor">
      <name>Marta Maria Casetti</name>
      <email its:translate="no">mmcasetti@gmail.com</email>
      <years>2013</years>
    </credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Sebastian Rasmussen</mal:name>
      <mal:email>sebras@gmail.com</mal:email>
      <mal:years>2019</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Anders Jonsson</mal:name>
      <mal:email>anders.jonsson@norsjovallen.se</mal:email>
      <mal:years>2021</mal:years>
    </mal:credit>
  </info>

<title>Magisk spegel</title>

<synopsis>
  <p><em>Din spegel föll ner och gick i tusen bitar — men du behöver en spegel för att raka skägget eller sminka dig! Du har bara 15 minuter innan bussen till jobbet går. Vad ska du göra?</em></p>
  <p>I denna handledning kommer vi göra ett program som låter dig använda din webbkamera som en spegel. Du kommer lära dig hur du:</p>
  <list>
    <item><p>Skapar ett GTK+-program</p></item>
    <item><p>Kommer åt din webbkamera med GStreamer och bäddar in resultatet i ett fönster</p></item>
    <item><p>Får bilder från din webbkamera</p></item>
  </list>
  <p>Du behöver följande för att kunna följa denna handledning:</p>
  <list>
    <item><p>En installerad kopia av den <link xref="getting-ready">integrerade utvecklingsmiljön Anjuta</link></p></item>
    <item><p>Installerade kopior av GTK, GStreamer och en Vala-kompilator</p></item>
    <item><p>Grundläggande kunskap i ett objektorienterat programmeringsspråk</p></item>
  </list>
</synopsis>

<media type="image" mime="image/png" src="media/magic-mirror.png"/>

<section id="anjuta">
  <title>Skapa ett projekt i Anjuta</title>
  <p>Innan du börjar koda kommer du behöva konfigurera ett nytt projekt i Anjuta. Detta kommer skapa alla filer som du behöver för att bygga och köra koden senare. Det är också användbart för att hålla allting samlat.</p>
  <steps>
    <item>
    <p>Starta Anjuta och klicka på <guiseq><gui>Arkiv</gui><gui>Ny</gui><gui>Projekt</gui></guiseq> för att öppna projektguiden.</p>
    </item>
    <item>
    <p>Välj <gui>GTK+ (enkel)</gui> från fliken <gui>Vala</gui>, klicka på <gui>Framåt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>magic-mirror</file> som projektnamn och katalog.</p>
   	</item>
   	<item>
    <p>Inaktivera <gui>Använd GtkBuilder för användargränssnitt</gui> då vi kommer skapa användargränssnittet manuellt i denna handledning. Se handledningen <link xref="guitar-tuner.vala">Gitarrstämmare</link> för användning av gränssnittsbyggaren.</p>
    </item>
    <item>
    <p>Säkerställ att <gui>Konfigurera externa paket</gui> är valt. På nästa sida, välj <em>gstreamer-0.10</em> från listan för att inkludera <app>GStreamer</app>-biblioteket i ditt projekt.</p>
    </item>
    <item>
    <p>Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/magic_mirror.vala</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du bör se kod som börjar med raderna:</p>
    <code mime="text/x-csharp">
using GLib;
using Gtk;</code>
    </item>
  </steps>
</section>

<section id="build">
  <title>Bygg koden för första gången</title>
  <p>The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:</p>
  <list>
  <item>
    <p>De två <code>using</code>-raderna importerar namnrymder så vi inte behöver namnge dem explicit.</p>
   </item>
   <item>
    <p>The constructor of the <code>Main</code> class creates a new window and sets its title. Afterwards the window
    is shown and a signal is connected which quits the application if the window is closed. More on signals later on.</p>
   </item>
   <item>
    <p>The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.Main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).</p>
   </item>
  </list>

  <p>Denna kod är klar att användas, så du kan kompilera den genom att klicka på <guiseq><gui>Bygg</gui><gui>Bygg projekt</gui></guiseq> (eller trycka <keyseq><key>Skift</key><key>F7</key></keyseq>).</p>
  <p>Change the <gui>Configuration</gui> to <gui>Default</gui> and then press <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.</p>
</section>

<section id="webcam">
 <title>Kom åt webbkamerans videoström med GStreamer</title>
 <p>GStreamer-multimediaramverket kan hantera video från webbkameror. Låt oss lägga till GStreamer till vårt program så vi kan komma åt videoströmmen.</p>

<code mime="text/x-csharp" style="numbered">
using GLib;
using Gtk;

public class Main : Object
{
	private Gst.Element camerabin;

	public Main () {
		this.camerabin = Gst.ElementFactory.make ("camerabin", "camera");
		this.camerabin.set_state (Gst.State.PLAYING);
	}

	static int main (string[] args) {
		Gtk.init (ref args);
		Gst.init (ref args);
		var app = new Main ();

		Gtk.main ();

		return 0;
	}
}
</code>
 <steps>
 <item><p>Först tar vi bort fönstret vi skapade tidigare, för GStreamer kommer ta hand om att visa bilden på skärmen.</p>
 </item>
  <item>
  <p>
  Now we are creating a GStreamer element which accesses our webcam. We are
  using the Camerabin element, which is an all-in-one camera element and is
  capable of taking photos, videos, applying effects and much more. Perfect for
  our use case! With <code>this.camerabin.set_state (Gst.State.PLAYING)</code>
  we tell the GStreamer pipeline we just created to start playing. Easy, no?
  </p>
  <p>Of course it is also possible to integrate the video more tightly into other
  windows but that is an advanced topic that includes some details of the X Window
  System we will omit here.
  </p>
  <p>
  Compile and run it again. You will end up with two windows. In the next step
  we will integrate the video into the GTK+ window.
  </p>
  </item>
 </steps>
</section>

<section id="impl">
 <title>Referensimplementation</title>
 <p>If you run into problems with the tutorial, compare your code with this <link href="magic-mirror/magic-mirror.vala">reference code</link>.
 There is also a more <link href="magic-mirror/magic-mirror-advanced.vala">extensive implementation</link> that embeds the window into a regular Gtk.Window
 which involves some advanced techniques, and adds buttons to start/stop the picture.</p>
</section>

<section id="further">
<title>Vidare läsning</title>
<p>För att lära dig mer om programmeringsspråket Vala kan du vilja ta en titt på <link href="http://live.gnome.org/Vala/Tutorial">Vala-handledningen</link>.</p>
</section>

<section id="conclusion">
<title>Avslutning</title>
  <p>
  That's it, you have managed to create a full-featured webcam photo
  application in 15 minutes. Now you can shave your beard off or add some makeup
  to your beautiful face, right before having a beautiful day at your
  workplace, where you can impress your friends and colleagues with an awesome
  application you just made in 15 minutes.
  </p>

</section>

</page>
