• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"Haus" mit JavaScript erstellen

T

TimeMen

Neues Mitglied
Hallo ihr Lieben,
Ich suche eine Möglichkeit eine solche Grafik automatisch mit JavaScript (gibt es andere Möglichkeiten)? zu erstellen:
https://s26.postimg.org/yzl2who0p/Screenshot_2017-09-07_09-43-57.png

Leider konnte ich das Bild nicht in den Anhang packen, da das Adobe Flash Plugin jedes Mal abgestürzt ist...

Wie im Bild vermutlich zu sehen ist, wurde die "Grafik" mit einzelnen Tabellen generiert. Da das aber ein ziemlicher Aufwand ist das "Haus" zu warten und ggf. neue Namen hinzuzufügen, suche ich nach einer Lösung mit JavaScript oder ggf. auch anderen Sprachen. Falls es was zur Sache tut: Das Design der Website nehme ich mit Bootstrap vor.
Wichtig ist, dass die Grafik auch gut auf dem Handy darzustellen ist und wie auf dem Bild zu sehen immer abwechselnd 6 und 7 Spalten hat und in der 7spaltigen Zeile ein halb so schmales Bild jeweils rechts und links ist.

Es wäre geschickt, wenn man nur die Namen und eine entsprechende ID, die dann für die Farbe sorgt in eine Datei einträgt und eine bestimmte Zeichenfolge als Hinweis für das Bild als Platzhalter.
Diese Datei wäre einfacher zu warten als die Tabelle.
Die Datei müsste dann nur noch vom Script verarbeitet werden und eine Grafik wie im Anhang anzeigen.
So viel zu meiner Theorie ^^

Gibt es für sowas eine spezielle Sprache die man hier einfacher als JS anwenden könnte?
Bin was das betrifft eher ein Laie, aber ich lerne gerne dazu, wenn mich hier jemand dabei begleiten kann oder mir auf die Sprünge hilft.

Vielen Dank schonmal fürs Lesen und für eventuelle Hilfe und Kommentare
Liebe Grüße
TimeMen
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Ich glaube nicht, dass es dafür ein passendes Scipt, da wird man wohl selber drüber nachdenken und progtammieren müssen.
 
Oder meinst du, man könnte da mit P5.JS was bewegen?
Das wäre meine letzte Hoffnung, da ich von JS noch ein bisschen mehr verstehe wie von PHP :|
 
Ich denke, das man das auch mit JavaScript hinbekommt, aber da ich JavaScript meide wo es nur geht, würde ich eher PHP nehmen.
 
Werbung:
mMn. ganz klar Javascript.

Per Canvas oder SVG lassen sich Grafiken erstellen. Ob nun mit Library oder ohne.
Ist jedoch schon eher Expertenniveau was du da vor hast.
 
Also wenigstens kann ich mit PHP die XML Datei ganz ordentlich auslesen bis jetzt.

Aber jetzt bin ich verwirrt. PHP oder JS?
Was wäre "einfacher" zu bewältigen?

Das ist mir (leider) durchaus bewusst, dass das ein Batzen Arbeit wird.
Ich könnte mir vorstellen, dass sowas mit P5.JS recht gut zu bewältigen ist... Allerdings ist das bei mir immer sehr störanfällig und meistens finde ich keinen Fehler,
Dennoch könnte die Nähe zu Processing und dessen Vorzügen bzgl. Zeichnungen etc. ein Vorteil sein.

Ich bin kein Experte, darum muss ich einfach auf eure Meinung hören.
Bin für beides offen, habe mit PHP bereits angefangen, allerdings kenne ich mich etwas mehr mit JS aus. Allerdings auch nicht sehr gut.

Die Namen und ID's würde ich gerne in einer XML Datei speichern, falls euch das was bei der Wahl/Entscheidung hilft.
 
TimeMen schrieb:
Also wenigstens kann ich mit PHP die XML Datei ganz ordentlich auslesen bis jetzt.

Aber jetzt bin ich verwirrt. PHP oder JS?
Was wäre "einfacher" zu bewältigen?

Das ist mir (leider) durchaus bewusst, dass das ein Batzen Arbeit wird.
Ich könnte mir vorstellen, dass sowas mit P5.JS recht gut zu bewältigen ist... Allerdings ist das bei mir immer sehr störanfällig und meistens finde ich keinen Fehler,
Dennoch könnte die Nähe zu Processing und dessen Vorzügen bzgl. Zeichnungen etc. ein Vorteil sein.

Ich bin kein Experte, darum muss ich einfach auf eure Meinung hören.
Bin für beides offen, habe mit PHP bereits angefangen, allerdings kenne ich mich etwas mehr mit JS aus. Allerdings auch nicht sehr gut.

Die Namen und ID's würde ich gerne in einer XML Datei speichern, falls euch das was bei der Wahl/Entscheidung hilft.
Zum Vergrößern anklicken....

