Difference between revisions of "PyFlaskBootstrap4"

From BITPlan Wiki
Jump to navigation Jump to search
Line 84: Line 84:
 
</source>
 
</source>
 
= Server Sent Events =
 
= Server Sent Events =
−
== Progressbar Example ==
+
== Progressbar and time display Example ==
 +
=== Client Side Javascript / HTML ===
 +
<source lang='html'>
 +
% extends 'base.html' %}
 +
{% block content %}
 +
<h3>Server Sent Events demo</h3>
 +
<div id="event_div">Watch this space...</div>
 +
<div id="progress1" class="progress">
 +
  <div class="progress-bar" style="width:0%"></div>
 +
</div>
 +
<pre id="sse_json"></pre>
 +
<script>
 +
function fillContainerFromSSE(id,url) {
 +
var targetContainer = document.getElementById(id);
 +
var eventSource = new EventSource(url)
 +
  eventSource.onmessage = function(e) {
 +
  targetContainer.innerHTML = e.data;
 +
};
 +
};
 +
function setProgressFromSSE(pid,debugId,url) {
 +
var eventSource = new EventSource(url)
 +
var debugContainer = document.getElementById(debugId);
 +
var progressContainer=document.getElementById(pid);
 +
  eventSource.onmessage = function(event) {
 +
var data=JSON.parse(event.data);
 +
  debugContainer.innerHTML = event.data;
 +
  progressContainer.setAttribute("style","width:"+data.progress+"%");
 +
};
 +
}
 +
fillContainerFromSSE("event_div","/eventfeed");
 +
setProgressFromSSE("progress1","sse_json","/progressfeed");
 +
</script>
 +
{% endblock %}
 +
</source>
 
=== Server Side Flask Code ===
 
=== Server Side Flask Code ===
 
<source lang='python'>
 
<source lang='python'>
 
...
 
...
 +
        @app.route('/events')
 +
        def test_events():
 +
            return self.eventExample()
 +
       
 +
        @app.route('/eventfeed')
 +
        def test_eventFeed():
 +
            return self.eventFeed()
 +
       
 
         @app.route('/progressfeed')
 
         @app.route('/progressfeed')
 
         def test_progressFeed():
 
         def test_progressFeed():
 
             return self.progressFeed()
 
             return self.progressFeed()
 
...
 
...
−
def progressFeed(self):
+
    def getTimeEvent(self):
 +
        '''
 +
        get the next time stamp
 +
        '''
 +
        time.sleep(1.0)
 +
        s=datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S')
 +
        return s   
 +
   
 +
    def progressFeed(self):
 
         '''
 
         '''
 
         feed progress info as json  
 
         feed progress info as json  
Line 105: Line 154:
 
         sse=self.sseBluePrint
 
         sse=self.sseBluePrint
 
         return sse.streamFunc(progress)  
 
         return sse.streamFunc(progress)  
 +
   
 +
    def eventFeed(self):
 +
        '''
 +
        create a Server Sent Event Feed
 +
        '''
 +
        sse=self.sseBluePrint
 +
        # stream from the given function
 +
        return sse.streamFunc(self.getTimeEvent)
 +
               
 +
    def eventExample(self):
 +
        return render_template("event.html")
 
</source>
 
</source>
  

Revision as of 19:39, 12 February 2021

OsProject
edit
id  PyFlaskBootstrap4
state  
owner  WolfgangFahl
title  Flask + Bootstrap 4 static components and templates for webprojects
url  https://github.com/WolfgangFahl/pyFlaskBootstrap4
version  0.0.4
description  
date  2021/01/09
since  
until  

What is it?

A python library to get

as a combined solution with some extra functionality. This project builds on

and adds support for

  1. SQLAlchemy-Utils custom data types and utility functions
  2. WTForms data validation, CSRF protection, I18N and more
  3. pydevd remote debugging support
  4. Using flask inside class
  5. Widgets
  6. login blueprint
  7. datatables
  8. Server Sent Event Support

Demos

see

Installation

pip install pyFlaskBootstrap4

Tutorial

HelloWeb application

see helloweb.py 

'''
Created on 2021-01-08

This is a demo application for https://github.com/WolfgangFahl/pyFlaskBootstrap4

@author: wf
'''
from fb4.app import AppWrap
from flask import render_template

class HelloWeb(AppWrap):
    '''
    a sample web application
    '''

    def __init__(self):
        '''
        Constructor
        '''
        super().__init__()
        
    def home(self):
        '''
        render the home page of the HelloWeb application
        '''
        html = render_template("bootstrap.html", title="HelloWeb demo application",content="Welcome to the Flask + Bootstrap4 Demo web application",error=None)
        return html
    
helloWeb=HelloWeb()
app=helloWeb.app 
@app.route('/')
def home():
    return helloWeb.home()

if __name__ == '__main__':
    parser=helloWeb.getParser("Flask + Bootstrap4 Demo Web Application")
    args=parser.parse_args()
    helloWeb.optionalDebug(args)
    helloWeb.run(args)

Server Sent Events

Progressbar and time display Example

Client Side Javascript / HTML

% extends 'base.html' %}
{% block content %}
<h3>Server Sent Events demo</h3>
<div id="event_div">Watch this space...</div>
<div id="progress1" class="progress">
  <div class="progress-bar" style="width:0%"></div>
</div> 
<pre id="sse_json"></pre>
<script>
	function fillContainerFromSSE(id,url) {
		var targetContainer = document.getElementById(id);
		var eventSource = new EventSource(url)
  		eventSource.onmessage = function(e) {
  			targetContainer.innerHTML = e.data;
		};
	};
	function setProgressFromSSE(pid,debugId,url) {
		var eventSource = new EventSource(url)
		var debugContainer = document.getElementById(debugId);
		var progressContainer=document.getElementById(pid);
  		eventSource.onmessage = function(event) {
			var data=JSON.parse(event.data);
  			debugContainer.innerHTML = event.data;
  			progressContainer.setAttribute("style","width:"+data.progress+"%");
		};
	}
	fillContainerFromSSE("event_div","/eventfeed");
	setProgressFromSSE("progress1","sse_json","/progressfeed");
</script>
{% endblock %}

Server Side Flask Code

...
        @app.route('/events')
        def test_events():
            return self.eventExample()
        
        @app.route('/eventfeed')
        def test_eventFeed():
            return self.eventFeed()
        
        @app.route('/progressfeed')
        def test_progressFeed():
            return self.progressFeed()
...
    def getTimeEvent(self):
        '''
        get the next time stamp
        '''
        time.sleep(1.0)
        s=datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S')
        return s    
    
    def progressFeed(self):
        '''
        feed progress info as json 
        '''
        self.pc=0
        def progress():
            time.sleep(0.5)
            self.pc=(self.pc+5) % 100
            pcdict={"progress":self.pc}
            return json.dumps(pcdict)
            
        sse=self.sseBluePrint
        return sse.streamFunc(progress) 
    
    def eventFeed(self):
        '''
        create a Server Sent Event Feed
        '''
        sse=self.sseBluePrint
        # stream from the given function
        return sse.streamFunc(self.getTimeEvent)
                
    def eventExample(self):
        return render_template("event.html")

Links

Retrieved from "https://wiki.bitplan.com/index.php?title=PyFlaskBootstrap4&oldid=13815"