Создание фиксированной шкалы времени в HTML/CSS/JS
Извините, это будет немного долго...
Немного контекста
В рамках более крупного проекта я пытаюсь создать временную шкалу проекта для включения в веб-страницу, используемую для дистанционного управления программой создания музыки (так называемой Reaper для тех, кто заинтересован). Я пытаюсь заставить его отображать текущую игровую позицию, маркеры проекта и регионы проекта. Все это подается прямо из API программы, без проблем получая информацию. Для начала я просто пытаюсь отобразить маркеры проекта, однако я больше недели тяну свои волосы, пытаясь заставить их работать.
Вот быстрый скриншот из программного обеспечения, чтобы проиллюстрировать то, что я пытаюсь подражать:
Обычно я использовал бы индикатор выполнения для чего-то вроде этого или один из тысяч примеров из Интернета, однако у меня нет никакого способа узнать длину проекта, поскольку программное обеспечение не ограничивает его. В результате я вернулся к использованию фиксированной шкалы в 10 пикселей на бар. Вроде произвольно, я выбрал это, так как это оптимально для 5-минутной песни при 120 ударов в минуту. Не слишком беспокоюсь о внешности на данный момент, я просто хочу заставить его работать, ха-ха.
У меня проблема (код включен внизу) заключается в том, что, поскольку я использую абсолютное позиционирование для маркеров, чтобы выровнять их по левому краю экрана, они извлекаются из потока документов, и поэтому я не могу оберните их в родительском div. В конце я намереваюсь установить родительский div шириной 80% с полосой прокрутки, чтобы увидеть остальные маркеры, так что, очевидно, я делаю это неправильно. Однако я не могу найти какие-либо закодированные фрагменты чего-то похожего на то, что я пытаюсь достичь.
Итак, вот актуальный вопрос:
Какой вид CSS для отображения / позиционирования / плавания следует использовать для этого вместо position: absolute а также float: left? Если мне нужен JS для этого, то как мне это сделать?
Спасибо за любую помощь, которую вы можете принести мне, будь то код или просто толчок в правильном направлении!
Вот мой (соответствующий) код:
index.html
<html>
<body>
<div id="timeline">
<div id="labels"></div>
<div id="markers"></div>
</div>
</body>
</html>
script.js:
// hardcoded for debugging purposes
// See section below about the API for info about how I get this data
var markers = [
{label: "Start", pos: "20.00000000000000"},
{label: "First", pos: "50.00000000000000"},
{label: "Second", pos: "200.00000000000000"},
{label: "Last", pos: "576.845412000000000"}
];
function draw_markers(marker_list) {
var label_html = "";
var marker_html = "";
$.each(marker_list, function(index, obj) {
var label = obj.label;
var offset = parseFloat(obj.pos) * 7; // obj.pos is mesured in bars, not px
label_html = label_html +
"<span class='label' style='margin-left:"+offset+"px'>" +
label + "</span>";
marker_html = marker_html +
"<span class='marker' style='margin-left:"+offset+"px'>|</span>";
});
document.getElementById("labels").innerHTML = label_html;
document.getElementById("markers").innerHTML = marker_html;
}
draw_markers(markers);
style.css:
html, body {
background: #eeeeee;
}
#timeline {
height: 4em;
width: 100%;
background-color: #9E9E9E;
}
#labels {
border-bottom: 1px solid black;
height: 50%;
width: 100%;
}
#markers {
height: 50%;
width: 100%;
}
.label {
position: absolute;
float: left;
}
.marker {
position: absolute;
float: left;
}
Об API
Мы получили множество функций, которые опрашивают сервер через равные промежутки времени и анализируют (открытый текст) ответы. Типичный ответ выглядит примерно так:
MARKERLIST_BEGINMARKER_LIST
MARKER \t label \t ID \t position
...
MARKER_LIST_END
TRANSPORT \t playstate \t position_seconds \t isRepeatOn \t position_string \t position_string_beats
...
Используя JS, я разделяю каждую строку и использую оператор switch, чтобы выяснить, что делать с каждой строкой. Затем я создаю глобальный массив, содержащий все маркеры в проекте, с необходимой мне информацией.
2 ответа
В качестве альтернативы вы можете использовать <canvas>нарисовать временную шкалу из Javascript (это то, что я использую для веб-интерфейса Song Switcher). Также вы можете узнать длину проекта, используя GetProjectLengthAPI-функция (например, вызывая скрипт для помещения длины во временное состояние, а затем считывая ее из веб-интерфейса).
function Timeline(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.length = 0;
this.markers = [];
}
Timeline.prototype.resize = function() {
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;
this.scale = this.length / this.canvas.width;
}
Timeline.prototype.update = function() {
this.resize();
this.ctx.fillStyle = '#414141';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.textBaseline = 'hanging';
for(var marker of this.markers)
this.drawMarker(marker);
}
Timeline.prototype.drawMarker = function(marker) {
const MARKER_WIDTH = 2;
const FONT_SIZE = 14;
const PADDING = MARKER_WIDTH * 2;
var xpos = this.timeToPx(marker.pos);
this.ctx.strokeStyle = this.ctx.fillStyle = 'red';
this.ctx.lineWidth = MARKER_WIDTH;
this.ctx.beginPath();
this.ctx.moveTo(xpos, 0);
this.ctx.lineTo(xpos, this.canvas.height);
this.ctx.stroke();
if(marker.name.length > 0) {
this.ctx.font = `bold ${FONT_SIZE}px sans-serif`;
var boxWidth = this.ctx.measureText(marker.name).width + PADDING;
this.ctx.fillRect(xpos, 0, boxWidth, FONT_SIZE + PADDING);
this.ctx.fillStyle = 'white';
this.ctx.fillText(marker.name, xpos + MARKER_WIDTH, PADDING);
}
}
Timeline.prototype.timeToPx = function(time) {
return time / this.scale;
}
var timeline = new Timeline(document.getElementById('timeline'));
timeline.length = 30; // TODO: Fetch using GetProjectLength
timeline.markers = [
{pos: 3, name: "Hello"},
{pos: 15, name: "World!"},
{pos: 29, name: ""},
];
timeline.update();
window.addEventListener('resize', timeline.update.bind(timeline));#timeline {
height: 50px;
line-height: 50px;
image-rendering: pixelated;
width: 100%;
}<canvas id="timeline"></canvas>Ты можешь использовать divкак display: inline-block и установите их ширину в процентах от дельты перекрывающихся позиций абсолютной шкалы времени:
function draw_markers(marker_list) {
var label_html = "";
var marker_html = "";
var total = null;
var prev = 0;
$.each(marker_list, function(index, obj) {
var delta = parseFloat(obj.pos) - prev;
obj.delta = delta;
prev += parseFloat(obj.pos);
total += delta;
})
$.each(marker_list, function(index, obj) {
var label = obj.label;
var offset = parseFloat(obj.delta) / (total / 100); // obj.pos is mesured in bars, not px
label_html = label_html +
"<div class='label' style='width:"+offset+"%'>" +
label + "</div>";
marker_html = marker_html +
"<div class='marker' style='width:"+offset+"%'>|</div>";
});
document.getElementById("labels").innerHTML = label_html;
document.getElementById("markers").innerHTML = marker_html;
}
draw_markers(markers);
CSS:
html, body {
background: #eeeeee;
}
#timeline {
height: 4em;
width: 100%;
background-color: #9E9E9E;
}
#labels {
border-bottom: 1px solid black;
height: 50%;
width: 100%;
}
#markers {
height: 50%;
width: 100%;
}
.label {
position: relative;
display: inline-block;
}
.marker {
position: relative;
display: inline-block;
}