Forum: Mikrocontroller und Digitale Elektronik Bild als HEX in html File einbinden


von Fritz S. (Gast)


Lesenswert?

Hallo,

ich möchte eine kleine Weboberfläche für die ESP8266 WLAN - UART Bridge 
bauen.

Aber wie schaffe ich es ein Bild als Hex File in dem HTML File zu 
übergeben? Hat jamend eine Idee dazu?

Schönen Abend
Fritz S.

von Peter II (Gast)


Lesenswert?

Fritz S. schrieb:
> Aber wie schaffe ich es ein Bild als Hex File in dem HTML File zu
> übergeben? Hat jamend eine Idee dazu?

warum soll das Bild in die HTML? Kannst du das Bild nicht extra ablegen?

von SuseLunix (Gast)


Lesenswert?


von Sascha W. (sascha-w)


Lesenswert?

Schau mal hier z.B.

http://base64image.org/

Sascha

von Karl H. (kbuchegg)


Lesenswert?

Fritz S. schrieb:
> Hallo,
>
> ich möchte eine kleine Weboberfläche für die ESP8266 WLAN - UART Bridge
> bauen.
>
> Aber wie schaffe ich es ein Bild als Hex File in dem HTML File zu
> übergeben?

Ist mir nicht klar, warum du das willst.

Der Broswer wendet sich grundsätzlich an den Server mit einem GET 
Request. In diesem Request gibt er auch bekannt, was er gerne hätte.

Zuallererst wird er mal die HTML Seite haben wollen. Also schickt er an 
den Server einen GET Request mit zb er Angabe, die Datei 'index.htm' 
haben zu wollen (wenn der Browser keinen Dateinamen angibt, dann nimmt 
der Server an, dass er diese Datei haben wollte).

Der Server liefert daraufhin die Datei aus (dsa muss physisch keine 
Datei sein. Der Browser weiss ja nicht wo der Server den entsprechenden 
Text herhat. Der Browser fordert eine 'Datei' an, und wie der Server zu 
dem Text kommt, den er zurück schickt, interessiert ja den Broswer 
nicht).

Der springende Punkt ist, dass in diesem Text, den der Browser kriegt
1
<HTML>
2
<BODY>
3
  <img src="das_bild.png"></img>
4
</BODY>
5
</HTML>
ein Verweis auf eine Datei namens das_bild.png enthalten ist, der der 
Browser als Bild anzeigen soll.
Also wendet sich der Browser erneut an seinen Server und schickt einen 
weiteren GET Request los, diesmal nach der Datei 'das_bild.png'. Und der 
Server liefert dann.

D.h. deine Frage macht insofern keinen Sinn, weil das Bild überhaupt 
nicht ins HTML eingebettet wird, sondern du im Server dir einfach nur 
ansiehst, wonach der Browser in seinem GET Request fragt: ist es die 
'index.htm' bzw. nichts, dann lieferst du den HTML Text aus, ist es die 
von dir ins HTML eingebaute Bilddatei, dann werden eben dessen Daten 
rausgegeben. Allenfalls muss man sich da eben ein kleines rudimentäres 
Filesystem bauen, welches gefakte Dateinamen in im Speicher vorgehaltene 
Bytearrays umsetzt.

von Matthias S. (Firma: matzetronics) (mschoeldgen)


Lesenswert?

Sowas geht schon, auch wenn es für grössere Bilder eine Zumutung ist.
Hier mal ein kleiner Test für so etwas. Einfach die interessanten Sachen 
aus dem Quelltext rauskopieren. Es ist kein direktes HEX, sondern 
benutzt die o.a. BASE64 Methode:
http://berlin.schoeldgen.de/test.php

von Fritz S. (Gast)


Lesenswert?

Hallo!

Danke erstmal an alle für die schnelle Antwort.

Hab mir die Inline - Grafik mit Base64 angesehen, und das funktioniert 
soweit, das einzige, setze ich 3 Bild in folge nebeneinander ist ein 
kleiner Abstand zwischen jedem Bild, ich möchte aber das Bild in der 
Mitte je nach Zustand zwischen 2 auswählen und das ganze soll sich zu 
einem Zusammenfügen.
Das wird damit wahrscheinlich nichts oder?

@ Karl Heinz: Das hört sich logisch an, Ich werde versuchen das ganze so 
aufzubauen, scheint etwas "sauberer" zu sein. Danke!

von Frank E. (Firma: Q3) (qualidat)


Lesenswert?

Ich habe die Methode auch schon benutzt, um z.B. Messprotokolle in HTML 
zu archivieren, die auch ein Logo und Kurven enthalten sollten.

Wenn die HTML-Datei von einem Webserver ausgeliefert wird, ist das keine 
Rede wert, aber bei HTML-Dateien sind extere Bilder ausserordentlich 
lästig - so gesehen dat die Methode durchaus ihren Sinn.

Manche Systeme sind nicht in der Lage PDF zu erstellen oder anzuzeigen, 
dazu gehört ganz schön Rechenliestung, dann ist HTML mit embedded Images 
ein möglicher Weg.

Aber keine Lösung ohne Ärger: Ratet mal, welche Browser embedded Images 
nicht dastellen kann ...

Die Art der Darstellung (wie im Posting über diesem hier, bezüglich 
Rand) ist Sache des Browsers und lässt sich z.B. mittels Inline-CSS 
beeinflussen. Damit geht quasi Alles, man muss sich nur einarbeiten. Mit 
Plain-HTML gewinnt man heute keinen "Blumentopf" mehr ... :-)

: Bearbeitet durch User
von Matthias S. (Firma: matzetronics) (mschoeldgen)


Lesenswert?

Frank Esselbach schrieb:
> Aber keine Lösung ohne Ärger: Ratet mal, welche Browser embedded Images
> nicht dastellen kann

Mein Test von da oben geht aber nicht nur mit meinem Standard Browser 
SeaMonkey, sondern auch mit IE8. Du musst also Chrome oder Safari meinen 
:-)

von Daniel A. (daniel-a)


Lesenswert?

Aus hex ein image generieren ist mit js möglich, müste ungefär so gehen:
1
( ungetestet, auf smartphone geschrieben )
2
<head>
3
  <div class="imgSource" id="img1">
4
    hexcode hier
5
  </div>
6
  </script>
7
var imgs = {};
8
addEventListener("load",function(){
9
 var srcs = document.getElementsByClassName("imgSource");
10
  for(var i=0;i<srcs.length;i++){
11
    var s = srcs[i];
12
    var hex = s.innerHTML.replace(/[^a-zA-Z]/,'');
13
    var a = new Uint8Array(hex.length/2);
14
    for(var j=0;j<hex.length/2;j++){
15
      a[j] = parseInt(hex.substr(i*2,2),16);
16
    }
17
    imgs[s.id] = URL.createObjectURL(new File(a));
18
  }
19
  var iime = document.querySelectorAll("[data-source]");
20
  for(var i=0;i<iime.length;i++){
21
    var e = iime[i];
22
    e.src = imgs[e.getAttribute("data-source")];
23
  }
24
});
25
  </script>
26
</head>
27
<body>
28
  <img data-source="img1"/>
29
</body>

von Bowsa (Gast)


Lesenswert?

> Aber keine Lösung ohne Ärger: Ratet mal, welche Browser embedded Images
> nicht dastellen kann
grad probiert:
Firefox geht
Safari geht
Chrome geht

Welche geht denn nicht? Lynx?

von Bowsa (Gast)


Lesenswert?

Hab grad gesehen, dass ich als Gast vom anderen Rechner hier schon 
geantwortet habe.
Also SuseLunix = Bowsa

von Daniel A. (daniel-a)


Lesenswert?

So funktioniert's mit HEX-Daten:
http://jsfiddle.net/ebs6yebz/1/

von Gardener (Gast)


Lesenswert?

Fritz S. schrieb:

> Hab mir die Inline - Grafik mit Base64 angesehen, und das funktioniert
> soweit, das einzige, setze ich 3 Bild in folge nebeneinander ist ein
> kleiner Abstand zwischen jedem Bild, ich möchte aber das Bild in der
> Mitte je nach Zustand zwischen 2 auswählen und das ganze soll sich zu
> einem Zusammenfügen.
> Das wird damit wahrscheinlich nichts oder?

Das geht. Alle notwendigen Informationen hier:

http://www.w3schools.com/css/

von Fritz S. (Gast)


Lesenswert?

Hallo,

danke für eure Hilfe,

Also es klappt nun soweit, dass sich alles zu einem Bild zusammenfügt.

Ich möchte in das Bild in der Mitte klicken können, und bei einem Klick 
soll an den Webserver eine Nachricht geschickt werden (Funktioniert 
soweit). Wenn der Server alles verarbeitet hat, soll er das Bild in der 
Mitte ändern. Die Frage ist, ob ich hierfür eine komplett neue HTML 
Seite senden muss, oder ob es dafür eine einfachere bzw. elegantere 
Möglichkeit gibt?

Gruß Fritz

von Sascha W. (sascha-w)


Lesenswert?

Fritz S. schrieb:
> Hallo,
>
> danke für eure Hilfe,
>
> Also es klappt nun soweit, dass sich alles zu einem Bild zusammenfügt.
ok

> Ich möchte in das Bild in der Mitte klicken können, und bei einem Klick
> soll an den Webserver eine Nachricht geschickt werden (Funktioniert
> soweit).
> Wenn der Server alles verarbeitet hat, soll er das Bild in der
> Mitte ändern.
Das geht so schon mal nicht, der Browser muss das Bild neu anfordern.
Es gibt Wege, aber ob das mit deinem Webserver machbar ist?

> Die Frage ist, ob ich hierfür eine komplett neue HTML
> Seite senden muss, oder ob es dafür eine einfachere bzw. elegantere
> Möglichkeit gibt
wenn du jetzt nur das Bild updaten willst, hättest du dir den ganzen 
Kram mit den einbetten der Bilddaten sparen können - denn nun brauchst 
du die Bilddaten in einer eigenen Datei welche du per js nachladen 
kannst. Damit ist es auch möglich das Bild im nachhinein zu ändern.

Sascha

von Fritz S. (Gast)


Lesenswert?

Hallo Sascha,

ich verstehe, habe jetzt alles so umgebaut, dass er jetzt nach dem 
Request nach dem Bild, den Inhalt des Bildes übermittelt.

Wie aber schaffe ich es nun ein Bild "dynamisch" zu verändern, wenn ich 
das möchte?

Lg
Fritz

von Winfried J. (Firma: Nisch-Aufzüge) (winne) Benutzerseite


Lesenswert?

Dafür ist es nötig, dass entweder das Bild als animiertes *.gif File 
gesendet wird oder aber die Daten wiederholt angefordert und 
zwischenzeitlich aktualisiert werden. HTML selbst macht das glaube ich 
nicht aber ein Javascript..... das erfordert aber einen aktivierten 
Javascriptinterpreter (Runtime_DLL) am Zielrechner.

Namaste

von Daniel A. (daniel-a)


Lesenswert?

Fritz S. schrieb:
> Wie aber schaffe ich es nun ein Bild "dynamisch" zu verändern, wenn ich
> das möchte?

Viele wege führen nach Rom, aber ist Rom die Endstation?

Weshalb muss das bild verändert werden, und
was soll das am schluss werden?


Wenn du mehrere Bilder hast, und du willst nur und ausschlieslich beim 
Click auf einen Button dieses durch ein anderes ersetzen, reicht es mit 
js den Click abzufangen und die Bildurl zu ändern. Wenn eine andere 
Seite geladen werden soll, ändert man einfach die dessen url. Wenn eine 
Seite aktualisiert werden soll, und sich der gesammte inhalt ändern 
könnte, kann die Dynamische generierung der Seite auf dem Server sinn 
machen. (dabei mit dem cacheing aufpassen). Wenn du Seiteninhalte zur 
laufzeit ersetzen/ändern musst, ist javascript das Mittel der wahl.Wenn 
du Bilder selten global dynamisch generieren musst, oder viele 
serverdaten dazu notwendig sind, sollte man dass auf dem server tun. 
Wenn du jedoch wenige serverdaten/leistun hast, und es schnell und oft 
notwendig ist, sollten nur die zur Genernerung nötigen daten zum Browser 
gesendet werden, und das Bild mit js generieren, falls Möglich.

