Java
HTML
CSS
JavaScript
JavaFX

WallPaperEngineもどきをサクッと作る

GeekToolとYoutube-IFramePlayerAPIを使って、MacでWallpaper Engineを再現する

という記事を拝見してLinuxでもできないかと思ってやってみた。

しかしながらgeek toolのようにウェブをディスプレイするのはLinuxにはないので、JavaFXのウィンドウで代用することにした。今回のリポジトリはこちら

https://github.com/ItinoseSan/geek-movie-window

準備

上に貼ったリンクのリポジトリをクローンする。リポジトリの場所は何でもいい

git clone git@github.com:natmark/wp_engine4geektool.git

JavaFXで壁紙と同じサイズのフルスクリーンウィンドウを作る

Window.java
import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Screen;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage){
        primaryStage.setTitle("DesktopMovie");

        StackPane root = new StackPane();

        // スクリーンの大きさのインスタンス
        // getWidth, getHeightで壁紙部分の大きさを取得する
        Rectangle2D screenBounds = Screen.getPrimary().getVisualBounds();
        Scene scene = new Scene(root, screenBounds.getWidth(), screenBounds.getHeight());
        // WebViewとEngineを使ってhtmlをレンダリングする
        WebView view = new WebView();
        WebEngine engine = view.getEngine();
        engine.load("cloneしたリポジトリのindex.htmlのファイルパス");
        // ex file:///home/user/wp_engine4geektool/index.html

        root.getChildren().add(view);
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

完成

こんな感じに動きます。

再生する動画を変えたい場合

元のものと同様、wp_engine4geektool/video.jsのvidのところを変えてください。

// 再生したいyoutubeの動画id
var vid = '2Vn5ca585kQ';