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

woahh one in a lifetime?

a second devlog??!?!?!

WHAAAAA?!

(quick btw note, we did like a 20 min session in school once that lead to nothing [img1])

We are back…

or are we?

the rpi said we were not…we spent like 30 min just trying to get the raspi to work againn with wifi, pain)

BUT NOW WE ARE!!!

in the airpod we found in arts (reread the last devlog <3) there was not enough place to fit our 3d printed resonance body…meaning i needed to make place

not me fisting the thing until i could rip out all the support walls and newspaper [img2]

but it was worthhhh it, now the complete stuff fits inside!

three times the charm ; right?

so last time we had to resolder the speaker like 4 times, and now we have to do so again (only 3 times); but now it holds, we switched the old cables to some demolished jumperwires at the last try! [img3]

so we booted…

and it would not conect, no matter how often i asked some random ai to debug, no matter how much of our combined 2 braincells we used…nothing was giving the result we wanted NOTHING [img4.1]

BUT THEN BUT THEN!!!

it suddenly worked, dunno why, it did let itself connect via spotify connect and bluetooth (sometimes bluetooth, depending on its mood)

WE FINALLY HEARD A SOUND THAT WAS ACTUALLY STREAMED!!!

[img4.2]

this is only a side fact [img4.3] @Chroma bumped his head against the table ripping out a support wall or smth…

but once we listed, we noticed something

the sound…it was muffled, not the true experience a high quallity product like AirPodsStudio should have, and the only valid reasoning was that the previosly designed body was not giving the sound back in its optimal way…so @Chroma used his (and claudes) combined 2 braincells to achieve and optimal design [img4.4],

This desing is printing RIGHT NOW

Stay tuned to see this journey come to an end

love you, and good evening or good night (the sun is rising rn HAHAHAHAHAHAHAHA)

OLD PROJECT (not mine) BUT BUILDING IT!!!!

quick disclaimer: this is my friends maximilians @Lumethra ’s project that he designed and we are now building together; We are building 2 pieces of it, one for him and one for a friend!

AHHHHHHH (the first soldering)

this was basically a teamwork between us two, him prepering, me putting the hotswapsockets in, him sanaty checking my work (image 4). This was a slight pain, but really doable (ignoring the fact he missed a ground connection in the pcb we had to wire manually)

less AHHH (for me)

maxi was doing some fixing/installing of the firmware he coded for the thing we just soldered together, he also put in the keycaps. He himself said that the firmware is very buggy but works, even the auth with the framework fingerprint sensor he planed for this project;
one quote:

never change a running system

AHHHH (for me)

while he was doing that (after like 20 min) i thought id optimise our workflow by heading downstairs and soldering the second of 2 keyboards. I was down there for 1h30min alone, with my headphones, they screamed a mix of katy perry, radiohead, linkin park and german rap into my ears, letting me completely focus on soldering (the first image shows me in the basement after like 70 min)

the only big mistake

while being so focused (frfr) i soldered the hotswapsocket for the backspace key in the wrong way, without noticing this became later called the ### forwoardtime ### (which later let us to resolder that piece while being only held alive by 2 energy drinks and no sleep at all making it a backspace again (yeee).

the last thing left was testing both keyboards (ofc without keycaps bc why would we)

(thats image 2)
and everything worked out fine after the backspace was fixed.

So we can finally say that Maxi and a friend of ours (@Chroma) have a custom keyboard designed by maxi (and the case by chroma) and built by sleepdeprived us.

yeeeeeeeee

new project…new stuff…i like

The idea

soo strava…garmin…whoop….apple…coros…all those things have paid plans in order to analyze training/health data…but i am neither willing to pay…or have the money to pay for such subscriptions…but i have ai.hackclub.com a lot of time…and willpower…meaning my goal is to recreate such service…for free :)

ill see how that will work out with tokens later lol

the first beautiful progress

so like most of my other web projects it will look like a tui or better said bc i always to the same structure and stuff i can make a basic pre version pretty fast!

hackclub ai first steps

so the api is really easy to use, i wrote a starting prompt…using my dearest friend chat (never ever used for coding) and sent it as role system to the ai…and everything else can just be directly taken from user input!!

todos

but now the biggest part…user/login/db handeling
and integrations of the different apps (strava, garmin etc.) and save that data in a db and leave the ai with a context (db) and use also non ai features like somple graphes from the data saved in the db…
so i guess the next step is login…and database lol

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 final version?

i added a small orphie in the blank spaceee and the controlls just like in any tui! Another addon is the functionality of the links and working controls!
yup…thats it! (sorry for undetailed storytelling)

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?

First mog version of the site…

at the end it should not work like the app…just advertise it…(its my first ai less project in ages so…need to get back at it)
later on one should be able to navigate like in the actual tui

part 3

little ashamed…nothing really changed here
my goal was to add more than 10 results when searching (its like that bc lite duckduckgo only gives 10 results on the first page) and ive tried so many diffrent ways to

NVM

i totally forgot…one can open pages now!!!
pretty awesome i know. js press tab, and its open!!!

good bye (for now)

part 2

i basically made the engine algorithm (or yoinked it)
not how planned with google, but with duckduck go
it works by just kinda scraping or taking the content from https://lite.duckduckgo.com/lite/ and then searching each result for title, url an snippet which is then returned and used in the main.go Update() function :=

the beningingof a lot of pain

uhmm never worked with go before…copying 90% out of random docs and tutorials…currently succeeding in the goal not using ai for coding…
i basically use those great libarys called lipgloss and bubble tea to make the ui…and the rest is just basic go for now….

yayyy scnd logg

css

@Lumethra forced me

its basically a grid…

The body is the main grid container, and each element gets assigned to a specific area:

• the canvas takes the top row
• the slider, color picker, and toggle go in the middle row
• the palette sits in the bottom row

hope your happy now (scnd image is the answer)
good evening

the one and only?

idk if i am calling this project finished already…but its kinda done…js looks ugly

it started as like a canvas experiment ts, i basically wanted a pixelart playground or whatever…and then i asked myself…why not let it generate a galaxy like shapeee…
and how i did it was drawing a simple grid, generating an even simpler spiral and every point that was in a gridcell decides that this cell is getting colored…easy right?
yup…

color palette

for the coloring, had a little fun there bc i found a SUPERRR interesing video (https://www.youtube.com/watch?v=gnUYoQ1pwes)
and i wanted to kinda let the palette generate from one base color…so i made like hex to hsl conversion with the given color so i could adjust the hue and created several colors from that base hue:
background: a dark, muted versiondust: a darker, desaturated tonenebula: a medium, vivid tonecore: a brighter, lighter highlightstars: a very light near-white toneglow: a brighter accent color, which is not random, but a nice always fiting palette…

the actual coloring

so i used a simple (copied) noise script to decide where which color needs to go, and then for each weight (or height) of each pixel of the noise it chose one of the set colors….

funsies

for funsies one can look at the noise…bc why not

final words

this project ig is more about play, having fun with overcomplicated ways of doing shit and less about polishing a great ui…

have a nice day <3