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__)

FRAMES = [
    {'frame_name': '1.png'},
    {'frame_name': '2.png'},
    {'frame_name': '3.png'},
    {'frame_name': '4.png'},
    {'frame_name': '5.png'},
    {'frame_name': '6.png'},
    {'frame_name': '7.png'},
    {'frame_name': '8.png'},
    {'frame_name': '9.png'},
    {'frame_name': '10.png'},
]

@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

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

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

## index.html
<html>

<head>
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    function getTaskName() {
        return $("#current").attr("task-name");
    }

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

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

    function getFrameName() {
        return $("#frame-name-" + getFrameNumber()).attr("name");
    }

    function loadImage() {
        $("#image").attr("src", "/static/data/" + getTaskName() + "/" + getFrameName());
        $("#current").html(getFrameNumber());
    }

    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>
    <img id="image" src="" class="img-thumbnail" width="64" height="64"/>
    <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="{{ frames|length }}">0</span>
    <span>/</span>
    <span>{{ frames|length }}</span>
    <button id="next-img">Next</button>
    <button id="last-img">Last</button>

    <!-- here, you can store all the frame names on the client side -->
    <!-- notice that 'frames' parameter from view function is no longer available on the client side on you render it -->
    <!-- so, this way is kind of a transformation of that information to make it possible to store on the client side -->
    {% for frame in frames %}
        <div id="frame-name-{{ loop.index }}" name="{{ frame.frame_name }}" hidden="hidden"></div>
    {% endfor %}

</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__)

	FRAMES = [
	{'frame_name': '1.png'},
	{'frame_name': '2.png'},
	{'frame_name': '3.png'},
	{'frame_name': '4.png'},
	{'frame_name': '5.png'},
	{'frame_name': '6.png'},
	{'frame_name': '7.png'},
	{'frame_name': '8.png'},
	{'frame_name': '9.png'},
	{'frame_name': '10.png'},
	]

	@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

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

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

	<head>
	<title>Example</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	function getTaskName() {
	return $("#current").attr("task-name");
	}

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

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

	function getFrameName() {
	return $("#frame-name-" + getFrameNumber()).attr("name");
	}

	function loadImage() {
	$("#image").attr("src", "/static/data/" + getTaskName() + "/" + getFrameName());
	$("#current").html(getFrameNumber());
	}

	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>
	<img id="image" src="" class="img-thumbnail" width="64" height="64"/>
	<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="{{ frames\|length }}">0</span>
	<span>/</span>
	<span>{{ frames\|length }}</span>
	<button id="next-img">Next</button>
	<button id="last-img">Last</button>

	<!-- here, you can store all the frame names on the client side -->
	<!-- notice that 'frames' parameter from view function is no longer available on the client side on you render it -->
	<!-- so, this way is kind of a transformation of that information to make it possible to store on the client side -->
	{% for frame in frames %}
	<div id="frame-name-{{ loop.index }}" name="{{ frame.frame_name }}" hidden="hidden"></div>
	{% endfor %}

	</body>

	</html>