Server Tanda Digital pada Raspberry Pi: 8 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Panduan Pemula Mutlak untuk Corsica pada Raspberry PI

Tanda-tanda digital ada di mana-mana. Anda melihatnya di bandara, mal, department store, dan bahkan sudut jalan. Anda tidak memerlukan banyak perangkat keras khusus yang mahal untuk membangun sistem tanda digital Anda sendiri. Instruksi ini menunjukkan cara membangun server signage digital yang dapat menggerakkan lusinan tampilan. Setiap tampilan bisa sesederhana monitor dan Raspberry PI.

Berkat Node Ninjas di Mozilla Anda bahkan dapat menjalankan server di Raspberry Pi menggunakan Corsica.

Corsica adalah solusi signage digital yang dapat diperluas yang dapat diimplementasikan pada sebagian besar sistem POSIX. Ini terdiri dari server dan klien tampilan. Mesin klien tidak memerlukan perangkat lunak khusus dan hanya menjalankan browser web modern apa pun, meskipun semua orang di tim Corsica sangat merekomendasikan Firefox. Server mengkonsumsi sumber daya yang sangat sedikit dan dengan senang hati akan berjalan di Raspberry Pi atau mesin yang sangat kecil lainnya. Server Corsica yang berjalan pada Raspberry Pi 3+ dapat dengan mudah mendukung lebih dari 100 tampilan klien. Instruksi ini ditulis khusus untuk Raspberry Pi yang menjalankan sistem operasi Raspian (turunan Debian). Petunjuk ini juga mengasumsikan Anda menggunakan browser Firefox. Sebagian besar browser modern lainnya juga harus berfungsi.

Langkah 1: Baris Perintah Raspian

Instruksi ini akan menunjukkan cara mengkonfigurasi Corsica melalui baris perintah. Jika Anda menggunakan Raspian dengan antarmuka pengguna grafis (GUI), Anda masuk ke baris perintah melalui aplikasi terminal. Jika Anda menjalankan Raspian-lite maka Anda dapat menghubungkan keyboard dan monitor dan menggunakan baris perintah secara langsung, atau Anda dapat terhubung melalui jaringan menggunakan SSH. Untuk informasi lebih lanjut tentang cara mengaktifkan dan menggunakan SSH, lihat dokumentasi Raspian SSH. Anda harus mengetahui nama DNS atau alamat IP Raspberry Pi Anda. Nama default pada kebanyakan LAN adalah raspberrypi.local. Jika itu tidak berhasil, ada petunjuk dalam dokumentasi Raspian yang akan membantu Anda menemukan nama dan alamat IP yang benar.

Langkah 2: Instalasi Perangkat Lunak

Corsica menggunakan node dan npm. Node memungkinkan Anda menjalankan Javascript sisi server, dan npm adalah manajer paket node.

Untuk menginstal ini pada Raspberry Pi, periksa dulu versi prosesor di sistem Anda:

uname -m

Jika hasilnya dimulai dengan armv6, lihat posting blog ini. Untuk sistem Raspberry Pi 3 dan lainnya dengan prosesor armv7 dan yang lebih baru:

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -

sudo apt install nodejs

Jika Anda tidak terbiasa dengan Node, Anda dapat mempelajari lebih lanjut di nodesource.com.

Selanjutnya, instal Alat Baris Perintah Corsica:

sudo npm install -g corsica-cli

Untuk melihat perintah yang tersedia, ketik

corsica --membantu

Saat tulisan ini dibuat, perintah yang tersedia adalah:

setup-- untuk mengatur server Corsicastart [options] -- untuk memulai server Corsica restart [options] -- untuk memulai ulang server Corsica yang sedang berjalan -- untuk menghentikan server Corsica yang sedang berjalanadd-plugin [name] -- untuk menginstal sebuah pluginremove- plugin [nama] -- untuk menghapus pluginlist-plugins yang terinstal -- untuk membuat daftar pluginsupdate yang diinstal -- untuk memperbarui Corsica dan pluginnya

Sekarang Anda dapat menggunakan alat untuk mengatur perangkat lunak Corsica:

pengaturan corsica

Pengaturan Corsica akan menanyakan di mana Anda ingin menginstal corsica dan menunjukkan lokasi default:

Di mana menginstal Corsica: (/home/pi/corsica-server)

Anda cukup menekan kembali.

Anda akan melihat beberapa pesan peringatan npm. Ini aman untuk diabaikan.

Ketika pengaturan mengatakan "Selesai!", Anda telah menginstal Corsica.

Anda dapat memulai Corsica di sesi terminal Anda dengan:

corsica mulai

Dan hentikan dengan control-C.

Tetapi jika Anda memulainya seperti itu, itu hanya akan berjalan selama sesi terminal Anda berjalan. Ketika Anda menutup sesi terminal Anda, corsica akan berhenti.

Jika Anda memulai Corsica di latar belakang, itu akan berjalan bahkan setelah Anda memutuskan sesi terminal Anda. Anda bisa melakukannya dengan

corsica mulai --latar belakang

Untuk menghentikan instance Corsica yang berjalan di latar belakang, ketik:

berhenti corsica

Langkah 3: Konfigurasi

Pengaturan Anda mungkin memerlukan beberapa penyesuaian. Ada dua jenis penyesuaian di Corsica: konfigurasi dan pengaturan. Konfigurasi sebagian besar statis dan digunakan oleh inti. Pengaturan bersifat dinamis dan sebagian besar digunakan oleh plugin. Lebih lanjut tentang pengaturan nanti.

Konfigurasi berasal dari lingkungan, dan untuk hal-hal yang sangat statis seperti port untuk mendengarkan, atau plugin untuk dimuat. Ada empat sumber untuk konfigurasi:

1. lib/config.json - Ini adalah tempat default disimpan, dan tempat yang baik untuk melihat beberapa dari apa yang dapat dikonfigurasi. Anda seharusnya tidak mengubah nilai di sini.

2. config.js - Pengaturan yang ditemukan dalam file ini dimuat seolah-olah berasal dari lingkungan. Sintaksnya adalah satu konfigurasi per baris, mis. `PORT=8080`. Jika nilai di sini adalah JSON yang valid, nilai tersebut akan diuraikan seperti itu. Pengaturan di sini akan menggantikan pengaturan default di `lib/config.json`. File config.js awalnya menentukan nomor port yang didengarkan Corsica, dan plugin yang digunakan oleh sistem.

3..env - Jika file tersembunyi bernama.env ada di direktori Corsica, pengaturannya dimuat seolah-olah berasal dari lingkungan. Sintaksnya sama seperti di config.js. File ini tidak ada dalam konfigurasi default.

4. Variabel lingkungan - Anda dapat menempatkan informasi konfigurasi dalam variabel lingkungan sistem jika diinginkan. Jika Anda tidak terbiasa dengan variabel lingkungan, Anda dapat mengabaikan opsi ini.

Langkah 4: Menghubungkan Layar Tampilan

Setelah Anda memulai Corsica, itu akan menjalankan server web pada port 8080 mesin Anda kecuali Anda telah mengubah nomor port di file.env. Anda harus mengetahui nama host atau alamat IP Pi Anda. Nama default untuk instalasi Raspberry Pi baru adalah raspberrypi. Jika Anda belum mengubahnya, Anda cukup membuka browser di mesin klien tampilan Anda dan menjelajah ke:

raspberrypi.local:8080

Anda akan melihat logo Corsica kuning dan hitam. Gelembung akan muncul dengan nama Corsica klien Anda. Anda dapat (dan harus) mengubah nama klien Anda menjadi sesuatu yang menunjukkan lokasi layar tampilan khusus ini. Cara termudah untuk melakukannya adalah dengan menggunakan corsica-repl Potch. (Potch adalah pengembang utama Corsica, dan dia berjanji untuk menempatkan repl ke inti Corsica dalam waktu dekat).

Buka tab browser dan ramban ke:

potch.github.io/corsica-repl?server=https://raspberrypi.local:8080/

(Itu mengasumsikan raspberrypi.local adalah nama Server Corsica Anda).

Kami akan menggunakan "TestClient" sebagai nama tampilan klien untuk sisa tutorial ini. Buka dropdown di sudut kanan bawah layar dan temukan nama klien yang muncul. Kemudian di baris perintah di kiri bawah layar ketik:

tipe admin = ganti nama nama = TestClient