HTML Seiten auf dem Server dynamisch zu generieren ist nur selten 
sinnvoll, das kann ja meistens auch der client zusammensetzen, dann 
entfallen sowohl unnötige berechnungen auf dem Server, als auch 
cacheingprobleme!

Ich empfehle das anwenden des ModelViewViewModel prinzips, und das 
verwenden von templating libraries.

: Bearbeitet durch User
von Fritz S. (Gast)


Lesenswert?

Hallo, und schonmal danke für die großartige Hilfe.

Geplant ist eine Art Schalter als Bild, klickt man den Schalter an, soll 
einerseits der PortPin toggeln ( kein Problem ) und andererseits, soll 
sich eben das Bild des Schalter updaten ( ein bzw. aus Stellung ).

Im Grunde habe ich 6 - 7 solche Schalter auf der Webseite, und es wäre 
natürlich gut, wenn er nicht jedes dieser Bilder extra anfordern muss, 
sondern selbst erkennt, dass er 6x das selbe Bild hat.

Das ganze wird wohl auf js hinauslaufen richtig?

von Daniel A. (daniel-a)


Lesenswert?

Ja, js ist hier die einfachste Lösung. Du kannst jedem schalter eine 
eindeutige id geben, oder allen die selbe classe, oder ein eigenes 
attribut. Nachfolgend einige nützliche javascript konstrukte:
1
// Ein schalter über id attribut
2
var schalterX = document.getElementById("idDesSchalers");
3
// Alle schalter über class attribut als nodelist.
4
var alleSchalter1 = document.getElementsByClassName("schalter");
5
// Alle scalter über ein benutzerdefiniertes attribut als liste
6
var alleSchalter2 = document.querySelectorAll("[data-schalter]");
7
8
// Eventlistener auf EventTarget registrieren
9
// Beispiel 1: EventTarget ist window, event ist "load", function ist anonym.
10
addEventListener("load",function(event){
11
  // code, der nach laden der seite ausgefürt wirt
12
});
13
14
// Beispiel 2: EventTarget ist schalterX, event ist "click", function ist toggleSchalter.
15
16
funktion toggleSchalter(event){
17
  // this ist der angecklikte schalter
18
  this.src = "neuesBild.png"; 
19
}
20
21
schalterX.addEventListener("click",toggleSchalter);

Von den Schalterbildern braucht es ja nur zwei, welche zwei 
unterschidliche adressen hätten, und wenn das cacheing richtig 
funktioniert nur einmal geladen werden.

Der Schalterstatus kann auch in js abgefragt/gesetzt werden, dazu sendet 
man einfach einen request mit XMLHttpRequest (einfach googeln), und 
macht damit auf dem server was sinvolles.

von Fritz S. (Gast)


Angehängte Dateien:

Lesenswert?

Hallo Daniel,

Super! Das hat mir schon extremst weiter geholfen.

Also nun funktioniert schon soweit die Bilder laden, das Umschalten bei 
anklicken eines Bildes, und bei Bild 3 ( siehe Anhang ), auch schon das 
Umschalten des Bildes, erst wenn der Server die Anfrage mit irgendeiner 
Antwort bestätigt ( Also wenn der Pin tatsächlich umgeschalten wurde ).

Das js Programm sieht nur glaube ich sehr sehr schlecht aufgebaut aus, 
kannst du dir mal anschauen, wie man das am Besten vereinfacht bzw. 
vereinheitlichen kann? Bzw. mir einen kleinen Denkanstoß dazu geben?

Danke!

Fritz

von eProfi (Gast)


Lesenswert?

Matthias, kennst Du Detlev?
Versteht nicht jeder, ist auch gut so.

von eProfi (Gast)


Lesenswert?

Was ich sagen wollte:
iE6.0 kann Matthias' PNG nicht darstellen.

von Matthias S. (Firma: matzetronics) (mschoeldgen)


Lesenswert?

