Zeichnung und Marker speichern

[JQJava]

Vielen Dank für eure Hilfe!

Habe jetzt folgendes ausprobiert, aber brauche noch einen Denkanstoß was dabei falsch sein könnte.

Hier der Code, aber funktioniert immer noch nicht:

function save(){
  for(var i in icons){
        localStorage.setItem(i, icons[i]);
    }
};

function checkedRadioBtn(url, size, extProj){
  ...//siehe vorherigen Beitrag

  for(var i in localStorage){
        localStorage.getItem(i);
    }

  ...//siehe vorherigen Beitrag
};

Bedanke mich im Voraus!

 

[mikdoe]

aber funktioniert immer noch nicht:

Das ist jetzt nicht unbedingt etwas, womit man was anfangen könnte. Manchmal ist der Beginn einer systematischen Fehlersuche schon das Formulieren des Fehlers. Wenn du es schaffst, einen Fehler so zu formulieren, dass damit ein anderer was anfangen kann, hast du meistens schon die Lösung. Versuch das bitte mal!
Wir helfen dir dabei, indem jetzt bitte mal keiner die Lösung vorgibt! Danke.

 

[j-l-n]

Learning bei Doing
Aber zumindest eine Hilfe darf ich geben: http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html

 

[mikdoe]

Ja, die Fehlerkonsole ist das wichtigste Medium bei der Entwicklung von Browsercode! Und der zweite wichtige Punkt ist eine klare Vorgabe, was passieren soll, wenn es funktioniert.

 

[JQJava]

Das ist jetzt nicht unbedingt etwas, womit man was anfangen könnte. Manchmal ist der Beginn einer systematischen Fehlersuche schon das Formulieren des Fehlers. Wenn du es schaffst, einen Fehler so zu formulieren, dass damit ein anderer was anfangen kann, hast du meistens schon die Lösung. Versuch das bitte mal!
Wir helfen dir dabei, indem jetzt bitte mal keiner die Lösung vorgibt! Danke.

Soll ein Forum nicht eher helfen? Ansonsten bin ich dann hier im falschen Forum ;-(

- - - Aktualisiert - - -

Learning bei Doing
Aber zumindest eine Hilfe darf ich geben: http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html

Erstens...meine Fehlerkonsole gibt mir keine Fehler aus. Und zweitens muss man echt sehr dumm sein, wenn man was programmiert und die Javascipt-Konsole nicht kennt. Denn ohne dies kann man ja nicht genau schauen, wo der Fehler liegt. Aber zu meinem Problem ist es, dass mein Code ja keine Fehler ausgibt, aber das speichern immer noch nicht funktioniert. Wenn ich den speicher Button klicke und dann aktualisiere, dann sind meine marker alle wieder weg. Und gerade hier hänge ich und komme damit nicht weiter, wieso es nicht funktioiniert. Vielleicht habe ich ja einen kleinen Fehler in meinem code, den ich nicht sehe. Und deshalb um eure Hilfe bitte. ;-(

 

[mikdoe]

Soll ein Forum nicht eher helfen?

Doch klar. Aber man muss auch wissen, wie man helfen kann, der Hilfebedürftige muss in der Lage sein zu formulieren, wie man ihm helfen kann. Das ist überall so, nicht nur hier

Ansonsten bin ich dann hier im falschen Forum ;-(

Thematisch bist du hier genau richtig.

Inhaltlich finde ich persönlich es hier mittlerweile zu kompliziert. Hier fliegen überall Code Schnipsel in der Gegend rum aber es gibt nichts Komplettes zum anschauen zusammen mit einer aussagekräftigen aber kurz gehaltenen Fehlerbeschreibung. Ein Einarbeiten dauert mir deshalb einfach zu lange (und anderen geht es vielleicht auch so?). Kannst du nicht einfach mal ein Beispiel bei Fiddle online stellen?

 

[JQJava]

Inhaltlich finde ich persönlich es hier mittlerweile zu kompliziert. Hier fliegen überall Code Schnipsel in der Gegend rum aber es gibt nichts Komplettes zum anschauen zusammen mit einer aussagekräftigen aber kurz gehaltenen Fehlerbeschreibung. Ein Einarbeiten dauert mir deshalb einfach zu lange (und anderen geht es vielleicht auch so?). Kannst du nicht einfach mal ein Beispiel bei Fiddle online stellen?

Doch das kann ich machen, aber das Problem ist ja, dass ihr die Bilder nicht seht und zweitens habe ich einige JS Dateien in HTML eingebunden. Die aber nur für Openlayers 3 relevant ist. Deshalb meine Frage, wie soll ich das denn auf Fiddle online stellen? Vielleicht kann mir einer verraten wie es am besten geht. Und den kompletten code habe ich am Anfang beim ersten Beitrag von mir schon hochgeladen.

 

[mikdoe]

Hast du den Code denn schon soweit reduziert, dass der Fehler zwar noch auftritt aber jeglicher überflüssiger Code entfernt ist?

 

[j-l-n]

Soll ein Forum nicht eher helfen?

Ja, aber am meisten lernen tut man nur durch selbst Ausprobieren. Und wenn du's dann nicht alleine schaffst, helfen wir dir gerne weiter.
Alles andere hat mikdoe schon erklärt.

Und zweitens muss man echt sehr dumm sein, wenn man was programmiert und die Javascipt-Konsole nicht kennt.

Nein, das ist völlig falsch. Und das hat schon gar nichts mit "Dummheit" zu tun. Du solltest mal sehen, wie oft ich hier am Tag die Fehlerkonsole verlinke - sehr viele Anfänger kennen die nämlich eben nicht.

- - - Aktualisiert - - -

Steht denn nun eigentlich etwas in der Konsole, und wenn ja, was?

 

[JQJava]

Hast du den Code denn schon soweit reduziert, dass der Fehler zwar noch auftritt aber jeglicher überflüssiger Code entfernt ist?

Also hier ist jetzt das online:
Edit fiddle - JSFiddle

ich hoffe, dass es weiter hilft. Wie gesagt, die Bilder werden nicht angezeigt. Habe den Rest gelöscht. Nur das mit icons habe ich gelassen, damit ihr sehen könnt, was icons sind und wie die erstellt werden.
Kann ja grob mitteilen:
function checkRefresh(){..} ist nur für den Button "Marker hinzufügen". In den text input Felder werden x udn y eingetragen die dann auf der map an der Position ein Icon hinzugefügt wird.
function checkedRadioBtn(url, size, extProj){..} ist dafür da, wenn ich bei Radios switche. Wenn Bild 1 angeklickt wurde, dann lösche mir das davorherige Bild. Und in diese Funktion habe ich das localStorage.getItem gemacht. Weil das speichern von Icon soll ja auf das richtige Bild gespeichert werden.
var baseLayer = .. ist einfach meine erstes Bild. Wenn ich die Seite hochlade. Die dann auf mein map hinzugefügt wird mti der entsprechenden pixelProjection.
function save(){..} ist mein Speicher Button, wenn ich die Icons speichern will. Also es soll nur mit localStorage.setItem gespeichert werden, wenn ich den Button erst klicke, ansonsten soll nichts gespeichert werden.

Hoffe, ich habe jetzt verständlich formuliert, woran ich seit einer Woche dran hänge. Das Doofe ist noch, dass ich keinen Fehler auf der Konsole habe ;-(

 

[kkapsner]

Fangen wir doch mal vor vorne an und arbeiten uns dann Schritt für Schritt weiter.

Das Problem ist doch erst einmal, dass du irgendwas permanent speichern willst. Und das ist auch noch ein Array und kein String. Das ist erst einmal unpraktisch, da localStorage nur Strings speichern kann:

var a = 2; // eine Zahl
localStorage.setItem("test", a);
alert(typeof localStorage.getItem("test")); // es komm ein String wieder raus - durch den Autocast nach String

Du wirst es also nie schaffen, da ein OL-Objekt zu speichern. Du musst das immer auf einen String, der dann auch wieder zurücktransformiert werden kann, ummodeln.

Bei nativen Sachen (Number, String, Array, Boolean und Object) könntest du JSON verwenden. Also würde ich vorschlagen, dass du deine OL-Objekt zu einem einfachen Objekt mit den Koordinaten und dem Radius machst und dann den Array durch JSON.stringify() jagst. Den String kannst du dann im localStorage speichern.

Auslesen kannst du dann mit JSON.parse(). Wobei dein Auslesecode bis jetzt komplett unbrauchbar ist. Ein for...in Schleife über localStorage liefert dir nicht die Schlüssel, die du hinterlegt hast, (wenn du den Array als JSON speicherst, brauchst du das auch gar nicht) und du musst den Rückgabewert von .getItem() natürlich auch schon irgendwohin speichern. Auch wird natürlich nicht durch Magie einfach alles wieder dorthin gezeichnet, indem du .getItem() aufrufst. Du musst dir deine OL-Objekte dann schon wieder alle zusammenbauen und darstellen.

PS: im jsfiddle bekomme ich einen Syntaxfehler...

 

[JQJava]

Hi,

Danke für die Hilfe.

Bei mir klappt es jetzt mit dem speichern und anzeigen.
Hier der Link: Edit fiddle - JSFiddle
In dieser Funktion checkedRadioBtn(...){} ab

var iconsToAdd = [],...;
           ...
        }
      }

rein programmiert. Mein Marker wird gespeichert wenn ich den Button "speichern" klicke, sowie auch Circle. Nur beim circle wird der Kreis irgendwie nicht dem entsprechenden Radius angezeigt. Angenommen ich tippe x: 2 y: 44 Radius: 2 und dann "speichern" dann erscheint mein Kreis viel größer als davor und weiß nciht wo der Fehler sein könnte. Und auf der Javascript Konsole wird kein Fehler angezeigt. Das mit dem if(key.indexOf("draw") > -1){..} wird auch nicht richtig gespeichert. Es wird gar nicht gespeichert :-( Warum? Kann mir einer helfen?

Vielen Dank!

JQJava

 

[JQJava]

Das Problem wurde gelöst, wegen dem Radius.
Hier der Code:
Edit fiddle - JSFiddle
Nur jetzt hänge ich an einem letzten Problem. Meine Zeichnung werden nicht gespeichert.
if(key.indexOf("draw") > -1){...} ist in der Funktion function checkedRadioBtn(...){...} Zeile 167.
Hoffe ihr könnt mir helfen. Wenn ich unverständlich schreibe, dann schreibt mir.

 

[kkapsner]

Das müsste eigentlich was in der Fehlerkonsole stehen, da die Variable numIc nirgends definiert wird.

Die jsfiddler sind ja ganz nett, aber bei dir nie lauffähig. Kannst du nicht mal einen Testlink machen, bei dem das Ganze, bis auf die Problemstellung, funktioniert?

 

[JQJava]

Das müsste eigentlich was in der Fehlerkonsole stehen, da die Variable numIc nirgends definiert wird.

Die jsfiddler sind ja ganz nett, aber bei dir nie lauffähig. Kannst du nicht mal einen Testlink machen, bei dem das Ganze, bis auf die Problemstellung, funktioniert?

Also einen Testlink zu erstellen, habe ich keine Ahnung. Im Anhang habe ich einen Ordner hochgeladen. Geht dann in den Ordner bild und führt einfach das .html aus. Dann seht ihr alles. Dann zeichnen, wie "area" oder "length" und dann speichern und dann anderes Bild anklicken. Nach dem anklicken, sieht man die Speicherung nicht. Aber wenn ihr Marker erstellt udn speichert, dann geht es. :-(

 

[kkapsner]

Du hast einen Fehler in der Fehlerkonsole! Und zwar beim Laden der Daten.

Ich hab' dir doch schon gesagt, dass man in localStorage nur Strings speichern kann. Wenn du da Arrays und Objekte speichern willst, musst du die zuerst serialisieren (z.B. mit JSON.stringify()). Schau' dir doch einfach mal an, was in localStorage.getItem("0_draw data/schiffBaudock.png") drinsteht...

PS: for...in ist bei der Iteration über ein Array nicht gut. Verwende ein normales for oder .forEach().

- - - Aktualisiert - - -

PPS: Dass globale Variablen schlecht sind, hab' ich dir wahrscheinlich schon mal gesagt...

 

[JQJava]

Du hast einen Fehler in der Fehlerkonsole! Und zwar beim Laden der Daten.

Diesen Fehler habe ich vergessen zu löschen. Die Implementierung ist auch falsch.
Hier:

if(key.indexOf("draw") > -1){
            drawToAdd.push(localStorage.getItem(key).getGeometry.h);
...

wurde geändert ins:

if(key.indexOf("draw") > -1){
            drawToAdd.push(JSON.parse(localStorage.getItem(key)));
          ...

aber es gibt ja Objekt zurück.

Ich hab' dir doch schon gesagt, dass man in localStorage nur Strings speichern kann. Wenn du da Arrays und Objekte speichern willst, musst du die zuerst serialisieren (z.B. mit JSON.stringify()). ....

Das mit Strings habe ich verstanden. Meine Icons und Circle werden richtig gespeichert. Aber bei draw werden Objekte gespeichert. Ich habe mir das localStorage.getItem(key) angeschaut. Dadrin stehen Objekte. Mit JSON.stringify() verstehe ich nicht so ganz. Ich habe dies jetzt umgesetzt, aber in der Konsole zeigt "Uncaught TypeError: Converting circular structure to JSON". Aber wieso?
Hier Code:

 for(var d = 0; d<iconsDraw.length; d++){
        localStorage.setItem(d + "_draw "+formUrl, JSON.stringify(iconsDraw[d]));//iconsDraw[d]);   
    }

Dies ist in meiner zip Datei Zeile 750-752 eingefügt worden.

PPS: Dass globale Variablen schlecht sind, hab' ich dir wahrscheinlich schon mal gesagt...

Ja, du hast es schonmal gesagt, aber wie soll ich es dann realisieren? Ich kann ja nicht auf Variablen in einer Funktion zugreifen, wenn ich in der anderen Funktion die Variable brauche. Verstehe ich auch nicht so ganz?

 

[kkapsner]

Dadrin stehen Objekte.

Nicht so wirklich. Der String "[object Object]" ist kein Objekt und JSON.parse() kann damit auch nichts anfangen (sollte auch in der Fehlerkonsole stehen)

Ich habe dies jetzt umgesetzt, aber in der Konsole zeigt "Uncaught TypeError: Converting circular structure to JSON". Aber wieso?

Dann werden deine iconsDraw irgendwas zyklisches enthalten (entweder in meassureSource oder in drawStyle). Eine zyklische Struktur wäre z.B. sowas:

var b = {a: {}};
b.a.b = b;

Ja, du hast es schonmal gesagt, aber wie soll ich es dann realisieren? Ich kann ja nicht auf Variablen in einer Funktion zugreifen, wenn ich in der anderen Funktion die Variable brauche. Verstehe ich auch nicht so ganz?

Du kannst z.B. die beiden Funktion in einem gemeinsamen Funktionsscope definieren:

var API = (function(){
	var a = 1;
	
	function add(){
		a += 1;
	}
	funcion sub(){
		a -= 1;
	}
	
	return {
		add: add,
		sub: sub,
		alert: function(){
			alert(a);
		}
	};
}());

API.alert();
API.add();
API.alert();
API.sub();
API.alert();