Skip to content

Instantly share code, notes, and snippets.

@thomasingalls

thomasingalls/96 Well Plate - js-driven values.markdown

Created December 3, 2015 19:43
Show Gist options
  • Save thomasingalls/860ef9a66cbbe655cd6f to your computer and use it in GitHub Desktop.
Save thomasingalls/860ef9a66cbbe655cd6f to your computer and use it in GitHub Desktop.
Download ZIP
96 Well Plate - js-driven values
Raw
96 Well Plate - js-driven values.markdown
Raw
index.html
pre#main nodata
svg#icon(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', version='1.1', x='0px', y='0px', viewbox='0 0 100 125', enable-background='new 0 0 100 100', xml:space='preserve')
path(fill-rule='oddeven', clip-rule='evenodd', fill='#000000', d='M66,82.188c-7.653,0-24.291,0-31.969,0c-0.031,0-4.031,0-4.031-4 c0-9.029,0-30.91,0-39.969c0-0.031,0-4.031,3.239-6.946c3.744-3.37,9.868-8.882,13.586-12.228c-0.044-0.014,3.175-2.857,6.497,0.132 c3.701,3.331,9.65,8.685,13.353,12.018C70,34.188,70,38.188,70,38.188c0,9.04,0,30.96,0,40C70,82.188,66,82.188,66,82.188z M50,26.188c-2.209,0-4,1.791-4,4s1.791,4,4,4s4-1.791,4-4S52.209,26.188,50,26.188z')
span.tag
.plateview
h1 Plate title one
.plate
.container
.label._00.blank  
.label._01 01
.label._02 02
.label._03 03
.label._04 04
.label._05 05
.label._06 06
.label._07 07
.label._08 08
.label._09 09
.label._10 10
.label._11 11
.label._12 12
.label.a a
.well.a._01 A1
.well.a._02 A2
.well.a._03 A3
.well.a._04 A4
.well.a._05 A5
.well.a._06 A6
.well.a._07 A7
.well.a._08 A8
.well.a._09 A9
.well.a._10 A10
.well.a._11 A11
.well.a._12 A12
.label.b b
.well.b._01 B1
.well.b._02 B2
.well.b._03 B3
.well.b._04 B4
.well.b._05 B5
.well.b._06 B6
.well.b._07 B7
.well.b._08 B8
.well.b._09 B9
.well.b._10 B10
.well.b._11 B11
.well.b._12 B12
.label.c c
.well.c._01 C1
.well.c._02 C2
.well.c._03 C3
.well.c._04 C4
.well.c._05 C5
.well.c._06 C6
.well.c._07 C7
.well.c._08 C8
.well.c._09 C9
.well.c._10 C10
.well.c._11 C11
.well.c._12 C12
.label.d d
.well.d._01 D1
.well.d._02 D2
.well.d._03 D3
.well.d._04 D4
.well.d._05 D5
.well.d._06 D6
.well.d._07 D7
.well.d._08 D8
.well.d._09 D9
.well.d._10 D10
.well.d._11 D11
.well.d._12 D12
.label.e e
.well.e._01 E1
.well.e._02 E2
.well.e._03 E3
.well.e._04 E4
.well.e._05 E5
.well.e._06 E6
.well.e._07 E7
.well.e._08 E8
.well.e._09 E9
.well.e._10 E10
.well.e._11 E11
.well.e._12 E12
.label.f f
.well.f._01 F1
.well.f._02 F2
.well.f._03 F3
.well.f._04 F4
.well.f._05 F5
.well.f._06 F6
.well.f._07 F7
.well.f._08 F8
.well.f._09 F9
.well.f._10 F10
.well.f._11 F11
.well.f._12 F12
.label.g g
.well.g._01 G1
.well.g._02 G2
.well.g._03 G3
.well.g._04 G4
.well.g._05 G5
.well.g._06 G6
.well.g._07 G7
.well.g._08 G8
.well.g._09 G9
.well.g._10 G10
.well.g._11 G11
.well.g._12 G12
.label.h h
.well.h._01 H1
.well.h._02 H2
.well.h._03 H3
.well.h._04 H4
.well.h._05 H5
.well.h._06 H6
.well.h._07 H7
.well.h._08 H8
.well.h._09 H9
.well.h._10 H10
.well.h._11 H11
.well.h._12 H12
.plateview
h1 Plate title two
.plate
.container
.label._00.blank  
.label._01 01
span.info long label
.label._02 02
span.info long label
.label._03 03
span.info long label
.label._04 04
span.info long label
.label._05 05
span.info long label
.label._06 06
span.info long label
.label._07 07
span.info long label
.label._08 08
span.info long label
.label._09 09
span.info long label
.label._10 10
span.info long label
.label._11 11
span.info long label
.label._12 12
span.info long label
.label.a a
.well.a._01 A1
.well.a._02 A2
.well.a._03 A3
.well.a._04 A4
.well.a._05 A5
.well.a._06 A6
.well.a._07 A7
.well.a._08 A8
.well.a._09 A9
.well.a._10 A10
.well.a._11 A11
.well.a._12 A12
.label.b b
.well.b._01 B1
.well.b._02 B2
.well.b._03 B3
.well.b._04 B4
.well.b._05 B5
.well.b._06 B6
.well.b._07 B7
.well.b._08 B8
.well.b._09 B9
.well.b._10 B10
.well.b._11 B11
.well.b._12 B12
.label.c c
.well.c._01 C1
.well.c._02 C2
.well.c._03 C3
.well.c._04 C4
.well.c._05 C5
.well.c._06 C6
.well.c._07 C7
.well.c._08 C8
.well.c._09 C9
.well.c._10 C10
.well.c._11 C11
.well.c._12 C12
.label.d d
.well.d._01 D1
.well.d._02 D2
.well.d._03 D3
.well.d._04 D4
.well.d._05 D5
.well.d._06 D6
.well.d._07 D7
.well.d._08 D8
.well.d._09 D9
.well.d._10 D10
.well.d._11 D11
.well.d._12 D12
.label.e e
.well.e._01 E1
.well.e._02 E2
.well.e._03 E3
.well.e._04 E4
.well.e._05 E5
.well.e._06 E6
.well.e._07 E7
.well.e._08 E8
.well.e._09 E9
.well.e._10 E10
.well.e._11 E11
.well.e._12 E12
.label.f f
.well.f._01 F1
.well.f._02 F2
.well.f._03 F3
.well.f._04 F4
.well.f._05 F5
.well.f._06 F6
.well.f._07 F7
.well.f._08 F8
.well.f._09 F9
.well.f._10 F10
.well.f._11 F11
.well.f._12 F12
.label.g g
.well.g._01 G1
.well.g._02 G2
.well.g._03 G3
.well.g._04 G4
.well.g._05 G5
.well.g._06 G6
.well.g._07 G7
.well.g._08 G8
.well.g._09 G9
.well.g._10 G10
.well.g._11 G11
.well.g._12 G12
.label.h h
.well.h._01 H1
.well.h._02 H2
.well.h._03 H3
.well.h._04 H4
.well.h._05 H5
.well.h._06 H6
.well.h._07 H7
.well.h._08 H8
.well.h._09 H9
.well.h._10 H10
.well.h._11 H11
.well.h._12 H12
Raw
script.js
;(function main(){
"use strict";
var data = {};
var rows = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
var cols = ["a", "b", "c", "d", "e", "f", "g", "j"];
var plates = document.getElementsByClassName("plateview");
var wells = document.getElementsByClassName("well");
var preview = document.getElementById("main");
function generateData(obj) {
for (var i = 0; i < cols.length; i++) {
for (var j = 0; j < rows.length; j++) {
obj[cols[i] + "_" + rows[j]] = generateValues();
}
}
return obj;
}
// generate data
function generateValues() {
return Math.random();
}
function uuid() {
// not an ideal implementation
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function Well(data) {
return {
"uuid": uuid(),
"data": data
}
};
preview.textContent = JSON.stringify(data);
return true;
})();
Raw
scripts
<script src="http://julian.com/research/velocity/build/velocity.min.js"></script>
<script src="http://julian.com/research/velocity/build/velocity.ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
Raw
style.css
html { font-size: 16px; }
$sizing: .9rem;
$spacing: $sizing/6;
$borderWidth: $sizing/10;
#icon {
width: 40px;
translate: rotate(90);
}
.tag {
display: inline-block;
background-color: #dd4397;
color: white;
/* border: solid 1px black; */
/* padding: 2px;
margin: 5px; */
clear: both;
}
.tag::before{
width: 0;
height: 0;
content: "\A";
border-style: solid;
/* border-radius: 35%; */
border-width: 1.5rem 1.5rem 1.5rem 0;
border-color: transparent #000 transparent transparent;
position: absolute;
transform: translate(-1.5rem, 0px) rotate(90);
}
@mixin cellmargin() {
margin: $spacing;
}
.plateview {
float: left;
}
.plate {
display: inline-block;
width: 13*(2.5*$sizing
+ $spacing/1 + $sizing/3);
margin: $sizing $sizing*2;
border: solid $borderWidth black;
border-radius: $spacing $sizing $sizing $sizing;
padding: 0 $sizing/2 $sizing 0;
}
.plate h1 {
/* whitespace: break; */
}
.label {
width: $sizing * 2.5;
height: $sizing * 2.5;
line-height: $sizing * 2.5;
font-family: monospace;
vertical-align: middle;
text-align: center;
float: left;
border: solid $borderWidth rgba(255,255,255,0);
@include cellmargin();
}
.label>.info {
display: inline-block;
transform: translate(0rem, -4rem) rotate(-30deg);
white-space: nowrap;
text-align: left;
vertical-align: top;
line-height: 1rem;
background-color: rgba(0,0,0,.5);
color: rgba(255,255,255,1);
}
.label>.info::before {
content: "";
width: 0;
height: 0;
border-top: .5rem solid transparent;
border-bottom: .5rem solid transparent;
border-right: .8666rem solid rgba(0,0,0,.5);
border-radius: 1rem;
/* display: block; */
transform: translate(-1rem, 0rem);
}
._01 {
background-color: rgba(90,90,20,.10);
}
.label.a, .label.b, .label.c, .label.d, .label.e, .label.f, .label.g, .label.h {
clear: both;
}
.a, .b, .c, .d, .e, .f, .g, .h {
font-weight: bold;
}
.well {
display: block;
height: $sizing * 2.5;
width: $sizing * 2.5;
line-height: $sizing * 2.5;
font-size: $sizing * 1;
@include cellmargin();
border: solid $borderWidth blue;
border-radius: 50%;
font-family: monospace;
vertical-align: middle;
text-align: center;
float: left;
}
/* ._12 {
margin-right: 12px;
background-color: blue;
margin-
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment