Skip to content

Commit

Permalink
Merge pull request #38 from ably/example-styles-updates
Browse files Browse the repository at this point in the history 
updating google example and index page to have ably branding and styles.
  • Loading branch information
@owenpearson
owenpearson authored May 12, 2021
2 parents b3bf864 + 886edab commit b71f0bb
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 101 deletions.
10 changes: 1 addition & 9 deletions examples/subscribing-example-app/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,26 +418,18 @@ export function bindUi(riderConnectionInstance) {

var queryParams = new URLSearchParams(window.location.search);

const updateChannelButton = document.getElementById("updateChannelButton");
const channelIdTextBox = document.getElementById("channelID");
const animationCheckbox = document.getElementById("animation");
const subscriberCount = document.getElementById("subscriberCount");

if (!updateChannelButton || !channelIdTextBox) {
if (!channelIdTextBox) {
throw new Error("Where has the UI gone? Cannot continue. Can't find ChannelID");
}

animationCheckbox.addEventListener("change", (cbEvent) => {
riderConnectionInstance.shouldSnap = !cbEvent.target.checked;
});

updateChannelButton.addEventListener("click", () => {
const channelValue = channelIdTextBox.value;
if (channelValue.length > 0) {
riderConnectionInstance.connect(channelIdTextBox.value);
}
});

if (queryParams.has("channel")) {
const channelId = queryParams.get("channel");
channelIdTextBox.value = channelId;
Expand Down
21 changes: 7 additions & 14 deletions examples/subscribing-example-app/public/Ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,28 @@ export function bindUi(riderConnectionInstance) {

var queryParams = new URLSearchParams(window.location.search);

const updateChannelButton = document.getElementById("updateChannelButton");
const channelIdTextBox = document.getElementById("channelID");
const animationCheckbox = document.getElementById("animation");
const subscriberCount = document.getElementById("subscriberCount");

if (!updateChannelButton || !channelIdTextBox) {
if (!channelIdTextBox) {
throw new Error("Where has the UI gone? Cannot continue. Can't find ChannelID");
}

animationCheckbox.addEventListener("change", (cbEvent) => {
console.log(!cbEvent.target.checked);
cbEvent.target.parentElement.setAttribute("data-checked", !cbEvent.target.checked);
riderConnectionInstance.shouldSnap = !cbEvent.target.checked;
});

channelIdTextBox.addEventListener("keyup", (e) => {
if (e.key === "Enter") {
e.preventDefault();
updateChannelButton.click();
if (e.key === "Enter") {
e.preventDefault();
const channelValue = channelIdTextBox.value;
if (channelValue.length > 0) {
riderConnectionInstance.connect(channelIdTextBox.value);
}
}
});

updateChannelButton.addEventListener("click", () => {
const channelValue = channelIdTextBox.value;
if (channelValue.length > 0) {
riderConnectionInstance.connect(channelIdTextBox.value);
}
});

if (queryParams.has("channel")) {
const channelId = queryParams.get("channel");
channelIdTextBox.value = channelId;
Expand Down
30 changes: 10 additions & 20 deletions examples/subscribing-example-app/public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@ h1 {
}

.intro {
display: block;
height: calc(100vh - 100px);
padding: 40px;
font-size: 1.2em;
background-color: white;
}

h2 {
Expand Down Expand Up @@ -86,17 +89,6 @@ h2 {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -1px 0px rgba(0,0,0,0.02)
}

.button {
display: none;
height: 40px;
padding: 0 20px;
border: 0;
border-radius: 20px;
font-size: 1em;
color: white;
background: var(--orange);
}

.historyContainer .item {
height: 300px;
border: 1px solid black;
Expand Down Expand Up @@ -168,21 +160,19 @@ h2 {
color: white;
}

main {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}

p {
max-width: 960px;
line-height: 1.6em;
}

.link {
display: block;
margin: 10px 0;
max-width: 960px;
margin: 2em 0;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
color: #F9A01B;
}

Expand Down Expand Up @@ -288,4 +278,4 @@ p {
bottom: 5px!important;
right: -4px!important;
}
}
}
54 changes: 29 additions & 25 deletions examples/subscribing-example-app/views/google.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Map demo</title>

<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="/main.js"></script>
<script src='https://unpkg.com/@turf/turf@5.1.6/turf.min.js'></script>
<script src="/Google/script.js" type="module"></script>
<head>
<meta charset="utf-8">
<title>Map demo</title>

<link rel="stylesheet" href="/style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="/main.js"></script>
<script src='https://unpkg.com/@turf/turf@5.1.6/turf.min.js'></script>
<script src="/Google/script.js" type="module"></script>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Position Tracking</h1>
<div id="channel">
<label for="channelID" class="label">Tracking ID:</label>
<input type="text" name="channelID" id="channelID" placeholder="Channel ID" class="input">
<input id="updateChannelButton" type="button" value="Update" class="button">
</div>
<h2 class="subscribers" id="subscriberCount"></h2>
<div class="controls">
<h2>Animation:</h2>
<body>
<header>
<h1>
<a href="http://ably.com/" class="logo">Ably</a>
<span class="title">Asset Tracking</span>
</h1>
<div id="channel">
<label for="channelID" class="label">Tracking ID:</label>
<input type="text" name="channelID" id="channelID" placeholder="Enter a Channel ID" class="input">
<h2 class="subscribers" id="subscriberCount"></h2>
</div>
<div class="controls">
<h2 class="animation">Animation:</h2>
<label class="switch">
<span class="switch-text">Off</span>
<input type="checkbox" id="animation" checked="true">
<span class="slider"></span>
<span class="switch-text">On</span>
<span class="switch-text off">Snap</span>
<span class="switch-text on">Smooth</span>
</label>
</div>
</header>
</div>
</header>
<div id="map"></div>
</body>
</html>
41 changes: 26 additions & 15 deletions examples/subscribing-example-app/views/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Ably Map Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h1 class="intro">Ably Mapbox NavSDK demo</h1>
<p>The publishing driver SDK runs on Android and publishes the enhanced lat/long locations to an Ably channel, and these locations are shown on a map clipped to a road. View a demo using your preferred map provider with one of the links below.</p>
<p>If you have accessed this site without API keys specified in the URL query parameters, when you click either of the below links you will be prompted to enter an API key for the map provider you have chosen. Please see the official documentation for how to create an API key (<a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Google Maps</a>, <a href="https://docs.mapbox.com/help/how-mapbox-works/access-tokens/">Mapbox</a>).</p>
<a onclick="window.location='/google'+window.location.search;" class="link">View Google Maps demo &raquo;</a>
<a onclick="window.location='/mapbox'+window.location.search;" class="link">View Mapbox Maps demo &raquo;</a>
</main>
</body>
</html>

<head>
<title>Ably Asset Tracking</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">

<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1><a href="http://ably.com/" class="logo">Ably</a> <span class="title">Asset Tracking</span></h1>
</header>
<main class="intro">
<p>The publishing driver SDK runs on Android and publishes the enhanced lat/long locations to an Ably channel, and
these locations are shown on a map clipped to a road. View a demo using your preferred map provider with one of
the links below.</p>
<p>If you have accessed this site without API keys specified in the URL query parameters, when you click either of
the below links you will be prompted to enter an API key for the map provider you have chosen. Please see the
official documentation for how to create an API key (<a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Google Maps</a>, <a href="https://docs.mapbox.com/help/how-mapbox-works/access-tokens/">Mapbox</a>).
</p>
<a onclick="window.location='/google'+window.location.search;" class="link">View Google Maps demo &raquo;</a>
<a onclick="window.location='/mapbox'+window.location.search;" class="link">View Mapbox Maps demo &raquo;</a>
</main>
</body>
</html>
38 changes: 20 additions & 18 deletions examples/subscribing-example-app/views/mapbox.html
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ably Asset Tracking - Mapbox</title>

<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="main.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src='https://unpkg.com/@turf/turf@5.1.6/turf.min.js'></script>
<script src="/MapBox/script.js" type="module"></script>
<head>
<meta charset="utf-8">
<title>Ably Asset Tracking - Mapbox</title>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="main.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src='https://unpkg.com/@turf/turf@5.1.6/turf.min.js'></script>
<script src="/MapBox/script.js" type="module"></script>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</script>
</head>
<body>
<header>
<h1><a href="http://ably.com/" class="logo">Ably</a> <span class="title">Asset Tracking</span></h1>
<h1>
<a href="http://ably.com/" class="logo">Ably</a>
<span class="title">Asset Tracking</span>
</h1>
<div id="channel">
<label for="channelID" class="label">Tracking ID:</label>
<input type="text" name="channelID" id="channelID" placeholder="Enter a Channel ID" class="input">
<input type="button" value="Update" class="button" id="updateChannelButton">
<h2 class="subscribers" id="subscriberCount"></h2>
</div>
<div class="controls">
Expand All @@ -35,6 +37,6 @@ <h2 class="animation">Animation:</h2>
</label>
</div>
</header>
<div id="map"></div>
</body>
<div id="map"></div>
</body>
</html>

0 comments on commit b71f0bb

Please sign in to comment.