Kunstrasenprojekt/Crowdfunding - Hilfe zur Umsetzung

**uw19** · 30.10.2014, 11:31

Hallo. Bei einem Projekt stehe ich vor einer Aufgabe, die ich alleine nicht lösen kann. Vielleicht kann mir hier jemand einen Hinweis geben…?

Es geht um folgendes: Der Sportverein versucht über eine Art Crowdfunding die Erstellung eines Kunstrasens zu finanzieren und möchte dazu symbolisch jeden einzelnen Quadratmeter des neuen Kunstrasens gegen eine Spende von 10,- Euro „verkaufen“. Zur Visualisierung soll das Spielfeld auf einer Internetseite zu sehen sein, unterteilt in die über 10.000 qm (jeder davon etwa 10x10px). Wenn man mit der Maus über das Spielfeld fährt, soll der darunterliegende Teilbereich vergrößert dargestellt werden, so dass die Auswahl eines bestimmten Quadratmeters leichter fällt. Bei Mausklick auf einen Quadratmeter soll dieser dann vergrößert werden und den Namen des Käufers/Sponsors beinhalten. Gesponsorte Quadratmeter sollen farblich markiert werden können, damit man noch freie von schon vergebenen Flächen unterscheiden kann.

Hat jemand eine Idee, wie man das umsetzen kann. Gibt es vielleicht ein passendes Skript für so eine Aufgabe. Oder lässt sich das mit HTML und CSS so oder so ähnlich umsetzen. Ich erwarte natürlich keine fertige Lösung, aber Hinweise, in welche Richtung ich denken sollte, wären willkommen. (OK, fertige Lösungen würde ich auch nicht verschmähen…

)

Vielen Dank an alle, die helfen wollen!

PS: Habe die Anfrage übrigens auch im xhtmlforum eingestellt...

**jgrotstabel** · 30.10.2014, 13:50

Hey,

es gibt da tatsächlich eine kostenpflichtige Lösung auf Oxid Basis.

http://www.shoprenovierer.de/branchen-loesungen/

Vielleicht ist das was für Dich, kostet aber auch wenig Kleingeld ;-)

**uw19** · 30.10.2014, 14:39

Tststs, was es nicht alles so gibt...! Sieht sehr interessant aus. Wenn nur die Sache mit dem Kleingeld nicht wäre...

Werde es trotzdem mal in die Diskussion einbringen und sehen, was der "Chef" so meint. Jedenfalls Danke für den Hinweis, jgrotstabel.

Gibt es vielleicht noch Tipps für den "Eigenbau"?

**joe** · 30.10.2014, 16:26

https://github.com/MillionDollarScri...onDollarScript

Ist dann sowas wie die One Million Dollar Page http://www.milliondollarhomepage.com/

**KlausGrenoble** · 30.10.2014, 16:51

Ich dachte schon, das könnte man gerade kopieren, aber die Namen stehen schon auf der Fläche:
http://www.niederzimmern.de/index02.htm
NZ aktuell
März bis April 2010
Die "Aktion Teer muss her" macht weltweit Schlagzeilen

**uw19** · 29.11.2014, 19:59

Zunächst mal Danke an alle, die hier Hinweise gegeben haben!!!

Unser Plan war nun so, dass wir das Ganze simpler gestalten. Die Paten für einen Quadratmeter der Spielfläche sollen über eine Excel-Liste verwaltet werden. Diese Liste soll dann über ein Makro in HTML-Code übertragen und dieser in ein Inhaltselement "Eigener HTML-Code" in Contao kopiert werden. Dabei entsteht allerdings sehr (!) viel Code. Da der Platz 10.800 qm hat (90x120 m), entsteht Code von nahezu 11.000 Zeilen. Damit ist Contao wohl irgendwie überfordert?!

Ergebnis des Codes wäre eine grafische Darstellung des Spielfeldes, unterteilt in einzelne Quadratmeter, die den Namen des Paten in einem Tooltipp anzeigen, sobald an mit der Maus darüber fährt.