eProfi schrieb:
> Matthias, kennst Du Detlev?

Jo, tue ich, isn langjähriger Kumpel. Aha, da kann jemand Morsezeichen 
:-)

eProfi schrieb:
> Was ich sagen wollte:
> iE6.0 kann Matthias' PNG nicht darstellen.

Naja, naja. Wer heute noch mit IE6 rummacht, ist aber sowieso fast 
überall abgehängt.

: Bearbeitet durch User
von Fritz S. (Gast)


Lesenswert?

Muss ich das jetzt auch verstehen?

Ist daran irgendwas Konstruktiv :P?

von Matthias S. (Firma: matzetronics) (mschoeldgen)


Lesenswert?

Fritz S. schrieb:
> Muss ich das jetzt auch verstehen?
Nö.

> Ist daran irgendwas Konstruktiv :P?
Ja.

von Fritz S. (Gast)


Lesenswert?

Außer, dass ich keine PNGs verwenden sollte wegen der PNG 
Inkompatibilität des älteren IE Browser?

Bitte seid doch so freundlich und müllt den Thread nicht zu, es fing 
doch so gut an :)

von R. W. (Gast)


Lesenswert?

@fritz
für welche lösung hast du dich entschieden
karl heinz ..erneute socket oder daniel ..inline?
ich schreib hier soweit dazu, weil ich denke, dass die inline lösung die 
elegantere ist für sachen die sich nicht so oft ändern ( schalter 
zustand ) und sich beim esp am besten eignen wegen der uart des esp und 
den angeforderten offenen sockets.

nachteil, wenn die daten sehr gross werden müsstest du diese aufteilen 
wegen dem buffer ( 1024 ) und dich selber darum kümmern.
neuere at fw und auch sdk sind aber schon ganz gut zu gebrauchen und du 
kannst den buffer eingangs anpassen oder eben splitten und nachschieben.

ein anderer ansatz wäre hält bei schneller GUI einfach auf grafik zu 
verzichten und mit shapes und farben zu spielen ( green, red )
grad bei schalterstellung.

ein anderer tip den ich auch selber mache, sind iframes und target's,
darin ändere ich nur den bestimmten zieltarget und es geht auch sehr 
schnell.

lg rudi ;-)

@matthias
hier werkelt noch ein schlanker ie 3.0 auf eMbeddedWIN 98 auf 32MB 
DiskOnCHip ;-) in einer STB1030 auf RAM Basis mit XMSDISK ..
also bitte @Matthias  ;-)

von Radeblog (Gast)


Lesenswert?

Fritz S. schrieb:

> Bitte seid doch so freundlich und müllt den Thread nicht zu, es fing
> doch so gut an :)

Pech gehabt, denn jetzt kommt rudi ;) ;) ;)

von Karl Käfer (Gast)


Lesenswert?

Hi Karl Heinz,

Karl Heinz schrieb:
> Der Broswer wendet sich grundsätzlich an den Server mit einem GET
> Request. In diesem Request gibt er auch bekannt, was er gerne hätte.

Ohne Server kein Request...

HTH,
Karl

von Matthias S. (Firma: matzetronics) (mschoeldgen)


Lesenswert?

R. W. schrieb:
> @matthias
> hier werkelt noch ein schlanker ie 3.0 auf eMbeddedWIN 98 auf 32MB
> DiskOnCHip ;-) in einer STB1030 auf RAM Basis mit XMSDISK ..
> also bitte @Matthias  ;-)

Ich will gar nicht wissen, was ihr da noch so benutzt, da läufts einem 
ja kalt den Rücken runter :-P

Für den TE ist vermutlich wichtiger, das es auf seinem Telefon auch 
funktioniert :-), also holt raus eure smarten Dingse und probiert mal. 
Ich lass das HTML'chen noch ein-zwei Tage drauf, dann fliegts Richtung 
/dev/null.

von Karl Käfer (Gast)


Lesenswert?

Hi Fritz,

Fritz S. schrieb:
> Hab mir die Inline - Grafik mit Base64 angesehen, und das funktioniert
> soweit, das einzige, setze ich 3 Bild in folge nebeneinander ist ein
> kleiner Abstand zwischen jedem Bild, ich möchte aber das Bild in der
> Mitte je nach Zustand zwischen 2 auswählen und das ganze soll sich zu
> einem Zusammenfügen.
> Das wird damit wahrscheinlich nichts oder?

Warum nicht? Dafür gibt es Javascript (ECMA-Script).

HTH,
Karl

von Karl Käfer (Gast)


Lesenswert?

Hallo Fritz,

Fritz S. schrieb:
> Also es klappt nun soweit, dass sich alles zu einem Bild zusammenfügt.

Prima.

> Ich möchte in das Bild in der Mitte klicken können, und bei einem Klick
> soll an den Webserver eine Nachricht geschickt werden (Funktioniert
> soweit). Wenn der Server alles verarbeitet hat, soll er das Bild in der
> Mitte ändern.

Also doch ein Server... wozu dann der Aufwand mit den embedded Images?

> Die Frage ist, ob ich hierfür eine komplett neue HTML
> Seite senden muss, oder ob es dafür eine einfachere bzw. elegantere
> Möglichkeit gibt?

Ja, da gibt es elegantere Möglichkeiten, AJAX oder Websockets etwa.

HTH,
Karl

von Tom (Gast)


Angehängte Dateien:

Lesenswert?

Falls "Bild" nicht "Bitmap" bedeutet und kein antiker Mistbrowser 
benutzt wird: SVG-Grafiken kann man wunderbar mit Javascript ändern.

von Daniel A. (daniel-a)


Angehängte Dateien:

Lesenswert?

Fritz S. schrieb:
> kannst du dir mal anschauen, wie man das am Besten vereinfacht bzw.
> vereinheitlichen kann? Bzw. mir einen kleinen Denkanstoß dazu geben?

Ich würde es stärker kapseln und generischer machen. Ich habe mal ein 
Beispiel gemacht ohne externe Libraries und mit OOP.

von R. W. (Gast)


Lesenswert?

@fritz
du kannst dir z.b. eine schalter.h anlegen
und dort den base64 ablegen.
base64 aus einem bild zu machen geht sehr einfach z.b. mit dem tool

http://www.heise.de/download/base64-de-encoder-1158399.html

1
const char sw_on[]  = "<img src=\"data:image/png;base64,daten ....==\" />";
2
const char sw_off[] = "<img src=\"data:image/png;base64,daten ....==\" />";
3
4
..

in den web responsen z.B. dann
1
// constanten nach belieben..
2
// oder auch zentral eine webside.h anlegen ..
3
// hier mal einfach gehalten in der TCP Response von ESP
4
5
const char hs0[]="HTTP/1.0 200 OK\r\nCONTENT-TYPE: text/html\r\n\r\n";
6
const char hs1[]="<html><head><title>Switch</title></head><body>";
7
const char hs2[]="<center>Relais One<br>";
8
const char hs3[]="<img src)\"";
9
const char hs4[]="</center></body></html>";
10
11
..
12
// switch auswertung reqeust..
13
..
14
15
if (sw==on) {
16
os_sprintf(at_dataline,"%s%s%s%s%s%s",hs0,hs1,hs2,hs3,sw_on,hs4);
17
}
18
if (sw==off) {
19
os_sprintf(at_dataline,"%s%s%s%s%s%s",hs0,hs1,hs2,hs3,sw_off,hs4);
20
}
21
22
 at_tranLen = strlen(at_dataLine);
23
 os_sprintf(WebSide,"\r\n %s\r\n", at_dataLine);
24
 uart0_sendStr(WebSide);
25
 espconn_sent (pLink[0].pCon, at_dataLine, at_tranLen);
26
27
// verhindert den lästigen statusbalken 
28
 espconn_disconnect(pLink[0].pCon);
29
30
..


das schöne daran,
- du kannst alles mit "text/html" MIME beantworten.
- du kannst die standard AT Firmware verwenden wenn du einen MCU an der 
UART betreibst;

lg rudi ;-)

ps
der SoC hat zwar auch base64 funktionen onBoard diese werden aber 
derzeit von espressif nicht mehr unterstützt

