Skip to content
This repository was archived by the owner on Jan 18, 2025. It is now read-only.

som-pageをresponsiveに対応させるスレッド #2

Open
tsuno0829 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

som-pageをresponsiveに対応させるスレッド #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 64 additions & 7 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="play-ground">
<div id="playground">
<div id="title">Playground at UKR & SOM</div>

<div id="data-option">
<br>
<div id="data-menu"></div>
Expand Down Expand Up @@ -63,6 +65,7 @@
<br>
<br>
</div>

<div id="figure">
<div class="no-select">
<font size=4>
Expand All @@ -75,19 +78,70 @@
</div>

<style>
#play-ground {
display: flex;
justify-content: center;
#playground {
display: grid;
margin: 0;
min-height: 100vh;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"figure data-option"
"figure desc-params";
grid-gap: 5px;
background-color: white;
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
#playground {
display: grid;
margin: 0;
min-height: 100vh;
grid-template-rows: 90px 1fr 1fr;
grid-template-columns: 5% 1fr 1fr 5%;
grid-template-areas:
"title title title title"
". figure data-option ."
". figure desc-params .";
background-color: #bbb;
grid-gap: 10px;
}
}
@media screen and (min-width: 1024px) {
#playground {
display: grid;
margin: 0;
min-height: 100vh;
grid-template-rows: 90px 1fr 1fr;
grid-template-columns: 1fr 444px 444px 1fr;
grid-template-areas:
"title title title title"
". figure data-option ."
". figure desc-params .";
background-color: #ccc;
}
}
#title {
grid-area: title;
padding: 10px;
font-size: 1.5em;
background: #f88;
}
@media screen and (min-width: 480px) {
#title {
padding: 25px;
font-size: 2em;
}
}
#data-option {
width: 33%;
grid-area: data-option;
/* width: 33%; */
overflow:hidden;
margin-top: 0px;
text-align: center;
}
/* Data Menu */
#data-menu {
width: 100%;
width: 70%;
max-width: 400px;
/* float: left; */
margin-bottom: 24px;
Expand Down Expand Up @@ -167,20 +221,23 @@
}

#figure {
grid-area: figure;
display: flex;
flex-direction: column;
width:33%;
width:100%;
/* text-align: center; */
padding: 0;
margin:0 auto;
text-align:center;
background-color: cornflowerblue;
}

#demo-description {
width: 100%;
}

#desc-params {
grid-area: desc-params;
width: 33%;
margin: 0 auto;
text-align: center;
Expand Down
42 changes: 34 additions & 8 deletions docs/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ var GLOBALS = {
visibility: "off",
current_Z: null,
current_Y: null,
figure: {
width: 300,
height: 300,
},
};

d3.select("#play_pause").on("click", () => {
Expand Down Expand Up @@ -518,8 +522,6 @@ function demoMaker(
tau,
eta,
mapping_resolution,
width,
height,
margin,
stepCb
) {
Expand Down Expand Up @@ -560,6 +562,9 @@ function demoMaker(
function iterate() {
if (paused) return;

// 画面が変更されたときにfigureサイズを変更するために用意
figureSizeUpdate();

// control speed at which we iterate
if (step >= 200 || Dim == 3) chunk = 1;
for (var k = 0; k < chunk; k++) {
Expand Down Expand Up @@ -605,7 +610,13 @@ function demoMaker(
}
} else {
// UKR
visualize_latent_space(Z, Zeta, width, height, margin);
visualize_latent_space(
(Z = Z),
(Zeta = Zeta),
(width = GLOBALS.figure.width),
(height = GLOBALS.figure.height),
(margin = margin)
);
if (Dim < 4 && GLOBALS.visibility == "on") {
var newY = ukr.generate_new_mapping(X, Z, mapping_resolution);
// Dim=1,2,3のときだけ観測空間を表示
Expand Down Expand Up @@ -685,8 +696,6 @@ function main(X) {
Y = initMatrix(X.length, Dim);
}

var width = 330;
var height = 330;
var margin = { top: 30, bottom: 60, right: 30, left: 60 };

// Dimが3以下のとき，観測データは表示せずにvisibility iconのみ表示する．
Expand Down Expand Up @@ -716,12 +725,23 @@ function main(X) {
tau,
eta,
mapping_resolution,
width,
height,
margin
);
}

function figureSizeUpdate() {
// var size_ = document.getElementById("playground").style;
var figure = document.getElementById("figure");
var w = figure.clientWidth;
var h = figure.clientHeight;
// GLOBALS.figure.width = Math.min(w, h);
// GLOBALS.figure.height = Math.min(w, h);
GLOBALS.figure.width = 400;
GLOBALS.figure.height = 400;
// console.log(GLOBALS.figure);
// console.log(size_.grid);
}

window.onload = () => {
//radio button's setting
function model_select() {
Expand Down Expand Up @@ -831,5 +851,11 @@ window.onload = () => {
for (let i = 0; i < demo.options.length; i++)
params.push(GLOBALS.state.demoParams[i]);
var points = demo.generator.apply(null, params);
main(points);
// main(points);
figureSizeUpdate();
};

window.onresize = () => {
figureSizeUpdate();
// console.log(document.getElementById("figure").clientWidth);
};