publiclab / infragram Goto Github PK

Bringing over a user request from https://publiclab.org/questions/agentnightingale/08-26-2020/infragram-and-pi-noir-camera-ndvi-not-working

"The NIR channel was stretched while processing, something that cannot be done at Infragram." by @chrisfastie.

I'm sharing this here because poweruser Chris Fastie is one of the primary community support people on publiclab.org and frequently points our that infragram is lacking so capabilities, this one included -- perhaps we can add it?

I'm seeing an error when clicking the Webcam button:

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

On this line:

I haven't changed anything so I wonder if part of the API for getUserMedia camera access has changed. Maybe we need to look at #39 to fix this?

On clicking the below title it redirects to a 404 page.

Possible Solution:
In the footer section, Infragram redirects to the following link: https://publiclab.org/wiki/infragram

Improve this page

Create a sample docker yaml in order to get an isolated Infragram environment to work on.

We'd like to propose an enhancement that allows infragram to initially spin up a full-width video section that resizes itself depending on the video resolution (should change to lesser widths if resolutions are unclear).

Picked from https://github.com/p-v-o-s/infragram-js/blob/a4a2bacff7202342a68909d58dffbba3f5711515/todo.txt#L10

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

• 📝 Create the file named [CODE_OF_CONDUCT.md] in the infragram repository (press the little pen Icon) and edit the line as shown below.

See this page for some help in taking your first steps!

The file needs to be created at the root of the repository and copy the code of conduct from https://github.com/publiclab/plots2/blob/master/CODE_OF_CONDUCT.md

into newly created file.

• 💾 Commit your changes

• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• 🏁 Done Ask in comments for a review :)

🤔❓ Questions?

Leave a comment below!

Is someone else already working on this?

We encourage you to link to this issue by mentioning the issue # in your pull request, so we can see if someone's already started on it. If someone seem stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

Building on publiclab/spectral-workbench.js#173

On the demo, we should add a button with a "ruler" icon -- that turns on a grid overlay:

https://publiclab.github.io/infragram/

Here's the code to do this:

<div style="position:absolute;width:800px;height:600px;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Lightblue_empty_grid.svg">
</div>

We'll have to make it 'unclickable' too - there's a CSS property for that... to let clicks pass through to the layer below...

We can insert it into the index.html file

Steps to reproduce:

1. Go to https://infragram.org/sandbox/index.html.
2. Hover over the upload icon in Source.
3. Tooltip message "Upload an image" isn't visible but while hovering around its corner it is visible. (it should be the same as the camera button tooltip message)
4. on clicking once tooltip message remains there.

Hi @pfoltyn ! Long time no see, I've done a very deep refactor of the original infragram code to be a node module and far more modular and I think more maintainable.

I wonder if you have any ideas about this -- the framerate seems lower than on infragram.org, and I wonder if I'm generating new contexts or something else redundant that's slowing things down. I'd be grateful for a look through if you're able?

Hope you're doing well!

🆕🐥☝ First Timers Only.

This issue is reserved for people who never contributed to Open Source before. We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

About First Timers Only.

🤔 What you need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• 🙋 Claim this issue: Comment below.

  Once claimed we add you as contributor to this repository.

• 👌 Accept our invitation to this repository. Once accepted, assign yourself to this issue

• 📝 Update the file \index.html in the infragram repository (press the little pen Icon) and edit the line as shown below.

@@ -38,7 +38,7 @@
              <!--<div class="modal-header"></div>-->
              <div class="modal-body">
                <h3>Quick start</h3>
-               <p>Choose from these presets to get up and running quickly:</p>
+               <p>Choose from these presets to get up and running quickly. These auto-load common 2. Analysis and 3. Colorize settings so you don't have to manually choose them.</p>
                  <table class="table">
                    <tr>
                      <td width="30%"><b>Raw</b></td>

• 💾 Commit your changes

• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can edit files directly in your browser

• 🏁 Done Ask in comments for a review :)

🤔❓ Questions

Leave a comment below!

This issue was created by First-Timers-Bot.

after the latest update on https://infragram.org/sandbox/ the "UPLOAD IMAGE " button has stopeed working .... it used to work fine bfore this update ...

PLS FIX

When I was opening https://github.com/publiclab/infragram/blob/main/index.html this file in my browser and inspect this page, then this showing this error

Hi, I cloned infragram but see a different version of the server page than
https://publiclab.github.io/infragram/. The version I see looks like the picture below and the grid feature doesn't work.

Is there a differnet verion yet to be posted?

Thx

We all at Public Lab 🎈 - learn, grow, work, brainstorm ideas, contribute together so why not share about our weekly goals and the awesome work we have done at Public Lab with each other, so we can support and collaborate with each other better. We have a Community Check-In each week, where every community member can share something about their work from the past week and about their current week's goal 🎯 . You are also welcome to share fun-fact 😄 , new ideas 💡 , your learning goals ☑️.

We believe in collaborative efforts to support our community. We are running a learning platform which helps a newcomer to become master of tomorrow. 💯

GSoC and Outreachy applications are Open 🎉 🎉

Google summer of Code and Outreachy applications are currently ongoing
If you are an applicant to any of these programs, welcome to PublicLab 🎈 we are glad to have you ❤️ .

To Outreachy applicants:

• Please say hi here and introduce yourself if you have any questions you can ask here
• We encourage applicants to post a proposal on the PublicLab website too so as to can get feedback from fellow contributors and mentors, improve your proposal before you submit on the Outreachy website. Here are more details and a template for the proposal

To GsoC applicants:

• Please say hi and introduce yourself. If you have any questions you can ask here
• Kindly submit your proposal on the PublicLab website, more details and a template for drafting the proposal here

To Contributors and mentors, how to help:

If you have some time within the week, please open a fto and label it soc so that folks seeking to work with us through these programs can find ftos to get started on our various projects. You can also help with reviewing and answering questions from the applicants.

2020 Software Contributor Community Survey is ongoing 📄

Don't forget our contributor community survey is still open!
Survey ticket is here: #7406

Please give us your thoughts in this anonymous form -- we'll post the results at the end and we can all learn about ourselves! We'll keep it open until March 27, 2020 https://forms.gle/Z6J3Mrdszm9iFiuv9

This week's focus Issues

These are issues that are of high priority and requests from our
large community that use the software.

• publiclab/leaflet-blurred-location-display#98
• publiclab/leaflet-blurred-location-display#97

We will very much appreciate any help on these issues. Any contributor who is looking for issues to work on please consider taking a look at these. We will add a thank you message here in next week's check-in if you contribute to any of these. Thanks in advance 😄

Next Check-in

If you would like to open the next weekly check-in please comment below..I am glad to guide you if its your first time or have any questions.

Thanks everyone for making PL awesome and have a great week ahead 🎈

Hi all,
I'm writing in to report some steps that i followed on https://infragram.org/sandbox/?webgl=true while attempting to view the webcam feed from the #communitymicroscope via infragram.org while on my Chromebook:

• I clicked the camera button on the webpage and chose "Raw" and clicked Begin button.
• The screen remained black, showing no variation from turning a bright light on and off directly into the camera.
• I also tried the other "basic" modes, with the same result.

I am wondering if it will be possible to use infragram.org to view the microscope feeds on computers where downloading software is not feasible.

Thank you!

https://whatwebcando.today/wake-lock.html

Fyrd/caniuse#2623

https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Wake_Lock_API

Based on the scale data for #14, we should add a "metadata" module and some scale info when exporting, so on this line:

We also add something like:

,metadata{scale: '...'}

but we should think about how to express scale... is there some conventional formatting for scale data? Microns per pixel maybe?

Demo

User has to zoom in/out and scroll in order to see what the site is about.
Let's not forget that more than 50% of global traffic is from smartphones.

A responsive website is mandatory, not optional anymore :)

OR just say right click the image to save!

QnA should be in a panel for ease of the user.

To replicate error:
Load https://infragram.org/sandbox/index.html in Firefox, Chrome, or Safari on Mac.
Open any image.
Switch the Analysis dropdown to HSV.
Click "Run"

Error in Firefox 80.0.1:

Uncaught TypeError: options.processor.save_expressions_hsv is not a function
    save_infragrammar_expressions https://infragram.org/sandbox/dist/infragram.js:1606
    save_infragrammar_inputs https://infragram.org/sandbox/dist/infragram.js:1587
    Analysis https://infragram.org/sandbox/dist/infragram.js:1471
    jQuery 9
    Analysis https://infragram.org/sandbox/dist/infragram.js:1467
    Interface https://infragram.org/sandbox/dist/infragram.js:1613
    jQuery 13
infragram.js:1606:36

Error in Chrome 85.0.4183.83:

infragram.js:1606 Uncaught TypeError: options.processor.save_expressions_hsv is not a function
    at save_infragrammar_expressions (infragram.js:1606)
    at save_infragrammar_inputs (infragram.js:1587)
    at HTMLFormElement.<anonymous> (infragram.js:1471)
    at HTMLFormElement.dispatch (jquery.min.js:2)
    at HTMLFormElement.v.handle (jquery.min.js:2)
save_infragrammar_expressions @ infragram.js:1606
save_infragrammar_inputs @ infragram.js:1587
(anonymous) @ infragram.js:1471
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2

Error in Safari 13.0.5:

[Error] TypeError: options.processor.save_expressions_hsv is not a function. (In 'options.processor.save_expressions_hsv(args['h'], args['s'], args['v'])', 'options.processor.save_expressions_hsv' is undefined)
	save_infragrammar_expressions (infragram.js:1606)
	(anonymous function) (infragram.js:1471)
	dispatch (jquery.min.js:2:42529)

All running on MacOS 10.14.6

I realize this is not strictly a programming issue, but the instruction video at https://publiclab.org/wiki/infragram-sandbox does not match the functionality or the interface of the interactive at https://infragram.org/sandbox/index.html , and that makes it awful hard to figure out what's going on. Infragram keeps giving me black, red, or blue boxes instead of usefully colored images, and I can't tell whether the interactive is broken, whether its default settings are wrong, or whether I'm just somehow using it wrong when I select a red image and click on "Basic" under Red.

I've been wanting to run this in Google Cardboard, so you can view real-time as a kind of immersive experience. This would not be too complex, in theory; we could just put 2 canvases next to each other for a basic version.

I've attempted this very roughly in this PR: #42 but we'll need to modify the code to recognize multiple canvas elements, and run all our setup code on both. I'll highlight where this may need to happen.

A later version might try to intercept the construction of the 3d environment in WebGL and mirror it -- this could be higher performance -- but it would be more complex as well. So let's do the easy version first.

We'll want it to look kind of like this in full-screen mode, although of course not of a virtual roller coaster 😄

When trying to upload an image to Infragram nothing happens. I'm able to view through the camera fine. No dialog box opens or pop up is blocked when I press "upload image" in the toolbar. Same bug in safari and chrome.

A simple lighthouse audit will show that the current bootstrap framework does indeed:

• Use 99KBs than it should.
  

• Increases complete page load time by 4s.
  

Potentially using a new getUserMedia shim library?

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters

Maybe using https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

Code for this is here:

We can apparently also specify different resolutions!

