kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added phoneme view

Browse Source
This commit is contained in:
Kenneth Jao 2018-05-30 00:27:36 -04:00
parent 7f7baa5f88
commit 7abb32fcb6
3 changed files with 124 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
SmearcarDB/static/index.css
View File

@ -239,27 +239,27 @@ a {
height: 20%; height: 20%;
} }
#dataValues1 #dataTable, #dataValues2 .row { #dataValues1 #dataTable, #dataValues2 #dataTable2 {
height: 42%; height: 42%;
} }
#dataTable { #dataTable, #dataTable2 {
grid-template-columns: 90fr 10fr; grid-template-columns: 90fr 10fr;
} }
#langSelect { #langSelect, #phonemeSelect {
grid-column: 1; grid-column: 1;
grid-row: 1 grid-row: 1
} }
#langSelect .dropdown { #langSelect .dropdown, #phonemeSelect .dropdown {
height: 50%; height: 50%;
width: 85%; width: 85%;
margin: auto 0 auto 5%; margin: auto 0 auto 5%;
} }
#flipMode { #flipMode1, #flipMode2 {
grid-column: 4; grid-column: 4;
grid-row: 1; grid-row: 1;
cursor: pointer; cursor: pointer;
@ -270,11 +270,11 @@ a {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
#flipMode:hover { #flipMode1:hover, #flipMode2:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
#flipMode p { #flipMode1 p, #flipMode2 p {
font-size: 2vh; font-size: 2vh;
margin: auto 0 auto auto; margin: auto 0 auto auto;
vertical-align: middle; vertical-align: middle;
@ -284,27 +284,27 @@ a {
pointer-events: none; pointer-events: none;
} }
#flipMode .fa { #flipMode1 .fa, #flipMode2 .fa {
margin: auto; margin: auto auto auto 30%;
font-size: 3vh; font-size: 3vh;
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
pointer-events: none; pointer-events: none;
} }
#dataInfo { #dataInfo, #dataInfo2 {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
} }
#langInfoCont { #langInfoCont, #phonemeInfoCont {
display: grid; display: grid;
font-weight: 300; font-weight: 300;
font-size: 2.5vh; font-size: 2.5vh;
margin: auto 0 auto 4vh; margin: auto 0 auto 4vh;
} }
#dataTableCont { #dataTableCont, #dataTableCont2 {
display: grid; display: grid;
font-weight: 300; font-weight: 300;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
@ -313,18 +313,18 @@ a {
padding: 2vh; padding: 2vh;
} }
#dataTableCont div { #dataTableCont div, #dataTableCont2 div {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
} }
#dataTableCont div p { #dataTableCont div p, #dataTableCont2 div p {
font-size: 2.2vh; font-size: 2.2vh;
padding: 0 5% 0 5%; padding: 0 5% 0 5%;
} }
#dataTableCont input { #dataTableCont input, #dataTableCont2 input {
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
font-size: 2vh; font-size: 2vh;
width: 60%; width: 60%;
@ -333,11 +333,11 @@ a {
font-weight: 300; font-weight: 300;
} }
#langGraph { #langGraph, #phonemeGraph {
display: block; display: block;
} }
#langGraph canvas { #langGraph canvas, #phonemeGraph canvas {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }

101
SmearcarDB/static/index.js
View File

