amol-mandhane / htmlpy Goto Github PK

htmlPy is a wrapper around PySide's QtWebKit library. It helps with creating beautiful GUIs using HTML5, CSS3 and Javascript for standalone Python applications.

License: MIT License

Python 90.91% JavaScript 5.51% HTML 3.58%

css gui html javascript python

htmlpy's Introduction

htmlPy

HTML5-CSS3-Javascript based GUI library in Python

htmlPy is a wrapper around PySide's QtWebKit library. It helps with creating beautiful GUIs using HTML5, CSS3 and Javascript for standalone Python applications. It is built on Qt which makes it highly customizable and cross-platform. htmlPy is compatible with both Python2 and Python3. It can be used with any python library or environment like django, flask, scipy, virtualenv etc. You can use front-end libraries and frameworks like bootstrap, jQuery, jQuery UI etc. and create GUIs for your applications in no time.

Documentation

The documentation is hosted at http://htmlpy.readthedocs.org/. It contains installation instructions, tutorials, reference guide, compatibility details, and more.

Example

Back-end
back_end.py

            
import htmlPy
class BackEnd(htmlPy.Object):
def __init__(self, app):
    super(BackEnd, self).__init__()
    self.app = app

@htmlPy.Slot()
def say_hello_world(self):
    self.app.html = u"Hello, world"
                </code>

            </pre>
    </td>
    <td>
    <h3>GUI <br> <small class="typewriter">main.py</small></h3>
        <pre>
            <code class="language-python">

import htmlPy
from back_end import BackEnd
app = htmlPy.AppGUI(
title=u"Sample application")
app.maximized = True
app.template_path = "."
app.bind(BackEnd(app))
app.template = ("index.html", {})
if name == "main":
app.start()

Front-end
index.html


<html>
<body>
<a
href="BackEnd.say_hello_world"
data-bind="true">
Click to say "Hello, world"
</a>
</body>
</html>

Code

htmlPy source code is hosted on GitHub, tested on Travis CI and released on PyPI.

htmlpy's People

Contributors

Stargazers

Watchers

Forkers

mikeatm wombatpm bendtherules pratheeraja luis-wang dimpurr miguelriosr phaethom skynv carlitoselmago desnotes wzugang ahorjia nosmokingbandit ronaldorodriguez vishalbty davidomil liutongju leandro-otani snowwalkerj kaviarasankk nuno-andre jack2949 ninoninkovic antlaw0 ahuge benplus1 alexumnov jorviizheng timozerrer apimyself xielechuan junnest fvwegen eh7pg78i rt2yrru dgreyling nilsonec2015 alphachoi ccw33 indigos33k3r telemansoft zhangjialing1117 lmdu ro9ueadmin hawbox hectorv72 listenwhy ra2003 nandakishore2009 python-repository-hub forky-mcforkface gkuo06

htmlpy's Issues

Can't bind django project/app.

Can't seem to bind a django app + project to htmlpy, and the docs are missing a working example of this. Tried binding get_wsgi_application() from django.core.wsgi to htmlPy.AppGUI instance to no avail.

HTML features lost after re-calling app with template

Hi,

I am trying to re-call the app to push new data from backend based on background events. SO I made a Thread Call with update function. This updates the content and data. But HTML is lost after this. It becomes plain text.

def update(self,content):
        with self.state:
            self.app.template = ("cards.html", {'m1':content,'m2':self.app.static_path})

Someone please help

How to open new window?

I would like to show Settings menu into a child window. It's possible opening a new window through htmlPy? How do I do that?

Can't Href to Other HTML Template Pages

I cannot navigate to other pages using the <./a> tag without right clicking and pressing "Open Link". Due to the circumstances of my project, I must have navigation completely performed with a normal left-click, as with a regular HTML page.

Installation from pip in a virtualenv does not include binder.js

I installed htmlpy from pip inside a virtualenv but it didn't include the binder.js file in virtual_env/local/lib/python2.7/site-packages/htmlPy.
Some extra information from pip show htmlPy:

Metadata-Version: 1.1
Name: htmlPy
Version: 2.0.2
Summary: A wrapper around PySide's QtWebKit library which helps developer create beautiful UI with HTML5, CSS and Javascript for standalone applications.
Home-page: http://pypi.python.org/pypi/htmlPy/
Author: Amol Mandhane
Author-email: [email protected]
License: LICENSE.txt
Location: /home/user/Documents/htmlpy_prj/virtual_env/lib/python2.7/site-packages
Requires:

