Created
December 3, 2015 19:43
-
-
Save thomasingalls/860ef9a66cbbe655cd6f to your computer and use it in GitHub Desktop.
Revisions
-
thomasingalls created this gist
Dec 3, 2015 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,7 @@ 96 Well Plate - js-driven values -------------------------------- A 96 well plate. A [Pen](http://codepen.io/thomasingalls/pen/GoKVzj) by [Thomas Ingalls](http://codepen.io/thomasingalls) on [CodePen](http://codepen.io/). [License](http://codepen.io/thomasingalls/pen/GoKVzj/license). This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,258 @@ 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 This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,43 @@ ;(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; })(); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,3 @@ <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> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,116 @@ 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- } */