i'm using coffeescript with meteor and i think i'm having a problem with scoping.
my app draws a floorplan and i'm trying to overlay a heatmap on top of it (using h337).
#heatmap = null
initHeatMap = ( layer_name ) ->
console.log 'creating heatmap on %s', layer_name
h337.create
container: document.querySelector layer_name
gradient:
0.2: 'green'
0.5: 'orange'
0.8: 'red'
radius: 11
maxOpacity: 1.0
minOpacity: 0.6
blur: 0.6
drawHeatMap = ( metric ) ->
#heatmap.setData
max: 50
min: 0
data: regenData metric
redraw = ( metric ) ->
console.log 'redraw: %o', #heatmap
drawHeatMap metric
Template.sensor_list.rendered = () ->
#heatmap = initHeatMap '.heatmap'
console.log 'created map: %o', #heatmap
redraw 'temp'
basically, what i see from the chrome developer tools console is:
creating heatmap on .heatmap
created map: Heatmap
redraw: null
why is redraw() claiming that #heatmap is still null?
coffeescript.org states that:
As a shortcut for this.property, you can use #property.
Assuming this in coffeescript is like this in javascript, this is the function context, and will be different for each function. You never actually set the variable you created in global scope as it was always masked by the function context represented by the this object.
Try changing #heatmap (everywhere) to heatmap and see if that resolves it.
Related
I would like to merge a collection of images (unknown amount) of a polygon into a single image and then export it to google drive for analysis in qgis. This is the code I have tried to us
// Define the AOI
var aoi = XXX;
Map.centerObject(aoi);
Map.setOptions('SATELLITE');
var dataset = ee.ImageCollection('UQ/murray/Intertidal/v1_1/global_intertidal');
var visualization = {
bands: ['classification'],
min: 0.0,
max: 1.0,
palette: ['0000FF']
};
Map.addLayer(dataset, visualization, 'Intertidal areas');
I have tried the following code to export the image, but obviously because I am viewing a collection of images, I cannot export a single image of the mosaic
// Export to base Google Drive
Export.image.toDrive({ image: FraserRiver , description: 'exportToDrive', fileNamePrefix: ' FraserRiver', scale: 30, region: aoi, maxPixels: 800000000000 });
This code simply extracts all bands within an image collection and put them in one single image (got the idea from https://www.nature.com/articles/s41597-021-00827-9):
// Function to merge bands
var mergeBands = function(image, previous) {
return ee.Image(previous).addBands(image);
};
// Merge bands
var image = ee.Image(mycollection.iterate(mergeBands, ee.Image([])))
I'm new to use Google Earth Engine and trying to export satellite image dataset to my google drive folder. But I'm getting the error below.
Error: Exported bands must have compatible data types; found inconsistent types: Float32 and Byte.
This is my code.
var dataset = ee.ImageCollection('FIRMS')
.filterDate('2021-04-01', '2021-11-10')
.filterBounds(roi)
.sort('CLOUD_COVER')
.first()
var fires = dataset.select('T21');
var firesVis = {
min: 325.0,
max: 400.0
};
Map.addLayer(fires.clip(roi), firesVis, 'California Fires 2021');
Map.centerObject(roi,15);
// Export data to google drive
Export.image.toDrive({
image : fires,
description : 'California_wildfires_2021',
scale : 30,
region : roi,
maxPixels : 1e13
})
Any help is appreciated.
Also please let me know how to convert the tiff files to images(png/jpeg/jpg).
Now, add any shapefile or roi and try it.
In the middle of the code their I had used max(),there you can use mean(), median() and min() etc.,
here is the code:
var dataset = ee.ImageCollection('FIRMS').filter(
ee.Filter.date('2021-04-01', '2021-11-10'));
var fires = dataset.select('T21').max().clip(shp);
var firesVis = {
min: 325.0,
max: 400.0,
palette: ['red', 'orange', 'yellow'],
};
Map.centerObject(shp, 6);
Map.addLayer(fires, firesVis, 'Fires');
// Export data to google drive
Export.image.toDrive({
image : fires,
description : 'California_wildfires_2021',
scale : 1000,
region : shp,
maxPixels : 1e13
});
I have some code to export an LS8 image to Drive using GEE. Somehow, the resolution of the image seems to be lower (larger pixels) than what I am able to see on the browser. How can I increase the resolution? This is the code I´ve been using, with two different options.
I attempted to use .resample() as a solution but it produced a single band image that did not look good.
geometry2 = /* color: #57d64b */ee.Geometry.Polygon(
[[[-78.2812086867645, 2.3386717366200585],
[-77.56984394067075, 2.3729749945579948],
[-77.72227924340513, 2.776314152654142],
[-78.20842426293638, 2.725560942159387]]]);
function maskL8sr(image)
{
// Bits 3 and 5 are cloud shadow and cloud, respectively.
var cloudShadowBitMask = ee.Number(2).pow(3).int();
var cloudsBitMask = ee.Number(2).pow(5).int();
// Get the pixel QA band.
var qa = image.select('pixel_qa');
// Both flags should be set to zero, indicating clear conditions.
var mask = qa.bitwiseAnd(cloudShadowBitMask).eq(0)
.and(qa.bitwiseAnd(cloudsBitMask).eq(0));
// Return the masked image, scaled to TOA reflectance, without the QA bands.
return image.updateMask(mask).divide(10000)
.select("B[0-9]*")
.copyProperties(image, ["system:time_start"]);
}
// Map the function over one year of data.
var collection = ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
.filterDate('2016-04-01', '2018-7-31')
.map(maskL8sr)
var composite = collection.median();
var VIS = {bands: ['B5', 'B6', 'B4'], min: 0, max: 0.47};
// Display the results.
Map.addLayer(composite,VIS ,"compt2");
var params ={
crs: 'EPSG:4326',
maxPixels: 1e12,
region:geometry2
}
Export.image(composite,'Guapi',params);
Export.image.toDrive({
image: composite,
description: 'Guapi',
scale: 30,
region: geometry2,
maxPixels: 1000000000
});
This bit of Code here creates a scrollview of buttons to allow me select from a list of different "tickets"
SearchResultButton(Button(text=str(Datarray2[i]),id=str(Datarray2[i]),on_press=self.Pressbtn ))
self.ids.SearchResult.add_widget(SearchResultButton)
From there it opens this function, which should set a variable (In this case "UpdateTicketNum") which will be used in another function to set the label text in another screen.
def Pressbtn(self, SearchResultButton):
global UpdateTicket
UpdateTicket = OPENTicket
woo = SearchResultButton.text
print(SearchResultButton.text)
wow = [blank.strip() for blank in woo.split(',')]
print("\n\n\n\n")
global UpdateTicketNum
UpdateTicketNum = (wow[0])
self.manager.get_screen('UpdateTicket').UpdateOpen()
At this point it opens up the sqlite DB and double checks that the TicketNumber is valid. The issue comes in when trying to access the label inside the kv build
def UpdateOpen(self):
print("TESTSETST")
conn = sqlite3.connect('TicketData.db', timeout=10)
UD = conn.cursor()
UD.execute('SELECT TicketNumber FROM TicketData WHERE TicketNumber = ?',(UpdateTicketNum,))
tips = UD.fetchone()
print(tips[0])
tipsy = tips[0]
UpdatedLabelTexT = tipsy
sm.current=('UpdateTicket')
UpdateTicket.ids.UpdateLabels['text']=(UpdatedLabelTexT)
The UpdateTicket.ids.UpdateLabels['text']=UpdatedLabelText] field always claims to be a property of the scrollview buttons even though I am initializing it inside another class, and with different parameters. apologies if this question is poorly formatted. but 3 days of dying trying to figure this out and I snapped.
Here is the bit in KV
<UpdateTicket>
name: 'UpdateTicket'
on_enter:
root.UpdateOpen()
orientation: "vertical"
FloatLayout:
canvas.before:
Color:
rgba: .0, .6, 1, 1
Rectangle:
pos: self.pos
size: self.size
source: "lights.jpg"
Label:
id: UpdateLabels
text: "filler"
multiline: False
size_hint: (None, None)
size: (root.width/5,root.height/20)
pos_hint:{'center_x': .5,'center_y': .5 }
and how I initialize the screen
sm.add_widget(UpdateTicket(name='UpdateTicket'))
I found the solution that worked for me. when first initializing the app
class SampleApp(App)
return sm(to build the application)
I needed to replace that return SM with
global root
return sm
root = ScreenManager()
return root
And that appeared to fix my issue. thanks for reading
Plotly allows you to display text fields when hovering over a point on a scatterplot. Is it possible to instead display an image associated with each point when the user hovers over or clicks on it? I am mostly just using the web interface, but I could instead push my ggplot from R.
Unfortunately, there is no easy way to display images on hover on plotly graphs at the moment.
If you are willing to learn some javascript, plotly's embed API allows you to customize hover (as well as click) interactivity.
Here is an example of a custom hover interaction showing images on top of a plotly graph. The javascript source code can be found here.
Images on hover is now available by Plotly lib. Here is a sample:
from dash import Dash, dcc, html, Input, Output, no_update
import plotly.graph_objects as go
import pandas as pd
# Small molcule drugbank dataset
# Source: https://raw.githubusercontent.com/plotly/dash-sample-apps/main/apps/dash-drug-discovery/data/small_molecule_drugbank.csv'
data_path = 'datasets/small_molecule_drugbank.csv'
df = pd.read_csv(data_path, header=0, index_col=0)
fig = go.Figure(data=[
go.Scatter(
x=df["LOGP"],
y=df["PKA"],
mode="markers",
marker=dict(
colorscale='viridis',
color=df["MW"],
size=df["MW"],
colorbar={"title": "Molecular<br>Weight"},
line={"color": "#444"},
reversescale=True,
sizeref=45,
sizemode="diameter",
opacity=0.8,
)
)
])
# turn off native plotly.js hover effects - make sure to use
# hoverinfo="none" rather than "skip" which also halts events.
fig.update_traces(hoverinfo="none", hovertemplate=None)
fig.update_layout(
xaxis=dict(title='Log P'),
yaxis=dict(title='pkA'),
plot_bgcolor='rgba(255,255,255,0.1)'
)
app = Dash(__name__)
app.layout = html.Div([
dcc.Graph(id="graph-basic-2", figure=fig, clear_on_unhover=True),
dcc.Tooltip(id="graph-tooltip"),
])
#app.callback(
Output("graph-tooltip", "show"),
Output("graph-tooltip", "bbox"),
Output("graph-tooltip", "children"),
Input("graph-basic-2", "hoverData"),
)
def display_hover(hoverData):
if hoverData is None:
return False, no_update, no_update
# demo only shows the first point, but other points may also be available
pt = hoverData["points"][0]
bbox = pt["bbox"]
num = pt["pointNumber"]
df_row = df.iloc[num]
img_src = df_row['IMG_URL']
name = df_row['NAME']
form = df_row['FORM']
desc = df_row['DESC']
if len(desc) > 300:
desc = desc[:100] + '...'
children = [
html.Div([
html.Img(src=img_src, style={"width": "100%"}),
html.H2(f"{name}", style={"color": "darkblue"}),
html.P(f"{form}"),
html.P(f"{desc}"),
], style={'width': '200px', 'white-space': 'normal'})
]
return True, bbox, children
if __name__ == "__main__":
app.run_server(debug=True)
More info: https://dash.plotly.com/dash-core-components/tooltip