アプリケーションへのトラックバーの追加

目次

• 目標
• コード
• 解説
• 結果

次のチュートリアル: GDAL を使った地理空間ラスタファイルの読み込み

原著者	Ana Huamán
互換性	OpenCV >= 3.0

• 前のチュートリアル（OpenCV を使った2枚の画像の加算（ブレンド）と画像のコントラストと明るさの変更!について）では、プログラムに \(\alpha\) や \(beta\) などの入力を与える必要があることに気づいたかもしれない。これらはターミナルからデータを入力することで実現していた。
• さて、いくつかの洗練された GUI ツールを使うときが来た。OpenCV はいくつかの GUI ユーティリティ（highgui モジュール）を提供している。その一例が Trackbar である。

• このチュートリアルでは、トラックバーから入力情報を取得するように、前の2つのプログラムを少し変更するだけである。

目標

このチュートリアルでは、以下の方法を学ぶ:

• cv::createTrackbar を使って OpenCV ウィンドウにトラックバーを追加する

コード

チュートリアルOpenCV を使った2枚の画像の加算（ブレンド）で作成したプログラムを変更しよう。トラックバーを使って、ユーザに \(\alpha\) の値を入力させるようにする。

C++

このチュートリアルのコードを以下の行に示す。ここからダウンロードすることもできる

 
#include "opencv2/imgcodecs.hpp"
#include "opencv2/highgui.hpp"
#include <iostream>
 
using namespace cv;
using std::cout;
 
const int alpha_slider_max = 100;
int alpha_slider;
double alpha;
double beta;
 
Mat src1;
Mat src2;
Mat dst;
 
 
static void on_trackbar(int pos, void* userdata) {
    (void) userdata;
    alpha = (double)pos / alpha_slider_max;
    beta = (1.0 - alpha);
    addWeighted(src1, alpha, src2, beta, 0.0, dst);
    imshow("Linear Blend", dst);
}
 
int main(void)
{
    src1 = imread(samples::findFile("LinuxLogo.jpg"));
    src2 = imread(samples::findFile("WindowsLogo.jpg"));
 
 if (src1.empty()) { cout << "Error loading src1 \n"; return -1; }
 if (src2.empty()) { cout << "Error loading src2 \n"; return -1; }
 
 // Initialize trackbar value
    alpha_slider = 0;
 
    namedWindow("Linear Blend", WINDOW_AUTOSIZE); //Create Window
 
 char TrackbarName[50];
    snprintf(TrackbarName, sizeof(TrackbarName), "Alpha x %d", alpha_slider_max);
 // Example userdata: Pass a pointer to an integer as userdata
    createTrackbar(TrackbarName, "Linear Blend", &alpha_slider, alpha_slider_max, on_trackbar);
 
    on_trackbar(alpha_slider, nullptr);
 
    waitKey(0);
 return 0;
}

Java

このチュートリアルのコードを以下の行に示す。ここからダウンロードすることもできる

import java.awt.BorderLayout;
import java.awt.Container;
import java.awt.Image;
 
import javax.swing.BoxLayout;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
 
import org.opencv.core.Core;
import org.opencv.core.Mat;
import org.opencv.highgui.HighGui;
import org.opencv.imgcodecs.Imgcodecs;
 
public class AddingImagesTrackbar {
 private static final int ALPHA_SLIDER_MAX = 100;
 private int alphaVal = 0;
 private Mat matImgSrc1;
 private Mat matImgSrc2;
 private Mat matImgDst = new Mat();
 private JFrame frame;
 private JLabel imgLabel;
 
 public AddingImagesTrackbar(String[] args) {
        String imagePath1 = "../data/LinuxLogo.jpg";
        String imagePath2 = "../data/WindowsLogo.jpg";
 if (args.length > 1) {
            imagePath1 = args[0];
            imagePath2 = args[1];
        }
        matImgSrc1 = Imgcodecs.imread(imagePath1);
        matImgSrc2 = Imgcodecs.imread(imagePath2);
 if (matImgSrc1.empty()) {
            System.out.println("Empty image: " + imagePath1);
            System.exit(0);
        }
 if (matImgSrc2.empty()) {
            System.out.println("Empty image: " + imagePath2);
            System.exit(0);
        }
 
 // Create and set up the window.
        frame = new JFrame("Linear Blend");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 // Set up the content pane.
        Image img = HighGui.toBufferedImage(matImgSrc2);
        addComponentsToPane(frame.getContentPane(), img);
 // Use the content pane's default BorderLayout. No need for
 // setLayout(new BorderLayout());
 // Display the window.
        frame.pack();
        frame.setVisible(true);
    }
 
