nitred/about_web_utils.md

## about_web_utils.md

      
    Raw
  

              about_web_utils.md
            
          
    About

Utility function and snippets for the web
Table of Contents


Flask PNG snippet
Simple drawingboard


## web_utils_drawingboard.md

      
    Raw
  

              web_utils_drawingboard.md
            
          
    Source


https://github.com/Leimi/drawingboard.js

Prerequisites

Download the following files and serve them in a static folder.

drawingboard.css
drawingboard.js
JQuery

Simple Drawingboard HTML

<html>
<head>
    <link type="text/css" rel="stylesheet" href="static/drawingboard.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="static/drawingboard.js"></script>
</head>

<body>

    <div align="center">
        <h1>Simple DrawingBoard!</h1>
    </div>

    <div align="center">
        <div id="simple-board"></div>
    </div>

    <style>
    	#simple-board {
    		width: 800px;
    		height: 400px;
    	}
    </style>
    <script>
        $(document).ready(function() {
            var simpleBoard = new DrawingBoard.Board('simple-board', {
                controls: false,
                webStorage: false
            });
        });
    </script>

</body>
</html>

  
## web_utils_flask_png.md

      
    Raw
  

              web_utils_flask_png.md
            
          
    Server.py

"""Taken parially from: https://gist.github.com/wilsaj/862153"""
import base64
from flask import Flask, make_response, render_template

app = Flask(__name__)

# DO OTHER STUFF HERE ...


@app.route('/png_page', methods=['GET'])
def png_page():
    """Endpoint that renders and HTML page that requests for a png image."""
    return render_template('png-page.html')


@app.route('/get_png', methods=['GET'])
def get_png():
    """Endpoint that returns PNG Image as byte64 bytestring."""
    filename = 'path/to/image.png'
    with open(filename, "rb") as image_file:
        encoded_bytes = base64.b64encode(image_file.read())

    response = make_response(encoded_bytes)
    response.headers['Content-Type'] = 'image/png'
    return response
png-page.html

<!-- Author: Maxim Maltsev (https://github.com/mmaltsev) --> 
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
  
<body>
    <div align="center">
        <img src="" id="resultImage" />
    </div>

    <script>
        $(document).ready(function() {
            $.get("{{ url_for('get_png') }}", function(data) {
                $('#resultImage').attr('src', 'data:image/png;base64,' + data);
                console.log( "Load was performed." );
            });
        });
    </script>
</body>
</html>