{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

Let's do both!

Please describe the problem (or idea)

Begin now and Get help & learn more buttons are collapse to each other and also not responsive

What happened just before the problem occurred? Or what problem could this idea solve?

Screenshot 1

Screenshot 2

Screenshot 3

What did you expect to see that you didn't?

Please show us where to look

https://infragram.org

What's your PublicLab.org username?

dynamic_daksh

This can help us diagnose the issue:

Browser, version, and operating system

Google Chrome, Version 69.0.3497.100 (Official Build) (64-bit), Windows 10

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

##Modal Links are broken and takes to 404 page.

Solution :
These can be linked by

1. Infragram filter packs : https://store.publiclab.org/collections/featured-kits/products/infragram-diy-filter-pack?variant=1058088684
2. Webcam : https://store.publiclab.org/collections/featured-kits/products/infragram-pi-camera?variant=14249592029293

As this artical i.e Infragram Point & Shoot

3. Infragram Point & Shoot cameras: https://store.publiclab.org/collections/featured-kits/products/infragram-pi-camera?variant=14249592029293

@jywarren and @TildaDares can I work on this.

infragram.js? [sm]:831 [Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead. See https://www.chromestatus.com/features/5618491470118912 for more details.

https://www.chromestatus.com/features/5618491470118912

Currently. readme contains only little information which makes it difficult to new contributors to get clarrity of the project.

Inspiration for Readme can be taken from - https://github.com/publiclab/plots2/blob/master/README.md

Any help will be appreciated. Thanks!

While running the website, I came across this error

Though the favicon is present in the assets folder it is not linked to the page.

Solution:
link the favicon to the page.

I ran https://publiclab.github.io/infragram/ and was trying to see the working on this project by uploading an image in the upload an image button. But on clicking the button it isn't working.
I am using Google Chrome Browser and tried this on Opera as well but it seemed not to be working.

While trying to select the colorize dropdown items, the mouse cursor fails to hover over ‘Default colormap’ and ‘Stretched colormap’.

Planning this out...

1. clicking on a region (maybe later selecting a region by dragging...) and
2. filling out two coefficients for the reflectivity of the a. visible and b. infrared channels as described in this post

A calibration image might look like this (esp. if we had an overlay as i've doodled on it) and might even be of a printed sheet that you line up with the guidelines:

(looking at selection of targets in this post)

This could be repeated as many times as we'd like but we might start with 2 targets minimum as Ned mentioned in the linked post above. Starting with 2 targets is a good initial step because the values could be used to map (or stretch, see this code) rather than doing a linear regression. Just to take things one step at a time.

So for each of 2 points clicked on, we would have values as follows (data from this post):

But by clicking on the image, we've collected a matching set of data through this particular camera, so we can see how different it's reading of these targets is (here, i just made up some data):

Now, we can use the map() function above to adjust any value in the image, in two steps, one per channel:

1. every Visible pixel gets mapped from a range of 0.2-0.8 (see table above) to a range of 0.04748605-0.86696300
2. every Infrared pixel gets mapped from a range of 0.3-0.9 to a range of 0.05665055-0.90032700

(in a future version we could use a linear regression as Ned did, instead of just a simple map: https://github.com/Tom-Alexander/regression-js)

the visible and infrared values are then displayed and made usable in the usual NDVI equation of (B-R)/(B+R) (or equivalent)

Finally, this whole thing could be in a tray that opens above the image. Later, it could be used in Image Sequencer as a step like this:

https://sequencer.publiclab.org/examples/#steps=dynamic{red:r*0.8|green:g|blue:b*0.4|monochrome%20(fallback):r%20%2B%20g%20%2B%20b},ndvi{filter:red}

Steps to replicate:

• Open https://infragram.org/sandbox/index.html on Safari, Firefox, or Chrome on MacOS
• Click under "Source" to upload an image.
• At any later point, click the upload button again to pick a new image. Nothing will happen. No message is shown to the user, and nothing is printed to the console.

If the button is not intended to function twice, it should probably be set to disabled.

In this page there are some link's but they are only open same page it must be open new tab

https://paul.kinlan.me/pixel-4xl-infrared-sensor-via-getusermedia/

The current README file doesn't have a procedure for Installation of this project to run it locally.An installation setup should be written for helping the beginners run it locally.

On home page there is this link "browse them here"

that links to https://publiclab.org/tag/infragram-uploads but there are no posts with that tag...but I believe the link should be https://publiclab.org/tag/infragram-upload that has posts

Hello,
I heard a report today that the "upload image" button in infragram isn't currently working

We should figure out if this can be unified...

Padding to the left is unset i.e., 0

Solution is : Container padding should be removed.

Could need to refactor which getUserMedia shim we're using!

https://github.com/addyosmani/getUserMedia.js/ is what it was built on, but can check package.json to see the current version we're using!

https://www.npmjs.com/package/getusermedia-js

🆕🐥☝ First Timers Only.

This issue is reserved for people who never contributed to Open Source before. We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

About First Timers Only.

🤔 What you need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• 🙋 Claim this issue: Comment below.

  Once claimed we add you as contributor to this repository.

• 👌 Accept our invitation to this repository. Once accepted, assign yourself to this issue

• 📝 Update the file \src/ui/interface.js in the infragram repository (press the little pen Icon) and edit the line as shown below.

@@ -104,6 +104,7 @@ module.exports = function Interface(options) {
 
     $("#overlay-btn").click(function() {
       $("#overlay-container").toggle();
+      $("#overlay-controls-container").toggle();
       $("#overlay-btn").toggleClass("btn-success");
     });
 

You will also need to change this line to add the new overlay-controls-container id, so adding in id="overlay-controls-container" to the attributes:

• 💾 Commit your changes

• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can edit files directly in your browser

• 🏁 Done Ask in comments for a review :)

🤔❓ Questions

Leave a comment below!

This issue was created by First-Timers-Bot.

In concurrence to #91, it would be a good approach to recognize the fact that the video output is at the center of the infragram and stripping away all the unnecessary CSS/JS from around that should affect load times only positively. One way of doing the same is starting the landing page in 100% vh vw output (image/video) with infragram's default control panel fixed to the bottom of the page.

The same goes for mobile devices as well. This should considerably increase the UX, preventing constant scrolls and mobile design bugs once and for all.

Self-explanatory. Picked from https://github.com/p-v-o-s/infragram-js/blob/a4a2bacff7202342a68909d58dffbba3f5711515/todo.txt#L9