kunstrasen_screnshot_contaoforum.gif

So sähe der Code (Ausschnitt) aus:

Code:

<div id="spielfeld">
	
		<!-- Zeile 1 -->
		<div class="zeile odd">
			<a href="#" title="1-1"><div class="qm odd25euro"></div></a>
			<a href="#" title="1-2"><div class="qm even25euro"></div></a>
			<a href="#" title="1-3"><div class="qm odd"></div></a>
			<a href="#" title="1-4"><div class="qm even"></div></a>
			<a href="#" title="1-5"><div class="qm odd"></div></a>
			<a href="#" title="1-6"><div class="qm even"></div></a>
			<a href="#" title="1-7"><div class="qm odd"></div></a>
			<a href="#" title="1-8"><div class="qm even"></div></a>
			<a href="#" title="1-9"><div class="qm odd"></div></a>
			<a href="#" title="1-10"><div class="qm even"></div></a>
			<a href="#" title="1-11"><div class="qm odd"></div></a>
			<a href="#" title="1-12"><div class="qm even"></div></a>
			<a href="#" title="1-13"><div class="qm odd"></div></a>
			<a href="#" title="1-14"><div class="qm even"></div></a>
			<a href="#" title="1-15"><div class="qm odd"></div></a>
			<a href="#" title="1-16"><div class="qm even"></div></a>
			<a href="#" title="1-17"><div class="qm odd"></div></a>
			<a href="#" title="1-18"><div class="qm even"></div></a>
			<a href="#" title="1-19"><div class="qm odd"></div></a>
			<a href="#" title="1-20"><div class="qm even"></div></a>
			<a href="#" title="1-21: 1. Mannschaft (100qm/1000,-)"><div class="qm oddvk"></div></a>
			<a href="#" title="1-22: 1. Mannschaft (100 qm/1000,-)"><div class="qm evenvk"></div></a>
			<a href="#" title="1-23: 1. Mannschaft (100 qm/1000,-)"><div class="qm oddvk"></div></a>
			<a href="#" title="1-24: 1. Mannschaft (100 qm/1000,-)"><div class="qm evenvk"></div></a>
			<a href="#" title="1-25: 1. Mannschaft (100 qm/1000,-)"><div class="qm oddvk"></div></a>
			<a href="#" title="1-26: 1. Mannschaft (100 qm/1000,-)"><div class="qm evenvk"></div></a>
			<a href="#" title="1-27: 1. Mannschaft (100 qm/1000,-)"><div class="qm oddvk"></div></a>
			<a href="#" title="1-28: 1. Mannschaft (100 qm/1000,-)"><div class="qm evenvk"></div></a>
			<a href="#" title="1-29: 1. Mannschaft (100 qm/1000,-)"><div class="qm oddvk"></div></a>
			<a href="#" title="1-30: 1. Mannschaft (100 qm/1000,-)"><div class="qm evenvk"></div></a>
			<a href="#" title="1-31"><div class="qm odd"></div></a>
			<a href="#" title="1-32"><div class="qm even"></div></a>
			<a href="#" title="1-33"><div class="qm odd"></div></a>
			<a href="#" title="1-34"><div class="qm even"></div></a>
			<a href="#" title="1-35"><div class="qm odd"></div></a>
			<a href="#" title="1-36"><div class="qm even"></div></a>
			<a href="#" title="1-37"><div class="qm odd"></div></a>
			<a href="#" title="1-38"><div class="qm even"></div></a>
			<a href="#" title="1-39"><div class="qm odd"></div></a>
			<a href="#" title="1-40"><div class="qm even"></div></a>
			<a href="#" title="1-41"><div class="qm odd"></div></a>
			<a href="#" title="1-42"><div class="qm even"></div></a>
			<a href="#" title="1-43"><div class="qm odd"></div></a>
			<a href="#" title="1-44"><div class="qm even"></div></a>
			<a href="#" title="1-45"><div class="qm odd"></div></a>
			<a href="#" title="1-46"><div class="qm even"></div></a>
			<a href="#" title="1-47"><div class="qm odd"></div></a>
			<a href="#" title="1-48"><div class="qm even"></div></a>
			<a href="#" title="1-49"><div class="qm odd"></div></a>
			<a href="#" title="1-50"><div class="qm even"></div></a>
			<a href="#" title="1-51"><div class="qm odd"></div></a>
			<a href="#" title="1-52"><div class="qm even"></div></a>
			<a href="#" title="1-53"><div class="qm odd"></div></a>
			<a href="#" title="1-54"><div class="qm even"></div></a>
			<a href="#" title="1-55"><div class="qm odd"></div></a>
			<a href="#" title="1-56"><div class="qm even"></div></a>
			<a href="#" title="1-57"><div class="qm odd"></div></a>
			<a href="#" title="1-58"><div class="qm even"></div></a>
			<a href="#" title="1-59"><div class="qm odd"></div></a>
			<a href="#" title="1-60"><div class="qm even"></div></a>
			<a href="#" title="1-61"><div class="qm odd"></div></a>
			<a href="#" title="1-62"><div class="qm even"></div></a>
			<a href="#" title="1-63"><div class="qm odd"></div></a>
			<a href="#" title="1-64"><div class="qm even"></div></a>
			<a href="#" title="1-65"><div class="qm odd"></div></a>
			<a href="#" title="1-66"><div class="qm even"></div></a>
			<a href="#" title="1-67"><div class="qm odd"></div></a>
			<a href="#" title="1-68"><div class="qm even"></div></a>
			<a href="#" title="1-69"><div class="qm odd"></div></a>
			<a href="#" title="1-70"><div class="qm even"></div></a>
			<a href="#" title="1-71"><div class="qm odd"></div></a>
			<a href="#" title="1-72"><div class="qm even"></div></a>
			<a href="#" title="1-73"><div class="qm odd"></div></a>
			<a href="#" title="1-74"><div class="qm even"></div></a>
			<a href="#" title="1-75"><div class="qm odd"></div></a>
			<a href="#" title="1-76"><div class="qm even"></div></a>
			<a href="#" title="1-77"><div class="qm odd"></div></a>
			<a href="#" title="1-78"><div class="qm even"></div></a>
			<a href="#" title="1-79"><div class="qm odd"></div></a>
			<a href="#" title="1-80"><div class="qm even"></div></a>
			<a href="#" title="1-81"><div class="qm odd"></div></a>
			<a href="#" title="1-82"><div class="qm even"></div></a>
			<a href="#" title="1-83"><div class="qm odd"></div></a>
			<a href="#" title="1-84"><div class="qm even"></div></a>
			<a href="#" title="1-85"><div class="qm odd"></div></a>
			<a href="#" title="1-86"><div class="qm even"></div></a>
			<a href="#" title="1-87"><div class="qm odd"></div></a>
			<a href="#" title="1-88"><div class="qm even"></div></a>
			<a href="#" title="1-89"><div class="qm odd"></div></a>
			<a href="#" title="1-90"><div class="qm even"></div></a>
			<a href="#" title="1-91"><div class="qm odd"></div></a>
			<a href="#" title="1-92"><div class="qm even"></div></a>
			<a href="#" title="1-93"><div class="qm odd"></div></a>
			<a href="#" title="1-94"><div class="qm even"></div></a>
			<a href="#" title="1-95"><div class="qm odd"></div></a>
			<a href="#" title="1-96"><div class="qm even"></div></a>
			<a href="#" title="1-97"><div class="qm odd"></div></a>
			<a href="#" title="1-98"><div class="qm even"></div></a>
			<a href="#" title="1-99"><div class="qm odd"></div></a>
			<a href="#" title="1-100"><div class="qm even"></div></a>
			<a href="#" title="1-101"><div class="qm odd"></div></a>
			<a href="#" title="1-102"><div class="qm even"></div></a>
			<a href="#" title="1-103"><div class="qm odd"></div></a>
			<a href="#" title="1-104"><div class="qm even"></div></a>
			<a href="#" title="1-105"><div class="qm odd"></div></a>
			<a href="#" title="1-106"><div class="qm even"></div></a>
			<a href="#" title="1-107"><div class="qm odd"></div></a>
			<a href="#" title="1-108"><div class="qm even"></div></a>
			<a href="#" title="1-109"><div class="qm odd"></div></a>
			<a href="#" title="1-110"><div class="qm even"></div></a>
			<a href="#" title="1-111"><div class="qm odd"></div></a>
			<a href="#" title="1-112"><div class="qm even"></div></a>
			<a href="#" title="1-113"><div class="qm odd"></div></a>
			<a href="#" title="1-114"><div class="qm even"></div></a>
			<a href="#" title="1-115"><div class="qm odd"></div></a>
			<a href="#" title="1-116"><div class="qm even"></div></a>
			<a href="#" title="1-117"><div class="qm odd"></div></a>
			<a href="#" title="1-118"><div class="qm even"></div></a>
			<a href="#" title="1-119"><div class="qm odd25euro"></div></a>
			<a href="#" title="1-120"><div class="qm even25euro"></div></a>
		</div>
		
		<!-- Zeile 2 -->
		<div class="zeile even">
			<a href="#" title="2-1"><div class="qm odd25euro"></div></a>
			<a href="#" title="2-2"><div class="qm even25euro"></div></a>
			<a href="#" title="2-3"><div class="qm odd"></div></a>
			<a href="#" title="2-4"><div class="qm even"></div></a>
			<a href="#" title="2-5"><div class="qm odd"></div></a>
			<a href="#" title="2-6"><div class="qm even"></div></a>
			<a href="#" title="2-7"><div class="qm odd"></div></a>
			<a href="#" title="2-8"><div class="qm even"></div></a>
			<a href="#" title="2-9"><div class="qm odd"></div></a>
			<a href="#" title="2-10"><div class="qm even"></div></a>
                        ...
                        ...
                        ...

