Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@kellyegan
kellyegan committed Jul 14, 2020
0 parents commit 5f2bf20
Show file tree
Hide file tree
Showing 5 changed files with 321 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.DS_Store
56 changes: 56 additions & 0 deletions highlightmap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
(function (containerId) {
const prefix = "hlm";
const linksSelector = `.${prefix}-visualmap a`;
const highlightSelector = `.${prefix}-highlights .${prefix}-highlight`;
const buttonSelector = `.${prefix}-controls .${prefix}-`;

const container = document.getElementById(containerId);
const linksArray = [...container.querySelectorAll(linksSelector)];
const highlightsArray = [...container.querySelectorAll(highlightSelector)];
const selector = `.${prefix}-controls ${prefix}-next`;

const buttonNext = container.querySelector(buttonSelector + "next");
const buttonPrev = container.querySelector(buttonSelector + "prev");

buttonNext.addEventListener("click", (e) => {
incrementHighlight(1);
});

buttonPrev.addEventListener("click", (e) => {
incrementHighlight(-1);
});

linksArray.forEach((link) => {
const highlight = document.querySelector(link.href.baseVal);

link.addEventListener("click", (e) => {
event.preventDefault();

const child = link.children[0];
console.log(child.cx.baseVal.value + " x " + child.cy.baseVal.value);

const highlightId = link.href.baseVal;
const highlight = container.querySelector(`#${highlightId}`);
if (highlight === null) return;
highlightsArray.forEach((highlight) => {
if (highlightId !== highlight.id)
highlight.classList.remove("selected");
});

highlight.classList.add("selected");
});
});

function incrementHighlight(incrment) {
const index = highlightsArray.findIndex((highlight) => {
return highlight.classList.contains("selected");
});
const nextIndex =
index !== 0
? (index + incrment) % highlightsArray.length
: highlightsArray.length - 1;

highlightsArray[index].classList.remove("selected");
highlightsArray[nextIndex].classList.add("selected");
}
})("hybrid-classroom-widget");
Binary file added images/HybridClassroom-0001.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 112 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang='en'>

<head>
<title>Hybrid clasroom</title>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<div id="hybrid-classroom-widget">
<div class="hlm-text">
<h1>Hybrid classroom</h1>
<div class="hlm-highlights">
<div class="hlm-highlight selected" id="hlm-highlight-1">
<h2>Connect to room audio and video</h2>
<p>Connect your laptop to the room equipment and start your Zoom session.</p>
</div>
<div class="hlm-highlight" id="hlm-highlight-2">
<h2>Use tablet for writing and drawing</h2>
<p>If you need to write notes for students, use a Wacom tablet. Remote students will not be able to
adequately see writing on a blackboard or whiteboard.</p>
</div>
<div class="hlm-highlight" id="hlm-highlight-3">
<h2>Remote students visiable via large display</h2>
<p>Your remote students will be viewable on the room projector to the side of your presentation.</p>
</div>
<div class="hlm-highlight" id="hlm-highlight-4">
<h2>In-person students joining Zoom meeting</h2>
<p>Physically present students should join the Zoom meeting, but should mute their microphones.</p>
</div>
<div class="hlm-highlight" id="hlm-highlight-5">
<h2>Using installed cameras</h2>
<p>The rear mounted camera will give remote students a view of the classroom, but is insufficient for
viewing any wall writing.</p>
</div>
</div>
</div>

