4

Fortschrittsbalken

Jepp. Braucht man nicht unbedingt, aber ich find's schick. 

 

"Eingabe eines momentanen Werts und eines maximalen Werts (natürlich auch über Berechnungen). Achtung! Nur Ganzzahlen sind erlaubt.";
let currValue := 8;
let maxValue := 12;
"------------------";
let procResult := round(currValue * 100 / maxValue);
let content := "
<style>
aside {
    width:100%;
    text-align:center;
    background-image: linear-gradient(235deg, rgb(190,190,200), rgb(255,255,255));
    border-radius: 2em 2em 2em 2em;
    box-shadow:-2px 2px 0.3px 1px rgb(150,150,150) ;
    }
text {
    font-size: small;
    color: rgb(50,50,50);
    font-family: Didot
}
meter {
    width:80%;

}
</style>
<aside >
    <meter value=" + currValue + " min='0' max=" + maxValue + "></meter>
    <p><text>Füllstand: " + procResult + "%</text></p>
</aside>
            ";
html(content)

15 Antworten

null
    • Rafael_Sanchis
    • vor 2 Jahren
    • Gemeldet - anzeigen

    No look so good on Web Version.

    • Maurice
    • vor 2 Jahren
    • Gemeldet - anzeigen

    Kann man die Höhe des gesamten Sliders, also denn Graubereich, festlegen?

    • mirko3
    • vor 2 Jahren
    • Gemeldet - anzeigen

    Hallo Maurice. Der buttonartige Graubereich entspricht hier dem Container <aside>. Er ist etwas zweckentfremdet benutzt, da mit <div> zu arbeiten chaotische Ninoxdarstellungen nach sich ziehen kann. Er entspricht einem umschlossener Abschnitt, für den man dann CSS-Formatierungen erstellt. Er ist also beliebig zu vergrößern durch Zeilenumbrüche, aber nur begrenzt zu verkleinern durch die Schrift- oder Zeichengröße. Du kannst natürlich auch die gesamte Darstellung weglassen und hast dann die puren Balken. Die flexibelste Variante ist die als einzeilige Tabelle. Sie ist recht cool, weil Breite, Länge und die Farbanteile zu ändern sind. Hat aber auch den meisten Code. Das ist natürlich nur Spielerei und ich hatte auch noch nie eine Lebenssituation in der ich dachte: hey, hier hilft Dir nur ein Fortschrittsbalken weiter ;-). Anbei die Experimente. Mirko

      • Rafael_Sanchis
      • vor 2 Jahren
      • Gemeldet - anzeigen

      Mirko Hi Mirko now look great. 👋

      • Rafael_Sanchis
      • vor 2 Jahren
      • Gemeldet - anzeigen

      Mirko Hi Mirko The Bar work perfect.

      The Ganado Plan  is Plan Value to the Cutoff Date

      The Ganado Real is Earned Value to the Cutoff Date

      These two bar show the Deliverable progress by Measurement milestones.

      There are any way when the bar is on 100% change the color to green?

      • mirko3
      • vor 2 Jahren
      • Gemeldet - anzeigen

      Rafael Sanchis try this

      "Eingabe eines momentanen Werts und eines maximalen Werts (natürlich auch über Berechnungen). Achtung! Nur Ganzzahlen sind erlaubt.";
      let currValue := 5;
      let maxValue := 10;
      "------------------";
      let procResult := round(currValue * 100 / maxValue);
      let content := "
      <style>
      table {
           border-collapse: separate;
            border-spacing: 0px;
          margin:auto;
          width:80%;
      }
      td {
          padding: .5em 0em .5em 0em ;
      }
      #orange {
          background-color: orange;
      }
      #grey {
          background-color: grey;
      }
      #green {
          background-color: green;
      }
      td:last-of-type {
             border-radius: 0em 2em 2em 0em;
      }
      td:first-child {
          border-radius: 2em 0em 0em 2em;
      }
      p {
          font-size: small;
          color: rgb(50,50,50);
          font-family: Didot;
          text-align: center;
      }
      </style>
      <table>  " + for i in range(0, maxValue) do
              "<td id = " + if currValue = maxValue then
                  "green"
              else
                  if currValue > i and currValue < maxValue then
                      "orange"
                  else
                      "grey"
                  end
              end + "></td>"
          end + "
      </table>
      <p>progreso: " + procResult + "</p>  ";
      html(content)
    • Firma OrganizeMe
    • organizeme
    • vor 2 Jahren
    • Gemeldet - anzeigen

    Hier eine einfachere Funktion für Einsteiger:

    Funktionsfeld anlegen und diesen Code einfügen.
    Ersetzt dann einfach die 70 mit einer berechneten Zahl oder Zahlenfeld:
    html("<progress style='width:100%; height:100%'  max='100' value=" + 70 + "></progress>")

    • Backend
    • Odilia
    • vor 2 Jahren
    • Gemeldet - anzeigen

    Super Danke, das habe ich direkt verwenden können.

    • Kruna
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Hi Mirko,
    ich versuche gerade, Dein coole 'Feature' einzubauen, einfach so als Spielerei. Klappt soweit, außer das ich mit der Prozentzahl irgendie nicht zurechtkomme.
    Ich habe Dein Script folgendermassen angepasst:

    "Eingabe eines momentanen Werts und eines maximalen Werts (natürlich auch über Berechnungen). Achtung! Nur Ganzzahlen sind erlaubt.";
    let myAll := cnt((select Pos));
    let myStatus := cnt(select Pos where chosen(Status, 1));
    "------------------";
    let procResult := round(myStatus* 100 / myAll );
    let content := "
    <style>
    table {
         border-collapse: separate;
          border-spacing: 0px;
        margin:auto; /*zentrieren der Tabelle*/
        width:100%
    }
    #orange {
        background-color: orange;
    }
    #grey {
        background-color: rgb(160,160,160);
    }
    #green {
        background-color: rgb(0,202,101);
    }
    p {
        font-size: small;
        color: rgb(50,50,50);
        font-family: Myriad Pro
    }
    </style>
    <aside>
    <table>  " +
        for i in range(0, myAll) do
            "<td id = " +
            if myStatus = myAll then
                "green"
            else
                if myStatus > i and myStatus < myAll then
                    "orange"
                else
                    "grey"
                end
            end +
            "></td>"
        end +
        "
    </table>
    <p style=text-align:center;>Fortschritt " +
        procResult +
        "%</p>
    </aside>
    ";
    html(content)

    Es sind eigentlich nur die ersten beiden Zeilen, da habe ich quasikeine Zahl, sondern eine Formel eingegeben.

    Ich habe eine Tabelle 'Prospekte' mit einer Untertabelle 'Pos' und einem Zahlfeld Position und einem Mehrfachauswahlfeld 'Status'.

    Nun sollen der Prozentsatz folgendermaßen ausgerechnet werden.

    Anzahl der Datensätze aus Untertabelle sind quasi die maxValue

    Anzahl der Datensätze mit Status= 1 ist dann currentValue.

    Soweit so gut fuktioniert das auch, aber wenn ich dann einen neuen Satz in Tabelle 'Prospekte' öffne, fängt die Prozentrechnung nicht bei 0% an sondern bei 100%, ubernimmt quasi maxValue aus der ganzen Tabelle.

    Ich habe mit this versucht, aber komme da nicht weiter.

    Hättest Du evtl eine Idee, was ich falsch mache?

     

    Vielen Dank schon mal.

    Gruß Kruna

      • mirko3
      • vor 1 Jahr
      • Gemeldet - anzeigen

      wenn die beiden Funktionen valide eine Ganzzahl zurückgeben und myAll>myStatus ist, dann müsste es so funktionieren:

      let myAll := cnt((select Pos));
      let myStatus := cnt(select Pos where chosen(Status, 1));
      "---------------------------------------------------------";
      let procResult := round(myStatus * 100 / myAll);
      let content := "
      <style>
      table {
            border-collapse: separate;
          border-spacing: 0px;
          margin:auto;
          width:80%;
      }
      td {
          padding: .5em 0em .5em 0em ;
      }
      #orange {
          background-color: orange;
      }
      #grey {
          background-color: grey;
      }
      #green {
          background-color: green;
      }
      p {
          font-size: small;
          color: rgb(50,50,50);
          text-align: center;
      }
      </style>
      <table>  " +
          for i in range(0, myAll) do
              "<td id = " +
              if myStatus = myAll then
                  "green"
              else
                  if myStatus > i and myStatus < myAll then
                      "orange"
                  else
                      "grey"
                  end
              end +
              "></td>"
          end +
          "
      </table>
      <p>Fortschritt: " +
          procResult +
          "</p>  ";
      html(content)
      
    • Kruna
    • vor 1 Jahr
    • Gemeldet - anzeigen

    HI Mirko,

    irgendwie klappt das auch nicht. Wahrscheinlich habe ich es nicht richtig erklärt oder etwas übersehen.

    Ich habe mal eine Beispieldatenbank beigefügt.

    Vielen Dank für Deine Hilfe.

     

    Gruß Kruna

      • mirko3
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Hi schau mal, ob ich es richtig verstanden habe.

      • Kruna
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Top, genau das wollte ich erreichen! Super Klasse, vielen tausend Dank für Deine Hilfe. Das hat mir sehr weitergeholfen und Zeit gespaart, ich kam einfach nicht darauf.👍

      Gruß Kruna

    • mirko3
    • vor 11 Monaten
    • Gemeldet - anzeigen

    Durch David, aus dem Forum, bin ich auf die Darstellungsmöglichkeit von progressbar durch svg gestoßen. Damit ist die Farbgebung unabhängig vom Browser und über globale Funktion einfacher und auch noch mit Text möglich. Die wenigen Male, wo man so etwas wirklich gebrauchen kann, ist über das Einfügen der Argumente Wert und Maximalwert die Erstellung nun sehr einfach. Natürlich kann man auch select() verwenden, wie in der Beispieldatei. Der Code ist erstaunlich simpel, wenn auch etwas unleserlich durch die Variablen und Farbspielereien und kann sehr einfach angepasst werden. Ich verwende fast ausschliesslich kontrastierte Hintergründe in den Ansichten, deshalb muss der weiße Hintergrund der bar noch verändert werden ("lavender"), wenn jemand bei der Originalansicht bleibt. Mirko

    • mirko3
    • vor 9 Monaten
    • Gemeldet - anzeigen

    Kleine Änderungen. Bessere Lesbarkeit des Codes durch Wechsel der Schreibweise für HTML, dadurch kein Zeilenumbruch beim Einfügen von Ninox-Variablen. Bestimmung der Breite in der Funktion als Argument Nr. 3. Bestimmung der Sichtbarkeit des Prozentwertes jetzt in der Funktion als Argument Nr. 4. Reduktion der Höhe, so daß jetzt ein Balken exakt die Höhe eines normalen Ninox-Feldes hat. Argument Nr. 3 für den Wert und Nr. 4 für den Maximalwert bleiben. Mirko

    function Bar(value : number,maxValue : number,maxWidth : number,valueDisplay : boolean) do
        let valueWidth := round(value * maxWidth / maxValue);
        let display := if valueDisplay then "inline" else "none" end;
        let red := round(maxWidth / 3);
        let orange := round(maxWidth / 3 * 2);
        let foreground := "";
        switch true do
        case valueWidth <= red:
            (foreground := "orangered")
        case valueWidth <= orange:
            (foreground := "darkorange")
        default:
            (foreground := "mediumseagreen")
        end;
        let progressbar := ---
    <svg width={ maxWidth } height=19>
    <rect x=0 y=0 width={ maxWidth } height=19 rx=10px ry=10px  fill=lavender />
    <rect x=0 y=0 width={ valueWidth } height=19 rx=10px ry=10px  fill={ foreground } />
    <text x=10 y=13.5 fill=darkslategray display={ display }>{ round(value / maxValue * 100) } %</text>
    </svg>
            ---;
        html(progressbar)
    end;
    Bar(value, maxValue, 300, true)