Stefan: Wie mache ich einen Regler?

Hallo!

Folgendes Problem:
Ich bin Javascriptanfänger und kriege etwas einfach nicht hin:
Ich möchte einen Regler haben, der wie ein Dreieick aufgebaut ist. Rechts und links davon ein Minus-und ein Plusknopf.
Wie schaffe ich es, das wenn ich auf den Plusknopf drücke das "Dreieck" einwenig gefüllt wird und das ich aber auch einen auslesbaren WErt erhalte?

MfG
Stefan

  1. Hallo Stefan,

    Wie schaffe ich es, das wenn ich auf den Plusknopf drücke das "Dreieck" einwenig gefüllt wird

    Wieviele "Stufen" soll dein Regler denn haben?
    Wenn es nur wenige sind kannst du für jede Stufe ein Bild malen und diese je nach [+] bzw. [-] über bild.src austauschen. Idealerweise über ein Array.

    Für eine feinere Regelung wirst du auf das Dreieck verzichten müssen. Nimm statt dessen einen Balken den du über style.width vergrößerst/verkleinerst.

    und das ich aber auch einen auslesbaren WErt erhalte?

    Wen oder was möchtest du auslesen? Je nach Klick auf [+] oder [-] eine Variable die deinen Wert repräsentiert rauf / runterzählen.

    HTH

    Jochen

    --
    Heute schon gescribbelt?
    Scribbleboard
    1. Wieviele "Stufen" soll dein Regler denn haben?

      Ich dachte da so an 10... Also wird wohl eine ausgetauschte gif-grafik gehen.

      Wen oder was möchtest du auslesen?

      Einfach einen Container, der den aktuellen Wert enthält...

  2. Hallo Stefan,

    Ich möchte einen Regler haben, ...

    nein, das möchtest du nicht. Ein Regler ist nämlich etwas ganz anderes, als du beschreibst.

    Unter einem Regler versteht man in der Technik ein Gebilde (z.B. ein Apparat oder ein Programm), das bestimmte Parameter misst und daraus ein Stellsignal erzeugt, mit dem mindestens einer der gemessenen Werte beeinflusst werden kann.

    Beispiel: Ein Temperaturregler am Lötkolben.
    Er misst die Temperatur der Lötspitze, und stellt davon abhängig den Strom größer oder kleiner, so dass eine gewünschte Temperatur erreicht wird.

    Was du willst, ist kein Regler, sondern ein Bedienelement, im Englischen auch "control" genannt.

    Schönen Tag noch,

    Martin

    1. Hi Martin,

      Was du willst, ist kein Regler, sondern ein Bedienelement, im Englischen auch "control" genannt.

      wobei interessant ist, dass es die deutsche Unterscheidung zwischen "Regeln" und "Steuern" im Englischen so nicht gibt, beides ist "control". Was natürlich nicht bedeutet, dass die Angelsachsen nicht zwischen Steuerung und Regelung unterscheiden könnten.

      Schönen Sonntag noch!
      O'Brien

      PS: Gut, dass der Übersetzer der Computertastatur "Control" mit "Steuerung" übersetzt hat, sonst müssten wir jetzt andauernd "Regelung-Alt-Entfernen" drücken ;)

      --
      Frank und Buster: "Heya, wir sind hier um zu helfen!"
      1. Schön das wir das jetzt alle wissen, dass ich mich vertan hab! Also kennt jetzt jemand ne Lösung für das Problem?

        1. Hi Stefan,

          Also kennt jetzt jemand ne Lösung für das Problem?

          welches Problem? Wo genau liegen deine Schwierigkeiten? Hast du eine bestimmte Anzahl von Dreiecksgrafiken?

          Gut, dann fehlt noch etwas javascript. Wie du die Grafiken austauschen kannst weist du? Wenn nicht:
          http://de.selfhtml.org/javascript/objekte/images.htm#src

          Das Beispiel beinhaltet fast alles wesentliche. Den setTimeout("Animation() benötigst du nicht, und zusätzlich zu dem i = i + 1; für [+] benötigst du noch ein i = i - 1; für den [-] Button.
          Soweit noch Fragen?

          Grüße,

          Jochen

          --
          Heute schon gescribbelt?
          Scribbleboard
          1. Soweit noch Fragen?

            Ja und zwar habe ich das jetzt gemacht, aber ich habe da ein kleines Problem:
            Wenn ich auf plus bzw. minus gehe funktioniert das zwar und das bild wird ausgetauscht, aber leider das vollkommen falsche. Plus tauscht sogar was anderes aus als minus!
            Hier mal der Code komplett:
            <html>
              <head>
                <title>
                  test
                </title>
            <script type="text/javascript">
            var b = new Array();
            b[0] = new Image(); b[0].src = "sch0.gif";
            b[1] = new Image(); b[1].src = "sch1.gif";
            b[2] = new Image(); b[2].src = "sch2.gif";
            b[3] = new Image(); b[3].src = "sch3.gif";
            b[4] = new Image(); b[4].src = "sch4.gif";
            b[5] = new Image(); b[5].src = "sch5.gif";
            var i = 0;
            function plus () {
            if (i > 5)
            i = 0;
            document.images[0].src = b[i].src;
            i = i + 1;
            }
            function minus () {
            if (i < 0)
            i = 5;
            document.images[5].src = b[i].src;
            i = i - 1;
            }
            </script>
              </head>
              <body background="main.gif">
                <center>
                  <font size="7" color="#404040">
                    Küche
                  </font>
                  <br>
                  <font size="6" color="#404040">
                    Temperatur:
                  </font>
                  <br>
                  <table border=0 align=center>
                    <tr>
                      <td>
                        <img src="minus2.gif" border=0 align=middle vspace=1>
                      </td>
                      <td>
                        &nbsp; &nbsp; &nbsp
                      </td>
                      <td>
                        <font size="6" color="#404040">
                          23&deg;C
                        </font>
                      </td>
                      <td>
                        &nbsp; &nbsp; &nbsp
                      </td>
                      <td>
                        <img src="plus.gif" border=0 align=middle vspace=1>
                      </td>
                  </table>
                  <br>
                  <div>
                    <font size="6" color="#404040">
                      Licht:
                    </font>
                    <br>
                    <table border=0 align=center>
                      <tr>
                        <td>
                          <a href="javascript:minus()">
                            <img src="minus2.gif" border=0 align=middle vspace=1></a>
                        </td>
                        <td>
                          &nbsp; &nbsp; &nbsp
                        </td>
                        <td>
                          <img src="sch0.gif" border=0 align=middle>
                        </td>
                        <td>
                          <a href="javascript:plus()">
                            <img src="plus.gif" border=0 align=middle vspace=1></a>
                        </td>
                    </table>
                  </div>
                  <br>
                  <div>
                    <font size="6" color="#404040">
                      Jalosien:
                    </font>
                    <table border=0 align=center>
                      <tr>
                        <td>
                          <img src="runter.gif" border=0 align=middle vspace=1>
                        </td>
                        <td>
                          &nbsp; &nbsp; &nbsp
                        </td>
                        <td>
                          <font size="6" color="#404040">
                            unten
                          </font>
                        </td>
                        <td>
                          &nbsp; &nbsp; &nbsp
                        </td>
                        <td>
                          <img src="rauf.gif" border=0 align=middle vspace=1>
                        </td>
                    </table>
                  </div>
                </center>
              </body>
            </html>

            1. Hallo Stefan,

              Plus tauscht sogar was anderes aus als minus!

              Das wundert mich nicht.

              function plus () {
              document.images[0].src = b[i].src;

              function minus () {
              document.images[5].src = b[i].src;

              http://de.selfhtml.org/javascript/objekte/images.htm#allgemeines

              Bei Verwendung von Indexnummern (das ist das was du machst) geben Sie "document.images" an und dahinter in eckigen Klammern, die wie vielte Grafik in der Datei Sie meinen.

              Fehler erkannt?

              Grüße,

              Jochen

              --
              Heute schon gescribbelt?
              Scribbleboard
              1. Ja den Fehler hab ich jetzt dann erkannt, aber leider ist es so, dass es erst einen Schritt in die Falsche Richtung geht und dann immer wieder in die richtige beim klicken.
                Also (nach relaod):
                Wenn ich auf Plus drücke baut sich die Grafik in die richtige Richtung auf.
                Wenn ich dann jetzt minus drücke geht es erst einen Schritt Richtung plus und dann wird es weniger.
                das gleiche Spiel, wenn ich dann wieder plus drücke usw...

                Dannke für Deine Hilfe, Jochen!

                1. Ja den Fehler hab ich jetzt dann erkannt, aber leider ist es so, dass es erst einen Schritt in die Falsche Richtung geht und dann immer wieder in die richtige beim klicken.
                  Also (nach relaod):
                  Wenn ich auf Plus drücke baut sich die Grafik in die richtige Richtung auf.
                  Wenn ich dann jetzt minus drücke geht es erst einen Schritt Richtung plus und dann wird es weniger.

                  Nehmen wir an i=1 und du drückst auf [+]

                    
                      function plus () {  
                        document.images[0].src = b[i].src;  
                        i = i + 1; 
                  

                  Bild Nummer 1 wird angezeigt. Prima! Welchen wert hat i?

                  Jetzt drückst du auf [-]

                    
                      function minus () {  
                        document.images[0].src = b[i].src;   // <-- welchen Wert hat i?  
                        i = i - 1; 
                  

                  Also:
                  1. Schritt: i++ oder i--
                  2. Auf Überlauf oder Unterlauf prüfen
                  3. je nach Prüfung in 2. obere oder untere Grenze setzen.
                  4. Anzeigen bild[i]

                  Dannke für Deine Hilfe, Jochen!

                  Nix zu danken. Wird ja langsam ;-)

                  Grüße,

                  Jochen

                  --
                  Heute schon gescribbelt?
                  Scribbleboard
                  1. Nehmen wir an i=1 und du drückst auf [+]

                    function plus () {
                          document.images[0].src = b[i].src;
                          i = i + 1;

                    
                    >   
                    > Bild Nummer 1 wird angezeigt. Prima! Welchen wert hat i?  
                    >   
                    > Jetzt drückst du auf [-]  
                    >   
                    > ~~~javascript
                      
                    
                    >     function minus () {  
                    >       document.images[0].src = b[i].src;   // <-- welchen Wert hat i?  
                    >       i = i - 1; 
                    
                    

                    Also:

                    1. Schritt: i++ oder i--
                    2. Auf Überlauf oder Unterlauf prüfen
                    3. je nach Prüfung in 2. obere oder untere Grenze setzen.
                    4. Anzeigen bild[i]

                    So jetzt läuft es schon ganz gut, aber das was du da schreibst versteh ich nocht nicht so ganz, ich habe jetzt mit if-Bedingungen es einigermaßen hinbekommen, aber das mit der falschen Richtung beim ersten Schritt ist immmer noch so...
                    Wäre nett, wenn du mir nochmal unter die Arme greifen könnstest..

                    1. Hallo Stefan,

                      du musst erst den Zähler ändern, also i=i+1; (i++; macht das selbe), dann prüfen, ob der Zähler einen gültigen Wert hat, also if(i>5)i=0;, und erst dann das entsprechende Bild zeigen. In deiner jetzigen Version zeigst du immer das Bild, das aus dem vorherigen Knopfdruck resultiert.

                        
                      ...  
                      var max = b.length-1;  
                      var min = 0;  
                      var i = 0;  
                      function plus () {  
                       i = i + 1;  
                       if (i > max) i = min;  
                       document.images[0].src = b[i].src;  
                      }  
                      function minus () {  
                       i = i - 1;  
                       if (i < min) i = max;  
                       document.images[0].src = b[i].src;  
                      }  
                      
                      

                      Gruß, Jürgen

    2. Hallo Martin,

      Was du willst, ist kein Regler, sondern ein Bedienelement, im Englischen auch "control" genannt.

      jein, das Ding da in meiner Statusleiste ist doch viel mehr ein Lautstärkeregler als ein Lautstärkebedienelement / Lautstärkecontrol. Stimmst du mir da zu?

      ;-)

      Grüße,

      Jochen

      --
      Heute schon gescribbelt?
      Scribbleboard
      1. Hi Jochen,

        Was du willst, ist kein Regler, sondern ein Bedienelement, im Englischen auch "control" genannt.

        jein, das Ding da in meiner Statusleiste ist doch viel mehr ein Lautstärkeregler als ein Lautstärkebedienelement / Lautstärkecontrol. Stimmst du mir da zu?

        Jein.
        Technisch korrekt ist das -genau wie auch der entsprechende Knopf an der Hifi-Anlage- ein Lautstärkesteller, kein Regler. Der Begriff "Lautstärkeregler" hat sich allerdings im Volksmund durchgesetzt.

        Im Englischen heißt das Ding so oder so "volume control", aber wie O'Brien schon ganz treffend bemerkt hat, unterscheiden die da vom Begriff her nicht so konsequent zwischen "regeln und "steuer" bzw. "stellen".

        So long,

        Martin

        1. Hi Martin,

          Jein.
          Technisch korrekt ist das -genau wie auch der entsprechende Knopf an der Hifi-Anlage- ein Lautstärkesteller, kein Regler. Der Begriff "Lautstärkeregler" hat sich allerdings im Volksmund durchgesetzt.

          Nein, charakteristisch für eine Regelung ist (im Gegensatz zu einer Steuerung) der Soll/Istvergleich (Regelkreislauf) und genau diesen hast du wenn du am Knopf deiner HiFi-Anlage drehst. Du wünscht eine bestimmte Lautstärke. Nun regelst du die diese ... vergleichst (Ist) mit deinem Ohr, so lange bis sie deiner Vorgabe (Soll) entspricht.

          Genau so wie ein Auto (mit dem Lenkrad) auch geregelt und nicht gesteuert wird. Reine Steuerungen gibt es nur wenige. Der Programmschalter deiner Waschmaschine z.B. ist eine Steuerung.

          Grüße,

          Jochen

          --
          Heute schon gescribbelt?
          Scribbleboard
          1. Hallo,

            Nein, charakteristisch für eine Regelung ist (im Gegensatz zu einer Steuerung) der Soll/Istvergleich (Regelkreislauf)

            Vollkommen richtig.

            und genau diesen hast du wenn du am Knopf deiner HiFi-Anlage drehst.

            hrrrrgh jaaa...
            Aber Regelungen, in denen der Mensch als Bindeglied den Regelkrieslauf schließt, werden üblicherweise nicht als solche angesehen.

            Du wünscht eine bestimmte Lautstärke. Nun regelst du die diese ... vergleichst (Ist) mit deinem Ohr, so lange bis sie deiner Vorgabe (Soll) entspricht.

            Okay, wenn wir schon beim Erbsenzählen sind ;-)  Dann ist aber der Mensch der eigentliche Regler, und der Einstellknopf bzw. das Poti daran ist tatsächlich nur noch ein Teil des Stellglieds.

            Genau so wie ein Auto (mit dem Lenkrad) auch geregelt und nicht gesteuert wird. Reine Steuerungen gibt es nur wenige.

            Wie gesagt: Unter der Maßgabe, den Menschen als Teil des Regelkreises zu sehen, stimmt die Aussage wohl. Nur ist diese Sichtweise eben sehr ungewöhnlich.

            Der Programmschalter deiner Waschmaschine z.B. ist eine Steuerung.

            Wirklich?
            Strenggenommen ist er ein Automat. Denn der "Programmablauf" wird mit durch äußere Bedingungen (Füllstand der Trommel, Wassertemperatur, evtl. Unwucht-Sensor) beeinflusst. Also auch hier keine reine Steuerung.  :-P

            Schönen Tag noch,

            Martin

  3. Hallo Stefan,

    für das +/- nimmst du einen Button, oder irgend ein HTML-Element (<p>, <span>,...) und gibst ihm den Eventhandler "onclick". In der Funktion, die beim onclick aufgerufen wird, änderst du den Wert und passt die Anzeige an. Diese Anzeige kannst du realisieren, indem du verschiedene Bilder lädst, also document.bild_name.src="bild_x.gif", wobei das Bild den Namen "bild_name" haben sollte. Alternativ kannst du auch ein <div>  mit einem kompletten Dreieck als Hintergrund nehmen. Das Hintergrundbild sollte unten ausgerichtet sein. Über die style-Eigenschaft des Bildes kannst du dann die Höhe des divs einstellen, so dass man nur einen Teil des Dreiecks sieht.
      Soweit mein Vorschlag. Jetzt bist du dran.

    http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick
    http://de.selfhtml.org/javascript/objekte/style.htm
    http://de.selfhtml.org/javascript/objekte/images.htm
    und natürlich
    http://de.selfhtml.org/javascript/index.htm

    Gruß, Jürgen

    1. ... Über die style-Eigenschaft des Bildes kannst du dann die Höhe des divs einstellen, ...

      sorry, meinte: Über die style-Eigenschaft des divs ...
      Wenn das div kleiner ist als sein Hintergrundbild, sieht man nur einen Teil davon.

      Gruß, Jürgen

    2. hi,

      Alternativ kannst du auch ein <div>  mit einem kompletten Dreieck als Hintergrund nehmen. Das Hintergrundbild sollte unten ausgerichtet sein.

      Das kommt darauf an, in welche Richtung das Dreieck zeigen soll ;-)

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }