トップページ > 記事閲覧
長文になりますが、出発駅と到着駅指定できないものを途中駅の指定ができるようにしたいです。
名前:えっぴ〜 日時: 2022/11/12 11:00

長文になりますが、出発駅と到着駅設定できないものを途中駅の設定ができるようにしたいです。 おそらく下記の1Dは、上から下へという意味で、D1は、下から上へという意味だと思います。 但し、これの弱点は、出発駅と到着駅の指定はできても、 途中駅の時間指定はできず、プログラム上、出発駅と到着駅の所用時間と、距離から計算して、列車を配置していくので、 途中駅は、どの列車も通る時間は同じになってしまいます。 これを列車ごとに異なるようにするにはどのようにすればいいのでしょうか。 また、途中駅での停車時間が1分であるなど、途中で列車の動作を止めて停車させ、時間は動かせたままといった設定は、このプログラムでは無理なのでしょうか。 ちなみに、例えば、var diaDataの、" 1 1D 05430620",の、1Dの後ろの8桁の数字のうち、4桁目までが、出発時刻、後ろ4桁が到着時刻です。 <javascript> // js var hour; var min; var sec; var today; var bSec = -1; var bDay = 1; var uSec = -1; var daySec; var diaData = [ [ " 1 1D 05430620", " 14 D1 06440719", この間省略 ] ]; var izst = [ [ 0, 1, "三島" ], [ 13, 0, "三島広小路" ], [ 20, 1, "三島田町" ], [ 29, 0, "三島二日町" ], [ 55, 1, "大場" ], [ 70, 0, "伊豆仁田" ], [ 85, 0, "原木" ], [ 98, 0, "韮山" ], [ 114, 1, "伊豆長岡" ], [ 142, 0, "田京" ], [ 166, 1, "大仁" ], [ 186, 0, "牧之郷" ], [ 198, 1, "修善寺" ] ]; var forms = [ "3501 3501 3002 3001 31 軌", この間省略 ]; var trainColor = [ "#209020", "#60d0ff", "#60d0ff", "#60d0ff", "#60d0ff", "#0080ff", "#60d0ff", "#60d0ff", "#ffff00", "#60d0ff" ]; var formColor = [ "#ffffff", "#000000", "#000000", "#000000", "#000000", "#ffffff", "#000000", "#000000", "#000000", "#000000", ]; // var opData = null; // var opData = "0123456789"; var opData = "01367"; // 2401 1 203 10 208 - - - // 1-141, 2-243, 4-23-2400, 6-120-2403, 10-137, 203-139, 2401-18-144, 208-135 var bAutoUpdate; var strOption; options = { dt: null, debug: 0 }; var page = 0; var step = 10; // DOM functions function $(id) { return document.getElementById(id); } function $tags(tagName) { return document.getElementsByTagName(tagName); } function $tag(tagName) { return document.getElementsByTagName(tagName)[0]; } // 初期化 window.onload = function() { init(); } function init() { showPage(page); setDisplay(); setStation(); setHandler(); // loadOption(); periodicProc(); } // ページ切り替え function showPage(n) { var els = $tags("section"); for (var i = 0; i < els.length; i++) { els[i].classList.add("clsHide"); } els = $tags("button"); for (i = 0; i < els.length; i++) { els[i].classList.remove("btnDisable", "btnEnable", "btnHide"); els[i].setAttribute("disabled", false); els[i].removeAttribute("disabled"); els[i].removeEventListener("click", function() {}, false); } if (n == 0) { var el = $("btn1"); el.textContent = "-"; el.classList.add("btnDisable"); el.setAttribute("disabled", true); el = $("btn2"); el.textContent = "-"; el.classList.add("btnDisable"); el.setAttribute("disabled", true); el = $("btn3"); el.textContent = "-"; el.classList.add("btnDisable"); el.setAttribute("disabled", true); el = $("btn4"); el.textContent = "出虫"; el.classList.add("btnEnable"); el.addEventListener("click", function() { showPage(3); }, false); $("pagePosition").classList.remove("clsHide"); } else if (n == 3) { var el = $("btn1"); el.textContent = "REV"; el.classList.add("btnEnable"); el.addEventListener("click", function() { step = -10; }, false); el = $("btn2"); el.textContent = "PAU"; el.classList.add("btnEnable"); el.addEventListener("click", function() { step = 0; }, false); el = $("btn3"); el.textContent = "FWD"; el.classList.add("btnEnable"); el.addEventListener("click", function() { step = 10; }, false); el = $("btn4"); el.textContent = "FF"; el.classList.add("btnEnable"); el.addEventListener("click", function() { step = 60; }, false); $("pagePosition").classList.remove("clsHide"); options.debug = 1; } page = n; } // 表示設定 function setDisplay() { // $("idDateTime").textContent = "-"; setHeader(); setFooter(); $("secMap").classList.remove("clsHide"); } function setHeader() { $tag("body").style.paddingTop = $tag("header").clientHeight + "px"; } function setFooter() { $tag("body").style.paddingBottom = $tag("footer").clientHeight + "px"; } // 駅設定 function setStation() { var n = izst.length; for (var i = 0; i < n; i++) { var isMark = izst[i][1]; var pos = izst[i][0]; var name = izst[i][2]; var x = 8; var y = 0; var xx = 209; var cls = "clsSta"; if (pos < 200) { y = 10 + pos * 2.5; cls += "Left"; } var html = "<div id='divStation" + i + "' class='clsStation'>"; html += "</div>"; $("divMap").innerHTML += html; $("divStation" + i).style.left = xx + "px"; $("divStation" + i).style.top = y + 1 + "px"; if (isMark) { y -= 2; cls += "Mark"; } html = "<div id='divStaName" + i + "' class='" + cls + "'>"; html += name + "</div>"; $("divMap").innerHTML += html; $("divStaName" + i).style.left = x + "px"; $("divStaName" + i).style.top = y - 8 + "px"; } } // イベントハンドラ設定 function setHandler() { // ヘッダー $tag("div").addEventListener("click", function() { var menu = $("menu"); if (menu.classList.contains("clsHide")) { menu.classList.remove("clsHide"); } else if (page != 3) { menu.classList.add("clsHide"); } setHeader(); }, false); } // 繰り返し処理 function periodicProc() { if (options.debug) intervalDebug(); else intervalProc(); } function intervalProc() { setHeader(); var date = new Date(); //date.setTime(date.getTime() - (0 * 3600 + 0 * 60 + 0) * 1000); //date.setTime(date.getTime() - 0 * 86400000); daySec = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(); if (date.getHours() < 3) daySec += 24 * 3600; sec = date.getSeconds(); if (bSec != sec) { if (bAutoUpdate && (sec == uSec)) updateOption(); bSec = sec; // 1秒毎の処理 hour = date.getHours(); min = date.getMinutes(); var time = date.getTime(); if (hour < 3) { time -= 86400000; hour += 24; } date.setTime(time); var cDay = ~~((time + 32400000) / 86400000); if (bDay != cDay) { var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); today = year + ((month > 9) ? "" : "0") + month; today += ((day > 9) ? "" : "0") + day; if (options.dt && (options.dt != today)) { if (!bDay) { var str = "今日のデータではありません。\n"; str += "(" + options.dt + ")"; // alert(str); } options.dt = null; } // 日毎の処理 bDay = cDay; // showLegend(); setTrains(); } setCurrentDateStr(date, hour, min, sec); // 秒毎の処理 updateTrains(); } window.setTimeout(periodicProc, 100); } // 時刻表示 function setCurrentDateStr(date, hour, min, sec) { var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var str = year + "年"; str += ((month > 9) ? "" : " ") + month + "月"; str += ((day > 9) ? "" : " ") + day + "日"; str += "(" + [ "日", "月", "火", "水", "木", "金", "土" ][date.getDay()] + ") "; str += ((hour > 9) ? "" : "0") + hour + ":"; str += ((min > 9) ? "" : "0") + min + ":"; str += ((sec > 9) ? "" : "0") + sec; $("idDateTime").textContent = str; setHeader(); } // 繰り返しデバッグ処理 function intervalDebug() { if (!((18000 <= daySec) && (daySec <= 88200))) { daySec = step < 0 ? 88200 : 18000; bDay = bDay ? 0 : 1; setTrains(); } var hour = ~~(daySec / 3600); var min = ~~(daySec / 60) % 60; var sec = daySec % 60; var str = "[DEBUG] " str += ((hour > 9) ? "" : "0") + hour + ":"; str += ((min > 9) ? "" : "0") + min + ":"; str += ((sec > 9) ? "" : "0") + sec; $("idDateTime").textContent = str; updateTrains(); daySec += step; window.setTimeout(periodicProc, 50); } // 列車登録 function setTrains() { $("divTrain").innerHTML = ""; for (var i = 0; i < diaData.length; i++) { setTrain(i); } } function setTrain(i) { var dia = diaData[i]; var opStr = dia[0].slice(0, 4).replace(/^ +/, ""); var opNum = parseInt(opStr); var str = ""; if (opNum >= 4000) { str = "踊"; } if (opData && (i < opData.length)) { str = forms[parseInt(opData.charAt(i))].slice(23); } var html; if (str.length > 0) { html = "<div id='divTr" + opStr; html += "' class='clsTrainSIF clsHide'>" + str + "</div>"; $("divTrain").innerHTML += html; } else { html = "<div id='divTr" + opStr; html += "' class='clsTrain clsHide'></div>"; $("divTrain").innerHTML += html; } $("divTr" + opStr).style.backgroundColor = "#a0a0a0"; html = "<div id='divTN" + opStr; html += "' class='clsHide'>" + opStr + "</div>"; $("divTrain").innerHTML += html; } // 列車表示更新 function updateTrains() { var td = daySec; if (td < 10800) td = 10800; for (var i = 0; i < diaData.length; i++) { updateTrain(i, td); } } function updateTrain(j, td) { var dia = diaData[j]; var opStr = dia[0].slice(0, 4).replace(/^ +/, ""); var isDown = false; var isOp = false; var t0 = 0; var t1 = 0; var s0 = 0; var s1 = 0; for (var i = 0; i < dia.length; i++) { t0 = parseInt(dia[i].slice(8, 12), 10); t0 = (~~(t0 / 100) * 60 + (t0 % 100)) * 60; if ((i == 0) && (td < t0 - 300)) break; t1 = parseInt(dia[i].slice(12, 16), 10); t1 = (~~(t1 / 100) * 60 + (t1 % 100)) * 60; if (i + 1 == dia.length) { if (t1 + 300 < td) continue; } else { var t2 = parseInt(dia[i + 1].slice(8, 12), 10); t2 = (~~(t2 / 100) * 60 + (t2 % 100)) * 60; if ((t1 + t2) / 2 < td) continue; } isOp = true; s0 = parseInt(dia[i].slice(5, 6), 16) - 1; s1 = parseInt(dia[i].slice(6, 7), 16) - 1; isDown = (s0 < s1); break; } if (isOp) { var pos = (td - t0) / (t1 - t0); if (td < t0) { pos = izst[s0][0]; } else if (t1 < td) { pos = izst[s1][0]; } else if (isDown) { pos = (izst[s1][0] - izst[s0][0]) * pos + izst[s0][0]; } else { pos = izst[s0][0] - (izst[s0][0] - izst[s1][0]) * pos; } var x = isDown ? 234 : 214; var y = 10 + pos * 2.5; var xx = isDown ? 258 : 136; var n = parseInt(dia[i].slice(0, 1)); var str = dia[i].slice(0, 4).replace(/^ +/, "") + (n >= 4 ? "M" : ""); if (i > 0) str += " (" + opStr + ")"; $("divTN" + opStr).textContent = str; $("divTN" + opStr).style.left = xx + "px"; $("divTN" + opStr).style.top = (y - 6) + "px"; x += 4 - ($("divTr" + opStr).getBoundingClientRect().width) / 2; y += 3 - ($("divTr" + opStr).getBoundingClientRect().height) / 2; $("divTr" + opStr).style.left = x + "px"; $("divTr" + opStr).style.top = y + "px"; if (n >= 8) { $("divTr" + opStr).style.color = "#000000"; $("divTr" + opStr).style.backgroundColor = "#ffa0ff"; } else if (n >= 4) { $("divTr" + opStr).style.color = "#000000"; $("divTr" + opStr).style.backgroundColor = "#ffffff"; } else if (n == 2) { $("divTr" + opStr).style.color = "#000000"; $("divTr" + opStr).style.backgroundColor = "#a0a0a0"; } else if (dia[i].slice(0, 1) == " ") { var f = 0; if (opData && (j < opData.length)) { f = parseInt(opData.charAt(j)) + 1; } if (f) { $("divTr" + opStr).style.color = formColor[f - 1]; $("divTr" + opStr).style.backgroundColor = trainColor[f - 1]; } else { $("divTr" + opStr).style.color = "#000000"; $("divTr" + opStr).style.backgroundColor = "#60d0ff"; } } $("divTr" + opStr).classList.remove("clsHide"); if (isDown) { $("divTN" + opStr).classList.remove("clsTraLeft") $("divTN" + opStr).classList.add("clsTraRight") $("divTN" + opStr).classList.remove("clsHide"); } else { $("divTN" + opStr).classList.remove("clsTraRight") $("divTN" + opStr).classList.add("clsTraLeft") $("divTN" + opStr).classList.remove("clsHide"); } } else { $("divTr" + opStr).classList.add("clsHide"); $("divTN" + opStr).classList.add("clsHide"); } } // eof </javascript>
メンテ

Page: 1 |

Re: 長文になりますが、出発駅と到着駅指定できないものを途中駅の指定ができるようにしたいです。 ( No.1 )
名前:えっぴ〜 日時:2022/11/12 11:04

以下は参考にしたサイトのソースです。 そして、そのサイトのソースです。 <javascript> <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="content-language" content="ja"> <meta name="viewport" content="width=392"> <meta name="description" content="伊豆箱根鉄道の電車位置を表示"> <meta name="keywords" content="伊豆箱根鉄道,駿豆線,大雄山線,いずっぱこ"> <meta name="author" content="chocoden"> <title>いずっぱこ なう!</title> <!-- いずっぱこ なう! --> <!-- Copyright (C) 2018 chocoden(twitter.com/chocoden) --> <!--link rel="icon" href="favicon.ico"--> <!--link rel="apple-touch-icon" href="apple-touch-icon.png"--> <link rel="stylesheet" href="izuppako_now.css"> <script src="izuppako_now.js"></script> </head> <body> <header> <div id="idTitle" class="hdrTitle">いずっぱこ なう! (駿豆線)</div> <div id="idDateTime" class="hdrDateTime">-</div> <div id="menu" class="menu clsHide"> <button id="btn1"></button> <button id="btn2"></button> <button id="btn3"></button> <button id="btn4"></button> </div> </header> <section id="pagePosition"> <div id="secMap" class="clsHide"> <div id="divMap"> <div id="parts01"></div> <div id="parts02"></div> </div> <div id="divTrain"> </div> </div> </section> <footer> <small>Copyright &copy; 2018 chocoden</small> </footer> </body> </html> </javascript>
メンテ
Re: 長文になりますが、出発駅と到着駅指定できないものを途中駅の指定ができるようにしたいです。 ( No.2 )
名前:ナナシア 日時:2022/11/12 11:46

