Fixed matrix display issue on big mac

This commit is contained in:
2019-01-23 11:39:36 +00:00
parent 2b6be43232
commit 1d3078f28b
5 changed files with 362 additions and 112 deletions
+3 -2
View File
@@ -51,7 +51,7 @@ class EEGMatTrainThread(BaseThread):
'''
def __init__(self, sessionFilepath=None,
stimFolder="./matrix_test/long_concat_stim/out/stim",
noiseFilepath="./matrix_test/behavioural_stim/stimulus/wav/noise/noise.wav",
noiseFilepath="./matrix_test/behavioural_stim/stimulus/wav/noise/noise_norm.wav",
noiseRMSFilepath="./matrix_test/behavioural_stim/stimulus/rms/noise_rms.npy",
red_coef="./calibration/out/reduction_coefficients/mat_red_coef.npy",
cal_coef="./calibration/out/calibration_coefficients/mat_cal_coef.npy",
@@ -83,6 +83,7 @@ class EEGMatTrainThread(BaseThread):
self.socketio.on_event('submit_eeg_response', self.submitTestResponse, namespace='/main')
self.socketio.on_event('finalise_results', self.finaliseResults, namespace='/main')
# No longer working because of mix_wavs
self.dev_mode = False
def loadStimulus(self):
@@ -243,7 +244,7 @@ class EEGMatTrainThread(BaseThread):
if not self.dev_mode:
self.play_wav(wav_file, 'finish_test')
else:
self.play_wav('./test.wav', 'finish_test')
self.play_wav('./da_stim/DA_170.wav', 'finish_test')
self.socketio.emit("stim_done", namespace="/main")
+1 -3
View File
@@ -10,8 +10,6 @@ from scipy.signal import square
import sounddevice as sd
import soundfile as sf
def play_wav(wav_file, buffersize=20, blocksize=1024, socketio=None):
q = queue.Queue(maxsize=buffersize)
event = threading.Event()
@@ -130,7 +128,7 @@ def block_mix_wavs(wavpath_a, wavpath_b, out_wavpath, a_gain=1., b_gain=1., bloc
y[:, 0] = x1[:, 0] + x2
y[:, 1] = x1[:, 1] + x2
y[:, 2] = x1[:, 2]
if mute_left:
elif mute_left:
y[:, 0] = 0.0
else:
y = x1 + x2
+171 -51
View File
@@ -2,66 +2,186 @@
{% block content %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div id="main-div" class="outer">
<div class="mat_grid">
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Peter</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">got</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">three</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">large</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">desks</button>
<div class="container-fluid mat_grid">
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Peter</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">got</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">three</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">large</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">desks</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Kathy</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sees</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">nine</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">small</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">chairs</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Kathy</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sees</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">nine</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">small</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">chairs</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Lucy</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">bought</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">five</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">old</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">shoes</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Lucy</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">bought</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">five</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">old</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">shoes</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Alan</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">gives</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">eight</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">dark</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">toys</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Alan</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">gives</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">eight</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">dark</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">toys</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Rachel</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sold</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">four</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">thin</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">spoons</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Rachel</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sold</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">four</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">thin</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">spoons</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Barry</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">likes</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">six</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">green</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">mugs</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Barry</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">likes</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">six</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">green</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">mugs</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Steven</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">has</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">two</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">cheap</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">ships</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Steven</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">has</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">two</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">cheap</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">ships</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Thomas</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">kept</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">ten</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">pink</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">rings</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Thomas</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">kept</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">ten</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">pink</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">rings</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Hannah</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wins</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">twelve</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">red</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">tins</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Hannah</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wins</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">twelve</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">red</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">tins</button>
</div>
</div>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Nina</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wants</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">some</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">big</button>
<button type="button" href="#" data-toggle="button" aria-pressed="false" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">beds</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Nina</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wants</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">some</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">big</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">beds</button>
</div>
</div>
</div>
<div class="eeg_submit">
<button type="button" href="#" disabled id="eeg-submit" class="Btn Btn-primary">Submit</button>
+171 -52
View File
@@ -1,67 +1,186 @@
{% extends 'participant_index.html' %}
{% block content %}
<div id="main-div" class="outer">
<h3 id="question"></h3>
<div class="mat_grid">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Peter</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">got</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">three</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">large</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">desks</button>
<div class="container-fluid mat_grid">
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Peter</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">got</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">three</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">large</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">desks</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Kathy</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sees</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">nine</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">small</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">chairs</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Kathy</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sees</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">nine</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">small</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">chairs</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Lucy</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">bought</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">five</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">old</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">shoes</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Lucy</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">bought</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">five</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">old</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">shoes</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Alan</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">gives</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">eight</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">dark</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">toys</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Alan</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">gives</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">eight</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">dark</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">toys</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Rachel</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sold</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">four</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">thin</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">spoons</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Rachel</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sold</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">four</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">thin</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">spoons</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Barry</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">likes</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">six</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">green</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">mugs</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Barry</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">likes</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">six</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">green</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">mugs</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Steven</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">has</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">two</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">cheap</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">ships</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Steven</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">has</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">two</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">cheap</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">ships</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Thomas</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">kept</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">ten</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">pink</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">rings</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Thomas</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">kept</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">ten</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">pink</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">rings</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Hannah</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wins</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">twelve</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">red</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">tins</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Hannah</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wins</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">twelve</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">red</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">tins</button>
</div>
</div>
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Nina</button>
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wants</button>
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">some</button>
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">big</button>
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">beds</button>
<div class="row">
<div class="col-md">
<button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Nina</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wants</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">some</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">big</button>
</div>
<div class="col-md">
<button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">beds</button>
</div>
</div>
</div>
<div class="mat_submit">
<button type="button" href="#" disabled id="mat-submit" class="Btn Btn-primary">Submit</button>
+16 -4
View File
@@ -9,8 +9,10 @@
<script type="text/javascript" src="/static/bower_components/bootstrap-waitingfor/build/bootstrap-waitingfor.js"></script>
<style>
.mat_grid > button {
.mat-button {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
text-align: center;
align-items: stretch;
@@ -18,6 +20,14 @@
vertical-align: middle;
}
.col-md {
padding: 0px;
margin: 0px;
}
.row {
height: 10%;
}
.mat_submit > button {
display: block;
text-decoration: none;
@@ -29,10 +39,12 @@
}
.mat_grid {
display: grid;
/*
display: -ms-grid;
align-content: center;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(10, 1fr);
-ms-grid-template-columns: repeat(5, 1fr);
-ms-grid-template-rows: repeat(10, 1fr);
*/
height: calc(90% - 56px);
}