examples/swing.html

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="No description provided"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>My Project</title> <meta property="og:site_name" content="Music Blocks"/> <meta property="og:type" content="website"/> <meta property="og:title" content="Music Blocks Project- My Project"/> <meta property="og:description" content="No description provided"/> <style>body{background-color: #dbf0fb;}#main{background-color: white; padding: 5%; position: fixed; width: 80vw; height: max-content; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #424242; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); font-family: "Roboto", "Helvetica","Arial",sans-serif;}h3{font-weight: 400; font-size: 36px; margin-top: 10px;}hr{border-top: 0px solid #ccc; margin: 1em;}.btn{border: solid; border-color: #96D3F3; padding: 5px 10px; line-height: 50px; color: #0a3e58;}.btn:hover{transition: 0.4s; -webkit-transition: 0.3s; -moz-transition: 0.3s; background-color: #96D3F3;}.code{word-break: break-all; height: 15vh; background: #f6f8fa; color: #494949; text-align: justify; margin-right: 10vw; margin-left: 10vw; padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;}.image{border-radius: 2px 2px 0 0; position: relative; background-color: #96D3F3;}.image-div{margin-bottom: 10px;}.moreinfo-div{margin-top: 20px;}h4{font-weight: 500; font-size: 1.4em; margin-top: 10px; margin-bottom: 10px;}.tbcode{margin-bottom: 10px;}</style></head><body> <div id="main"> <div class="image-div"><img class="image" id="project-image" src=""></div><h3 id="title">Music Blocks Project - My Project</h3> <p>No description provided</p><hr> <div> <div style="color: #9E9E9E"><p>This project was created in Music Blocks (<a href="https://musicblocks.sugarlabs.org" target="_blank">https://musicblocks.sugarlabs.org</a>), a collection of manipulative tools for exploring fundamental musical concepts in an integrative and fun way. Music Blocks is a Free/Libre Software application, whose source code can be accessed at <a href="https://github.com/sugarlabs/musicblocks" target="_blank">https://github.com/sugarlabs/musicblocks</a>. For more information, please consult the <a href="https://github.com/sugarlabs/musicblocks/tree/master/guide/README.md" target="_blank">Music Blocks guide</a>.</p><p>To open this project, visit Music Blocks and drag and drop this file into the application window. Alternatively, open the file in Music Blocks using the "Load project from files" button.</p></div><div class="moreinfo-div"> <div class="tbcode"><h4>Project Code</h4>This code stores data about the blocks in a project along with a compiled version of the project, if applicable.   <a href="javascript:toggle();" id="showhide">Show</a></div> <div class="code">[[0,["start",{"collapsed":false,"xcor":0,"ycor":0,"heading":0,"color":60,"shade":50,"pensize":5,"grey":100}],269,84,[null,99,null]],[1,["action",{"collapsed":false}],771,86,[null,2,82,null]],[2,["text",{"value":"chunk"}],900,95,[1]],[3,["solfege",{"value":"re"}],973,478,[40]],[4,["newnote",{"collapsed":true}],799,222,[80,45,44,43]],[5,["number",{"value":8}],1017,254,[45]],[6,["pitch",{}],813,286,[44,7,8,95]],[7,["solfege",{"value":"re"}],887,286,[6]],[8,["number",{"value":4}],887,318,[6]],[9,["newnote",{"collapsed":true}],799,254,[43,49,48,47]],[10,["number",{"value":8}],1017,286,[49]],[11,["pitch",{}],813,318,[48,12,13,85]],[12,["solfege",{"value":"mi"}],887,318,[11]],[13,["number",{"value":4}],887,350,[11]],[14,["newnote",{"collapsed":true}],799,286,[47,53,52,51]],[15,["number",{"value":8}],1017,318,[53]],[16,["pitch",{}],813,350,[52,17,18,83]],[17,["solfege",{"value":"sol"}],887,350,[16]],[18,["number",{"value":4}],887,382,[16]],[19,["newnote",{"collapsed":true}],799,318,[51,57,56,55]],[20,["number",{"value":8}],1017,350,[57]],[21,["pitch",{}],813,382,[56,22,23,89]],[22,["solfege",{"value":"la"}],887,382,[21]],[23,["number",{"value":4}],887,414,[21]],[24,["newnote",{"collapsed":true}],799,350,[55,61,60,59]],[25,["number",{"value":8}],1017,382,[61]],[26,["pitch",{}],813,414,[60,27,28,93]],[27,["solfege",{"value":"ti"}],887,414,[26]],[28,["number",{"value":4}],887,446,[26]],[29,["newnote",{"collapsed":true}],799,382,[59,65,64,63]],[30,["number",{"value":8}],1017,414,[65]],[31,["pitch",{}],813,446,[64,32,33,97]],[32,["solfege",{"value":"la"}],887,446,[31]],[33,["number",{"value":4}],887,478,[31]],[34,["newnote",{"collapsed":false}],799,414,[63,69,68,67]],[35,["number",{"value":4}],1017,446,[69]],[36,["pitch",{}],813,478,[68,40,38,91]],[37,["solfege",{"value":"ti"}],973,510,[40]],[38,["number",{"value":4}],887,541,[36]],[39,["nameddo",{"value":"chunk"}],297,189,[41,null]],[40,["oneOf",{}],887,478,[36,3,37]],[41,["repeat",{}],283,157,[99,42,39,null]],[42,["number",{"value":4}],355,157,[41]],[43,["hidden",{}],799,254,[4,9]],[44,["vspace",{}],813,254,[4,6]],[45,["divide",{}],931,222,[4,46,5]],[46,["number",{"value":1}],1017,222,[45]],[47,["hidden",{}],799,286,[9,14]],[48,["vspace",{}],813,286,[9,11]],[49,["divide",{}],931,254,[9,50,10]],[50,["number",{"value":1}],1017,254,[49]],[51,["hidden",{}],799,318,[14,19]],[52,["vspace",{}],813,318,[14,16]],[53,["divide",{}],931,286,[14,54,15]],[54,["number",{"value":1}],1017,286,[53]],[55,["hidden",{}],799,350,[19,24]],[56,["vspace",{}],813,350,[19,21]],[57,["divide",{}],931,318,[19,58,20]],[58,["number",{"value":1}],1017,318,[57]],[59,["hidden",{}],799,382,[24,29]],[60,["vspace",{}],813,382,[24,26]],[61,["divide",{}],931,350,[24,62,25]],[62,["number",{"value":1}],1017,350,[61]],[63,["hidden",{}],799,414,[29,34]],[64,["vspace",{}],813,414,[29,31]],[65,["divide",{}],931,382,[29,66,30]],[66,["number",{"value":1}],1017,382,[65]],[67,["hidden",{}],799,666,[34,null]],[68,["vspace",{}],813,446,[34,36]],[69,["divide",{}],931,414,[34,70,35]],[70,["number",{"value":1}],1017,414,[69]],[71,["newswing2",{}],785,127,[82,72,77,80,81]],[72,["hspace",{}],887,127,[71,73]],[73,["hspace",{}],973,127,[72,74]],[74,["divide",{}],1059,127,[73,75,76]],[75,["number",{"value":1}],1145,127,[74]],[76,["number",{"value":24}],1145,159,[74]],[77,["divide",{}],887,159,[71,78,79]],[78,["number",{"value":1}],973,159,[77]],[79,["number",{"value":8}],973,191,[77]],[80,["vspace",{}],799,190,[71,4]],[81,["hidden",{}],785,694,[71,null]],[82,["hidden",{}],785,127,[1,71]],[83,["forward",{}],813,413,[16,84,null]],[84,["number",{"value":50}],892,413,[83]],[85,["right",{}],813,381,[11,86,null]],[86,["number",{"value":22.5}],887,381,[85]],[87,["right",{}],813,605,[91,88,null]],[88,["number",{"value":22.5}],887,605,[87]],[89,["right",{}],813,445,[21,90,null]],[90,["number",{"value":22.5}],887,445,[89]],[91,["forward",{}],813,573,[36,92,87]],[92,["number",{"value":50}],892,573,[91]],[93,["forward",{}],813,477,[26,94,null]],[94,["number",{"value":50}],892,477,[93]],[95,["forward",{}],813,349,[6,96,null]],[96,["number",{"value":50}],892,349,[95]],[97,["right",{}],813,509,[31,98,null]],[98,["number",{"value":22.5}],887,509,[97]],[99,["setheading",{}],283,125,[0,100,41]],[100,["number",{"value":90}],389,125,[99]],[101,6,[0,"forward",12.5]],[102,6,[0.09444444444444444,"forward",12.5]],[103,6,[0.18888888888888888,"forward",12.5]],[104,6,[0.2833333333333333,"forward",12.5]],[105,6,[0.4444444444444444,"right",11.25]],[106,6,[0.5388888888888889,"right",11.25]],[107,6,[0.7666666666666666,"forward",12.5]],[108,6,[0.8398611111111111,"forward",12.5]],[109,6,[0.9130555555555555,"forward",12.5]],[110,6,[0.98625,"forward",12.5]],[111,6,[1.1111111111111112,"right",11.25]],[112,6,[1.2055555555555557,"right",11.25]],[113,6,[1.3333333333333335,"forward",12.5]],[114,6,[1.427777777777778,"forward",12.5]],[115,6,[1.5222222222222224,"forward",12.5]],[116,6,[1.6166666666666667,"forward",12.5]],[117,6,[1.777777777777778,"right",11.25]],[118,6,[1.8722222222222225,"right",11.25]],[119,6,[2,"forward",12.5]],[120,6,[2.0708333333333333,"forward",12.5]],[121,6,[2.1416666666666666,"forward",12.5]],[122,6,[2.2125,"forward",12.5]],[123,6,[2.283333333333333,"right",5.625]],[124,6,[2.3541666666666665,"right",5.625]],[125,6,[2.425,"right",5.625]],[126,6,[2.495833333333333,"right",5.625]],[127,6,[2.6666666666666665,"forward",12.5]],[128,6,[2.761111111111111,"forward",12.5]],[129,6,[2.855555555555555,"forward",12.5]],[130,6,[2.9499999999999997,"forward",12.5]],[131,6,[3.1111111111111107,"right",11.25]],[132,6,[3.2055555555555553,"right",11.25]]]</div></div></div></div><script type="text/javascript">function toggle(){if (document.getElementsByClassName("code")[0].style.display=="none"){document.getElementsByClassName("code")[0].style.display="flex";document.getElementById("showhide").textContent = "Hide";} else {document.getElementsByClassName("code")[0].style.display="none";document.getElementById("showhide").textContent = "Show";}} var name=decodeURIComponent(window.location.pathname.split("/").pop().slice(0, -5)); var prefix="Music Blocks Project - "; var title=prefix+name; document.querySelector('meta[property="og:title"]').content=title; document.title=name; document.getElementById("title").textContent=title; document.getElementsByClassName("code")[0].style.display = "none";</script></body></html>