まず前提として、これは元となる鉄道の運行状況を可視化するプログラムを再現(改良?)したい、というような話で合っていますでしょうか。 概念的な話(途中駅とは何かなど)がされていないため、恐らく上記の説明では全容を理解して答えるのはそこそこ難しいと思われます。 プログラムを見てパっといえる限りでは、描写が全て時間的に相対である場合、停車時間などのパラメータを追加しても難しく、 配置する計算式は新しく作った方が、望みはかなえられると思われます。 まずはソースコードなどのリファクタなどをして、各変数がどのような役割をしているかを把握して、 問題を切り分けながら作ると良いかもしれません。 (あとカテゴリ的にDXライブラリと大きく離れた話になるので、管理人さんは少し困ると思われます。 Javascriptもしくはアルゴリズム関連の話はteratailで尋ねた方がより多くの専門的な人の目につく可能性が高いです。)
メンテ
Re: 長文になりますが、出発駅と到着駅指定できないものを途中駅の指定ができるようにしたいです。 ( No.3 )
名前:えっぴ〜 日時:2022/11/12 12:17

テラテイルで上記の質問をしたところ、わかりにくいとか、やってほしいことだけといわれました。
メンテ
Re: 長文になりますが、出発駅と到着駅指定できないものを途中駅の指定ができるようにしたいです。 ( No.4 )
名前:管理人 日時:2022/11/13 01:59

すみません、私は JavaScript を使用した経験が無いのでわかりません m(_ _;m
メンテ

Page: 1 |

題名
名前
コメント
パスワード (記事メンテ時に使用)

   クッキー保存