[C++] Afbeelding geheel in html plaatsen - Softwareontwikkeling

donderdag 15 mei 2003 16:15

Acties:

Verwijderd

Topicstarter

Normaal heb je in een html document een img tag oid als je naar een afbeelding verwijst. Ik vond dat een beetje saai, en ging puur voor de grap een c++ programma maken om het plaatje volledig te ntegreren in de html. Dat de ik door een tabel te maken en iedere td de kleur van de bijbehorende pixel te geven. Dit werkte prima, tot ik ging optimaliseren. De html werd ruim 800 kByte groot, te groot dus. Dus ik dacht, een kleurcode is:

code:

1	BGCOLOR=#000000

Als ik nu eerst alle kleurcodes ophaal, en dan kijk of er meer dan 2 na ekaar komen, dan doe ik gewoon

code:

WIDTH=x

Dat heb ik dus geprobeerd, maar dan klopt mijn plaatje niet meer. De code die ik gebruik staat hieronder.

code voor het dec naar hex

C++:

 
string maakHTMLuitLong(long input)
{
    string bffr = "#      ";
    string hexcodes = "0123456789ABCDEF";

    input = RGB((input%16777216)>>16,(input%65536)>>8,input&255);

    for(int a=0; a<6; a++){
        bffr[6-a]= hexcodes[input&15];
        input/=16;
    }

    return bffr;    
}

En de functie die het html bestand maakt:

C++:

char bffr[255];

ofstream bestand;
bestand.open("c:\\htmlding.html");
bestand << "<HTML><HEAD><TITLE>Mooi HTML PLAATJE!</TITLE></HEAD><BODY>";

sprintf(bffr,"<TABLE cellpadding=0 cellspacing=0 width=%d height=%d>",width, height);
bestand << bffr; 

HDC dc = GetWindowDC(GetDlgItem(hWnd, IDC_PIC));

string * pixels = new string[50000];
int x;
int teller=0;

for (int y=0; y<=height; y++){
    for (x=0; x<=width; x++, teller++){
        pixels[teller] = maakHTMLuitLong(GetPixel(dc,x,y));
        SetPixel(dc,x,y,0);
    }
}
teller=0;
int meer=0;

for(int y=0; teller<=(width*height); y++){
    bestand << "<TR>";
    OutputDebugString ("\n Nieuwe Y waarde!");
    for (x=0; x<=width; ){
        bestand <<"<TD";
        for(meer=1; meer<(width-x), pixels[teller]==pixels[teller+meer]; meer++);
        if (meer>1) bestand << " WIDTH=" << meer;
        bestand << " BGCOLOR=" << pixels[teller] << ">";
        teller+=meer;
        x+=meer;
    }
}

bestand << "</TABLE></BODY></HTML>";
bestand.close();

Als compiler gebruik ik VC++.net

Het niet geoptmaliseerde ding staat hier:
niet geoptimaliseerd
En het plaatje staat hier:
plaatje

[ Voor 37% gewijzigd door Verwijderd op 15-05-2003 16:25 . Reden: foutje over de grootte, toevoegen plaatje ]

donderdag 15 mei 2003 16:41

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

En wat werkt er precies niet? Want wij zijn hier niet om jouw code uit te pluizen op zoek naar mogelijke errors

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

donderdag 15 mei 2003 16:44

Acties:

intGod

Ars non postulat causam

Je moet colspan gebruiken ipv width.

donderdag 15 mei 2003 16:46

Acties:

Verwijderd

Topicstarter

De code draait perfect, daar ligt het niet aan. Maar het probleem zit hem in de optimalisatie. Ik krijg kartels aan de rechterkant, dus de breedte wordt ergens fout gedaan.

@intGod: Waar moet ik colspan gebruiken?

donderdag 15 mei 2003 16:50

Acties:

Woy

Moderator Devschuur®

omdat als je geen colspan hebt en je gewoon width=2 doet bijvoorbeeld wordt die hele column 2 breed dus ook alle pixels die eronder zitten

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