http://bbs.espressif.com/viewtopic.php?f=7&t=6

von R. W. (Gast)


Lesenswert?

Matthias Sch. schrieb:
> Hier mal ein kleiner Test für so etwas...
> ..Es ist kein direktes HEX, sondern
> benutzt die o.a. BASE64 Methode:
> http://berlin.schoeldgen.de/test.php

@Matthias, ist das von dir?
nutzt du da ein php script das dir base64 erzeugt von einem bild oder 
ist das inline fertiger code?
php code würde mich interessieren wenn er ein base64 vom bild macht und 
über environment zur verfügung stellt..
src? ;-)

btw
für den garten ohne internet reicht der ie3.0
;-)

lg rudi ;-)

von Karl Käfer (Gast)


Lesenswert?

Hi Fritz,

Fritz S. schrieb:
> Außer, dass ich keine PNGs verwenden sollte wegen der PNG
> Inkompatibilität des älteren IE Browser?

Vergiß die Inkompatibilitäten solcher Antiquitäten. Wer heute noch mit 
dem IE6 surft, hat es nicht anders verdient.

Liebe Grüße,
Karl

von Fritz S. (Gast)


Lesenswert?

Danke für die Files, und die Vorschläge.

@Daniel, danke ich werde mir das genauer anschauen, ist extremst 
umfangreich, und ich leider in js nicht sehr bewandert.

@rudi: Aktuell bin ich etwas von den inline Grafiken abgekommen, da die 
doch noch etwas Speicherintensiver sind, als wenn ich die .pngs nach 
Anfrage des Clients einfach vom Server schicke.
Einfacher wäre es bestimmt, weil ich alles immer mit html komplett 
nachlade, und keine Anfragen für Bilder etc. reinkommen. Aber einige der 
Sachen kann ich sicher auch so verwenden und helfen extrem. Danke!

Lg Fritz

von SuseLunix (Gast)


Lesenswert?

Man macht so was teilweise auch mit einem ganzen Satz an Icons oder 
Bildern.
Also alle kleine Bilder in ein gesamtes großes:
http://rsiqueira.postbit.com/upload/2/posts/bootstrap-icons.png

Anstatt einem kleinen Bild stellt man dann ein Container dar, zB 32x32 
Pixel, Hintergrund ist dieses große Bild. Und per Javascript setzt man 
dann nur noch den Offset so, dass das gewünschte Icon dargestellt wird.

Das hat den Vorteil, dass am Anfang nur ein Bild geladen wird und es bei 
neuen Bildern im Browser zu keiner Verzögerung kommt.

von Matthias S. (Firma: matzetronics) (mschoeldgen)


Lesenswert?

R. W. schrieb:
>> http://berlin.schoeldgen.de/test.php
>
> @Matthias, ist das von dir?
> nutzt du da ein php script das dir base64 erzeugt von einem bild oder
> ist das inline fertiger code?

Das ist hardkodierter Inline Code, die Extension ist zwar php, ist aber 
gar nicht wahr, also schlichtes HTML.
Hier der Beweis:
http://berlin.schoeldgen.de/test.html

von eProfi (Gast)


Lesenswert?

