search

webui-dev / nim-webui

Use any web browser as GUI, with Nim in the backend and HTML5 in the frontend.
https://webui.me
MIT License
130 stars 9 forks source link

Showing images in tha app #27

Closed fenix272 closed 7 months ago

fenix272 commented 8 months ago

I started using your library. It's quite nice, but i have a problem. I tried to create an image gallery. If the images are in the main app folder(where the exe file is) or, starting from the main app folder, in a sub folder they are shown. If instead the images are in another folder the images don't appear. How can i solve this problem? I cannot put all the images in the app folder. I tried to use file:// protocol and also ../../ relative path but nothing works

AlbertShown commented 8 months ago

webui is just a tool to connect your UI (web browser) with your backend (nim). So, all file access things are simply the exact same as a website/web-server.

You can use setRootFolder() to set your root folder. Or use the HTML5 tag to change the root relative path <base href="YOUR_ROOT_PATH">.

You should think of your UI as a simple website. Regardless if you use webui or any web-server, you will get the same result.

fenix272 commented 8 months ago

Thank you for your answer. I hope i' m not annoying you but i tried what you suggested and it worked: let window = newWindow() ; window.rootFolder = "e:/media/" #media images But now the problem is that the main html file which is in the same folder as the exe file fails to load because webui expects to find it in the rootFolder that i set above. Buti i want to keep my app, with the main html, css, js files and the app icons separate from the media images(i' m building an image gallery). If i set the root folder i should put everything, including the app files, in there which is not what i want. So my question is can i set different paths like i can for example in nodejs express framework?

hassandraga commented 8 months ago

Probably window.show("_FULL_PATH_TO_MAIN_FILE_.html")

fenix272 commented 8 months ago

Aahah how silly i am

fenix272 commented 8 months ago

How silly i am! Thank you. One last question and i wont disturb you anymore( i hope). I loaded in the window an html file which contains a javascript file. From that javascript file i tried to call a function from the backend but it gives me errors like "get_prefs is not defined" or "webui is not defined" or "webui_fn not defined". In the backend i created this function: window.bind("get_prefs") do (e: Event) -> string: result = db.getValue(sql"Select value from prefs where id = ?", 0) Then in the javascript file i tried all: get_prefs.then((response) => { alert(response) }); webui.get_prefs.then((response) => { alert(response) }); webui.call('get_prefs').then((response) => { alert(response) }); webui_fn('get_prefs').then((response) => { alert(response) }); Nothing works. In one html file in the examples folder i found this line: <script src="/webui.js"></script> Maybe i need to load this file in order to use webui on the client side? The problem is i cannot find that file anywhere. Am i doing something wrong?

hassandraga commented 8 months ago

Yes, you should add webui.js to your HTML content to make your UI connect with your backend. The file webui.js does not exist. It's a virtual file generated by webui at runtime. All you have to do is add <script src="/webui.js"></script> to your HTML content.

More details (Not complete yet): http://webui.me/docs/2.4/#/

fenix272 commented 7 months ago

Thank you!! I solved the problem!