Skip to content

Commit 08e2efa

Browse files
p2p2
committed
Incorporate architecture diagram
1 parent fa6b451 commit 08e2efa

15 files changed

+143
-226
lines changed

‎architecture.html

Lines changed: 4 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,75 +3,11 @@
33
<head>
44
<title>C3-PRO</title>
55
<meta charset="utf-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8-
<link rel="icon" href="images/favicon.png" type="image/png">
9-
<link rel="stylesheet" href="assets/css/main.css" />
10-
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
11-
<meta name="msapplication-TileColor" content="rgb(57,99,159)">
12-
<meta name="msapplication-TileImage" content="static/Logo-144.png">
13-
14-
<link rel="apple-touch-icon" sizes="76x76" href="static/Logo-76.png"><!-- non-retina iPad iOS 7+ -->
15-
<link rel="apple-touch-icon" sizes="120x120" href="static/[email protected]"><!-- retina iPhones @2x iOS 7+ -->
16-
<link rel="apple-touch-icon" sizes="152x152" href="static/[email protected]"><!-- retina iPads iOS 7+ -->
17-
<link rel="apple-touch-icon" sizes="180x180" href="static/[email protected]"><!-- retina iPhones @3x iOS 7+ -->
18-
19-
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
20-
<link rel="stylesheet" href="assets/css/style.css" />
21-
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
22-
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
23-
6+
<meta http-equiv="refresh" content="0;URL=index.html#architecture">
247
</head>
258
<body>
26-
<script src="assets/js/jquery.min.js"></script>
27-
<script src="assets/js/jquery.dropotron.min.js"></script>
28-
<script src="assets/js/c3pro.js"></script>
29-
30-
<div id="page-wrapper">
31-
32-
<!-- Header -->
33-
<div id="header">
34-
35-
<!-- Nav -->
36-
<nav id="nav">
37-
<ul>
38-
<li><a href="index.html">C3-PRO</a></li>
39-
<li class="current"><a href="architecture.html">Architecture</a></li>
40-
<li><a href="team.html">Team</a></li>
41-
<li><a href="http://c-tracker.chip.org/" target="_blank">C&nbsp;Tracker</a></li>
42-
</ul>
43-
</nav>
44-
45-
</div>
46-
47-
<section class="wrapper style1">
48-
<div class="container">
49-
<div id="content">
50-
<script>$.include("architecture-content.html")</script>
51-
</div>
52-
</div>
53-
</section>
54-
55-
<!-- Footer -->
56-
<script>$.include("footer.html")</script>
57-
58-
</div>
59-
60-
<!-- Scripts -->
61-
<script src="assets/js/skel.min.js"></script>
62-
<script src="assets/js/util.js"></script>
63-
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
64-
<script src="assets/js/main.js"></script>
65-
<div id="logo" style="display: none;">C3-PRO</div>
66-
<script>
67-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
68-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
69-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
70-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
71-
72-
ga('create', 'UA-67687489-1', 'auto');
73-
ga('send', 'pageview');
74-
75-
</script>
9+
<p>
10+
You should be redirected to <a href="index.html#architecture">#architecture</a>.
11+
</p>
7612
</body>
7713
</html>

‎content/architecture.html

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎contributors.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
ipinyol
2+
p2

‎images/Architecture.png

14.8 KB
Loading

‎images/[email protected]

39.8 KB
Loading

‎images/[email protected]

68.7 KB
Loading

‎images/section_backend.png

-12 Bytes
Loading

‎images/[email protected]

-30 Bytes
Loading

‎images/[email protected]

-138 Bytes
Loading