> Naja, naja. Wer heute noch mit IE6 rummacht, ist aber sowieso
> fast überall abgehängt.
Auf Seiten, die nicht angezeigt werden, (von Leuten, die nicht mehr 
ordentlich coden können) verzichte ich gerne.
Das ist ein weitere Grund, warum ich mich hier im Forum so wohl fühle, 
neben der netten Gesellschaft mit Euch (-;
Karl-Heinz, Matthias, Rudi, Radeblog, Winfried, Sascha, Axel Schwenke:
ich mag einfach Eure Art.

> Wer heute noch mit dem IE6 surft, hat es nicht anders verdient.
Es heißt ja nicht, dass ich nichts anderes in Peto habe (sonst hätte ich 
ja das "Rätsel" nicht lösen können, dessen Lösung ich nun doch für 
Fritz, da er so nett gefragt hat, preisgeben will.
Dazu muss man ein wenig "um die Ecke denken" können:
Das kleine PNG von Matze stellt Striche und Punkte dar, welche man 
leicht als Morsecode identifizieren kann. Es sind 5 Zeichen, die der 
Kenner schnell als Amateurfunk-Rufzeichen assoziiert. Kurz danach 
gesucht, kommt man darauf, dass es dem D.K. zugewiesen ist.

>> Ist daran irgendwas Konstruktiv :P?
>Ja.
Konspirativ?

> Ich will gar nicht wissen, was ihr da noch so benutzt,
> da läufts einem ja kalt den Rücken runter :-P
Ja, es gibt sie noch, die gute alten Tools.
debug, AFD pro, die alten Nortons (ndd, nu, ndu), tc, gs etc.
Da kann das moderne Zeug (welches natürlich auch vorhanden ist) oft 
nicht dagegen anstinken.

@Matthias: jetzt würde mich schon, warum Du ausgerechnet dieses Bild 
genommen hast. Hattest Du das schon parat?

von Daniel A. (daniel-a)


Lesenswert?

eProfi schrieb:
>> Naja, naja. Wer heute noch mit IE6 rummacht, ist aber sowieso
>> fast überall abgehängt.
> Auf Seiten, die nicht angezeigt werden, (von Leuten, die nicht mehr
> ordentlich coden können) verzichte ich gerne.

Du scheinst hier dem irrtum zu unterliegen, keine kompatiblitat zum ie6 
ist kein ordentliches coding, aber es ist umgekehrt: wer kompatiblitat 
zu uhrzeitbrowsern wie netscape und ie6 wahrt, muss sich mit dessen 
teiweise nicht standartkonformen oder unterschiedlichen verhalten 
herumschlagen. Dadurch werden hacks (z.B. css star hack) und die 
verwendung von ActiveX objecten (für xmlhttprequests) nötig, sowie 
browserabfragen zur behandlung von unterschieden (z.B. anderes Event 
bubbeling). Wer solche hacks braucht, und zur ie6 kompatiblität braucht 
man die, ist gezwungen die standards zu missachten und betreibt somtit 
schlechtes codeing.

Die neueren standards sind schon weit verbreitet, schreiben besser vor 
wie der Parser und das Rendering der webseite funktionieren müssen, und 
erlauben bei dessen einhaltung ein korrektes funktionieren in allen 
neueren browsern (css3 animationen im ie11 mal ausgenommen, das ist dort 
russisch rulett).

IE browser vor version 10 sind sowiso nur eine ansammlung aus bugs, 
woher sollte der ie sont einen so schlechten ruf haben, dass MS in 
abschafft und einen neuen mit neuem namen entwickelt (heisst glaub ich 
"spartan" oder so).


Zudem ist der ie6 unsicherer, seine schwachstellen bekannt, und der 
support eingestellt.

Man sollte viren schreiben, die den ie6 deinstallieren, Chrome und 
Firefox installieren, und sich danach wieder löschen. Das würde den user 
sicher vor vielen gefärlicheren viren schützen.

von Winfried J. (Firma: Nisch-Aufzüge) (winne) Benutzerseite


Lesenswert?

Chrome wäre das letzte, dass ich haben wollte, wie oft ic damit schon 
zwangsbeglückt wurde und ihn sofort runtergerissen habe vermag ich nicht 
mehr zu zählen

von Daniel A. (daniel-a)


Lesenswert?

Winfried J. schrieb:
> Chrome wäre das letzte, dass ich haben wollte,

Was ist denn so schlimm an chrome?

> wie oft ic damit schon zwangsbeglückt wurde

Wenn du einen anderen browser als ein webkit oder gecko browser hattest, 
ist dass doch die Lösung!

> und ihn sofort runtergerissen habe vermag ich nicht mehr zu zählen

Wiso den runterschmeissen? Es wurden doch 2 probleme gelöst:
Der veraltete browser ist überflüssig geworden, und du kannt mit chrome 
nicht erneut "zwangsbeglückt" werden ;)
Wenn du den runterschmeisst hast du ja beide Probleme wieder, 
vernünftige Programme&Webseiten müssen diesen missstand natürlich 
beheben!

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.