Chromium WebGadget v4
Re: Chromium WebGadget
Updated (CrWG Builder):
- added Home screen
- added Startup screen
- improved Options screen
- added zoom and tooltip
- added progress bar
- various other improvements
Zoom and Tooltip
Not only does it zoom the page, but also controls the size of the PureBasic window.
NOTE: This is still a work in progress, but the example is now demonstrated from a PureBasic window.
Modern UI
CrWG Builder is being written using the Bootstrap Framework, hosted in a (PureBasic) Chromium WebGadget, with communications initiated from the DevTools Protocol, processed through the WebSockets API.
- added Home screen
- added Startup screen
- improved Options screen
- added zoom and tooltip
- added progress bar
- various other improvements
Zoom and Tooltip
Not only does it zoom the page, but also controls the size of the PureBasic window.
NOTE: This is still a work in progress, but the example is now demonstrated from a PureBasic window.
Modern UI
CrWG Builder is being written using the Bootstrap Framework, hosted in a (PureBasic) Chromium WebGadget, with communications initiated from the DevTools Protocol, processed through the WebSockets API.
Last edited by JHPJHP on Tue Mar 07, 2023 3:19 am, edited 1 time in total.
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
Is it possible to disable these translation popup, right click popup and disable the user to open the devtools?
screenshot : https://prnt.sc/Gi1XnX2AWDSn
screenshot1 : https://prnt.sc/NF733XBP07Qc
screenshot2 : https://prnt.sc/F6f9LiVFj3vn
screenshot : https://prnt.sc/Gi1XnX2AWDSn
screenshot1 : https://prnt.sc/NF733XBP07Qc
screenshot2 : https://prnt.sc/F6f9LiVFj3vn
Re: Chromium WebGadget
Hi skinkairewalker,
Please download the latest version. Let me know if it resolves your concerns.
CrWG Builder is a work in progress. The application when finished should help users create their own Chromium WebGadget applications. In addition, demonstrate another method for creating a modern UI; please note, at least a basic understanding of web-design is required.
Please download the latest version. Let me know if it resolves your concerns.
--------------------------------JHPJHP wrote:When time permits I’m available to help with questions about the framework, and even provide additional examples and shortcuts to assist with development. That said, if you post a question and I take the time to respond, please have the curtesy to reply with an acknowledgment.
CrWG Builder is a work in progress. The application when finished should help users create their own Chromium WebGadget applications. In addition, demonstrate another method for creating a modern UI; please note, at least a basic understanding of web-design is required.
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
hi, sorry to bother you again, I would like to prevent users from right-clicking and being able to view the source code of the page easily ... in the examples inside: CrWG Framework\Bootstrap Modern UI when running to access the browser's DevTools just right click and inspect the element...JHPJHP wrote: ↑Mon Feb 27, 2023 5:27 pm Hi skinkairewalker,
Please download the latest version. Let me know if it resolves your concerns.
--------------------------------JHPJHP wrote:When time permits I’m available to help with questions about the framework, and even provide additional examples and shortcuts to assist with development. That said, if you post a question and I take the time to respond, please have the curtesy to reply with an acknowledgment.
CrWG Builder is a work in progress. The application when finished should help users create their own Chromium WebGadget applications. In addition, demonstrate another method for creating a modern UI; please note, at least a basic understanding of web-design is required.
Re: Chromium WebGadget
Hi skinkairewalker,
It's not a bother asking a question, it's great to see interest in something I've written, even if it's just passing interest.
But previously you've asked questions and I posted answers, but you neglected to provide any feedback or at the minimum a thank you.
The three images you posted had to do with the CrWG Builder application, so changes were only applied to that example.
If you confirm the following changes were effective, I'll apply them to the other Bootstrap Modern UI examples.
NOTE: The things you requested (and more) were accomplished using CSS and JavaScript...
The following might be overkill but should provide a direction for your own application.
1. Suppress Translate Window
-- not knowing what would work I incorporated various solutions
---- <html lang="en" translate="no"> [ HTML Tag ]
---- <meta name="google" value="notranslate"> [ Head - Meta Tag ]
---- <body class="notranslate"> [ Body Tag ]
---- #gtx-trans { display: none; } [ CSS ]
2. Prevent Context Menu [ JavaScript ]
document.addEventListener("contextmenu", event => event.preventDefault());
3. Prevent Drag Image [ Body Tag ]
<body ondragstart="return false;">
4. Disable Element Selection [ CSS ]
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
NB* The Translate window should already have been suppressed via the CLS file: --disable-features=Translate.
It's not a bother asking a question, it's great to see interest in something I've written, even if it's just passing interest.
But previously you've asked questions and I posted answers, but you neglected to provide any feedback or at the minimum a thank you.
The three images you posted had to do with the CrWG Builder application, so changes were only applied to that example.
If you confirm the following changes were effective, I'll apply them to the other Bootstrap Modern UI examples.
NOTE: The things you requested (and more) were accomplished using CSS and JavaScript...
The following might be overkill but should provide a direction for your own application.
1. Suppress Translate Window
-- not knowing what would work I incorporated various solutions
---- <html lang="en" translate="no"> [ HTML Tag ]
---- <meta name="google" value="notranslate"> [ Head - Meta Tag ]
---- <body class="notranslate"> [ Body Tag ]
---- #gtx-trans { display: none; } [ CSS ]
2. Prevent Context Menu [ JavaScript ]
document.addEventListener("contextmenu", event => event.preventDefault());
3. Prevent Drag Image [ Body Tag ]
<body ondragstart="return false;">
4. Disable Element Selection [ CSS ]
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
NB* The Translate window should already have been suppressed via the CLS file: --disable-features=Translate.
Last edited by JHPJHP on Wed Mar 01, 2023 4:27 pm, edited 7 times in total.
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
Sorry, I just forgot to say thank you!!
amazing work, congrats!
amazing work, congrats!
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
How do I redirect to another page that I load manually, without javascript or html redirecting automatically?
in the same way below?
in the same way below?
Code: Select all
crwg_data\FilenameCLS = #PB_Compiler_Filename
crwg_data\GadgetNumber = #Cr_WebGadget
crwg_data\SourceURL = "editor.html"
crwg_data\DataSource = *HTML
crwg_data\DataLength = MemorySize(*HTML)
Cr_WebGadget_Init(crwg_data)
SendData.SEND_DATA
Re: Chromium WebGadget
Hi skinkairewalker,
There are two methods for redirecting to another webpage.
NOTE: The examples included with the framework demonstrate the following solutions.
DevTools Method
(internet webpage)
or
(local HTML file)
IAccessible Method
(only used when DevTools is not required but page navigation is still needed)
or
(ReadFile is just one method for "loading" a DataSource)
There are two methods for redirecting to another webpage.
NOTE: The examples included with the framework demonstrate the following solutions.
DevTools Method
(internet webpage)
Code: Select all
SendData\EventID = 20300
SendData\Method = "Page.navigate"
SendData\Params = #DQUOTE$ + "url" + #DQUOTE$ + ":" + #DQUOTE$ + "https://www.google.ca" + #DQUOTE$
Cr_WebSocket_Send(Connection, @SendData)
(local HTML file)
Code: Select all
SendData\EventID = 20300
SendData\Method = "Page.navigate"
SendData\Params = #DQUOTE$ + "url" + #DQUOTE$ + ":" + #DQUOTE$ + "C:/CrWG Framework/webpage.html" + #DQUOTE$
Cr_WebSocket_Send(Connection, @SendData)
(only used when DevTools is not required but page navigation is still needed)
Code: Select all
crwg_data\SourceURL = "https://www.google.ca"
Cr_WebGadget_Update(crwg_data, "Refresh")
(ReadFile is just one method for "loading" a DataSource)
Code: Select all
If ReadFile(0, "C:\CrWG Framework\webpage.html")
While Not Eof(0)
HTML$ + ReadString(0) + #LF$
Wend
*HTML = UTF8(HTML$)
CloseFile(0)
EndIf
*HTML = UTF8(HTML$)
crwg_data\DataSource = *HTML
crwg_data\DataLength = MemorySize(*HTML)
Cr_WebGadget_Update(crwg_data, "Refresh")
...
FreeMemory(*HTML)
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
worked great, thanks a lot for the support! you are the man …
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
I would have one more question, is it possible to run javascript functions within the site using the purebasic side?
Re: Chromium WebGadget
Hi skinkairewalker,
Yes, executing JavaScript from PureBasic is a simple process when using the DevTools Protocol.
The above example is the simplest method for executing JavaScript.
More complex versions of the same algorithm, and more complex algorithms are available depending on your requirements.
Again, please see existing examples; DevTools_Basic.pb contains code matching your exact request.
Yes, executing JavaScript from PureBasic is a simple process when using the DevTools Protocol.
Code: Select all
SendData\EventID = 23200
SendData\Method = "Runtime.evaluate"
SendData\Params = "expression":"document.getElementById('button').click();"
Cr_WebSocket_Send(Connection, @SendData)
More complex versions of the same algorithm, and more complex algorithms are available depending on your requirements.
Again, please see existing examples; DevTools_Basic.pb contains code matching your exact request.
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
thank you very much, amazing tool!
I'm already starting to develop applications with it ...
screenshot : https://prnt.sc/lilYVZEDSMD4
the only thing missing is the tool being cross-platform ... it would be an excellent competitor to nw.js, electron and others .
but anyway, thank you immensely for the work and support
I'm already starting to develop applications with it ...
screenshot : https://prnt.sc/lilYVZEDSMD4
the only thing missing is the tool being cross-platform ... it would be an excellent competitor to nw.js, electron and others .
but anyway, thank you immensely for the work and support
- skinkairewalker
- Enthusiast
- Posts: 635
- Joined: Fri Dec 04, 2015 9:26 pm
Re: Chromium WebGadget
This method is not redirecting (nothing happens when it is triggered within the DevToolsEvent(JSONValue, Connection, PageID.s) function) ... How do I know what error is giving?JHPJHP wrote: ↑Wed Mar 01, 2023 10:08 pm
NOTE: The examples included with the framework demonstrate the following solutions.
(ReadFile is just one method for "loading" a DataSource)Code: Select all
If ReadFile(0, "pagefolder\webpage.html") While Not Eof(0) HTML$ + ReadString(0) + #LF$ Wend *HTML = UTF8(HTML$) CloseFile(0) EndIf *HTML = UTF8(HTML$) crwg_data\DataSource = *HTML crwg_data\DataLength = MemorySize(*HTML) Cr_WebGadget_Update(crwg_data, "Refresh") ... FreeMemory(*HTML)
my source :
Code: Select all
If JSONArrayValueArgs
ElementId$ = GetJSONString(JSONArrayValueArgs)
;MessageRequester("Chromium WebGadget", "ElementID: " + ElementId$, #PB_MessageRequester_Info)
If (ElementId$ = "EditProject")
; MessageRequester("","Abrindo o projeto : "+Params$)
If ReadFile(0, GetCurrentDirectory()+"editor\manager.html")
While Not Eof(0)
HTML2$ + ReadString(0) + #LF$
Wend
CurrentDirectory$ = GetCurrentDirectory()
HTML2$ = ReplaceString(HTML2$, "[CurrentDirectory]", CurrentDirectory$)
*HTML2 = UTF8(HTML2$)
CloseFile(0)
EndIf
crwg_data\FilenameCLS = #PB_Compiler_Filename
crwg_data\GadgetNumber = #Cr_WebGadget
crwg_data\SourceURL = "manager.html"
crwg_data\DataSource = *HTML2
crwg_data\DataLength = MemorySize(*HTML2)
Cr_WebGadget_Update(crwg_data, "Refresh")
FreeMemory(*HTML2)
....
Re: Chromium WebGadget
Hi skinkairewalker,
Sorry, the documentation for Cr_WebGadget_Update is spotty.
Your example won't work as the function requires the IAccessible Interface, and you're mixing code with the DevTools protocol.
When CrWG Builder is finished, the program should assist with using the framework, but until then try the following.
Sorry, the documentation for Cr_WebGadget_Update is spotty.
Your example won't work as the function requires the IAccessible Interface, and you're mixing code with the DevTools protocol.
When CrWG Builder is finished, the program should assist with using the framework, but until then try the following.
Code: Select all
Procedure UpdateWebpage(HtmlFile.s, Connection)
If ReadFile(0, HtmlFile)
While Not Eof(0)
HTML$ + ReadString(0) + #LF$
Wend
HTML$ = ReplaceString(HTML$, "[CurrentDirectory]", GetCurrentDirectory())
CloseFile(0)
EndIf
TempFile$ = GetTemporaryDirectory() + GetFilePart(HtmlFile)
DeleteFile(TempFile$, #PB_FileSystem_Force)
If CreateFile(0, TempFile$)
WriteString(0, HTML$)
CloseFile(0)
EndIf
TempFile$ = ReplaceString(TempFile$, "\", "/")
SendData.SEND_DATA
SendData\EventID = 23200
SendData\Method = "Page.navigate"
SendData\Params = #DQUOTE$ + "url" + #DQUOTE$ + ":" + #DQUOTE$ + TempFile$ + #DQUOTE$
ProcedureReturn Cr_WebSocket_Send(Connection, @SendData)
EndProcedure
UpdateWebpage("editor\manager.html", Connection)
Last edited by JHPJHP on Mon Mar 06, 2023 12:18 pm, edited 2 times in total.
Re: Chromium WebGadget
Updated:
- improved Procedure Cr_WebGadget_Update
- some minor improvements to the framework and examples
Cr_WebGadget_Update now returns a Boolean (#True) if successful; previously a String was returned. This Procedure should mostly be used when the IAccessible Interface is enabled, but there are a few exceptions.
infratec has confirmed the problem he previously reported has been fixed. In addition, based on his suggestions a couple potential issues with the framework have been addressed.
- improved Procedure Cr_WebGadget_Update
- some minor improvements to the framework and examples
Cr_WebGadget_Update now returns a Boolean (#True) if successful; previously a String was returned. This Procedure should mostly be used when the IAccessible Interface is enabled, but there are a few exceptions.
infratec has confirmed the problem he previously reported has been fixed. In addition, based on his suggestions a couple potential issues with the framework have been addressed.