Node.js - Get font properties description - node.js

Is it possible to access the Description part of a font properties, as shown when you right-click on the file?
Here, I'm interested in the Title attribute, for example.
I've used the get-file-properties package as described in Node JS - read file properties, but it doesn't seem to have access to it (it's using wmic behind the scenes, which doesn't return it either). For example, Title doesn't exist, and Description returns C:\\Windows\\Fonts\\Alegreya-Bold.ttf
Is there another way to access this information?
Thanks

As #RobinMackenzie mentionned, there's the ttfinfo package (https://github.com/trevordixon/ttfinfo), which will give you the info on a specific font in this form:
{
tables: {
name: {
'0': 'Copyright 2011 The Alegreya Project Authors (https://github.com/huertatipografica/Alegreya)',
'1': 'Alegreya',
'2': 'Bold',
'3': '2.003;HT ;Alegreya-Bold',
'4': 'Alegreya Bold',
'5': 'Version 2.003; ttfautohint (v1.6)',
'6': 'Alegreya-Bold',
'8': 'Huerta Tipografica',
'9': 'Juan Pablo del Peral',
'11': 'http://www.huertatipografica.com',
'12': 'http://www.huertatipografica.com',
'13': 'This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL',
'14': 'http://scripts.sil.org/OFL',
'256': 'Roman numerals',
'257': 'Arrows, triangles and circles',
'258': 'Foundry icon',
'259': 'Dynamic arrows and triangles'
},
post: {
format: 2,
italicAngle: 0,
underlinePosition: 0,
underlineThickness: 0,
minMemType42: 16734720,
maxMemType42: 1509968640,
minMemType1: 1258291200,
maxMemType1: 0
},
'OS/2': { version: 4, weightClass: 700 }
}
}
A full list of the names (0, 1, 2,...) can be found here: https://learn.microsoft.com/en-us/typography/opentype/spec/name#name-ids
There's also node-system-fonts (https://github.com/jgilsaa/node-system-fonts), which requires a build step as it's a C++ module, but on the plus side, gives you a lot of the same info, for every installed font:
[
{
path: 'C:\\WINDOWS\\FONTS\\ARIAL.TTF',
postscriptName: 'ArialMT',
family: 'Arial',
style: 'Regular',
weight: 400,
width: 5,
italic: false,
monospace: false
},
{
path: 'C:\\WINDOWS\\FONTS\\ARIALN.TTF',
postscriptName: 'ArialNarrow',
family: 'Arial Narrow',
style: 'Regular',
weight: 400,
width: 3,
italic: false,
monospace: false
},
{
path: 'C:\\WINDOWS\\FONTS\\ARIALI.TTF',
postscriptName: 'Arial-ItalicMT',
family: 'Arial',
style: 'Italic',
weight: 400,
width: 5,
italic: true,
monospace: false
},
...
]

Related

Textstroke rendering problem with M letters

I have an echart with a serie type:'custom' and I have a rendering issues on the labels.
I return this
return {
type: 'group',
children: [
{
type: 'rect',
ignore: !rectNormal,
shape: rectNormal,
style: { stroke: '#707070' }
},
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
strokeLinejoin: "round",
strokeLinecap: "round",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}
]
And it' rendered like this
As you can see the text stroke have problem in rendering the M letters and the strokeLinejoin and strokeLinecap did not solve the problem.
Do someone know how to fix this?
I solved it this way
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
lineJoin: "bevel",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}

Change color of JointJS Rappid object (via modifying different instance in the left-nav menu and also modify via Rappid Inspector color picker)?