@ -5,6 +5,7 @@ var data;
var languageChart; var languageChart;
var dataOpen = false; var dataOpen = false;
var submittable = true; var submittable = true;
var flipMode = "dataValues1";
var dropOp = {}; var dropOp = {};
var dropOpStore = {}; var dropOpStore = {};
var loginInfo = {}; var loginInfo = {};
@ -263,9 +264,28 @@ function phoneme(p) {
}); });
} }
document.getElementById("flipMode").onclick = function() { document.getElementById("flipMode1").onclick = function() {
dropOpStore["flipMode"] = (dropOpStore["flipMode"] === "language") ? "phoneme" : "language"; document.getElementById(flipMode).style.opacity = "0";
setTimeout(function() {
document.getElementById(flipMode).style.display = "none";
flipMode = (flipMode === "dataValues1") ? "dataValues2" : "dataValues1";
document.getElementById(flipMode).style.display = "block";
setTimeout(function() {
document.getElementById(flipMode).style.opacity = "1";
}, 30);
}, 300);
};
document.getElementById("flipMode2").onclick = function() {
document.getElementById(flipMode).style.opacity = "0";
setTimeout(function() {
document.getElementById(flipMode).style.display = "none";
flipMode = (flipMode === "dataValues1") ? "dataValues2" : "dataValues1";
document.getElementById(flipMode).style.display = "block";
setTimeout(function() {
document.getElementById(flipMode).style.opacity = "1";
}, 30);
}, 300);
} }
function generateDropOp() { // For options that change based on data. function generateDropOp() { // For options that change based on data.
@ -289,7 +309,6 @@ function generateDropOp() { // For options that change based on data.
info.appendChild(a); info.appendChild(a);
// Generate data box material. // Generate data box material.
var phonemes = Object.keys(langInfo.phonemes).sort(Intl.Collator().compare); var phonemes = Object.keys(langInfo.phonemes).sort(Intl.Collator().compare);
while (dataBox.firstChild) { while (dataBox.firstChild) {
@ -343,9 +362,78 @@ function generateDropOp() { // For options that change based on data.
}, 300); }, 300);
}].concat(["Select language..."].concat(data.values.map(a=>a.id))); }].concat(["Select language..."].concat(data.values.map(a=>a.id)));
dropOp["authority"] = [function() { dropOp["phonemeSelect"] = [function() { // Function that occurs when change language.
// Generate info box material.
var langInfo = phoneme(dropOpStore["phonemeSelect"]);
var info = document.getElementById("phonemeInfoCont");
var dataBox = document.getElementById("dataTableCont2");
var graph = document.querySelectorAll("#phonemeGraph > canvas")[0];
info.style.opacity = "0";
dataBox.style.opacity = "0";
graph.style.opacity = "0";
setTimeout(function() {
while (info.firstChild) {
info.removeChild(info.firstChild);
}
var a = document.createElement("a");
a.appendChild(document.createTextNode("Sound"));
a.href = "https://en.wikipedia.org"; // replace with wikipedia
a.setAttribute("target", "_blank");
info.appendChild(a);
// Generate data box material.
while (dataBox.firstChild) {
dataBox.removeChild(dataBox.firstChild);
}
dataBox.style.gridTemplateColumns = "repeat("+Math.ceil(langInfo.length/6).toString() + ", 1fr)";
for(var i = 0; i < 9; i++) dataBox.appendChild(document.createElement("div")); // Extra divs will be filled if necessary.
for(i = 0; i < langInfo.length; i++) {
var tableNum = Math.floor(i/6);
var row = i+2-tableNum*7;
var p1 = document.createElement("p");
var p2 = document.createElement("p");
p1.style.textAlign = "right";
p2.style.textAlign = "left";
p1.style.borderRight = "1px solid #D5D5D5";
if(i%6 === 0) {
var pT1 = document.createElement("p");
var pT2 = document.createElement("p");
pT1.style.textAlign = "right";
pT2.style.textAlign = "left";
pT1.style.borderRight = "1px solid #D5D5D5";
pT1.style.borderBottom = "1px solid #D5D5D5";
pT2.style.borderBottom = "1px solid #D5D5D5";
pT1.appendChild(document.createTextNode("Language"));
pT2.appendChild(document.createTextNode("Percent"));
dataBox.children[tableNum].appendChild(pT1);
dataBox.children[tableNum].appendChild(pT2);
}
p1.appendChild(document.createTextNode(Object.keys(langInfo[i])));
p2.appendChild(document.createTextNode(Rnd(langInfo[i][Object.keys(langInfo[i])], 2)));
dataBox.children[tableNum].appendChild(p1);
dataBox.children[tableNum].appendChild(p2);
}
var graphData = langInfo.map(function(a) { return Object.entries(a)[0]; }).sort(function(a,b) {
return b[1] - a[1];
});
graphData = [graphData.map(function(a,b) {
return a[0];
}), graphData.map(function(a,b) {
return a[1];
})];
// Generate graphs.
var ctx = graph.getContext("2d");
try {
languageChart.destroy();
} catch(err) {}
languageChart = new Chart(ctx, chartOptions(graphData));
info.style.opacity = "1";
dataBox.style.opacity = "1";
graph.style.opacity = "1";
}, 300);
}].concat(["Select phoneme..."].concat(data.phonemes.sort()));
}].concat(["Select authority..."].concat(Object.keys(authorityLabels)));
} }
function createDrop() { function createDrop() {
@ -390,7 +478,7 @@ function createDrop() {
}, 300); }, 300);
}; };
if(op === "langSelect") p2.appendChild(document.createTextNode(language(dropOp[op][j]).name)); if(op === "langSelect") p2.appendChild(document.createTextNode(language(dropOp[op][j]).name));
if(op === "authority") p2.appendChild(document.createTextNode(authorityLabels[dropOp[op][j]])) if(op === "phonemeSelect") p2.appendChild(document.createTextNode(dropOp[op][j]));
div2.appendChild(p2); div2.appendChild(p2);
} }
@ -418,7 +506,6 @@ function dropOpUpdate(op) {
var dropdown = document.querySelectorAll(".dropdown[option=" + op + "] .button p")[0]; var dropdown = document.querySelectorAll(".dropdown[option=" + op + "] .button p")[0];
if(op === "langSelect") dropdown.textContent = language(dropOpStore[op]).name; if(op === "langSelect") dropdown.textContent = language(dropOpStore[op]).name;
if(op === "authority") dropdown.textContent = authorityLabels[dropOpStore[op]]; if(op === "authority") dropdown.textContent = authorityLabels[dropOpStore[op]];
console.log(op);
(dropOp[op][0])(); (dropOp[op][0])();
} }