‎index.html

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -71,25 +71,32 @@ <h3>Modules!</h3>
7171
<h2>Architecture</h2>
7272
<p>
7373
The C3-PRO toolchain is made up of various software modules living in three areas: embedded into your <i>mobile app</i>, server pieces that live in the <i>www</i>, aka, “wild wild web”, and modules living <i>behind a firewall</i> with access to your backend.
74+
Since data exchange happens via FHIR Resources (or encrypted versions thereof), you can easily substitute each component with your own solution.
75+
</p>
76+
<p style="text-align:center;">
77+
<img src="images/Architecture.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="C3-PRO Architecture Diagram" style="width:100%; max-width:900px;">
78+
</p>
79+
<p>
80+
The diagram above illustrates the traditional data flow in a C3-PRO environment.
81+
On the mobile side, the iOS and Android <i>mobile frameworks</i> facilitate working with ResearchKit and ResearchStack, respectively, sending encrypted data to (and retrieving data from) the <i>receiver server</i> living on the open web.
82+
Secure systems, capable of decrypting incoming data, are running behind the institution’s firewall and store data into an <i>i2b2 research backend</i>.
83+
<p>
84+
<p>
85+
From the list <a href="#modules">below</a> you can pick the modules that best suit your needs to design a custom data flow.
7486
</p>
7587
</div>
76-
<div class="boxed oneline">
77-
<h3>
78-
<img class="section" src="images/section_mobile.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="">
79-
Mobile
80-
</h3>
81-
<h3>
82-
<img class="section" src="images/section_www.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="">
83-
World Wide Web
84-
</h3>
85-
<h3>
86-
<img class="section" src="images/section_backend.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="">
87-
Backend
88-
</h3>
89-
</div>
88+
</section>
89+
90+
<!-- Modules -->
91+
<section id="modules" class="wrapper">
9092
<div class="boxed oneline">
9193
<div class="column">
92-
<div class="module">
94+
<h3>
95+
<img class="section" src="images/section_mobile.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="">
96+
Mobile
97+
</h3>
98+
<div>
99+
<div class="module">
93100
<h4>C3-PRO iOS Framework</h4>
94101
<p class="author">
95102
by <a href="http://chip.org" target="_blank">CHIP, Boston Children’s Hospital</a>
@@ -123,9 +130,15 @@ <h4>C3-PRO iOS Framework</h4>
123130
<a href="http://chb.github.io/c3-pro-ios-framework/" target=_blank><i class="icon fa-book"></i> Docs</a>
124131
</p>
125132
</div>
133+
</div>
126134
</div>
127135
<div class="column">
128-
<div class="module">
136+
<h3>
137+
<img class="section" src="images/section_www.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="">
138+
WWW
139+
</h3>
140+
<div>
141+
<div class="module">
129142
<h4>C3-PRO “Receiver” Server</h4>
130143
<p class="author">
131144
by <a href="http://chip.org" target="_blank">CHIP, Boston Children’s Hospital</a>
@@ -155,9 +168,15 @@ <h4>C3-PRO “Receiver” Server</h4>
155168
<a href="https://chb.github.io/c3-pro-server/" target=_blank><i class="icon fa-book"></i> Docs</a>
156169
</p>
157170
</div>
171+
</div>
158172
</div>
159173
<div class="column">
160-
<div class="module">
174+
<h3>
175+
<img class="section" src="images/section_backend.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="">
176+
Backend
177+
</h3>
178+
<div>
179+
<div class="module">
161180
<h4>C3-PRO “Consumer”</h4>
162181
<p class="author">
163182
by <a href="http://chip.org" target="_blank">CHIP, Boston Children’s Hospital</a>
@@ -187,7 +206,7 @@ <h4>C3-PRO “Consumer”</h4>
187206
<a href="http://chb.github.io/c3-pro-consumer/" target=_blank><i class="icon fa-book"></i> Docs</a>
188207
</p>
189208
</div>
190-
<div class="module">
209+
<div class="module">
191210
<h4>i2b2 FHIR Cell</h4>
192211
<p class="author">
193212
by <a href="http://chip.org" target="_blank">CHIP, Boston Children’s Hospital</a>
@@ -213,6 +232,7 @@ <h4>i2b2 FHIR Cell</h4>
213232
<a href="https://chb.github.io/i2b2-fhir-cell/" target=_blank><i class="icon fa-book"></i> Docs</a>
214233
</p>
215234
</div>
235+
</div>
216236
</div>
217237
</div>
218238

@@ -240,16 +260,18 @@ <h2>Open Source, Open Access</h2>
240260
</div>
241261
</div>
242262
</section>
243-
244-
245-
<footer>
246-
<p>
247-
<a href="http://www.chip.org">
248-
<img class="institute" src="images/Institute-web.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="Computational Health Informatics Program, Boston Children's Hospital">
249-
</a>
250-
</p>
251-
<p>Copyright © Boston Children's Hospital 2016</p>
252-
</footer>
263+
<footer>
264+
<p>
265+
<a href="http://www.chip.org">
266+
<img class="institute" src="images/Institute-web.png" srcset="images/[email protected] 2x, images/[email protected] 3x" alt="Computational Health Informatics Program, Boston Children's Hospital">
267+
</a>
268+
</p>
269+
<p>Copyright © Boston Children's Hospital 2016</p>
270+
<p class="small">
271+
FHIR® is the registered trademark of HL7 and is used with the permission of HL7.<br>
272+
The Flame Design mark is the registered trademark of HL7 and is used with the permission of HL7.
273+
</p>
274+
</footer>
253275
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
254276
</body>
255277
</html>

‎sass/style.scss

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -69,22 +69,17 @@ sup {
6969
.boxed { // only used for width and margin
7070
width: auto; max-width: 1200px;
7171
margin: 0 auto;
72+
73+
h2:first-child {
74+
margin-top: 0;
75+
}
7276
}
7377
.oneline { // may be the same element as .boxed, so don't fuck with width and margin
7478
@include display(flex);
7579
margin-bottom: 3em;
7680
& > * {
7781
@include flex(1);
7882
}
79-
& > h3 {
80-
margin-top: 2em !important; margin-bottom: 1em !important;
81-
text-align: center;
82-
83-
img.section {
84-
width: 100px; height: 100px;
85-
vertical-align: -1.25em;
86-
}
87-
}
8883
}
8984
.vcenter { // apply to same item as .oneline
9085
@include align-items(center);
@@ -210,16 +205,32 @@ sup {
210205
padding-left: 0;
211206
}
212207
}
213-
.column {
214-
margin: 0 !important; padding: 0 2em;
215-
border-left: 2pt dashed $color-separator;
208+
.oneline > .column {
209+
margin: 0 !important; padding: 0 !important;
216210

211+
& > h3 {
212+
margin: 2em 0; padding: 0 2em;
213+
text-align: center;
214+
215+
img.section {
216+
width: 100px; height: 100px;
217+
vertical-align: -1.25em;
218+
}
219+
}
220+
& > div {
221+
padding: 0 2em;
222+
border-left: 2pt dashed $color-separator;
223+
}
217224
&:first-child {
218-
margin-left: 0; padding-left: 0;
219-
border-left: none;
225+
& > h3, & > div {
226+
padding-left: 0;
227+
border-left: none;
228+
}
220229
}
221230
&:last-child {
222-
padding-right: 0;
231+
& > div, & > h3 {
232+
padding-right: 0;
233+
}
223234
}
224235
}
225236

@@ -301,6 +312,9 @@ footer {
301312
&:first-child {
302313
margin-top: 0;
303314
}
315+
&.small {
316+
font-size: 0.85em;
317+
}
304318
}
305319
}
306320

0 commit comments

Comments
 (0)