(I don't know if here is the right place to submit this issue)

Bootstrap grid system not working!

htmlPy is great but if i can use bootstrap grid system this will be great but i cant :(

How enable CORS for angularjs in htmlPy?

I am trying to make Angular SPA based GUI. The ui-view gives following error. Is there a way to allows CORS?

XMLHttpRequest cannot load main.html. Cross origin requests are only supported for HTTP.

Loading CSS/JS assets locally without template replacement

I have this header for my index.html template:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Testing pyreport</title>
        <link href="css/base.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/c3.css" rel="stylesheet">

The python module test.py is:

import htmlPy
import os

app = htmlPy.AppGUI(title=u"JUST TESTIN'", maximized=False, developer_mode=True)

app.template_path = os.path.abspath(".")
app.static_path = os.path.abspath(".")

app.template = ("index.html", {})

app.start()

Both test.py, index.html and the css/ directory are in the same base path, but when I issue the python test.py, the HTML is rendered ok, but no styling is loaded/applied.

Is there a way to achieve this without use Jinja replacing like the docs point out? (ie <link rel="stylesheet" href="{{ 'css/base.css'|staticfile }}">)

Segmentation fault every time I call a javascript function

Every time I call

app.evaluate_javascript("update_crono('0')")

I get this

1 0x7efc580e0615 /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(_ZN3WTF10StringImplD1Ev+0x355) [0x7efc580e0615]
2 0x7efc580519e8 /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(+0x18349e8) [0x7efc580519e8]
3 0x7efc57ee506e /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(+0x16c806e) [0x7efc57ee506e]
4 0x7efc57fd23f3 /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(ZN3JSC8evaluateEPNS_9ExecStateERKNS_10SourceCodeENS_7JSValueEPS5+0x153) [0x7efc57fd23f3]
5 0x7efc56ce787e /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(+0x4ca87e) [0x7efc56ce787e]
6 0x7efc56ce7ba3 /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(+0x4caba3) [0x7efc56ce7ba3]
7 0x7efc56c80b09 /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(+0x463b09) [0x7efc56c80b09]
8 0x7efc56c12ee2 /usr/lib/x86_64-linux-gnu/libQtWebKit.so.4(_ZN9QWebFrame18evaluateJavaScriptERK7QString+0x242) [0x7efc56c12ee2]
9 0x7efc58bd797b /usr/lib/python2.7/dist-packages/PySide/QtWebKit.so(+0x2797b) [0x7efc58bd797b]
10 0x4cdcce python(PyEval_EvalFrameEx+0x131e) [0x4cdcce]
11 0x4cd4e2 python(PyEval_EvalFrameEx+0xb32) [0x4cd4e2]
12 0x4e7cc8 python() [0x4e7cc8]
13 0x4cf239 python(PyEval_EvalFrameEx+0x2889) [0x4cf239]
14 0x4cd4e2 python(PyEval_EvalFrameEx+0xb32) [0x4cd4e2]
15 0x4cd4e2 python(PyEval_EvalFrameEx+0xb32) [0x4cd4e2]
16 0x4e7cc8 python() [0x4e7cc8]
17 0x50b968 python() [0x50b968]
18 0x4d437b python(PyEval_CallObjectWithKeywords+0x6b) [0x4d437b]
19 0x5bdcd2 python() [0x5bdcd2]
20 0x7efc605896aa /lib/x86_64-linux-gnu/libpthread.so.0(+0x76aa) [0x7efc605896aa]
21 0x7efc602beeed /lib/x86_64-linux-gnu/libc.so.6(clone+0x6d) [0x7efc602beeed]
[1] 13301 segmentation fault (core dumped) python app.py

Can't pass parameters to backend functions

Using font icons inside CSS

I'm going to use a font-face inside my html file, like this:

<!DOCTYPE html>
<html>
<head>
    <style>
        @font-face {
          font-family: 'Material Icons';
          font-style: normal;
          font-weight: 400;
          src: url({{ 'fonts/material.woff2'|staticfile }}) format('woff2');
        }
        .material-icons {
          font-family: 'Material Icons';
          font-weight: normal;
          font-style: normal;
          font-size: 24px;
          line-height: 1;
          letter-spacing: normal;
          text-transform: none;
          display: inline-block;
          white-space: nowrap;
          word-wrap: normal;
          direction: ltr;
          -webkit-font-feature-settings: 'liga';
          -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body>
<i class="material-icons prefix">account_circle</i>
</body>
</html>

Also static path is set in this line :
app.static_path = os.path.join(BASE_DIR, "static/")
And folder structure is like this :

main.py
templates:
- index.html
static:
- fonts:
  - material.woff2

I've tried loading css and js files and they are working correctly but font face is not loaded thus i see just a text 'account_circle' on app window instead of an image icon.

Can't bind Flask with htmlPy

It is complicated or impossible to acheive? There are not enough documentation to do this.

htmlPy with PySide2

Hi,
is there a way to use htmlPy with PySide2. I'm asking because I use python 3.6 and the latest PySide release has at least 3.5 support or did i miss something?

[bug] no audio support

The <audio src="{{ "audio/lolz.mp3"|staticfile }}"> tag does show up correctly in the debug-inspector but not in the actual interface.

also this script:

mySound = new Audio("{{'audio/sound.mp3'|staticfile}}");

function playSound() {
    document.write("playing audio")
    mySound.play()
}

does not work.

unable to run example

As in http://amol-mandhane.github.io/htmlPy/ , I created three files exactly the same as the example in hpy_test/.

Then I ran

cd hpy_test
python main.py

I got the following error:

Traceback (most recent call last):
  File "main.py", line 2, in <module>
    from back_end import BackEnd
  File "hpy_test/back_end.py", line 2, in <module>
    from main import app
  File "hpy_test/main.py", line 2, in <module>
    from back_end import BackEnd
ImportError: cannot import name BackEnd

And if I ran

# cd hpy_test
python back_end.py

I got the following error:

Traceback (most recent call last):
  File "back_end.py", line 2, in <module>
    from main import app
  File "hpy_test/main.py", line 2, in <module>
    from back_end import BackEnd
  File "hpy_test/back_end.py", line 2, in <module>
    from main import app
ImportError: cannot import name app

I am using python 2.7 (64bit), pyside 1.2.1 and htmlpy 2.0.3 in 64 bit windows 10.

Error in samples

In sample_web_app.py
it should be

web_app = htmlPy.WebAppGUI(title=u"Python Website", maximized=True)

rather than

web_app = htmlPy.WebAppGUI(title="Python Website", maximized=True)

Title should be in unicode

pyinstaller compile error

hello guys,

run app.exe;

error: Failed to execute script main

how can i solution?

innerHTML doesn't work when executed from the python app

This is a segment of my code:
message = '33' app.evaluate_javascript("document.getElementById('temp').innerHTML="+message+";") app.evaluate_javascript("alert(document.getElementById('temp').textContent);")
The second line (alert) correctly displays that the innterHTML of the element should be 33, but the actual app does not physically show the message in its HTML.

Perhaps this has something to do with your representation of innerHTML?

HTML audio tag not working on windows but working on linux

HTML audio tag doesn't work on windows but works well on Linux.
Instead of showing the audio player a "Download File" option shows up with a link to audio file. I tested this on web application too. On Linux, the audio tag showed up but on windows "Your browser does not support the audio element" showed up.

eg-

import htmlPy

web_app = htmlPy.WebAppGUI(title=u"Python Website", maximized=True)
web_app.url = u"https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all"
web_app.start()

Config :

Windows:

Python version: Python 3.4.5
PySide version: 1.2.2
HTMLPy: Version: 2.0.3

Linux:

Python version : 3.5.3
PySide Version: 1.2.2
HTMLPy: Version: 2.0.3

High Resolution Screen makes everything tiny

I have a high resolution screen (3200X1800 px) and while I had to change some settings in chrome to make things scale up, with htmlPy I couldn't find how to do it?

I'm not sure if this is an issue with htmlPy or with bootstrap?

how to debug liker the chrome console

Click on a link pointing to another local html file

Hi,

How can a click on link pointing to local file work.

<a href="calendar.html"><i class="icon-calendar icon-white"></i> Calendar</a>

This doesn't work.

ANy ideas?

JPEG Not loading

I am currently making an application using HtmlPy's AppGui, when I realised that a Jpeg file I had included in my html file was not loading, and instead showing as a blue question mark. I noticed that all PNG and SVG files seemed to be working correctly, and that only JPEGs would not load. To test this (and see if the problem was with my code) I adapted one of the Quickstart Tutorials found on the docs, replacing the URL with that of a google images search for the word JPEG.

import htmlPy
web_app = htmlPy.WebAppGUI(title=u"Python Website", maximized=True)
web_app.url = u"https://www.google.com/search?tbm=isch&q=jpeg"
web_app.start()

Here's the result of that URL (https://www.google.com/search?tbm=isch&q=jpeg) from my Chrome browser:

And from HtmlPy:

I have no idea how to resolve this, and I would be grateful if someone could find a solution, as it is quite important to my project (and presumably many others).

how to create interface in kiosk mode

whether I will have to control it using python or using html or javascript,because I need my app to run in fullscreen mode(kiosk mode).

What is the use of empty curly brace? app.template("file.html",{})

I need to pass some variables dynamically to file.html.
Is it possible to pass via app.template("xy",{here})?

Thanks

May I have the documents translated in Chinese

I forked it and started a project 'htmlPy-docs-cn' on ReadTheDocs, but always build failed.
Can you give me some advice, or I have ignored something must be set before?

In other words, what else should I do after I imported the Github Repo in the ReadTheDocs?

I'm a student from China. Hope it will not interrupt you.

Question - static/img folder

Hello. This is a question more than an issue, but its driving me crazy.

Im using the example. It's running. I added style and managed to load the css but i cant make background image load. I tried several combinations but nothing work. Tried local img and web img url but none work. I also tested the "dynamic" way but no luck.

Hope you can help me. Thanks.

Frameless fullscreen ?

Hello,

Thank you for this module, it is really great and speeded up my GUI dev time by a LOT.

I just have one problem : how could I obtain a frameless fullscreen window ? I understand this is possible in pure PySide and QT but I am not sure how this translates to htmlPy.

Thanks a lot for any clue you might have and thanks again for this great module !

Another htmlPy application is already running

Example not work.
Here is output:

Traceback (most recent call last):
  File "main.py", line 28, in say_hello_world
    from main import app
  File "/home/abraham/My Items/Git my repos/Silk Strider/test/main.py", line 11, in <module>
    app = htmlPy.AppGUI(title=u"Application", maximized=True, plugins=True)
  File "/usr/local/lib/python2.7/dist-packages/htmlPy/app_gui.py", line 103, in __init__
    super(AppGUI, self).__init__(*args, **kwargs)
  File "/usr/local/lib/python2.7/dist-packages/htmlPy/base_gui.py", line 76, in __init__
    raise RuntimeError("Another htmlPy application is already running")
RuntimeError: Another htmlPy application is already running

Restarting of PC does not help.

Screen resize

Hello all,

First of all a big thank you for creating this, tho it is a bit hard to implement it works very well. I have just one question that i cant seem to find an answer to, how to disable screen resizing on htmlPy.AppGUI. Please note i dont want a fullscreen app.

Greetings,

Waro

Any example of sample_app.py for Windows?

Hi,

The documentation is not clear. I am very desperately trying to build the example as in tutorial.
Can you please post an example of sample_app.py ?

Thanks

Example code doesn't run on my machine (windows 7.pro)

the sample code on http://htmlpy.readthedocs.org/en/master/quickstart.html#standalone-application is not running on my machine, i think you forgot to place 'u' in front of string parameters for functions AppGUI and WebAppGUI. nice project btw, thanks

Reaching out - Flexx

Hi,

Interesting project! I wanted to reach out because I am working on a similar approach to realize a "web-tech-based" GUI for Python. The project is called Flexx. It differs from htmlPy in that it hides almost all CSS/JS/HTML for the user. Users can write client-code in Python, which is transpiled to JavaScript. Also it targets multiple web runtimes (including Qt Webkit). I am not sure if/how your goals overlap with mine, but if they do maybe we can consider some colaboration?

Hash links not working?

I have this HTML:

<html>
    <body>
        <h1>Test</h1>
        <div id="one">
            <h3>One</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
               aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                 qui officia deserunt mollit anim id est laborum."</p>
        </div>
        <hr>

        <div id="two">
            <h3>Two</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
               aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                 qui officia deserunt mollit anim id est laborum."</p>
        </div>
        <hr>

        <div id="three">
            <h3>Three</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
               aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                 qui officia deserunt mollit anim id est laborum."</p>
        </div>
        <hr>
        <a href="#one">One</a> - <a href="#two">Two</a> - <a href="#three">Three</a>
    </body>
</html>

but the links at the bottom don't do anything(ie, scrolling to the element with the id pointed by the href attribute)...something must be done in the backend to achieve that?

Wrong data with radio button group in a form.

Hello,
I had the problem that option buttons in a group are not handle correctly because they have all the same name. Therefore I always got the value of the last button in the group. I do some modifications in the java script file:

Original binder.js:16-28

var form_bind = function (e) {
e.preventDefault();
var form = e.target || e.srcElement;
if (form.getAttribute("data-bind") != "true")
return true;
var action = form.action;

var formdata = {};
for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name && input.type !== "file")
        formdata[input.name] = input.value;
}

Modified version:

var form_bind = function (e) {
e.preventDefault();
var form = e.target || e.srcElement;
if (form.getAttribute("data-bind") != "true")
return true;
var action = form.action;

var formdata = {};
for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
    if (input.type !== "file") {
        if (input.type !== "radio") {
                formdata[input.name] = input.value;
        } else {
            if (input.checked == true) {
                                formdata[input.name] = input.value;
            }
        }
    }
}

Mybe this is not the best solution but maybe someone could fix this issue.

Thanks,
Volker

how to display a video feed in the GUI that is captured and analyzed in the back end?

Thanks!