Related
We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
var label = new Konva.Label({
"id": "assetLabel_62c280d6f82f05238c2a8779",
"x": 329.3701840204836,
"y": 78.69399520035239,
"width": 50,
"height": 200,
"draggable": true
});
// It plays the role of background for role. If anything regarding to appearance of the
// label should be changed than Konva.Tag will be place to change.
var tag = new Konva.Tag({
"fill": "#FFFF60",
"stroke": "black",
"strokeWidth": 0.8,
"cornerRadius": 4,
"shadowBlur": 6,
"shadowColor": "blue",
"shadowOpacity": 0.7
});
// Text displayed on the label.
var text = new Konva.Text({
"padding": 5,
"fill": "black",
"align": "left",
"fontFamily": "Open Sans",
"fontSize": "16",
"text": "M:1 | C:0 | T:1\nDeviceType: Mono SFP",
"width": "auto",
"height": "auto"
});
//clubbing labels together #important to club them together before using the label
// to avoid issues regarding to dimension.
label.add(tag).add(text);
<script src="https://unpkg.com/konva#8/konva.min.js"></script>
We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
Please find the code snippet :
self.label = new Konva.Label({
id: ASSET_LABEL + assetData.properties._id,
x: assetData.properties.labelCoordinates.x,
y: assetData.properties.labelCoordinates.y,
draggable: true
});
self.tag = new Konva.Tag({
fill: config.color || Color.DARK_YELLOW,
stroke: Color.BLACK,
strokeWidth: LABEL_STROKE_WIDTH,
cornerRadius: CORNER_RADIUS,
shadowBlur: SHADOW_BLUR,
shadowColor: Color.BLUE,
shadowOpacity: SHADOW_OPACITY
});
self.text = new Konva.Text({
padding: 5,
fill: Color.BLACK,
align: DEFAULT_TEXT_ALIGNMENT,
fontFamily: config.fontFamily || DEFAULT_FONT_FAMILY,
fontSize: config.fontSize || DEFAULT_FONT_SIZE,
text: displayText
});
self.label.add(self.tag).add(self.text);
I would like to use JS classes from a cdn within a react component.
This is the cdn: https://cdn.jsdelivr.net/gh/Mikhus/canvas-gauges#gh-pages/download/2.1.7/all/gauge.min.js
I have already written the vanillaJS Code, that works well, however I have not idea how
to implement this with react.
The object that is drawn into a canvas is first instantiated with a set of different values,
then it is drawn on the canvas, then you can access the values from outside. I works well with vanillaJS!!
CDN or local file:
<script src="./lib/canvas-gauges.min.js"></script>
html canvas:
<canvas
id="barometer"
</canvas>
instantiating object and drawing it on the canvas:
const barometer = new RadialGauge({
renderTo: canvas,
title: 'hPa',
width: 400,
height: 400,
units: `${location}`,
minValue: 960,
maxValue: 1060,
majorTicks: [
"",
"970",
"980",
"990",
"1000",
"1010",
"1020",
"1030",
"1040",
"1050",
"",
],
minorTicks: 10,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights: [
{
"from": 960,
"to": 1005,
"color": "rgba(0,0,255,0.8)"
},
{
"from": 1005,
"to": 1023,
"color": "rgba(0, 151, 19, 0.3)"
},
{
"from": 1023,
"to": 1060,
"color": "rgba(241, 90, 34, 0.9)"
}
],
valueInt: 1,
valueDec: 0,
colorPlate: "beige",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorNeedleShadowUp: true,
colorNeedleShadowDown: true,
colorNeedle: "#f59042",
colorNeedleEnd: "#f59042",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: false,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 20,
colorBorderOuter: "silver",
colorBorderOuterEnd: "black",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Arial",
fontTitle: "Arial",
fontUnits: "Arial",
fontValue: "Arial",
fontValueStyle: "italic",
fontNumbersSize: 16,
// fontNumbersStyle: "italic",
fontNumbersWeight: "bold",
fontTitleSize: 16,
fontUnitsSize: 16,
fontValueSize: 16,
animatedValue: true,
});
barometer.draw();
Then the values of that object can be accessed simply like this:
barometer.value = 1024;
Now, I would like to do the same thing with react!
There is also a node module called react-canvas-gauges, here I can make an import like this: import { RadialGauge, LinearGauge} from "react-canvas-gauges";
I can render then:
render() {
<RadialGauge
title= "hPa"
width = "400"... />
}
The point is, I figured out that I must update the value from "OUTSIDE", instantiating the object, drawing it on the canvas and then updating the value, and that is not possible (or against the philosophy of react) doing this with these JSX Components from "OUTSIDE"
Trying to get a TradingView widget into react but nothing is being displayed right now.
I ve tried a couple of different syntaxes following this question: how to to insert TradingView widget into react js which is in script tag link: https://www.tradingview.com/widget/market-overview/
but no luck so far
This is the widget I want to add:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tv-medium-widget"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">Bitcoin</span> <span class="blue-text">and</span> <span class="blue-text">Ethereum Quotes</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.MediumWidget(
{
"container_id": "tv-medium-widget",
"symbols": [
[
"Bitcoin",
"BITMEX:XBTUSD|1m"
],
[
"Ethereum",
"BITMEX:ETHUSD|1m"
]
],
"greyText": "Quotes by",
"gridLineColor": "rgba(182, 182, 182, 0.65)",
"fontColor": "rgba(0, 0, 0, 1)",
"underLineColor": "rgba(60, 120, 216, 1)",
"trendLineColor": "rgba(60, 120, 216, 1)",
"width": "100%",
"height": "100%",
"locale": "en"
}
);
</script>
</div>
<!-- TradingView Widget END -->
and this is what I have done thus far:
// Render a component to display the crypto-currency prices
class MenuCard extends Component {
componentDidMount() {
const script = document.createElement('script');
script.src = 'https://s3.tradingview.com/tv.js'
script.async = false;
script.innerHTML = JSON.stringify({
"container_id": "tv-medium-widget",
"symbols": [
[
"Bitcoin",
"BITMEX:XBTUSD|1m"
],
[
"Ethereum",
"BITMEX:ETHUSD|1m"
]
],
"greyText": "Quotes by",
"gridLineColor": "rgba(182, 182, 182, 0.65)",
"fontColor": "rgba(0, 0, 0, 1)",
"underLineColor": "rgba(60, 120, 216, 1)",
"trendLineColor": "rgba(60, 120, 216, 1)",
"width": "100%",
"height": "100%",
"locale": "en"
})
document.getElementById("myContainer").appendChild(script);
}
render() {
return(
<div className="canvas_block" id="myContainer">
<div className="canvas_block_img" >
<div className="tradingview-widget-container">
</div>
</div>
</div>
)
}
}
MenuCard.defaultProps = {
MenuCard: []
}
export default MenuCard;
Currently nothing is being displayed in the screen so the ideal scenario would involve getting the widget to display.
Use https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js as the script source.
Also, following the React documentation, you need to create a ref to access the DOM node like in the code below:
class MenuCard extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
const script = document.createElement('script');
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
script.async = false;
script.innerHTML = JSON.stringify({
"container_id": "tv-medium-widget",
"symbols": [
[
"Bitcoin",
"BITMEX:XBTUSD|1m"
],
[
"Ethereum",
"BITMEX:ETHUSD|1m"
]
],
"greyText": "Quotes by",
"gridLineColor": "rgba(182, 182, 182, 0.65)",
"fontColor": "rgba(0, 0, 0, 1)",
"underLineColor": "rgba(60, 120, 216, 1)",
"trendLineColor": "rgba(60, 120, 216, 1)",
"width": "100%",
"height": "100%",
"locale": "en"
})
this.myRef.current.appendChild(script);
}
render() {
return(
<div className="tradingview-widget-container" ref={this.myRef}>
<div className="tradingview-widget-container__widget"></div>
</div>
);
}
}
Here's a working example
Add the script to the end of HTML file.
<body>
...
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</body>
And modify your code as-
// Render a component to display the crypto-currency prices
class MenuCard extends Component {
componentDidMount() {
const script = document.createElement('script');
script.innerHTML = new window.TradingView.MediumWidget({
"container_id": "tv-medium-widget",
"symbols": [
[
"Bitcoin",
"BITMEX:XBTUSD|1m"
],
[
"Ethereum",
"BITMEX:ETHUSD|1m"
]
],
"greyText": "Quotes by",
"gridLineColor": "rgba(182, 182, 182, 0.65)",
"fontColor": "rgba(0, 0, 0, 1)",
"underLineColor": "rgba(60, 120, 216, 1)",
"trendLineColor": "rgba(60, 120, 216, 1)",
"width": "100%",
"height": "100%",
"locale": "en"
})
document.getElementById("myContainer").appendChild(script);
}
render() {
return(
<div className="canvas_block" id="myContainer">
<div className="canvas_block_img" >
<div className="tradingview-widget-container">
</div>
</div>
</div>
)
}
}
MenuCard.defaultProps = {
MenuCard: []
}
export default MenuCard;
Thank you for your time.
I can't get the Needle on the Gauge to move I used the following and no luck.
In the serial monitor I can see the Value of adc change as I move the Potentiometer.in the Web server address 192.168.4.1 I can see the gauge but no movement of the needle as I move the pot.
In the HTML There are 2 scripts. is that put together wrong?
Is there a better way?
<!doctype html>
<html>
<head>
<title>Testing Gauges</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas id="gauge-ps"></canvas>
<script>
setInterval(function() {
// Gets ADC value at every one second
GetADC();
}, 1000);
function GetADC() {
var xhttp = new XMLHttpRequest();
var adc=0;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
adc = Number(this.responseText);
}
};
xhttp.open("GET", "/getADC", false);
xhttp.send();
}
</script>
<script>
var gaugePS = new RadialGauge({
renderTo: 'gauge-ps',
width: 400,
height: 400,
units: 'Temp',
minValue: 0,
maxValue: 100,
majorTicks: [
'0','10','20','30','40','50','60','70','80','90','100'
],
minorTicks: 2,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights : [
{ from : 45, to : 80, color : 'rgba(78, 78, 76, 0.5)' },
{ from : 80, to : 100, color : 'rgba(225, 7, 23, 0.75)' }
],
valueInt: 1,
valueDec: 0,
colorPlate: "#fff",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorValueText: "#000",
colorValueBoxRect: "#fff",
colorValueBoxRectEnd: "#fff",
colorValueBoxBackground: "#fff",
colorValueBoxShadow: false,
colorValueTextShadow: false,
colorNeedleShadowUp: true,
colorNeedleShadowDown: false,
colorNeedle: "rgba(200, 50, 50, .75)",
colorNeedleEnd: "rgba(200, 50, 50, .75)",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: true,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 5,
colorBorderOuter: "#fafafa",
colorBorderOuterEnd: "#cdcdcd",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Verdana",
fontTitle: "Verdana",
fontUnits: "Verdana",
fontValue: "Led",
fontValueStyle: 'italic',
fontNumbersSize: 20,
fontNumbersStyle: 'italic',
fontNumbersWeight: 'bold',
fontTitleSize: 24,
fontUnitsSize: 22,
fontValueSize: 50,
animatedValue: true
});
gaugePS.draw();
gaugePS.value = "adc" ;
</script>
</body>
</html>
Add an HTTP endpoint for the browser to respond with the latest reading.
First add a handler on the route /getADC:
// declare handleAdcPath before this snippet
server.on("/getADC", handleAdcPath);
Then implement the handler:
void handleAdcPath()
{
auto requestMethod = server.method();
if (requestMethod == HTTP_GET)
{
server.send(200, "text/plain", getAdc());
}
}
Where getAdc has been declared before the snippet above. e.g.
int getAdc()
{
return analogRead(A0);
}
Using python I am trying to build a map with markers using Folium. This is working fine, however now I've started to try and add plot.ly graphs into the map which doesn't work well. Is it impossible to have javascript inside leaflets (Folium) popups?
The js code which is in the html file is shown below:
var marker_7ecf53df703f455c9b8e9342784a4fde = L.marker([-30.0,31.25], {
icon: new L.Icon.Default()
}
).addTo(map_698b07e412264d16ab4a7628d18d6a7a);
var popup_d63d578364d04568bda1b68bc0a870d7 = L.popup({maxWidth: '300'});
var html_deaec1fcc80d483faff605dcfa6691ff = $('<div id="html_deaec1fcc80d483faff605dcfa6691ff" style="width: 100.0%; height: 100.0%;"><div id="5be3c360-6f61-47fc-af22-c43d8a2c16ed" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("5be3c360-6f61-47fc-af22-c43d8a2c16ed", [{"marker": {"color": "rgb(106,81,163)"}, "r": [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5], "type": "area", "name": "11-14 m/s", "t": [0, 45, 90, 135, 180, 225, 270, 315]}], {"radialaxis": {"ticksuffix": "%"}, "title": "Wind Speed Distribution in Laurel, NE", "font": {"size": 16}, "orientation": 270, "legend": {"font": {"size": 16}}}, {"linkText": "Export to plot.ly", "showLink": true})</script></div>')[0];
popup_d63d578364d04568bda1b68bc0a870d7.setContent(html_deaec1fcc80d483faff605dcfa6691ff);
marker_7ecf53df703f455c9b8e9342784a4fde.bindPopup(popup_d63d578364d04568bda1b68bc0a870d7);
I include the popups like such:
for rowNum, rowValues in data.iterrows():
popup = folium.Html(polarHtml, script=True) # polarHtml is the html
folium.Marker([rowValues['latitude'], rowValues['longitude']], popup=folium.Popup(popup)).add_to(map_osm)
The map works fine if I just use simple HTML inside the popups. Does anybody know where this goes wrong?
I did "solve" it in the end. Although I am not a big fan of IFrames I ended up combining folium.HTML and folium.IFrame like so:
folium.Popup(folium.Html('aa<br>'+folium.IFrame(polarHtml, width='410px', height='410px').render(), script=True), max_width=2650)