source: tmcsimulator/trunk/webapps/gotoxmltime.html @ 348

Revision 348, 3.0 KB checked in by jdalbey, 7 years ago (diff)

Added gotoxmltime.html and other prototypes for ei notebook. They can be removed when no longer needed.
Line 
1<html>
2<head>
3<style>
4.pic-container {
5    width: 500px;
6    height: 400px;
7    overflow-y: scroll;
8    overflow-x:hidden;
9}
10</style>
11<body>
12<!-- Prototype for a display that scrolls to the current time -->
13<div id="timediv">0:00</div>
14<div> <button onclick="scrollToCurrent()">Goto Current Item</button></div>
15<div id="main" class="pic-container"></div>
16<div id="two">Footer</div>
17<script   src="poem.js"></script>
18<script  src="js/common.js"></script>
19<script>
20var xmlDoc;
21var currElement;
22var timeDiv = document.getElementById("timediv");
23/** Load the sim clock file and extract the clock string */
24function gettime()
25{
26    loadJSON("sim_clock.json", function(response)
27    {
28        simclockjson = JSON.parse(response);
29        clockstring = simclockjson.clock;
30        timeDiv.innerHTML = clockstring;  // Display current time
31        // Extract the seconds digits
32        digits = clockstring.substring(clockstring.length-2)
33        if (digits.charAt(0) == "0")
34        {
35            digits = digits.charAt(1);
36        }
37        // go adjust the scrolling box
38        //adjust(digits);
39    });
40}
41function getEvents()
42{
43    loadJSON("sample_events.xml", function(response)
44    {       
45        var parser = new DOMParser();
46        xmlDoc = parser.parseFromString(response,"text/xml");
47
48        // Place each line in its own DIV with a sequential ID
49        for (var idx=0; idx < 100; idx++)
50        {
51            var div = document.createElement("div");
52            MHSTime = xmlDoc.getElementsByTagName("time")[idx].childNodes[0].nodeValue;
53            div.id=MHSTime
54            div.className =  "item"
55            div.style.color = "black";
56            div.style.background = "GhostWhite";
57            div.innerHTML = MHSTime + " " + xmlDoc.getElementsByTagName("description")[idx].childNodes[0].nodeValue;
58            // Append it to the parent div
59            document.getElementById("main").appendChild(div);
60            currElement = document.getElementById("0:00:10");
61        }
62
63    });
64}
65// Highlight the current line and scroll to it.
66function scrollToCurrent()
67{
68    if (currElement != null)
69    {
70        currTime = timediv.innerHTML;
71        // Find the element with the id = seconds digits
72        target = findNearestElem();
73        //target = document.getElementById(currTime)
74        if (target != null)
75        {
76            // restore the previous element's background color
77            currElement.style.background = "GhostWhite";
78            currElement = target;
79            currElement.style.background = "Gainsboro"; // set background color
80            //currElement.scrollTop = 0;
81            currElement.scrollIntoView();  // scroll to it
82        }
83    }
84}
85
86function findNearestElem()
87{
88    var list = document.getElementsByClassName("item")
89    var idx = 0;
90    while (list[idx].id <  currTime) 
91    {
92        idx++;
93    }
94    return list[idx-1];
95    // Note: will crash when currTime > length of list
96}
97
98// MAIN
99
100getEvents();
101
102// Go get the current sim time every second
103var myinterval = setInterval(gettime,1000);
104//clearTimeout(myVar);
105 
106</script>
107</body>
108
109</html>
Note: See TracBrowser for help on using the repository browser.