Control for text display, highlight and scroll

If you are using the main C++ distribution of wxWidgets, Feel free to ask any question related to wxWidgets development here. This means questions regarding to C++ and wxWidgets, not compile problems.
User avatar
doublemax
Moderator
Moderator
Posts: 15174
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Control for text display, highlight and scroll

Post by doublemax » Wed Dec 11, 2019 10:54 pm

Editing is possible in priciple, but i don't know if it's possible to handle large amounts of text.
https://www.w3schools.com/tags/tag_textarea.asp

Saving is more difficult as the browser has no access to the local filesystem. And i don't know any way to transport large amounts of data back from the webview into the C++ part of the application.
Use the source, Luke!

ONEEYEMAN
Part Of The Furniture
Part Of The Furniture
Posts: 4425
Joined: Sat Apr 16, 2005 7:22 am
Location: USA, Ukraine

Re: Control for text display, highlight and scroll

Post by ONEEYEMAN » Wed Dec 11, 2019 11:25 pm

Hi,
Since all of it will be inside the "browser", it should be possible to save the page as HTML.

Unfortunately I am not sure how to do that... ;-)

Thank you.

User avatar
doublemax
Moderator
Moderator
Posts: 15174
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Control for text display, highlight and scroll

Post by doublemax » Wed Dec 11, 2019 11:41 pm

I built a small page with minimal CSS and JS. Unfortunately it works only properly when loaded from a "real" URL, not when loaded through a local file or SetPage(). Probably a security issue. So that seems to be a dead end.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <script>
    function onToggleTextMarker(el) {
      console.log(el)
      el.classList.toggle('marked');
    }
  </script>

  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    .line {
      color: #000;
    }

    .line:hover {
      background-color: #eea;
      cursor: pointer;
    }

    .line.marked {
      background-color: #aee;
    }
  </style>
</head>
<body>
  <span class="line" onclick="onToggleTextMarker(this)">some text here! </span>
  <span class="line" onclick="onToggleTextMarker(this)">some more some text. </span>
  <span class="line" onclick="onToggleTextMarker(this)">Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
  <span class="line" onclick="onToggleTextMarker(this)">Doloremque maxime consequuntur repellendus voluptas odio commodi illo praesentium ea corporis! Doloribus?</span>
</body>
</html>
Use the source, Luke!

purplex88
Filthy Rich wx Solver
Filthy Rich wx Solver
Posts: 235
Joined: Mon Feb 24, 2014 3:14 pm

Re: Control for text display, highlight and scroll

Post by purplex88 » Wed Dec 11, 2019 11:48 pm

I'll try to keep it simple. Basically I'll just need a report viewer only and highlighter thing to markdown the report. Then, of course, I want to save work i.e. the page as HTML.

purplex88
Filthy Rich wx Solver
Filthy Rich wx Solver
Posts: 235
Joined: Mon Feb 24, 2014 3:14 pm

Re: Control for text display, highlight and scroll

Post by purplex88 » Wed Dec 11, 2019 11:56 pm

Well, that worked for me.

I tried to load it using:

Code: Select all

wxString editorURL = "file:///C:/Users/purplex/Desktop/new146.html";
TextViewer = wxWebView::New(m_panel, wxID_ANY, editorURL);
Is that how you tried @doublemax?

User avatar
doublemax
Moderator
Moderator
Posts: 15174
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Control for text display, highlight and scroll

Post by doublemax » Wed Dec 11, 2019 11:58 pm

I tried that. The hover effect worked, but not the "toggle marked text with click". Try to load it with Chrome. There it worked for me even from a local file.

You might have to take a closer look at wxStyledTextCtrl. Unfortunately it's real pain to set up, it's badly documented and i've never used it, so i can't help with it :)
Use the source, Luke!

purplex88
Filthy Rich wx Solver
Filthy Rich wx Solver
Posts: 235
Joined: Mon Feb 24, 2014 3:14 pm

Re: Control for text display, highlight and scroll

Post by purplex88 » Thu Dec 12, 2019 12:01 am

That "toggle marked text with click" works for me perfectly. :? . How?

User avatar
doublemax
Moderator
Moderator
Posts: 15174
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Control for text display, highlight and scroll

Post by doublemax » Thu Dec 12, 2019 12:01 am

No idea ;)
Use the source, Luke!

purplex88
Filthy Rich wx Solver
Filthy Rich wx Solver
Posts: 235
Joined: Mon Feb 24, 2014 3:14 pm

Re: Control for text display, highlight and scroll

Post by purplex88 » Thu Dec 12, 2019 12:05 am

You saved me from taking the complete Javascript script course over this small effect I was trying to achieve. Well done :). All I need to do is export the highlighted text from the control as HTML file.

User avatar
doublemax
Moderator
Moderator
Posts: 15174
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Control for text display, highlight and scroll

Post by doublemax » Thu Dec 12, 2019 12:11 am

The best you can possible do is to present a download button. You won't be able to write directly to the file system without user interaction.

I need to go to bed now, so no more experiments from me for today ;)

If you want to take a shot at it, these are some things that might help:
https://www.w3schools.com/jsref/met_doc ... ssname.asp
https://stackoverflow.com/questions/366 ... ugh-server
Use the source, Luke!

purplex88
Filthy Rich wx Solver
Filthy Rich wx Solver
Posts: 235
Joined: Mon Feb 24, 2014 3:14 pm

Re: Control for text display, highlight and scroll

Post by purplex88 » Thu Dec 12, 2019 2:19 pm

Thanks! If I just want to save the state of the html i.e. my highlights, can I use something called 'localStorage' https://javascript.info/localstorage ?

User avatar
doublemax
Moderator
Moderator
Posts: 15174
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Control for text display, highlight and scroll

Post by doublemax » Thu Dec 12, 2019 3:46 pm

purplex88 wrote:
Thu Dec 12, 2019 2:19 pm
Thanks! If I just want to save the state of the html i.e. my highlights, can I use something called 'localStorage' https://javascript.info/localstorage ?
I've never tried, but my feeling tells me that won't work when using a local html file.
Use the source, Luke!

purplex88
Filthy Rich wx Solver
Filthy Rich wx Solver
Posts: 235
Joined: Mon Feb 24, 2014 3:14 pm

Re: Control for text display, highlight and scroll

Post by purplex88 » Thu Dec 12, 2019 4:54 pm

Maybe then I should simply use a real web browser for this :wink:

Post Reply