donderdag 15 mei 2003 16:50

Acties:

OnTracK

bij je uitleg boven aan staat WIDTH=x, terwijl dit niet kan omdat de andere regels die op dezelfde kolom liggen ook die breedte krijgen, ipv daarvan zou je colspan=x.

en eigenlijk voor de volledigheid width=x en colspan=x

[edit]
waarom beide? als er allemaal cellen bovenelkaar zitten die in hun eigen rijtje weer dezelfde kleur hebben, krijgen die allemaal width=1, als je nu ook de width opgeeft dan krijg je dit soort foutjes niet (en dat scheelt weer een hoop gezoek in de code waar het nou eigenlijk fout is gegaan)
Ik weet het, het kost weer een stuk coden, maar ik zou het toch maar doen

[ Voor 46% gewijzigd door OnTracK op 15-05-2003 16:54 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

donderdag 15 mei 2003 16:51

Acties:

Verwijderd

Topicstarter

Ik heb zoals intGod en iemand anders mij net vertelde, COLSPAN gebruikt. Ipv

C++:

1	if (meer>1) bestand << " WIDTH=" << meer;

staat er nu

C++:

1	if (meer>1) bestand << " COLSPAN=" << meer;

Bedankt hiervoor! Is er trouwens nog meer wat geoptimaliseerd kan worden?

donderdag 15 mei 2003 16:54

Acties:

Woy

Moderator Devschuur®

Als je blokken van x * y hebt kan je ook nog colspan en rowspan instellen. Of als je alleen verticaal dezelfde pixels hebt alleen rowspan

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

donderdag 15 mei 2003 16:55

Acties:

OnTracK

en misschien in je final versie je stringnamen wat inkorten, misschien niet helemaal netjes, maar het scheelt een hoop ruimte bij duizenden pixels

rwb schreef op 15 mei 2003 @ 16:54:
Als je blokken van x * y hebt kan je ook nog colspan en rowspan instellen. Of als je alleen verticaal dezelfde pixels hebt alleen rowspan

Hij gaat horizontaal regel voor regel de tekening af (toch?) het inbouwen van een vergelijking tussen verticale pixels wordt al een stuk moeilijker.

[ Voor 57% gewijzigd door OnTracK op 15-05-2003 16:57 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

donderdag 15 mei 2003 16:56

Acties:

crisp

Devver

Pixelated

rwb schreef op 15 May 2003 @ 16:54:
Als je blokken van x * y hebt kan je ook nog colspan en rowspan instellen. Of als je alleen verticaal dezelfde pixels hebt alleen rowspan

Ik denk dat er dan nog maar weinig browsers zijn die dat goed kunnen renderen

tabellen met honderden cellen is al erg zwaar voor een browser trouwens.
En klopt het dat ik geen afsluittags voor de <td>'s en <tr>'s in de code zie?

[ Voor 24% gewijzigd door crisp op 15-05-2003 16:59 ]

Intentionally left blank

donderdag 15 mei 2003 17:01

Acties:

Verwijderd

Topicstarter

Ja, dat klopt. Ze zijn nl niet verplicht. Scheelt tig kilobytes ook nog:) Nu ben ik bezig om de meest gebruikte kleur te vinden. Ik dacht dat dat met een map aardig kon, maar dat wilt niet lukken. Weet iemand hoe dat goed gaat?

En wat bedoelt OntracK met het verkorten van stringnamen?

donderdag 15 mei 2003 17:02

Acties:

Woy

Moderator Devschuur®

crisp schreef op 15 May 2003 @ 16:56:
[...]

Ik denk dat er dan nog maar weinig browsers zijn die dat goed kunnen renderen

tabellen met honderden cellen is al erg zwaar voor een browser trouwens.
En klopt het dat ik geen afsluittags voor de <td>'s en <tr>'s in de code zie?

Ja het zal zeker wel zwaar zijn voor browsers en het zal vast niet snel renderen. Maar ik denk ook niet dat dat hierbij belangrijk is want het is zowiezo een belachelijke manier van plaatjes laten zien dus

. Maar ik zie niet in waarom browsers het helemaal niet meer kunnen renderen. Het lijkt mij dat het nog precies hetzelfde is als een simpel tabbeletje met een aantal colspan's en rowspan's.

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

donderdag 15 mei 2003 17:02

Acties:

Verwijderd

effe offtopic

wat is hier het nut van? genereert ontiegelijk grote bestanden, plus dat je nergens de tags afsluit en dit zo en zo al niet op netscape goed zal werken en ook niet volgens xhtml goed is omdat je alles af moet sluiten, al is het <td bgcolor="#DDDDDD" /> dus een extra / voor de > maar ja ik denk dat veel browsers hier op zullen hangen, mijn browser had al enkele problemen op een 2.4ghz system, zag het plaatje van boven naar beneden gevormd worden..

.... zo maar ff tussendoor ....

donderdag 15 mei 2003 17:04

Acties:

Woy

Moderator Devschuur®

OnTracK schreef op 15 May 2003 @ 16:55:
en misschien in je final versie je stringnamen wat inkorten, misschien niet helemaal netjes, maar het scheelt een hoop ruimte bij duizenden pixels
[...]
Hij gaat horizontaal regel voor regel de tekening af (toch?) het inbouwen van een vergelijking tussen verticale pixels wordt al een stuk moeilijker.

Hij vraagt toch ook niet om een makkelijke manier

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

donderdag 15 mei 2003 17:10

Acties:

Verwijderd

Topicstarter

He rendert in ie in luttele secondes. Mozilla doet er een halve minuut over hier. Waarom ik dit doe, voor de gein. Het is toch leuk om te proberen of het wilt lukken en zo. Vooral de optimalisatie zooi is leuk:)

