initial commit

ClickableLabel.cpp

@@ -0,0 +1,42 @@
+#include "ClickableLabel.h"
+
+/// \fn ClickableLabel::ClickableLabel(QWidget *parent)
+/// \~English
+/// \brief Constructor
+/// \~Spanish
+/// \brief Constructor
+ClickableLabel::ClickableLabel(QWidget *parent) : QLabel(parent) {
+    this->x = 0;
+    this->y = 0;
+}
+
+/// \fn void ClickableLabel::mouseMoveEvent(QMouseEvent *ev)
+/// \~English
+/// \brief Funtion to add mouse event to the labelWidget
+/// \~Spanish
+/// \brief Funcion para anadir evento del raton (mouse) al labelWidget
+void ClickableLabel::mouseMoveEvent(QMouseEvent *ev){
+    emit Mouse_Pos();
+    this->x = ev->x();
+    this->y = ev->y();
+}
+
+/// \fn void ClickableLabel::mousePressEvent(QMouseEvent *ev)
+/// \~English
+/// \brief Funtion to add mouse event to the labelWidget
+/// \~Spanish
+/// \brief Funcion para anadir evento del raton (mouse) al labelWidget
+void ClickableLabel::mousePressEvent(QMouseEvent *ev){
+    x = ev->x();
+    y = ev->y();
+    emit Mouse_Pressed();
+}
+
+/// \fn void ClickableLabel::leaveEvent(QEvent *)
+/// \~English
+/// \brief Funtion to add mouse event to the labelWidget
+/// \~Spanish
+/// \brief Funcion para anadir evento del raton (mouse) al labelWidget
+void ClickableLabel::leaveEvent(QEvent *){
+    emit Mouse_Left();
+}

ClickableLabel.h

@@ -0,0 +1,54 @@
+#ifndef CLICKABLELABEL_H
+#define CLICKABLELABEL_H
+
+#include <QLabel>
+#include <QMouseEvent>
+#include <QDebug>
+
+/// A class that permits a label to be clicked.
+///
+/// With this class we can determine de mouse position when is pressed
+/// and when the mouse left the label.
+///
+class ClickableLabel : public QLabel{
+    Q_OBJECT
+public:
+
+    /// \fn ClickableLabel::ClickableLabel(QWidget *parent)
+    /// \~English
+    /// \brief Constructor
+    /// \~Spanish
+    /// \brief Constructor
+    explicit ClickableLabel(QWidget *parent = 0);
+
+    /// \fn void ClickableLabel::mouseMoveEvent(QMouseEvent *ev)
+    /// \~English
+    /// \brief Funtion to add mouse event to the labelWidget
+    /// \~Spanish
+    /// \brief Funcion para anadir evento del raton (mouse) al labelWidget
+    void mouseMoveEvent(QMouseEvent *ev);
+
+    /// \fn void ClickableLabel::mousePressEvent(QMouseEvent *ev)
+    /// \~English
+    /// \brief Funtion to add mouse event to the labelWidget
+    /// \~Spanish
+    /// \brief Funcion para anadir evento del raton (mouse) al labelWidget
+    void mousePressEvent(QMouseEvent *ev);
+
+    /// \fn void ClickableLabel::leaveEvent(QEvent *)
+    /// \~English
+    /// \brief Funtion to add mouse event to the labelWidget
+    /// \~Spanish
+    /// \brief Funcion para anadir evento del raton (mouse) al labelWidget
+    void leaveEvent(QEvent *);
+    int x,y;
+
+signals:
+    void Mouse_Pressed();
+    void Mouse_Pos();
+
+
+    void Mouse_Left();
+};
+
+#endif // CLICKABLELABEL_H

Filter.cpp

@@ -0,0 +1,20 @@
+// RAAN - 2014-07-19 : Ghost function and minor changes to parameters
+/// \file
+///
+#include "MergePanel.h"
+
+/// \fn void MainWindow::MergeImages(const QImage &objectImage, const QImage &backgroundImage, QImage & mergedImage, int threshold, bool ghost, int x, int y, int offset_x, int offset_y)
+/// \~English
+/// \brief Funcion that merges two images together. It takes an image with any background color
+/// and puts it in another image that will act as a background. (Implements Greenscreen techonology)
+/// \~Spanish
+/// \brief Funcion que fusiona dos imagenes juntas.  Toma una image con cualquier color de trasfondo
+/// y lo pone en otra imagen que actual como el  trasfondo. (Implementa la tecnologia de trasfondo verde)
+void MainWindow::MergeImages(const QImage &objectImage, const QImage &backgroundImage, QImage & mergedImage, int threshold, bool ghost, int x, int y,
+                 int offset_x, int offset_y){
+    
+
+    // YOUR CODE HERE
+
+
+}

GreenScreenLab.pro

@@ -0,0 +1,29 @@
+#-------------------------------------------------
+#
+# Project created by QtCreator 2014-04-06T14:26:51
+#
+#-------------------------------------------------
+
+QT       += core gui
+
+greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
+
+TARGET = GreenScreen
+TEMPLATE = app
+
+
+SOURCES += main.cpp\
+    Filter.cpp \
+    MergePanel.cpp \
+    ClickableLabel.cpp
+
+HEADERS  += \
+    MergePanel.h \
+    ClickableLabel.h
+
+FORMS    += \
+    MergePanel.ui
+
+RESOURCES += \
+    images.qrc \
+    style.qrc

MergePanel.cpp

@@ -0,0 +1,181 @@
+#include "MergePanel.h"
+#include "ui_MergePanel.h"
+#include <QDebug>
+
+#include "ClickableLabel.h"
+
+/// \fn MainWindow::MainWindow(QWidget *parent)
+/// \~English
+/// \brief Default Constructor for the MainWindow.
+/// \~Spanish
+/// \brief Constructor por defecto del MainWindow.
+MainWindow::MainWindow(QWidget *parent) :
+    QMainWindow(parent),
+    ui(new Ui::MainWindow)
+{
+    ui->setupUi(this);
+
+    // Signal connections
+    // Conexion de senales
+
+    // Closes window with cmd + w
+    // Cierra la ventana con cmd + w
+    new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_W), this, SLOT(close()));
+    // Opens a image with cmd + o
+    // Abre una imagen con cmd + o
+    new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_O), this, SLOT(on_btnSelectImage_clicked()));
+    // Opens background image with cmd + n
+    // Abre imagen de transfondo con cmd + n
+    new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_N), this, SLOT(on_btnSelectBackground_clicked()));
+    // Saves an image with cmd + s
+    // Guarda una imagen con cmd + s
+    new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_S), this, SLOT(on_btnSaveImage_clicked()));
+    // Merges two images with cmd + m
+    // Fuciona dos imagenes con cmd + m
+    new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_M), this, SLOT(on_btnMergeImages_clicked()));
+    // Makes the label clickable.
+    // Hace el labelWidget cliqueable.
+    connect(ui->lblOriginalImage, SIGNAL(Mouse_Pressed()), this, SLOT(Mouse_Pressed()));
+    connect(ui->lblBackgroundImage, SIGNAL(Mouse_Pressed()), this, SLOT(Mouse_PressedBackground())) ;
+}
+
+/// \fn MainWindow::~MainWindow(QWidget *parent)
+/// \~English
+/// \brief Destructor for the MainWindow.
+/// \~Spanish
+/// \brief Destructor del MainWindow.
+MainWindow::~MainWindow(){
+    delete ui;
+}
+
+/// \fn void MainWindow::on_btnSelectImage_clicked()
+/// \~English
+/// \brief Display the file browsing window to load an image. (Green Background)
+/// \~Spanish
+/// \brief Despliega la ventana de busqueda de archivos para subir una imagen. (Trasfondo verde)
+void MainWindow::on_btnSelectImage_clicked(){
+    QString fname = QFileDialog::getOpenFileName(this, tr("Choose an image"), QDir::homePath());
+        if (!fname.isEmpty()){
+            QImage image(fname);
+            if (image.isNull()){
+                QMessageBox::information(this, tr("Choose an image"),tr("Cannot load %1.").arg(fname));
+                return ;
+            }
+            originalImage=image;
+        }
+    ui->lblOriginalImage->setPixmap(QPixmap::fromImage(originalImage));
+    ui->origSize->setText("Original Image Size: " + QString::number(originalImage.width()) + "x" +QString::number(originalImage.height()));
+}
+
+/// \fn void MainWindow::on_btnSelectBackground_clicked()
+/// \~English
+/// \brief Display the file browsing window to load a background image.
+/// \~Spanish
+/// \brief Despliega la ventana de busqueda de archivos para subir una imagen para el trasfondo.
+void MainWindow::on_btnSelectBackground_clicked(){
+    QString fname = QFileDialog::getOpenFileName(this, tr("Choose an image"), QDir::homePath());
+        if (!fname.isEmpty()){
+            QImage image(fname);
+            if (image.isNull()){
+                QMessageBox::information(this, tr("Choose an image"),tr("Cannot load %1.").arg(fname));
+                return ;
+            }
+            backgroundImage=image;
+        }
+    ui->lblBackgroundImage->setPixmap(QPixmap::fromImage(backgroundImage));
+    ui->bgSize->setText("Original Image Size: " + QString::number(backgroundImage.width()) + "x" +QString::number(backgroundImage.height()));
+}
+
+/// \fn void MainWindow::on_btnMergeImages_clicked()
+/// \~English
+/// \brief  Invokes the function that merges the green screen image with the background image,
+/// then displays the merged image.
+/// \~Spanish
+/// \brief Invoca la funcion que fusional la imagen con transfondo verde con la imagen de transfondo,
+/// entonces displiega la imagen fusionada.
+void MainWindow::on_btnMergeImages_clicked(){
+    if (originalImage.width() > backgroundImage.width() || originalImage.height() > backgroundImage.height()){
+        originalImage = originalImage.scaled(backgroundImage.width(), backgroundImage.height(), Qt::KeepAspectRatio, Qt::FastTransformation) ;
+    }
+    mergedImage = backgroundImage;
+    MergeImages(originalImage, backgroundImage, mergedImage, ui->thresholdSlider->value(),ui->ghostBox->isChecked(), ui->lblOriginalImage->x, ui->lblOriginalImage->y, ui->lblBackgroundImage->x, ui->lblBackgroundImage->y);
+    ui->lblMergedImage->setPixmap(QPixmap::fromImage(mergedImage));
+
+}
+
+/// \fn void MainWindow::on_btnSaveImage_clicked()
+/// \~English
+/// \brief Displays the file browse window to choose the path to save
+/// the merged image in the file system.
+/// \~Spanish
+/// \brief Despliega la ventana de busqueda de archivos para escoger un camino
+/// guardar la imagen fusionada en el sistema de archivos.
+void MainWindow::on_btnSaveImage_clicked(){
+    if(!mergedImage.isNull()){
+        QPixmap out = QPixmap::grabWidget(this,361,10,481,481);
+        QString fname = QFileDialog::getSaveFileName(this, tr("Save Merged Image"), (""), tr("PNG (*.png)" ));
+        mergedImage.save(fname, "PNG");
+    }
+}
+
+/// \fn void MainWindow::Mouse_Pressed()
+/// \~English
+/// \brief Function that gets the coordinates of the image with the greenscreen.
+/// \~Spanish
+/// \brief Funcion que obtiene las coordenada de la imagen con el trasfondo verde.
+void MainWindow::Mouse_Pressed(){
+    if (!originalImage.isNull()){
+        if (originalImage.height() < ui->lblOriginalImage->height())
+               ui->lblOriginalImage->y = ui->lblOriginalImage->y * ui->lblOriginalImage->height()/originalImage.height();
+        else
+               ui->lblOriginalImage->y = ui->lblOriginalImage->y * originalImage.height()/ui->lblOriginalImage->height();
+        if(originalImage.width() < ui->lblOriginalImage->width())
+             ui->lblOriginalImage->x = ui->lblOriginalImage->x * ui->lblOriginalImage->width()/originalImage.width();
+        else
+            ui->lblOriginalImage->x = ui->lblOriginalImage->x * originalImage.width()/ui->lblOriginalImage->width();
+        ui->origCoord->setText("Selected Coord: (" + QString::number(ui->lblOriginalImage->x) + ","+QString::number(ui->lblOriginalImage->y) + ")" );
+    }
+}
+
+/// \fn void MainWindow::Mouse_Pressed()
+/// \~English
+/// \brief Function that gets the coordinaates of the image with the final background.
+/// \~Spanish
+/// \brief Funcion que obtiene las coordenada de la imagen con el trasfondo final.
+void MainWindow::Mouse_PressedBackground(){
+    if (!backgroundImage.isNull()){
+        if (backgroundImage.height() < ui->lblBackgroundImage->height())
+                ui->lblBackgroundImage->y = ui->lblBackgroundImage->y * ui->lblBackgroundImage->height()/backgroundImage.height();
+        else
+               ui->lblBackgroundImage->y = ui->lblBackgroundImage->y * backgroundImage.height()/ui->lblBackgroundImage->height();
+        if(backgroundImage.width() < ui->lblBackgroundImage->width())
+             ui->lblBackgroundImage->x = ui->lblBackgroundImage->x * ui->lblBackgroundImage->width()/backgroundImage.width();
+        else
+            ui->lblBackgroundImage->x = ui->lblBackgroundImage->x * backgroundImage.width()/ui->lblBackgroundImage->width();
+        ui->backCoord->setText("Selected Coord: (" + QString::number(ui->lblBackgroundImage->x) + ","+QString::number(ui->lblBackgroundImage->y) + ")" );
+    }
+}
+
+/// \fn void MainWindow::on_thresholdSlider_actionTriggered()
+/// \~English
+/// \brief Invokes the function that merges the green screen image with the background image.
+/// \~Spanish
+/// \brief Invoca la funcion que fusiona la imagen de trasfondo verde con la imagen del trasfondo final.
+void MainWindow::on_thresholdSlider_actionTriggered(){
+    if (originalImage.width() > backgroundImage.width() || originalImage.height() > backgroundImage.height())
+        originalImage = originalImage.scaled(backgroundImage.width(), backgroundImage.height(), Qt::KeepAspectRatio, Qt::FastTransformation) ;
+    mergedImage = backgroundImage;
+    MergeImages(originalImage, backgroundImage, mergedImage, ui->thresholdSlider->value(), ui->ghostBox->isChecked(), ui->lblOriginalImage->x, ui->lblOriginalImage->y, ui->lblBackgroundImage->x, ui->lblBackgroundImage->y);
+    ui->lblMergedImage->setPixmap(QPixmap::fromImage(mergedImage));
+}
+
+/// \fn void MainWindow::on_ghostBox_clicked()
+/// \~English
+/// \brief Funtion that invokes the thresholdSlider function and creates a
+/// ghost version of the image with greenscreen background.
+/// \~Spanish
+/// \brief Funcion que invoca la funcion thresholdSlider y crea una version
+/// fantasma de la imagen con el trasfondo verde.
+void MainWindow::on_ghostBox_clicked(){
+    on_thresholdSlider_actionTriggered();
+}

