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
-
No look so good on Web Version.
-
Kann man die Höhe des gesamten Sliders, also denn Graubereich, festlegen?
-
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
-
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>") -
Super Danke, das habe ich direkt verwenden können.
-
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
-
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
-
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
-
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)
Content aside
-
4
„Gefällt mir“ Klicks
- vor 8 MonatenZuletzt aktiv
- 15Antworten
- 643Ansichten
-
8
Folge bereits