如何打造依時段切換的三螢幕餐廳菜單看板

用免費的 Harvest Table 範本,在三個螢幕、一台電腦上打造能自動從早餐換成午餐、晚餐的菜單看板。

作者:Daniel Palka 8 分鐘閱讀 為 FloSync 0.5.0 撰寫
目錄
  1. 所需準備
  2. 步驟 1:接上並排列您的三個螢幕
  3. 步驟 2:安裝並開啟 FloSync
  4. 步驟 3:保持選取獨立模式
  5. 步驟 4:下載 Harvest Table 範本
  6. 步驟 5:載入早餐菜單
  7. 步驟 6:開啟排程面板
  8. 步驟 7:新增兩個場景
  9. 步驟 8:把場景命名為早餐、午餐與晚餐
  10. 步驟 9:設定轉場時間
  11. 步驟 10:載入午餐與晚餐菜單
  12. 步驟 11:預覽菜單並測試一次轉場
  13. 步驟 12:正式上線播放一整天
  14. 步驟 13:讓菜單看板自動啟動
  15. 收尾

FloSync 是一款免費的 Mac 與 Windows 應用程式,能在多個螢幕上運作數位看板。本教學用一台電腦與免費的 Harvest Table 範本,打造一個三螢幕菜單看板。FloSync 會依照您的排程,把看板從早餐換成午餐、再換成晚餐,早餐菜單不會到了下午 2 點還掛在螢幕上。

範例中的轉場時間是上午 11 點與下午 5 點。您可以在同一個地方設定自己的時間。

您將完成的成品。

所需準備

時間:約 20 分鐘

  • 一台可以同時驅動三台顯示器的 Windows 或 macOS 電腦(光有三個連接埠不代表辦得到,不確定的話請確認您的顯示卡規格)
  • 三個橫向螢幕,並排擺放
  • FloSync,Mac 與 Windows 皆可免費下載
  • 免費的 Harvest Table 菜單範本

步驟 1:接上並排列您的三個螢幕

把三個螢幕都接上電腦,並將您的作業系統設定為延伸桌面到這三個螢幕,而不是重複顯示。

在顯示設定中,把三個螢幕排成吧台後方實際擺放的左右順序,這樣您在電腦上看到的畫面才會和顧客看到的一致。

一台電腦連接三個橫向螢幕排成一列的示意圖,標示編號 1 到 3 一台電腦,三個螢幕排成一列。

步驟 2:安裝並開啟 FloSync

下載並安裝 FloSync,然後開啟它。

編排器,也就是 FloSync 的主視窗,會依照您剛才設定的順序顯示三個螢幕方塊。如果有螢幕方塊不見或順序不對,請先到顯示設定調整好,再繼續下一步。

FloSync 編排器顯示三個並排的空螢幕方塊,Display 1 標示為「主要」,狀態列顯示「未載入任何內容」 方塊的順序應該要和您的螢幕順序一致。

步驟 3:保持選取獨立模式

把模式下拉選單維持在「獨立」。

獨立 模式選單,位於工具列左側。

獨立模式讓每個螢幕顯示各自的內容。在這裡,就是每個螢幕各放一塊菜單版面,三塊版面合起來就是一整個看板。

步驟 4:下載 Harvest Table 範本

下載免費的 Harvest Table 範本組合,解壓縮後,把資料夾放在固定的位置,因為 FloSync 會直接從您存放的地方載入頁面。

Harvest Table 早餐菜單看板,左螢幕。左半邊是農場早餐拼盤(雞蛋、培根、馬鈴薯、司康),右側列出從酪乳鬆餅到燕麥粥的主菜與價格。

Harvest Table

一款為三台橫向螢幕打造的餐廳菜單看板,包含早餐、午餐與晚餐菜單。

Canva、PowerPoint、Illustrator和HTML 版本均可免費下載。

下載免費範本

Harvest Table 範本頁面 下載 HTML 版本並解壓縮(放在您的文件資料夾即可)。harvest-table-zh-tw-landscape-html 資料夾裡有 breakfastlunchdinner 三個資料夾,各自收錄該餐別的三個頁面,連同對應的照片與字型,另外還有一份 README 與授權條款。請讓每個資料夾維持完整,頁面才能正確顯示美術素材。資料夾與檔案名稱在每種語言版本中都相同。裡面的 README 是您的語言版本,會加以說明。

