bmamlin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Demonstration of geopattern-based avatar

When a patient's image is unavailable, an avatar may be used. Systems often use a
generic silhouette, gender-colored figures, or patient initials; however, it's too
easy for these to look alike and risk confusing one patient for another.
The geopattern-based avatar uses the geopattern javascript
library to generate random colored patterns for the avatar. By using the patient's unique
identifier (e.g., Version 4 UUID
to generate the pattern, the same pattern can be reliably reproduced for each patient, so
(1) a wide range of patterns help decrease the likelihood patient's with the same initials will
have matching avatars and (2) wherever an individual patient's avatar is displayed it will use
the same color & pattern.
This page generates 50 random patients with initials and a UUID and then displays the corresponding
avatar for each patient to give an example of what avatars would look like for 50 random patients.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <!-- View at https://bl.ocks.org/bmamlin/52dceddb2f6ccef70f4e2e796f7d5012 -->
    <title>geopattern avatar demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <!-- optional -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
    <style type="text/css">
      .geopattern {
        width: 5rem;
        height: 5rem;
        background-size: 100px 100px;
        display: inline-block;
        margin: 5px;
        color: rgb(255, 255, 255, 0.7);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3rem;
        line-height: 5rem;
        text-align: center;
      }
      #controls a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3rem;
      }
    </style>
  </head>
  <body>
    <div id="geopattern"></div>
    <div id="controls">
      <a href="javascript:generateSamples()">refresh</a>
    </div>
    <script type="text/javascript">
      function uuidv4() {
        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
          (
            c ^
            (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
          ).toString(16)
        );
      }
      function randomLetter() {
        return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
      }
      function randomInitials() {
        return randomLetter() + randomLetter();
      }
      function generateSamples() {
        var patients = [];
        for (var i = 0; i < 50; i++) {
          patients.push({
            initials: randomInitials(),
            uuid: uuidv4(),
          });
        }
        $("#geopattern").empty();
        patients.forEach((patient) => {
          var div = $('<div class="geopattern"></div>')
            .text(patient.initials)
            .attr("title", "Patient UUID: " + patient.uuid)
            .geopattern(patient.uuid);
          $("#geopattern").append(div);
        });
      }
      generateSamples();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- View at https://bl.ocks.org/bmamlin/52dceddb2f6ccef70f4e2e796f7d5012 -->
	<title>geopattern avatar demo</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<!-- optional -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
	<style type="text/css">
	.geopattern {
	width: 5rem;
	height: 5rem;
	background-size: 100px 100px;
	display: inline-block;
	margin: 5px;
	color: rgb(255, 255, 255, 0.7);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3rem;
	line-height: 5rem;
	text-align: center;
	}
	#controls a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3rem;
	}
	</style>
	</head>
	<body>
	<div id="geopattern"></div>
	<div id="controls">
	<a href="javascript:generateSamples()">refresh</a>
	</div>
	<script type="text/javascript">
	function uuidv4() {
	return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
	(
	c ^
	(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
	).toString(16)
	);
	}
	function randomLetter() {
	return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
	}
	function randomInitials() {
	return randomLetter() + randomLetter();
	}
	function generateSamples() {
	var patients = [];
	for (var i = 0; i < 50; i++) {
	patients.push({
	initials: randomInitials(),
	uuid: uuidv4(),
	});
	}
	$("#geopattern").empty();
	patients.forEach((patient) => {
	var div = $('<div class="geopattern"></div>')
	.text(patient.initials)
	.attr("title", "Patient UUID: " + patient.uuid)
	.geopattern(patient.uuid);
	$("#geopattern").append(div);
	});
	}
	generateSamples();
	</script>
	</body>
	</html>