Bin ich da nun völlig auf dem Holzweg oder gibt es eine Chance, das so oder so ähnlich umzusetzen? Wieviel Inhalt verträgt denn maximal das Inhaltselement "Eigener HTML-Code"?

**the_scrat** · 29.11.2014, 22:20

Hi,

also das Inhaltselement HTML ist im core als mediumtext deklariert, demnach kann dieses Element (theoretisch) 16,7 Mio Zeichen speichern. Nur glaube ich, dass das nicht wirklich Sinn macht, das wären über 16 MB die du da durch den Browser quälst.

Zumal, wenn ich mir vorstelle, dass du diese Aktion nicht einmal, sondern bei jeder Änderung machen musst, dauert das ja ewig.

Probier doch lieber folgendes.
Erstell im Unterordner /templates eine Datei z.B. kunstrasen.html5 in diese Datei schreibst du einfach deinen gesamten generierten HTML Code rein.
Dann bindest du diese Datei über den eigenen HTML Code ein mit

{{file::kunstrasen.html5}}

Ich denke das müsste auch performancetechnisch besser sein. Das wäre dann zumindest mal die Contaoseite. Deine 11.000 Zeilen Code müssen ja trotzdem an den Benutzer/Browser ausgeliefert werden.....

**uw19** · 30.11.2014, 00:27

