I am simply trying to select country paths to trigger tooltips. I suspect I am not referring to an accurate element in the svg file.
<script>
$(document).ready(function()
{
$('worldmap.shapes.US').qtip({ content: { text: 'Name: United States<br>Capital: Jefferson City' },
style: {
background: '#000000',
color: '#ffffff',
border: { width: 6, radius: 3, color: '#ff0000' }
},
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
}
});
});
Here is how the svg file is formatted:
worldmap = {
shapes: {
AE: "M604.196,161.643l0.514-0.129l0,0.772l2.188-0.386l2.189,0l1.672,0.129l1.803-1.802l2.058-1.802l1.674-1.673l0.518,0.900l0.385,2.189l-1.417,0l-0.258,1.802l0.517,0.386l-1.159,0.515l-0.129,1.029l-0.773,1.159l0,1.030l-0.514,0.644l-8.110-1.416l-1.031-2.704l0.127,0.643z",
it's a .js file
Thank you!
I don't quite see how you draw your raphael.js path. If you're doing something like that:
my_path = paper.path("M 100,200 L ... z");
You than have to use the .node() method on your raphael path object (my_path). That gives you a ref to the DOM object which you can than use.
$(my_path.node).qtip({ ... })
See e.g. http://www.itbrigadeinc.com/post/2012/05/03/Tooltips-in-Raphael.aspx
Related
I am trying to change the header text color on pages in Backstage (Spotify's open source software catalog). I have tried using themes as advised in Backstage documentation, but there is no way to specifically override the header text color (I can change the background colour, but not the color of the text.
I have tried a few solutions - this changes the background color of the header to white but the text remains white (default color) and actual header text cannot be read (white text on white background):
genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave})
I then found the ability to add a fontColor to the genPageTheme function and tried the following, but again it did not change the header color - I am not sure if I am calling it incorrectly:
genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave, options: {fontColor: '#B1D8FF'} }),
I also took a look at customizing the overall theme but found there is no field that allows the header to be modified (neither background nor text):
const myTheme = createTheme({
palette: {
...lightTheme.palette,
primary: {
main: '#2670A9',
},
:
:
I figure there is a way to do this using material-ui (MUI) directly since Backstage uses MUI but I would like to stay true to the Backstage customization approach of using their themes.
Any ideas how the header text color can be changed? Any ideas would be helpful!
You need to use BackstageOverrides. This will allow you to override default Backstage settings.
This will allow you to customize (a lot) your application.
A simple example:
import { BackstageOverrides } from '#backstage/core-components';
import { BackstageTheme } from '#backstage/theme';
export const customThemeOverrides = (
theme: BackstageTheme,
): BackstageOverrides => {
return {
BackstagePage: {
root: {
display: 'grid',
overflow: 'hidden !important',
gridTemplateColums: '30px 280px 3fr 30px',
gridTemplateAreas:
'"header header header header" ". sidenav content ." ". sidenav content . "',
},
},
BackstageHeader: {
header: {
height: '80px',
gridArea: 'header',
display: 'flex',
borderBottom: `1px solid #FFFFFF`,
backgroundImage: `none`,
backgroundPosition: 'center',
padding: '50px',
boxShadow: 'none',
background: `#FFFFFF`
},
rigthItemsBox: {
color: '#FFFFFF',
},
title: {
color: `#FFFFFF`,
fontSize: 24,
},
subtitle: {
color: `#666666`,
},
type: {
color: `#FFFFFF`,
},
},
BackstageHeaderLabel: {
label: {
color: '#FFFFFF',
},
root: { color: '#FFFFFF', },
value: { color: '#FFFFFF' },
},
};
};
I have a leaflet map using leaflet-realtime to display and update a position, polygon and line from a geoJson source (data is the position and field of view from an airborne camera). I want to change the style of the line and polygon from the default blue. I understand the leaflet-realtime extends L.geojson so I thought the following code should work but I get options.style is not a function. I have been looking at other examples to try and do this but have spent the day frustrated.
var lineStyle = {
color: 'black',
weight: 5,
opacity: 0.5
}
los = L.realtime({
url: 'http://127.0.0.1/geojson/los2.geojson',
crossOrigin: true,
type: 'json'
}, {
interval: 1 * 500,
style: lineStyle
}).addTo(map);
los.on('update', function(){
map.flyTo(
[this._features.los.geometry.coordinates[1][1],
this._features.los.geometry.coordinates[1][0]]
)
});
If anyone can point me in the right direction it would be hugely appreciated.
Thanks
Yes options.style must be a function - look at:
https://leafletjs.com/reference-1.7.1.html#geojson-style
Change your code:
var lineStyle = {
color: 'black',
weight: 5,
opacity: 0.5
}
los = L.realtime({
url: 'http://127.0.0.1/geojson/los2.geojson',
crossOrigin: true,
type: 'json'
}, {
interval: 1 * 500,
style: function() { return lineStyle; }
}).addTo(map);
los.on('update', function(){
map.flyTo(
[this._features.los.geometry.coordinates[1][1],
this._features.los.geometry.coordinates[1][0]]
)
});
I have a Google pie chart with the legend position set to labeled. My objective is to make all the text and legend marker lines black. Right now the lines are gray and so are the values-and-percentage numbers. Is there any way to make these all black?
var options = {
pieHole: 0.5,
pieSliceText: 'none',
textStyle:{color: 'black'},
legend: {position:'labeled', labeledValueText: 'both', alignment:'center',
textStyle: {
color: 'black',
fontSize: 12}, strokeColor: {color: 'black'},
},
};
Here is an example of the gray text and line marker I'm trying to make all black
Mutationobserver is what I needed since Google Charts have no built in commands to change these attributes.
var container = document.getElementById('pie_chart');
var chart = new google.visualization.PieChart(container);
chart.draw(view, options, observer);
var observer = new MutationObserver(function () {
$.each($('#pie_chart path[stroke="#636363"]'), function (index, path) {
$(path).attr('stroke', '#000000');
});
$.each($('#pie_chart path[fill="#636363"]'), function (index, path) {
$(path).attr('fill', '#000000');
});
$.each($('#pie_chart text[fill="#9e9e9e"]'), function (index, label) {
$(label).attr('fill', '#000000');
});
});
observer.observe(container, {
attributes: true,
childList: true,
subtree: true
});
And added this to the header.
<script src="//cdn.jsdelivr.net/npm/mutationobserver-shim/dist/mutationobserver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is the source of the code
Leaflet draw edges are too big and ugly, I've looked on a way to change its style and I came up with the following code:
draw: {
polyline: {
shapeOptions: this.onSelectionStyle
},
polygon: {
icon: new L.DivIcon({
iconSize: new L.Point(16, 16),
className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
}),
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: this.onSelectionStyle,
showArea: true
},
...
basically the className should do it, but this seems not to work at least with the latest version. do you have any idea how to change the style of the eges ?
I am using this:
L.Edit.Poly = L.Edit.Poly.extend({
options: {
icon: new L.DivIcon({
iconSize: new L.Point(10, 10),
className: 'leaflet-div-icon leaflet-editing-icon my-own-icon',
}),
},
});
I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.
Code Snippet
myForm.getEl().highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fij
Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'My Form',
id: 'myform',
renderTo: Ext.getBody(),
width: 500,
height: 250,
items: [{
xtype: 'textarea',
width: '100%',
hideLabel: true,
value: 'Some text'
},
{
xtype: 'textfield',
width: '100%',
hideLabel: true,
value: 'Some other text'
}],
buttons: [{
text: 'Highlight',
handler: function() {
Ext.getCmp('myform').getForm().getFields().each(function(field) {
field.inputEl.highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
});
}
}]
});
}
});
In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.
Hope it helps
....or even Better just get the form's Targeted EL.
App.myFormPanel.getTargetEl().highlight();
You won't have to manually iterate through each elements within the form.