26
SmearcarDB/templates/index.html
View File

@ -43,7 +43,7 @@
<div class="row"> <div class="row">
<div id="langSelect" class="card"> <div id="langSelect" class="card">
<h2>Language</h2> <h2>Language</h2>
<div id="flipMode" class="transition"> <div id="flipMode1" class="transition">
<p>Phoneme</p> <p>Phoneme</p>
<i class="fa fa-angle-double-right"></i> <i class="fa fa-angle-double-right"></i>
</div> </div>
@ -69,32 +69,32 @@
<canvas class="transition"></canvas> <canvas class="transition"></canvas>
</div> </div>
</div> </div>
<!-- <div id="dataValues2" class="optionContainer"> <div id="dataValues2" class="optionContainer">
<div class="row"> <div class="row">
<div id="langSelect" class="card"> <div id="phonemeSelect" class="card">
<h2>Language</h2> <h2>Phoneme</h2>
<div id="flipMode" class="transition"> <div id="flipMode2" class="transition">
<p>Phoneme</p> <p>Language</p>
<i class="fa fa-angle-double-right"></i> <i class="fa fa-angle-double-right"></i>
</div> </div>
<div option="langSelect" class="dropdown transition"> <div option="phonemeSelect" class="dropdown transition">
</div> </div>
</div> </div>
<div id="dataInfo" class="card"> <div id="dataInfo2" class="card">
<h2>Info</h2> <h2>Info</h2>
<div id="langInfoCont" class="transition"> <div id="phonemeInfoCont" class="transition">
</div> </div>
</div> </div>
</div> </div>
<div id="dataTable" class="card"> <div id="dataTable2" class="card">
<h2>Data</h2> <h2>Data</h2>
<div id="dataTableCont" class="transition"> <div id="dataTableCont2" class="transition">
</div> </div>
</div> </div>
<div id="langGraph" class="card"> <div id="phonemeGraph" class="card">
<canvas class="transition"></canvas> <canvas class="transition"></canvas>
</div> </div>
</div> --> </div>
<div id="files" class="optionContainer"> <div id="files" class="optionContainer">
<div class="temp card"> <div class="temp card">
<h2>Currently in progress!</h2> <h2>Currently in progress!</h2>