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

Jump to bottom

Connected pre-loaded images to v2 #436

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Connected pre-loaded images to v2 #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0086f20
Connected pre-loaded images to v2
stephaniequintana Jul 21, 2022
6f06a0e
included the function on src/ui/interface.js and dist/infragram.js
stephaniequintana Jul 27, 2022
1f7f118
simplified function & updated image size
stephaniequintana Aug 4, 2022
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
Binary file removed assets/blue-filtered-plant-thumbnail.jpeg
View file
Open in desktop
Binary file not shown.
Binary file removed assets/blue-filtered-plant.jpeg
View file
Open in desktop
Binary file not shown.
Binary file added assets/blue-filtered-plant.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/red-filtered-trees-thumbnail.jpeg
View file
Open in desktop
Binary file not shown.
Binary file removed assets/red-filtered-trees.jpeg
View file
Open in desktop
Binary file not shown.
Binary file added assets/red-filtered-trees.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions dist/infragram.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 17 additions & 0 deletions dist/infragram2.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

34 changes: 16 additions & 18 deletions index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,22 +62,20 @@ <h1 style="font-size:1.5rem;line-height:3.1rem;letter-spacing:0.09rem;margin-bot
</div>

<!-- ========================= camera/image/video-controls ======================== -->
<div class="btn-toolbar mediaSelect media-tools" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" id="imageselect"type="button" role="group" aria-label="First group">
<label for="file-sel" data-bs-toggle="tooltip" data-bs-placement="left" title="Upload an image">
<a onClick="toggleToolbar()" class="btn-lg btn">
<i class="fa fa-upload"></i>
</a>
<input type="file" id="file-sel" class="d-none" accept="image/*,video/*">
</label>
</div>
<div class="btn-group labeled" role="group" aria-label="First group">
<button rel="tooltip" title="Connect to an Infragram webcam" id="webcam-activate" type="button" class="btn btn-lg btn-primary"><i class="fa fa-camera-retro"></i></button>
<div class="btn-toolbar mediaSelect media-tools" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" id="imageselect">
<label for="file-sel" tabindex="0">
<button onClick="toggleToolbar()" rel="tooltip" data-bs-placement="left" title="Upload an image" type="button" class="btn-lg btn">
<i class="fa fa-upload"></i>
</button>
<input type="file" id="file-sel" accept="image/*,video/*" class="visually-hidden" aria-hidden="true" />
</label>
</div>
<div class="btn-group">
<button rel="tooltip" title="Connect to an Infragram webcam" id="webcam-activate" type="button" class="btn btn-lg btn-primary"><i class="fa fa-camera-retro"></i></button>
</div>
</div>

</div>


<!-- -----------VIDEO CONTROLS------------------------ -->
<!-- ============ tools to be moved to canvas upon video upload ?????? ====== -->
<div class="videoControls btn-toolbar" role="toolbar" style="display: none;" aria-label="Toolbar with button groups">
Expand Down Expand Up @@ -278,12 +276,12 @@ <h2 style="font-size:1.25rem;">Analyze plant health. <br> Visualize photosynthes
<div class="card-body">
<p class="card-text" style="font-size:.625rem;"><small>Drop your media here, connect through your computer above <br class="sample-text-effect"> or <br> explore with our ready-to-use images</small></p>
<div class="d-flex justify-content-around">
<div class="d-flex flex-column justify-content-center align-items-baseline">
<img src="assets/red-filtered-trees-thumbnail.jpeg" alt="Red filtered image - select to explore the tool." style="width:5rem;height:auto;border:.5rem solild var(--image-container-bg);">
<div class="d-flex flex-column justify-content-center align-items-baseline" style="width:5rem;height:auto;">
<img style="max-width:100%" id="rfi" class='sample-image' src="assets/red-filtered-trees.jpg" alt="Red filtered image - select to explore the tool." >
<p class="card-text" style="font-size:.625rem;padding-top:.5rem;"><small>Red filtered trees</small></p>
</div>
<div class="d-flex flex-column justify-content-center align-items-center">
<img src="assets/blue-filtered-plant-thumbnail.jpeg" alt="Blue filtered image - select to explore the tool." style="width:5rem;height:auto;">
<div class="d-flex flex-column justify-content-center align-items-center" style="width:5rem;height:auto;">
<img class='sample-image' style="max-width:100%" src="assets/blue-filtered-plant.jpg" alt="Blue filtered image - select to explore the tool.">
<p class="card-text" style="font-size:.625rem;padding-top:.5rem;"><small>Blue filtered plant</small></p>
</div>
</div>
Expand Down
22 changes: 19 additions & 3 deletions src/ui/interface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@ module.exports = function Interface(options) {
"#s_exp": "s",
"#v_exp": "v"
};

$("#overlay-slider").val(localStorage.getItem("overlaySize"));
console.log('grid ' + localStorage.getItem("overlaySize"));
setGrid($("#overlay-slider").val());

// TODO: broken:
// TODO: broken:
//urlHash.setUrlHashParameter(JSON.stringify(idNameMap));
src = urlHash.getUrlHashParameter('src');
if (src) {
Expand All @@ -68,6 +68,22 @@ module.exports = function Interface(options) {
return true;
});

//Version 2 - load pre-selected sample image:
$(".sample-image").click(function(e){
e.stopPropagation();
const img = (e.target);
fetch(img.src)
.then(res => res.blob())
.then(blob => {
const file = new File([blob], img.src, blob)
const fileInput = document.querySelector('input[type="file"]');
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow i really like this way of doing it. It literally selects the image, same as someone using it! That will mean that we don't have to support (or think about) 2 different means of adding images. Very cool.

fileInput.files = dataTransfer.files;
$(options.fileSelector).trigger("change");
})
});

$(options.fileSelector).change(function() {
$('.choose-prompt').hide();
$("#save-modal-btn").show();
Expand Down Expand Up @@ -130,7 +146,7 @@ module.exports = function Interface(options) {
localStorage.setItem("overlaySize", $("#overlay-slider").val());
$("#overlay-save-info").show().delay(2000).fadeOut();
});

$("[rel=tooltip]").tooltip()
$("[rel=popover]").popover()
return true;
Expand Down