Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added guided tour #164

Merged
merged 13 commits into from
Jan 24, 2025
Merged

added guided tour #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f441b19
added guided tour
biplab-sutradhar Nov 6, 2024
b33f6f1
added g_info.classed instead id and added driverjs file
biplab-sutradhar Nov 13, 2024
a9ae545
Add start_tour id in start tour button implement guided tour with tests
biplab-sutradhar Jan 15, 2025
60d262b
changes formatting/style
biplab-sutradhar Jan 19, 2025
ca01c5b
Delete .vscode/settings.json
biplab-sutradhar Jan 19, 2025
eb8814c
Remove some files
biplab-sutradhar Jan 20, 2025
8cd6e60
Merge branch 'guidedtour/feature' of github.com:animint/animint2 into…
biplab-sutradhar Jan 20, 2025
d0f9348
Merge branch 'master' into guidedtour/feature
tdhock Jan 24, 2025
00c8a33
start tour same line as other widgets
tdhock Jan 24, 2025
58b8ece
test initial, click tour, click next
tdhock Jan 24, 2025
238d804
try chromote dev from github
tdhock Jan 24, 2025
eb56eb7
animint_start_tour class instead of id
tdhock Jan 24, 2025
337624a
version++
tdhock Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@
*ANIMINT_TEST_FOO
*pids.txt
*~
.vscode/settings.json
3 changes: 2 additions & 1 deletion DESCRIPTION
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Package: animint2
Title: Animated Interactive Grammar of Graphics
Version: 2025.1.21
Version: 2025.1.24
URL: https://animint.github.io/animint2/
BugReports: https://github.com/animint/animint2/issues
Authors@R: c(
Expand Down Expand Up @@ -287,3 +287,4 @@ Collate:
RoxygenNote: 7.3.2
Config/Needs/website: tidyverse/tidytemplate
VignetteBuilder: knitr
Remotes: rstudio/chromote
4 changes: 4 additions & 0 deletions NEWS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# Changes in version 2025.1.24 (PR#164)

- New Start Tour widget at the bottom of each data viz, which highlights what interactions are possible with each geom. Use `geom_*(title="title for geom in tour", help="details about what this geom is supposed to represent)` to change what is displayed for each geom during the tour. Powered by https://driverjs.com/

# Changes in version 2025.1.21 (PR#181)

- `animint(video="https://some.url")` renders the link at the bottom
Expand Down
41 changes: 39 additions & 2 deletions inst/htmljs/animint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
// </script>
// Constructor for animint Object.
var animint = function (to_select, json_file) {

var steps = [];
var default_axis_px = 16;

function wait_until_then(timeout, condFun, readyFun) {
Expand Down Expand Up @@ -185,6 +185,30 @@ var animint = function (to_select, json_file) {

var add_geom = function (g_name, g_info) {
// Determine if data will be an object or an array.
// added geom properties in steps array
console.log(g_info);
var geom = g_info.classed;
var title = g_info.params.title || g_info.classed;
var helpText = g_info.params.help || '';
var showSelected = g_info.params.showSelected || '';
var clickSelects = g_info.params.clickSelects || '';
var description = helpText;
if(g_info.params.hasOwnProperty("showSelected")){
description += '<br>Data are shown for the current selection of: ' + g_info.params.showSelected;
}
if(g_info.params.hasOwnProperty("clickSelects")){
description += '<br>Click to select: ' + g_info.params.clickSelects;
}
if(description == ""){
description = "No interactions available";
}
steps.push({ // this add the geom to the steps array for guided tour
element: '.' + geom,
popover: {
title: title,
description: description
}
});
if(g_info.geom in data_object_geoms){
g_info.data_is_object = true;
}else{
Expand Down Expand Up @@ -2053,12 +2077,26 @@ var animint = function (to_select, json_file) {
////////////////////////////////////////////
// Widgets at bottom of page
////////////////////////////////////////////
// Function to start the tour
var element = d3.select('body');
if(response.hasOwnProperty("source")){
widget_td.append("a")
.attr("class","a_source_href")
.attr("href", response.source)
.text("source");
}
widget_td
.append('button')
.attr('class', 'animint_start_tour')
.text('Start Tour')
.on('click', function () {
const driver = window.driver.js.driver;
const driverObj = driver({
showProgress: true,
steps: steps,
});
driverObj.drive();
});
// loading table.
var show_hide_table = widget_td.append("button")
.text("Show download status table");
Expand Down Expand Up @@ -2493,4 +2531,3 @@ var animint = function (to_select, json_file) {
});
};


7 changes: 2 additions & 5 deletions inst/htmljs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<!DOCTYPE html>
<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Interactive animation</title>
<script type="text/javascript" src="vendor/d3.v3.js"></script>
Expand All @@ -12,15 +10,14 @@
<script type="text/javascript" src="vendor/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="vendor/selectize.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/selectize.css" />
<script type="text/javascript" src="vendor/driver.js.iife.js"></script>
<link rel="stylesheet" href="vendor/driver.css" />
</head>

<body>

<div id="plot"> </div>
<script>
var plot = new animint("#plot","plot.json");
</script>

</body>

</html>
Expand Down
228 changes: 228 additions & 0 deletions inst/htmljs/vendor/driver.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
.driver-active .driver-overlay,
.driver-active * {
pointer-events: none
}

.driver-active .driver-active-element,
.driver-active .driver-active-element *,
.driver-popover,
.driver-popover * {
pointer-events: auto
}

@keyframes animate-fade-in {
0% {
opacity: 0
}

to {
opacity: 1
}
}

.driver-fade .driver-overlay {
animation: animate-fade-in .2s ease-in-out
}

.driver-fade .driver-popover {
animation: animate-fade-in .2s
}

.driver-popover {
all: unset;
box-sizing: border-box;
color: #2d2d2d;
margin: 0;
padding: 15px;
border-radius: 5px;
min-width: 250px;
max-width: 300px;
box-shadow: 0 1px 10px #0006;
z-index: 1000000000;
position: fixed;
top: 0;
right: 0;
background-color: #fff
}

.driver-popover * {
font-family: Helvetica Neue, Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif
}

.driver-popover-title {
font: 19px/normal sans-serif;
font-weight: 700;
display: block;
position: relative;
line-height: 1.5;
zoom: 1;
margin: 0
}

.driver-popover-close-btn {
all: unset;
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 28px;
cursor: pointer;
font-size: 18px;
font-weight: 500;
color: #d2d2d2;
z-index: 1;
text-align: center;
transition: color;
transition-duration: .2s
}

.driver-popover-close-btn:hover {
color: #2d2d2d
}

.driver-popover-title[style*=block]+.driver-popover-description {
margin-top: 5px
}

.driver-popover-description {
margin-bottom: 0;
font: 14px/normal sans-serif;
line-height: 1.5;
font-weight: 400;
zoom: 1
}

.driver-popover-footer {
margin-top: 15px;
text-align: right;
zoom: 1;
display: flex;
align-items: center;
justify-content: space-between
}

.driver-popover-progress-text {
font-size: 13px;
font-weight: 400;
color: #a2a2a2;
zoom: 1
}

.driver-popover-footer button {
all: unset;
display: inline-block;
box-sizing: border-box;
padding: 3px 7px;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
background-color: #fff;
color: #2d2d2d;
font: 12px/normal sans-serif;
cursor: pointer;
outline: 0;
zoom: 1;
line-height: 1.3;
border: 1px solid #ccc;
border-radius: 3px
}

.driver-popover-footer .driver-popover-btn-disabled {
opacity: .5;
pointer-events: none
}

:not(body):has(> .driver-active-element) {
overflow: hidden !important
}

.driver-popover-footer button:hover {
background-color: #f7f7f7
}

.driver-popover-navigation-btns {
display: flex;
flex-grow: 1;
justify-content: flex-end
}

.driver-popover-navigation-btns button+button {
margin-left: 4px
}

.driver-popover-arrow {
content: "";
position: absolute;
border: 5px solid #fff
}

.driver-popover-arrow-side-over {
display: none
}

.driver-popover-arrow-side-left {
left: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent
}

.driver-popover-arrow-side-right {
right: 100%;
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent
}

.driver-popover-arrow-side-top {
top: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent
}

.driver-popover-arrow-side-bottom {
bottom: 100%;
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent
}

.driver-popover-arrow-side-center {
display: none
}

.driver-popover-arrow-side-left.driver-popover-arrow-align-start,
.driver-popover-arrow-side-right.driver-popover-arrow-align-start {
top: 15px
}

.driver-popover-arrow-side-top.driver-popover-arrow-align-start,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start {
left: 15px
}

.driver-popover-arrow-align-end.driver-popover-arrow-side-left,
.driver-popover-arrow-align-end.driver-popover-arrow-side-right {
bottom: 15px
}

.driver-popover-arrow-side-top.driver-popover-arrow-align-end,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
right: 15px
}

.driver-popover-arrow-side-left.driver-popover-arrow-align-center,
.driver-popover-arrow-side-right.driver-popover-arrow-align-center {
top: 50%;
margin-top: -5px
}

.driver-popover-arrow-side-top.driver-popover-arrow-align-center,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center {
left: 50%;
margin-left: -5px
}

.driver-popover-arrow-none {
display: none
}
Loading
Loading