donderdag 15 mei 2003 20:57

Acties:

djluc

Als je de download kleiner wilt maken kun je een soort van js array met alle blokken naar de browser sturen. Dan maak je in javascript weer een parsertje wat die blokken met de juiste HTML code in een geldig tabelletje zet.
Zo kun je toch zuivere code produceren, en ben je weer ff bezig want dit is echt een gaaf idee.

donderdag 15 mei 2003 21:01

Acties:

Soultaker

Niet dat het een reden is om niet te oefenen met C++, maar je weet dat je ook gewoon inline images in je HTML code kan plaatsen?

donderdag 15 mei 2003 21:22

Acties:

Verwijderd

Nogmaals: wat is hier het nut van?

Het programma The Gimp (http://www.gimp.org) kan dit al heeeeeeeel lang

donderdag 15 mei 2003 21:29

Acties:

OnTracK

offtopic:
Oké laat maar, ik zat héél vaag te denken, ook graag niet letten op ondersaande quotes van deze

[ Voor 82% gewijzigd door OnTracK op 17-05-2003 14:22 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

donderdag 15 mei 2003 21:43

Acties:

djluc

Misschien zou je eerst een soort van steekproef kunnen houden of iets dergelijks om een beetje een idee van het type afbeelding te krijgen.

Je zou naar de browser bijvoorbeeld een soort string kunnen sturen als #001002#256341 om alle kleuren aan te duiden, zo heb je veel minder data naar de client.

Waarom vragen er nog steeds mensen naar het nut, dat is toch al gezegd?

donderdag 15 mei 2003 22:01

Acties:

tomato

Soultaker schreef op 15 May 2003 @ 21:01:
Niet dat het een reden is om niet te oefenen met C++, maar je weet dat je ook gewoon inline images in je HTML code kan plaatsen?

Er zijn maar erg weinig mensen die dit weten en volgens mij werkt het niet in IE

donderdag 15 mei 2003 22:25

Acties:

Verwijderd

Topicstarter

Het javascript ideetje crosdde mijn mind op werk vanavond ja. Ik ga er nu mee aan de slag, want met javascript kan het veel compacter. neu dat ik geen javascript kan, maar das een uitdaging he. Een programmertaal en 2 scripttalen combineren, das pas leuk

vrijdag 16 mei 2003 09:45

Acties:

Woy

Moderator Devschuur®

OnTracK schreef op 15 May 2003 @ 21:29:
[...]
Daarmee bedoel ik bijvoorbeeld "teller", aangezien je dit stukje code een paar duizend keer gaat gebruiken, kun je hier nog een hoop bytes op schrappen.

Door je var naam korter te maken zul je echt geen bytes op je executable besparen hoor. Nadat de compiler eroverheen is geweest zullen die toch niet meer bestaan. En het gaat hier ook niet om de grote van de executable die de html genereert maar meer om de output die hij levert.

[...]
Maar ik vraag me af of het wel echt codeverkortend is om zoiets in te bouwen, iedere pixel controleren op naastliggende pixels van dezelfde kleur.

Nee je code op de server zal er niet korter op worden maar dat is het doel hier ook niet. Het doel is juist om de output te verkleinen.

Als die er in de gehele afbeelding niet zijn wordt de code zelfs langer

Dit snap ik niet. Als hij geen overeenkomende kleuren vindt dan komt je output er gewoon hetzelfde uit dan als dat je het niet gecontroleerd had.

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

vrijdag 16 mei 2003 15:27

Acties:

Verwijderd

Topicstarter

Ik heb nog eens een javascriptje geprobeerd. Alleen gaat dat NOG slomer dan tabellen, wat best zonde is. Per pixel zijn namelijk dan nog maar 2 bytes nodig, en een functie die ze in een tabel zet.

vrijdag 16 mei 2003 15:46

Acties:

Woy

Moderator Devschuur®

Als je met javascript werkt dan kan je natuurlijk ook gebruik gaan maken van een pallet. Dan hoef je per pixel nog maar het aantal bits mee te sturen die nodig is om het hele pallet te kunnen adresseren. Vooral als je weinig verschillende kleuren in een plaatje hebt kan dit heel voordelig zijn want dan kan je als je maar 256 kleuren hebt al met 1 byte per pixel aangeven wat de kleur is. Dit is al ruimte besparing als je meer als 512 pixels hebt ( je moet tenslotte wel 256 * 2 bytes extra ruimte voor het pallete reserveren )

Heb je trouwens niet 3 bytes nodig per pixel??

[ Voor 5% gewijzigd door Woy op 16-05-2003 15:48 ]

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

vrijdag 16 mei 2003 16:56

Acties:

Verwijderd

Topicstarter

Ik kan 64-cijferige tekens gebruiken. Nog niet gedaan, maar het kan wel. Ik ben geen held met javascript. Zojuist eventjes geteld, 2576 verschillende kleuren. Het opslaan van de hexwaardes kost me dus rond de 15,09375 kB (exclusief komma's). Dan is een referentie naar het pallet 2 bytes groot, lijkt mij. Dat word dan dus 82,5 kilobyte exclusief komma's. Dat is al stukken beter dan ruwe hexwaardes, die 247,5 kb worden

. Vanavond ga ik hier aan werken, eens kijken hoe klein ik het krijg:)

vrijdag 16 mei 2003 17:01

Acties:

djluc

Ik vind dit echt een gaaf idee!
Laat eens wat van die JS code zien die je getest hebt en zo traag was, misschien kunnen we die wat optimaliseren. Gebruik maken van het palet is inderdaad ook een goede optie.

vrijdag 16 mei 2003 17:30

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

Je kunt natuurlijk ook gewoon de jpegdata in een javascript array stoppen en dan een javascript jpeg decompressor maken die vervolgens de tabel vult

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

vrijdag 16 mei 2003 17:38

Acties:

Soultaker

Je kunt met JavaScript toch ook wel een plaatje construeren uit JPEG data? Dan hoef je alleen de inhoud van het bestand in een string te stoppen.

vrijdag 16 mei 2003 17:53

Acties:

GrimaceODespair

eens een tettenman, altijd ...

Soultaker schreef op 15 May 2003 @ 21:01:
Niet dat het een reden is om niet te oefenen met C++, maar je weet dat je ook gewoon inline images in je HTML code kan plaatsen?

Geef es wat meer informatie. Ik heb hier ooit eens naar gezocht, en kwam toen (blijkbaar na onvoldoende zoeken) erachter dat het niet mogelijk was. Althans, dat stond ergens op een site, maar achja, dat betrouwbaar Internet ook he

tomato schreef op 15 May 2003 @ 22:01:
Er zijn maar erg weinig mensen die dit weten en volgens mij werkt het niet in IE

Volgens wat ik toen gelezen had, zou IE daar dus goed mee zitten, omdat het geen HTML zou zijn

Maar het zal vast wel weer om 1 of andere duistere w3c workaround gaan.

Maar goed, mensen, verras mij met een leuke link

(kon op Google zo 1,2,3 niets vinden)

Wij onderbreken deze thread voor reclame:
http://kalders.be

vrijdag 16 mei 2003 18:37

Acties:

Soultaker

GrimaceODespair schreef op 16 May 2003 @ 17:53:
Geef es wat meer informatie. Ik heb hier ooit eens naar gezocht, en kwam toen (blijkbaar na onvoldoende zoeken) erachter dat het niet mogelijk was. Althans, dat stond ergens op een site, maar achja, dat betrouwbaar Internet ook he

Hmz, ik zou het niet echt weten, en kan het na wat zoeken ook niet vinden. Misschien weten de bovenburen er meer over. Misschien kan het ook niet; valt dat weer even tegen.

vrijdag 16 mei 2003 19:05

Acties:

crisp

Devver

Pixelated

Om in IE afbeeldingen te laten zien kan je inderdaad het beste javascript gebruiken. De beste methode is om je pallet in een array te stoppen, en je bitmap ook met verwijzingen per pixel naar je pallet array.
Zoiets: http://www.allcrispy.com/upload/bitmap.html

dit is natuurlijk nog verder te optimaliseren door je pointers niet decimaal te maken, maar bv hexadecimaal, of door strings te gebruiken

Intentionally left blank

vrijdag 16 mei 2003 19:47

Acties:

tomato

Offtopic:
Zo kan het:

code:

1	[img]"data:image/gif;base64,jakommaaropmetdiedatavandaplaatje"[/img]

In Mozilla werkt het, in IE en Opera niet. Zie hier.

vrijdag 16 mei 2003 20:02

Acties:

MisterData

Je kunt het ook met MHTML fixen in plaats van met inline images. Maar dat is IE-only

zaterdag 17 mei 2003 00:05

Acties:

Verwijderd

Topicstarter

Het script staat hier, samengeweven met de pixeldata. Even voor degene die het niet doorhebben, dit was gewoon voor de lol om te kijken of het kan en snel kan. Nu of het snel en klein kan. Je moet toch wat? Niet alles wat niet strikt noodzakelijk is, is nutteloos

zaterdag 17 mei 2003 00:11

Acties:

GrimaceODespair

eens een tettenman, altijd ...

tomato schreef op 16 May 2003 @ 19:47:
Offtopic:
In Mozilla werkt het, in IE en Opera niet. Zie hier.

Nog steeds offtopic (sorry ts

):

Het lijkt erop alsof dat wat betreft Mozilla eerder een restant is van die ouwe rfc (augustus 1998!) dan dat IE en Opera zich niet aangepast hebben. Als je gaat Googlen vind je maar bitter weinig, behalve hier of daar een forumbezoeker die immediate url data ontdekt.

Ook interessant zijn deze proxy die de immediate data terug vertaalt voor browsers die het niet ondersteunen en deze oude post die de aanzet van het hele immediate-gebeuren lijkt te zijn.

Ik kan me wel voorstellen waarom men het niet zou ondersteunen: MS ea zouden zich waarschijnlijk in de vingers snijden wat betreft security als ze dat nu nog cumulatief in hun browser moeten bijprogrammeren. Dan liever een feature die geen hond kent, niet implementeren.

Wij onderbreken deze thread voor reclame:
http://kalders.be