I basically want to change the color of a JointJS shape in their RAPPID environment I'm trialing.
Here is some background on what I have so far and what I want to achieve:
I have a JointJS shape called ChristmasTree that extends joint.dia.Element.
Basically the svg string that builds this ChristmasTree object is a path of the tree (svg path element), and multiple ornaments on it (4 svg circles/ellipses which have id's and classes that I would assume I can use to modify the colors).
I set some initial values for the ornaments via the style attr inside the svg string.
Once I place that in the left RAPPID menu, the user can drag that one Christmas Tree with red balls on it, yay.
Question ###1:
But I would like to place a 2nd ChristmasTree shape in the left menu without creating another main object that has Green balls... How would I achieve this?
In my below code, christmas_tree_style_2 should override the .ornament class with
'fill': "#00ff00", but doesn't (in the left menu, its still red)?
In fact, christmas_tree_style_1, i also tried to override with a Blue ball 'fill': "#0000ff", but its still red.
How can I achieve a left-nav override of the shape?
Question ###2:
Pretend you help me resolve previous issue. You can drag and drop 2 multiple color ChristmasTree's from the left-menu nav into the main RAPPID content area.
I'd like to now change the colors dynamically through the inspector.
I added a color inspector that shows up in the RAPPID right-nav menu for every element with:
'ornament_fill': { label: 'Color of christmas-tree-ornament's fill', type: 'color', group: 'generalinfo', index: 2 }
But not sure how to create an event to dynamically change the color of the ornaments. Any idea? Thanks!
Here is the important part's of the code below.
And also here is an actual working example (but the left-nav initial override and right-nav Inspector color override dont work, hence my 2 questions):
http://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html
(sorry i couldnt find a CDN for rappid.js to add to JSFiddle so it was easier to upload the folder to a site). The applicable files to my question are app.js and rappid-custom-shapes.js.
#
//svg for Christmas Tree + its ornaments... will be added to ChristmasTree shape/obj below
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
#
//default Christmas Tree
joint.shapes.basic.ChristmasTree = joint.dia.Element.extend({
markup: ChristmasTreeSVGstr,
defaults: joint.util.deepSupplement({
type: "basic",
name: 'Initial Christmas Tree label text',
size: {
width: 20,
height: 20
},
attrs: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
width: 10,
height: 15
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
}, joint.dia.Element.prototype.defaults)
});
#
//RAPPID left menu christmas trees (2 variations of the initial ChristmasTree object, so I need to override some of the colors)
var christmas_tree_style_1 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#0000ff",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
});
var christmas_tree_style_2 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'blue',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "yellow",
'stroke': "yellow",
'stroke-width': '5px',
'fill-opacity': 1
}
}
});
//add to left menu
stencil.load([christmas_tree_style_1, christmas_tree_style_2], 'customchristmastrees');
#
//add it to the inspector
function createInspector(cellView) {
if (!inspector || inspector.options.cellView !== cellView) {
if (inspector) {
// Set unsaved changes to the model and clean up the old inspector if there was one.
inspector.updateCell();
inspector.remove();
}
//if(cellView.$el.hasClass('class')) // certain element should get certain things more in inspector?
//how to determine different shapes?
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
'ornament_fill': { label: 'Color of christmas-tree-ornaments fill', type: 'color', group: 'generalinfo', index: 2 },
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});
$('.inspector-container').html(inspector.render().el);
}
}
Question #1: you need to remove style properties from the markup if you want to change them through the attr property on the element. I removed the fill, stroke, stroke-width from the markup:
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
then you can customize the shape as follows:
var rb = new joint.shapes.basic.ChristmasTree({
position: { x: 50, y: 50 },
size: { width: 100, height: 150 },
attrs: {
".ornament": {
'fill-opacity': 1,
stroke: 'pink',
'stroke-width': 5,
fill: 'blue'
}
}
});
Question #2:
in case you sorted out the issue #1 you can simply sync the values directly with the attrs:
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
attrs: {
'.ornament': {
fill: {
label: 'Color of christmas-tree-ornaments fill',
type: 'color',
group: 'generalinfo',
index: 2
}
}
},
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});

Titanium Text in tableview row has background

