I'm trying to take an image from a phone and then put it through Watson Visual Recognition on Node-Red.
I've been loading my URL on my phone, and it's able to take an image, but then instantly crashes.
Does anyone have any experience in this? Thanks
My node-red flow is here
[{"id":"d2139149.736cb","type":"visual-recognition-v3","z":"12c7584.82dbca8","name":"Classify Meter","apikey":"","image-feature":"classifyImage","lang":"en","x":652.107177734375,"y":757.9999923706055,"wires":[["603c48c7.3144f8","8f4f26d2.549338","a862f46a.96305"]]},{"id":"4a935442.0b7efc","type":"http in","z":"12c7584.82dbca8","name":"","url":"/recophone","method":"get","upload":false,"swaggerDoc":"","x":115,"y":733.4404983520508,"wires":[["f235ab46.9552a8"]]},{"id":"1c640d2d.20b8b3","type":"http response","z":"12c7584.82dbca8","name":"HTTP Response","statusCode":"","headers":{},"x":1097.33349609375,"y":719.3928298950195,"wires":[]},{"id":"f235ab46.9552a8","type":"switch","z":"12c7584.82dbca8","name":"Check Url","property":"payload.imageurl","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"false","outputs":2,"x":311.5714111328125,"y":727.4404907226562,"wires":[["7de01baf.d96a2c"],["9b629cc.7379fe"]]},{"id":"603c48c7.3144f8","type":"template","z":"12c7584.82dbca8","name":"Report","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n<head><title>Watson Visual Recognition on Node-RED</title></head>\n<style> \nbody {background-color: white;}\nh1 {text-align: center;}\nh2 {color: black; text-align: center; font-family: verdana; font-size: 30px;}\np {color:black; text-align: center; font-family: verdana; font-size: 15px;}\ntable {color:black; text-align: center; font-family: verdana; font-size: 15px;}\nform {color:black; text-align: center; font-family: verdana; font-size: 15px;}\n</style>\n<body>\n<h1><img src=\"http://www.rousseau.com.pt/imagens/estudos/IBM_logo_blue_thumb1.png\">\n<img src=\"https://images.reevoo.com/retailers/Center/NPOWR/brand/260x200.png\"> </h1>\n<h2>Node-RED Watson Visual Recognition output</h2>\n<p>Analyzed image: {{payload}}<br/><img src=\"{{payload}}\" height='100'/></p>\n<table border='1' align=\"center\"> \n <thead><tr><th>Name</th><th>Score</th></tr></thead>\n{{#result.images.0.classifiers.0.classes}}\n <tr><td><b>{{class}}</b></td><td><i>{{score}}</i></td></tr>\n{{/result.images.0.classifiers.0.classes}}\n</table>\n<form action=\"{{req._parsedUrl.pathname}}\">\n <input type=\"submit\" value=\"Try again\"/>\n</form>\n</body>\n</html>","x":903.7618408203125,"y":756.726203918457,"wires":[["1c640d2d.20b8b3"]]},{"id":"9b629cc.7379fe","type":"change","z":"12c7584.82dbca8","name":"Convert Url","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.imageurl","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":459.33343505859375,"y":757.2500228881836,"wires":[["d2139149.736cb"]]},{"id":"8f4f26d2.549338","type":"function","z":"12c7584.82dbca8","name":"get labels","func":"//var labels = msg.result.images[0].classifiers[0].classes;\nvar confidence = msg.result.images[0].classifiers[0].classes;\n//msg.payload = labels.map(function(i){\n // return i.class;\nmsg.payload = confidence.map(function(i){\nreturn i.class + \" \" + i.score;\n//msg.payload = confidence.map(function(i){\n //return i.score;\n \n});\nreturn msg;","outputs":1,"noerr":0,"x":897.66650390625,"y":795.1071243286133,"wires":[["e10c122c.626fd"]]},{"id":"e10c122c.626fd","type":"debug","z":"12c7584.82dbca8","name":"","active":true,"console":"false","complete":"payload","x":1082.428466796875,"y":791.726203918457,"wires":[]},{"id":"a862f46a.96305","type":"debug","z":"12c7584.82dbca8","name":"","active":false,"console":"false","complete":"result","x":901.3629150390625,"y":832.3452758789062,"wires":[]},{"id":"df542a47.1a7088","type":"inject","z":"12c7584.82dbca8","name":"URL","topic":"","payload":"http://visual-recognition-demo.mybluemix.net/images/samples/2.jpg","payloadType":"str","repeat":"","crontab":"","once":false,"x":474.73809814453125,"y":795.75,"wires":[["d2139149.736cb"]]},{"id":"7de01baf.d96a2c","type":"template","z":"12c7584.82dbca8","name":"File UploadGet Image URL","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n<head>\n <style>\nbody {background-color: white;}\nh1 {text-align: center;}\nh2 {color: black; text-align: center; font-family: verdana; font-size: 30px;}\nh3 {color:black; text-align: center; font-family: verdana; font-size: 15px;}\nform {color:black; text-align: center; font-family: verdana; font-size: 15px;}\n</style>\n<title>Npower Meter Watson Visual Recognition font-family: \"Playfair Display\", serif;\nfont-size: 32px;text-align: left; </title> </head>\n<body>\n<h1> <img src=\"http://www.rousseau.com.pt/imagens/estudos/IBM_logo_blue_thumb1.png\">\n<img src=\"https://images.reevoo.com/retailers/Center/NPOWR/brand/260x200.png\"> </h1> \n \n <h2> Welcome to this demo on identifying Meter Issues via images </h2>\n <h3> Select an image URL</h3>\n<form action=\"{{req._parsedUrl.pathname}}\">\n //Code for taking picture from phone\n<form action=\"/action_page.php\">\n <input type=\"file\" name=\"pic\" accept=\"image/*\">\n <input type=\"submit\">\n <img src=\"http://static.flickr.com/3087/2648843542_3101f132ec.jpg\" height='200'/>\n <img src=\"http://static.flickr.com/3281/2719178040_e80447902d.jpg\" height='200'/>\n <img src=\"http://static.flickr.com/2308/2218597585_410d3c9148.jpg\" height='200'/>\n <img src=\"http://static.flickr.com/3072/2439552803_ed8b7d6ab1.jpg\" height='200'/>\n<br/><b>Copy above image location URL or enter any image URL:</b><br/>\n <input type=\"text\" name=\"imageurl\"/>\n <input type=\"submit\" value=\"Analyze\"/>\n</form>\n</body>\n</html>\n","x":843.5714111328125,"y":716.5833435058594,"wires":[["1c640d2d.20b8b3"]]},{"id":"7bd12438.024544","type":"comment","z":"12c7584.82dbca8","name":"Phone Upload","info":"","x":110,"y":682,"wires":[]}]
You can use the Camera node that is included in the node-red-contrib-browser-utils package.
To install it either run
npm install node-red-contrib-browser-utils
or go your Node-red instance -> Menu (top-right) -> Manage palette -> Install -> Search for node-red-contrib-browser utils
More info on the NPM registry page
Hi Need to select "New South Wales" using By.xpath() any suggestions please?
This is a reactjs page jedwatson.github.io/react-select
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2--value">
<div class="Select-value State-NSW">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2--value-item">New South Wales</span>
</div>
<div class="Select-input" style="display: inline-block;">
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-2--value" value="" style="width: 5px; box-sizing: content-box;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: normal;"></div>
</div>
</span>
<span class="Select-clear-zone" title="Clear value" aria-label="Clear value">
<span class="Select-clear">×</span>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
Tried with the below code without success
driver.findElement(By.xpath("//input[#role='combobox'][#value='New York"']")).click();;
Below exception was observed
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//input[#role='combobox'][#value='New York']"}
(Session info: chrome=59.0.3071.86)
Please follow the below step to select your desired element
Click on the down arrow of dropdown
Select the desired option
Here is the code for same :
driver.findElement(By.xpath("//h3[contains(text(),'States')]/..//span[#class='Select-arrow']")).click();
driver.findElement(By.id("react-select-2--option-1")).click();
Updated
Use the below method to select the value dynamically based on text :
public void selectCombo(String valueText)
{
driver.findElement(By.xpath("//h3[contains(text(),'States')]/..//span[#class='Select-arrow']")).click();
WebElement dropdownValue = driver.findElement(By.xpath("//div[contains(text(),'"+valueText+"')]"));
dropdownValue.click();
}
Call this method from your code and pass the value which you want to select
e.g.
new TestClass().selectCombo("Tasmania");
You can try with the xpath //*[#role="option" and text()='New South Wales']
I am looking for Tabs displayed top to bottom with tab navigation on the left. Is there anyway this can be achieved in Angular Material library?
This codepen by Rahul Sagore uses vanilla Material, not specifically for Angular, but it's exactly what you want. I was looking for the same thing as you; it's a shame Material doesn't offer this, but I can see how it would go against their principles and make Material too extensive.
It comprises of custom css (perhaps overriding, I'm not sure) and use of particular Material classnames. Below I've pasted the contents into a snippet.
I had an issue with the mdl-cell--n-col classes so I changed the content one from 10-col to 6-col so it wouldn't wrap the content beneath the tabs in the restrictive space of this post. You'll probably have to tinker with that yourself, or scrap that and use Material styles the way you know how. Similarly, I cannot see what the .hollow-circle spans are doing, so perhaps they aren't needed.
/*Vertical Tabs*/
.vertical-mdl-tabs {
margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 35px;
height: inherit;
border-bottom: none;
border-right: 1px solid rgba(10, 11, 49, 0.20);
}
.vertical-mdl-tabs .mdl-tabs__tab {
width: 100%;
height: 35px;
line-height: 35px;
box-sizing: border-box;
letter-spacing: 2px;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
content: inherit;
height: 0;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
padding: 0 30px;
}
.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
text-align: left;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span>
Tab 1
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 2
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 3
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
you can have verticval tabs by adding vertical attribute to the mat-tab-group and adding following css to your page.
mat-tab-group[vertical] .mat-tab-labels {
display: flex;
flex-direction: column!important;
}
mat-tab-group[vertical] {
display: flex;
flex-direction: row!important;
}
here's the mat-tab-group element with vertical attribute
<mat-tab-group flex="1" vertical>
<mat-tab label="Tab 1"> Loading ... </mat-tab>
<mat-tab label="Tab 2" > Loading ... </mat-tab>
</mat-tab-group>
I recently updated a Cordova mobile app to use OnsenUI v1.3.8 (in order to fix a problem with broken back buttons when viewing the app on iOS 8.4). The problem I'm now seeing is that the back buttons throughout the app, send you all the way back home. Even levels down in the app, pressing the back button takes you to the previous page, then seems to fire another event to go back again.
I have the following syntax in my index.html (home) page:
<body onload="onLoad()">
<ons-navigator title="Navigator" var="myNavigator" page="main.html">
</ons-navigator>
</body>
In the rest of my app, I'm using the following syntax:
<ons-toolbar>
<div class="left animated fadeIn">
<ons-back-button><div class="animated fadeIn">Back</div></ons-back-button>
</div>
<div class="center animated fadeIn">{{ title }}</div>
</ons-toolbar>
Main.html is simply...
<div ui-view></div>
Any idea on how to resolve this?
[EDIT]
Below is the HTML behind the button/s:
<ons-back-button class="ng-scope">
<span class="toolbar-button--quiet " ng-click="" style="height: 44px; line-height: 0; padding: 0; position: relative;">
<i class="ion-ios-arrow-back ons-back-button__icon" style="vertical-align: top; background-color: transparent; height: 44px; line-height: 44px; font-size: 36px; margin-left: 8px; margin-right: 2px; width: 16px; display: inline-block; padding-top: 1px;"></i><span style="vertical-align: top; display: inline-block; line-height: 44px; height: 44px;" class="back-button__label"><div class="animated fadeIn ng-scope">Back</div></span>
</span>
</ons-back-button>
I started a question about a bootstrap leaflet map not displaying on mobile devices How can I fix bootstrap leaflet map mobile display?
Since then I have used a simple mapbox template for a map and with invalidateSize() as outlined here https://www.mapbox.com/help/why-map-cropped-hidden-shown/
But still no luck getting the map to display on a mobile phone.
Can anyone assist me with the proper implementation of invalidateSize()?
Thanks
Barry
There is a single div element:
<div id='map' class='blue'></div>
and this is the script:
<script>
L.mapbox.accessToken = 'mytoken';
var map = L.map('map').setView([10.5063,-61.4079], 10);
map.attributionControl.setPrefix('© Copyright 2015. hellO!');
L.control.locate().addTo(map);
L.control.layers(
{'Streets': L.mapbox.tileLayer('url').addTo(map)},
{
'Drive Times': L.mapbox.tileLayer('url'),
'Outlets': L.mapbox.tileLayer('url')
}
).addTo(map);
//attempt to force resize on mobile devices
$('map').show();
map.invalidateSize();
this is all the css:
<style>
.menu-ui {background:#fff; position:absolute; bottom:10px;right:10px; left:10px; z-index:1; border-radius:3px; width:auto; height:inherit; border:1px solid rgba(0,0,0,0.4);}
.menu-ui a { font-size:11px; color:#404040; display: inline-block; margin:0;padding:0; padding:10px; text-decoration:none; border-right: 2pt inset; border-right-color:0.5px solid rgba(0,0,0,0.25); text-align: left;}
.menu-ui a:first-child { border-radius:3px 3px 0 0; }
.menu-ui a:last-child { border:none; border-radius:0 0 3px 3px; }
.menu-ui a:hover { background:#f8f8f8; color:#404040; }
.menu-ui a.active { background:#3887BE; color:#FFF; }
.menu-ui a.active:hover { background:#3074a4; }
.menu-ui a.inactive { background:#FFF; color:#3887BE; }
.leaflet-control-locate {border: 1px solid rgba(0,0,0,0.4);}
.leaflet-control-locate a {background-color: #fff;background-position: -3px, -2px;}
.leaflet-control-locate.active a {background-position: -33px -2px;}
.leaflet-popup-content { margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px;}
.leaflet-popup-content-wrapper {border-radius: 2px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
.leaflet-control-layers label { font-weight: normal; margin-bottom: 0px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
</style>
What does the styling look like on $('map')? I see your inline CSS, but is there anything else on it? Try giving it a size to be sure everything else is working first.
Also, if you are using any kind of CSS animation to resize the map container, you need to wait until after the animation is done, e.g.:
window.setTimeout(function() {
map.invalidateSize();
}, 1000);
Why not start out with the most basic map you can get and go from there. First check if the code posted below works, then change it to your token en mapid, test again, add the layercontrol, test again etc. Add one feature at a time and keep testing, you'll find out where it goes wrong then easily. That's at the moment hard to guess without your full code and a proper testcase on Plunker or JSfiddle or somewhere else where we could test it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40, -74.50], 9);
</script>
</body>
</html>
Taken from: https://www.mapbox.com/mapbox.js/example/v1.0.0/
the maps now work.
the issue was http/https. two things had to be changed.
1) the method of calling the tiles and associated php script initially, i used tileserver.php to call
'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'
now i'm using mbtiles-server.php to call
'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")
note: php script had to be in the same folder/directory as the mbtiles file. also, replace text in [] with your own
2) leaflet css/js was used only, no mapbox as the api uses a secure key
much thanks again #iH8 for the excellent work!