nicht angemeldet
Array mit Canvas Elementen Sichern
0 
Auge
0 Tabellenkalk
0 Auge
0
1
Array mit Canvas Elementen Sichern
Gunnar BittersmannHallo zusammen,
Hier handelt es sich um meinen ersten Beitrag also entschuldigt mir bitte kleine Fehler. ;) Ich habe hier eine kleine Seite mit Canvas Elementen geschrieben, diese werden wenn man sie anklickt blau eingefärbt. Diese Einfärbung verschwindet natürlich wieder wenn man die Seite neu lädt. Nun meine Frage, wie kann ich dies verhindern, sprich die Seite soll für alle Nutzer immer den veränderten Zustand anzeigen und diesen Zustand zuverlässig speichern. Bin in Sachen php und Co. nicht so versiert, aber das muss doch sicher irgendwie gehen. Für Verbesserungen im Code bin ich natürlich offen. Danke schon mal im Voraus für eure Beiträge. :D
<!DOCTYPE html>
<html>
<head>
<style>
#my_canvas{
overflow-x:hidden;
overflow-y:hidden;
margin-top:-0.4em;
margin-left:-0.4em;
opacity:0.7;
}
body{
background: #fff url(fussballfeld_bild_20140504_1477602326.png) no-repeat;
overflow-x:hidden;
overflow-y:hidden;
width="980";
height="880";
}
</style>
<script>
function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.canvas.addEventListener('mousedown', function(event) {
var mX = event.clientX - ctx.canvas.offsetLeft;
var mY = event.clientY - ctx.canvas.offsetTop;
for(var i = 0; i < kasten.length; i++){
var b = kasten[i];
if(mX >= b.x && mX < b.x+b.w && mY >= b.y && mY < b.y+b.h){
document.getElementById('status').innerHTML = "You touched "+b.id;
b.bg = "blue";
ctx.fillStyle = "blue";
ctx.fillStyle = b.g;
ctx.fillRect(b.x,b.y,b.w,b.h);
ctx.restore();
}//Ende if
}//ENde For
});//ENde Eventlistener
var ctx = document.getElementById('my_canvas').getContext('2d');
var kasten = new Array(1000);
var kastenid= 0;
for(var i = 0; i < 100; i++){
for(var j = 0; j < 60; j++){
var xpos = i*8.86;
var ypos = j*9.95;
var test = {"id":kastenid,"x":xpos,"y":ypos,"w":8.86,"h":9.95,"bg":"green"};
kasten[kastenid] = test;
var c = kasten[kastenid];
ctx.fillStyle = "green";
ctx.fillRect(c.x,c.y,c.w,c.h);
ctx.strokeRect(c.x,c.y,c.w,c.h);
kastenid++;
}//ENde innere For-schleife
}//Ende äußere For-Schleife
}//Ende initCanvas
window.addEventListener('load', function(event) {
initCanvas();
});
</script>
</head>
<body scroll="no" >
<canvas scroll="no" id="my_canvas" width="890" height="600"></canvas>
<h2 id="status"></h2>
</body>
</html>
-
Hallo
Ich habe hier eine kleine Seite mit Canvas Elementen geschrieben, diese werden wenn man sie anklickt blau eingefärbt. Diese Einfärbung verschwindet natürlich wieder wenn man die Seite neu lädt. Nun meine Frage, wie kann ich dies verhindern, sprich die Seite soll für alle Nutzer immer den veränderten Zustand anzeigen und diesen Zustand zuverlässig speichern. Bin in Sachen php und Co. nicht so versiert, aber das muss doch sicher irgendwie gehen. Für Verbesserungen im Code bin ich natürlich offen.
Speichere die Änderung der Farbe im Browser des Benutzers als Cookie ab und prüfe beim erneuten Laden auf das Vorhandensein und den Wert des Cookies.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“-
Hallo,
sprich die Seite soll für alle Nutzer immer den veränderten Zustand anzeigen und diesen Zustand zuverlässig speichern.
Speichere [...] im Browser des Benutzers
Ich lese das so, dass serverseitiges Speichern benötigt wird.
Gruß
Kalk-
Hallo
sprich die Seite soll für alle Nutzer immer den veränderten Zustand anzeigen und diesen Zustand zuverlässig speichern.
Speichere [...] im Browser des Benutzers
Ich lese das so, dass serverseitiges Speichern benötigt wird.
Nur, weil von einem – nach eigenen Worten – „in Sachen php und Co.“ nicht versierten Benutzer PHP erwähnt wird?
Meiner Meinung nach spricht nichts gegen eine Speicherung beim Benutzer per JS. Er nimmt die Änderung der Farbe per JS im Browser vor, also ist JS aktiv. Warum dann nicht auch den Cookie per JS setzen und beim laden der Seite auslesen?
Mit PHP kannst du doch auch nur ein Cookie setzen, wenn du nicht noch ein Loginsystem einbauen willst. Die Info bezüglich der Farbänderung muss dann auch erst einmal zum Server (Ajax, Reload der Seite?), was die Sache mMn unnötig verkompliziert.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“-
Hallo,
sprich die Seite soll für alle Nutzer immer den veränderten Zustand anzeigen und diesen Zustand zuverlässig speichern.
Speichere [...] im Browser des Benutzers
Ich lese das so, dass serverseitiges Speichern benötigt wird.
Nur, weil von einem – nach eigenen Worten – „in Sachen php und Co.“ nicht versierten Benutzer PHP erwähnt wird?
Nö, nicht deswegen. Ich habe "alle Nutzer" als Plural und "den veränderten Zustand" als einen einzigen interpretiert. Aber du hast recht, man kann es auch anders lesen.
Vielleicht bekommen wir von paddex eine eindeutigere Beschreibung der Aufgabe?
Gruß
Kalk-
Sorry das ich erst jetzt antworte, also das Problem ist ja das alle die die Seite besuchen das gleiche angezeigt bekommen sollen. Mit cookies hätte ja jeder nutzer nur seinen eigenen zustand für sich gespeichert oder?
Also nochmal die Beschreibung des Problems:
Nutzer 1 färbt z.B. die kästchen 1 -9 ein, dann geht nutzer 2 auf die seite und sieht kästchen 1 - 9 ist eingefärbt und färbt dann kästchen 10 - 20 meinetwegen ein. für Nutzer 3 sind dann wenn er auf die Seite geht die Kästchen 1 - 20 eigefärbt usw.
Danke schonmal für die schnellen Antworten
-
Sorry das ich erst jetzt antworte,
Dafür brauchst du dich nicht zu entschuldigen, hier sind geduldige Menschen unterwegs :)
also das Problem ist ja das alle die die Seite besuchen das gleiche angezeigt bekommen sollen.
Das erscheint mir auf Anhieb erstmal nicht besonders sinnvoll. Woher soll der König von England wissen, dass der Bulle von Tölz gerade die selbe Seite zu Gesicht bekommt? Und dann stellt sich noch die Frage, ob es den König überhaupt interessiert, vor allem wenn er den Bullen nicht mal kennt. Und was ist, wenn plötzlich statt dem einen Bullen, ein ganzes Großstadtrevier auf der Seite surft? Interessiert es den König dann auch, dass alle Bullen die selbe Seite zu sehen bekommen, wie er selbst?
Mit cookies hätte ja jeder nutzer nur seinen eigenen zustand für sich gespeichert oder?
Die Beobachtung ist richtig. In deinem Fall müsstest du wohl auf serverseitige Technologien zurückgreifen.
Also nochmal die Beschreibung des Problems:
Nutzer 1 färbt z.B. die kästchen 1 -9 ein, dann geht nutzer 2 auf die seite und sieht kästchen 1 - 9 ist eingefärbt und färbt dann kästchen 10 - 20 meinetwegen ein. für Nutzer 3 sind dann wenn er auf die Seite geht die Kästchen 1 - 20 eigefärbt usw.
Angenommen Nutzer 1 hat die Kästchen 1-9 eingefärbt, dann besuchen Nutzer 2 und 3 gleichzeitig die Seite und sehen beide die angehakten Kästchen 1-9. Nutzer 2 wählt die Optionen 15 und 16 und Nutzer 3 wählt die Option 5 wieder ab und nimmt die Optionen 15 und 17 hinzu, anschließend speichern beide Nutzer ab. Einer der beiden wird sich beim nächsten Seitenaufbau vermutlich darüber wundern, dass die Webseite nicht in dem Zustand ist, in dem er sie gerade erst abgespeichert hat.
Ich will nicht sagen, dass dein Vorhaben generell aussichtslos ist, ich möchte dir nur ein paar Denkanstöße mitgeben, wo evtl. Probleme lauern.
-
Dafür brauchst du dich nicht zu entschuldigen, hier sind geduldige Menschen unterwegs :)
Das hört man immer gerne :D
Das erscheint mir auf Anhieb erstmal nicht besonders sinnvoll. Woher soll der König von England wissen, dass der Bulle von Tölz gerade die selbe Seite zu Gesicht bekommt? Und dann stellt sich >noch die Frage, ob es den König überhaupt interessiert, vor allem wenn er den Bullen nicht mal >kennt. Und was ist, wenn plötzlich statt dem einen Bullen, ein ganzes Großstadtrevier auf der Seite >surft? Interessiert es den König dann auch, dass alle Bullen die selbe Seite zu sehen bekommen, wie >er selbst?
Naja dann mal Butter bei die Fische, also es geht darum, das man sich quasi eine Patenschaft für ein Stück rasen sichern kann und den auf der Seite sich reservieren. Daher ist es ein Muss, denk ich mal, das der König von England weiß, was sich der Bulle von Tölz schon reserviert hat.
Mit cookies hätte ja jeder nutzer nur seinen eigenen zustand für sich gespeichert oder?
Die Beobachtung ist richtig. In deinem Fall müsstest du wohl auf serverseitige Technologien zurückgreifen.
Welche serverseitige Technologie würde sich denn in dem Fall anbieten?
Angenommen Nutzer 1 hat die Kästchen 1-9 eingefärbt, dann besuchen Nutzer 2 und 3 gleichzeitig die Seite und sehen beide die angehakten Kästchen 1-9. Nutzer 2 wählt die Optionen 15 und 16 und Nutzer 3 wählt die Option 5 wieder ab und nimmt die Optionen 15 und 17 hinzu, anschließend speichern beide Nutzer ab. Einer der beiden wird sich beim nächsten Seitenaufbau vermutlich darüber wundern, dass die Webseite nicht in dem Zustand ist, in dem er sie gerade erst abgespeichert hat.
Die Tatsache mit den parallel laufenden Anwendungen könnte ich ja umgehen wenn ich bei jeder Auswahl den Zustand Speichere und die Darstellung aktualisiere. Der Zugriff auf die Seite wird nicht so enorm sein und die Reservierung muss danach erst durch eine weitere Seite zu der man weitergeleitet wird bestätigt dort könnte man abschließend nochmal kontrollieren ob alles verfügbar ist was man angewählt hat.
-
Naja dann mal Butter bei die Fische, also es geht darum, das man sich quasi eine Patenschaft für ein Stück rasen sichern kann und den auf der Seite sich reservieren. Daher ist es ein Muss, denk ich mal, das der König von England weiß, was sich der Bulle von Tölz schon reserviert hat.
Ja, das ist dann wohl wirklich sinnvoll und sogar notwendig.
Mit cookies hätte ja jeder nutzer nur seinen eigenen zustand für sich gespeichert oder?
Die Beobachtung ist richtig. In deinem Fall müsstest du wohl auf serverseitige Technologien zurückgreifen.
Welche serverseitige Technologie würde sich denn in dem Fall anbieten?
Mit PHP hast du ja laut eigener Aussage schon Erfahrung, wenn auch nur sehr wenig. Der verbreiteste Software-Stack, dürfte also ein Apache-Webserver für die grundlegende HTTP-Funktionalität, eine MySQL-Datenbank zum dauerhaften Speichern der Zustände und PHP für die Programmlogik sein. Das Trio wird wegen seiner Popularität oft auch einfach als LAMP-Stack bezeichnet, das L steht für Linux.
In groben Zügen, musst du zuerst ein MySQL-Datenbankschema entwerfen, dass alle relevanten Informationen speichern kann. Das werden mehrere Tabellen werden, beispielsweise eine Tabelle für Raseflächen, eine Tabelle für Paten und eine verknüpfende Tabelle für Partnerschaften.
Deine PHP-Anwendung, wird die Daten aus dieser Datenbank auslesen und darauf aufbauend eine HTML-Seite erzeugen. Die HTML-Seite sollte die Informationen darüber enthalten, welche Rasenflächen schon reserviert sind und ein Formular für die noch zu vergebenen Rasenflächen enthalten. Das kann beispielsweise eine Checkbox für jede noch verfügbare Rasenfläche sein.
Von der Darstellung her sind Checkboxen natürlich nicht so ansprechend, wie die <canvas>-Visualisierung, mit der du dir offensichtlich schon viel Mühe gegeben hast. Aber darauf musst du auch nicht verzichten, du kannst schließlich deine <canvas>-Animation mit den Checkboxen aus dem Formular über JavaScript synchronisieren indem du entsprechende EventHandler beim Formular und bei beim <canvas> registrierst, die Änderungen festellen und angleichen können. Etwas fortschrittlicher wäre es, die Synchronisierung nicht direkt zwischen Formular und Canvas vorzunehmen, sondern ein Model zu implementieren, das die Zustände an einer zentralen Stelle verwaltet. Formular und Canvas müssen dann immer nur den Zustand des Models reflektieren und manipulieren. Formular und Canvas wären auf diese Weise entkoppelt.
Der Nutzer kann das Formular dann ausfüllen und wieder an den Webserver schicken. Deine PHP-Anwendung muss die Formulardaten dann entgegennehmen und in der Datenbank speichern. Bevor sie das macht, sollte sie die Daten aber unbedingt auf Gültigkeit prüfen: Ist die Rasenfläche, die der Nutzer ausgewählt hat, wirklich noch verfügbar? Gibt es eine solche Rasenfläche überhaupt? Du kannst dich nicht darauf verlassen, dass deine PHP-Anwendung nur gültige Eingabedaten enthält, du musst immer auch mit falschen Eingaben rechnen.
Wenn du dich in JavaScript sicherer fühlt als in PHP, dann könnte auch ein Node.js-Server die richtige Wahl für dich sein, um die serverseitige Logik zu implementieren. An dem konzeptionellen Vorgehen aus den obenstehenden Ausführungen ändert sich dadurch eigentlich nichts. Viele Node.js-Entwickler bevorzugen allerdings dokumentbasierte Datenbanken gegenüber relationalen Datenbanksystemen wie MySQL. Dort werden Daten nicht als Tabellen modelliert, sondern über hiarachiche Strukturen, meistens JSON- oder XML-basiert.
Wenn du die Reservierungen der Rasenflächen in Echtzeit mit den Anzeigen der Surfer synchronisieren möchtest, dann kannst du eine Websocket-Verbindung zwischen Server und Client aufbauen. Das ist wage formuliert, eine andauernde Verbindung, über die sich Server und Client gegenseitig Nachrichten schicken können. Für solche interaktiven Szenarien wärst du mit Node.js auf jeden Fall besser bedient als mit PHP.
Die Tatsache mit den parallel laufenden Anwendungen könnte ich ja umgehen wenn ich bei jeder Auswahl den Zustand Speichere und die Darstellung aktualisiere. Der Zugriff auf die Seite wird nicht so enorm sein und die Reservierung muss danach erst durch eine weitere Seite zu der man weitergeleitet wird bestätigt dort könnte man abschließend nochmal kontrollieren ob alles verfügbar ist was man angewählt hat.
Gut, du hast dir offensichtlich schon mehr Gedanken dazu gemacht, als ich es am Anfang vermutet hatte. Das ist schön zu lesen.
-
Oha danke schonmal für die ausführliche Antwort, in dem Fall muss ich mich die nächsten Tage nochmal intensiv ransetzen und versuchen da was anständiges umzusetzen ;). Hast mir ja genügend Stoff zum grübeln beschafft :D
-
@@1unitedpower
Die HTML-Seite sollte die Informationen darüber enthalten, welche Rasenflächen schon reserviert sind und ein Formular für die noch zu vergebenen Rasenflächen enthalten. Das kann beispielsweise eine Checkbox für jede noch verfügbare Rasenfläche sein.
Von der Darstellung her sind Checkboxen natürlich nicht so ansprechend, wie die <canvas>-Visualisierung, mit der du dir offensichtlich schon viel Mühe gegeben hast. Aber darauf musst du auch nicht verzichten, du kannst schließlich deine <canvas>-Animation mit den Checkboxen aus dem Formular über JavaScript synchronisieren indem du entsprechende EventHandler beim Formular und bei beim <canvas> registrierst, die Änderungen festellen und angleichen können.
Ohne die Visualisierung zu kennen lässt sich natürlich keine genaue Aussage treffen, aber möglicherweise braucht man gar kein
canvas, sondern kann die Label der Checkboxen entsprechend stylen, wie hier im Beispiel als Klaviatur.LLAP 🖖
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
-
-
-
-
Speichere die Änderung der Farbe im Browser des Benutzers als Cookie ab und prüfe beim erneuten Laden auf das Vorhandensein und den Wert des Cookies.
Der Cookie ist zum Speichern clientseitiger Daten nicht besonders geeignet. Cookies werden mit jeder HTTP-Anfrage mitgeschleppt und sind auf nur wenige kB beschränkt. Außerdem ist die Browser-API auch recht puristisch, sodass es schon ziemliches Hantier ist, ein einzelnes Schlüssel/Werte-Paar zu manipulieren. Es gibt inzwischen glücklicherweise fortgescrhittenere Möglichkeiten.
-