update

ohnoitsalobo · Jul 12, 2024 · 345f3b3 · 345f3b3
1 parent 3fb56f9
commit 345f3b3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/noteCircle/new/index.html b/noteCircle/new/index.html
@@ -42,6 +42,18 @@
         </div>
     </div>
     <div id="img">
+        <!-- <div class="imgText"> -->
+            <!-- <div style="margin-top: 1.2em;">Treble  <br />(G clef)</div> -->
+            <!-- <div style="margin-top: 2.3em;">Alto    <br />(C clef)</div> -->
+            <!-- <div style="margin-top: 2.3em;">Bass    <br />(F clef)</div> -->
+            <!-- <div style="margin-top: 2.7em;">Mandolin<br />tablature</div> -->
+            <!-- <div style="margin-top: 3.8em;">Guitar  <br />tablature</div> -->
+        <!-- </div> -->
+        <div id="img1" class="img">
+        </div>
+        <div id="img2" class="img">
+        </div>
+    <!--  -- >
     <center>
         <table>
             <tr>
@@ -67,6 +79,7 @@
             </tr>
         </table>
     </center>
+    <!--  -->
     </div>
     </center>
     <script src="js/script.js"></script>

diff --git a/noteCircle/new/js/script.js b/noteCircle/new/js/script.js
@@ -344,8 +344,9 @@ const imageOrder = [ 0, 1, 3, 4, 6, 7, 8, 10, 11, 13, 14, 16, 2, 5, 9, 12, 15];
 
 function loadScales(){
     // let begin = "<object width='50%' type='image/svg+xml' data='modes/svg/";
-    let begin = "<object class='img' type='image/svg+xml' data='../modes/svg/";
-    let end = ".svg' style='filter: invert(1); background-color: white;'>Please use a web browser with SVG image support to see the image.</object>";
+    let mid = "<div id='img'><div class='imgText'><div style='margin-top: 5px;'>Treble (G clef)</div><div style='margin-top: 55px;'>Alto (C clef)</div><div style='margin-top: 57px;'>Bass (F clef)</div><div style='margin-top: 58px;'>Mandolin tablature</div><div style='margin-top: 66px;'>Guitar tablature</div></div>";
+    let begin = mid + "<object class='img' type='image/svg+xml' data='../modes/svg/";
+    let end = ".svg' style='filter: invert(1);'>Please use a web browser with SVG image support to see the image.</object>";
     for(let j = 0; j < 17; j++){
         for(let i = 0; i < 7; i++){
             let index = i+( j*7);
@@ -365,7 +366,7 @@ function loadScales(){
 
 function drawNotes(){
     img1.innerHTML = "";
-    img2.innerHTML = ""; img2.parentElement.parentElement.style.display = 'none';
+    img2.innerHTML = ""; // img2.parentElement.parentElement.style.display = 'none';
 
     let index = keyIndex;
     let _scale = scale_Select.selectedIndex;
@@ -385,7 +386,7 @@ function drawNotes(){
         // }, 100);
         if(offset) {
             img2.innerHTML = _images[_scale][offset*7+_mode];
-            img2.parentElement.parentElement.style.display = '';
+            //img2.parentElement.parentElement.style.display = '';
             // setTimeout(function(){
                 // img2.childNodes[0].contentDocument.childNodes[0].style.filter = 'invert(1)';
             // }, 100);

diff --git a/noteCircle/new/style.css b/noteCircle/new/style.css
@@ -44,7 +44,9 @@ table{
     /* background-color: #111; */
 }
 .imgText{
-    text-align: right;
+    position: absolute;
+    text-align: left;
     font-family: Georgia;
-    font-size: 0.83em;
+    font-size: 15px;
+    margin-left: 75px;
 }