yasinyildiza/app.py

## app.py
from flask import Flask, request, render_template

DEBUG = True
SECRET_KEY = 'your_secure_secret_key'

app = Flask(__name__)
app.config.from_object(__name__)

@app.route('/')
def index():
    task_name = request.args.get('task_name', 'default')

    try:
        frame_number = int(request.args.get('frame_number'))
    except (ValueError, TypeError):
        frame_number = 1

    frame_count = 10

    return render_template('index.html', task_name=task_name, frame_number=frame_number, frame_count=frame_count)

@app.route('/image')
def image():
    task_name = request.args.get('task_name')

    try:
        frame_number = int(request.args.get('frame_number'))
    except (ValueError, TypeError):
        frame_number = 1

    # this line is just for example
    # run your query to get frame_name
    frame_name = str(frame_number) + '.png'

    return render_template('image.html', task_name=task_name, frame_name=frame_name)

if __name__ == '__main__':
    app.run(debug=True)

## image.html
<img id="label" src="{{url_for('static', filename= 'data/' + task_name + '/' + frame_name) }}" class="img-thumbnail" width="64" height="64" />

## index.html
<html>

<head>
    <title>Example</title>
    <style>
    #image {
        width: 64px;
        height: 64px;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    function getImageUrl() {
        return $("#current").attr("image-url");
    }

    function getTaskName() {
        return $("#current").attr("task-name");
    }

    function getFrameCount() {
        return parseInt($("#current").attr("frame-count"));
    }

    function getFrameNumber() {
        return parseInt($("#current").attr("frame-number"));
    }

    function loadImage() {
        $("#image").html("loading");
        $.ajax({
            url: getImageUrl(),
            type: "get",
            data: {
                task_name: getTaskName(),
                frame_number: getFrameNumber()
            },
            success: function(response) {
                $("#current").html(getFrameNumber());
                $("#image").html(response);
            },
            error: function(xhr) {
                $("#image").html("an error occured");
            }
        });
    }

    function updateImage(frame_number) {
        var frame_count = getFrameCount();
        if(frame_number <= 0) {
            alert("you are viewing first image");
        } else if(frame_number > frame_count) {
            alert("you are viewing last image");
        } else {
            $("#current").attr("frame-number", frame_number);
            loadImage();
        }
    }

    $(document).ready(function() {
        $("#first-img").click(function() {
            updateImage(1);
        });

        $("#prev-img").click(function() {
            updateImage(getFrameNumber()-1);
        });

        $("#next-img").click(function() {
            updateImage(getFrameNumber()+1);
        });

        $("#last-img").click(function() {
            updateImage(getFrameCount());
        });

        loadImage();
    });
    </script>
</head>

<body>
    <h4>Task Name: {{ task_name }}</h4>
    <div id="image"></div>
    <button id="first-img">First</button>
    <button id="prev-img">Prev</button>
    <span id="current" task-name="{{ task_name }}" frame-number="{{ frame_number }}" frame-count="{{ frame_count }}" image-url="{{ url_for('image') }}">0</span>
    <span>/</span>
    <span>{{ frame_count }}</span>
    <button id="next-img">Next</button>
    <button id="last-img">Last</button>

</body>

</html>
	from flask import Flask, request, render_template

	DEBUG = True
	SECRET_KEY = 'your_secure_secret_key'

	app = Flask(__name__)
	app.config.from_object(__name__)

	@app.route('/')
	def index():
	task_name = request.args.get('task_name', 'default')

	try:
	frame_number = int(request.args.get('frame_number'))
	except (ValueError, TypeError):
	frame_number = 1

	frame_count = 10

	return render_template('index.html', task_name=task_name, frame_number=frame_number, frame_count=frame_count)

	@app.route('/image')
	def image():
	task_name = request.args.get('task_name')

	try:
	frame_number = int(request.args.get('frame_number'))
	except (ValueError, TypeError):
	frame_number = 1

	# this line is just for example
	# run your query to get frame_name
	frame_name = str(frame_number) + '.png'

	return render_template('image.html', task_name=task_name, frame_name=frame_name)

	if __name__ == '__main__':
	app.run(debug=True)
	<html>

	<head>
	<title>Example</title>
	<style>
	#image {
	width: 64px;
	height: 64px;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	function getImageUrl() {
	return $("#current").attr("image-url");
	}

	function getTaskName() {
	return $("#current").attr("task-name");
	}

	function getFrameCount() {
	return parseInt($("#current").attr("frame-count"));
	}

	function getFrameNumber() {
	return parseInt($("#current").attr("frame-number"));
	}

	function loadImage() {
	$("#image").html("loading");
	$.ajax({
	url: getImageUrl(),
	type: "get",
	data: {
	task_name: getTaskName(),
	frame_number: getFrameNumber()
	},
	success: function(response) {
	$("#current").html(getFrameNumber());
	$("#image").html(response);
	},
	error: function(xhr) {
	$("#image").html("an error occured");
	}
	});
	}

	function updateImage(frame_number) {
	var frame_count = getFrameCount();
	if(frame_number <= 0) {
	alert("you are viewing first image");
	} else if(frame_number > frame_count) {
	alert("you are viewing last image");
	} else {
	$("#current").attr("frame-number", frame_number);
	loadImage();
	}
	}

	$(document).ready(function() {
	$("#first-img").click(function() {
	updateImage(1);
	});

	$("#prev-img").click(function() {
	updateImage(getFrameNumber()-1);
	});

	$("#next-img").click(function() {
	updateImage(getFrameNumber()+1);
	});

	$("#last-img").click(function() {
	updateImage(getFrameCount());
	});

	loadImage();
	});
	</script>
	</head>

	<body>
	<h4>Task Name: {{ task_name }}</h4>
	<div id="image"></div>
	<button id="first-img">First</button>
	<button id="prev-img">Prev</button>
	<span id="current" task-name="{{ task_name }}" frame-number="{{ frame_number }}" frame-count="{{ frame_count }}" image-url="{{ url_for('image') }}">0</span>
	<span>/</span>
	<span>{{ frame_count }}</span>
	<button id="next-img">Next</button>
	<button id="last-img">Last</button>

	</body>

	</html>