javascriptnewbie: Bild online zusammenstellen (wie z.B. Raumplaner)

Hallo

ich arbeite gerade an einem Online Aquariummanager mit dem ich Pumpen, PH,- Temp-Sonden, Becken etc. konfiguriere und überwachen möchte.

Dabei kam ich auf die Idee das es zur Visualisierung toll wäre wenn ich die Becken mit den einzelnen Geräten zusätzlich auf einem Bild darstellen könnte.

Jetzt möchte ich das ich dies anhand von einer Bilderbibliothek zusammenstellen und als Gesamtbild speichern kann.
So ungefähr wie man es bei einem Raumplaner kennt nur nicht so umfangreich... eher ganz simpel.

Gibt es dazu fertige tools für den Webserver oder andere Ansätze an denen man sich orientieren kann?

Gruß und Danke für jeden Tip

Jürgen

  1. Mahlzeit,

    Gibt es dazu fertige tools für den Webserver oder andere Ansätze an denen man sich orientieren kann?

    Es gibt mehrere Ansätze.

    1. du zeigst einzelne Bilder an und positionierst sie so, dass es aussieht, wie ien Bild.
    2. Du erzeugst z.B. per PHP-GD ein grosses Bild und kopierst die einzelnen Komponenten an die richtige Stelle.

    Für 1. bringt HTML und CSS alles mit was du brauchst, im zweiten Fall brauchst du nen Websapce mit PHP und dem zugehörigen GD-Modul.

    Gibt sicher noch weitere Möglichkeiten, ich finde 1. am flexibelsten.

    --
    42
    1. Gibt sicher noch weitere Möglichkeiten, ich finde 1. am flexibelsten.

      Hallo,

      mit HTML & CSS einen Drag & Drop Lösung ?

      Ich möchte ja auf der Webseite (Webspace, PHP etc. alles vorhanden) z.B. auf der rechten Seite eine Auswahlliste an Bildern.
      Von dort aus ziehe ich dann z.B. das Bild raum-rechteck.jpg aud die linke Seite.
      Dann ziehe ich weitere Bilder dieser Auswahlliste, wie z.B. ein Becken, eine Pumpe einen Sensor etc. etc. auf dieses Bild und positioniere es dort mit der Maus.
      Dann gehe ich auf speichern und dieses Bild aus vielen Einzelbildern wird dann als gesamtes gespeichert.

      Gibts dazu evtl. eine Beispiel-doku in der das etwas veranschaulicht dargestellt wird damit ich mich besser einarbeiten kann?

      Gruß Jürgen

      1. Mahlzeit,

        Gibt sicher noch weitere Möglichkeiten, ich finde 1. am flexibelsten.

        Hallo,

        mit HTML & CSS einen Drag & Drop Lösung ?

        Wenn du D&D willst, musst du Javascript dazunehmen.

        Ich möchte ja auf der Webseite (Webspace, PHP etc. alles vorhanden) z.B. auf der rechten Seite eine Auswahlliste an Bildern.
        Von dort aus ziehe ich dann z.B. das Bild raum-rechteck.jpg aud die linke Seite.
        Dann ziehe ich weitere Bilder dieser Auswahlliste, wie z.B. ein Becken, eine Pumpe einen Sensor etc. etc. auf dieses Bild und positioniere es dort mit der Maus.
        Dann gehe ich auf speichern und dieses Bild aus vielen Einzelbildern wird dann als gesamtes gespeichert.

        Das dürfte ein Paradebeispiel für jQuery sein. Ist aber nicht die einzige Möglichkeit.

        Gibts dazu evtl. eine Beispiel-doku in der das etwas veranschaulicht dargestellt wird damit ich mich besser einarbeiten kann?

        Konkret kenn ich keine, aber es gibt Verschiebe-Puzzles auf jQuery-Basis, die helfen dir evtl.

        --
        42
  2. hi,

    Gibt es dazu fertige tools für den Webserver oder andere Ansätze an denen man sich orientieren kann?

    Tags: <canvas>, drag, drop, MDN

    Gruß und Danke für jeden Tip

    Studieren heißt: Sich bemühen :)

    Horst Mühsam

    1. hi,

      Gibt es dazu fertige tools für den Webserver oder andere Ansätze an denen man sich orientieren kann?

      Tags: <canvas>, drag, drop, MDN

      Gruß und Danke für jeden Tip

      Studieren heißt: Sich bemühen :)

      Horst Mühsam

      Danke!!
      der Lösungsansatz mit <canvas> scheint mir genau das zu sein was ich suche.

      Gruß Jürgen