MergePanel.h

@@ -0,0 +1,122 @@
+#ifndef MAINWINDOW_H
+#define MAINWINDOW_H
+
+#include <QMainWindow>
+#include <QFileDialog>
+#include <QDir>
+#include <QMessageBox>
+#include <QShortcut>
+#include <QImage>
+#include <QDebug>
+#include <cmath>
+
+/// Main class for the program.
+///
+/// This class contains the main functions for the program.
+/// There are functions for merging two images together,
+/// a function that creates a ghost version of the first image on the merge image,
+/// and the functions for the GUI.
+
+namespace Ui {
+class MainWindow;
+}
+
+class MainWindow : public QMainWindow
+{
+    Q_OBJECT
+
+public:
+    /// \fn MainWindow::MainWindow(QWidget *parent)
+    /// \~English
+    /// \brief Default Constructor for the MainWindow.
+    /// \~Spanish
+    /// \brief Constructor por defecto del MainWindow.
+    explicit MainWindow(QWidget *parent = 0);
+
+    /// \fn void MainWindow::MergeImages(const QImage &objectImage, const QImage &backgroundImage, QImage & mergedImage, int threshold, bool ghost, int x, int y, int offset_x, int offset_y)
+    /// \~English
+    /// \brief Funcion that merges two images together. It takes an image with any background color
+    /// and puts it in another image that will act as a background. (Implements Greenscreen techonology)
+    /// \~Spanish
+    /// \brief Funcion que fusiona dos imagenes juntas.  Toma una image con cualquier color de trasfondo
+    /// y lo pone en otra imagen que actual como el  trasfondo. (Implementa la tecnologia de trasfondo verde)
+    void MergeImages(const QImage &, const QImage &, QImage &, int, bool=false, int=0, int=0, int=0, int=0) ;
+
+    /// \fn MainWindow::~MainWindow(QWidget *parent)
+    /// \~English
+    /// \brief Destructor for the MainWindow.
+    /// \~Spanish
+    /// \brief Destructor del MainWindow.
+    ~MainWindow();
+
+private slots:
+    /// \fn void MainWindow::on_ghostBox_clicked()
+    /// \~English
+    /// \brief Funtion that invokes the thresholdSlider function and creates a
+    /// ghost version of the image with greenscreen background.
+    /// \~Spanish
+    /// \brief Funcion que invoca la funcion thresholdSlider y crea una version
+    /// fantasma de la imagen con el trasfondo verde.
+    void on_ghostBox_clicked();
+
+    /// \fn void MainWindow::on_btnSelectImage_clicked()
+    /// \~English
+    /// \brief Display the file browsing window to load an image. (Green Background)
+    /// \~Spanish
+    /// \brief Despliega la ventana de busqueda de archivos para subir una imagen. (Trasfondo verde)
+    void on_btnSelectImage_clicked();
+
+    /// \fn void MainWindow::on_btnSelectBackground_clicked()
+    /// \~English
+    /// \brief Display the file browsing window to load a background image.
+    /// \~Spanish
+    /// \brief Despliega la ventana de busqueda de archivos para subir una imagen para el trasfondo.
+    void on_btnSelectBackground_clicked();
+
+    /// \fn void MainWindow::on_btnMergeImages_clicked()
+    /// \~English
+    /// \brief  Invokes the function that merges the green screen image with the background image,
+    /// then displays the merged image.
+    /// \~Spanish
+    /// \brief Invoca la funcion que fusional la imagen con transfondo verde con la imagen de transfondo,
+    /// entonces displiega la imagen fusionada.
+    void on_btnMergeImages_clicked();
+
+    /// \fn void MainWindow::on_btnSaveImage_clicked()
+    /// \~English
+    /// \brief Displays the file browse window to choose the path to save
+    /// the merged image in the file system.
+    /// \~Spanish
+    /// \brief Despliega la ventana de busqueda de archivos para escoger un camino
+    /// guardar la imagen fusionada en el sistema de archivos.
+    void on_btnSaveImage_clicked();
+
+    /// \fn void MainWindow::Mouse_Pressed()
+    /// \~English
+    /// \brief Function that gets the coordinates of the image with the greenscreen.
+    /// \~Spanish
+    /// \brief Funcion que obtiene las coordenada de la imagen con el trasfondo verde.
+    void Mouse_Pressed();
+
+    /// \fn void MainWindow::Mouse_Pressed()
+    /// \~English
+    /// \brief Function that gets the coordinaates of the image with the final background.
+    /// \~Spanish
+    /// \brief Funcion que obtiene las coordenada de la imagen con el trasfondo final.
+    void Mouse_PressedBackground() ;
+
+    /// \fn void MainWindow::on_thresholdSlider_actionTriggered()
+    /// \~English
+    /// \brief Invokes the function that merges the green screen image with the background image.
+    /// \~Spanish
+    /// \brief Invoca la funcion que fusiona la imagen de trasfondo verde con la imagen del trasfondo final.
+    void on_thresholdSlider_actionTriggered();
+
+private:
+    Ui::MainWindow *ui;
+    QImage originalImage;
+    QImage backgroundImage;
+    QImage mergedImage;
+};
+
+#endif // MAINWINDOW_H

MergePanel.ui

@@ -0,0 +1,434 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>MainWindow</class>
+ <widget class="QMainWindow" name="MainWindow">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>810</width>
+    <height>595</height>
+   </rect>
+  </property>
+  <property name="minimumSize">
+   <size>
+    <width>800</width>
+    <height>400</height>
+   </size>
+  </property>
+  <property name="maximumSize">
+   <size>
+    <width>1500</width>
+    <height>600</height>
+   </size>
+  </property>
+  <property name="windowTitle">
+   <string>MainWindow</string>
+  </property>
+  <widget class="QWidget" name="centralWidget">
+   <property name="minimumSize">
+    <size>
+     <width>1271</width>
+     <height>0</height>
+    </size>
+   </property>
+   <widget class="QWidget" name="verticalLayoutWidget">
+    <property name="geometry">
+     <rect>
+      <x>10</x>
+      <y>120</y>
+      <width>262</width>
+      <height>321</height>
+     </rect>
+    </property>
+    <layout class="QVBoxLayout" name="verticalLayout">
+     <item>
+      <widget class="ClickableLabel" name="lblOriginalImage">
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="minimumSize">
+        <size>
+         <width>260</width>
+         <height>260</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>350</width>
+         <height>350</height>
+        </size>
+       </property>
+       <property name="mouseTracking">
+        <bool>false</bool>
+       </property>
+       <property name="frameShape">
+        <enum>QFrame::Box</enum>
+       </property>
+       <property name="frameShadow">
+        <enum>QFrame::Sunken</enum>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="scaledContents">
+        <bool>true</bool>
+       </property>
+       <property name="buddy">
+        <cstring>btnSelectImage</cstring>
+       </property>
+      </widget>
+     </item>
+    </layout>
+   </widget>
+   <widget class="QWidget" name="verticalLayoutWidget_2">
+    <property name="geometry">
+     <rect>
+      <x>270</x>
+      <y>120</y>
+      <width>262</width>
+      <height>321</height>
+     </rect>
+    </property>
+    <layout class="QVBoxLayout" name="verticalLayout_2">
+     <item>
+      <widget class="ClickableLabel" name="lblBackgroundImage">
+       <property name="enabled">
+        <bool>true</bool>
+       </property>
+       <property name="minimumSize">
+        <size>
+         <width>260</width>
+         <height>260</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>350</width>
+         <height>350</height>
+        </size>
+       </property>
+       <property name="mouseTracking">
+        <bool>false</bool>
+       </property>
+       <property name="frameShape">
+        <enum>QFrame::Box</enum>
+       </property>
+       <property name="frameShadow">
+        <enum>QFrame::Sunken</enum>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="scaledContents">
+        <bool>true</bool>
+       </property>
+       <property name="buddy">
+        <cstring>btnSelectBackground</cstring>
+       </property>
+      </widget>
+     </item>
+    </layout>
+   </widget>
+   <widget class="QWidget" name="verticalLayoutWidget_3">
+    <property name="geometry">
+     <rect>
+      <x>530</x>
+      <y>120</y>
+      <width>262</width>
+      <height>321</height>
+     </rect>
+    </property>
+    <layout class="QVBoxLayout" name="verticalLayout_3">
+     <item>
+      <widget class="QLabel" name="lblMergedImage">
+       <property name="enabled">
+        <bool>true</bool>
+       </property>
+       <property name="minimumSize">
+        <size>
+         <width>260</width>
+         <height>200</height>
+        </size>
+       </property>
+       <property name="maximumSize">
+        <size>
+         <width>350</width>
+         <height>350</height>
+        </size>
+       </property>
+       <property name="frameShape">
+        <enum>QFrame::Box</enum>
+       </property>
+       <property name="frameShadow">
+        <enum>QFrame::Sunken</enum>
+       </property>
+       <property name="text">
+        <string/>
+       </property>
+       <property name="scaledContents">
+        <bool>true</bool>
+       </property>
+      </widget>
+     </item>
+    </layout>
+   </widget>
+   <widget class="QWidget" name="layoutWidget1">
+    <property name="geometry">
+     <rect>
+      <x>20</x>
+      <y>450</y>
+      <width>251</width>
+      <height>42</height>
+     </rect>
+    </property>
+    <layout class="QVBoxLayout" name="verticalLayout_4">
+     <item>
+      <widget class="QLabel" name="origCoord">
+       <property name="text">
+        <string>Selected Coord: (0,0)</string>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QLabel" name="origSize">
+       <property name="text">
+        <string>Original Image Size: 0x0</string>
+       </property>
+      </widget>
+     </item>
+    </layout>
+   </widget>
+   <widget class="QWidget" name="layoutWidget">
+    <property name="geometry">
+     <rect>
+      <x>280</x>
+      <y>450</y>
+      <width>251</width>
+      <height>42</height>
+     </rect>
+    </property>
+    <layout class="QVBoxLayout" name="verticalLayout_5">
+     <item>
+      <widget class="QLabel" name="backCoord">
+       <property name="enabled">
+        <bool>true</bool>
+       </property>
+       <property name="text">
+        <string>Selected Coord: (0, 0)</string>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QLabel" name="bgSize">
+       <property name="text">
+        <string>Original Image Size: 0x0</string>
+       </property>
+      </widget>
+     </item>
+    </layout>
+   </widget>
+   <widget class="QFrame" name="LogoFrame">
+    <property name="geometry">
+     <rect>
+      <x>20</x>
+      <y>500</y>
+      <width>201</width>
+      <height>61</height>
+     </rect>
+    </property>
+    <property name="styleSheet">
+     <string notr="true"/>
+    </property>
+    <property name="frameShape">
+     <enum>QFrame::StyledPanel</enum>
+    </property>
+    <property name="frameShadow">
+     <enum>QFrame::Raised</enum>
+    </property>
+   </widget>
+   <widget class="QPushButton" name="btnSelectImage">
+    <property name="geometry">
+     <rect>
+      <x>10</x>
+      <y>70</y>
+      <width>251</width>
+      <height>41</height>
+     </rect>
+    </property>
+    <property name="styleSheet">
+     <string notr="true"/>
+    </property>
+    <property name="text">
+     <string>Select Image</string>
+    </property>
+   </widget>
+   <widget class="QPushButton" name="btnSelectBackground">
+    <property name="geometry">
+     <rect>
+      <x>270</x>
+      <y>70</y>
+      <width>251</width>
+      <height>41</height>
+     </rect>
+    </property>
+    <property name="styleSheet">
+     <string notr="true"/>
+    </property>
+    <property name="text">
+     <string>Select Background Image</string>
+    </property>
+   </widget>
+   <widget class="QPushButton" name="btnMergeImages">
+    <property name="geometry">
+     <rect>
+      <x>530</x>
+      <y>70</y>
+      <width>270</width>
+      <height>41</height>
+     </rect>
+    </property>
+    <property name="styleSheet">
+     <string notr="true"/>
+    </property>
+    <property name="text">
+     <string>Merge Images</string>
+    </property>
+   </widget>
+   <widget class="QFrame" name="Banner">
+    <property name="geometry">
+     <rect>
+      <x>-10</x>
+      <y>-30</y>
+      <width>861</width>
+      <height>91</height>
+     </rect>
+    </property>
+    <property name="styleSheet">
+     <string notr="true"/>
+    </property>
+    <property name="frameShape">
+     <enum>QFrame::StyledPanel</enum>
+    </property>
+    <property name="frameShadow">
+     <enum>QFrame::Raised</enum>
+    </property>
+    <widget class="QLabel" name="HeaderLabel">
+     <property name="geometry">
+      <rect>
+       <x>250</x>
+       <y>20</y>
+       <width>271</width>
+       <height>61</height>
+      </rect>
+     </property>
+     <property name="font">
+      <font>
+       <pointsize>25</pointsize>
+      </font>
+     </property>
+     <property name="styleSheet">
+      <string notr="true"/>
+     </property>
+     <property name="text">
+      <string>Green Screen Lab</string>
+     </property>
+    </widget>
+   </widget>
+   <widget class="QWidget" name="layoutWidget_3">
+    <property name="geometry">
+     <rect>
+      <x>540</x>
+      <y>450</y>
+      <width>261</width>
+      <height>71</height>
+     </rect>
+    </property>
+    <layout class="QVBoxLayout" name="verticalLayout_7">
+     <item>
+      <layout class="QHBoxLayout" name="horizontalLayout_2">
+       <item>
+        <widget class="QLabel" name="label">
+         <property name="text">
+          <string>Threshold</string>
+         </property>
+        </widget>
+       </item>
+       <item>
+        <widget class="QSlider" name="thresholdSlider">
+         <property name="minimum">
+          <number>0</number>
+         </property>
+         <property name="value">
+          <number>10</number>
+         </property>
+         <property name="orientation">
+          <enum>Qt::Horizontal</enum>
+         </property>
+        </widget>
+       </item>
+      </layout>
+     </item>
+     <item>
+      <widget class="QCheckBox" name="ghostBox">
+       <property name="text">
+        <string>Ghost</string>
+       </property>
+      </widget>
+     </item>
+    </layout>
+   </widget>
+   <widget class="QPushButton" name="btnSaveImage">
+    <property name="geometry">
+     <rect>
+      <x>540</x>
+      <y>530</y>
+      <width>259</width>
+      <height>31</height>
+     </rect>
+    </property>
+    <property name="styleSheet">
+     <string notr="true"/>
+    </property>
+    <property name="text">
+     <string>Save Merged Image</string>
+    </property>
+   </widget>
+   <zorder>layoutWidget</zorder>
+   <zorder>layoutWidget</zorder>
+   <zorder>verticalLayoutWidget</zorder>
+   <zorder>verticalLayoutWidget_2</zorder>
+   <zorder>verticalLayoutWidget_3</zorder>
+   <zorder>LogoFrame</zorder>
+   <zorder>btnSelectImage</zorder>
+   <zorder>btnSelectBackground</zorder>
+   <zorder>btnMergeImages</zorder>
+   <zorder>Banner</zorder>
+   <zorder>layoutWidget_3</zorder>
+   <zorder>btnSaveImage</zorder>
+  </widget>
+  <widget class="QMenuBar" name="menuBar">
+   <property name="geometry">
+    <rect>
+     <x>0</x>
+     <y>0</y>
+     <width>810</width>
+     <height>25</height>
+    </rect>
+   </property>
+  </widget>
+ </widget>
+ <layoutdefault spacing="6" margin="11"/>
+ <customwidgets>
+  <customwidget>
+   <class>ClickableLabel</class>
+   <extends>QLabel</extends>
+   <header location="global">ClickableLabel.h</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>

