Schwierige Berechnung

lima-city → Forum → Sonstiges → Off-Topic

Autor dieses Themas
druid

druid hat kostenlosen Webspace.

18:23, 1.11.2010
Wie ich bereits anderen Ortes sagte, versuche ich z.Z. für ein paar Musikschüler Dokumente zu Grundlagen der Musiktheorie und "Akkordbaukasten" zusammenzustellen. Für verschiedene Zusammenhänge benötige ich die Darstellung eines Keyboards in Calc und HTML und als Grafik. Nun habe ich schon eine entsprechende Tabelle in Calc erstellt. Aber sie gefällt mir nicht, weil sie leichte Unregelmäßigkeiten aufweist.
Es geht um Folgendes: Prinzipiell sieht das Ding so aus, wie auf der folgenden Seite http://www.clavio.de/wissen/noten-lernen/die-vorzeichen-1/.
Dabei müssen die weißen Tasten alle die gleiche Breite im unteren Bereich haben, die schwarzen Tasten müssen alle die gleiche Breite haben, und die Abstände zwischen der ersten und zweiten schwarzen Taste, sowie zwischen der dritten und vierten und vierten und fünften schwarzen Taste müssen auch gleich sein.
Wie gesagt, habe ich da eine Lösung, bei der die Unterschiede kaum zu sehen sind. Ich hätte aber lieber, daß sie gar nicht zu sehen sind.

Wie berechnet man sowas ?

Offensichtlich läßt sich das Tastenverhältnis nicht verbessern:
|-8-|-7--|-7-|-7--|-7-|-7-|-7--|-7-|-7-|-7-|-7-|-6-|
|----|4|3|----|2|5|----|----|5|2|----|3|4|----|1|6|---|
|--12-|---12--|--12-|--12-|---12---|---12--|--12-|

Beitrag zuletzt geändert: 3.11.2010 9:04:48 von druid
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

19:26, 3.11.2010

druid schrieb: Wie ich bereits anderen Ortes sagte, versuche ich z.Z. für ein paar Musikschüler Dokumente zu Grundlagen der Musiktheorie und "Akkordbaukasten" zusammenzustellen. Für verschiedene Zusammenhänge benötige ich die Darstellung eines Keyboards in Calc und HTML und als Grafik. Nun habe ich schon eine entsprechende Tabelle in Calc erstellt. Aber sie gefällt mir nicht, weil sie leichte Unregelmäßigkeiten aufweist.
(...)

Mei eine nette kleine js-aufgabe
http://simuliertes.lima-city.de/papierkorb/tastatur.htm

<html>
<head></head>
<style type="text/css">
body {background-color: #ddd;}
.weiss {height: 200; width: 1px; background-color: #fff; color: #000; position: absolute; top: 0;border: solid 1px #000; text-align: center; vertical-align: bottom;}
.schwarz {height: 130; width: 1px; background-color: #000; color: #fff; position: absolute; top: 0; text-align: center; vertical-align: bottom;}
#tastatur {top: 50px; left: 300px; position: relative}
</style>
<body>
<div style="display: none;">
<div id="weiss" class="weiss"></div>
<div id="schwarz" class="schwarz"></div>
</div>
<div id="tastatur"></div>
<p>der generierte Html-Code</p>
<textarea id="code" rows="40" cols="30" wrap="virtual">

</textarea>
<script type="text/javascript">
function schreibNeTastatur(){
        var schwarzWidth = 30;     //Dicke von schwarz & weiss
        var weissWidth =  40;

        // Die Anzahl der elemente von textschwarz &  schwarzvisibility &  textweiss muss gleich sein
        var textschwarz = new Array('bla', 'blup', '', 'usw', 'blup', '', 'usw');   //text in schwarz
        var schwarzvisibility = new Array('hidden','visible','visible', 'hidden', 'visible', 'visible','visible'); //sichtbar ja/nein von schwarz
        var textweiss = new Array('bla<br>usw<br>usf', 'blup', '', 'usw', 'blup', '', 'usw');  //text in weiss

        var tnode = document.getElementById('tastatur');
        for (a=0;a < textschwarz.length;a++)
        {
        var snode = document.getElementById('schwarz').cloneNode(true);
        var wnode = document.getElementById('weiss').cloneNode(true);
         wnode.style.left = (weissWidth*a+a+1)+'px';
         wnode.style.width = weissWidth+'px';
         wnode.innerHTML = '<span>'+textweiss[a]+'</span>';
         snode.style.left = ((weissWidth*a+a+1)-(schwarzWidth/2))+'px';
         snode.style.width = schwarzWidth+'px';
         snode.innerHTML = '<span>'+textschwarz[a]+'</span>';
         snode.style.visibility = schwarzvisibility[a];
         tnode.appendChild(wnode);
         tnode.appendChild(snode);
        }
        document.getElementById('code').innerHTML = document.getElementById('tastatur').innerHTML;
}
window.onload = schreibNeTastatur;
</script>


</body>
</html>

Spiel einfach ein bischen mit den Werten, falls Dir js oder css nicht so "geläufig" ist (im Quellcode).
Das Ergebnis kann als html-code kopiert werden.
Bzw per Screenshot als Bild genmmen werden.

Calc? kann man das Essen? :biggrin:

Beitrag zuletzt geändert: 3.11.2010 19:28:47 von simuliertes

Autor dieses Themas
druid

druid hat kostenlosen Webspace.

0:25, 4.11.2010
Ich danke Dir sehr herzlich !

Eigfentlich hatte ich nur gehofft, daß irgebndjemand weiß, wie man das Tastenverhältnis ausrechnen kann. Dann bin ich auf die Lösung unten gekommen und ich glaube, man hat dabei immer wenigstens zwei Tasten mit abweichenden Werten. Besser die sind da, wo sie weniger auffallen.

Bis ich mich mit der HTML-Variante beschäftigen kann, wird es wohl noch ein Weilchen dauern, aber Danke !

Calc soll sogar sehr nahrhaft sein. In diesem Falle handelt es sich aber um die Open Source-Variante von Excel.

mvfG, Druid !
simuliertes

simuliertes hat kostenlosen Webspace.

20:12, 4.11.2010
Naja wie gesagt, kenne ich miczh mit calc nicht asu aber bei meinem Code wäre die Formel:

position von schwarz = PositionVonWeiss + BreiteVonWeiss - (BreiteVonSchwarz / 2)

Wobei Weiss=Weisse Tasten & Schwarz = schwarze tasten.
Aber Du hast ja Deine Lösung.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city