Scrolling Log File (Tail -F) Animation Using JavaScript

JQuery Animation Recursion

We found the answer - I asked the guys at work. After creating a fiddle we realised that I had 2 classes that use "eye" - and so the complete closure was being called for each one.

Jquery .on() Scroll not functioning on dynamic div

Try binding scroll event after the element is appended on the DOM, like this:

$("body").on("DIVscroll", "#scroller", function(){  console.log("Scrolled...");});
$("#btn").on("click", function(){  $("body").append('<div id="scroller">I have a dynamically created div with position: fixed; overflow-y: auto, the div is created when a user clicks a certain link. This is the function Im using to try and execute some code whenever that dynamically created div is scrolled.</div>');  ScrollEventListener($("#scroller"));});
function ScrollEventListener(el){  el.on("scroll", function(){    el.trigger("DIVscroll");  });}

body{  font-size: 17px;} #scroller{  height: 100px;  width: 300px;  border: 1px solid;  overflow-y: auto;  position: fixed;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="button" id="btn" value="Append div"/>

How to use NanoHTTPD to show log file

Successfully got it working, it is by jquery

server

public class TestServer  extends NanoHTTPD {

public static boolean isTesting=false;
public TestServer() {
    super(8080);
}
@Override public Response serve(IHTTPSession session) {
    Method method = session.getMethod();
    Map<String,String> params = session.getParms();
    String uri = session.getUri();
    if (uri.length()>1){
        //remove the starting /
        uri=uri.substring(1).toLowerCase();
    } else{
        uri="";
    }

    System.out.println("method: ["+method + "] uri: [" + uri +"]");
    String msg = "";
    Map<String, String> parms = session.getParms();
    if ("".equals(uri)){
        //TextFiles.loadString just loads the whole file in a single string.
        msg=TextFiles.loadString("C:/server/index.html");
        return new NanoHTTPD.Response(msg);
    }else//handle log refreshing
    if ("log".equals(uri)){
        System.out.println("Log requested ...");
        while(!Logging.webLogQueue.isEmpty()){
            msg+="<p>"+Logging.webLogQueue.poll()+"</p>";
        }
        return new NanoHTTPD.Response(msg);
    }else if ("suites".equals(uri)){
        System.out.println("suites requested ...");

        // fill msg with suites  ...

        return new NanoHTTPD.Response(msg);
    } else if (("status".equals(uri))){
        System.out.println("status requested ...");
        msg=(isTesting?"Testing...":"Idle");
        return new NanoHTTPD.Response(msg);
    }else{
        for(String paramKey:parms.keySet()){
            String[] value=params.get(paramKey).split(" ");
            Logging.log("<p>"+Logging.getTimeStamp()+" Parameter: "+paramKey+"="+    params.get(paramKey)+"</p>");
            if ("tcl".equalsIgnoreCase(paramKey)){
                Logging.log("run started : "+params.get(paramKey));
                while(isTesting){
                    try {
                        Logging.log("test pending : "+params.get(paramKey));
                        Thread.sleep(3000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                Logging.log("test starting: "+params.get(paramKey));
                //Raise a flag while executing a test run
                isTesting=true;
                try {
                    Logging.log("Attempting to execute: "+params.get(paramKey));
                    BananaTest.execute(value);
                    Logging.log("Ttest finished: "+params.get(paramKey));
                } catch (Exception e) {
                    e.printStackTrace();
                }
                isTesting=false;
            }
        }
    }
    msg=TextFiles.loadString("C:/server/index.html");
    return new NanoHTTPD.Response(msg);
}

public static void main(String[] args) {
    ServerRunner.run(TestServer.class);
}

}

index.html

<html>
<style>
h1 {
    color: green;
    background-color: black;
}
p {
    color: gray;
    background-color: black;
}
div {
    color: gray;
    background-color: black;
}
body {
    color: gray;
    background-color: black;
}
</style>

<head>
<script src="file///jquery-1.8.2.min.js"></script>

<script>
    // tail effect
    function tailScroll() {
        if (document.getElementById("auto-scroll").checked) {
            var height = $("#log-container").get(0).scrollHeight;
            $("#log-container").animate({
                scrollTop: height
            }, 500);
        }

    }

    var auto_refresh_log = setInterval(
        function() {
            var statusDiv = document.getElementById("status");
            if (statusDiv.innerHTML.indexOf("Idle.") < 0) {
                $.get("log",
                    function(data, status) {
                        if (data) {
                            var logDiv = document.getElementById("log");
                            $("#log").append(data);
                            tailScroll();
                        };
                        }
                )
            }

        }, 500
    );

    var auto_refresh_status = setInterval(
        function() {
            $('#status').load("status").fadeIn("slow");
        }, 500);

    $(document).ready(function() {
        $('#suites').load("suites").fadeIn("slow");
        $('#status').load("status").fadeIn("slow");
        $('#war-info').load("war-info").fadeIn("slow");
        $('#log').load("log").fadeIn("slow");
        $('#build').load("build").fadeIn("slow");
        $("#results").hide();
        document.getElementById("auto-scroll").checked = true;
    });

    function getSuites() {
        $('#suites').load("suites").fadeIn("slow");
    }

    function runSuites() {
        //clearLog();
        var collection = document.getElementById("suites").getElementsByTagName('INPUT');
        var suiteList = "";
        for (var x = 0; x < collection.length; x++) {
            if (collection[x].type.toUpperCase() == 'CHECKBOX')
                if (collection[x].checked) {
                    suiteList = suiteList + " " + collection[x].id;
                }
        }
        //if no suite selected don't send 
        if (suiteList) {
            $.get("/get?tcl=" + suiteList.substring(1));
        }
    }

    function execute() {
        var text = $('textarea#gtester').val();
        //if no suite selected don't send 
        if (text) {
            $.get("/get?tcl=" + text);
            $('textarea#gtester').val('');
        }
    }

    function clearLog() {
        var logDiv = document.getElementById("log");
        logDiv.innerHTML = "";
    }

    function restartServer() {
        $.get("restart");
        window.location.reload(1);
    }

    function restartSolr() {
        $.get("restart-solr");
    }

    function restartSonar() {
        $.get("restart-sonar");
    }

    function pause() {
        $.get("pause");
    }

    function abort() {
        $.get("abort");
    }

    $("form#data").submit(function() {

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: window.location.pathname,
            type: 'POST',
            data: formData,
            async: false,
            success: function(data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    });

    function selectAll(cb){
        var collection = document.getElementById("suites").getElementsByTagName('INPUT');
        for (var x=0; x<collection.length; x++) {
                if (collection[x].type.toUpperCase()=='CHECKBOX')
                collection[x].checked = cb.checked;
        }
    }

    function toggleLog(){
        if ($('#log').is(':visible')) {   
             $('#log').hide();
             $('#results').show();
        }else{
            $('#log').show();    
            $('#results').hide();
        }
    }
</script>

</head>

<body >
<dev id="build" style="float:right;">   </dev>
<h1>Remote Test Service</h1>

<dev>

    <dev>
        <!--<button id="get-suites" onclick="getSuites()">Get latest suite list</button> -->
        <button id="run-suites" onclick="runSuites()" style="background: lightgreen; ">Run Tests</button>
        <button id="pause" onclick="pause()">Pause Test</button>
        <button id="abort" onclick="abort()">Abort Test</button> 
    </dev>

    <dev style="float=right">
        <button id="restart-test" onclick="restartServer()">Restart Test Server</button>
        <button id="restart-solr" onclick="restartSolr()">Restart Solr Server</button>
        <button id="restart-sonar" onclick="restartSonar()" >Restart Sonar Service</button>
    </dev>

     <h3>
     <b>Status:</b> 
     <dev id="status" > 

     </dev> 
     </h3>

</dev>

<dev id="main" >

    <dev style="width: 30%; float:left; height: 80%;  overflow: auto;">

        <dev>
            <hr>
          <h2>Banana Tests: </h2> 
          <input type="checkbox" id="selectAll" onclick='selectAll(this);'>Select All <br>     </input>    
        </dev>

        <hr>
        <dev id="suites" style="overflow-y: auto; white-space: nowrap;">

        </dev>

        <hr>

        <h3>WAR file Upload: </h3>
        <form id="datafiles" method="post" enctype="multipart/form-data">
            <input name="warfile" type="file" />
            <!-- <input type="text" name="Description" value="WAR file description..."  /> !-->
            <button>Submit</button>
        </form>
        <dev>
            <h3> <a href="file///D:/solr-4.8.1/searchlogs/webapps/banana.war" download>Download current War file</a></h3>
            <hr>
            <dev>
                <h3>Current WAR file info: </h3> </dev>
            <dev id="war-info"> </dev>
        </dev>
        <hr>
        <dev>
            <h3>
        <b>GTester Console:</b> <button id="execute" onclick="execute()">Execute</button>
        </h3>

            <textarea id="gtester" cols="50" rows="1" onkeydown="if (event.keyCode == 13) { execute(); return false; }">

            </textarea>

        </dev>
    </dev>

    <dev id="log-super-container" style="width: 70%; float:right; height: 80%;  overflow-y:auto; overflow-x:auto; white-space: nowrap;">
        <dev style="float:left;">
           <button id="clear-log" onclick="clearLog()" >Clear log</button>  
           <button id="toggle-log" onclick="toggleLog()" >Log/TCs state</button>
           <input type="checkbox" id="auto-scroll" >Auto scroll <br> </input>          
        </dev>
        <dev style="float:left;">

        </dev>

        <dev id="log-container" style="width: 100%; height: 95%; float:right; overflow:auto; ">
            <dev id="log" style="overflow: auto; white-space: nowrap;">

            </dev>
            <dev id="results" style="overflow: auto; white-space: nowrap;">
                <h3>Passed:<br></h3>
                <dev id="passed"> 
                    0
                </dev>
                <h3>Current:<br></h3>    
                <dev id="current"> 
                    0
                </dev>
                <h3>Failed:<br></h3>
                <dev id="failed"> 
                    0
                </dev>

            </dev>

        </dev>

    </dev>

</dev>

</body>

</html>

QtQuick2 - QML - create infinite moving line animation

Something like that?

Rectangle {
    width: 400
    height: 30
    anchors.centerIn: parent
    border.color: "grey"
    border.width: 1
    clip: true

    Rectangle {
        id: runner
        property double percent: 0.2
        width: parent.width * percent
        height: parent.height
        color: "orange"
        NumberAnimation on x { from: runner.width * (-1); to: 400; duration: 2000; loops: Animation.Infinite }
    }
}

---

Related Topics