Toon afmetingen van gif !?

[yammaski]

Ik volg het gehele thread niet meer, vooral wat nu precies het probleem is. Maar, hier een ander idee: kan je niet voor elk font de corpsgrootte opzoeken, opslaan, en deze gebruiken bij het berekenen?
:thumb:

Je bedoelt van elk lettertype het aantal px bij een corpsgrootte van bvb 5 cm ?

 

[That Guy]

Eh, zoiets ja. Als je weet dat bv. Arial met px-waarde 12 een corpsgrootte heeft van 5 cm, kan je dan dit niet opslaan (an te voren dus) en gebruiken vor je berekeningen? Als je dan het lettertype vergroot (bv. 24px) weet je gelijk dat het dan een hoogte heeft van 10 cm. Ofzoiets.



:thumb:

 

[yammaski]

Dat zou moeten lukken ! Ik kan in illustrator voor elk font de verhoudingen uitrekenen, wel een heel werkje, maar dat is maar éénmalig.
Ik heb hier iets ineen geprutst waarbij de breedte en hoogte in px verschijnen met een alert. Deze alert zou weg moeten blijven en dan de waarden laten staan in hun velden.
Ik had geprobeerd de px aan te passen met "if ... font=Arial ... then height/1.57 ... elseif font=Ballon ... then" voor elk lettertype, maar dat lukte dus ook niet.

 

[That Guy]

functie[JS]getW()[/JS]en[JS]getH()[/JS] returnen niks, daarom krijg je dus een undefined. Even een [JS]return x; /* of y */[/JS]onder plakken in de functies

 

[yammaski]

Ik heb het aangepast.
Het kadertje rond de tekst is maar ter visuele info en is de plaats die het font inneemt. Het zijn deze pixels die je krijgt bij offsetWidth en offsetHeight, je krijgt dus nooit de echte pixels van de tekst zelf. Ik had hier iets op gevonden : Voor elk font (dat ik gebruik) tel ik het verschil van hoogte uit tussen de echte tekst en de omgezette (naar tekening) tekst. Dan heb je een factor om de echte hoogte te berekenen. Alles goed en wel, maar ... ik ben de descenders van de fonts (j-g-p-...) vergeten ... dit maakt hetgeen ik wou bereiken onmogelijk ! Zie voorbeeld met de afmetingen van de echte tekst, de 2 bovenste, en omgezette, de 2 onderste :

Voor de breedte moest je gewoon een paar pixels aftrekken en het is opgelost.


Hier maken ze van de tekst een .jpg zetten dan de afmetingen erbij. Ik heb het gecheckt en het is juist.
Hoe doet men zoiets ?

 

[csshunter]

Hier [...]
Hoe doet men zoiets ?

Hoi yammaski,
Dat zat ik me nou ook al dagen af te vragen, maar ik kwam er niet achter.
Op die site lukt het wel!
Ik heb het ook nagemeten, en het klopt steeds precies, of er nu wel/niet letters met een descender (staartje) tussen zitten. Ik dacht: ofwel ze hebben er een fikse bibliotheek achter hangen met alle letterhoogtes van alle fonts, ofwel het lukt ze om de "reële letterhoogte" af te tappen van het geproduceerde schermbeeld (door nameten waar de voorgrond/achtergrond-kleuren ophouden, zoals mijn eerder idee).
Als je zo'n door hen gemaakt plaatje bekijkt,

zie je dat ook de gevonden maten in het plaatje zelf zitten. Maar alles wordt serverside met php gedaan, en daar kan je niet in komen:

[FONT="Courier New"][SIZE="2"].../maakplaatje.php?font=AGENCYB.TTF&tekst=m%27n+tekst&fontkleur=Kies%20andere%20kleur&afmetingtype=breedte&afmeting=10[/SIZE][/FONT]

Dat (en ook: werkdrukte) is ook de reden dat ik niet eerder reageerde (je probleem met het altijd meeberekenen van de descenders had ik ook waargenomen - voor mij onoplosbaar): ik had niets te bieden.

Maar net keek ik er nog even naar, en misschien toch wat licht op de duistere zaak.

Als je van bovengenoemd plaatje de broncode bekijkt, krijg je naast de onleesbare jpg-codes ook iets interessants te zien:

[FONT="Courier New"][SIZE="2"]ÿØÿà�JFIF������ÿþ�>CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), 
default quality ÿÛ�C�		
... enz.[/SIZE][/FONT]

• Op zoek naar de schepper!
• gd-jpeg v1.0 is de GD Graphics Library van boutell.com.
• What is the GD library? GD is an open source code library for the dynamic creation of images by programmers. GD is written in C, and "wrappers" are available for Perl, PHP and other languages.
• De handleiding is intussen verhuisd en zit op [url]www.libgd.org/Main_Page[/URL].
• Via de binders-pagina ([url]www.libgd.org/Binders[/URL]) kom je bij de php-implementatie:
  "A variant of gd 2.x is included in PHP 4.3.0. It is highly recommended to upgrade to 4.3+ if you still use an earlier version."
• De link daarbij klikt naar de manual op php.net: [url]http://nl2.php.net/manual/en/book.image.php[/URL].
• Daar is een pagina GD and Image Functions
• En daar is heel wat te lezen.

Had je dit al gezien? Resp. is dit hoopvol?

Met vriendelijke groet,
CSShunter

PS: Jammer dat een mailtje naar je collega waarschijnlijk niets zal opleveren.

[edit]De "scanmethode" schijnt met Java (dus niet js) te kunnen: getPixelColor(int x, int y) staat op [url]www.java2s.com/Code/JavaAPI/java.awt/RobotgetPixelColorintxinty.htm[/URL].[/edit]

 

[yammaski]

Had je dit al gezien? Resp. is dit hoopvol?

Ik heb het allemaal eens bekeken, maar van php ken ik helemaal niets. Ik heb een beetje notie van ASP VB en javascript ... een klèin beetje.

Deze applicatie ? Dit kan je laten werken met een commandline zeggen ze !? Ik heb het gedownload (demo versie) en het werkt goed. Als je bij de advanced options de padding overal op nul zet, heb je géén "wit" aan de kanten. Dan wel "text string" kiezen. Maar dit implementeren is een andere vraag ...

Ik had hier ook nog iets gevonden dat misschien bruikbaar is, maar dat is dan weer een andere scripttaal blijkbaar.

 

[csshunter]

Aha, steeds nieuwe sterren aan het firmament.
Nu ligt de webcatering-site er vandaag uit, die die viel niet te bewonderen. Uit de Google-cache viel toch nog wat te halen. Maar daarin stond te lezen:

The full version allows all characters of any font installed into windows.
en:
Full installation program including Visual Basic support .DLL's.

Zou dat betekenen dat het alleen lokaal op een Windows-machine kan, en niet online op een webserver? (of: alleen op een Windows webserver?)
Ik heb een voorgevoel (waarom weet ik niet, want ik heb er geen verstand van), dat het niet op een server kan lukken. Het is immers een programma, en geen scripttaal die in html ingebouwd kan worden. Maar wellicht sla ik de plank wel helemaal mis.
- Dus voordat je misschien die USD 35.00 voor de volle versie neertelt, daar achter zien te komen?