Naja, bleibt natürlich dir überlassen.
Wenn du aber so etwas wie Echtzeit-Bearbeitung haben willst (was ich doch stark vermute), ist JS die richtige Wahl. Bei PHP musst du ständig mit dem Server kommunizieren und das Bild hin und her schicken. Das ist vom Nutzererlebnis nicht zu vergleichen.
 
Werbung:
Echtzeitbearbeitung ist kein Faktor.
Die Grafik soll nur einfach wartbar sein (Bzgl. neuen Namen oder falschen Farben o.ä.).
Daher lieber eine schwere aber im Endeffekt bessere Lösung als eine mit Tabellen oder eine mit Python erstellte Grafik, die man bei der kleinsten Änderung wieder neu einbinden muss oder so.
Denn nach meinen Vorstellungen sollte einfach nur was in der XML oder JSON Datei geändert werden um den gewünschten Erfolg zu erlangen.

Ich werde es mal mit JavaScript probieren.
Ich fange es klein an, mit kleinen Komponenten der komplexeren Funktion, und dann bastele ich das irgendwie zusammen.

Bei Fragen melde ich mich, falls ihr hier nicht noch irgendwie hilfreiche Links für mich habt :)
Schönen Abend
TimeMen
 
Werbung:
Es muss keine Grafik sein @Sentence.
Das war nur die Variante die ich nicht wollte, da man die immer austauschen müsste, falls sich was ändert.
Hab ich wohl ein bisschen falsch ausgedrückt.

@scbawik Python liegt mir mehr als PHP und habe ich für das Projekt hier auch schon benutzt, um mir die JSON Datei zu generieren, da ich einfach nur die Sachen eingeben will, und nicht ständig auf Syntax oder Sonderzeichen achten will. Das funktioniert auch gut und war schnell gebastelt.

Ich bin mit P5.JS nun soweit, dass ich einen String im JSON Format auseinandernehme und in Listen sortiere.
In einer Schleife generiere ich dann Divs mit dem dementsprechenden Namen und der vergebenen Farbe.
Das klappt bis jetzt einwandfrei.
Schade ist nur, dass ich es noch nicht geschafft habe eine externe JSON Datei in meinen String zu laden.
Das würde die Wartung des ganzen noch einfacher machen.
Aber ich denke das ist nur ein kleiner Schönheitsfehler, da es im Prinzip ja schon klappt.

Vielen Dank im übrigen für den Hinweis mit dem Grid-Layout von Bootstrap @Sentence
Vielleicht sollte ich das direkt berücksichtigen, damit ich dann damit das Haus direkt versuchen kann zu erstellen.
Ich habe erst an konkrete Prozentangaben oder em-Werte gedacht, aber dein Vorschlag hört sich auf den ersten Blick vernünftig an.

Mal sehen wie ich das jetzt weitermache, aber ich bin froh, dass ich an dem Punkt, an dem ich jetzt bin, ohne allzu große Probleme gelandet bin.

Liebe Grüße
TimeMen
 
TimeMen schrieb:
In einer Schleife generiere ich dann Divs mit dem dementsprechenden Namen und der vergebenen Farbe.
Das klappt bis jetzt einwandfrei.
Schade ist nur, dass ich es noch nicht geschafft habe eine externe JSON Datei in meinen String zu laden.
Das würde die Wartung des ganzen noch einfacher machen.
Zum Vergrößern anklicken....

Ist doch eigentlich nicht so schwer. Das Haus ist ein Array von Etagen und jede Etage ein Array von Bewohnern. Damit hast du dein JSON. Außerdem benötigst du ein Framework, das JavaScript als HTML in einer Schleife rendern kann.

Code: 
{
    "house": [
        {"floor": [{"name": "Müller"},{"name": "Meier"},{"name": "Schulze"}]},
        {"floor": [{"name": "Schröder"},{"name": "Schulze"},{"name": "Kaufmann"}]}
    ]
}

HTML: 
<!DOCTYPE html>
<html ng-app="houseApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
</head>
<body>
    <div class="container" ng-controller="AppController">
        <div class="row" ng-repeat="item in house">
            <div class="col" ng-repeat="user in item.floor">{{user.name}}</div>
        </div>
    </div>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script>
        angular.module('houseApp', [])
        .controller('AppController', function($scope, $http) {
            $http.get('house.json')
            .then(function(response) {
                $scope.house = response.data.house;
            });
        });
    </script>
</body>
</html>

Beide Dateien im selben Verzeichnis speichern.
 
Da scheine ich was ganz simples übersehen zu haben...
Gut, dass du mich an das Haus erinnerst.
So habe ich das ganze noch nicht betrachtet.
Ich habe jetzt ganz stur die JSON Datei mit Python generiert und arbeite sie nun ab.
Allerdings ist das natürlich ziemlich blöd, vom jetzigen Standpunkt aus gesehen.

Das das Haus Etagen hat, hätte alles viel einfacher gemacht.
Bin momentan nämlich an einer Top-Spender Information für die "Kunden" und hatte schon Angst vor dem Strukturieren des Hauses.
Ich versuche es mal mit deiner Methode, mit Angular habe ich bisher nichts am Hut gehabt, kenne es nur vom Namen ^^

