wless.html

e<h1>./wless browser</h1>

<p><tt>./wless</tt> is a tiny but capable <tt>less</tt>-style pager for <tt>./w</tt> browser.</p>

<p>It is meant to be easily extensible, as much as <em>C</em> can be, haha! Many command are implemented by calling external <tt>shell</tt>-scripts. So in one way it's modular.</p>

<h2>Key Commands</h2>
<p>The browser try to be compatible with both <tt>less</tt> and <tt>chrome, firefox, opera</tt> while still providing textual (non-mouse) navigatable <em>enhanced</em> experience!</p>
<br><br>

<h3>Help</h3>
<pre>
^H ? F1        - help
</pre>


<h3>Paging</h3>
<pre>
^V  SPC         - page down
M-V  M-SPC  DEL - page up
UP  ^P          - up one line
DN  ^N          - down one line
&lt;  M-&lt;          - top
&gt;  M-&gt;          - bottom
^G              - cancel/redraw screen
^R              - reload page

ab RET          - go link in new tab
TODO: AB RET    - go link in back
</pre>

<h3>Searching</h3>
<pre>
foo ^S          - search page for "foo"
foo ^O          - only matching lines
^G              - cancel search
</pre>

<h3>Tabs</h3>

<pre>
http://foo      - open URL in <i>new</i> tab
(^W             - close tab)

M-A .. M-Z     - open user defined TAB
M-0 .. M-9     - open user defined TAB
</pre>

<h3>History</h3>
^F RIGHT       - forward tab (next)
^B LEFT        - backward tab (prev)
</pre>

<h3>Bookmarks</h3>
<pre>
*              - star current page
#hastag        - Add a hashtag
$any comment   - Add a comment
@G             - assign ALT-G to current page (create shortcut)

=query         - Seach for query
%regexp        - ... using regexp
</pre>

<h2>Touching/Clicking</h2>

Touch has a few concepts that that we'll use:

<dl>

<dt>tap (click)</dt>
<dd>Tapping is just, fast touching an area of the screen. Don't move the finger.</dd>

<dt>flick</dt>
<dd>Is fast touching an area of the screen and <i>flicking</i> your finger up ro down accroding to the defined action. It's a short and fast movement.</dd>

<dt>drag<dt>
<dd>Dragging is putting your finger, in the main middle/center area and moving it up and down, just as you normally do when browsing on a mobile.</dd>

<dt>scroll</dt>
<dd>Scrolling is to touch an area and move the finger up and down, watching the feedback as lines/data scroll up and down. Notice that the the movement direction is <b>opposite<b> from dragging</dd>

</dl>

<h3>Drag and Scroll</h3>
<pre>
               RELOAD            MENU
                 |                 |
              HISTORY              V
                 |                 
                 V                 

^                ^                 ^
|                |                 |
|                |                 |
|                |                 |
|                |                 |
|                |                 |
|                |          ^      |
|                |      ||||||||   |
|                |      ||back||   |
HISTORY     DRAG PAGE   ||  o ||  SCROLL
|                |      ||forw||   |
|                |      ||||||||   |
|                |          v      |
|                |                 |
|                |          ^      |
|                |      ||||||||   |
|                |      ||next||   |
|                |      ||  o ||   |
|                |      ||prev||   |
|                |      ||||||||   |
v                v          v      v

^                ^                 ^
|                |                 |
|              FUTURE              |
|                |                 |
|           REDOWNLOAD             |
</pre>


<h2>Draggin the page</h2>

<p>By putting your finger on the content and dragging it up and down you're <b>dragging</b> the "paper" up and down on the screen. This is the normal way to move in longer documents on mobile.</p>

<h2>Clicking on links</h2>

<p>Yes, you just click on any link and it'll be hilighted in inverted red for a short time before the destination page is shown. To go back you can either use <kbd>CTRL-B</kbd> or...</p>

<h2>Back / Forward flick</h2>

<p>To go <b>back</b>, you <i>flick</i> the middle right part of the screen up. Flicking down, goes <b>forward</b>.</p>

<h2>Next Page/Previous flick</h2>

<p>It's kind of a short and quick drag motions that moves further. You can go to the next page by <i>flicking</i> the lower right area of the screen up. Flicking down goes up one page</p>

<h2>Scroll(bar)</h2>

<p>The far right area is dedicated to fast scrolling up and down

<h3>Click Buttons</h3>
<pre>
Page       Voice Search      Close
Info