<div class="hlm-visuals">
<svg class="hlm-visualmap" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"
preserveAspectRatio="xMidYMax slice" aria-labelledby="graphic-title" aria-describedby="graphic-description">
<defs>
<style>
.links {
fill: url(#radial-gradient-link);
stroke-miterlimit: 10;
stroke-width: 5px;
}

.links:hover {
fill: url(#radial-gradient-hover);
}

.links:active {
fill: url(#radial-gradient-active);
}
</style>

<radialGradient id="radial-gradient-link" cx="0.5" cy="0.5" r="0.5">
<stop offset="0.69928" stop-color="#569dff" stop-opacity="0" />
<stop offset="1" stop-color="#569dff" stop-opacity="0.5" />
</radialGradient>
<radialGradient id="radial-gradient-hover" cx="0.5" cy="0.5" r="0.5">
<stop offset="0.69928" stop-color="#569dff" stop-opacity="0" />
<stop offset="1" stop-color="#569dff" stop-opacity="0.8" />
</radialGradient>
<radialGradient id="radial-gradient-active" cx="0.5" cy="0.5" r="0.5">
<stop offset="0.69928" stop-color="#569dff" stop-opacity="0.1" />
<stop offset="1" stop-color="#569dff" stop-opacity="1.0" />
</radialGradient>

</defs>
<title id="graphic-title">Hybrid classroom illustration</title>
<desc id="graphic-description">Illustration of highlights of classroom where some students are in-person and
others are remote.</desc>

<image width="1920" height="1080" xlink:href="images/HybridClassroom-0001.png" />

<a xlink:href="hlm-highlight-1">
<circle class="links" cx="960" cy="593" r="72" /></a>
<a xlink:href="hlm-highlight-2">
<circle class="links" cx="474" cy="510" r="118" /></a>
<a xlink:href="hlm-highlight-2">
<circle class="links" cx="1186" cy="660" r="75" /></a>
<a xlink:href="hlm-highlight-3">
<circle class="links" cx="1128" cy="392" r="95" /></a>
<a xlink:href="hlm-highlight-4">
<circle class="links" cx="848" cy="764" r="95" /></a>
<a xlink:href="hlm-highlight-5">
<circle class="links" cx="1331" cy="274" r="100" /></a>
<a xlink:href="hlm-highlight-6">
<circle class="links" cx="677" cy="610" r="80" /></a>
<a xlink:href="hlm-highlight-7">
<ellipse class="links" cx="1351" cy="996.5" rx="73.5" ry="256"
transform="translate(316.0375 2318.26619) rotate(-88.35108)" /></a>

</svg>


</div>
<div class="hlm-controls">
<button class="hlm-prev" type="button">Previous</button>
<button class="hlm-next" type="button">Next</button>
</div>
</div>

<script type="application/javascript" src="highlightmap.js"></script>
</body>

</html>
152 changes: 152 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;700&display=swap");

html,
body {
margin: 0;
padding: 0;
height: 100%;
}

#hybrid-classroom-widget * {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
font-size: 4.5vmin;
}

#hybrid-classroom-widget h1,
#hybrid-classroom-widget h2 {
font-family: "Roboto Slab", serif;
font-weight: 400;
line-height: 1.125em;
}

#hybrid-classroom-widget h1 {
font-size: 5vmin;
font-weight: 700;
margin: 0;
}

#hybrid-classroom-widget h2 {
font-size: 6vmin;
margin-top: 0.5em;
}

#hybrid-classroom-widget {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fff6e5;
}

.hlm-text {
position: relative;
width: 100%;
padding: 1em;
line-height: 1.5em;
}

.hlm-highlights {
position: relative;
}

.hlm-highlight {
position: absolute;
left: -200vh;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s;
}

.selected {
left: 0;
width: unset;
height: unset;
opacity: 100;
}

.hlm-visuals {
position: absolute;
bottom: 0;
right: 0;
width: 100%;

height: 70%;
}

.hlm-visualmap {
position: absolute;
top: 0;
right: 0;
min-height: 70%;
max-height: 80%;
max-width: 100%;
}

.hlm-controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
justify-content: center;
align-items: flex-start;
padding: 0.5em;
}

.hlm-controls button {
margin: 1em;
border: 1px solid #ddd;
background: none;
border-radius: 0.75em;
padding: 0.5em 1em;
text-transform: uppercase;
}

.hlm-controls button:hover {
background-color: rgba(255, 255, 255, 0.75);
}
.hlm-controls button:active {
font-weight: 700;
border: 1px solid #333;
}

button.hlm-next::after {
content: " \003e";
}

button.hlm-prev::before {
content: "\003c ";
}

@media (min-aspect-ratio: 4/3) {
.hlm-text {
z-index: 1;
width: 35%;
}

.hlm-visuals {
width: 65%;
height: 100%;
}
}

@media screen and (min-width: 400px) and (min-height: 400px) {
#hybrid-classroom-widget * {
font-size: 18px;
}

.hlm-visualmap {
min-height: 80%;
max-height: 90%;
}

#hybrid-classroom-widget h1 {
font-size: 4vmin;
}

#hybrid-classroom-widget h2 {
font-size: 5vmin;
}
}

0 comments on commit 5f2bf20

Please sign in to comment.