在 Windows 檔案總管中解壓縮後的 harvest-table-en-landscape-html 資料夾:breakfast、dinner 與 lunch 資料夾,旁邊是 LICENSE 與 README 檔案 解壓縮後的範本資料夾。

步驟 5:載入早餐菜單

在編排器中對每個螢幕方塊按右鍵,選擇「載入 HTML 檔案⋯」,將 left-entrees.html 載入左側螢幕、middle-specials.html 載入中間螢幕、right-sides-drinks.html 載入右側螢幕。

Display 1 螢幕方塊上的右鍵選單,「載入 HTML 檔案⋯」以紅色標示,位於「載入影片/圖片⋯」與「載入網頁 URL⋯」之間 螢幕方塊上的右鍵選單。

這三個頁面都在 breakfast 資料夾裡。

FloSync 編排器在獨立模式下顯示三個螢幕,各自顯示對應的 Harvest Table 早餐版面:左、中、右 每個方塊顯示的畫面,就是該螢幕實際呈現的樣子。

步驟 6:開啟排程面板

點選工具列中的排程圖示。

排程圖示,位於工具列右側。

排程面板剛開啟的畫面,顯示一個名為「全天」的場景,時間從 00:00 到 24:00,內含 3 個網頁 面板剛開啟的樣子:一個「全天」場景,已經收錄了您的早餐頁面。

FloSync 的排程功能以場景為單位:每個場景都收錄一組要在您螢幕上顯示的內容,以及顯示的時段。全新安裝預設為按時間模式,這正是菜單看板需要的模式。如果面板頂端反而顯示反白的計時器圖示,請點選旁邊的日曆圖示切換回按時間模式。

步驟 7:新增兩個場景

在排程面板底部點兩下「+」按鈕(提示文字為「新增場景」)。

新增場景圖示,位於面板底部的圖示列中。

全新的排程只有一個「全天」場景。點兩下之後,就會得到三個長度相等、可以命名的場景。請先新增完兩個場景,再設定時間:每新增一個場景,全天的時間就會重新平均分配一次。

點兩下加號後的排程面板,以紅色圈起:「全天」場景內含 3 個網頁,接著是兩個名為「新場景」的空場景,各為 8 小時 您的早餐頁面留在第一個場景;兩個新場景要等您載入午餐與晚餐內容後才有畫面。

這時螢幕方塊會變成空白,因為目前選取的是最新的場景,裡面還沒有任何內容。您的早餐菜單仍在第一個場景裡。

步驟 8:把場景命名為早餐、午餐與晚餐

依序點選各場景的鉛筆圖示,把「名稱」依序改成早餐、午餐、晚餐,每改完一個就點選「儲存」。

編輯圖示,位於每張場景卡片的右側。

這裡只需要修改名稱。同一個對話框中的「開始」與「結束」欄位是用來輸入精確時間的;下一步會用更快的方式設定時間。

編輯場景對話框,「名稱」欄位已輸入「早餐」,下方是「開始」與「結束」時間欄位 編輯場景對話框。

步驟 9:設定轉場時間

編輯時間軸會把一整天顯示成一條長條,每個場景以一種顏色的色塊表示,色塊之間的每個控點都用來設定轉場時間。

點選「編輯時間軸」,把早餐與午餐之間的控點拖到上午 11 點,午餐與晚餐之間的控點拖到下午 5 點,然後點選「儲存」。

編輯時間軸圖示,就在新增場景圖示的右邊。

長條下方的時間會隨您拖曳即時更新。本教學使用上午 11 點與下午 5 點;請依您廚房實際的轉場時間設定。現在一天的安排是:

  • 早餐:午夜到上午 11 點
  • 午餐:上午 11 點到下午 5 點
  • 晚餐:下午 5 點到午夜

編輯時間軸對話框,早餐、午餐、晚餐以三種顏色的色塊顯示在 24 小時長條上,色塊之間的控點分別位於上午 11 點與下午 5 點 控點分別設在上午 11 點與下午 5 點。

按時間模式下的排程面板,顯示早餐、午餐、晚餐三個場景與各自的時段 儲存後回到面板:午餐從上午 11 點開始,晚餐從下午 5 點開始。

步驟 10:載入午餐與晚餐菜單

選取午餐場景,用步驟 5 相同的方式載入 lunch 資料夾裡的三個頁面,接著選取晚餐場景,用 dinner 資料夾重複同樣的步驟。

每個場景都保留各自的內容,所以只要在面板中點選不同的場景,就能隨時檢查您的設定是否正確。

FloSync 編排器開啟排程面板並選取了午餐場景,三個螢幕各自顯示對應的 Harvest Table 午餐版面 午餐場景,上午 11 點到下午 5 點。

FloSync 編排器開啟排程面板並選取了晚餐場景,三個螢幕各自顯示對應的 Harvest Table 晚餐版面 晚餐場景,下午 5 點到午夜。

步驟 11:預覽菜單並測試一次轉場

依序點選早餐、午餐、晚餐,預覽每份菜單,把下一次轉場的時間改到幾分鐘後,然後點選「上線播放」並選擇「上線播放(排程)」。

選取場景後,編排器會顯示該場景的版面,讓您在上線播放前確認每個頁面都在正確的螢幕上。若不想乾等時鐘走到轉場時間,可以點選目前顯示中的場景的鉛筆圖示,把「結束」時間改成幾分鐘後。如果目前顯示的是晚餐場景,請改在午餐場景上這麼做,這樣午餐會先回來播放幾分鐘,晚餐才會接續上場。

上線播放 上線播放按鈕,位於編排器視窗的右下角。

上線播放(排程)會把您的場景全螢幕播放在實際的螢幕上。看著看板轉場之後,按下 ESC 鍵回到編排器,再把轉場時間改回您實際的營業時段。

三螢幕菜單看板在上午 11 點顯示午餐菜單 上午 11 點:看板已經轉為午餐畫面。

步驟 12:正式上線播放一整天

確認轉場時間已經改回實際營業時段後,再次點選「上線播放」並選擇「上線播放(排程)」。

從這一刻起,畫面上顯示哪份菜單,就交給排程自動決定。

上線播放按鈕上方展開的選單,顯示「上線播放(目前)」、「上線播放(排程)」與「上線播放(控制器)」 上線播放選單:「上線播放(排程)」會依照您設定的時段播放。

步驟 13:讓菜單看板自動啟動

開啟偏好設定,前往「啟動」區段,開啟「登入時啟動 FloSync」,並將「自動上線」設為「全螢幕」。

兩個選項都開啟後,只要有人登入電腦,FloSync 就會自動開啟,經過短暫倒數後直接依排程上線播放,不必有人動手操作。若希望看板在斷電後也能自動恢復,請另外把電腦本身設定為自動開機並自動登入;FloSync 無法開啟一台已經關機的電腦。

偏好設定對話框的「啟動」區段,「登入時啟動 FloSync」已開啟,「自動上線」設為「全螢幕」 「登入時啟動 FloSync」已開啟,「自動上線」設為「全螢幕」。

收尾

您的菜單看板現在會自己依照排程切換。之後營業時間若有調整,只要開啟編輯時間軸,重新拖曳控點即可。

常見問題

我可以用自己設計的菜單,取代 Harvest Table 範本嗎?

可以。每個螢幕都能個別載入圖片、影片或網頁,所以您可以只在一個螢幕,或在全部三個螢幕上使用自己的設計。

斷電或重新啟動之後會發生什麼事?

只要開啟「登入時啟動 FloSync」並把「自動上線」設為「全螢幕」,重新啟動後只要有人登入,看板就會自動恢復。若希望斷電後不需要人工介入也能恢復,請把電腦設定為自動開機並自動登入。FloSync 無法開啟一台已經關機的電腦。

我可以編輯菜單上的文字嗎?

可以。範本同時提供 PowerPoint、Illustrator 與 Canva 檔案,您可以直接在自己慣用的軟體中修改菜色、價格、顏色與字型,再把每個螢幕的畫面另存為圖片,載入 FloSync。本教學使用的 HTML 版本也可以編輯:請先複製一份檔案備份,用文字編輯器開啟,搜尋菜單上顯示的菜名並修改即可。

菜單看板運作需要網路連線嗎?

不需要。下載並解壓縮範本組合,讓每個 HTML 檔案和它的圖片、字型資料夾保持在一起,再以本機檔案的方式載入即可。FloSync 直接從您的電腦讀取內容,所以即使網路中斷,看板也能繼續運作。

關於作者

Daniel Palka

Daniel Palka

FloSync 創辦人

Daniel 從 2007 年起就一直在打造多螢幕影片軟體,當時 FloSync 還只是一個名為 ArraySync 的學生專案。

我們的故事

相關文章