AutoItHelp v3.3.16.1 and v3.3.18.0 with external CSS loading

[argumentum]

57 minutes ago, SOLVE-SMART said:

(if I had access to the sources).

5 hours ago, argumentum said:

The files to make the CHM/HTMs are there for download

🤔

59 minutes ago, SOLVE-SMART said:

It's unfortunate to use several css classes to apply a AutoIt code syntax highlighting when we have services that allow the visualization (syntax highlighting) for different languages more or less out-of-the-box. prismjs.com or highlightjs.org to name two of several.

The web site and the CHM is the same as far as the HTM files.

I just wanted dark mode for my dark life. Like bat-man in the bat-cave ( need a sad back story, but I'll think of something... ).  
Anywayz, ..do it. Just do it. A proof of concept. In the downloads there are other stuff I used for testing CHM stuff.
Put your code where your adventurous speech is at ( a funny way to be rude to you, but am bat-man  ).

@WildByDesign 's idea is good, I think. Yours is good too ... 🤔

If is better..., I'll do a JPM approach: show me what you've got. 

P,S.: Most everything on this site: UDFs, help file, etc. ( I used "etc." but that is about everything there is ) was/is made by users like you.  

[SOLVE-SMART]

14 hours ago, argumentum said:

Anywayz, ..do it. Just do it. A proof of concept. In the downloads there are other stuff I used for testing CHM stuff.

Hi bat-man, I mean @argumentum 😅 ,

I would start with a PoC, yes. But I need the sources which are used to create the current HTML and CSS structure. My assumption was, it's stored in the AutoIt SVN where I don't have access to. I don't want to go the way around and parse the current HTML documentation site by site and recreate the docu.

Did I maybe miss something that I have to consider? I didn't read the all thread posts ... .
Thanks for a possible enlightening 😁 .

Best regards
Sven

Update:
Q: Did I maybe miss something that I have to consider?
A: Yes 😅 , I missed the fact that you already linked the docs source.

Sorry, I will have a look later today.

Edited Tuesday at 11:16 AM by SOLVE-SMART

[bladem2003]

With the help of FAR HTML, I created an AutoIt help file with index and search functionality.

The index.htm file can be loaded with @ioa747,s WebView2AutoIt or any browser.

 

 

AutoitHelpDark.7z

[WildByDesign]

1 minute ago, bladem2003 said:

With the help of FAR HTML, I created an AutoIt help file with index and search functionality.

Incredible! Nice work. I quite often use the help files, almost daily. So having this available locally and in such a beautiful theme, this is perfect.

[argumentum]

12 minutes ago, bladem2003 said:

With the help of FAR HTML, I created an AutoIt help file with index and search functionality.

"FAR HTML is a free Windows application. A collection of help authoring and file utilities."

Ok, free is good.
Given that the software is free, I think that attempting an integration that generates this ( help file with index and search ) in the workflow of the AutoIt help file ( and web site ) will not be limited by licensing concerns.
So, the web site wouldn't need much convincing to the higher ups ( you know who you are ).

Now, CHM vs WebView2. CHM can run anywhere, WebView2 not so sure. ( I'd love to have a fully functional help file in WinPE 😍 )
Then we will have to come up with a AutoIt3Help.exe to work with the WebView2 version in local PCs.

I guess that if we make an AutoIt3Help.exe script ( by we I mean you all ), am sure that it can be translated to C and have the alternate ( for now ) "local web help".

Again, this forum brought about everything around and in the AutoIt distribution.
So it'd be up to us forum members, to change the ways things are, that as always, change bring about some degree of resistance 🤷‍♂️

This is me thinking out loud. As always, "put your code where your mouth is"(tm)  

 @bladem2003, nice going. Thanks  

P.S.: Everything that builds the help file and web site, needs to run from a command line.

[argumentum]

..and:

"Click for more help" links to "https://kb.helpwaregroup.com/far/webhelp/search-help" that don't exist.
Given that this is close to abandonware ( last update in 2019 ), the generated files will have to be patched for coherent functionality.
We are responsible of whatever we host and can not claim that is not our fault because we are in the software business ourselves  😲

Edited Friday at 08:00 PM by argumentum
English

[bladem2003]

31 minutes ago, argumentum said:

..and:

"Click for more help" links to "https://kb.helpwaregroup.com/far/webhelp/search-help" that don't exist.
Given that this is close to abandonware ( last update in 2019 ), the generated files will have to be patched for coherent functionality.
We are responsible of whatever we host and can not claim that is not our fault because we are in the software business ourselves  😲

Yes I know I have already patched some files to make the dark theme.

[argumentum]

..did some patching too
 

Spoiler

expandcollapse popup

<!DOCTYPE html>
<!-- !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" -->

<!-- 
//*==============================================================================  
//*    ** DO NOT REMOVE OR MODIFY THIS COPYRIGHT MESSAGE **                        
//*                                                                                
//*    Document generated by FAR HTML 5 
//*    Copyright (c) 2004-2016 The Helpware Group
//*    http://helpwaregroup.com/
//*    WARNING: You must purchase a copy of FAR HTML v5 or greater to publish this file.
//*
//*==============================================================================


  changes by argumentum on 2026.02.13 ( not a credit line, just a note to know who did what when )

-->
<html>
<head>
  
<!-- add extra header code to main frame here -->  
<link rel="icon" href="favicon.ico?v=2" type="image/x-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"/> 


<script src="hw_library.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
  function DebugOut(s) 
  {
    var debugDiv = document.getElementById("debugDiv");
    if ((debugDiv != null) && (debugDiv != undefined))
      debugDiv.innerHTML = s;
  }
 
  function ResizeDivs() 
  {
    //resize main pane vertically
    var hh = GetDocHeight();
    if (debugDiv !== null && debugDiv !== undefined)
      hh = hh - debugDiv.clientHeight;
    if (bannerDiv !== null && bannerDiv !== undefined)
      hh = hh - bannerDiv.clientHeight;
    if (topSpacerDiv !== null && topSpacerDiv !== undefined)  
      hh = hh - topSpacerDiv.clientHeight;
    mainDiv.style.height = hh + "px";

    //resize rightDiv to fill content space horizontally
    var ww = GetDocWidth() - leftDiv.clientWidth - splitterDiv.clientWidth;
    if (ww > 0) {
    
      // 2017/07/25 Fix for Chrome: If browser Zoom <> 100% and right frameDiv too wide we may lose right pane visibility. Shaving a pixel off. 
      if (window.devicePixelRatio) //defined
      {
        var isZoomed = Math.round(window.devicePixelRatio * 100);
        if ((isZoomed !== 100) && (isZoomed < 200) && (ww > 1))
          ww = ww-1;         
      }    
    
      rightDiv.style.width = ww + "px";
    }
  }
  
  //== Start Splitter Code ============================================================================

  var spitterActive=false;
  var SPLITTER_MAX = 500;
  var SPLITTER_MIN = 10;
  var saveSplitterColor = "";
  
  function InitSplitter() {
    splitterDiv.onmousedown = SplitterMouseDownEvent;
    document.onmouseup = SplitterMouseUpEvent;
    document.onmousemove = SplitterMouseMoveEvent;
  }
  
  function SplitterMouseDownEvent() {
    spitterActive = true;
    leftFrame.style.visibility = "hidden";
    rightFrame.style.visibility = "hidden";
    saveSplitterColor = splitterDiv.style.backgroundColor;
    splitterDiv.style.backgroundColor = "#e2e2e2"; //make splitter visible
  }
  function SplitterMouseUpEvent() {
    if (spitterActive) {
      spitterActive = false;
      leftFrame.style.visibility = "visible";
      rightFrame.style.visibility = "visible";
      splitterDiv.style.backgroundColor = saveSplitterColor;  //respore original color
    }
  }
  function SplitterMouseMoveEvent(event) {
    if (spitterActive) {
      event = event || window.event;
      var midPoint = leftDiv.clientWidth + (splitterDiv.clientWidth / 2);
      var xDiff = midPoint - event.clientX;
      var newPos = leftDiv.clientWidth - xDiff;
      if (xDiff !== 0 && newPos < SPLITTER_MAX && newPos > SPLITTER_MIN) {          
        leftDiv.style.width = newPos + "px";
        ResizeDivs();
      }
    }
  }
  

  //== End Splitter Code ============================================================================

  var leftDiv;
  var rightDiv;
  var splitterDiv;
  var leftFrame;
  var rightFrame;
  var topFrame;

  var debugDiv;
  var bannerDiv;
  var mainDiv;
  var topSpacerDiv;
  
  function InitializeDocCode() 
  {
    leftDiv = document.getElementById("leftDiv");
    rightDiv = document.getElementById("rightDiv");
    splitterDiv = document.getElementById("splitterDiv");
    leftFrame = document.getElementById("leftFrame");
    rightFrame = document.getElementById("rightFrame");
    topFrame = document.getElementById("topFrame");
  
    debugDiv = document.getElementById("debugDiv");
    bannerDiv = document.getElementById("bannerDiv");
    mainDiv = document.getElementById("mainDiv");
    topSpacerDiv = document.getElementById("topSpacerDiv");    
    
    //validation check vars
    if ((!leftDiv || !rightDiv || !splitterDiv || !bannerDiv || !mainDiv || !debugDiv)
    || (!leftFrame || !rightFrame || !topFrame || !topSpacerDiv))
      alert("code error 101: uninitialized vars");
      
    //to enable debug pane comment out next 2 lines
    debugDiv.style.height = 0 + "px";
    debugDiv.style.visibility = "hidden";
  }

  function OnLoadEvent() {
    window.onresize=ResizeDivs;
    ResizeDivs();
    InitSplitter();
  }  
  
  function GetThisFName() {
    path = location.pathname;  // "http://c:/base/start.htm" --> "base/start.htm"
    var fname = path.substr(path.lastIndexOf("/") + 1, path.length);   // "base/start.htm" --> "start.htm"
    return(fname);
  }

  var lastClickCount = 0;
  
  function RightFrameLoadEvent() { //Event fires when right frame changes -- However wont fire in Edge for out of domain URLs
    if (mySessionStorage) {  // works in HTML5 
      var c = 0;
      if (mySessionStorage.clickcount) c = Number(mySessionStorage.clickcount);
      if (lastClickCount == c) 
        mySessionStorage.setItem("hw_rightPath", "");  // Clear memory set by NavScript -- NavScript was skipped (so external URL)
      lastClickCount = c;
    }  
  }  
 
  //-->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title Text</title>
</head>

<body onload="OnLoadEvent()" style="margin:0px;overflow:hidden; scrollbar-color:#202020 #353535;background-color:#202020;">
  
  <div id="debugDiv" style="background-color:#ffdddd;"></div> 
  <div id="bannerDiv" style="width:100%;height:0px">
    <iframe id="topFrame" src="" height="100%" name="top" scrolling="no" style="width:100%;height:100%;border:none;padding:0px;margin:0px;overflow:hidden;"></iframe>
  </div><div id="topSpacerDiv" style="width:100%;height:0px;">
  </div><div id="mainDiv" style="height:200px;width:100%;">
    <div id="leftDiv" style="display:inline-block;width:280px;height:100%;">
      <iframe id="leftFrame" src="" hight="100%" name="left" scrolling="no" style="width:100%;height:100%;border:none;padding:0px; margin:0px;overflow:hidden;"></iframe>
    </div><div id="splitterDiv" style="display:inline-block;width:4px;height:100%;cursor:col-resize;background-color: #ff0000;">
    </div><div id="rightDiv" style="display:inline-block;width:300px;height:100%">
      <iframe id="rightFrame" src="" hight="100%" name="right" style="width:100%;height:100%;border:none;padding:0px; margin:0px;overflow:auto;" onLoad="RightFrameLoadEvent()"></iframe>
    </div>
  </div>

<script type="text/javascript">

  // ensure page is not loaded inside another frame
  if (top.location != self.location) {top.location = self.location;} 

  InitializeDocCode();

  // =================================================================================
  // Frame files can be passed in
  //-- eg. thisfile.htm#index2.htm                -- sets the content frame only
  //-- eg. thisfile.htm#index2.htm+hh_search.htm  -- sets the content and nav frame
  //-- eg. thisfile.htm#+hh_search.htm            -- sets the nav frame only
  // =================================================================================
  var LeftFile="hh_toc.htm";    //eg. hh_toc.htm
  var RightFile="ht_contents.htm";  //eg. index.htm (home/default page)
  var TopFile="";      //eg. companybanner.html -- Set "" to hide top banner
  var Param=window.location.hash.substring(1);
  var Params=Param.split("+");
  if (Params.length >= 2) {
    if (Params[1] != "") LeftFile=Params[1];
  }
  if (Params[0] != "") RightFile=Params[0];
  LeftFile = LeftFile + "#" + RightFile;  // pass right frame urk to toc frame

  //is HTML5 sessionStorage available? Then make some info available to the frames
  if (mySessionStorage) {  
    mySessionStorage.setItem("hw_topPath", GetThisFName());  //top filename
    mySessionStorage.setItem("hw_rightPath", "");            //right frame file
  }  
  
  //load frames 
  leftFrame.src = LeftFile;
  rightFrame.src = RightFile;
  if (TopFile !== "")    
    topFrame.src = TopFile;

  //Set User prefs
  if (TopFile !== "") bannerDiv.style.height = 0 + "px";
  else bannerDiv.style.visibility = "hidden";
  splitterDiv.style.backgroundColor = "#333333"; /* Ly */
  splitterDiv.style.width = 2 + "px";

  leftDiv.style.width = 264 + "px";
  leftDiv.style.backgroundColor = "#202020"; /* Ly */

 //rightFrame.style.width = 264 + "px";

//rightFrame.style.scrollbar-color = "hidden";

  topSpacerDiv.style.height = 0 + "px";
  topSpacerDiv.style.backgroundColor = "";

  ResizeDivs();
</script>  

  
</body>
</html>

because I didn't like the red divider nor the white background.

The colors around the files are going to have to be moved to the default.css to make it more flexible and be able to change "color modes" ( light/dark ) on the fly.

[argumentum]

22 minutes ago, bladem2003 said:

already patched some files to make the dark theme

..then I guess I should leave it alone for now because you are still working on it. When you feel that you're good with as far as you took it, I'll play with it.
If you can take a request: make it "sync to toc" when an internal link is clicked, to mimic a CHM.

[WildByDesign]

How easy would it be to change the code snippet font that is being used? Is that changed from just 1 CSS file or multiple?

I am on my phone right now so I can’t look at the files.

[bladem2003]

29 minutes ago, argumentum said:

..then I guess I should leave it alone for now because you are still working on it. When you feel that you're good with as far as you took it, I'll play with it.
If you can take a request: make it "sync to toc" when an internal link is clicked, to mimic a CHM.

Feel free to play with it and post your results here

[argumentum]

...this ZIP ( down below ) is what my version of the web site would look like but is an alpha.
The JS and CSS are the same. Just the HTM files are not in sync with 3.3.18.0 because is based on the current alpha.
If you can use some of the code from it, have at it  

 

11 minutes ago, WildByDesign said:

I am on my phone right now so I can’t look at the files.

Then look at everything once you're back to your PC.

None of this is final and nothing is just one file yet with @bladem2003's compilation. It will take some rewriting/coding to get there.

Also, all these HTM should be loaded with a web server ( I use Apache ) and there are examples all over the forum ( from me too ) to make one with AutoIt.
Loading HTMs as files will not allow some of the feature to work as coded.

Just now, bladem2003 said:

Feel free to play with it and post your results here

I did and the ZIP down below is what I did on my side, long before you came up with yours, ...that 'd like to merge but I don't have much time to "go at it", and "full speed ahead" is my only mode 🤷‍♂️

I like this type too but again, no time  😕

Ok, I'll leave it up to y'all. Make me proud ! 🥹

AutoItWebSite-v3.3.19.0-Alpha_r13287(argumentum).zip

[bladem2003]

I've made some small progress.

I've put a few styles into a CSS file and colored the buttons.

My HTML knowledge is limited, so if anyone wants to help, they're welcome.

 

AutoitHelpDark0.2.7z

[argumentum]

All these WYSIWYG CHM compilers use the M$ workshop. So they are wrappers.
The nice thing is the HTM output, and that, we can cook our own in AutoIt. The science behind it is the JavaScript that makes it all work together. If someone feels like tweaking all these to come up with something visually appealing that works by running a script ( because by hand is a "nothing burger" ) then we have something that will work consistently in building the help file.

Then the WebView2 have to work with the AutoIt3Help, and since WebView2 is only the "browser", an HTM daemon serving these HTM files to WebView2 has to work with it all too.
Press "F1" and AutoIt3Help tells the "HTM deamon" to tell the browser to goto "this page" ( or something like that ).

It's an interesting adventure to take on, and a very welcomed product once up and running.

Spoiler

Should post: now recruiting "front end", "back end" and "all ends" developer. Must have 30 years experience in: everything

 

Edited 14 hours ago by argumentum
for the lols