Aaaah, die Insert-Tags...

Super Hinweis, das scheint zu helfen! Die Performance muss in diesem Fall angesichts der weitgehend motivierten Zielgruppe ausnahmsweise nicht im Vordergrund stehen. Wichtiger ist, dass der Bildschirm nicht gänzlich dunkel bleibt...

Bin aber für Optimierungstipps immer dankbar!!

Großer Dank an the_scrat! Werde morgen mal weiter basteln..

**uw19** · 30.11.2014, 10:14

Eine weitere Überlegung: Unter/neben dem Spielfeld soll eine Liste der Paten mit "ihren" Feldern und dem Betrag der Spende (also z. B.: Spalte 1: Mustermann, Klausi; Spalte 2: 26-50, 26-51; Spalte 3: 20 €) erscheinen. Soweit noch kein Problem. Toll wäre aber noch eine solche Funktion: Wenn man mit der Maus über einen Paten fährt, sollen die entsprechenden Felder im Spielfeld fablich markiert werden. Wenn möglich sollen auch in einer Art Tooltipp die Daten aus der o.g. Zeile, also Name, Felder und Bertrag, erscheinen. Dazu braucht es wohl Javascript?! Hat da jemand Hinweise für mich?

**the_scrat** · 30.11.2014, 10:20

Hi,

nur mal als überlegung. Du möchtest für jedes Feld eine Zeile anlegen, wie es oben in deinem Code ersichtlich ist.
Wäre es generell nicht sinnvoller es genauso zu machen wie auf http://www.milliondollarhomepage.com/ ?
Bedeutet, das Spielfeld/Rasen ist nur eine rießige Grafik und du legst dann darüber die Koordinaten. Der große Vorteil ist, dass du mit den Koordinaten ganze Bereiche zuweisen kannst, und das in nur einer Zeile abbilden kannst.
Für die Sache mit dem Partner wäre das sicherlich auch verwendbar, dass dann genau diese Koordinaten entsprechend gefärbt werden, sobald du über den Partner fährst.

**uw19** · 30.11.2014, 10:46

Leider ist es so: Ich bin in unserem kleinen Verein so etwas wie der Einäugige unter den Blinden, also was "das Internet" angeht. Bin deshalb gefragt worden, ob ich da nicht was machen könnte... Komme da aber ehrlich gesagt schnell an meine Grenzen.

Wahrscheinlich hast Du Recht mit dem Hinweis auf die milliondollarhomepage (joe hatte weiter oben auch schon darauf hingewiesen), aber ich hätte jetzt null Plan, wie das umzusetzen ist. Gefühlt (!?) bin ich jetzt einer Lösung schon näher, als wenn ich mich in dieses Script einarbeiten müsste... Fehlen mir da jetzt nicht nur noch so 4-5 Zeilen Javascript...?

**soweit_ok** · 04.09.2015, 09:15

Witzig, leider den Thread Monate zu spät entdeckt, und leider ohne die abschließende Entscheidung. Ich wär ja schon neugierig, wie es denn letztendlich realisiert wurde, falls das evtl. jemand weiß. So ist das leider wie ein Krimi ohne Entdeckung des Täters ... langweilig. :-(

Zumal mir über die ganzen kreativen Ideen hinaus noch eine weitere einfiel, die ich recht naheliegend finde. Es ging ja nicht nur um die graf. Representation der Rasenquadratmeter, sondern die Dinger sollten ja auch verkauft werden. Also eigentlich eCommerce, alle rechtl. Aspekte und das Checkout eingeschlossen.

Für mich schreit das regelrecht danach, es genau so zu machen, was es eigentlich ist. Ne eCommerce-Produktliste eben, mit allem Drum und Dran. Produkte können ja auch alle gleich sein und aussehen, oder gibts womöglich ein Gesetz, was das verbietet? :-) Die Items bestünden nur aus dem Bild, bei mouseover gerne auch mit Rasenvergrößerung und Beschriftung "Für 10 Euro kostenpflichtig bestellen" und bei Klick gehts ab in die Kaufabwicklung. Oder vorher erstmal in den Warenkorb - immerhin könnte man auch mehrere qm kaufen wollen. Die Detailseite wär verzichtbar gewesen.

Das Anlegen der "Produkte" natürlich nicht händisch, sondern mittels Import, sind schließlich alle identisch. Und 10.000 "Produkte" verkraftet Isotope ja wohl. Notfalls aufgeteilt in gefühlte Rasenkategorien und mehrere Shop Konfigurationen, damit die BE-Verwaltung ordentlich flutscht.

**bekanntmacher** · 08.09.2015, 21:51

Schau mal hier rein: http://reinraus.info. Wir haben es mit Canvas-Elementen gelöst… Wenn du abstimmst, siehst du wie die Auswahl des Wunschpixels funktioniert.

Gruss Simon