外付けモニターへの表示内容をノート側で変更する

質問

このようなイメージです。
外付けモニターがお客さんの方を向いていて、
「只今の待ち時間、３０分」
のような定形画面で表示をしているものとします。
この３０の部分を、ノート側に制御するウインドウがあって手動で書き換える。
というすごく単純な話なんですが。

お金をかけずに実現するアイデア、ありますでしょうか？

回答No.5

wek00

回答No.4 - 参考3 続き
//Canvasのwidthをウィンドウの幅に合わせる
//　　　　canvas.height = 300;
　　　　canvas.contextCache = canvas.getContext("2d");
　　}
　　// 共通の更新処理呼び出し
//　update();
}

function update() {
　　for(var canvasIndex in canvasList) {
　　　　var canvas = canvasList[canvasIndex];
　　　　// 各キャンバスの描画
　　　　draw(canvas, colorList[canvasIndex]);
　　}
　　// 共通の描画情報の更新
//　　info.seconds = info.seconds + .014;
　　info.seconds = info.seconds + .001; //
　　info.t = info.seconds*Math.PI;
　　// 自身の再起呼び出し
//　　setTimeout(update, 35);
}

/**
* Draw animation function.
*
* This function draws one frame of the animation, waits 20ms, and then calls
* itself again.
*/
function draw(canvas, color) {
　　// 対象のcanvasのコンテキストを取得
　　var context = canvas.contextCache;
　　// キャンバスの描画をクリア
//　　context.clearRect(0, 0, canvas.width, canvas.height);

　　//波を描画
　　drawWave(canvas, color[0], 0.3, 3, 0);
　　drawWave(canvas, color[1], 0.4, 2, 250);
　　drawWave(canvas, color[2], 0.2, 1.6, 100);
};

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(canvas, color, alpha, zoom, delay) {
　　var context = canvas.contextCache;
　　context.fillStyle = color;
　　context.globalAlpha = alpha;

　　context.beginPath(); //パスの開始
　　drawSine(canvas, info.t / 0.5, zoom, delay);
　　context.lineTo(canvas.width + 10, canvas.height); //パスをCanvasの右下へ
　　context.lineTo(0, canvas.height); //パスをCanvasの左下へ
　　context.closePath() //パスを閉じる
　　context.fill(); //塗りつぶす
}

/**
* Function to draw sine
*
* The sine curve is drawn in 10px segments starting at the origin.
* drawSine(時間, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawSine(canvas, t, zoom, delay) {
//　　var xAxis = Math.floor(canvas.height/2);
　　var xAxis = Math.floor(canvas.height/8); //
　　var yAxis = 0;
　　var context = canvas.contextCache;
　　// Set the initial x and y, starting at 0,0 and translating to the origin on
　　// the canvas.
　　var x = t; //時間を横の位置とする
　　var y = Math.sin(x)/zoom;
　　context.moveTo(yAxis, unit*y+xAxis); //スタート位置にパスを置く

　　// Loop to draw segments (横幅の分、波を描画)
　　for (i = yAxis; i <= canvas.width + 10; i += 10) {
　　　　x = t+(-yAxis+i)/unit/zoom;
　　　　y = Math.sin(x - delay)/3;
　　　　context.lineTo(i, unit*y+xAxis);
　　}
}

init();

//})();
// jsfiddle.net/39we73t1/ の転載ここまで

onload = function() {
　clockx();
};

function clockx(){
　　var elem_w = document.getElementById('wrapper');
　　var elem_c = document.getElementById('canvasx');
　　h = elem_w.offsetHeight;
　　w = elem_w.offsetWidth;
　　elem_c.height = h;
　　elem_c.width = w;

　　cx = Math.round(w/2); //画面中央の座標
　　cy = Math.round(h/2);

　　var ctx = elem_c.getContext('2d');
　　ctx.save();
　　ctx.clearRect(0,0,w,h); //毎回canvas全体をクリアしてから描画する
　　ctx.strokeStyle = '#333';
　　ctx.fillStyle = '#000';
　　//ctx.lineWidth = 3;
　　//ctx.lineCap = 'square';

　　//debug用 ここから
　　var now = new Date();

　　ctx.save();
　　ctx.beginPath();
　　ctx.strokeStyle="blue";
　　ctx.rect(0.5,0.5,w-1,h-1);
　　ctx.stroke();
　　ctx.restore();

　　ctx.font = "20px 'Unknown', serif";
　　ctx.fillText(w + 'w ' + h + 'h dswt.txt:' + xdata, 2, 20);

　　ctx.beginPath();
　　ctx.moveTo(cx, 10);
　　ctx.lineTo(cx, h-10);
　　ctx.moveTo(10, cy);
　　ctx.lineTo(w-10, cy);
　　ctx.stroke();

　　var msec = now.getMilliseconds();
　　var sec = now.getSeconds();
　　var min = now.getMinutes();
　　var hr　= now.getHours();

　　str = ( '00' + hr ).slice( -2 ) + ':';
　　str = str + ( '00' + min).slice( -2 ) + ':';
　　str = str + ( '00' + sec).slice( -2 ) + '.';
　　str = str + ( '000' + msec).slice( -3 );
　　ctx.font = "20px 'Unknown', monospace";
　　ctx.fillText(str, w-125, 20);
　　//debug用 ここまで

　　ctx.save();
　　update();
　　ctx.restore();

　　ctx.font = "120px 'Unknown', sans-serif";
　　ctx.fillText("只今の待ち時間", cx-410, cy-60);

　　ctx.font = "240px 'Unknown', sans-serif";
　　ctx.fillText(xdata, cx-125, cy+130);

　　ctx.font = "60px 'Unknown', sans-serif";
　　ctx.fillText('分', cx+110, cy+120);

　　//window.requestAnimationFrame(clockx); //マシンの負荷に応じ最高60fps程度で更新
　　setTimeout(clockx, 200);　// 指定時間[ms]に1回程度画面を更新
}
</script>
</body>
</html>

回答No.4

wek00

Javascriptでホームページを自動更新して半リアルタイムのデジタルサイネージとして使う
http://www.digitalsignage-kure.jp/text2/pg441.html
フリーソフトで作る更新型デジタルサイネージシステム
http://www.digitalsignage-kure.jp/text/pg211.html

上記のページでは表示にWebブラウザを用いる方法について解説されています。
Webサーバ + Webブラウザ という構成です。
（この解説はインターネット越しの話ですが、ネットワークを使わず全てを1台のパソコンで完結させるほうが実現は簡単です。主にセキュリティ面で）
・普段ご覧になっているWebページや商用製品（参考２）同様の表示の美しさと
・自分の使い方に合ったきめ細やな表示内容を
・無料で
実現できます。ただ数字が出るだけでは味気ないので常に変化がある背景にする・案内文を順次表示するといった要求にも応えられます。（ただ文字を出すだけなら簡単ですが、デザインを工夫するには学習に時間がかかります。時間をかけて徐々に高度にしていくスタイルに向いているでしょう）

※ファイルを書き換えるとそれに応じて表示が変わります。書き換えをワンボタン・ワンタッチで行うにはその為の仕組みも必要です。（一例：実行すると表示対象のファイルを書き換えるバッチファイルを15分用、30分用．．．と用意しておく）

※Webサーバはクライアント版Windowsでも設定すればIISが使えるようです。
sHTTPd by 悪魔猫将軍などフリーソフトにも扱いが簡単なものがあります。
簡単な操作でWebページを公開できるWebサーバソフト
https://www.vector.co.jp/magazine/softnews/040522/n0405222.html
http://snca.net/

※条件を整えればWebサーバを使わずに済ませることもできます。
ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法
https://qiita.com/nissuk/items/1ede2953a8661dc59214

参考：

サイネージ フリーソフト - Google 検索
https://www.google.com/search?q=サイネージ+フリーソフト

ベクター : 「デジタルサイネージ」の検索結果
https://search.vector.co.jp/vsearch/vsearch.php?key=%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%8D%E3%83%BC%E3%82%B8

参考２：

待ち時間表示
https://www.google.com/search?q=%E5%BE%85%E3%81%A1%E6%99%82%E9%96%93%E8%A1%A8%E7%A4%BA&tbm=isch

参考３：

サンプルコード。FirefoxにてWebサーバなしで動作確認。
使用するには全角空白「　」を半角空白「 」に置換しUTF-8でhtmlファイルとして保存します。
<!DOCTYPE html>
<head>
　　<meta charset="UTF-8" />
　　<style type="text/css">
　　　　html, body {
　　　　　　width: 100%;
　　　　　　height: 100%;
　　　　　　margin: 0;
　　　　}
　　　　#wrapper{
　　　　　　width: 100%;
　　　　　　height: 100%;
　　　　}
　　　　#canvasx {
　　　　　　display: block;
　　　　}
　　</style>
　　<title>DS wave.shrink</title>
</head>
<body>
<div id="extxt"><!-- 挿入--></div>
<div id="wrapper">
<canvas id="canvasx"></canvas>
</div>
<script>
//http://honttoni.blog74.fc2.com/blog-entry-207.html
//ほんっとにはじめてのHTML5とCSS3：[69-14] canvasのアニメーションの基本を見てみよう
//https://rfs.jp/sb/javascript/js-lab/zeropadding.html
//JavaScriptで数値の桁数を合わせる（ゼロパディング）方法| JavaScriptテックラボ | [Smart]
//https://qiita.com/ShinyaOkazawa/items/9e662bf2121548f79d5f
//canvasをフルスクリーンで表示したいとき
//https://tsukulog.net/archives/2134
//HTML5のcanvas要素を常に画面いっぱいに表示されるようにする方法

var elem_ext = document.getElementById("extxt")
function loadtextfile() {
//https://qiita.com/n_oshiumi/items/5795de01187d5aafca07
//Javascriptでhtmlを動的に書き換える方法！
　　elem_ext.innerHTML = '<object data="dswt.txt" type="text/plain" id="obj" style="display:none" onload="readtextdata()"></object>';
　　//ここで待ち時間を記入したファイルを指定。
　　//この例では、htmlファイルと同じフォルダにある「dswt.txt」
}

var xdata
function readtextdata() {
//https://qiita.com/nissuk/items/1ede2953a8661dc59214
//ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法
　　var obj = document.getElementById("obj");
　　xdata = obj.contentDocument.documentElement.textContent; // 外部ファイルの内容
}

setInterval(loadtextfile, 5000); //ここで指定した間隔でファイルの中身を読みに行く

//http://sakusaku.me/blog/html5-canvas-study-1.html
//SAKUSAKU HTML5 canvas 試作 – その1　サインカーブ（波の表現）を描画してみました。
//https://sterfield.co.jp/designer/canvas%E3%81%A7%E6%B3%A2%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E6%8F%8F%E7%94%BB%E3%81%99%E3%82%8B/
//Canvasで波のアニメーションを描画する | スターフィールド株式会社
//https://digipress.digi-state.com/tech/waveform-canvas-animation-sample/
//Retina対応の canvas + Javascript による波形アニメーションサンプル | WordPressテーマ／DigiPress
//https://jsfiddle.net/39we73t1/
//以下はここから転載
//(function () {

var unit = 100,
　　canvasList, // キャンバスの配列
　　info = {}, // 全キャンバス共通の描画情報
　　colorList; // 各キャンバスの色情報

/**
* Init function.
*
* Initialize variables and begin the animation.
*/
function init() {
　　info.seconds = 0;
　　info.t = 0;
　　　　canvasList = [];
　　colorList = [];
　　// canvas1個め
　　canvasList.push(document.getElementById("canvasx"));
　　colorList.push(['#10c2cd', '#43c0e4', '#1d82b6']);

　　// canvas2個め
　　// canvas3個め

　　// 各キャンバスの初期化
　　for(var canvasIndex in canvasList) {
　　　　var canvas = canvasList[canvasIndex];
//　　　　canvas.width = document.documentElement.clientWidth;
続く

回答No.3

h_ishikawa

パワーポイントなら、操作側と説明表示側で表示が変えられます。
表示だけならば無料のビューワーがあるので、だれかお持ちの方に作成してもらえば、簡単にできますよ。

スペースキーで次に移れるので、60分、45分、30分、15分を用意して、スペースキーを押すたびに切り替えるようなものであれば、すぐに作れるかと。

※タブレット用とありますが、普通のWindowsで無料で使えます。
https://www.microsoft.com/ja-jp/p/powerpoint-mobile/9wzdncrfjb5q?activetab=pivot%3aoverviewtab

回答No.2

washi-washi

デュアルモニター設定（複数のディスプレイに表示）で「拡張表示」を行えば良いのではないでしょうか？
外付けモニターをノートPCのモニターの延長線上（右側や左側）として配置し、それぞれ表示したい内容を各ウィンドウにドラッグしていけば済むかと思います。

回答No.1

Higurashi777

OfficeのPowerPoint（もしくはそれに相当する無償ソフト）を使うのが一番楽ですね。
待ち時間に応じたスライドを複数作成しておいて、待ち時間に応じて表示するスライドを差し替えるだけです。

以上、ご参考まで。