I am trying to find a way to connect a button in HTML to an action in my C++/Qt application. I loaded a HTML file in QT app using QTextBrowser object. If I click a button in this HTML file, the Qt application should respond. I also might want to implement it vice versa: so that an action in the Qt application would cause a response in the HTML page. Please suggest a suitable solution.
My sample code is :
QWebView view;
view.setStyleSheet(
"background-color:rgb(150,147,88); padding: 7px ; color:rgb(255,255,255)");
view.load(QUrl("test.html"));
view.show();
is there any mechanism like signal/slot ??
There are a few ways to do this, as your sample is working with QWebView rather than QTextBrowser, I'll assume your working with the QWebView.
For page to application QWebView::linkClicked(const QUrl& url) signal is fired when a link is clicked, and QWebView::load(const QUrl& url) will change the page.
If you are creating a JavaScript application, have a look at the QtWebKit Bridge documentation. This allows two way communication with JavaScript running on a page.
Related
Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
I am using the ionic framework and would like to be able to read from the HTML from the current webpage and then send the selection back to my application.
I have the Theme-able Browser Plugin setup and can use it like any other web browser.
I have tried looking at ways to include my own script with the .executeScript() function but no luck.
I have also tried to read data from custom buttons that I have inserted into the tool/nav bar but that gives me the HTML of my application.
TL;DR: (Basically want access to the DOM of the current webpage and have the user use native selection to read the document.getSelection() and send that text back to my application.)
Any help would be highly appreciated.
After browsing the forums on Ionic I found the solution:
browser.executeScript({code:'window.getSelection().toString();'}).then((selection)=>{
packet.text = selection[0];});
This allows me to get the selection.
I am creating a application where the UI is been formed using WxPython. I am using a Panel with a HTML window.
In this HTML page which is displayed, I would like to extract information, for example the text of a textBox, which radio button is selected, a click of a button etc, and at the same time show some information to the user, like when a process was been completed and its result or similar information.
I am not finding a good way of doing that, as long I could understand, I will need to use Javascript or something to interact with the page in some way. But I could not find how to send and receive information to the page, and if the wx.html.HtmlWindow supports Javascript.
What would be the best way of doing that?
You could communicate through a socket. Create a local socket server on the python side, and then use javascript to connect to that socket. There are plenty examples of this around the web. See the docs for python Socket Server: https://docs.python.org/2/library/socketserver.html
It doesn't look like the wx.html module supports javascript or css:
This module contains a widget class and supporting classes for a generic HTML renderer. It supports only a subset of the HTML standards, and no Javascript or CSS, but it is relatively lightweight and has no platform dependencies. It is suitable for displaying simple HTML documents, such as the application’s documentation or built-in help pages.
It does look like you can handle the EVT_HTML_LINK_CLICKED event to tell when a user clicks a link, but I'm not sure how you would get the input from html form elements like textboxes, radio buttons, etc.
Your best bet may be to create a web app using a microframework like Flask and serve the app locally.
I have a page that is constructed by GWT, when the page get loaded, I will display some required content in it. And then if user click a certain button on the page, I will send request to server side and server will return me a HTML file(a chart generated by jquery plotting tool) stored in local directory, I need to display this HTML file into the existing GWT page's certain widget.
I tried to use Frame in GWT to link to the local HTML file and display it, it get failed, googled and found it's because of browser security setting.Please share your thought, any idea is appreciated.
I'm developing a Chrome packaged app which displays a certain kind of document as HTML. I have the app working to some degree, but would like to add a feature allowing the user to open a file by clicking on a link to an applicable file.
I am able to launch the app by MIME type as per the docs here, and am familiar with the pp::Instance::HandleDocumentLoad method to handle the clicked link's source, but am unsure how to display HTML I'm generating from the parsed document.
This is easy enough to do when the user manually launches the app and selects a file using an input element and the HTML file system since the HTML GUI is specified in the app manifest, but as far as I can tell, launching based on MIME type just embeds the NMF.
TL;DR: Is there a way to specify a HTML interface for (or a simple way to render HTML from) a NaCl module instance created by a nacl_modules manifest entry?
This is possible, but it's a bit of a hack. I copied the trick from here:
https://groups.google.com/d/msg/native-client-discuss/UJu7VXvV_bw/pLc19D50gbwJ
You can see how I did it here and here:
Basically, you listen on chrome.tabs.onCreated and chrome.tabs.onUpdated, then you inject a small bit of JavaScript that checks for the embed element with the correct mimetype. If it finds the element, it sends a message (via chrome.runtime.sendMessage) to your extension. When your extension gets that message, it injects the rest of your JavaScript into the page using chrome.tabs.executeScript. At this point you can display whatever you want.
You could do it earlier, by injecting your code into every page, but I found this was a bit nicer, as it only injects a small bit of code.