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;
});

Node max size in cytoscape.js dagre layout?

A major part of the project I'm building involves allowing users to create and edit DAGs fluidly. I'm using React, cytoscape.js, cytoscape edgehandles, and the dagre layout to accomplish this, and it's working pretty well, except for one annoying problem. When the graph only has a few nodes, the nodes are huge!
This is because I have fit set to true (the default) in the layout options. I need to keep this setting, because as the graphs grow I want them to zoom out to fit unless the user chooses to zoom in. I just don't want the first 1 - 4 nodes to be huge! Is there any way to define a max height/width for the nodes, or control the zoom level, or something, so that the nodes start off at a reasonable size and only start getting smaller when they have to?
Here's my layout:
cy.layout({
name: 'dagre',
ranker: 'longest-path',
padding: 15
}).run();
And here's my style settings:
const cyConfig = {
elements: [],
style: [
{
selector: 'node',
style: {
'label': 'data(name)',
'color': '#2C2029',
'text-valign':'center',
'text-halign': 'center',
'font-size': '25px',
'font-family': 'Nixie One, cursive',
'shape': 'roundrectangle',
'background-color': 'mapData(inDegree, 1, 8, rgba(163, 154, 164), rgba(240, 146, 60))',
'background-opacity': 'mapData(inDegree, 1, 8, .3, 1)',
'border-color': 'transparent',
'width': 'label',
'height': 'label',
'padding': '7px'
}
}, {
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-fill': 'hollow',
'target-arrow-color': '#2C2029',
'width': '1px',
'color': '#2C2029',
}
}
]
};

You can always define your nodes like this:
style: [
{
selector: 'node',
style: {
'shape': 'data(faveShape)',
'content': 'data(DisplayName)',
'height': 'data(faveHeight)',
'width': 'data(faveWidth)',
'background-color': 'data(faveColor)',
'line-color': '#a8eae5',
'font-family': 'Segoe UI',
'font-size': '15px',
}
}
]
If you do so, you can check how many nodes you want to add to your cytoscape window and then define their width and height properties according to the number of nodes you want to add:
jsonNew.push({
data: {
id: yourId,
parent: '',
faveShape: 'yourShape',
faveHeight: ((nodes.length > 7) ? nodes.length * 3 : nodes.length * 6),
faveWidth: ((nodes.length > 7) ? nodes.length * 5 : nodes.length * 10),
faveColor: '#ffffff'
},
position: {
x: '',
y: ''
},
parents: '',
group: 'nodes',
removed: false,
selected: false,
selectable: true,
locked: false,
grabbable: true,
classes: ''
});

How to make table of PDF 100% width for datatables

I have a table that I'm saving as a pdfHtml5 in datatable. I'm trying to make the table full width but I have been unsuccessful. How can I make my table 100% width using styles for my pdfHtml5?
dom: 'Bfrtip',
buttons: [
{
extend: 'collection',
text: '<div class="image"><img src="/Asset/Image/Capture.jpg" alt="" /></div>',
autoClose: true,
buttons: [{
extend: 'pdfHtml5', text: 'Download PDF Document', className: 'pdfdoc', title: podTitle, message: pod.data.pod_description_text + "\n" + "\n" + printDate, customize: function (doc) {
doc.defaultStyle.alignment = 'left';
doc.styles.tableHeader.alignment = 'left';
doc.styles.message = {
alignment: 'center'
}
doc.styles.table = {
alignment: 'center',
width: '100%',
}
/*doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');*/
doc.pageMargins = [ 80, 20, 80, 20 ];
}
}, { extend: 'excel', text: 'Download Excel Document', className: 'exceldoc' },
]
}
]
});

