<!doctype html>
<html lang="en-GB">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keyword" content="" />
<!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
<script src="dist//timeline.min.js"></script>
<!-- <script src="bbtimeline.js"></script> -->
<!-- <script src="bbtimeline-canvas.js"></script> -->
<!-- <script src="bbtimeline-background-canvas.js"></script> -->
<!-- <script src="bbtimeline-flourish-canvas.js"></script> -->
<!-- <script src="bbtimeline-foreground-canvas.js"></script> -->
<!-- <script src="bbtimeline.min.js"></script> -->
<title></title>
</head>
<body>
<div class="row">
<div class="column1">
<div id="myCanvas"></div>
<p>
<textarea id="memoBox1" readonly></textarea>
</p>
</div>
<div class="column2">
<p>
<button onclick="Clear()">Clear</button>
<button onclick="Refresh()">Refresh</button>
</p>
<hr />
<p>
<button onclick="ToggleDebug()">Toggle Debug</button>
</p>
<hr />
<p>
<button onclick="ToggleHotTracking()">Toggle Hot Tracking</button>
<button onclick="ToggleShowLabel()">Toggle Marker Label</button>
<button onclick="ToggleMarkerTail()">Toggle Marker Tail</button>
</p>
<p>
<button onclick="ToggleXAxisPosition()">Toggle X-Axis Position</button>
</p>
<hr />
<p>
<button onclick="SetToday()">Set Today</button>
</p>
<hr />
<p>
<button onclick="GenerateRandomMarker()">Add/Generate Random Marker</button>
</p>
<hr />
<p>
<button onclick="GoToToday()">Show Start Date</button>
<button onclick="GoToPrevious()">Show Previous</button>
<button onclick="GoToNext()">Show Next</button>
</p>
<hr />
<p>
<button onclick="UpdateLabel()">Rename Marker</button>
<button onclick="UpdateMarker()">Change Marker Style</button>
<button onclick="DeleteMarker()">Delete Marker</button>
</p>
<hr />
<p>
<button onclick="FindVisibleEvents()">Find Visible Events</button>
<button onclick="FindAllEvents()">Find All Events</button>
</p>
<hr />
<p>
<input type="date" id="textbox1" />
<button onclick="FindEvent()">Find Event (By Date)</button>
</p>
<p>
<input type="date" id="textbox2" />
<button onclick="FindDatePosition()">Find Date Position (If Visible)</button>
</p>
<hr />
</div>
</div>
<style>
body {
padding: 20px;
}
textarea {
border-style: solid;
border-width: 1px;
border-color: #000000;
min-height: calc(100vh - 500px);
padding: 10px;
width: 100%;
}
.column1 {
flex: 70%;
padding: 20px;
}
.column2 {
flex: 30%;
padding: 20px;
}
.row {
display: flex;
}
#myCanvas {
border-style: solid;
border-width: 1px;
border-color: #000000;
width: 100%;
height: 300px;
padding: 0;
margin: 0;
}
</style>
<script>
var timeline1 = new LiteRyzJS.Timeline("myCanvas");
timeline1.OnMouseDown = function(sender, e, event) {
LogInfo("");
LogInfo("OnMouseDown");
LogInfo(JSON.stringify(sender));
LogInfo(JSON.stringify(e));
LogInfo(JSON.stringify(event));
LogInfo("");
}
timeline1.OnClick = function(sender, e, event) {
LogInfo("");
LogInfo("OnClick");
LogInfo(JSON.stringify(sender));
LogInfo(JSON.stringify(e));
LogInfo(JSON.stringify(event));
LogInfo("");
}
timeline1.OnDblClick = function(sender, e, event) {
LogInfo("");
LogInfo("OnDblClick");
LogInfo(JSON.stringify(sender));
LogInfo(JSON.stringify(e));
LogInfo(JSON.stringify(event));
LogInfo("");
}
SetToday();
function Clear() {
timeline1.Clear(true);
}
function ToggleDebug() {
timeline1.Debug = !timeline1.Debug;
timeline1.Invalidate(true, true);
}
function ToggleHotTracking() {
timeline1.EnableHotTracking = !timeline1.EnableHotTracking;
timeline1.Invalidate(true, true);
}
function ToggleShowLabel() {
timeline1.ShowMarkerLabel = !timeline1.ShowMarkerLabel;
timeline1.Invalidate(true, true);
}
function ToggleXAxisPosition() {
const xAxis = timeline1.Layer.Background.Options.XAxis;
if (xAxis.Position == 'top') {
xAxis.Position = 'bottom';
timeline1.Padding.Top = 20;
timeline1.Padding.Bottom = 0;
} else {
xAxis.Position = 'top';
timeline1.Padding.Top = 0;
timeline1.Padding.Bottom = 20;
}
timeline1.Invalidate(true, true);
}
function ToggleMarkerTail() {
timeline1.Layer.Markers.Options.Label.Line.Width = ((timeline1.Layer.Markers.Options.Label.Line.Width <= 0) ? 1 : 0);
timeline1.Invalidate(true, true);
}
function Refresh() {
timeline1.Invalidate(true, true);
}
function SetToday() {
const msPerDay = 1000 * 60 * 60 * 24;
const startDate = timeline1.DateToInternalString(new Date());
timeline1.Load(startDate);
const endDate = timeline1.VisibleEndDate;
const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(startDate)) / msPerDay);
LogInfo("Set start date to today (" + startDate + ")");
LogInfo("Show " + startDate + " to " + endDate + " (" + noDays + " days)");
}
function GenerateRandomMarker() {
const msPerDay = 1000 * 60 * 60 * 24;
const endDate = timeline1.VisibleEndDate;
const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(timeline1.ShowDate)) / msPerDay);
let randomDay = GetRandy(1, (noDays - 1));
let date = timeline1.ConvertToDate(timeline1.ShowDate);
date.setDate(date.getDate() + randomDay);
const markerDate = timeline1.DateToInternalString(date);
const markerName = "Random Marker #" + GetRandy(10000, 99999);
timeline1.AddEvent(markerDate, markerName, { Title: markerName, Description: "This is a randomly generated marker" });
timeline1.Invalidate(false, true);
LogInfo("Add marker (" + markerDate + ")");
}
function GoToToday() {
timeline1.Show(timeline1.StartDate);
LogInfo("Go to " + timeline1.ShowDate);
}
function GoToPrevious() {
timeline1.ShowPrevious();
LogInfo("Go to " + timeline1.ShowDate);
}
function GoToNext() {
timeline1.ShowNext();
LogInfo("Go to " + timeline1.ShowDate);
}
function UpdateLabel() {
const visibleMarkers = timeline1.VisibleEvents;
if (visibleMarkers.length <= 0) {
LogInfo("No visible markers");
return;
}
const randy = GetRandy(0, (visibleMarkers.length - 1));
const newMarkerName = "Renamed Random Marker #" + GetRandy(10000, 99999);
LogInfo("Renamed marker #" + randy + " [" + visibleMarkers[randy].Label + "] to [" + newMarkerName + "]");
timeline1.UpdateLabel(visibleMarkers[randy].Date, newMarkerName);
}
function UpdateMarker() {
const visibleMarkers = timeline1.VisibleEvents;
if (visibleMarkers.length <= 0) {
LogInfo("No visible markers");
return;
}
const randy = GetRandy(0, (visibleMarkers.length - 1));
LogInfo("Change marker style #" + randy + " [" + visibleMarkers[randy].Label + "]");
timeline1.UpdateMarker(visibleMarkers[randy].Date, "#E68422", "#FAE7D3");
}
function DeleteMarker() {
const visibleMarkers = timeline1.VisibleEvents;
if (visibleMarkers.length <= 0) {
LogInfo("No visible markers");
return;
}
const randy = GetRandy(0, (visibleMarkers.length - 1));
LogInfo("Delete marker #" + randy + " [" + visibleMarkers[randy].Label + "]");
timeline1.DeleteMarker(visibleMarkers[randy].Date);
timeline1.Invalidate(false, true);
}
function FindVisibleEvents() {
const visibleMarkers = timeline1.VisibleEvents;
LogInfo("");
LogInfo(JSON.stringify(visibleMarkers));
LogInfo("");
}
function FindAllEvents() {
LogInfo("");
LogInfo(JSON.stringify(timeline1.Events));
LogInfo("");
}
function FindEvent() {
const date = document.getElementById("textbox1").value;
if (date == null) {
LogInfo("No marker found");
return;
}
const marker = timeline1.FindEvent(date);
if (marker == null) {
LogInfo("No marker found");
return;
}
LogInfo("");
LogInfo(JSON.stringify(marker));
LogInfo("");
}
function FindDatePosition()
{
const date = document.getElementById("textbox2").value;
if (date == null) {
LogInfo("No date position found");
return;
}
const marker = timeline1.FindDatePosition(date);
if (marker == null) {
LogInfo("No marker position found");
return;
}
LogInfo("");
LogInfo(JSON.stringify(marker));
LogInfo("");
}
function LogInfo(value)
{
document.getElementById("memoBox1").value += value + "\n";
}
function GetRandy(min, max)
{
let rand = Math.random();
rand = Math.floor(rand * (max - min));
rand = rand + min;
return rand;
}
</script>
</body>
</html>