Added images carousel web widget

This commit is contained in:
Fabio Manganiello 2018-05-05 04:37:22 +02:00
parent e1e4d824ad
commit ac958f98da
8 changed files with 102 additions and 8 deletions

1
.gitignore vendored
View file

@ -8,3 +8,4 @@ dist/
*.egg-info/
package.sh
.pypirc
platypush/backend/http/static/resources/*

View file

@ -3,6 +3,7 @@ import inspect
import logging
import json
import os
import re
import time
from threading import Thread
@ -235,6 +236,29 @@ class HttpUtils(object):
raise RuntimeError('Constraint violation: should be 1 <= columns <= 12, ' +
'got columns={}'.format(columns))
@staticmethod
def search_directory(directory, *extensions, recursive=False):
files = []
if recursive:
for root, subdirs, files in os.walk(directory):
for file in files:
if not extensions or os.path.splitext(file)[1].lower() in extensions:
files.append(os.path.join(root, file))
else:
for file in os.listdir(directory):
if not extensions or os.path.splitext(file)[1].lower() in extensions:
files.append(os.path.join(directory, file))
return files
@classmethod
def search_web_directory(cls, directory, *extensions):
directory = re.sub('^/+', '', directory)
basedir = os.path.dirname(inspect.getfile(cls))
results = cls.search_directory(os.path.join(basedir, directory), *extensions)
return [item[len(basedir):] for item in results]
# vim:sw=4:ts=4:et:

View file

@ -3,14 +3,11 @@ body {
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#widgets-container {
padding: 2em;
}
.widget {
background: white;
margin-top: 2em;
border-radius: 5px;
height: 25em;
height: 22.5em;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
}

View file

@ -0,0 +1,8 @@
.carousel {
height: 100%;
background-color: black;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}

View file

@ -0,0 +1,37 @@
$(document).ready(function() {
var $imgElement = $('.image-carousel').find('.carousel'),
config = window.widgets['image-carousel'],
images = config.imageUrls,
processedImages = 0;
var shuffleImages = function() {
for (var i=images.length-1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var x = images[i];
images[i] = images[j];
images[j] = x;
}
};
var refreshImage = function() {
$imgElement.css('background-image', "url('" + images[processedImages++] + "')");
if (processedImages == images.length-1) {
shuffleImages();
processedImages = 0;
}
};
var initWidget = function() {
shuffleImages();
refreshImage();
setInterval(refreshImage,
'refresh_seconds' in config ? config.refresh_seconds * 1000 : 15000);
};
var init = function() {
initWidget();
};
init();
});

View file

@ -0,0 +1 @@
Place in this folder the static resources you want to serve over HTTP (images, fonts etc.)

View file

@ -17,20 +17,27 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/pushbullet.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/assistant.google.js') }}"></script>
<script type="text/javascript">
window.websocket_port = {% print(websocket_port) %}
window.websocket_port = {% print(websocket_port) %};
{% if token %}
window.token = '{% print(token) %}'
window.token = '{% print(token) %}';
{% else %}
window.token = undefined
window.token = undefined;
{% endif %}
window.widgets = {{ config['widgets'] | safe }};
</script>
</head>
<body>
<main>
<div id="widgets-container">
{% set used_columns = [0] %}
{% for widget_name, widget in config['widgets'].items() %}
{% if used_columns[0] % 12 == 0 %}
<div class="row">
{% endif %}
<div class="widget {% print(utils.widget_columns_to_html_class(widget['columns'])) %}
{% print(widget_name) %}"
id="{% print(widget['id'] if 'id' in widget else widget_name) %}">
@ -38,6 +45,13 @@
{% include 'widgets/' + widget_name + '.html' %}
{% endwith %}
</div>
{# increment counter #}
{% if used_columns.append(used_columns.pop() + widget['columns']) %}{% endif %}
{% if used_columns[0] % 12 == 0 %}
</div>
{% endif %}
{% endfor %}
</div>

View file

@ -0,0 +1,12 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/widgets/image-carousel.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/widgets/image-carousel.css') }}"></script>
{% set images = utils.search_web_directory(
widget['images_path'], '.jpg', 'jpeg', '.png') %}
<script type="text/javascript">
window.widgets['image-carousel'].imageUrls = {{ images|safe }};
</script>
<div class="carousel"></div>