README.md

@@ -0,0 +1,632 @@
+[English](#markdown-header-arrays-green-screen) | [Español](#markdown-header-arreglos-pantalla-verde)
+
+#Arreglos - Pantalla Verde
+
+![main1.png](images/main1.png)
+![main2.png](images/main2.png)
+![main3.png](images/main3.png)
+
+Los arreglos de datos (*arrays*) nos facilitan guardar y trabajar con grupos de datos del mismo tipo. Los datos se guardan en espacios de memoria consecutivos a los que se puede acceder utilizando el nombre del arreglo e índices o suscritos que indican la posición en que se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder a los datos de un arreglo. En la experiencia de laboratorio de hoy practicarás el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales usando técnicas de "pantalla verde".
+
+
+##Objetivos:
+
+1. Practicar el acceso y manipulación de  datos en un arreglo.
+
+2. Aplicar ciclos anidados para implementar técnicas de "pantalla verde".
+
+3. Utilizar expresiones aritméticas y estructuras de selección para transformar colores de píxeles.
+
+4. Acceder píxeles en una imagen y descomponerlos en sus componentes rojo, azul y verde.
+
+
+##Pre-Lab:
+
+Antes de llegar al laboratorio debes:
+
+1. Haber repasado los conceptos básicos relacionados a estructuras de repetición, ciclos anidados y arreglos bi-dimensionales.
+
+2. Conocer los métodos básicos de `QImage` para manipular los pixeles de las imágenes. 
+
+3. Haber estudiado los conceptos e instrucciones para la sesión de laboratorio.
+
+4. Haber tomado el quiz Pre-Lab que se encuentra en Moodle.
+
+---
+
+---
+
+##Tecnología de pantalla verde ("Green Screen")
+
+En esta experiencia de laboratorio, aprenderás los conceptos y destrezas básicas de la tecnología de pantalla verde que se usa en boletines informativos de televisión, películas, juegos de video y otros. La composición de pantalla verde, o composición cromática, es una técnica que se usa para combinar dos imágenes o cuadros de video [1]. Esta técnica de post-producción  crea efectos especiales al componer  dos imágenes o transmisiones de video sustituyendo el área de un color sólido por otra imágen [2]. La composición cromática se puede hacer con imágenes de objetos sobre fondos de cualquier color que sean uniformes y diferentes a los de la imagen. Los fondos azules y verdes son los que se usan con más frecuencia porque se distinguen con más facilidad de los tonos de la mayoría de los colores de piel humanos.
+
+Para esta experiencia de laboratorio te proveemos un interfaz gráfico (GUI) simple que permite al usuario cargar una imagen con un objeto sobre un fondo de color sólido (preferiblemente azul o verde) y una imagen para sustituir el fondo. Tu tarea es crear e implementar una función que cree una tercera imagen compuesta en la cual, a la imagen del objeto  con el fondo de color sólido se le removerá el color de fondo y el objeto aparecerá sobre la imagen que será el nuevo fondo. La Figura 1 muestra un ejemplo de los resultados esperados.
+
+---
+
+![figure1.png](images/figure1.png)
+
+**Figura 1.** Ejemplo de los resultados esperados. El objeto de interés es la mano con las gafas.
+
+---
+
+Con el propósito de ilustrar el procedimiento, llamemos la imagen del objeto con el fondo de color sólido  *imagen A*, y supongamos que el color sólido en el fondo tiene un "RGB" `0x00ff00` (verde puro). Llamemos *imagen B* a la imagen que usaremos para el fondo, un fondo que resulte interesante. Para este ejemplo, supongamos también que los tamaños de ambas imágenes son iguales (mismo ancho y alto).
+
+Para producir la imagen compuesta (*imagen C*), podríamos comenzar copiando toda la *imagen B* que usaremos de fondo a la *imagen C*. Luego, para insertar solo el objeto que nos interesa en la imagen compuesta podemos recorrer la *imagen A* píxel por píxel. Compararíamos el color de cada píxel *p* en la *imagen A* con el color de fondo `0x00ff00`. Si son *similares*, el píxel de la *imagen A* corresponde al color sólido de fondo y dejamos el píxel de la *imagen C* como está (el fondo nuevo). Si el color de *p* no es *similar* a `0x00ff00`, modificamos el píxel correspondiente en la *imagen C*, copiando el color del píxel del objeto a la imagen compuesta. Esto se ilustra en la Figura 2.
+
+---
+
+![figure2.png](images/figure2.png)
+
+**Figura 2.** Ilustración de cómo el algoritmo decide cuáles píxeles de la *imagen A* incluir en la *imagen C*.
+
+---
+
+---
+
+##Píxeles
+
+Al elemento más pequeño de una imagen se le llama un *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul,   se codifica como un entero sin signo cuyos bytes  representan los tonos de rojo, verde y azul del pixel  (Figura 3). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
+
+---
+
+![figure3.png](images/figure3.png)
+
+**Figura 3.** Distribución de bits para las tonalidades de rojo, verde y azul dentro de la representación RGB.  Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1). 
+
+---
+
+En `Qt` se utiliza el tipo `QRgb` para representar valores `RGB`.  Utilizando ciertas funciones que describimos abajo podemos obtener los componentes rojo, verde y azul del valor `QRgb` del píxel y así manipular imágenes.
+
+###Biblioteca
+
+La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los pixeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
+
+El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
+
+* `originalImage`   // contiene la información de la imagen original que vas a editar
+*  `editedImage`  // contendrá la imagen editada
+
+Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
+
+
+* `width()`      // devuelve el valor entero del ancho de la imagen
+* `height()`      // devuelve el valor entero de la altura de la imagen
+* `pixel(i, j)`       // devuelve el `QRgb` del píxel en la posición `(i,j)`
+* `setPixel(i,j, pixel)`   // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`
+
+Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
+
+
+* `qRed(pixel)`   // devuelve el tono del color rojo del píxel
+* `qGreen(pixel)` // devuelve el tono del color verde del píxel
+* `qBlue(pixel)`  // devuelve el tono del color azul del píxel
+* `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
+
+
+####Ejemplos:
+
+1. `QRgb myRgb = qRgb(0xff, 0x00, 0xff);`: Asigna a `myRgb` el valor `0xff00ff` que representa el color ![figure4.png](images/figure4.png)
+
+    Nota que el valor `0xff00ff` representa los valores `0xff`, `0x0`, `0xff`, que corresponden a los componentes rojo, verde y azul de `myRgb`.
+
+2. Si la siguiente imagen `4 x 4` de píxeles representa el objeto `originalImage`,
+
+    ![ejemplo.png](images/ejemplo.png)
+
+  entonces `originalImage.pixel(2,1)` devuelve un valor `rgb` que representa el color azul (`0x0000ff`).
+
+3. La siguiente instrucción asigna el color rojo al píxel en posición `(2,3)` en la imagen editada:
+
+  `editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
+
+4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de  `originalImage`:
+
+  `int greenContent = qGreen(originalImage.pixel(1,1));`.
+
+
+5. El siguiente programa crea un objeto de clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
+
+---
+
+```cpp
+#include <QImage>
+#include <iostream>
+
+using namespace std;
+int main() {
+    QImage myImage(“/Users/rarce/Downloads/chuck.png”);
+    QRgb    centralPixel;
+
+    centralPixel = myImage.pixel(myImage.width() / 2, myImage.height() / 2);
+
+    cout    << hex;
+
+    cout    << “Los componentes rojo, verde y azul del pixel central son: “
+        << qRed(centralPixel) << “, “
+        << qGreen(centralPixel) << “, “
+        << qBlue(centralPixel) << endl;
+    return 0;
+}
+```
+
+---
+
+### Midiendo la similaridad de los colores de los pixeles
+
+Observa la Figura 4 abajo. Aunque el fondo en la *imagen A* parece uniforme, realmente incluye píxeles de diferentes colores (aunque parecidos).
+
+---
+
+![figure5.png](images/figure5.png)
+
+**Figura 4.** Lo que puede parecer un color *sólido*, realmente no lo es. 
+
+---
+
+Por esto, en lugar de solo considerar como parte del fondo sólido los píxeles cuyo color es **exactamente** `0x00FF00`, medimos la *distancia* del valor del color del píxel al valor del color *puro*. Una distancia pequeña significa que el color es *casi* verde puro. La ecuación para la *distancia* es:
+
+
+$$distancia = \sqrt{(P_R-S_R)^2+(P_G-S_G)^2+(P_B-S_B)^2},$$
+
+donde $$P_R, P_G, P_B$$ son los valores de los componentes rojo, verde y azul del píxel bajo consideración, y $$S_R, S_G, S_B$$ son los valores de los componentes rojo, verde y azul del fondo sólido. En nuestro ejemplo, $$S_R=S_B=0$$ y $$S_G=255$$.
+
+---
+
+---
+
+
+##Sesión de laboratorio:
+
+En el laboratorio de hoy, comenzando con una imagen con un objeto de interés sobre un fondo de color sólido y una imagen para utilizar como fondo, definirás e implantarás una función que cree una tercera imagen compuesta en la cual, a la imagen del objeto de interés se le removerá el color de fondo y aparecerá sobre la imagen para el fondo.
+
+Estarás trabajando con el archivo `Filter.cpp`. Lo que sigue es un resumen de las variables en este archivo.
+
+* `objectImage`: referencia a la imagen del objeto de interés y fondo sólido
+* `backgroundImage`: referencia a la imagen para el fondo
+* `mergedImage`: referencia a la imagen compuesta
+* `threshold`: valor umbral usado para comparar las distancias entre el valor del color del píxel de la imagen con el objeto sobre fondo sólido. En el código que se provee, el valor del umbral se lee del valor de la barra deslizable.
+* `ghost`: valor Booleano utilizado para aplicar el filtro "fantasma" a los pixeles. 
+* `(x, y)`: coordenadas de un pixel de la imagen del objeto sobre fondo sólido. El valor por defecto es `(0,0)`. 
+* `(offset_x, offset_y)`: coordenadas de la imagen compuesta en donde la esquina superior izquierda de la imagen del objeto sobre fondo sólido será insertada. El valor por defecto es `(0,0)`. 
+
+
+###Ejercicio 1: Crear imagen compuesta
+
+####Instrucciones
+
+1. Carga a QtCreator el proyecto `GreenScreen`  haciendo doble "click" en el archivo `GreenScreen.pro` en el directorio `Documents/eip/Arrays-GreenScreen` de tu computadora. También puedes ir a `http://bitbucket.org/eip-uprrp/arrays-greenscreen` para descargar la carpeta `Arrays-GreenScreen` a tu computadora.
+ 
+2. Compila y corre el programa. El código que te proveemos crea la interfaz de la Figura 5. Los botones  *Select Image* y *Select Background Image* ya han sido programados.
+ 
+
+    ---
+
+    ![figure6.png](images/figure6.png)
+
+    **Figura 5.** Interfaz de la aplicación GreenScreen.
+
+    ---
+
+3. Marca el botón para cargar una imagen del objeto de interés sobre fondo sólido, luego marca el botón para seleccionar la imagen para el fondo. El directorio con los archivos fuente contiene una carpeta llamada `landscapes`  que contiene imágenes de fondo, y una carpeta llamada `green_background` que contiene imágenes de objetos sobre fondo de color sólido.
+
+4. Tu primera tarea es completar la función `MergeImages` en el archivo `Filter.cpp`. La función `MergeImages` se invoca cuando el usuario marca el botón `Merge Images` y cuando se desliza la barra. La función `MergeImages` recibe las referencias a la imagen con objeto de interés y fondo sólido, la imagen para el fondo y la imagen compuesta, un valor umbral, las coordenadas `(x,y)` de un píxel de la imagen del objeto sobre fondo sólido, y las coordenadas `(offset_x, offset_y)` de la imagen compuesta. 
+
+Para este ejercicio puedes ignorar el filtro "fantasma" `ghost` y las coordenadas `(offset_x, offset_y)`, y solo componer la imagen con el objeto de interés en la imagen de fondo, comenzando en la posición `(0,0)`.
+
+**Algoritmo**
+
+1. Adquiere el valor del color sólido. El color sólido será el color del píxel en la posición `(x,y)` en la imagen del objeto sobre fondo sólido. El valor por defecto para `(x,y)` es `(0,0)`.
+
+2. Para todas las posiciones `(i,j)`, adquiere  el valor del color del píxel en la posición `(i,j)` de la imagen con el objeto. Computa la distancia entre el color de la imagen con el objeto y el valor del color sólido. Si la distancia entre el color sólido y el color del píxel de la imagen es mayor que que el valor umbral, cambia el valor del color del píxel en la posición `(i,j)` de la imagen de fondo al valor del color de la imagen con el objeto.
+ 
+Prueba tu implantación cargando imágenes de objetos e imágenes para el fondo y verificando la imagen compuesta.
+
+
+###Ejercicio 2: Crear imagen compuesta usando filtro `ghost`
+
+En este ejercicio modificarás el Ejercicio 1 para aplicar el filtro fantasma a cada uno de los píxeles que se compondrán sobre la imagen de fondo en el caso de que la variable `ghost` sea cierta. El filtro fantasma creará el efecto de que el objeto en la imagen compuesta se verá como un "fantasma" sobre la imagen de fondo, como en la Figura 6.
+
+---
+
+![figure7.png](images/figure7.png)
+
+**Figura 6.** Imagen con filtro fantasma. En este ejemplo, el perro en la imagen con el fondo sólido se compone sobre la imagen de fondo utilizando el filtro fantasma.
+
+---
+
+El efecto fantasma se consigue promediando el valor del color del píxel del fondo con el valor del color del píxel correspondiente del objeto, en lugar de solo reemplazar el valor del color del píxel del fondo por el del objeto. Calculamos el promedio de cada uno de los componentes (rojo, verde y azul)
+
+$$N_R=\frac{S_R+B_R}{2}$$
+$$N_G=\frac{S_G+B_G}{2}$$
+$$N_B=\frac{S_B+B_B}{2},$$
+
+
+en donde $$N_R, N_G, N_B$$ son los componentes rojo, verde y azul del nuevo píxel fantasma,  $$S_R, S_G, S_B$$ son los componentes de la imagen del objeto, y $$B_R, B_G, B_B$$ son los componentes de la imagen de fondo.
+
+
+###Ejercicio 3: Crear imagen compuesta colocando el objeto en una posición específica
+
+El "widget" que despliega el fondo fue programado para que detecte la posición marcada por el usuario. En este ejercicio programarás la función `MergeImages` para que el objeto sea desplegado en la posición marcada por el usuario en la imagen de fondo, en lugar de ser desplegado en la esquina superior izquierda. Las Figuras 7 y 8 muestran el efecto. Nota los valores de `Selected Coord` bajo la imagen del medio.
+
+---
+
+![figure8.png](images/figure8.png)
+
+
+**Figura 7.** En este ejemplo, la imagen del fondo no ha sido marcada y `Selected Coord` tiene `(0,0)` que es su valor por defecto. El perro se inserta en la imagen compuesta con su esquina superior izquierda en el lugar `(0,0)`.
+
+---
+
+![figure9.png](images/figure9.png)
+
+
+**Figura 8.** En este ejemplo, la imagen del fondo fue marcada en las coordenadas `(827,593)`. La imagen del perro se inserta en la imagen compuesta con su esquina superior izquierda en la posición `(827,593)`.
+
+---
+
+Tu tarea en este ejercicio es la misma que en el Ejercicio 1, pero esta vez debes ajustar la imagen del objeto dentro de la composición con las cantidades especificadas en los parámetros  `x_offset` y `y_offset`. Recuerda tomar en consideración los límites de la imagen compuesta cuando insertes el objeto; el usuario pudiera especificar unos parámetros que se salgan de los límites y el objeto se cortará, como sucede en la Figura 9.
+
+---
+
+![figure10.png](images/figure10.png)
+
+**Figura 9.** En este ejemplo, el usuario seleccionó una posición que asignó valores muy grandes para `x_offset` y `y_offset`; la implementación hizo el ajuste para que parte de la imagen del perro saliera en la imagen compuesta.
+
+---
+
+El ejemplo de la Figura 10 muestra cómo se comportará la imagen del objeto al sobreponerla en la imagen que queremos de fondo. Las variables `offset_x, offset_y` representan el punto en la imagen de fondo en el que se colocará la esquina superior izquierda de la imagen del objeto. Nota que si se escoge un punto muy cerca del borde para la composición, parte de la imagen del objeto se sale de los límites de la imagen de fondo. Como hemos visto en la manipulación de arreglos, si se intenta acceder o alterar elementos que estan fuera del rango de tamaño del arreglo, al compilar occurre un error fatal. Lo mismo sucede con las imágenes. 
+
+Debes asegurarte de que tu implementación toma en cuenta los valores de `offset x` y `offset y`  para que la composición no intente acceder o alterar píxeles fuera del límite de la imagen de fondo. Si intentas acceder o alterar píxeles fuera de esos límites, resulta en un error fatal.
+
+---
+
+![figure11.png](images/figure11.png)
+
+**Figura 10.** Ilustración de la imagen del objeto de interés con píxeles que se salen de los límites de la imagen de fondo. Si no se toma en consideración esta posibilidad en la implementación, ocurrirá un error fatal.
+
+---
+
+
+Valida tu implantación seleccionando varios valores para el ajuste de "offset" y observando el efecto que tienen en la imagen compuesta. Asegúrate de tratar casos en los que tus valores para `x_offset` y `y_offset` ocasionarían que la imagen fuera cortada como ocurrió en la imagen compuesta de la Figura 9.
+
+---
+
+---
+
+##Entrega
+
+Utiliza "Entrega" en Moodle para entregar el archivo `filter.cpp` que contiene la función `MergeImages`. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
+
+
+---
+
+---
+
+
+## Referencias
+
+[1] http://en.wikipedia.org/wiki/Green_screen_(disambiguation)
+
+[2] http://en.wikipedia.org/wiki/Chroma_key
+
+[3] http://doc.qt.io/qt-4.8/qimage.html.
+
+---
+
+---
+
+---
+
+[English](#markdown-header-arrays-green-screen) | [Español](#markdown-header-arreglos-pantalla-verde)
+
+#Arrays - Green Screen
+
+![main1.png](images/main1.png)
+![main2.png](images/main2.png)
+![main3.png](images/main3.png)
+
+
+Arrays help us to store and work with groups of data of the same type. The data is stored in consecutive memory spaces which can be accessed by using the name of the array and indexes or subscripts that indicate the position where the data is stored. Repetition structures provide us a simple way of accessing the data within an array. In this laboratory experience, you will be using nested loops to process bi-dimensional arrays and implement the functionality of a green-screen.
+
+
+##Objectives:
+
+1. Practice accessing and modifying elements in an array.
+
+2. Use nested loops to implement greens-screen techniques.
+
+3. Use arithmetic expressions and selection structures to transform pixel colors.
+
+4. Read pixels from an image and decompose them in their red, green and blue components.
+
+
+##Pre-Lab:
+
+Before coming to the laboratory you should have:
+
+1. Reviewed the basic concepts about repetition structures, nested loops, and bi-dimensional arrays.
+
+2. Understood the methods of the `QImage` class for pixel manipulation.
+
+3. Studied the concepts and instructions for the laboratory session.
+
+4. Taken the Pre-Lab quiz that is found in Moodle.
+
+---
+
+---
+
+## Green-screen technology
+
+In this laboratory experience the student will be exposed to the basics of the green screen technology used in newscasting, motion pictures, video games, and others.  Green screen compositing, or more generally chroma key compositing, is a technique for combining two still images or video frames[1]. Chroma key compositing, or chroma keying, is a special effects / post-production technique for compositing (layering) two images or video streams together based on color hues (range)[2]. Chroma keying can be done with backgrounds of any color that are uniform and distinct, but green and blue backgrounds are more commonly used because they differ most distinctly in hue from most human skin colors.
+
+With this laboratory we provide a simple GUI that allows the user to load an image with any solid background (although green or blue are preferred), and a background image. Your task is to implement a function that creates a third, merged image, in which the image with the solid background appears over the background image (with the solid background removed). Figure 1 shows an example of the expected results.
+
+---
+
+![figure1.png](images/figure1.png)
+
+Figure 1: Example of the expected results. The object of interest is the hand carrying the sunglasses.
+
+---
+
+For illustration purposes, let's call the image with the solid background *image A* and let's say that the solid color in the background has an RGB `0x00ff00` (pure green). We will refer to the image with the interesting background as *image B*. Let's also assume that both images are the same size (width and height). 
+
+To produce the merged image (*image C*), we could start by completely copying *image B* to *image *C*. Then, to insert only the object of interest into the merged image we could traverse *image A* pixel by pixel. We would compare the color of each pixel *p* in *image A* to the color `0x00FF00`, if they are *similar* we do nothing (because it means that this pixel is part of the solid color background). If the color of *p* is not *similar* to `0x00FF00`, we modify the corresponding pixel in *image C*, copying the color of the object's pixel to the merged image.
+
+---
+
+![figure2.png](images/figure2.png)
+
+**Figure 2** - Illustration of how the algorithm decides which pixels to include from *image A* into *image C*.
+
+---
+
+---
+
+
+###Pixels
+
+The smallest element in an image is called a *pixel*. This unit consists of a single color. Since each color is a combination of tones for the primary red, green and blue colors, it is coded as an unsigned integer whose bytes represent the tones of red, green and blue of the pixel (Figure 3). This combination is called the color's *RGB* which is an acronym for "Red-Green-Blue". For example, a pure red pixel has an RGB representation of `0x00ff0000`, while a white pixel has an RGB representation of `0x00FFFFFF` (since the color white is a combination of tones of red, green and blue in all of their intensity).
+
+---
+
+![figure3.png](images/figure3.png)
+
+**Figure 3.** Bit distribution for the tones of red, green and blue in an RGB representation. Each tone can have values between 0x00 (the eight bits in 0) and (0xFF (the 8 bits in 1).
+
+---
+
+`Qt` uses the `QRgb` type to represent `RGB` values. Using certain functions that are described below we can obtains the red, green and blue components of the `QRgb` value of the pixel and manipulate the images.
+
+###Library
+
+In today's laboratory experience you will use the `QImage` class. This class permits access to the data in the pixels of an image to manipulate it. The documentation for the `QImage` class can be found in http://doc.qt.io/qt-4.8/qimage.html.
+
+The code provided in this project contains the following objects of the `QImage` class:
+
+* `originalImage`   // contains the information of the original image that you will edit
+*  `editedImage`  // will contain the edited image
+
+The objects of the `QImage` class have the following methods that will be useful for today's laboratory experience:
+
+* `width()`      // returns the integer value for the image's width
+* `height()`      // returns the integer value for the image's height
+* `pixel(i, j)`       // returns the `QRgb` for the pixel in position `(i,j)`
+* `setPixel(i,j, pixel)`   // modifies the value for the pixel in position `(i,j)` to the value of pixel `QRgb`
+
+The following functions are useful to work with data of type `QRgb`:
+
+* `qRed(pixel)`   // returns the tone for the pixel's red color
+* `qGreen(pixel)` // returns the tone for the pixel's green color
+* `qBlue(pixel)`  // returns the tone for the pixel's blue color
+* `qRgb(int red, int green, int blue)` // returns the `QRgb` pixel composed of the red, green and blue values received.
+
+
+####Examples:
+
+1. `QRgb myRgb = qRgb(0xff, 0x00, 0xff);`: Assigns the value `0xff00ff` to `myRgb` which represents the color ![figure2.jpg](images/figure4.jpg)
+
+    Notice that the value `0xff00ff` represents the values `0xff`, `0x0`, and `0xff`, that correspond to the red, green and blue components in `myRgb`.
+
+2. If the following `4 x 4` image of pixels represents the object `originalImage`,
+
+ ![ejemplo.png](images/ejemplo.png)
+
+then `originalImage.pixel(2,1)` returns the `rgb` value that represents the color blue ( `0x0000ff`).
+
+3. The following instruction assigns the color red to the pixel in position `(2,3)` in the edited image:
+
+`editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
+
+4. The following instruction assigns to `greenContent` the value of the green tone that is contained in the pixel `(1,1)` of `originalImage`:
+
+    `int greenContent = qGreen(originalImage.pixel(1,1));`.
+
+5. The following program creates an object of the `QImage` class and prints the red, green and blue components of the pixel in the center of the image. The image used is the one specified within the parenthesis during the creation of the object, that is, the file `chuck.png`
+
+---
+
+```cpp
+#include <QImage>
+#include <iostream>
+
+using namespace std;
+int main() {
+    QImage myImage(“/Users/rarce/Downloads/chuck.png”);
+    QRgb    centralPixel;
+
+    centralPixel = myImage.pixel(myImage.width() / 2, myImage.height() / 2);
+
+    cout    << hex;
+
+    cout    << “The red, green and blue components of the middle pixel are: “
+        << qRed(centralPixel) << “, “
+        << qGreen(centralPixel) << “, “
+        << qBlue(centralPixel) << endl;
+    return 0;
+}
+```
+
+---
+
+
+
+### Measuring similarity of pixel colors
+
+Look at Figure 4, although the background in *image A* looks uniform, it really includes pixels of diverse (although similar) colors.
+
+---
+
+![figure5.png](images/figure5.png)
+
+**Figure 4** - What may seem as a *solid* color, really is not. Thus, we use the color *distance*.
+
+---
+
+Instead of only considering as part of the solid background the pixels whose color is **exactly** `0x00FF00`, we measure a color's *distance* from the *pure* color. A small *distance* means that the color is *almost* a pure green. A large *distance* means that the color is very different from green. The equation for *distance* is:
+
+$$distance = \sqrt{(P_R-S_R)^2+(P_G-S_G)^2+(P_B-S_B)^2},$$
+
+where $$P_R$$, $$P_G$$, and $$P_B$$ are the red, green and blue components of the pixel being considered.  $$S_R$$, $$S_G$$, and $$S_B$$ are the components of the solid background, e.g. in our example $$S_R=S_B=0$$ y $$S_G=255$$.
+
+---
+
+---
+
+##Laboratory Session
+
+In this laboratory experience, starting with an image with an object of interest over a solid color background and an image to use as a background, you will define and implement a function that creates a third merged image where the image with the object of interest will have its background color removed and will appear over the image chosen to be the background.
+
+You will be working with the `Filter.cpp` file. The following is a review of the variables in this file:
+
+* objectImage: reference to the object image with the solid background
+* backgroundImage: reference to the background image object
+* mergedImage: reference to the merged image
+* threshold: is a theshold value used to compare the distances between the object pixel and the solid background pixel. In the provided code, the threshold value is read from the slideBar.
+* ghost: is a boolean value used to apply ghost filter to pixels.
+* (x, y): contains the coordinate of the pixel whose color will be used as solid background. The default value is (0,0).
+* (offset_x, offset_y): the coordinate of the merged image where the upper-left corner of the objectImage should be inserted. The default value is (0,0).
+
+### Exercise 1: Create a composite image
+
+####Instructions
+
+1. Load the Qt project called `GreenScreenLab` by double-clicking on the `GreenScreenLab.pro` file in the `Documents/eip/Arrays-GreenScreen` folder of your computer. You may also go to `http://bitbucket.org/eip-uprrp/arrays-greenscreen` to download the `Arrays-GreenScreen` folder to your computer.
+
+2. Build and run the program. The provided code creates the interface shown in Figure 5. The buttons  *Select Image* and *Select Background Image* have already been programmed to perform their actions.
+
+    ---
+
+    ![figure6.png](images/figure6.png)
+
+    **Figure 5.**Interface for the green screen application.
+
+    ---
+
+3. Click the *Select Image* button to load the image that contains the solid background, the click *Select Background Image* to load the image that contains the interesting background. The folders called `green_background` and `landscapes` contain some images that are suitable as the first and second images.  
+
+
+4. Your first task is to complete the function `MergeImages` in file `Filter.cpp`.`MergeImages` is the function that is called when the user presses the button captioned `Merge Images` or when he slides the slide bar. The function `MergeImages` receives the image with the solid background, the background image, a reference to the merged image, a threshold value, and the coordinates `(x,y)` of the pixel from which we will extract the sample *green* background color, and the coordinates `(offset_x, offset_y)` from the merged image.
+
+For this first exercise you can ignore the following parameters: ghost, x_offset, y_offset. Your implementation should place the `objectImage` into the `mergedImage` starting at position (0,0).
+
+**The algorithm**
+
+1. Acquire the value of the solid color. The solid color will be the color of the pixel in the coordinate `(x,y)` of the object image with the solid background. The default value for `(x,y)` is `(0,0)`.
+
+2. For every position `(i,j)`, read the color of the corresponding pixel in the objectImage. Compute the distance of the pixel colors to the solid color. If the distance between the solid color and the color of the pixel of the image is greater than the threshold, set the corresponding `(i,j)` pixel in the merged image to the objectImage pixel color. 
+
+Test your implementation by loading object and background images and verifying the merged image.
+
+## Exercise 2: Creating a composite image using a ghost filter
+
+In this exercise you will modify Exercise 1 to apply a ghost filter to each of the pixels that will be composed over the background image (if the `ghost` variable is true). The filter creates a ghost like effect on the objects composed over the background image, as in Figure 6.
+
+
+---
+
+![figure7.png](images/figure7.png)
+
+**Figure 6** - In this example, the dog in the image with the solid background is composed in the background image with the ghost filter. 
+
+---
+
+The ghost effect is achieved by *averaging* the background color with the object's color (instead of simply *replacing* the background with the object's color). The average is performed for each of the components (red, green and blue).  
+
+$$N_R=\frac{S_R+B_R}{2}$$
+$$N_G=\frac{S_G+B_G}{2}$$
+$$N_B=\frac{S_B+B_B}{2},$$
+
+
+where $$N_R$$, $$N_G$$, and $$N_B$$ are the red, green and blue components of the new ghost pixel. $$S_R$$, $$S_G$$, and $$S_B$$ are the components of the object image. $$B_R$$, $$B_G$$, $$B_B$$ are the components of the background image. 
+
+## Exercise 3: Create a composite image placing the object in a specified position
+
+The widget that displays the background has been programmed to register the position where the user clicks. In this exercise you will program the `MergeImages` function so that the position that user clicks in the background image is used as the *top left* corner where the *object* image will be displayed in the merged image. The following figures illustrates the effect. Note the *Selected Coord* values under the images.
+
+
+---
+
+![figure8.png](images/figure8.png)
+
+
+**Figure 7.** In this example, the background image has not been clicked. Thus the "Selected Coord" is at its default value of (0,0).  The dog image is inserted with its top-left corner at (0,0) in the merged image.
+
+---
+
+![figure9.png](images/figure9.png)
+
+
+**Figure 8.** In this example, the background image has been clicked at coordinate `(827,593)`. The dog image is inserted with its top-left corner at `(827,593)` in the merged image.
+
+---
+
+
+In this exercise your task will be the same as in Exercise 1, but this time you will need to offset the *object* image inside the *merged* image by the amount specified in the `x_offset` and `y_offset` parameters. Please take into consideration the merged image boundaries when you are inserting the object image. The user may specify an offset where the boundaries are exceeded and the object will be cut, as in Figure 9.  
+
+---
+
+![figure10.png](images/figure10.png)
+
+**Figure 9**. In this example, the user selected a position that assigned values that are too large for `x_offset` and `y_offset`; the implementation made the adjustment so part of the dog appeared in the merged image.
+
+---
+
+The example in Figure 10 shows how the object image will behave when merging it with the background image. The `x_offset` and `y_offset` variables represent the point in the background image where the upper left corner of the object image will be placed. Notice that if a point too close to the image border is chosen, part of the object image will be outside of the limits of the background image. As we have seen when manipulating arrays, if one tries to access or alter elements that are outside of the size range of the array, we get a fatal compilation error. The same thing happens with the images.
+
+You should make sure that your implementation takes into account the `x_offset` and `y_offset` values so the composition does not try to access or alter pixels outside of the limits of the background image. If you try to access or alter pixels outside of these limits, it will result in a fatal error.
+
+---
+
+![figure11.png](images/figure11.png)
+
+**Figure 10.** Illustration of the object image with pixels that are outside of the background image limits. If the possibility of this happening is not taken into account in the implementation, there will be a fatal error.
+
+---
+
+
+Validate your implementation by choosing several offsets and observing the merged image. Be sure to try cases in which you choose x and y offsets that result in the object being cropped in the merged image (as in Figure 9).
+
+
+---
+
+---
+
+### Deliverables
+
+
+Use "Deliverables" in Moodle to upload the `filter.cpp` file that contains the `MergeImages` function. Remember to use good programming techniques, include the names of the programmers involved, and to document your program.
+
+---
+
+---
+
+### References
+
+[1] http://en.wikipedia.org/wiki/Green_screen_(disambiguation
+
+[2] http://en.wikipedia.org/wiki/Chroma_key
+
+[3] http://doc.qt.io/qt-4.8/qimage.html

arrays-GreenScreen.md

@@ -0,0 +1,636 @@
+[English](#markdown-header-arrays-green-screen) | [Español](#markdown-header-arreglos-pantalla-verde)
+
+#Arreglos - Pantalla Verde
+
+![main1.png](images/main1.png)
+![main2.png](images/main2.png)
+![main3.png](images/main3.png)
+
+Los arreglos de datos (*arrays*) nos facilitan guardar y trabajar con grupos de datos del mismo tipo. Los datos se guardan en espacios de memoria consecutivos a los que se puede acceder utilizando el nombre del arreglo e índices o suscritos que indican la posición en que se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder a los datos de un arreglo. En la experiencia de laboratorio de hoy practicarás el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales usando técnicas de "pantalla verde".
+
+
+##Objetivos:
+
+1. Practicar el acceso y manipulación de  datos en un arreglo.
+
+2. Aplicar ciclos anidados para implementar técnicas de "pantalla verde".
+
+3. Utilizar expresiones aritméticas y estructuras de selección para transformar colores de píxeles.
+
+4. Acceder píxeles en una imagen y descomponerlos en sus componentes rojo, azul y verde.
+
+
+##Pre-Lab:
+
+Antes de llegar al laboratorio debes:
+
+1. Haber repasado los conceptos básicos relacionados a estructuras de repetición, ciclos anidados y arreglos bi-dimensionales.
+
+2. Conocer los métodos básicos de `QImage` para manipular los pixeles de las imágenes. 
+
+3. Haber estudiado los conceptos e instrucciones para la sesión de laboratorio.
+
+4. Haber tomado el quiz Pre-Lab que se encuentra en Moodle.
+
+---
+
+---
+
+##Tecnología de pantalla verde ("Green Screen")
+
+En esta experiencia de laboratorio, aprenderás los conceptos y destrezas básicas de la tecnología de pantalla verde que se usa en boletines informativos de televisión, películas, juegos de video y otros. La composición de pantalla verde, o composición cromática, es una técnica que se usa para combinar dos imágenes o cuadros de video [1]. Esta técnica de post-producción  crea efectos especiales al componer  dos imágenes o transmisiones de video sustituyendo el área de un color sólido por otra imágen [2]. La composición cromática se puede hacer con imágenes de objetos sobre fondos de cualquier color que sean uniformes y diferentes a los de la imagen. Los fondos azules y verdes son los que se usan con más frecuencia porque se distinguen con más facilidad de los tonos de la mayoría de los colores de piel humanos.
+
+Para esta experiencia de laboratorio te proveemos un interfaz gráfico (GUI) simple que permite al usuario cargar una imagen con un objeto sobre un fondo de color sólido (preferiblemente azul o verde) y una imagen para sustituir el fondo. Tu tarea es crear e implementar una función que cree una tercera imagen compuesta en la cual, a la imagen del objeto  con el fondo de color sólido se le removerá el color de fondo y el objeto aparecerá sobre la imagen que será el nuevo fondo. La Figura 1 muestra un ejemplo de los resultados esperados.
+
+---
+
+![figure1.png](images/figure1.png)
+
+**Figura 1.** Ejemplo de los resultados esperados. El objeto de interés es la mano con las gafas.
+
+---
+
+Con el propósito de ilustrar el procedimiento, llamemos la imagen del objeto con el fondo de color sólido  *imagen A*, y supongamos que el color sólido en el fondo tiene un "RGB" `0x00ff00` (verde puro). Llamemos *imagen B* a la imagen que usaremos para el fondo, un fondo que resulte interesante. Para este ejemplo, supongamos también que los tamaños de ambas imágenes son iguales (mismo ancho y alto).
+
+Para producir la imagen compuesta (*imagen C*), podríamos comenzar copiando toda la *imagen B* que usaremos de fondo a la *imagen C*. Luego, para insertar solo el objeto que nos interesa en la imagen compuesta podemos recorrer la *imagen A* píxel por píxel. Compararíamos el color de cada píxel *p* en la *imagen A* con el color de fondo `0x00ff00`. Si son *similares*, el píxel de la *imagen A* corresponde al color sólido de fondo y dejamos el píxel de la *imagen C* como está (el fondo nuevo). Si el color de *p* no es *similar* a `0x00ff00`, modificamos el píxel correspondiente en la *imagen C*, copiando el color del píxel del objeto a la imagen compuesta. Esto se ilustra en la Figura 2.
+
+---
+
+![figure2.png](images/figure2.png)
+
+**Figura 2.** Ilustración de cómo el algoritmo decide cuáles píxeles de la *imagen A* incluir en la *imagen C*.
+
+---
+
+---
+
+##Píxeles
+
+Al elemento más pequeño de una imagen se le llama un *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul,   se codifica como un entero sin signo cuyos bytes  representan los tonos de rojo, verde y azul del pixel  (Figura 3). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
+
+---
+
+![figure3.png](images/figure3.png)
+
+**Figura 3.** Distribución de bits para las tonalidades de rojo, verde y azul dentro de la representación RGB.  Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1). 
+
+---
+
+En `Qt` se utiliza el tipo `QRgb` para representar valores `RGB`.  Utilizando ciertas funciones que describimos abajo podemos obtener los componentes rojo, verde y azul del valor `QRgb` del píxel y así manipular imágenes.
+
+###Biblioteca
+
+La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los pixeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
+
+El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
+
+* `originalImage`   // contiene la información de la imagen original que vas a editar
+*  `editedImage`  // contendrá la imagen editada
+
+Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
+
+
+* `width()`      // devuelve el valor entero del ancho de la imagen
+* `height()`      // devuelve el valor entero de la altura de la imagen
+* `pixel(i, j)`       // devuelve el `QRgb` del píxel en la posición `(i,j)`
+* `setPixel(i,j, pixel)`   // modifica el valor del píxel en la posición `(i, j)` al valor píxel `QRgb`
+
+Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
+
+
+* `qRed(pixel)`   // devuelve el tono del color rojo del píxel
+* `qGreen(pixel)` // devuelve el tono del color verde del píxel
+* `qBlue(pixel)`  // devuelve el tono del color azul del píxel
+* `qRgb(int red, int green, int blue)` // devuelve un píxel `QRgb` compuesto de los valores de rojo, verde y azul recibidos.
+
+
+####Ejemplos:
+
+1. `QRgb myRgb = qRgb(0xff, 0x00, 0xff);`: Asigna a `myRgb` el valor `0xff00ff` que representa el color ![figure4.png](images/figure4.png)
+
+    Nota que el valor `0xff00ff` representa los valores `0xff`, `0x0`, `0xff`, que corresponden a los componentes rojo, verde y azul de `myRgb`.
+
+2. Si la siguiente imagen `4 x 4` de píxeles representa el objeto `originalImage`,
+
+    ![ejemplo.png](images/ejemplo.png)
+
+  entonces `originalImage.pixel(2,1)` devuelve un valor `rgb` que representa el color azul (`0x0000ff`).
+
+3. La siguiente instrucción asigna el color rojo al píxel en posición `(2,3)` en la imagen editada:
+
+  `editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
+
+4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de  `originalImage`:
+
+  `int greenContent = qGreen(originalImage.pixel(1,1));`.
+
+
+5. El siguiente programa crea un objeto de clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
+
+---
+
+```cpp
+#include <QImage>
+#include <iostream>
+
+using namespace std;
+int main() {
+    QImage myImage(“/Users/rarce/Downloads/chuck.png”);
+    QRgb    centralPixel;
+
+    centralPixel = myImage.pixel(myImage.width() / 2, myImage.height() / 2);
+
+    cout    << hex;
+
+    cout    << “Los componentes rojo, verde y azul del pixel central son: “
+        << qRed(centralPixel) << “, “
+        << qGreen(centralPixel) << “, “
+        << qBlue(centralPixel) << endl;
+    return 0;
+}
+```
+
+---
+
+### Midiendo la similaridad de los colores de los pixeles
+
+Observa la Figura 4 abajo. Aunque el fondo en la *imagen A* parece uniforme, realmente incluye píxeles de diferentes colores (aunque parecidos).
+
+---
+
+![figure5.png](images/figure5.png)
+
+**Figura 4.** Lo que puede parecer un color *sólido*, realmente no lo es. 
+
+---
+
+Por esto, en lugar de solo considerar como parte del fondo sólido los píxeles cuyo color es **exactamente** `0x00FF00`, medimos la *distancia* del valor del color del píxel al valor del color *puro*. Una distancia pequeña significa que el color es *casi* verde puro. La ecuación para la *distancia* es:
+
+
+$$distancia = \sqrt{(P_R-S_R)^2+(P_G-S_G)^2+(P_B-S_B)^2},$$
+
+donde $$P_R, P_G, P_B$$ son los valores de los componentes rojo, verde y azul del píxel bajo consideración, y $$S_R, S_G, S_B$$ son los valores de los componentes rojo, verde y azul del fondo sólido. En nuestro ejemplo, $$S_R=S_B=0$$ y $$S_G=255$$.
+
+---
+
+---
+
+
+##Sesión de laboratorio:
+
+En el laboratorio de hoy, comenzando con una imagen con un objeto de interés sobre un fondo de color sólido y una imagen para utilizar como fondo, definirás e implantarás una función que cree una tercera imagen compuesta en la cual, a la imagen del objeto de interés se le removerá el color de fondo y aparecerá sobre la imagen para el fondo.
+
+Estarás trabajando con el archivo `Filter.cpp`. Lo que sigue es un resumen de las variables en este archivo.
+
+* `objectImage`: referencia a la imagen del objeto de interés y fondo sólido
+* `backgroundImage`: referencia a la imagen para el fondo
+* `mergedImage`: referencia a la imagen compuesta
+* `threshold`: valor umbral usado para comparar las distancias entre el valor del color del píxel de la imagen con el objeto sobre fondo sólido. En el código que se provee, el valor del umbral se lee del valor de la barra deslizable.
+* `ghost`: valor Booleano utilizado para aplicar el filtro "fantasma" a los pixeles. 
+* `(x, y)`: coordenadas de un pixel de la imagen del objeto sobre fondo sólido. El valor por defecto es `(0,0)`. 
+* `(offset_x, offset_y)`: coordenadas de la imagen compuesta en donde la esquina superior izquierda de la imagen del objeto sobre fondo sólido será insertada. El valor por defecto es `(0,0)`. 
+
+
+###Ejercicio 1: Crear imagen compuesta
+
+####Instrucciones
+
+1. Carga a QtCreator el proyecto `GreenScreen`  haciendo doble "click" en el archivo `GreenScreen.pro` en el directorio `Documents/eip/Arrays-GreenScreen` de tu computadora. También puedes ir a `http://bitbucket.org/eip-uprrp/arrays-greenscreen` para descargar la carpeta `Arrays-GreenScreen` a tu computadora.
+ 
+2. Compila y corre el programa. El código que te proveemos crea la interfaz de la Figura 5. Los botones  *Select Image* y *Select Background Image* ya han sido programados.
+ 
+
+    ---
+
+    ![figure6.png](images/figure6.png)
+
+    **Figura 5.** Interfaz de la aplicación GreenScreen.
+
+    ---
+
+3. Marca el botón para cargar una imagen del objeto de interés sobre fondo sólido, luego marca el botón para seleccionar la imagen para el fondo. El directorio con los archivos fuente contiene una carpeta llamada `landscapes`  que contiene imágenes de fondo, y una carpeta llamada `green_background` que contiene imágenes de objetos sobre fondo de color sólido.
+
+4. Tu primera tarea es completar la función `MergeImages` en el archivo `Filter.cpp`. La función `MergeImages` se invoca cuando el usuario marca el botón `Merge Images` y cuando se desliza la barra. La función `MergeImages` recibe las referencias a la imagen con objeto de interés y fondo sólido, la imagen para el fondo y la imagen compuesta, un valor umbral, las coordenadas `(x,y)` de un píxel de la imagen del objeto sobre fondo sólido, y las coordenadas `(offset_x, offset_y)` de la imagen compuesta. 
+
+Para este ejercicio puedes ignorar el filtro "fantasma" `ghost` y las coordenadas `(offset_x, offset_y)`, y solo componer la imagen con el objeto de interés en la imagen de fondo, comenzando en la posición `(0,0)`.
+
+**Algoritmo**
+
+1. Adquiere el valor del color sólido. El color sólido será el color del píxel en la posición `(x,y)` en la imagen del objeto sobre fondo sólido. El valor por defecto para `(x,y)` es `(0,0)`.
+
+2. Para todas las posiciones `(i,j)`, adquiere  el valor del color del píxel en la posición `(i,j)` de la imagen con el objeto. Computa la distancia entre el color de la imagen con el objeto y el valor del color sólido. Si la distancia entre el color sólido y el color del píxel de la imagen es mayor que que el valor umbral, cambia el valor del color del píxel en la posición `(i,j)` de la imagen de fondo al valor del color de la imagen con el objeto.
+ 
+Prueba tu implantación cargando imágenes de objetos e imágenes para el fondo y verificando la imagen compuesta.
+
+
+###Ejercicio 2: Crear imagen compuesta usando filtro `ghost`
+
+En este ejercicio modificarás el Ejercicio 1 para aplicar el filtro fantasma a cada uno de los píxeles que se compondrán sobre la imagen de fondo en el caso de que la variable `ghost` sea cierta. El filtro fantasma creará el efecto de que el objeto en la imagen compuesta se verá como un "fantasma" sobre la imagen de fondo, como en la Figura 6.
+
+---
+
+![figure7.png](images/figure7.png)
+
+**Figura 6.** Imagen con filtro fantasma. En este ejemplo, el perro en la imagen con el fondo sólido se compone sobre la imagen de fondo utilizando el filtro fantasma.
+
+---
+
+El efecto fantasma se consigue promediando el valor del color del píxel del fondo con el valor del color del píxel correspondiente del objeto, en lugar de solo reemplazar el valor del color del píxel del fondo por el del objeto. Calculamos el promedio de cada uno de los componentes (rojo, verde y azul)
+
+$$N_R=\frac{S_R+B_R}{2}$$
+$$N_G=\frac{S_G+B_G}{2}$$
+$$N_B=\frac{S_B+B_B}{2},$$
+
+
+en donde $$N_R, N_G, N_B$$ son los componentes rojo, verde y azul del nuevo píxel fantasma,  $$S_R, S_G, S_B$$ son los componentes de la imagen del objeto, y $$B_R, B_G, B_B$$ son los componentes de la imagen de fondo.
+
+
+###Ejercicio 3: Crear imagen compuesta colocando el objeto en una posición específica
+
+El "widget" que despliega el fondo fue programado para que detecte la posición marcada por el usuario. En este ejercicio programarás la función `MergeImages` para que el objeto sea desplegado en la posición marcada por el usuario en la imagen de fondo, en lugar de ser desplegado en la esquina superior izquierda. Las Figuras 7 y 8 muestran el efecto. Nota los valores de `Selected Coord` bajo la imagen del medio.
+
+---
+
+![figure8.png](images/figure8.png)
+
+
+**Figura 7.** En este ejemplo, la imagen del fondo no ha sido marcada y `Selected Coord` tiene `(0,0)` que es su valor por defecto. El perro se inserta en la imagen compuesta con su esquina superior izquierda en el lugar `(0,0)`.
+
+---
+
+![figure9.png](images/figure9.png)
+
+
+**Figura 8.** En este ejemplo, la imagen del fondo fue marcada en las coordenadas `(827,593)`. La imagen del perro se inserta en la imagen compuesta con su esquina superior izquierda en la posición `(827,593)`.
+
+---
+
+Tu tarea en este ejercicio es la misma que en el Ejercicio 1, pero esta vez debes ajustar la imagen del objeto dentro de la composición con las cantidades especificadas en los parámetros  `x_offset` y `y_offset`. Recuerda tomar en consideración los límites de la imagen compuesta cuando insertes el objeto; el usuario pudiera especificar unos parámetros que se salgan de los límites y el objeto se cortará, como sucede en la Figura 9.
+
+---
+
+![figure10.png](images/figure10.png)
+
+**Figura 9.** En este ejemplo, el usuario seleccionó una posición que asignó valores muy grandes para `x_offset` y `y_offset`; la implementación hizo el ajuste para que parte de la imagen del perro saliera en la imagen compuesta.
+
+---
+
+El ejemplo de la Figura 10 muestra cómo se comportará la imagen del objeto al sobreponerla en la imagen que queremos de fondo. Las variables `offset_x, offset_y` representan el punto en la imagen de fondo en el que se colocará la esquina superior izquierda de la imagen del objeto. Nota que si se escoge un punto muy cerca del borde para la composición, parte de la imagen del objeto se sale de los límites de la imagen de fondo. Como hemos visto en la manipulación de arreglos, si se intenta acceder o alterar elementos que estan fuera del rango de tamaño del arreglo, al compilar occurre un error fatal. Lo mismo sucede con las imágenes. 
+
+Debes asegurarte de que tu implementación toma en cuenta los valores de `offset x` y `offset y`  para que la composición no intente acceder o alterar píxeles fuera del límite de la imagen de fondo. Si intentas acceder o alterar píxeles fuera de esos límites, resulta en un error fatal.
+
+---
+
+![figure11.png](images/figure11.png)
+
+**Figura 10.** Ilustración de la imagen del objeto de interés con píxeles que se salen de los límites de la imagen de fondo. Si no se toma en consideración esta posibilidad en la implementación, ocurrirá un error fatal.
+
+---
+
+
+Valida tu implantación seleccionando varios valores para el ajuste de "offset" y observando el efecto que tienen en la imagen compuesta. Asegúrate de tratar casos en los que tus valores para `x_offset` y `y_offset` ocasionarían que la imagen fuera cortada como ocurrió en la imagen compuesta de la Figura 9.
+
+---
+
+---
+
+##Entrega
+
+Utiliza "Entrega" en Moodle para entregar el archivo `filter.cpp` que contiene la función `MergeImages`. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
+
+
+---
+
+---
+
+
+## Referencias
+
+[1] http://en.wikipedia.org/wiki/Green_screen_(disambiguation)
+
+[2] http://en.wikipedia.org/wiki/Chroma_key
+
+[3] http://doc.qt.io/qt-4.8/qimage.html.
+
+---
+
+---
+
+---
+
+[English](#markdown-header-arrays-green-screen) | [Español](#markdown-header-arreglos-pantalla-verde)
+
+#Arrays - Green Screen
+
+![main1.png](images/main1.png)
+![main2.png](images/main2.png)
+![main3.png](images/main3.png)
+
+
+Arrays help us to store and work with groups of data of the same type. The data is stored in consecutive memory spaces which can be accessed by using the name of the array and indexes or subscripts that indicate the position where the data is stored. Repetition structures provide us a simple way of accessing the data within an array. In this laboratory experience, you will be using nested loops to process bi-dimensional arrays and implement the functionality of a green-screen.
+
+
+##Objectives:
+
+1. Practice accessing and modifying elements in an array.
+
+2. Use nested loops to implement greens-screen techniques.
+
+3. Use arithmetic expressions and selection structures to transform pixel colors.
+
+4. Read pixels from an image and decompose them in their red, green and blue components.
+
+
+##Pre-Lab:
+
+Before coming to the laboratory you should have:
+
+1. Reviewed the basic concepts about repetition structures, nested loops, and bi-dimensional arrays.
+
+2. Understood the methods of the `QImage` class for pixel manipulation.
+
+3. Studied the concepts and instructions for the laboratory session.
+
+4. Taken the Pre-Lab quiz that is found in Moodle.
+
+---
+
+---
+
+## Green-screen technology
+
+In this laboratory experience the student will be exposed to the basics of the green screen technology used in newscasting, motion pictures, video games, and others.  Green screen compositing, or more generally chroma key compositing, is a technique for combining two still images or video frames[1]. Chroma key compositing, or chroma keying, is a special effects / post-production technique for compositing (layering) two images or video streams together based on color hues (range)[2]. Chroma keying can be done with backgrounds of any color that are uniform and distinct, but green and blue backgrounds are more commonly used because they differ most distinctly in hue from most human skin colors.
+
+With this laboratory we provide a simple GUI that allows the user to load an image with any solid background (although green or blue are preferred), and a background image. Your task is to implement a function that creates a third, merged image, in which the image with the solid background appears over the background image (with the solid background removed). Figure 1 shows an example of the expected results.
+
+---
+
+![figure1.png](images/figure1.png)
+
+Figure 1: Example of the expected results. The object of interest is the hand carrying the sunglasses.
+
+---
+
+For illustration purposes, let's call the image with the solid background *image A* and let's say that the solid color in the background has an RGB `0x00ff00` (pure green). We will refer to the image with the interesting background as *image B*. Let's also assume that both images are the same size (width and height). 
+
+To produce the merged image (*image C*), we could start by completely copying *image B* to *image *C*. Then, to insert only the object of interest into the merged image we could traverse *image A* pixel by pixel. We would compare the color of each pixel *p* in *image A* to the color `0x00FF00`, if they are *similar* we do nothing (because it means that this pixel is part of the solid color background). If the color of *p* is not *similar* to `0x00FF00`, we modify the corresponding pixel in *image C*, copying the color of the object's pixel to the merged image.
+
+---
+
+![figure2.png](images/figure2.png)
+
+**Figure 2** - Illustration of how the algorithm decides which pixels to include from *image A* into *image C*.
+
+---
+
+---
+
+
+###Pixels
+
+The smallest element in an image is called a *pixel*. This unit consists of a single color. Since each color is a combination of tones for the primary red, green and blue colors, it is coded as an unsigned integer whose bytes represent the tones of red, green and blue of the pixel (Figure 3). This combination is called the color's *RGB* which is an acronym for "Red-Green-Blue". For example, a pure red pixel has an RGB representation of `0x00ff0000`, while a white pixel has an RGB representation of `0x00FFFFFF` (since the color white is a combination of tones of red, green and blue in all of their intensity).
+
+---
+
+![figure3.png](images/figure3.png)
+
+**Figure 3.** Bit distribution for the tones of red, green and blue in an RGB representation. Each tone can have values between 0x00 (the eight bits in 0) and (0xFF (the 8 bits in 1).
+
+---
+
+`Qt` uses the `QRgb` type to represent `RGB` values. Using certain functions that are described below we can obtains the red, green and blue components of the `QRgb` value of the pixel and manipulate the images.
+
+###Library
+
+In today's laboratory experience you will use the `QImage` class. This class permits access to the data in the pixels of an image to manipulate it. The documentation for the `QImage` class can be found in http://doc.qt.io/qt-4.8/qimage.html.
+
+The code provided in this project contains the following objects of the `QImage` class:
+
+* `originalImage`   // contains the information of the original image that you will edit
+*  `editedImage`  // will contain the edited image
+
+The objects of the `QImage` class have the following methods that will be useful for today's laboratory experience:
+
+* `width()`      // returns the integer value for the image's width
+* `height()`      // returns the integer value for the image's height
+* `pixel(i, j)`       // returns the `QRgb` for the pixel in position `(i,j)`
+* `setPixel(i,j, pixel)`   // modifies the value for the pixel in position `(i,j)` to the value of pixel `QRgb`
+
+The following functions are useful to work with data of type `QRgb`:
+
+* `qRed(pixel)`   // returns the tone for the pixel's red color
+* `qGreen(pixel)` // returns the tone for the pixel's green color
+* `qBlue(pixel)`  // returns the tone for the pixel's blue color
+* `qRgb(int red, int green, int blue)` // returns the `QRgb` pixel composed of the red, green and blue values received.
+
+
+####Examples:
+
+1. `QRgb myRgb = qRgb(0xff, 0x00, 0xff);`: Assigns the value `0xff00ff` to `myRgb` which represents the color ![figure2.jpg](images/figure4.jpg)
+
+    Notice that the value `0xff00ff` represents the values `0xff`, `0x0`, and `0xff`, that correspond to the red, green and blue components in `myRgb`.
+
+2. If the following `4 x 4` image of pixels represents the object `originalImage`,
+
+ ![ejemplo.png](images/ejemplo.png)
+
+then `originalImage.pixel(2,1)` returns the `rgb` value that represents the color blue ( `0x0000ff`).
+
+3. The following instruction assigns the color red to the pixel in position `(2,3)` in the edited image:
+
+`editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
+
+4. The following instruction assigns to `greenContent` the value of the green tone that is contained in the pixel `(1,1)` of `originalImage`:
+
+    `int greenContent = qGreen(originalImage.pixel(1,1));`.
+
+5. The following program creates an object of the `QImage` class and prints the red, green and blue components of the pixel in the center of the image. The image used is the one specified within the parenthesis during the creation of the object, that is, the file `chuck.png`
+
+---
+
+```cpp
+#include <QImage>
+#include <iostream>
+
+using namespace std;
+int main() {
+    QImage myImage(“/Users/rarce/Downloads/chuck.png”);
+    QRgb    centralPixel;
+
+    centralPixel = myImage.pixel(myImage.width() / 2, myImage.height() / 2);
+
+    cout    << hex;
+
+    cout    << “The red, green and blue components of the middle pixel are: “
+        << qRed(centralPixel) << “, “
+        << qGreen(centralPixel) << “, “
+        << qBlue(centralPixel) << endl;
+    return 0;
+}
+```
+
+---
+
+
+
+### Measuring similarity of pixel colors
+
+Look at Figure 4, although the background in *image A* looks uniform, it really includes pixels of diverse (although similar) colors.
+
+---
+
+![figure5.png](images/figure5.png)
+
+**Figure 4** - What may seem as a *solid* color, really is not. Thus, we use the color *distance*.
+
+---
+
+Instead of only considering as part of the solid background the pixels whose color is **exactly** `0x00FF00`, we measure a color's *distance* from the *pure* color. A small *distance* means that the color is *almost* a pure green. A large *distance* means that the color is very different from green. The equation for *distance* is:
+
+$$distance = \sqrt{(P_R-S_R)^2+(P_G-S_G)^2+(P_B-S_B)^2},$$
+
+where $$P_R$$, $$P_G$$, and $$P_B$$ are the red, green and blue components of the pixel being considered.  $$S_R$$, $$S_G$$, and $$S_B$$ are the components of the solid background, e.g. in our example $$S_R=S_B=0$$ y $$S_G=255$$.
+
+---
+
+---
+
+##Laboratory Session
+
+In this laboratory experience, starting with an image with an object of interest over a solid color background and an image to use as a background, you will define and implement a function that creates a third merged image where the image with the object of interest will have its background color removed and will appear over the image chosen to be the background.
+
+You will be working with the `Filter.cpp` file. The following is a review of the variables in this file:
+
+* objectImage: reference to the object image with the solid background
+* backgroundImage: reference to the background image object
+* mergedImage: reference to the merged image
+* threshold: is a theshold value used to compare the distances between the object pixel and the solid background pixel. In the provided code, the threshold value is read from the slideBar.
+* ghost: is a boolean value used to apply ghost filter to pixels.
+* (x, y): contains the coordinate of the pixel whose color will be used as solid background. The default value is (0,0).
+* (offset_x, offset_y): the coordinate of the merged image where the upper-left corner of the objectImage should be inserted. The default value is (0,0).
+
+### Exercise 1: Create a composite image
+
+####Instructions
+
+1. Load the Qt project called `GreenScreenLab` by double-clicking on the `GreenScreenLab.pro` file in the `Documents/eip/Arrays-GreenScreen` folder of your computer. You may also go to `http://bitbucket.org/eip-uprrp/arrays-greenscreen` to download the `Arrays-GreenScreen` folder to your computer.
+
+2. Build and run the program. The provided code creates the interface shown in Figure 5. The buttons  *Select Image* and *Select Background Image* have already been programmed to perform their actions.
+
+    ---
+
+    ![figure6.png](images/figure6.png)
+
+    **Figure 5.**Interface for the green screen application.
+
+    ---
+
+3. Click the *Select Image* button to load the image that contains the solid background, the click *Select Background Image* to load the image that contains the interesting background. The folders called `green_background` and `landscapes` contain some images that are suitable as the first and second images.  
+
+
+4. Your first task is to complete the function `MergeImages` in file `Filter.cpp`.`MergeImages` is the function that is called when the user presses the button captioned `Merge Images` or when he slides the slide bar. The function `MergeImages` receives the image with the solid background, the background image, a reference to the merged image, a threshold value, and the coordinates `(x,y)` of the pixel from which we will extract the sample *green* background color, and the coordinates `(offset_x, offset_y)` from the merged image.
+
+For this first exercise you can ignore the following parameters: ghost, x_offset, y_offset. Your implementation should place the `objectImage` into the `mergedImage` starting at position (0,0).
+
+**The algorithm**
+
+1. Acquire the value of the solid color. The solid color will be the color of the pixel in the coordinate `(x,y)` of the object image with the solid background. The default value for `(x,y)` is `(0,0)`.
+
+2. For every position `(i,j)`, read the color of the corresponding pixel in the objectImage. Compute the distance of the pixel colors to the solid color. If the distance between the solid color and the color of the pixel of the image is greater than the threshold, set the corresponding `(i,j)` pixel in the merged image to the objectImage pixel color. 
+
+Test your implementation by loading object and background images and verifying the merged image.
+
+## Exercise 2: Creating a composite image using a ghost filter
+
+In this exercise you will modify Exercise 1 to apply a ghost filter to each of the pixels that will be composed over the background image (if the `ghost` variable is true). The filter creates a ghost like effect on the objects composed over the background image, as in Figure 6.
+
+
+---
+
+![figure7.png](images/figure7.png)
+
+**Figure 6** - In this example, the dog in the image with the solid background is composed in the background image with the ghost filter. 
+
+---
+
+The ghost effect is achieved by *averaging* the background color with the object's color (instead of simply *replacing* the background with the object's color). The average is performed for each of the components (red, green and blue).  
+
+$$N_R=\frac{S_R+B_R}{2}$$
+$$N_G=\frac{S_G+B_G}{2}$$
+$$N_B=\frac{S_B+B_B}{2},$$
+
+
+where $$N_R$$, $$N_G$$, and $$N_B$$ are the red, green and blue components of the new ghost pixel. $$S_R$$, $$S_G$$, and $$S_B$$ are the components of the object image. $$B_R$$, $$B_G$$, $$B_B$$ are the components of the background image. 
+
+## Exercise 3: Create a composite image placing the object in a specified position
+
+The widget that displays the background has been programmed to register the position where the user clicks. In this exercise you will program the `MergeImages` function so that the position that user clicks in the background image is used as the *top left* corner where the *object* image will be displayed in the merged image. The following figures illustrates the effect. Note the *Selected Coord* values under the images.
+
+
+---
+
+![figure8.png](images/figure8.png)
+
+
+**Figure 7.** In this example, the background image has not been clicked. Thus the "Selected Coord" is at its default value of (0,0).  The dog image is inserted with its top-left corner at (0,0) in the merged image.
+
+---
+
+![figure9.png](images/figure9.png)
+
+
+**Figure 8.** In this example, the background image has been clicked at coordinate `(827,593)`. The dog image is inserted with its top-left corner at `(827,593)` in the merged image.
+
+---
+
+
+In this exercise your task will be the same as in Exercise 1, but this time you will need to offset the *object* image inside the *merged* image by the amount specified in the `x_offset` and `y_offset` parameters. Please take into consideration the merged image boundaries when you are inserting the object image. The user may specify an offset where the boundaries are exceeded and the object will be cut, as in Figure 9.  
+
+---
+
+![figure10.png](images/figure10.png)
+
+**Figure 9**. In this example, the user selected a position that assigned values that are too large for `x_offset` and `y_offset`; the implementation made the adjustment so part of the dog appeared in the merged image.
+
+---
+
+The example in Figure 10 shows how the object image will behave when merging it with the background image. The `x_offset` and `y_offset` variables represent the point in the background image where the upper left corner of the object image will be placed. Notice that if a point too close to the image border is chosen, part of the object image will be outside of the limits of the background image. As we have seen when manipulating arrays, if one tries to access or alter elements that are outside of the size range of the array, we get a fatal compilation error. The same thing happens with the images.
+
+You should make sure that your implementation takes into account the `x_offset` and `y_offset` values so the composition does not try to access or alter pixels outside of the limits of the background image. If you try to access or alter pixels outside of these limits, it will result in a fatal error.
+
+---
+
+![figure11.png](images/figure11.png)
+
+**Figure 10.** Illustration of the object image with pixels that are outside of the background image limits. If the possibility of this happening is not taken into account in the implementation, there will be a fatal error.
+
+---
+
+
+Validate your implementation by choosing several offsets and observing the merged image. Be sure to try cases in which you choose x and y offsets that result in the object being cropped in the merged image (as in Figure 9).
+
+
+---
+
+---
+
+### Deliverables
+
+
+Use "Deliverables" in Moodle to upload the `filter.cpp` file that contains the `MergeImages` function. Remember to use good programming techniques, include the names of the programmers involved, and to document your program.
+
+---
+
+---
+
+### References
+
+[1] http://en.wikipedia.org/wiki/Green_screen_(disambiguation)
+
+[2] http://en.wikipedia.org/wiki/Chroma_key
+
+[3] http://doc.qt.io/qt-4.8/qimage.html.
+
+
+
+

doc/en/html/_clickable_label_8h_source.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
+<meta http-equiv="X-UA-Compatible" content="IE=9"/>
+<meta name="generator" content="Doxygen 1.8.9.1"/>
+<title>My Project: ClickableLabel.h Source File</title>
+<link href="tabs.css" rel="stylesheet" type="text/css"/>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="dynsections.js"></script>
+<link href="search/search.css" rel="stylesheet" type="text/css"/>
+<script type="text/javascript" src="search/searchdata.js"></script>
+<script type="text/javascript" src="search/search.js"></script>
+<script type="text/javascript">
+  $(document).ready(function() { init_search(); });
+</script>
+<link href="doxygen.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
+<div id="titlearea">
+<table cellspacing="0" cellpadding="0">
+ <tbody>
+ <tr style="height: 56px;">
+  <td style="padding-left: 0.5em;">
+   <div id="projectname">My Project
+   </div>
+  </td>
+ </tr>
+ </tbody>
+</table>
+</div>
+<!-- end header part -->
+<!-- Generated by Doxygen 1.8.9.1 -->
+<script type="text/javascript">
+var searchBox = new SearchBox("searchBox", "search",false,'Search');
+</script>
+  <div id="navrow1" class="tabs">
+    <ul class="tablist">
+      <li><a href="index.html"><span>Main&#160;Page</span></a></li>
+      <li><a href="namespaces.html"><span>Namespaces</span></a></li>
+      <li><a href="annotated.html"><span>Classes</span></a></li>
+      <li class="current"><a href="files.html"><span>Files</span></a></li>
+      <li>
+        <div id="MSearchBox" class="MSearchBoxInactive">
+        <span class="left">
+          <img id="MSearchSelect" src="search/mag_sel.png"
+               onmouseover="return searchBox.OnSearchSelectShow()"
+               onmouseout="return searchBox.OnSearchSelectHide()"
+               alt=""/>
+          <input type="text" id="MSearchField" value="Search" accesskey="S"
+               onfocus="searchBox.OnSearchFieldFocus(true)" 
+               onblur="searchBox.OnSearchFieldFocus(false)" 
+               onkeyup="searchBox.OnSearchFieldChange(event)"/>
+          </span><span class="right">
+            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
+          </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div id="navrow2" class="tabs2">
+    <ul class="tablist">
+      <li><a href="files.html"><span>File&#160;List</span></a></li>
+    </ul>
+  </div>
+</div><!-- top -->
+<!-- window showing the filter options -->
+<div id="MSearchSelectWindow"
+     onmouseover="return searchBox.OnSearchSelectShow()"
+     onmouseout="return searchBox.OnSearchSelectHide()"
+     onkeydown="return searchBox.OnSearchSelectKey(event)">
+</div>
+
+<!-- iframe showing the search results (closed by default) -->
+<div id="MSearchResultsWindow">
+<iframe src="javascript:void(0)" frameborder="0" 
+        name="MSearchResults" id="MSearchResults">
+</iframe>
+</div>
+
+<div class="header">
+  <div class="headertitle">
+<div class="title">ClickableLabel.h</div>  </div>
+</div><!--header-->
+<div class="contents">
+<div class="fragment"><div class="line"><a name="l00001"></a><span class="lineno">    1</span>&#160;<span class="preprocessor">#ifndef CLICKABLELABEL_H</span></div>
+<div class="line"><a name="l00002"></a><span class="lineno">    2</span>&#160;<span class="preprocessor">#define CLICKABLELABEL_H</span></div>
+<div class="line"><a name="l00003"></a><span class="lineno">    3</span>&#160;</div>
+<div class="line"><a name="l00004"></a><span class="lineno">    4</span>&#160;<span class="preprocessor">#include &lt;QLabel&gt;</span></div>
+<div class="line"><a name="l00005"></a><span class="lineno">    5</span>&#160;<span class="preprocessor">#include &lt;QMouseEvent&gt;</span></div>
+<div class="line"><a name="l00006"></a><span class="lineno">    6</span>&#160;<span class="preprocessor">#include &lt;QDebug&gt;</span></div>
+<div class="line"><a name="l00007"></a><span class="lineno">    7</span>&#160;</div>
+<div class="line"><a name="l00013"></a><span class="lineno"><a class="line" href="class_clickable_label.html">   13</a></span>&#160;<span class="keyword">class </span><a class="code" href="class_clickable_label.html">ClickableLabel</a> : <span class="keyword">public</span> QLabel{</div>
+<div class="line"><a name="l00014"></a><span class="lineno">   14</span>&#160;    Q_OBJECT</div>
+<div class="line"><a name="l00015"></a><span class="lineno">   15</span>&#160;<span class="keyword">public</span>:</div>
+<div class="line"><a name="l00016"></a><span class="lineno">   16</span>&#160;</div>
+<div class="line"><a name="l00022"></a><span class="lineno">   22</span>&#160;    <span class="keyword">explicit</span> <a class="code" href="class_clickable_label.html#a62b23a9a7f7aed36692db03640561072">ClickableLabel</a>(QWidget *parent = 0);</div>
+<div class="line"><a name="l00023"></a><span class="lineno">   23</span>&#160;</div>
+<div class="line"><a name="l00029"></a><span class="lineno">   29</span>&#160;    <span class="keywordtype">void</span> <a class="code" href="class_clickable_label.html#a6207e08167257d9a0505a219a659c53f">mouseMoveEvent</a>(QMouseEvent *ev);</div>
+<div class="line"><a name="l00030"></a><span class="lineno">   30</span>&#160;</div>
+<div class="line"><a name="l00036"></a><span class="lineno">   36</span>&#160;    <span class="keywordtype">void</span> <a class="code" href="class_clickable_label.html#adfec8a6c2ddd87b673f3a734ea6afa2b">mousePressEvent</a>(QMouseEvent *ev);</div>
+<div class="line"><a name="l00037"></a><span class="lineno">   37</span>&#160;</div>
+<div class="line"><a name="l00043"></a><span class="lineno">   43</span>&#160;    <span class="keywordtype">void</span> <a class="code" href="class_clickable_label.html#ad884c3cdc7a6c16af19143e84c79b5da">leaveEvent</a>(QEvent *);</div>
+<div class="line"><a name="l00044"></a><span class="lineno">   44</span>&#160;    <span class="keywordtype">int</span> x,y;</div>
+<div class="line"><a name="l00045"></a><span class="lineno">   45</span>&#160;</div>
+<div class="line"><a name="l00046"></a><span class="lineno">   46</span>&#160;signals:</div>
+<div class="line"><a name="l00047"></a><span class="lineno">   47</span>&#160;    <span class="keywordtype">void</span> Mouse_Pressed();</div>
+<div class="line"><a name="l00048"></a><span class="lineno">   48</span>&#160;    <span class="keywordtype">void</span> Mouse_Pos();</div>
+<div class="line"><a name="l00049"></a><span class="lineno">   49</span>&#160;</div>
+<div class="line"><a name="l00050"></a><span class="lineno">   50</span>&#160;</div>
+<div class="line"><a name="l00051"></a><span class="lineno">   51</span>&#160;    <span class="keywordtype">void</span> Mouse_Left();</div>
+<div class="line"><a name="l00052"></a><span class="lineno">   52</span>&#160;};</div>
+<div class="line"><a name="l00053"></a><span class="lineno">   53</span>&#160;</div>
+<div class="line"><a name="l00054"></a><span class="lineno">   54</span>&#160;<span class="preprocessor">#endif // CLICKABLELABEL_H</span></div>
+<div class="ttc" id="class_clickable_label_html_ad884c3cdc7a6c16af19143e84c79b5da"><div class="ttname"><a href="class_clickable_label.html#ad884c3cdc7a6c16af19143e84c79b5da">ClickableLabel::leaveEvent</a></div><div class="ttdeci">void leaveEvent(QEvent *)</div><div class="ttdoc">Funtion to add mouse event to the labelWidget. </div><div class="ttdef"><b>Definition:</b> ClickableLabel.cpp:40</div></div>
+<div class="ttc" id="class_clickable_label_html"><div class="ttname"><a href="class_clickable_label.html">ClickableLabel</a></div><div class="ttdef"><b>Definition:</b> ClickableLabel.h:13</div></div>
+<div class="ttc" id="class_clickable_label_html_adfec8a6c2ddd87b673f3a734ea6afa2b"><div class="ttname"><a href="class_clickable_label.html#adfec8a6c2ddd87b673f3a734ea6afa2b">ClickableLabel::mousePressEvent</a></div><div class="ttdeci">void mousePressEvent(QMouseEvent *ev)</div><div class="ttdoc">Funtion to add mouse event to the labelWidget. </div><div class="ttdef"><b>Definition:</b> ClickableLabel.cpp:29</div></div>
+<div class="ttc" id="class_clickable_label_html_a6207e08167257d9a0505a219a659c53f"><div class="ttname"><a href="class_clickable_label.html#a6207e08167257d9a0505a219a659c53f">ClickableLabel::mouseMoveEvent</a></div><div class="ttdeci">void mouseMoveEvent(QMouseEvent *ev)</div><div class="ttdoc">Funtion to add mouse event to the labelWidget. </div><div class="ttdef"><b>Definition:</b> ClickableLabel.cpp:18</div></div>
+<div class="ttc" id="class_clickable_label_html_a62b23a9a7f7aed36692db03640561072"><div class="ttname"><a href="class_clickable_label.html#a62b23a9a7f7aed36692db03640561072">ClickableLabel::ClickableLabel</a></div><div class="ttdeci">ClickableLabel(QWidget *parent=0)</div><div class="ttdoc">Constructor. </div><div class="ttdef"><b>Definition:</b> ClickableLabel.cpp:8</div></div>
+</div><!-- fragment --></div><!-- contents -->
+<!-- start footer part -->
+<hr class="footer"/><address class="footer"><small>
+Generated on Fri Jun 12 2015 14:32:24 for My Project by &#160;<a href="http://www.doxygen.org/index.html">
+<img class="footer" src="doxygen.png" alt="doxygen"/>
+</a> 1.8.9.1
+</small></address>
+</body>
+</html>

doc/en/html/_filter_8cpp.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
+<meta http-equiv="X-UA-Compatible" content="IE=9"/>
+<meta name="generator" content="Doxygen 1.8.9.1"/>
+<title>My Project: Filter.cpp File Reference</title>
+<link href="tabs.css" rel="stylesheet" type="text/css"/>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="dynsections.js"></script>
+<link href="search/search.css" rel="stylesheet" type="text/css"/>
+<script type="text/javascript" src="search/searchdata.js"></script>
+<script type="text/javascript" src="search/search.js"></script>
+<script type="text/javascript">
+  $(document).ready(function() { init_search(); });
+</script>
+<link href="doxygen.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
+<div id="titlearea">
+<table cellspacing="0" cellpadding="0">
+ <tbody>
+ <tr style="height: 56px;">
+  <td style="padding-left: 0.5em;">
+   <div id="projectname">My Project
+   </div>
+  </td>
+ </tr>
+ </tbody>
+</table>
+</div>
+<!-- end header part -->
+<!-- Generated by Doxygen 1.8.9.1 -->
+<script type="text/javascript">
+var searchBox = new SearchBox("searchBox", "search",false,'Search');
+</script>
+  <div id="navrow1" class="tabs">
+    <ul class="tablist">
+      <li><a href="index.html"><span>Main&#160;Page</span></a></li>
+      <li><a href="namespaces.html"><span>Namespaces</span></a></li>
+      <li><a href="annotated.html"><span>Classes</span></a></li>
+      <li class="current"><a href="files.html"><span>Files</span></a></li>
+      <li>
+        <div id="MSearchBox" class="MSearchBoxInactive">
+        <span class="left">
+          <img id="MSearchSelect" src="search/mag_sel.png"
+               onmouseover="return searchBox.OnSearchSelectShow()"
+               onmouseout="return searchBox.OnSearchSelectHide()"
+               alt=""/>
+          <input type="text" id="MSearchField" value="Search" accesskey="S"
+               onfocus="searchBox.OnSearchFieldFocus(true)" 
+               onblur="searchBox.OnSearchFieldFocus(false)" 
+               onkeyup="searchBox.OnSearchFieldChange(event)"/>
+          </span><span class="right">
+            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
+          </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div id="navrow2" class="tabs2">
+    <ul class="tablist">
+      <li><a href="files.html"><span>File&#160;List</span></a></li>
+    </ul>
+  </div>
+<!-- window showing the filter options -->
+<div id="MSearchSelectWindow"
+     onmouseover="return searchBox.OnSearchSelectShow()"
+     onmouseout="return searchBox.OnSearchSelectHide()"
+     onkeydown="return searchBox.OnSearchSelectKey(event)">
+</div>
+
+<!-- iframe showing the search results (closed by default) -->
+<div id="MSearchResultsWindow">
+<iframe src="javascript:void(0)" frameborder="0" 
+        name="MSearchResults" id="MSearchResults">
+</iframe>
+</div>
+
+</div><!-- top -->
+<div class="header">
+  <div class="headertitle">
+<div class="title">Filter.cpp File Reference</div>  </div>
+</div><!--header-->
+<div class="contents">
+<div class="textblock"><code>#include &quot;MergePanel.h&quot;</code><br />
+</div></div><!-- contents -->
+<!-- start footer part -->
+<hr class="footer"/><address class="footer"><small>
+Generated on Fri Jun 12 2015 14:32:24 for My Project by &#160;<a href="http://www.doxygen.org/index.html">
+<img class="footer" src="doxygen.png" alt="doxygen"/>
+</a> 1.8.9.1
+</small></address>
+</body>
+</html>

doc/en/html/_merge_panel_8h_source.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
+<meta http-equiv="X-UA-Compatible" content="IE=9"/>
+<meta name="generator" content="Doxygen 1.8.9.1"/>
+<title>My Project: MergePanel.h Source File</title>
+<link href="tabs.css" rel="stylesheet" type="text/css"/>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="dynsections.js"></script>
+<link href="search/search.css" rel="stylesheet" type="text/css"/>
+<script type="text/javascript" src="search/searchdata.js"></script>
+<script type="text/javascript" src="search/search.js"></script>
+<script type="text/javascript">
+  $(document).ready(function() { init_search(); });
+</script>
+<link href="doxygen.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
+<div id="titlearea">
+<table cellspacing="0" cellpadding="0">
+ <tbody>
+ <tr style="height: 56px;">
+  <td style="padding-left: 0.5em;">
+   <div id="projectname">My Project
+   </div>
+  </td>
+ </tr>
+ </tbody>
+</table>
+</div>
+<!-- end header part -->
+<!-- Generated by Doxygen 1.8.9.1 -->
+<script type="text/javascript">
+var searchBox = new SearchBox("searchBox", "search",false,'Search');
+</script>
+  <div id="navrow1" class="tabs">
+    <ul class="tablist">
+      <li><a href="index.html"><span>Main&#160;Page</span></a></li>
+      <li><a href="namespaces.html"><span>Namespaces</span></a></li>
+      <li><a href="annotated.html"><span>Classes</span></a></li>
+      <li class="current"><a href="files.html"><span>Files</span></a></li>
+      <li>
+        <div id="MSearchBox" class="MSearchBoxInactive">
+        <span class="left">
+          <img id="MSearchSelect" src="search/mag_sel.png"
+               onmouseover="return searchBox.OnSearchSelectShow()"
+               onmouseout="return searchBox.OnSearchSelectHide()"
+               alt=""/>
+          <input type="text" id="MSearchField" value="Search" accesskey="S"
+               onfocus="searchBox.OnSearchFieldFocus(true)" 
+               onblur="searchBox.OnSearchFieldFocus(false)" 
+               onkeyup="searchBox.OnSearchFieldChange(event)"/>
+          </span><span class="right">
+            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.png" alt=""/></a>
+          </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div id="navrow2" class="tabs2">
+    <ul class="tablist">
+      <li><a href="files.html"><span>File&#160;List</span></a></li>
+    </ul>
+  </div>
+</div><!-- top -->
+<!-- window showing the filter options -->
+<div id="MSearchSelectWindow"
+     onmouseover="return searchBox.OnSearchSelectShow()"
+     onmouseout="return searchBox.OnSearchSelectHide()"
+     onkeydown="return searchBox.OnSearchSelectKey(event)">
+</div>
+
+<!-- iframe showing the search results (closed by default) -->
+<div id="MSearchResultsWindow">
+<iframe src="javascript:void(0)" frameborder="0" 
+        name="MSearchResults" id="MSearchResults">
+</iframe>
+</div>
+
+<div class="header">
+  <div class="headertitle">