flask でマウルスクロールで画像を入れ替えて閲覧

これまでの内視鏡閲覧は、ubuntu server 上にある php プログラムにクライアントからアクセスして検査IDを特定すると、該当する画像ファイル（jpg）が NAS から ubuntu server にダウンロードされてその画像を見ていました。

それだけならば python よりも php の方が簡単なのですが、もっと他の機能を持たせようと思うと　dicom のタグ情報を読み込む必要があるので、やはり python を使うしかないと思います。

flask プログラム
データ一覧
マウススクロールで画像を閲覧
flask から Javascript へ配列を渡す

flask プログラム

esbrowse.py


import threading,webbrowser
import os
from flask import Flask, render_template, redirect, request
from ext_py.dbshow import DB_show

app = Flask(__name__)

@app.route('/')
def menu():
    return render_template('home.html', title='FLASK Menu') 
    
@app.route('/alldata')   
def alldata():
    dbs = DB_show()
    dbinfos = dbs.selectall()
    return render_template('alldata.html', title='alldata', alldata=dbinfos) 

@app.route('/browse/')
def browse(pk):
    jpgarr = []
    for root, dir, files in os.walk('./static/jpgs'):
        for file_ in files:
            full_path = os.path.join(root, file_)
            ext_without_dot = os.path.splitext(full_path)[1][1:]
            if ext_without_dot == 'jpg':
                jpgarr.append(os.path.basename(full_path))
    return render_template('showImg.html', imgs = jpgarr )
    
if __name__ == "__main__": 
    threading.Timer(1.0, lambda: webbrowser.open('http://localhost:5000') ).start()
    app.run(debug=False)

外部ファイルは

dbshow.py


import pymysql
import os,shutil
import paramiko
import subprocess
from ftplib import FTP

class DB_show():
 
    def __init__( self ):    
        self.host = 'localhost'
        self.user = 'root'
        self.password = 'pass'
        self.db = 'es'
              
    def selectall( self ):
        conn = pymysql.connect(host=self.host,
            user=self.user,
            db=self.db,
            password=self.password,
            cursorclass=pymysql.cursors.DictCursor)
        try:
            with conn.cursor() as cursor:
                sql = "SELECT * FROM mmr;"
                cursor.execute( sql )
                return cursor.fetchall()
            conn.commit()
        finally:
            conn.close()

データ一覧

mysql から内視鏡データを読み込んで全部を表示します。
flask は久しぶりなのでエラーが続出します。

alldata.html


<!doctype html>
<html>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mystyle.css') }}">
<script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
<script type="text/javascript">
$(function(){
	$('td').click(function() { 
		var pk = $(this).closest('tr').children('td').eq(0).text();	
		window.open( "/browse/" + pk, '_self' ) ;
	});
	$('table.datashow tr').hover(function() {
		$(this).addClass('hover');
	},function() {
		$(this).removeClass('hover');
	})
});
</script>
</head>
<body>
<div id="container">
	<div id="main">
	
{% block content %}
<h1>内視鏡検査一覧</h1>

<table class="datashow">
	<tr><th>検査ID</th><th>日付</th><th>カルテ番号</th><th>氏名</th><th>生年月日</th><th>性別</th><th>コメント</th><th>処置</th><th>部位</th><th>病理</th><th>医師</th></tr>
	{% for eachdata in alldata %}
		<tr>
			<td>{{ eachdata.studyID}}</td><td>{{ eachdata.studyDate}}</td><td>{{ eachdata.karteNo}}</td><td>{{ eachdata.ptName}}</td>
			<td>{{ eachdata.birthDate}}</td><td>{{ eachdata.gender}}</td><td>{{ eachdata.comment if eachdata.comment}}</td><td>{{ eachdata.proced if eachdata.proced}}</td>
			<td>{{ eachdata.descript if eachdata.descript}}</td><td>{{ eachdata.patho if eachdata.patho}}</td><td>{{ eachdata.doctor if eachdata.doctor}}</td>
		</tr>
	{% endfor %}
</table>
{% endblock %}

	</div>	
</div>
</body>
</html>

検査一覧が表示されるのでどれかを選択すると、検査 ID が /browse に飛ぶようになっています。

マウススクロールで画像を閲覧

マウスをスクロールすると画像が入れ替わるようにします。

showImg.html


<!doctype html>
<html>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mystyle.css') }}">
<script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
<script type="text/javascript">
$(function(){
	var ImgFileArr = {{ imgs | tojson }};
	var startImg = ImgFileArr[0] ;
	var widowWidth = $(window).width() ;
	$("#ImgDisplay").attr("src", "{{ url_for('static',filename='jpgs/') }}" + startImg ) ;
	displayImage(ImgFileArr) ;
});

function displayImage(ImgFileArr){
	var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).on(mousewheelevent,function(e){
		e.preventDefault();
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta < 0){
			var NewPath = getPlusNum(ImgFileArr) ;		//	下にスクロールした時
		} else {
			var NewPath = getMinusNum(ImgFileArr) ;		//	上にスクロールした時
		}
		$("#ImgDisplay").attr("src", "{{ url_for('static',filename='jpgs/') }}" + NewPath ) ;
	});
}

function getPlusNum(ImgFileArr){
	var OldPath = $("#ImgDisplay").attr('src') ;
	var patharr = OldPath.split('/');
	var bn = patharr[patharr.length -1]; 	
	var suffix = $.inArray(bn, ImgFileArr)
	if ( suffix == ImgFileArr.length-1 ) {
		var NewPath = ImgFileArr[ImgFileArr.length-1] ;
	}else {
		var NewPath = ImgFileArr[suffix+1] ;
	}
	return NewPath;
}

function getMinusNum(ImgFileArr){
	var OldPath = $("#ImgDisplay").attr('src') ;
	var patharr = OldPath.split('/');
	var bn = patharr[patharr.length -1]; 	
	var suffix = $.inArray(bn, ImgFileArr)
	if ( suffix == 0) {
		var NewPath = ImgFileArr[0] ;
	}else {
		var NewPath = ImgFileArr[suffix-1] ;
	}
	return NewPath;
}

</script>
</head>
<body>
<div id="container">
	<div id="main">

    <img id="ImgDisplay" alt="." align="middle" />

	</div>	
</div>
</body>
</html>

function displayImage(ImgFileArr) 以下は php では外部 js にしていたのですが、flask で外部化しようとするとエラーになります。解決策はあるはずですが取り敢えずこのままにします。

ここでは、 pk は無効になっています。

flask から Javascript へ配列を渡す

これは flask ではとても簡単です。

flask 側で以下のようにして、


return render_template('showImg.html', imgs = jpgarr )

javascript 側で受けます。


var ImgFileArr = {{ imgs | tojson }};