WPF: Grouping font files into one font family - wpf

I am trying to use S-Core Dream font in WPF, but each file has different font family to each other -- including weight in it, e.g. S-Core Dream 1 for Thin -- so they are not grouped into a single FontFamily.
If these are used in WPF, FontWeight is just ignored and the actual font weight depends on which "font family" was selected from the nine available FontFamilys. (A regex ^S-Core Dream [1-9]$ matches the all of them.)
Can I group them into a single FontFamily, like S-Core Dream for instance, and manipulate font weights with just FontWeight property?
<TextBlock
FontFamily="S-Core Dream"
FontWeight="Regular"
>
I want here to be <Run FontWeight="Bold">Bold</Run>,
and here to be <Run FontWeight="Thin">Thin</Run>
while the others remain Regular.
</TextBlock>
What I have tried are below:
<TextBlock
FontFamily="/Resources/#S-Core Dream 4"
FontWeight="Black"
>
This TextBlock is shown in Regular (400) font weight, not Black (900).
</TextBlock>
<TextBlock
FontFamily="/Resources/#S-Core Dream 1, /Resources/#S-Core Dream 2"
FontWeight="Black"
>
This TextBlock is shown in fallback font.
</TextBlock>
Modifying the font file itself violates the license of the font, so I would avoid to do so.
This is an HTML/CSS equivalent of what I want to achieve:
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-1Thin.woff') format('woff');
font-weight: 100;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-2ExtraLight.woff') format('woff');
font-weight: 200;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: 300;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-4Regular.woff') format('woff');
font-weight: 400;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-5Medium.woff') format('woff');
font-weight: 500;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-6Bold.woff') format('woff');
font-weight: 600;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-7ExtraBold.woff') format('woff');
font-weight: 700;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-8Heavy.woff') format('woff');
font-weight: 800;
}
#font-face {
font-family: S-Core Dream;
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six#1.2/S-CoreDream-9Black.woff') format('woff');
font-weight: 900;
}
<div style="font-family: 'S-Core Dream'; font-weight: 400;">
I want here to be <span style="font-weight: 700;">Bold</span>,
and here to be <span style="font-weight: 100;">Thin</span>
while the others remain Regular.
</TextBlock>
<hr />
<div style="font-family: 'S-Core Dream';">
<span style="font-weight: 100;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 200;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 300;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 400;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 500;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 600;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 700;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 800;">The quick brown fox jumps over the lazy dog.</span><br />
<span style="font-weight: 900;">The quick brown fox jumps over the lazy dog.</span><br />
</div>

Related

Can you upload an image from a mobile phone html page on Node-red?

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

Select a value from input combo box using Selenium using xpath for a reachjs control

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']

how can I create a search box like Facebook's or WhatsApp's? (Mobile)

Is there a way to do that manually ? I was trying to use Ionic Framework, they had an attribute for that but is deprecated now.
By Facebook's/WhatsApp's search box I mean:
1 - Hidden at first sigh
2 - If you want to see it you have to pull down
3 - Once you focus on it, it extends up to the top of the screen and overlaps the header
4 - Has a button which is an X to delete the content of the search box and other button named "Cancel" to close the search box.
Pretty sure everyone has notice that behavior already.
So, what are the techniques to implement it ?
I am using Angular so I do not know if there is a way to do a Directive, or just with css ? what are your suggestions ?
something like this
it would be too time consuming for me to realize the all thing. but is not so difficoult if you are familiar with " transitions " in css3.
here is a "lite version"
var searchbox={
topPos_open:0, topPos_close:-50, isOpen:false,
open:function(){
var box=document.getElementById("searchbox");
box.style.top=this.topPos_open+"px";
document.getElementById("searchfield").focus();
this.isOpen=true;
},
close:function(){
var box=document.getElementById("searchbox");
box.style.top=this.topPos_close+"px";
this.isOpen=false;
},
pop:function(){
!this.isOpen?this.open():this.close();
},
clear:function(){
document.getElementById("searchfield").value="";
}
}
#searchbox{position:fixed; top:-50px; left:0px; width:100%; height:60px; background-color:rgba(135, 206, 235, 1); -webkit-transition:top 0.5s ease 0s; -moz-transition:top 0.5s ease 0s; transition:top 0.5s ease 0s;}
#searchbox input{border:0px none; margin:0px 10px 0px 10px; padding:0px; width:80%; font-size:20px;}
#searchbox #input{float:left; background-color:rgba(255, 255, 255, 1); border:1px solid #dddddd; border-radius:20px; margin:5px; padding:5px; width:70%; min-width:250px;}
#searchbox #close{float:right; padding:10px:}
#searchbox button{border:0px none; background-color:transparent; font-size:20px; cursor:pointer;}
#searchbox #dots{clear:both; text-align:center; font-size:25px; cursor:pointer;}
<div id="searchbox">
<div id="input">
<input type="text" id="searchfield" value="">
<button type="button" onclick="searchbox.clear()">
X
</button>
</div>
<div id="close">
<button type="button" onclick="searchbox.close()">
Cancel
</button></div>
<div id="dots" onclick="searchbox.pop()">
......
</div>
</div>
<br>
<br>
<br>
<br>
Click the dots

which framework to make this simple birthday lookup script

I have a table that has a corresponding value for each birthday - all 366 of them when Feb 29th Included. I need to make a webpage with a script that has a date field picker where it opens a result page from that date for the corresponding value. What is the easiest framework to accomplish this...I have almost zero php and js experience but feel like that may be what is necessary to build it. Any suggestions? The attached code is a very very preliminary bare bones shell page for this frontend, but I don't know where to go from here.
<!DOCTYPE html>
<html>
<style media="screen" type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: black;
font-size: 12pt;
font-family: "Times New Roman", serif;
font-weight: bold;
color: #fff;
vertical-align: top;
text-align: center;
margin: 0;
padding: 0;
}
h1, h2, h3{
text-align: center;
font-weight: bold;
font-family: Verdana, sans-serif;
}
img {
border-style: none;
background-color: transparent;
}
</style>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form action="demo_form.asp">
What is your Birthday?: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>`
You probably will need both PHP and Javascript. Unfortunately stackoverflow is not a tutorial site, so you will have to start learning both languages yourself at least upto the level where you are able to do what you want to do. http://www.w3schools.com/js/ and http://www.w3schools.com/php/ are good starting points.

ie7: doesnt load eot fontface

as i looked into the network tab of ie9 (in ie7 mode) then i saw that there were no eot files loaded but in ie8 and ie9
how can i solve this problem?
i am using windows 7 and ie9 in ie7 mode
in ie6 and ie8 they font loads but not ie7
i used the css code by fontsquirrel.com
#font-face {
font-family: 'SansumiExtraBoldRegular';
src: url('../fonts/Sansumi-ExtraBold-webfont.eot');
src: url('../fonts/Sansumi-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Sansumi-ExtraBold-webfont.woff') format('woff'),
url('../fonts/Sansumi-ExtraBold-webfont.ttf') format('truetype'),
url('../fonts/Sansumi-ExtraBold-webfont.svg#SansumiExtraBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Resources