Prev Tab                      Next Tab



                              Page Up

CLEARCMD       INFO           Page Down
</pre>

<h2>Searching</h2>
<p>Searching is facilitated by just typing text on the command line and then pressing <kbd>^S</kbd>. It'll hilite <i>visible</i> matches. The scroll or up/down arrows <i>still</i> scroll lines and not matches, this may seem strange and may change, watch the top right corner to see the line changes.</p>

<p><b>Narrowing:</b> by pressing <kbd>^O</kbd> one can <i>narrow</i> the view to only matching lines. As you scroll, things dissapear at the top, that means you're situated at that very matching top line visible. Again, pressing <kbd>^S</kbd> you'll see the matches in context.</p>

<p><b>Notice:</b> that when navigating to other tabs, the search is still active! This means one can easily scan pages for specific content. As always <kbd>^G</kbd> cancels search/narrowing.</p>

<h3>Searching/Narrow tags</h3>
<p>To easily navigate and understand the document, one can search for tags: To get an overview of the document search for all header elements <kbd>&lt;h</kbd>. <kbd>&lt;a ^O</kbd> will search/narrow to only show lines with links on them. <kbd>&lt;li ^O</kbd> will show list-items, which most likely are menu-items.</p>

<p>In fact you can search for any tag; to find bolded search for <code>&lt;b ^O</code>.</p>

<p>In addition, you can search for named tags, either named with <code>id= name= key=</code>. This is similar to adding <code>#search</code> to the URL in the browser.</p>

<p>As usual, <kbd>^G</kbd> cancels the search/narrowing. A search and narrow of the empty string have the same effect</p>

<h2>Notes on Guesture Navigation</h2>
<p>Amazing enough, on Android using Termux, the terminal can read a limited set of touche operations. They are:</p>
<ul>
<li>touch a point at the screen (click)<br>
  My jio library gives a MOUSE_DOWN and MOUSE_UP event. Booth have the same coordinates.</li>
<li>touch and drag, up and down<br>
It's limited, there is no ability to detect sideways scroll. The output is a continious scroll event at every moment once initiated. The events have the button field set to 64 for draggin down, and 65 for up-drag<br>Each event has the original position</li>
</ul>

<p>As can be seen, these events are quite limited. But, we can still work with it. The drag is quite accurate and can be used to scroll up and down smoothly. It even has a bit of <em>gravity</em> in that a fast limited scroll yields more events than the same length slow movement!</p>

<p>So this is the plan: "reserve" various areas of the screen for operations. For example, these regions are special:</p>

<h3>Action on top NOUNS</h3>
<pre><b>
bookmark         location     bin</b>

SHOW/info        SHOW         SHOWitTbin
bookmark         (reformat)   (close)
  
STAR             STAR         REMEMBER
(make bm)        (reload)     undelete

LIST             LIST         LIST
bookmarks        history      deleted

HASHTAG          COPY         QUIT
</pre>

<h3>Middle NOUNS</h3>
<pre>            
                GOTO TOP

                

                this page



                GOTO BOTTOM 
</pre>       

<h3>Weather Direction</h3>
<pre>
<b>NW  N  NE</b>
wn  n  en
<b>W   C   E</b>
w   s  es 
<b>SW  S  SE</b>
</pre>

<pre>

          NW    (N)     NE
            \    |    /
         wn  \   n   /  en
              \  |  /
       (W) ---- (C) ---- (E)
              /  |  \
         ws  /   s   \  es
            /    |    \
          SW    (S)    SE


</pre>

<h2>color support</h2>

./w - the minimalist Webbrowser 

Now have sisters for limited colors. It looks at inline style css in the attribute of the trash, but ignores style sheet definitions/files/classes 

It also recognizes the legacy color and bgcolor attributes.

Tbe color specific fictionally 16 lines. And about 16 LOCs (lines) for a getcolonval() function. I already had written a parser and decoder for all the web color names and and various formats #abc #aabbcc aabbcc abc name rgb(nn, nn, nn) a while ago, bit today it came together.

Still, tables ignores in-cell formatting. That's for another day .. 

I find it something isn't clear how to do, or not efficient, wait! Don't force it now. When it comes to you and it's clear -- it'll be easy to implement!

Html2ansi is now 676 LOCs and browser about 1200.

Next I'm adding a diff function for webpages, it'll show you what changed since you last loaded the it. 

It's be part of my "follow" function that will handle RSS style feeds.