Question: Linking html resources #187

tjohnsonhvac · 2018-03-01T15:10:44Z

What is the correct way to link local js and ccs files?
It appears the standard html and <script src="script.js"></script>
do not work.
I also tried using the full path for both and that didn't work either.
And I tried ./style.css. that didn't work.

It does look like CDN links work but they take a long time to load.

Any advice?

r0x0r · 2018-03-01T15:45:10Z

Currently there is no smooth way to add linked resources to HTML loaded via load_html. #181 aims to alleviate that.
What you can do now though

Inject CSS and JS directly into your HTML via Python's format or similar
Load JS and CSS using evaluate_js. Google on how to load CSS using Javascript
Serve everything using a local web server (the traditional way)

tjohnsonhvac · 2018-03-01T16:05:45Z

Thanks. My electron comparable app is almost complete. @ a whopping 19kb!!!!
before pyinstaller.

tjohnsonhvac · 2018-03-01T20:44:07Z

Any pointers on pyinstaller? the exe opens and runs but the dialogs don't work. i put the WebBrowserInterop.dll in the datas import of the spec and it is in the distro folder with the exe after it compiles it.
it runs fine when i run it from python console.

tjohnsonhvac · 2018-03-01T22:56:11Z

A quick example of how I got around the css&js issue:

index.html:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
	<meta name="Author" content=""/>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="script.js"></script>
</head>
<body>



</body>
</html>

style.css:

body {
    background-color: blue;
}

script.js:

alert("javascript loaded");

Python:

import webview
import threading
import io
import sys


html_file_path = 'index.html'
html= ''


def read_css(css_file_path):
    try:
        with open(css_file_path) as f_obj:
            css = f_obj.read()
    except Exception as error:
        print("Error opening .css file.")
        print(error, type(error))
    else:
        return css

def read_js(js_file_path):
    try:
        with open(js_file_path) as f_obj:
            js = f_obj.read()
    except Exception as error:
        print("Error opening .js file.")
        print(error, type(error))
    else:
        return js


with open(html_file_path) as f_obj:
    lines = f_obj.readlines()
    for line in lines:
        if '<link' in line:
            link_parts = line.split(' ')
            for part in link_parts:
                if 'href' in part:
                    if 'http' in part:
                        html+= line
                    else:
                        css_file_path = part.replace('href="', '').replace('">', '').replace('"', '').replace('\n', '')
                        css = read_css(css_file_path)
                        html += '<style>\n'
                        html += css
                        html += '</style>\n'                    
                    
        elif '<script' in line:
            if 'src' in line:
                script_parts = line.split(' ')
                for part in script_parts:
                    if 'src' in part:
                        if 'http' in part:
                            html+= line
                        else:
                            js_file_path = part.replace('src="', '').replace('"></script>', '').replace('"', '').replace('\n', '')
                            js = read_js(js_file_path)
                            html += '<script>\n'
                            html += js
                            html += '</script>\n'                        
            else:
                html+= line
        else:
            html+= line
            
print (html)
                    
def create_app():
    webview.load_html(html)
    
    
if __name__ == '__main__':
    t = threading.Thread(target=create_app)
    t.start()

    
    webview.create_window('load js&css example', width=900, height=600, debug=True)

The resulting HTML which loads correctly in webview:

<!DOCTYPE html>
<html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="Author" content=""/>
<style>
body {
    background-color: blue;
}
</style>
<script>
alert("javascript loaded");
</script>
</head>

<body>
</body>
</html>

r0x0r · 2018-03-02T11:33:24Z

WebBrowserInterop.dll was introduced only recently, I haven't got a chance to investigate how to make it play with pyinstaller. pywebview looks for the dll in the lib directory under the current directory as the running script. I am not sure how paths would play out when frozen with pyinstaller.

If you get it working, please post the solution here.

tjohnsonhvac · 2018-03-02T12:51:36Z

Will do.
Just to confirm, WebBrowserInterop.dll is what gives the dialog window function?

tjohnsonhvac · 2018-03-02T15:45:16Z

I put together a nice example with Pure.css and JQuery this morning with the code above.
If anyone uses it and has problems let me know.

tjohnsonhvac · 2018-03-02T17:44:57Z

I found a solution to pyinstaller issue. I the augments telling pyinstaller where to find the files and where to put them needed to be added.

I used a .bat file to run pyinstaller:

pyinstaller --noconfirm --log-level=DEBUG ^
    --add-data="index.html;." ^
    --add-data="webview/lib/WebBrowserInterop.dll;webview/lib" ^
    --add-data="webview/js/alert.js;webview/js" ^
    --add-data="webview/js/api.js;webview/js" ^
    --add-data="webview/js/npo.js;webview/js" ^
    --hidden-import=clr ^
    --manifest="manifest.xml" ^
    --version-file="file_version_info.txt" ^
    --debug ^
    testApp.py

I am having an issue with the .exe disappearing when I use the --noconsole setting but that may be an anti-virus issue. I'll try to test later on a different computer.
I have not tested using the --onefile setting.

tjohnsonhvac · 2018-03-02T21:57:56Z

So with pyinstaller set to --onefile you have to manually copy in the folder with the html, css , and js files in it because the they are loaded in by the open file method.

I'm not sure how the WebBrowserInterop.dll is loaded in but it still works with the --onefile setting.

r0x0r · 2018-03-03T22:54:16Z

Good job. This seems to be an answer to the onefile scenario. Could you give this a try while you are at it?
https://stackoverflow.com/questions/7674790/bundling-data-files-with-pyinstaller-onefile

tjohnsonhvac · 2018-03-05T21:09:38Z

Ok, so that is a good fix for the onefile issue.
for the icon, I edited your logo in the pywebview- master to make the icon.
I went to https://www.icoconverter.com/ and converted the .png to a .ico I'm sure we can figure a way to do this ourselves eventually.
I added the icon to the .bat file(it is in the same dir as the js_api script):
favicon.ico

pyinstaller --noconfirm --log-level=DEBUG ^
    --onefile --noconsole ^
    --add-data="webview/lib/WebBrowserInterop.dll;webview/lib" ^
    --add-data="webview/js/alert.js;webview/js" ^
    --add-data="webview/js/api.js;webview/js" ^
    --add-data="webview/js/npo.js;webview/js" ^
    --hidden-import=clr ^
    --manifest="manifest.xml" ^
    --version-file="file_version_info.txt" ^
    --icon=favicon.ico ^
    js_api.py

I compiled it and here it is:

Next I used the solution provided in the stackoverflow post. it worked great.

Import os and add this function to you code:

""" Get absolute path to resource, works for dev and for PyInstaller """
def resource_path(relative_path):
    base_path = getattr(sys, '_MEIPASS', os.path.dirname(os.path.abspath(__file__)))
    return os.path.join(base_path, relative_path)

Then anytime you need to get something from the temp file created by the onefile exe, wrap it in the function:

html_file_path = resource_path('index.html')

It will then find it in the temp folder created. this also works if you run the script from a python IDE.

I will put together a complete example that can be used as a framework and put it up here.
I also just realized I need to add into the html import, a way to ignore links and scripts wrapped in 

tjohnsonhvac · 2018-03-05T22:34:32Z

Here is a zip file with the js_api example broken up into html/css/js files.
Run the pyinstall.bat to compile into a onefile exe.
I added to it the open file dialog to show that it works when compiled to onefile.
I also added in a way for the html import to ignore these:

<!--blablabla-->

and

<!---
blablabla
-->

it ignores all lines with and between <!-- and -->

so it will not work correctly for:
<!--blablabla--><something important>
or
<!---
blablabla
--><something important>
html will only be read on the next line after -->.

pytronium.zip

r0x0r · 2018-03-07T19:15:07Z

Thanks!

Thinking of this problem now, I realised a better solution for js files would be to embed js code in respective .py files and export them as modules. The WebBrowserInterop.dll would still require extra treatment. Looks like a job for a pyinstaller hook. https://pythonhosted.org/PyInstaller/hooks.html

r0x0r · 2018-03-07T21:30:01Z

I have converted js files to py modules in the pyinstaller-support branch.

tjohnsonhvac · 2018-03-08T16:04:08Z

It would be nice to keep the js, css and image references in the html file so that it works as close to web coding as possible. This way it keeps it easy for web developers to use this as a native wrapper for a web app if they want to.

When you say embed js code into .py files are you talking just about the js files in webview/js or any js file referenced in the html?

It does look like a hook could be used to grab the referenced files in the html file and bring them into the compiled file or folder when pyinstaller is ran. Then i guess we would only have to reference the hook when running pyinstaller. Would this be a good solution for these files or is there a better way to do this?

tjohnsonhvac · 2018-03-08T19:37:17Z

I have been working on an app that uses a bunch of HTML5 elements. When I run it in the webview they don’t appear correctly. Would upgrading IE on my computer fix this or does winforms not support html5?

I’m running Windows 7.

r0x0r · 2018-03-08T20:59:09Z

Regarding the js files, my idea is to keep only the js files related to pywebview inside Python code. Javascript is put everywhere these days, so putting it inside py files seems to be apt. User's own assets should certainly be in their original form.

As for the renderer, the latest installed IE version is used, so in your case it would certainly help to upgrade to IE11. Unfortunately you cannot go past IE11 and Microsoft has no plans adding Edge support to WinForms or WPF. Support for CEF will certainly be needed if the situation continues to be like this. The problem is discussed in #15.

tjohnsonhvac · 2018-03-08T22:23:36Z

I have IE11.
So after doing some reading, IE11 lacks support for a lot of things.
For reference, this is the score for IE11 on Win7: https://html5te.st/703bb03c1f70ff9e
If I put together js files to replace some of these missing functions, would you want to include them in the built in j/py modules?

r0x0r · 2018-03-09T08:30:07Z

Shimming is a slippery slope. Commit to it once and you have to support for the rest of days. Furthermore, it would address only missing JS functions, not the new syntax or CSS. I would not go down this route at this point.

tjohnsonhvac · 2018-03-10T01:01:48Z

Good point.
I found some good polyfills out there for some missing stuff. I spent the day today with an IE window and a chrome window open, working through the IE comparability issues with SVGs so they would display correctly... fun... got it working tho.

tjohnsonhvac · 2018-03-13T12:09:42Z

I'm having issues with downloading the svg as a png. I rendered the svg to a canvas but when i try to convert the canvas to a dataURL I get a security error in IE11. I looked it up and it seems to be a huge problem for people. Works fine in Chrome but not IE. Do you have any recommendations on how this could be handled on the python side without an external program like inkscape?

r0x0r · 2018-03-13T17:17:31Z

I am not familiar with this issue. Is this of any help? https://stackoverflow.com/questions/32870788/css-using-raw-svg-in-the-url-parameter-of-a-background-image-in-ie

tjohnsonhvac · 2018-03-16T14:16:49Z

Thanks for the reply but no luck there.
I was able to get it to work using 3 js libraries that somehow work around the IE security issue. then I used base64 to decode the dataurl in python and save it to a png.

r0x0r · 2018-03-26T17:39:08Z

The solution for linked resources is being implemented in #181.
I am closing this issue.

suffa07 · 2019-04-15T17:19:14Z

I just starting using pywebview to build a desktop app where I want to display results of completed software tests, and bugs discovered. However, I am quite fuzzy on displaying some statistical data completed with pychart on the application. What would be the best approach to display this chart in the pywebvie desktop app? I am using the pystronium model from tjohnsonhvac above. Would it be best to serialize the Python data and pass it to a Javascript function? Additionally, I have a total of three pages that I would like to navigate between, and I can't seem to navigate to any page other than the index.html. I have a js function that gets the id of the href link when clicked and send it to webview.load_html(HTML) function. Any thoughts on this? Thanks

r0x0r · 2019-04-15T17:36:51Z

Take a look at the Todos app https://github.com/r0x0r/pywebview/tree/master/examples/todos Another approach is to serve everything from a local http server.

…

suffa07 · 2019-04-15T20:13:39Z

Okay, thanks. I will have a look.

…

On Mon, Apr 15, 2019 at 12:36 PM Roman ***@***.***> wrote: Take a look at the Todos app https://github.com/r0x0r/pywebview/tree/master/examples/todos Another approach is to serve everything from a local http server. > > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#187 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHS2kUMF8PE-h6KgFYgv8LQKpeA9Vfb_ks5vhLi1gaJpZM4SYdeg> .

-- "There are 10 types of people in this world. Those who understand binary and those who don't."

r0x0r · 2019-04-17T13:30:39Z

Added information about application architecture
https://pywebview.flowrl.com/guide/architecture.html

suffa07 · 2019-04-17T14:44:37Z

Thank you Roman. The todos application helped me somewhat. I can navigate to other .html pages, but I get an error of "addeventListener cannot read null....". So, I'm trying to familiarize myself with the code to gain an understanding of how everything is working. I tried running local server, but I'm using the jQuery plug-in and a few other libraries (namely bootstrap) but the loading is significantly slower, and it throws the original styling off. I'm not complaining at all, what you've done is definitely amazing. I'm just trying to develop an app for my QA testing and reporting in a certain time table, ideally before my teams next Sprint, and time is critical for me, but this app seems ideal. Actually, I already have my app developed with wxPython, but the old look of the app and clunky feel cannot match what I can potentially do with it by using html, css,, and js, so I'm attempting to convert it to pywebview. Currently, I'm attempting to use something called xdomain (proxy server) an app on GitHub, along with pywebview to see if this will help smooth the process of serving local pages and content. Thanks again Roman! Best Regards, Del -- Sent from Outlook Email App for Android Wednesday, 17 April 2019, 08:30AM -05:00 from Roman notifications@github.com :

…

Added information about application architecture https://pywebview.flowrl.com/guide/architecture.html — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or mute the thread .

suffa07 · 2019-04-17T14:45:39Z

As soon as I have more time, I plan to spend a lot of time with pywebview and became a contributor. Del -- Sent from Outlook Email App for Android Wednesday, 17 April 2019, 08:30AM -05:00 from Roman notifications@github.com :

…

Added information about application architecture https://pywebview.flowrl.com/guide/architecture.html — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or mute the thread .

shivaprsd added the question label Mar 2, 2018

r0x0r closed this as completed Mar 26, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Question: Linking html resources #187

Question: Linking html resources #187

tjohnsonhvac commented Mar 1, 2018

r0x0r commented Mar 1, 2018

tjohnsonhvac commented Mar 1, 2018

tjohnsonhvac commented Mar 1, 2018

tjohnsonhvac commented Mar 1, 2018 •

edited

r0x0r commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

r0x0r commented Mar 3, 2018

tjohnsonhvac commented Mar 5, 2018

tjohnsonhvac commented Mar 5, 2018

r0x0r commented Mar 7, 2018

r0x0r commented Mar 7, 2018

tjohnsonhvac commented Mar 8, 2018

tjohnsonhvac commented Mar 8, 2018

r0x0r commented Mar 8, 2018

tjohnsonhvac commented Mar 8, 2018

r0x0r commented Mar 9, 2018 via email

tjohnsonhvac commented Mar 10, 2018 •

edited

tjohnsonhvac commented Mar 13, 2018

r0x0r commented Mar 13, 2018

tjohnsonhvac commented Mar 16, 2018

r0x0r commented Mar 26, 2018

suffa07 commented Apr 15, 2019

r0x0r commented Apr 15, 2019 via email

suffa07 commented Apr 15, 2019 via email

r0x0r commented Apr 17, 2019

suffa07 commented Apr 17, 2019 via email

suffa07 commented Apr 17, 2019 via email

Question: Linking html resources #187

Question: Linking html resources #187

Comments

tjohnsonhvac commented Mar 1, 2018

r0x0r commented Mar 1, 2018

tjohnsonhvac commented Mar 1, 2018

tjohnsonhvac commented Mar 1, 2018

tjohnsonhvac commented Mar 1, 2018 • edited

r0x0r commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

tjohnsonhvac commented Mar 2, 2018

r0x0r commented Mar 3, 2018

tjohnsonhvac commented Mar 5, 2018

tjohnsonhvac commented Mar 5, 2018

r0x0r commented Mar 7, 2018

r0x0r commented Mar 7, 2018

tjohnsonhvac commented Mar 8, 2018

tjohnsonhvac commented Mar 8, 2018

r0x0r commented Mar 8, 2018

tjohnsonhvac commented Mar 8, 2018

r0x0r commented Mar 9, 2018 via email

tjohnsonhvac commented Mar 10, 2018 • edited

tjohnsonhvac commented Mar 13, 2018

r0x0r commented Mar 13, 2018

tjohnsonhvac commented Mar 16, 2018

r0x0r commented Mar 26, 2018

suffa07 commented Apr 15, 2019

r0x0r commented Apr 15, 2019 via email

suffa07 commented Apr 15, 2019 via email

r0x0r commented Apr 17, 2019

suffa07 commented Apr 17, 2019 via email

suffa07 commented Apr 17, 2019 via email

tjohnsonhvac commented Mar 1, 2018 •

edited

tjohnsonhvac commented Mar 10, 2018 •

edited