Biarkan tab corsica-repl terbuka dan alihkan ke tab browser yang menampilkan logo Corsica dan segarkan halaman. Anda akan melihat nama baru di gelembung pop-up. Jika hilang terlalu cepat, arahkan mouse Anda ke sudut kanan bawah dan tombol "Layar Penuh" akan muncul dengan nama baru di sebelah kiri.

Langkah 5: Menambahkan Konten

Setelah menampilkan logo Corsica klien akan menampilkan beberapa hewan kartun dengan latar belakang biru.

Tag default dalam file state.json berisi daftar alamat halaman web. Anda dapat menampilkan halaman web apa pun dengan cara ini, meskipun tata letak beberapa halaman membuatnya kurang cocok untuk digunakan dengan Corsica.

Klien Corsica menampilkan konten dari satu atau lebih tag yang menjadi langganannya. Klien baru datang sudah berlangganan tag bernama "default".

Hewan kartun itu lucu, tetapi mari tambahkan beberapa konten yang berguna ke rotasi layar pada klien pengujian kami.

Kembali ke tab corsica-repl dan di baris perintah di kiri bawah ketik:

tipe admin = tag berlangganan = cuaca

Beralih kembali ke tab klien tampilan dan segarkan halaman.

Prakiraan cuaca untuk San Jose, California, akan ditambahkan ke daftar url yang ditampilkan.

File state.json sampel kami berisi tiga tag bernama "default", "cuaca" dan "gambar". Tag "gambar" berisi tautan ke lebih banyak file gambar kartun hewan (.png). Mari tambahkan itu dengan beralih kembali ke tab corsica-repl dan mengetik:

tipe admin=subscribe tag=gambar

Sekali lagi, kembali ke tab klien tampilan dan segarkan halaman. Anda akan melihat beberapa hewan baru ditambahkan ke rotasi. Tetapi perhatikan bahwa hewan baru muncul di tepi kiri halaman dengan latar belakang putih. Itu karena kartun dengan latar belakang biru terdaftar di state.json sebagai url yang mengarah ke halaman web yang benar yang ditulis dalam html. Kartun baru dengan latar belakang putih terdaftar di state.json sebagai url yang hanya mengarah ke file grafik-p.webp

Kami dapat meningkatkan cara grafik tersebut ditampilkan oleh Corsica, tetapi untuk melakukan itu kami harus "memperluas" Corsica itu sendiri.

Langkah 6: Memperluas Korsika

Lebih dari selusin plugin npm Corsica tersedia di situs web npm. Ikuti tautan itu dan masukkan "corsica" di kotak pencarian di bagian atas halaman untuk melihat daftarnya. Kami akan menggunakan salah satu plugin npm untuk memungkinkan Anda menampilkan hewan baru kami. Ini juga berguna untuk menampilkan gambar apa pun yang Anda temukan di web, tanpa menampilkan gambar yang mengganggu di sekitar gambar.

Buka baris perintah Corsica, hentikan Corsica dan instal plugin corsica-image:

corsica add-plugin corsica-image

Kemudian restart corsica:

corsica mulai

Buka tab klien tampilan corsica di browser Anda dan segarkan halaman. Anda akan melihat hewan baru ditampilkan di tengah layar dengan latar belakang biru tua.

Langkah 7: Menyesuaikan Konten

Mari kita lihat perbedaan antara apa yang dilakukan url di tag default dan yang ada di tag gambar. Lihatlah state.json dengan masuk ke baris perintah Corsica dan ketik:

cat ~/corsica-server/state.json

Di bagian "default" dari file itu, Anda akan menemukan baris yang terlihat seperti:

"https://ramilewski.github.io/corsica-support/show.html?image=kitty.png", Url ini adalah tautan ke halaman web dengan kartun anak kucing. Halaman web itu menampilkan gambar, tetapi juga menyediakan latar belakang yang merupakan gradien yang dimulai di bagian atas halaman sebagai warna biru, dan memudar menjadi putih di bagian bawah halaman. Latar belakang itu dibuat oleh CSS dan HTML halaman web. Ini bukan bagian dari grafik itu sendiri.

Bagian "gambar" halaman memiliki garis yang terlihat seperti:

"https://ramilewski.github.io/corsica-support/bunny.png bg=#2244BB", Ini adalah url yang menentukan tautan ke gambar-p.webp

"#2244BB" adalah notasi heksadesimal untuk warna biru tua. Untuk alat yang membantu Anda menentukan warna apa pun dalam notasi heksagonal, lihat MDN Color Picker.