Beim Überfliegen fehlt noch das Verteilen von Farben an die einzelnen Namen. Mal sehen, ob ich das von meiner "Lösung" so übernehmen oder umschreiben kann.
Ich vermute es mal nicht, aber ich probiere es mal.
Denn so wie du es da schreibst, scheint das die geschicktere Lösung zu sein.

Eine Frage hätte ich doch noch als Laie:
Wo bindest du in deinem HTML Code die Datei von oben ein?
Habe ich das nur übersehen, oder muss man das bei Angular nicht machen?
 
Werbung:
Die Library ist per CDN eingebunden und die Daten werden per Ajax-Request geholt.

Das JSON-Objekt kannst du natürlich noch mit Styles, etc. erweitern. Ich wollte es nur übersichtlich halten. AngularJS ist übrigens keine Pflicht. Ich verwende es gerne zu Demonstrationszwecken, arbeite damit aber nicht mehr produktiv.

Wenn du XML bevorzugst, ist das auch kein Problem. Du musst dann lediglich eine Lib wie xml2js einsetzen, welche die Response in JSON transformiert. Nur mit Python kann ich leider nicht dienen. Ich hasse die Syntax von Ruby, Python & Co.
 
Hallo @Tronjer
Die Library habe ich gesehen, aber ich habe erst beim kopieren die Anweisung $http.get('house.json'); gesehen.
Das sieht auf alle Fälle einfacher aus als bei mir.
Wie gesagt, ich schaue mal wie sich das kombinieren lässt, und schaue mir mal dein Beispiel an, ob das funktioniert bei mir.

XML habe ich jetzt mal gelassen, da mir das Format von JSON doch irgendwie besser gefällt und ich bis jetzt weniger Probleme beim Auslesen hatte.

Python nehme ich ja auch weniger für das Projekt als dass ich es als Tool zur Vereinfachung einsetze.
Mir ist es dann doch die Mühe wert mir ein Skript zu schreiben, was mir automatisch nach Eingabe meine JSON Datei generiert, als dass ich mich ewig mit Gänsefüßchen und eckigen Klammern rumquäle.
Allerdings ist die Syntax gegenüber anderen Sprachen wie JS oder auch C o.ä. schon sehr anders, da kann ich dich verstehen.

// EDIT:
Dein Beispiel funktioniert, doch ich verstehe nicht so ganz wie das funktioniert, da ich mich wie gesagt mit Angular noch nie beschäftigt habe.
Ich hätte jetzt zum Beispiel Probleme etwas einzufügen das je nach ID die Farbe vergibt.
Das ist dann doch sehr anders als normales JS, oder?
Hänge also momentan an einem Verständnisproblem fest.
 
Zuletzt bearbeitet:
TimeMen schrieb:
Dein Beispiel funktioniert, doch ich verstehe nicht so ganz wie das funktioniert
Zum Vergrößern anklicken....

Der GET-Request auf das JSON-File simuliert eine Datenbankabfrage und speichert das Ergebnis in der Variablen house. Über house wird mittels eines zweidimensionalen ForEach im Template iteriert. Jeder Bewohner stellt ein Objekt dar, das beliebige Eigenschaften besitzen kann. In meinem Beispiel war das nur der Name, aber du kannst das um weitere Properties ergänzen und diese mit {{property}} im HTML rendern.

Darüber hinaus hängt es davon ab, ob du dieses Projekt möglichst einfach umsetzen oder es "richtig" machen und den Lernaufwand in Kauf nehmen willst. Im letzteren Fall speichere das Haus nicht in einer statischen Datei, sondern in einer Datenbank. Zusätzlich legst du ein HTML-Formular mit Inputs für Etagen und Bewohner an. An Ajax-Requests benötigst du dem GET zum Holen der Daten dann noch POST (anlegen) PUT/PATCH (updaten) und DELETE (löschen).
 
Werbung:
Das ganze mit einer Datenbank zu lösen wäre wahrscheinlich die gängiste und effektivste Variante, oder?
Ich habe es allerdings schon so oft versucht auch nur irgendetwas mit einer DB zu machen und es ist immer gescheitert.
Mit Datenbanken stehe ich irgendwie auf dem Kriegsfuß.
Da hat auch das ausprobieren von phpMyAdmin nichts geholfen.

Aber vielleicht hast du ja recht, und ich sollte es auf ein Neues probieren?

Trotzdem noch eine Frage zu deinem oberen Textabschnitt
Tronjer schrieb:
und diese mit {{property}} im HTML rendern.
Zum Vergrößern anklicken....

HTML: 
<div class="col" ng-repeat="user in item.floor" style="background-color: {{user.color}};">{{user.name}}</div>
Würde das so mit der Farbe theoretisch funktionieren?
Praktisch tut es das nämlich nicht.

LG
TimeMen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben