投稿者「araken」のアーカイブ

複製したオペーレーターの出力を自動的につなげる方法 / How to automatically connect the outputs of duplicated operations.

Relicator COMPで複製したオペレーターを任意のオペレーターのInputに自動的につなげる方法。複製する個数を変える度に、手動でつなげなくて良いので便利。

1は、自分の連番を元にした角の数の多角形を描画する3base1を複製、5layout1は、複製された多角形をグリッド上に配置している。

複製されたオペレーターを自動的につなげるには、2のスクリプトを以下の様に書く。

def onRemoveReplicant(comp, replicant):

	replicant.destroy()
	return

def onReplicate(comp, allOps, newOps, template, master):

	for c in newOps:
		#c.display = True
		#c.render = True
		#c.par.display = 1
		#c.par.clone = comp.par.master
		c.outputConnectors[0].connect(op('layout1'))
		pass

	return

13行目で、OPを生成する度に、5layout1に接続している。

サンプルファイル

https://github.com/arkwknsk/touchdesigner/blob/master/tips/replicator/replicator.toe

2つのChopを1つの波形にする方法 / How to make two Chops into one waveform

2つのChopの波形を1つの波形としてつなげるには、Splice CHOPを使う。

追加する波形を前に入れるか、後に入れるかは、5Directionで変更できる。

Direction
First to Last前に挿入
Last to First後ろに挿入

解説

アニメーションなどの波形を生成するときに、一定時間固定する波形などを足したいときに便利な手法。

1と2で波形を生成。この2つの波形を34Splice CHOPでつなげている。3の場合は、Input2に入ってきた2を先頭に挿入し、その後に1の波形を足している。

サンプルファイル

https://github.com/arkwknsk/touchdesigner/blob/master/tips/splice/splice.toe

Nuxt(Vue)のコンポーネントから環境変数を使う方法

サンプルコード

NUXT_ENV_IMG_URL='https://hoge.com:10000/v1/json'
export default {
    computed: {
        img: () => {
            return (
                process.env.NUXT_ENV_IMG_URL + "foo.png"
            );
        },
    }
}

解説

Nuxtでは、プロジェクトのルートフォルダに置く.envで、環境変数を設定できる。ただし、prefixでNUXT_ENV_を変数名に付けないと、コンポーネントから参照できない。

コンポーネントからは、process.env.NUXT_ENV_*の形で参照できる。

公式ドキュメント
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

Nuxt.jsでBodyタグにクラスを指定する方法

サンプルコード

export default {
    // ...
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: 'something',
        htmlAttrs: {
            lang: 'en'
        },
        bodyAttrs: {
            class: 'hoge-class'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    //...
}

解説

Nuxtでは、HTMLタグやBODYタグが自動生成されてしまうため、classを直接指定出来ないが、nuxt.config.js内でクラスを指定できる。

FullCalendar v5.xで曜日表記を変える方法

FullCalendarが5.xへバージョンアップした際に、いくつかのAPIが廃止されて、新しい設定方法が必要になっている。曜日の表記方法の指定の仕方も、変更されている。

曜日表記の指定方法

曜日を設定するには、dayHeaderFormatという設定項目に、ファンクションを渡す。

dayHeaderFormat: function (date) {
    const days = ["日", "月", "火", "水", "木", "金", "土"];
    return days[date.date.marker.getDay()];
},

daysという配列に、日曜からの表示したい文字列を入れていく。このメソッドに、渡されるdataの中に、該当の日付情報が入ってくるので、その中から何曜日かをdate.date.marker.getDay()から取得し、キーとして配列から文字列を取得し、返すようにする。

Nuxt.jsでFullCalendarを使う方法

コンポーネント

Nuxt(Vue)で、FullCalendarを使うには、vueコンポーネントの<template>内に、コンポーネントとして以下の様に読み込む。

<template>
    <div>
        <FullCalendar :options="config" >
    </div>
</template>

Vuexとの連携

Vuexと連携して、FullCalendarの内容を更新するには、optionsで指定するmodelをcomputedで動的に返す必要がある。

例えば、eventsというstoreの中にスケジュールデータが入っており、getterからスケジュールデータを取得する場合、configOptionsの返値の中のeventsで、storeのgetterを与えるようにする。

    computed: {
        config() {
            return {
                ...this.configOptions,
            };
        },
        configOptions() {
            return {
                firstDay: 1,
                editable: false,
                navLinks: false,
                selectable: false,
                events: this.events,
                weekends: this.weekendsVisible,
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
                initialView: "dayGridMonth",
            }
        }
        //...
        ...mapGetters("events", ["events"]),
   }

詳しくは、こちらのコードを参照
https://github.com/fullcalendar/fullcalendar-example-projects

RasiPiでブラウザを自動起動してキオスク端末にする方法

unclutterをインストール

マウスカーソルを一定時間の無操作後に消すユーティリティ

$ sudo apt install unclutter

設定ファイルのコピー

自動ログインするユーザのホームディレクトリに設定ファイルをコピーする。

$ cp /etc/xdg/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi/

ディレクトリがデフォルトでは無いので、自分でつくる必要あり

設定ファイルの編集

コピーしたautostartファイルを以下の様に編集

#@lxpanel --profile LXDE-pi
#@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
#point-rpi

@xset s off
@xset -dpms
@unclutter -display :0 -idol 3 -root -noevents
@chromium-browser --kiosk --start https://www.google.co.jp

例として、起動後、全画面でhttps://www.google.co.jpを表示するように設定。任意のURLに書き換える。

設定後、再起動

設定内容

autostartファイルの編集内容について

いらない画面表示を起動しないようにコメントアウト
#@lxpanel --profile LXDE-pi
#@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
#point-rpi
画面スリープをオフにする
@xset s off
@xset -dpms
マウスカーソルを一定操作が無かったら消す。
@unclutter -display :0 -idol 3 -root -noevents
ブラウザをキオスクモードで起動
@chromium-browser --kiosk --start https://www.google.co.jp

キオスクモードは、F11が押されても、全画面表示が終了しない

Via! https://gist.github.com/rampfox/085bf3ffb9ff51e114bf7afdf3ced71b