By further extending pdfHtml5, you can instruct the pdfmake library, used by the Buttons extension, to use 100% width. The DataTables forum has a post with the required code:
var tbl = $('.dTable');
var settings={};
settings.buttons = [
{
extend:'pdfHtml5',
text:'Export PDF',
orientation:'landscape',
customize : function(doc){
var colCount = new Array();
$(tbl).find('tbody tr:first-child td').each(function(){
if($(this).attr('colspan')){
for(var i=1;i<=$(this).attr('colspan');$i++){
colCount.push('*');
}
}else{ colCount.push('*'); }
});
doc.content[1].table.widths = colCount;
}
}
];
$('.dTable').dataTable(settings);
Note that if you just copy the customize portion of the code above, you must replace tbl by "#myTable" or something similar.
See also the related GitHub ticket, including another implementation (which may or may not be out-of-date).

I use this and works for me. Good luck.
{
extend: 'pdfHtml5',
charset: 'utf-8',
title:tableOptions.title.toUpperCase(),
orientation: 'landscape',
text: '<i class="fas fa-file-pdf"></i> PDF',
exportOptions: {
columns: [1,2,3,4]
},
customize: function(doc) {
doc.content.splice( 0, 0, {
margin: [ 7, 0, 0, -45 ],
width: 85,
height: 55,
alignment: 'right',
image: 'base64...'
});
let downloadDate=`${moment(new Date(), 'YYYY-MM-DD HH:mm:ss').format('DD-MM-YYYY')}`;
let downloadTime=`${moment(new Date(), 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')}`.slice(11,16);
doc.content.splice( 2, 0, {
alignment: 'left',
fontSize:12,
margin: [ 0, 0, -10, 20 ],
color:"#003d66",
text:`${downloadDate} / ${downloadTime} Hrs`
});
doc.defaultStyle.alignment = 'center';
doc.defaultStyle.color = '#666';
doc.styles.title.color="#00c4cc";
doc.styles.title.alignment="left";
doc.styles.title.fontSize=14;
if(doc.content[3].table.body[0]){
let columns=doc.content[3].table.body[0].length;
let widths=[];
for (let i = 0; i < columns; i++) {
widths.push(`${99/columns}%`)
}
doc.content[3].table.widths = widths;
}
doc.styles.tableHeader.fontSize=12;
doc.styles.tableHeader.fillColor="#003d66";
doc.styles.tableBodyOdd.margin =[5, 5, 5, 5];
doc.styles.tableBodyEven.margin = [5, 5, 5, 5];
}
},

Deleting a view from a ScrollView

Developing in Titanium Mobile.
I need to remove a view from a scrollView when a delete button is clicked. I have a custom event firing when my button is clicked, which the scrollView listens for. My question is, how do I reference the view that needs to be deleted? These views are added to the scrollView dynamically, and there is no unique information about the view. I tried passing the view itself when firing the custom event, but this does not work. How do I tell the scrollView which view to delete?

When you have a delete button inside the view - that's a piece of cake :) Just get its' parent and delete it - scrollView.remove(e.source.parent);
Here I created a demo page:
var scrollView = Titanium.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: true,
layout: 'vertical'
});
var colors = ['red', 'green', 'blue', 'orange', 'purple', 'yellow'];
for (var i = 0; i < 6; i++) {
var view = Ti.UI.createView({
backgroundColor: colors[i],
borderRadius: 10,
width: 300,
height: 200,
top: 10,
id: i
});
scrollView.add(view);
var deleteButton = Ti.UI.createButton({
borderRadius: 3,
style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
backgroundGradient: {
type: 'linear',
colors: [ '#c7c7c7', '#686868' ],
startPoint: { x: 0, y: 0 },
endPoint: { x: 0, y: 30 },
backFillStart: false
},
title: 'Delete view ' + i,
font: { fontSize: 12, fontWeight: 'bold' },
color: '#fff',
width: 120,
height: 30
});
view.add(deleteButton);
deleteButton.addEventListener('click', function(e) {
Ti.API.info(e.source.id); // use this ID
scrollView.remove(e.source.parent);
});
}
Ti.UI.currentWindow.add(scrollView);