I am making an app with a sliding menu on the left (see http://mobile.tutsplus.com/tutorials/appcelerator/titanium-mobile-create-a-sliding-menu-for-ios/). And I'm trying to add a background to the rows, but every time I try that and I start the simulator, the background can only be seen a little bit because there's a white background behind the title of the row for some reason. Here's the code:
var menuTitles = [
{title: 'Home', backgroundImage: "images/row_BG.png", id: 1},
{title: 'Vestigingen', height: 30, font:{fontSize: 14, fontWeight: "bold", fontFamily: "Helvetica"}},
{title: 'Han Fortmann', backgroundImage: "images/row_BG.png", leftImage: 'images/HF_Logo_#2x.png', id: 2, font:{fontSize: 14, fontWeight: "normal", fontFamily: "Helvetica"}},
{title: 'Johannes B.', leftImage: 'images/JB_Logo_#2x.png', id: 3, font:{fontSize: 14, fontWeight: "normal", fontFamily: "Helvetica"}}
];
Maybe you should precise the Titanium version you're using to get more accurate answers.
Nevertheless, I think the answer you're looking for is the backgroundColor: 'transparent' property. Try this, and it should work :
{backgroundColor: 'transparent', title: 'Home', backgroundImage: "images/row_BG.png", id: 1}

Building dynamic HighCharts and image Highcharts with (mostly) one codebase?

We're already creating dynamic HighCharts for our webpages--these have a few javascript dependencies and a chart-generation script. We'd like to start creating PDFs of these charts using the new HighCharts/Node/PhantomJS suite HighCharts has rigged up (see press release). Our image-gen node server would run on a separate box/vm. How can we do this without having to maintain two separate codebases for the same chart? I'm not too familiar with Node yet, so I'm not sure how requesting the scripts with a web request would work. I'm guessing a lot of HighCharts users that want to start generating some of their charts as images server-side will run into a similar issue with managing two related codesets...
In essence, we already have have this:
Webserver -> JSON (data) + foo.js + bar.js + foo.html -> webpage with dynamic charts.
We'd like to build:
Web-server -> JSON (data) + separate Node Server + foo.js + bar.js -> images available via web request
Obviously some redundancy. How can we manage the dependencies?
While node is awesome, I felt that approach was needlessly complex, with having to many moving parts that could break. So I did the super simple solution of creating files dynamically. The only problem i faced was deleting the temporary file after adding it to the pdf. It would break the PDF from rendering. And setting the directory to /tmp, crashed phantomjs. The best idea i came up with currently is putting the tempory generated files, in a temp directory, then deleting everything in that directory every night, with a cronjob.
I post this out of code simplicity. It should be in a function, to maintain code re-usability.
<?php
$TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
$TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';
$Data = "
{
chart: {
zoomType: 'xy',
width: 700,
height: 520
},
credits: {
enabled: false
},
colors: [
'#2f7ed8',
'#910000',
'#8bbc21',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
title: {
text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
style: {
fontSize: '16px',
}
},
xAxis: [{
categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
}],
yAxis: [{
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y axis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Sec Yaxis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'first',
type: 'spline',
yAxis: 1,
data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
},
{
name: 'second',
type: 'spline',
yAxis: 1,
data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]
},{
name: 'third',
type: 'column',
data: [10, 11, 9, 7, 5, 2, 7]
},{
name: 'fourth',
type: 'column',
data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
}]
}";
try {
$myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
fwrite($myfile, $Data);
fclose($myfile);
} catch (Exception $e) {
echo 'Error: '.$e.' <br />';
}
$URL_Command = "phantomjs /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
exec($URL_Command);
echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';
?>
I hope this helps. I couldn't find a good solution that didn't involve Node.JS or Java to do this. I wanted a pure PHP solution.
We decided to pass the entire highcharts config object (e.g. Highcharts.chart(configObj)) to the node server as a URL-encoded string. We had to put a few rendering functions over on the node server, but it wasn't too bad. We also stuck some of the rendering functions in the string config object. Not the most beautiful result, but it worked.

add items in layout border - extjs

i need to add two boxes in the north section of a layout border
it would be something like this : in red the boxes / panels i need to add (but i dont want to keep borders)
here is my try :
...
{
region: 'north',
split: true,
//xtype : 'box',
height: 100,
layout : 'anchor',
items: [{ xtype: 'box', id: 'header', height: 100, anchor: '70%',
html: '<h1> my title</h1>'},
{
xtype: 'panel', title: 'title', border: 'false', frame: false, height: 100,
html: '<h1> my info</h1>'
}]
}
...
the second panel doesnt work
thanks for ur help
If you want further partition of your north panel, then you should use layout:'border'.
Otherwise you can add your items to the north region derectly without using layout.
If you don't want the border,You should use border:false
You would be better using a border layout again in the north region...
region: 'north',
split: true,
//xtype : 'box',
height: 100,
layout : 'border',
items: [{
xtype: 'box',
id: 'header',
region: 'center',
height: 100,
anchor: '70%',
html: ' my title'
}, {
xtype: 'panel',
region: 'east'
border: 'false',
frame: false,
height: 100,
width: '49%',
html: ' my info'
}]
...
That should work okay.

Resources