Dalam menampilkan baris ini Corsica telah menggunakan plugin corsica-image untuk merender tampilan. Ini berarti bahwa jika Anda menemukan gambar yang ingin Anda tampilkan pada tampilan klien Corsica Anda, Anda dapat membuat baris di state.json yang hanya akan menampilkan gambar itu, tetapi bukan konten lain yang mengganggu dari halaman sekitarnya. Untuk menemukan url gambar di Firefox, klik kanan gambar dan pilih "Salin Lokasi Gambar" di menu konteks yang muncul.

Bagian "cuaca" dari state.json hanya memiliki satu url. Ini mengambil ramalan cuaca dari https://forecast.io. Tapi kecuali Anda tinggal di San Jose, ramalan itu tidak terlalu berguna. Untuk mendapatkan perkiraan lokasi Anda, Anda perlu mengetahui garis lintang dan garis bujurnya dalam derajat desimal. Jika tidak, ada alat berbasis web yang memungkinkan Anda menemukannya.

Saat ini url di baris di state.json yang menentukan ramalan cuaca terlihat seperti:

"https://forecast.io/embed/#lat=37.3352&lon=-121.8871&name=San%20Jose%20CA&color=#4466bb zoom=300"

Untuk mendapatkan perkiraan lokasi Anda, ubah entri lat dan lon di baris itu dan ubah namanya menjadi lokasi Anda. Gunakan %20 sebagai ganti spasi pada nama tempat. Parameter warna menentukan warna batang antara suhu tinggi dan rendah. Parameter zoom digunakan untuk menyesuaikan ukuran perkiraan agar pas di layar tampilan.

Saat Anda membuat file state.json Anda sendiri, ingatlah bahwa jika Anda memiliki tag "default", konten apa pun yang ditentukan dalam tag tersebut akan muncul di browser apa pun yang terhubung ke server tanpa konfigurasi lebih lanjut.

Tampilan Waktu

Di bagian atas state.json ada beberapa pengaturan yang mengontrol berapa lama setiap gambar ditampilkan di layar.

"pengaturan::pengatur waktu": {

"resetTime": 30000, "jitter": 5000, Semua waktu diukur dalam milidetik (seperseribu detik). ResetTime adalah waktu maksimum setiap gambar di layar sebelum layar berikutnya ditampilkan. Jitter dikalikan dengan angka acak antara -1 dan 1 dan hasilnya ditambahkan ke resetTime. Ini memberikan beberapa variasi dalam waktu tampilan. Anda dapat mengatur jitter ke 0 jika diinginkan. Pengaturan yang ditampilkan akan menghasilkan setiap halaman yang ditampilkan antara 25 dan 35 detik.

Anda juga dapat mengatur waktu yang berbeda untuk setiap klien tampilan:

"pengaturan::pengatur waktu": {

"resetTime": 30000, "jitter": 5000, "resetOnConnect": true, "screens": { "TestClient": { "resetTime": 10000, "jitter": 1000 } } }, Di sini kami telah mengatur waktu tampilan untuk TestClient kami antara 9 dan 11 detik.

Langkah 8: Kesimpulan

Kami telah menunjukkan cara menginstal dan mengkonfigurasi server Corsica pada Raspberry Pi. Dengan apa yang telah Anda pelajari di sini, Anda dapat membangun sistem signage digital yang serbaguna dan berbiaya sangat rendah. Anda dapat menggunakan Raspberry Pis tidak hanya sebagai server di sistem Anda, tetapi juga untuk menggerakkan tampilan klien.

Masih banyak lagi plugin di situs npm yang dapat Anda gunakan untuk menambahkan kemampuan lain ke instalasi Corsica Anda, termasuk menampilkan:

• Gambar dari Flickr
• Tweet
• Percakapan di saluran IRC
• File video
• Video Youtube
• Slide dalam presentasi Google
• Kartun XKCD
• Konten dari umpan RSS

Kredit

Corsica adalah kreasi dari Blackbelt Node Ninjas tingkat tiga dari Mozilla yang dipimpin oleh potch, lonnen dan mythmon.

Instruksi untuk Corsica di Raspberry Pis ini dibuat oleh Richard.

Anda biasanya dapat menemukan semua orang bersembunyi di sekitar saluran #corsica di irc.mozilla.org.