publiclab / infragram Goto Github PK
View Code? Open in Web Editor NEWA minimal core of the Infragram.org project in JavaScript
Home Page: https://infragram.org/sandbox/
License: GNU General Public License v2.0
A minimal core of the Infragram.org project in JavaScript
Home Page: https://infragram.org/sandbox/
License: GNU General Public License v2.0
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?
Self-explanatory. Picked from https://github.com/p-v-o-s/infragram-js/blob/a4a2bacff7202342a68909d58dffbba3f5711515/todo.txt#L9
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
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 π
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:
Begin
button.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!
Create a sample docker yaml in order to get an isolated Infragram environment to work on.
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:
Line 88 in bfbae00
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?
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
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
Line 162 in 7b0567b
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 π
Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.
π 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:
Line 157 in cab64f4
πΎ Commit your changes
π Start a Pull Request. There are two ways how you can start a pull request:
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.
Leave a comment below!
This issue was created by First-Timers-Bot.
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!
Building on publiclab/spectral-workbench.js#173
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!
Line 29 in bbbe71d
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
QnA should be in a panel for ease of the user.
Hello,
I heard a report today that the "upload image" button in infragram isn't currently working
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!
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!
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. π―
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:
To GsoC applicants:
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.
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
These are issues that are of high priority and requests from our
large community that use the software.
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 π
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 π
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:
Lines 30 to 41 in f6f7919
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!
##Modal Links are broken and takes to 404 page.
Solution :
These can be linked by
As this artical i.e Infragram Point & Shoot
@jywarren and @TildaDares can I work on this.
Steps to replicate:
If the button is not intended to function twice, it should probably be set to disabled.
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!
Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.
π 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:
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.
You can also edit files directly in your browser and open a pull request from there.
Leave a comment below!
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!
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.
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 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
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.
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
Steps to reproduce:
Based on the scale data for #14, we should add a "metadata" module and some scale info when exporting, so on this line:
Line 210 in ba9f1a8
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?
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.
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.
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 π
Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.
π 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:
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.
Leave a comment below!
This issue was created by First-Timers-Bot.
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
Line 12 in d999550
We should figure out if this can be unified...
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
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.
Planning this out...
visible
and b. infrared
channels as described in this postA 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):
Visible reflectivity | Infrared reflectivity | |
---|---|---|
Target paper 1 (printer paper) | 0.86696300 | 0.90032700 |
Target paper 1 (tar paper) | 0.04748605 | 0.05665055 |
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):
Visible reflectivity | Visible pixels in photo | Infrared reflectivity | Infrared pixels in photo | |
---|---|---|---|---|
Target paper 1 (printer paper) | 0.86696300 | 0.8 | 0.90032700 | 0.9 |
Target paper 1 (tar paper) | 0.04748605 | 0.2 | 0.05665055 | 0.3 |
Now, we can use the map()
function above to adjust any value in the image, in two steps, one per channel:
0.2-0.8
(see table above) to a range of 0.04748605-0.86696300
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:
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?
What did you expect to see that you didn't?
dynamic_daksh
This can help us diagnose the issue:
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!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.