We Keep Coding

Setting node style in cytoscapeJs

As you can see below not all the node style that i declare are working. I want to make the text inside the node larger and in the documentation i found the code: 'labelFontSize': 100. Than, i want to make the edge weight (that you cannot see in the picture but are present) white, and the code "labelFontColor": "white" isn't working. I am using CytoscapeJs.
Can someone explain to me why this happen?
My code is the following:
var json_obj = response.Cy_json_archi_prima_di_chiusura_atk_supp
var cy = cytoscape({
container: document.getElementById('cy_atk_supp'),
elements: JSON.parse(json_obj),
style: [
{
selector: 'node',
style: {
'shape': 'circle',
'labelFontSize': 100,
'label': 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'color': 'black',
"height": 150,
"width": 150,
'border-width': '2px',
'border-color': 'black',
'background-color': '#399AF9'
//'font-size': 20
}
},
{
selector: 'edge',
style:{
'label': 'data(weight)',
'labelFontSize': 300,
"labelFontColor": "white",
'labelFontWeight': 'bold',
'lineColor': 'data(color)',
'width': 3,
'target-arrow-color': 'data(color)',
"curve-style": "bezier",
'target-arrow-shape': 'triangle',
}
}
],
layout: {
name : 'circle'
}
});
And this is the resulting Graph:

I was checking the wrong library.
For cytoscapeJS these is the correct style option: https://js.cytoscape.org/#style/labels

PhotoSphereViewer: <a href="…"> not working on touchscreen

I made a simple page with the "PhotoSphereViewer" library and i want to add a couple of links, with the "Markers Plugin".
http://klappfon.info/xxxemanuel/2/
It works like a charm on firefox and safari, but unfortunately not at all on touch screens / phone browsers...
The links seems "clickable" (turning to active state, red) but does not open...
My theory is that it has something to do with the navigation of the sphere since link does open when "PhotoSphereViewer" is set to "TwoFingerMode"...
Any ideas how to work around that?
THANKS!!!
plugins: [PhotoSphereViewer.GyroscopePlugin,
[PhotoSphereViewer.MarkersPlugin,{markers:[{
id: '1',
className: 'link',
longitude: 0.7,
latitude: 0,
html: '1234',
anchor: 'bottom right',
scale: [0.5, 1.5],
style: {
maxWidth: '200px',
color: 'white',
fontSize: '30px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center',
},
},
]
}]
]

You cannot add links to html markers because the click is intercepted. Instead you should attach custom datato the marker and use the select-marker event.
https://photo-sphere-viewer.js.org/plugins/plugin-markers.html#select-marker-marker-data
const viewer = new PhotoSphereViewer({
plugins: [PhotoSphereViewer.GyroscopePlugin,
[PhotoSphereViewer.MarkersPlugin,{markers:[{
id: '1',
className: 'link',
longitude: 0.7,
latitude: 0,
html: '1234',
anchor: 'bottom right',
scale: [0.5, 1.5],
style: {
maxWidth: '200px',
color: 'white',
fontSize: '30px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center',
},
},
data: { href: 'http://google.com' },
]
}]
]
});
const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
markersPlugin.on('select-marker', (e, marker) => {
window.location.href = marker.data.href;
});

Why can't we check a style attribute of a react-native app?

I wanted to check whether color is white of an element, as follows,
if(styles.background=='white')
console.log("ok")
console.log(styles.background=='white') --> was false [1]
why [1] returns false?

In your case styles is a StyleSheet object.
You need to use the StyleSheet.flatten function as below:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
var styleObj = StyleSheet.flatten([styles.container])
console.warn(styleObj.backgroundColor==='#F5FCFF') //=>true
To process a prop style of a component you could use it as below:
let backgroundColor = Stylesheet.flatten(this.props.style).backgroundColor;
You can find the source code of the function here:
https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/flattenStyle.js
Sources and more details here:
https://facebook.github.io/react-native/docs/stylesheet.html
https://stackoverflow.com/a/35233409/1979861

Just want to make sure the parameter passing syntax is correct.
(Note: the square brackets surrounding the parameter are not needed.)
For single form style sheet:
var styleObj = StyleSheet.flatten(styles.container)
For multiple-form style sheet:
var styleObj = StyleSheet.flatten(styles[1].container)
Then you can print it as a dict to exam the attributes:
console.log(styleObj)

Adjust shape size in cytoscape.js with dagre layout

I am trying to resize the shapes of the nodes to the size of the node text. I followed instructions from https://github.com/cytoscape/cytoscape.js/issues/649 . However:
The shapes always end up with height = width
The size of all shapes is the same.
The shape size seems to reach a max above which it can't grow.
(I am not sure if this has something to do with dagre layout.)
I am using the following libraries with the dagre layout:
cytoscape.min.js
dagre.min.js
cytoscape-dagre.js
container: document.getElementById('cy'),
boxSelectionEnabled: false, autounselectify: true,
layout: {name: 'dagre', rankDir: 'LR', align: 'LR'},
style: [{
selector: 'node',
style: {
'content': 'data(name)',
'label': 'data(name)',
'text-opacity': 1,
'text-valign': 'center',
'text-halign': 'center',
'text-wrap': 'wrap',
'font-size': 9,
'background-color': '#AAA',
'shape':'rectangle',
'width': 'data(width)' * 50,
'height': 'data(height)' * 50 }
},{
selector: 'edge',
style: {
'width': 4,
'content': 'data(name)',
'target-arrow-shape': 'triangle',
'line-color': 'data(color)',
'text-wrap': 'wrap',
'target-arrow-color': 'data(color)',
'font-size': 10,
}
}]

You've specified invalid style. "somestring" * 50 is NaN.
You want width: label, as indicated in the docs: http://js.cytoscape.org/#style/node-body

jquery bubblepopup to appear onclick on a textbox

So what I'm trying to achieve is a popup that shows itself to the user once they click on the textbox. I'm using the jquery bubblepopup plug-in but I can't seem to assign it to click function. There are 2 functions, one roll over and one click I've seperated them if anything.
$(document).ready(function () {
$('#info-header').CreateBubblePopup({
innerHtml: $('#info-pop').html(),
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'right',
align: 'middle',
tail: 'right',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left'
}
});
$('#Password').click(function(){
var popup_button = $(this);
popup_button.CreatebubblePopup({
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'top',
align: 'top',
tail: 'bottom',
width: '250px',
innerHtml: '<p>Password Requirements</p><ul><li>Must be at least 6 characters</li> <li>Must include at least 3 of the 4 following items:<ul><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left',
'margin-top': '0'
}
});
popup_button.FreezeBubblePopup();
$('#Password').click(function(){
$(popup_button).HideBubblePopup();
});
});
});

So i found out the solution, I had a small letter for the id. and I switched from button onclick to focus, and used blur to cancel or take out the effect.
$(document).ready(function () {
$('#Password').focus(function () {
var popup_button = $(this);
popup_button.CreateBubblePopup({
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'top',
align: 'top',
tail: 'bottom',
width: '250px',
mosueOver: 'hide',
innerHtml: '<p style="font-weight:bold;font-size:13px;">Password Requirements</p><ul style="margin-left:-25px;"><li>Must be at least 6 characters</li> <li>Must have 3 of the following:<ul style="margin-left:-25px;"><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left',
'margin-top': '-10px',
'font-size' : '12px',
'padding' : '0 10px'
}
});
popup_button.ShowBubblePopup();
popup_button.FreezeBubblePopup();
$('#Password').blur(function () {
popup_button.UnfreezeBubblePopup();
popup_button.RemoveBubblePopup();
});
});
});