idk okkayy idk?!?!

basically

i last touched this project months ago….and got no ideaaa what i changed…BUT if my judgement isnt wrong ive optimised the rendering of overflow….aka using viewports to make scrolling possible (or at least the basis for that. This means that huge sites will not be cut of or ruin the complete terminal, but show only the part you are on right now!

yeeee

thats it, it took a while, lots of docs reading, just to change like 30 lines of code in the end lol…was worth it (i hope) yaaa (for example on this convinient website i could scroll https://www.york.ac.uk/teaching/cws/wws/webpage1.html (dont try heavy sites tho, very limited app)
sadly this will be the last devlog of this project inside of startdance…I CAN GARUNTEE tho that just like every project i could not finish inside of stardance, this will be finished in future hackclub events or elsewhere yeeee

fourthhhhhhhhh

videos? whatttt (not really tho)
sooo after getting images to render so smoothly i got real confident rendering videos…and made it as far as rendering every frame of the video….well…thats progress…but i have not yet made a way to playback it cleanly….and i dont want to do it now lol, ill leave it as it is and inmplement some way to scroll trough the site…bc rn it tries to render EVERYTHING and that breaks it….so in future there will be smth called visual content…and thats the only part getting rendered…and when pressing up or down…it goes up or down!

as for explaining the video part…ill do that when i finalize it :)

the 1. image shows 3 frames of this video

thirdddd oneee, we movingg fastt asf

we managed coloredddd images and simple integration of the whole concept (not cleanly working bc sizing is very not nicely done lol sorry)

nevertheless

i wanted to take time on explaining HOW i am rendering images and how and why its working!

How???!

pt 1. get the img

pretty self explaining…..
we load it with http get and then decode it with the golang image thing….ezzzz

pt 2. sizing

if we look a little into the future….i wanna integrate css…meaning sizes of the diffrent elements…and because of that…ill just say if width and height is given itll js be sized that way, BUT if either one is 0 this value gets calucated with the other and the ratio of the actual image to keep it sized correctly!

pt 3. the coloring and asciification of the image

finally smth interesting lol
this is the part in the scnd image

this part will be a little long but ill try to keep it short..

the first thing we need is some characters to represent different brightness levels:
const chars = “ .:=+*#%@”
the idea here is pretty simple: characters near the beginning are visually “lighter”, while characters near the end are more filling ig and therefore look darker.
yayy
then we basically iterate trough the entire image…but not in actual pixel size…but in calculated one how we need it…bc of we will have the image in lower resolution….
and then we just yoink that part and take its rgb valuessss
but here is the next problem…for the brightness we cannot just use the raw rgb things…we need to convert them to grayscale…because a maxed out green looks brighter than a maxed out blue! (prettyyy simple) now the not so simple part…for the converion i use a so called weighed avg…the same opencv uses….i did not understand a single thing written in those docs tho BUTTT i found a fancy blog post on rgb to grayscale convertion…soooo i just yoinked the formula!
so far so good…now just pic a corresponding char to the brightness print that…and you got yourself a niceeee image…but colors tho? now its grayscale
WAITT we already have the rgb colors?! so just use some random ass ansii codes (ive copied from stackoverflow) to tell each char to have the fitting rgb of the image…how simple is that
after we js tell the terminal to be normal again and we got ourselves a nice and clean ascii generator!

love it

final words for today

thx to anyone actually reading this <3 was really fun to build it and it takes me a huge step to my goal of a working browser in your terminal. i cannot promise that every devlog will be so detailed…and ofc this all did not happen in just these 52 min…most of it already happend last devlog…i just did not want to explain it back then lol

second of manyyy

another 3h…soooo one big future problem ill face will be image or video rendering…soo lets just face it rn…that way I can procrastinate implementing css lol
myy current way of wanting to solve that is generating ascii art….soo i am doing that now…only for images currently…but no videos yet, and there is no real coloring yet!
but was really fun to implement this until here and I lovee this project! and the second pic is the responsible for loop for converting pixel to ascii/grayscale

first of many (i hope)

its been about 3h…i think its time for a quick devlog
we got working:

• Tab system (like everytime you enter a url a new tab gets opened)
• html fetching (we take the html via a pretty go libary and recieve so called html nodes…which are getting converted into a object (im sorry if they are not called objects in go)
• and each and every of these loaded elements then later gets interpreted

for the future:

• i want more html tags supported…
• i want css? (or basic css)
• i want (no) javascript
• i want to refine the tab system
• i want to (later later) make my old search engine as homepage?