 private void addComponentsToPane(Container pane, Image img) {
 if (!(pane.getLayout() instanceof BorderLayout)) {
            pane.add(new JLabel("Container doesn't use BorderLayout!"));
 return;
        }
 
        JPanel sliderPanel = new JPanel();
        sliderPanel.setLayout(new BoxLayout(sliderPanel, BoxLayout.PAGE_AXIS));
 
        sliderPanel.add(new JLabel(String.format("Alpha x %d", ALPHA_SLIDER_MAX)));
        JSlider slider = new JSlider(0, ALPHA_SLIDER_MAX, 0);
        slider.setMajorTickSpacing(20);
        slider.setMinorTickSpacing(5);
        slider.setPaintTicks(true);
        slider.setPaintLabels(true);
        slider.addChangeListener(new ChangeListener() {
            @Override
 public void stateChanged(ChangeEvent e) {
                JSlider source = (JSlider) e.getSource();
                alphaVal = source.getValue();
                update();
            }
        });
        sliderPanel.add(slider);
 
        pane.add(sliderPanel, BorderLayout.PAGE_START);
        imgLabel = new JLabel(new ImageIcon(img));
        pane.add(imgLabel, BorderLayout.CENTER);
    }
 
 private void update() {
 double alpha = alphaVal / (double) ALPHA_SLIDER_MAX;
 double beta = 1.0 - alpha;
        Core.addWeighted(matImgSrc1, alpha, matImgSrc2, beta, 0, matImgDst);
        Image img = HighGui.toBufferedImage(matImgDst);
        imgLabel.setIcon(new ImageIcon(img));
        frame.repaint();
    }
 
 public static void main(String[] args) {
 // Load the native OpenCV library
        System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
 
 // Schedule a job for the event dispatch thread:
 // creating and showing this application's GUI.
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            @Override
 public void run() {
 new AddingImagesTrackbar(args);
            }
        });
    }
}

Python

このチュートリアルのコードを以下の行に示す。ここからダウンロードすることもできる

from __future__ import print_function
from __future__ import division
import cv2 as cv
import argparse
 
alpha_slider_max = 100
title_window = 'Linear Blend'
 
 
def on_trackbar(val):
    alpha = val / alpha_slider_max
    beta = ( 1.0 - alpha )
    dst = cv.addWeighted(src1, alpha, src2, beta, 0.0)
 cv.imshow(title_window, dst)
 
 
parser = argparse.ArgumentParser(description='Code for Adding a Trackbar to our applications tutorial.')
parser.add_argument('--input1', help='Path to the first input image.', default='LinuxLogo.jpg')
parser.add_argument('--input2', help='Path to the second input image.', default='WindowsLogo.jpg')
args = parser.parse_args()
 
 
src1 = cv.imread(cv.samples.findFile(args.input1))
src2 = cv.imread(cv.samples.findFile(args.input2))
 
if src1 is None:
    print('Could not open or find the image: ', args.input1)
    exit(0)
 
if src2 is None:
    print('Could not open or find the image: ', args.input2)
    exit(0)
 
 
cv.namedWindow(title_window)
 
 
 
trackbar_name = 'Alpha x %d' % alpha_slider_max
cv.createTrackbar(trackbar_name, title_window , 0, alpha_slider_max, on_trackbar)
 
 
# Show some stuff
on_trackbar(0)
 
# Wait until user press some key
cv.waitKey()

解説

トラックバーに関連するコードのみを解析する:

• まず、ブレンドする2枚の画像を読み込む。

C++

    src1 = imread(samples::findFile("LinuxLogo.jpg"));
    src2 = imread(samples::findFile("WindowsLogo.jpg"));

Java

 String imagePath1 = "../data/LinuxLogo.jpg";
 String imagePath2 = "../data/WindowsLogo.jpg";
 if (args.length > 1) {
            imagePath1 = args[0];
            imagePath2 = args[1];
        }
        matImgSrc1 = Imgcodecs.imread(imagePath1);
        matImgSrc2 = Imgcodecs.imread(imagePath2);

Python

src1 = cv.imread(cv.samples.findFile(args.input1))
src2 = cv.imread(cv.samples.findFile(args.input2))

• トラックバーを作成するには、まずそれを配置するウィンドウを作成しなければならない。すなわち:

C++

 namedWindow("Linear Blend", WINDOW_AUTOSIZE); //Create Window

Java

 // Create and set up the window.
        frame = new JFrame("Linear Blend");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 // Set up the content pane.
        Image img = HighGui.toBufferedImage(matImgSrc2);
        addComponentsToPane(frame.getContentPane(), img);
 // Use the content pane's default BorderLayout. No need for
 // setLayout(new BorderLayout());
 // Display the window.
        frame.pack();
        frame.setVisible(true);

Python

cv.namedWindow(title_window)

• これでトラックバーを作成できる:

C++

 char TrackbarName[50];
    snprintf(TrackbarName, sizeof(TrackbarName), "Alpha x %d", alpha_slider_max);
 // Example userdata: Pass a pointer to an integer as userdata
 createTrackbar(TrackbarName, "Linear Blend", &alpha_slider, alpha_slider_max, on_trackbar);

Java

        sliderPanel.add(new JLabel(String.format("Alpha x %d", ALPHA_SLIDER_MAX)));
        JSlider slider = new JSlider(0, ALPHA_SLIDER_MAX, 0);
        slider.setMajorTickSpacing(20);
        slider.setMinorTickSpacing(5);
        slider.setPaintTicks(true);
        slider.setPaintLabels(true);

Python

trackbar_name = 'Alpha x %d' % alpha_slider_max
cv.createTrackbar(trackbar_name, title_window , 0, alpha_slider_max, on_trackbar)

次の点に注意する（C++ コード）:

• このトラックバーには TrackbarName というラベルが付いている
• トラックバーは Linear Blend という名前のウィンドウに配置される
• トラックバーの値は \(0\) から alpha_slider_max までの範囲になる（最小値は常にゼロである）。
• トラックバーの数値は alpha_slider に格納される
• ユーザがトラックバーを動かすたびに、コールバック関数 on_trackbar が呼び出される

最後に、C++ と Python のコードではコールバック関数 on_trackbar を定義し、Java では匿名内部クラスのリスナーを使う必要がある

C++

 
static void on_trackbar(int pos, void* userdata) {
    (void) userdata;
    alpha = (double)pos / alpha_slider_max;
    beta = (1.0 - alpha);
 addWeighted(src1, alpha, src2, beta, 0.0, dst);
 imshow("Linear Blend", dst);
}

Java

        slider.addChangeListener(new ChangeListener() {
            @Override
 public void stateChanged(ChangeEvent e) {
                JSlider source = (JSlider) e.getSource();
                alphaVal = source.getValue();
                update();
            }
        });

Python

def on_trackbar(val):
    alpha = val / alpha_slider_max
    beta = ( 1.0 - alpha )
    dst = cv.addWeighted(src1, alpha, src2, beta, 0.0)
 cv.imshow(title_window, dst)

次の点に注意する（C++ コード）:

• alpha の double 値を得るために、alpha_slider の値（整数）を使う。
• alpha_slider は、ユーザがトラックバーを移動させるたびに更新される。
• src1、src2、dist、alpha、alpha_slider、beta をグローバル変数として定義し、どこからでも使えるようにする。

結果

• このプログラムは次の出力を生成する:

• 練習として、画像のコントラストと明るさの変更!で作成したプログラムに2つのトラックバーを追加することもできる。1つは \(\alpha\) を設定するトラックバー、もう1つは \(\beta\) を設定するトラックバーである。出力は次のようになるだろう: