OpenGL

現在のVSCodeでは、特に他のツール等を導入しなくても、単体でHTMLやJavaScriptの確認やデバッグを行うことができます。

一方、簡易なサーバーを立ち上げてHTMLやJavaScriptの確認やデバッグができれば、更に便利かと思います。
そんな場合に便利なのがVSCodeの拡張機能のLive Serverです。

使用方法等については、

Live Server

で検索すれば色々と出てきますのでそちらを参考にして下さい。

以下のコマンドでTypeScriptのバージョンを確認できます。

tsc -v
    

もしバージョンが想定しているより低い、例えば”1.0.0”等のような場合には、デフォルトで古いバージョンのTypeScriptがインストールされている可能性があります。
環境変数の”Path”に”C:Files (x86)SDKs\1.0.x.x”等が記載されていないか確認して下さい。
もし記載がある場合には”Path”から削除してみて下さい。

以下のコマンドによりTypeScriptのコンパイルのデフォルトの設定ファイル”tsconfig.json”が作成されます。

tsc --init

デフォルトの設定ファイルに対しては、以下の修正、追加を行います。

targetを変更

"target": "ES6",
      

moduleを変更

"module": "ES2015",

ベースURL指定

"baseUrl": "./src",
        

入力及び出力ディレクトリの追加

"rootDir": "./src",
"outDir": "./dst/js",
        

階層化したコンパイル対象の指定

"compilerOptions": {
    :
    :
  },
"include": ["src/**/*"]
        

JavaScriptを対象

"allowJs": true,

sourceMapの追加

"sourceMap": true,
        

“package.json”の”scripts”の値を以下のように修正し、次に導入するwebpackのコマンドをNPMスクリプトとして登録します。

"scripts": {
  "build": "webpack",
  "build:watch": "webpack -w",
  "node_modules": "npm ci"
},
    

なお”package-lock.json”に従ってnode_modules内のパッケージを再インストールするためのコマンドも追加しています。

以下の内容でwebpackの設定ファイル”webpack.config.js”を作成します。

const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.ts',
    },
    output: {
      path: path.join(__dirname, 'dst/js'),
      filename: 'index.js',
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dst'),
        },
        open: true,
    },
    module: {
        rules: [
            {
            test: /\.ts$/,
            loader: 'ts-loader',
            },
        ],
    },
    target: 'electron-main',
};
    

VSCodeでJavaの開発を行うためには、Java向けの拡張機能Java Extension Packを導入すると便利です。
と云うか必須です。

追加方法は

Java VScode 拡張機能

で検索すれば、色々と出てきますのでそちらを参考にして下さい。

クラス名およびファイル名がAppとなっているのでShowYUVに変更します(別の名前でもOKです)。
なおウィンドウを表示するためjavax.swing.JFrameを継承します。
因みにJavaのGUIフレームワークにはAWT、Swing、JavaFX等がありますが使い易さと標準で組み込まれている事を考慮してGUIフレームワークはSwingを中心に使用して行きます。

更にボタンを使用するためjava.awt.event.ActionListenerインターフェースをインプリメントしておきます。
なおActionListenerインターフェースはvoid actionPerformed(ActionEvente)メソッドが必要なのでとりあえず空のメソッドを追加しておきます。

package com.example;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JFrame;
/**
 * YUVファイルを表示
 *
 */
public class ShowYUV extends JFrame implements ActionListener {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
    @Override
    public void actionPerformed(ActionEvent e) {
        // TODO Auto-generated method stub
    }
}

ShowYUVクラスのコンストラクタを作成しておきます。
コンストラクタ内ではファイルオープンボタンとプレイボタン、描画領域を追加します。
なおボタンと描画領域は他のメソッドからアクセスできるようにインスタンス変数としておきます。

public class ShowYUV extends JFrame implements ActionListener {
   static final int CIF_WIDTH = 352;
   static final int CIF_HEIGHT = 288;
   static final String TITLE = "CheckJOGL";
   static final String FILE_NAME = "File: ";
   static final String FILE_OPEN = "File...";
   static final String PLAY = "Play";
   private JPanel panel;
   private JLabel fileNameLabel;
   private JButton fileOpenButton;
   private JButton playButton;
   public ShowYUV(String title) throws HeadlessException {
       super(title);
       /* 描画領域 */
       JPanel borderPanel = new JPanel();
       borderPanel.setBorder(BorderFactory.createBevelBorder(BevelBorder.LOWERED));
       panel = new JPanel();
       panel.setPreferredSize(new Dimension(CIF_WIDTH, CIF_HEIGHT));
       borderPanel.add(panel);
       add(borderPanel);
       /* ボタン領域 */
       JPanel buttonPanel = new JPanel();
       buttonPanel.setLayout(new BoxLayout(buttonPanel, BoxLayout.X_AXIS));
       buttonPanel.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
       fileNameLabel = new JLabel(FILE_NAME);
       fileOpenButton = new JButton(FILE_OPEN);
       playButton = new JButton(PLAY);
       playButton.setEnabled(false);
       fileOpenButton.addActionListener(this);
       playButton.addActionListener(this);
       buttonPanel.add(fileNameLabel);
       buttonPanel.add(Box.createGlue());
       buttonPanel.add(fileOpenButton);
       buttonPanel.add(Box.createHorizontalStrut(5));
       buttonPanel.add(playButton);
       add(buttonPanel, BorderLayout.SOUTH);
       pack();
       setResizable(false);
       setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       setLocationRelativeTo(null);
   }
       :
       :
}

とりあえずの描画領域の準備

ボタン類の配置

メインウィンドウの諸設定

コンストラクタの最後ではウインドウの諸設定を行います。
先ずpack()メソッドでウィンドウのサイズを各コンポーネントの配置等に合わせて調整します。
次に描画するYUV画像のサイズが決まっているので”setResizable”メソッドでリサイズ出来ないようにしておきます。
更にウィンドウをクローズした時にアプリケーションを終了するように”setDefaultCloseOperation”メソッドで設定しておきます。