De andere link gaat over de taal GDI+, en dat blijkt eveneens iets van Microsoft en Windows te zijn: "Windows GDI+ is a class-based API for C/C++ programmers." (zie: http://msdn.microsoft.com/en-us/library/ms533798(VS.85).aspx) - Ook alleen voor ingewijden... en dezelfde vraag over serverside toepasbaarheid.

Als er toch iets geleerd moet worden, zou ik het bij php houden: dat is in elk geval een methode die blijkt te werken.

Met vriendelijke groet,
CSShunter

 

[yammaski]

Zou dat betekenen dat het alleen lokaal op een Windows-machine kan, en niet online op een webserver?

Ik heb verleden week een mail gestuurd om dit te vragen, maar nog steeds geen antwoord.
Ik ga nu eerst de rest verder afwerken (begin topic).

Ik heb men afbeeldingen (stickerformaat nieuw-a) moeten aanpassen omdat ik ze de kleur wil geven die de klant kiest. De achtergrondkleur veranderd en de afbeeldingen zijn negatief in kadervorm in dezelfde kleur als de achtergrond van de page. Ze hebben dus allemaal dezelfde size nu. Ik moet je script, om de breedte/hoogte aan te passen, toepassen op de originele afbeeldingen. Deze wil ik dus op de pagina "verstoppen" om toch het script te kunnen gebruiken. Ik heb (nog) eens gegoogeld en kwam het systeem van iframes tegen. Zou ik dat gebruiken of is het beter via CSS zoals dit ?

 

[csshunter]

iframes ... of is het beter via CSS zoals dit ?

Kiezen tussen een iframe en CSS? Dat is geen keus: CSS!
Bovendien: binnen een iframe zou je toch weer met CSS aan de gang moeten om alles mooi op z'n plekje te krijgen.

Maar ... niet helemaal "zoals dit".
Waarschijnlijk is het je <META name=GENERATOR content="MSHTML 8.00.7600.16535"> geweest die de zaak verknald heeft, want er zijn in de gauwigheid tussen mijn testpagina (0 fouten) en nu 13 Errors, 3 warnings bij gekomen zegt de html-validator.
O.a.:

• Het Doctype is veranderd van XHTML naar HTML, maar de xmlns-declaratie in de <html> is blijven staan.
• De eind </form> zit op een verkeerde plek.
• Het type html is veranderd van Strict naar Transitional (geen harde fout, maar zeker niet aan te bevelen voor goede crossbrowser-weergave).
  

Verder zie ik dat de namen van de tags en de attributen uit het origineel opeens allemaal zijn omgezet in hoofdletters. Nu mag dat in HTML, maar niet in XHTML; een goede gewoonte is om ze altijd in kleine letters te doen.

==============================================================
Attentie: soms gaat het mis als je een browser opdracht geeft
tot "Opslaan webpagina". Dan kunnen er ongevraagd hoofdletters
van tags en attributen gemaakt worden, of regeluiteinden een
andere plaats krijgen, of andere wijzigingen.
Tip: ga naar de broncode van de pagina, kopieer die, en plak
die in een Kladblokbestand.
Dat opslaan als UTF-8, en altijd de ongewijzigde code.
==============================================================

Maar je kleurwisselaar met de transparante gif is waanzinnig mooi uitgevoerd! :thumb: :love:
En het verstopte plaatje met de zuivere maten is ook een uitvinding! :d
(Je zou die maten ook in de database kunnen werpen en per object ophalen; maar als je eens een nieuwe sticker wilt toevoegen, is dit wel zo handig: dan kan je in elk geval niet per ongeluk je database ruineren.)

Met vriendelijke groet,
CSShunter

PS:
Als je er in het kleur-kies-script op regel 117:
[JS]var element=document.getElementById('Back_Transp_PNG').style;[/JS]
van maakt (ipv zonder "var"), geeft de javascript-foutconsole ook geen error meer.

 

[yammaski]

Attentie: soms gaat het mis als je een browser opdracht geeft
tot "Opslaan webpagina"....

Ik dacht al zoiets, die "code" was inderdaad een knoeiboel dooreen.

Maar je kleurwisselaar met de transparante gif is waanzinnig mooi uitgevoerd!

Bedankt ...

En het verstopte plaatje met de zuivere maten is ook een uitvinding!

Uitvinding ? ... gewoon iets geprobeerd met de positioning ... niet goed ?

Database : aan gedacht, maar geen zin om meer dan 1000 (1061) x2 afmetingen in te geven.
Ik heb een "admin" gemaakt om aanpassingen, stickers toevoegen, orders, betalingen, ... gemaakt. Dan moet ik niet direct in de db liggen prutsen.

js-code overal aangepast :thumb:

 

[csshunter]

En het verstopte plaatje met de zuivere maten is ook een uitvinding!

Uitvinding ? ... gewoon iets geprobeerd met de positioning ... niet goed ?

Ik bedoelde: ... prima uitvinding, je moet er maar op komen! Wel goed! :d

So long,
CSShunter

 

[yammaski]

Ik heb iets geprobeerd met de demo van F2Bmp en het is misschien een begin.
Wat denk je hiervan ?
Op goede weg of ... ?

 

[csshunter]

Dat ziet er voorlopig goed uit.
Wat gebeurt er als je "stokstaartjes" invoert, zoals het woordje "kop"?
Krijgen de "o" en de "p" er dan witte bovenruimte bij, om gelijk op te komen met de top van de "k"?

Zo nee, gebeurt dat dan wel als je het als woord tegelijk intikt (d.w.z. een "Go!" knopje na intikken, i.p.v. het per letter uitvoeren bij key-up)?

Ik ben benieuwd!

 

[yammaski]

Ik ben tot de conclusie gekomen dat ik het niet kan gebruiken !
Het gaat niet samen met dit hier.

Maar ik vind er nog wel iets op ... hoop ik.
Een soort van raster/grid om de afmetingen in te schatten, ... .

 

[csshunter]

Waarom gaat het mis, als ik zo vrij mag zijn? Zitten de stokstaartjes scheef, of iets anders?

(Je zou misschien het automatisch beletteren met de key-up los kunnen maken van het plaatjesdeel - dan worden de letters meteen zichtbaar, en kan tegelijkertijd de string van alle letters genoteerd worden - die dan door een druk op een "toon maten" knop in de img-vorm aangemaakt [eventueel: onzichtbaar; de bekende techniek!] en berekend kan worden?)

 

[yammaski]

Nu verander ik de kleuren en lettertypes van de innerHTML, maar met F2Bmp zit ik toch vast aan die bmp's !?

[eventueel: onzichtbaar; de bekende techniek!]

Of bedoel je dat ik de F2Bmp op de achtergrond moet/kan toepassen met het "verstopt plaatje", zoals je zei ?

 

[csshunter]

Ja, dat bedoel ik: lettertypes en kleuren komen gewoon op scherm, de F2Bmp kan er ergens onzichtbaar ingehangen worden om er de maten van te kunnen berekenen (als die maar ook het goede lettertype kan pakken, kleur maakt niet uit), dacht ik.

Maar doet de F2Bmp het ook goed met letters met op- en neerhalen? Komt er dan bv. dit?

Anders zou alles toch nog tevergeefs zijn.

 

[yammaski]

kleur maakt niet uit), dacht ik.

Kleur speelt inderdaad geen rol hier.

Maar doet de F2Bmp het ook goed met letters met op- en neerhalen?

Dat kan ik pas testen als ik het koop, maar met de demo (alleen de cijfers) heb ik enkele vbn gemaakt. Bij de ene staat cellpadding overal op "0", en bij de andere op "5". Je ziet toch duidelijk dat bij "0" niks wit meer wordt getoond bij de hoogste en laagste pixels van het cijfer (6 en 9).

Maar dan is het misschien wel de moeite om F2Bmp aan te schaffen !?
USD/EUR : 35,0000 USD = 27,4596 EUR ... kan er wel af

 

[csshunter]

Nou, als de losse 12 dan dit te zien geven:

zou ik het er maar op wagen om de USD's de oversteek over de oceaan te laten maken.

O - wacht: heb je al getest of die F2Bmp serverside kan werken?? (ik ben nogal zuunig )

CSShunter