diff --git a/examples/subscribing-example-app/README.md b/examples/subscribing-example-app/README.md
index 45ac0e4..56a2125 100644
--- a/examples/subscribing-example-app/README.md
+++ b/examples/subscribing-example-app/README.md
@@ -418,12 +418,11 @@ 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");
}
@@ -431,13 +430,6 @@ export function bindUi(riderConnectionInstance) {
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;
diff --git a/examples/subscribing-example-app/public/Ui.js b/examples/subscribing-example-app/public/Ui.js
index 92dee3f..3eaf8ae 100644
--- a/examples/subscribing-example-app/public/Ui.js
+++ b/examples/subscribing-example-app/public/Ui.js
@@ -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;
diff --git a/examples/subscribing-example-app/public/style.css b/examples/subscribing-example-app/public/style.css
index c40aa2e..4870bcb 100644
--- a/examples/subscribing-example-app/public/style.css
+++ b/examples/subscribing-example-app/public/style.css
@@ -57,7 +57,10 @@ h1 {
}
.intro {
- display: block;
+ height: calc(100vh - 100px);
+ padding: 40px;
+ font-size: 1.2em;
+ background-color: white;
}
h2 {
@@ -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;
@@ -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;
}
@@ -288,4 +278,4 @@ p {
bottom: 5px!important;
right: -4px!important;
}
-}
\ No newline at end of file
+}
diff --git a/examples/subscribing-example-app/views/google.html b/examples/subscribing-example-app/views/google.html
index 74db9ff..c60d633 100644
--- a/examples/subscribing-example-app/views/google.html
+++ b/examples/subscribing-example-app/views/google.html
@@ -1,36 +1,40 @@
-
- Map demo
-
-
-
-
-
+
+ Map demo
-
diff --git a/examples/subscribing-example-app/views/index.html b/examples/subscribing-example-app/views/index.html
index 6db63a6..85644f7 100644
--- a/examples/subscribing-example-app/views/index.html
+++ b/examples/subscribing-example-app/views/index.html
@@ -1,17 +1,28 @@
-
- Ably Map Demo
-
- Ably Mapbox NavSDK demo
- 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.
- 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 (Google Maps , Mapbox ).
- View Google Maps demo »
- View Mapbox Maps demo »
-
-
-
+
+
+ Ably Asset Tracking
+
+ 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.
+ 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 (Google Maps , Mapbox ).
+
+ View Google Maps demo »
+ View Mapbox Maps demo »
+
+
+
\ No newline at end of file
diff --git a/examples/subscribing-example-app/views/mapbox.html b/examples/subscribing-example-app/views/mapbox.html
index 6eee764..014232b 100644
--- a/examples/subscribing-example-app/views/mapbox.html
+++ b/examples/subscribing-example-app/views/mapbox.html
@@ -1,29 +1,31 @@
-
- Ably Asset Tracking - Mapbox
-
-
-
-
-
-
+
+ Ably Asset Tracking - Mapbox
-
-
+
+