Shadows not working on FabricJS - css

I have updated FabricJS version 1.5 to 1.6(beta), then the text shadow effects does not work now. Here is my function. How to fix this issue?
$('#text-shadow-set').change(function (){
if(isText()) {
if(this.checked) {
var tmp = $('#text-shadow-offset-slider').slider('option','value');
var shadVal = (tmp==''||tmp==0) ? 20 : tmp;
currentElement.setShadow({
color: '#000',
blur: 5,
offsetX: shadVal,
offsetY: shadVal
});
canvas.renderAll();
} else {
currentElement.setShadow(null);
canvas.renderAll();
}
}
});

Text and shadows seem to work fine. Check the demo below:
var text = new fabric.Text('Text with Shadow', {
left: 50,
top: 150,
fill: 'red',
strokeWidth: 1,
stroke: 'black',
});
text.setShadow({
color: 'black',
blur: 5,
offsetX: 10,
offsetY: 10,
opacity: 0.5,
});
canvas.add(text);
canvas.renderAll();
DEMO
var canvas = new fabric.Canvas('c');
var text = new fabric.Text('Text with Shadow', {
left: 50,
top: 150,
fill: 'red',
strokeWidth: 1,
stroke: 'black',
});
text.setShadow({
color: 'black',
blur: 5,
offsetX: 10,
offsetY: 10,
opacity: 0.5,
});
canvas.add(text);
canvas.renderAll();
canvas {
border: 1px solid #f00;
margin: 0px;
display: block;
}
<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

Related

How can I decrease the height of the PieChart Grid?

PieChart
How can I decrease the height of the PieChart Grid?
I'm using jqplot and javascript. This is what I have:
function skinPie() {
this.cfg.grid = {
background: '#FF0000',
borderColor: '#FF0000',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
rendererOptions: {
textColor:'#0c0c0c',
}
};
this.cfg.seriesDefaults = {
renderer: $.jqplot.PieRenderer,
shadow: false,
lineWidth: 1,
markerOptions: {
shadow: false,
size: 7,
style: 'circle',
}
};
}

how to customize vAxis gridlines become dash with google API

I'm trying to customize vAxis gridlines become dash. But, it didn't run very well, everytime I change stroke-dasharray value in css it still blur.
please, is someone know how to change vAxis gridline into dash?
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {
width:'100%',
focusTarget: 'category',
backgroundColor: 'transparent',
chartArea: {
left: 20,
top: 10,
width: '100%',
height: '70%'
},
bar: {
groupWidth: '70%'
},
hAxis: {
textStyle: {
fontSize: 9,
color:'#929496'
}
},
vAxis: {
baselineColor: '#e6e6e6',
gridlines: {
color: '#e6e6e6',
count: 9
},
textStyle: {
fontSize: 9,
color:'#929496'
}
},
legend: {
position: 'bottom',
textStyle: {
fontSize: 9,
color:'#929496'
}
},
animation: {
duration: 300,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#chart_div svg > g:nth-child(3) > g:nth-child(2) > g:first-child rect{
fill: none;
stroke-width: 1;
stroke: #ddd;
stroke-dasharray: 5 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How do you get a CSS hover to trigger on a famo.us surface?

When I create a surface and assign it a class the hover defined in CSS is not working. It doesn't seem to get the mouse events. How do I turn them on.
function _createSurface(content,color){
return new Surface({ content: content,
size: [undefined, undefined],
classes:['select-button'],
properties: {
backgroundColor: "rgb(183, 232, 183)",
color: "rgb(51, 51, 51)",
fontSize:'10pt',
textAlign: 'center',
paddingTop:'2pt',
border: '1pt solid rgb(135, 192, 140)'
}
});
}
Below is the class in the css
.select-button:hover {
border-color:rgb(49, 202, 155);
background-color: rgb(171, 237, 195);
}
CSS
Should work as the snippet below shows.
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [undefined, 100],
classes: ['my-surface'],
content: 'Famo.us Hover'
});
mainContext.add(surface);
});
require(['main']);
.my-surface {
font-size: 1em;
border: 5px solid;
border-color: rgb(49, 202, 155);
background-color: rgb(171, 237, 195);
}
.my-surface:hover {
font-size: 2em;
border: 5px dotted;
border-color: rgb(10, 10, 10);
background-color: rgb(255, 0, 0);
}
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
Javascript (and jQuery)
Use a solution that covers most browsers. The snippet below shows an example without CSS using jQuery hover method.
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var overProperties = {
fontSize: '2em',
border: '5px dotted',
borderColor: 'rgb(10, 10, 10)',
backgroundColor: 'rgb(255, 0, 0)'
};
var outProperties = {
fontSize: '1em',
border: '5px solid',
borderColor: 'rgb(49, 202, 155)',
backgroundColor: 'rgb(171, 237, 195)'
};
var surface = new Surface({
size: [undefined, 100],
content: 'Famo.us Hover',
properties: outProperties,
attributes: {
id: 'mySurface'
}
});
function _attachHover() {
var thisSurface = this;
$("#mySurface").hover(
function(event) {
// The mouse has entered the element
thisSurface.setProperties(overProperties);
},
function(event) {
// The mouse has left the element
thisSurface.setProperties(outProperties);
}
);
}
surface.on('deploy', _attachHover);
mainContext.add(surface);
});
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
Update. I couldn't get it working with CSS, but the next best thing is to use the mouseover mouseout events for the surface. NOTE: doing s.setClasses([..]) in the event updated the DOM but the surface didn't repaint.
The events below worked.
function _createSurface(content,color){
var s = new Surface({ content: content,
size: [undefined, undefined],
classes:['select-button'],
properties: {
backgroundColor: "rgb(183, 232, 183)",
color: "rgb(51, 51, 51)",
fontSize:'10pt',
textAlign: 'center',
paddingTop:'2pt',
border: '1pt solid rgb(135, 192, 140)'
}
});
s.on('mouseover',function(e){
this.setProperties({ backgroundColor: 'rgb(171, 237, 195)',
borderColor:'rgb(49, 202, 155)'});
});
s.on('mouseout',function(e){
this.setProperties({ backgroundColor: 'rgb(183, 232, 183)',
borderColor:'rgb(135, 192, 140)'});
});
s.pipe(this);
return s;
}

How can I bring the tooltip to the top of chart

I now have a google chart like this bellow picture
Now I want to move the tooltip to the top of chart (dont care the position of my mouse).
How can I do it.
Here is my code :
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Time');
chartData.addColumn('number', 'Average Score');
chartData.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
chartData.addRows(data);
var options = {
chartArea: { left: 0, top: 100, width: "100%", height: "100%" },
title: '',
opacity: 100,
backgroundColor : {fill: '#000'},
hAxis: {
textPosition: 'none',
titleTextStyle: {color: '#333'},
titleTextStyle: {color: '#2902A3'},
},
vAxis: {
textPosition: 'none',
opacity: 100,
minValue: 0,
gridlines: { color: '#0D2B56', count: 10 },
baselineColor: 'white',
},
series:{
0:{
color: '#3C93FF',
areaOpacity: '0.68'
}
},
crosshair: {
orientation: 'vertical',
trigger: 'focus',
color: '#fff'
},
legend: 'none',
tooltip: {isHtml: true},
};
google.load("visualization", "1", { packages: ["corechart"] });
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(chartData, options);
I also use this function to create tooltip's content
var createToolTip = function (name, value) {
return '<div class="googletooltip" ><span>' + name + ':</span><span style="padding-left:20px" >' + value + '</span></div>';
}
and this style also
.googletooltip{
color:#fff;
border-style: solid;
border-width: 2px;
border-color: #3882C4;
background: #000;
padding:2px 15px 2px 15px;
font-weight: bold;
}
Thank a lot
Try adding a top property and a position property for the .googletooltip class. If not, try using the margin property if the other properties are not working. Work around these three properties and see if you will be able to move tooltip up. Let me know if it still isn't working.
.googletooltip{
color:#fff;
border-style: solid;
border-width: 2px;
border-color: #3882C4;
background: #000;
padding:2px 15px 2px 15px;
font-weight: bold;
}
Where are you calling createToolTip function? Is it called while generating data chartData.addRows(data);?
Ref: check how createCustomHTMLContent function is used # https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

create and set ios refresh buttons in titanium

I know how to create and set the iOS refresh buttons in titanium but i do not know how to make them actually refresh data in tabs/windows. I have created refresh buttons for my app.js and four other tabs but it does not refresh data.
var Cloud = require('ti.cloud');
var scrollView4 = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: true
});
Titanium.UI.currentWindow.add(scrollView4);
var currentWin4 = Titanium.UI.currentWindow;
var refreshBtn = Titanium.UI.createButton({
Color: 'black',
systemButton : Titanium.UI.iPhone.SystemButton.REFRESH
});
currentWin4.setLeftNavButton(refreshBtn);
currentWin4.add(refreshBtn);
var l1 = Ti.UI.createLabel({
left: 10,
top: 15,
width:'auto',
height:40,
color: '#1E90FF',
text: 'About us',
font: {
fontWeight: 'bold',
fontSize: 20
}
});
scrollView4.add(l1);
var l2 = Ti.UI.createLabel({
left:10,
top: 50,
width:'auto',
height:40,
color: '#336699',
text: 'photo sharing app',
font: {
fontSize: 13
}
});
scrollView4.add(l2);
var l3 = Ti.UI.createLabel({
left: 10,
top: 90,
width:'auto',
height:40,
color: '#336699',
text: '',
font: {
fontSize: 13
}
});
scrollView4.add(l3);
var l5 = Ti.UI.createLabel({
left: 10,
top: 170,
width:'auto',
height:40,
color: '#336699',
text: 'locate us!',
font: {
fontSize: 13
}
});
scrollView4.add(l5);
var l6 = Ti.UI.createLabel({
right: 10,
top: 250,
width:'auto',
height:40,
color: '#1E90FF',
text: 'Development & API',
font: {
fontWeight: 'bold',
fontSize: 20
}
});
scrollView4.add(l6);
var b1 = Ti.UI.createButton({
right: 10,
top: 290,
width:'auto',
height:40,
color: '#336699',
title: 'Development & API',
font: {
fontSize: 13
}
});
scrollView4.add(b1);
var l9 = Ti.UI.createLabel({
center: 0,
top: 460,
width: 'auto',
height: 40,
color: '#1E90FF',
text: 'complaints?'
});
scrollView4.add(l9);
var b2 = Ti.UI.createButton({
center: 0,
top: 500,
width:'auto',
height: 40,
color: '#336699',
title: 'talk to us'
});
scrollView4.add(b2);
var emailDialog = Titanium.UI.createEmailDialog({toRecipients:['zyaine#gmail.com']});
emailDialog.Subject = ('');
emailDialog.messageBody = '';
b2.addEventListener('click',function(e)
{
emailDialog.open();
});
emailDialog.addEventListener('complete',function(e)
{
if (e.result == emailDialog.SENT)
{
alert("message sent");
}
else
{
alert("message not sent");
}
You have to implement an event handler
refreshBtn.addEventHandler('click', function(e) {
//Add code here that will fetch row data and redraw.
}
Without having more info it is tough to answer more specifically
I don't see anything in your code that represents any data that could be refreshed... in general, you need a "click" event handler for the button.
Inside the click handler, you can for example use the setData() method on a TableView object to set data for the TableView.
Or for a WebView, you could reload it's URL.
If you want to repaint the Window/View I'm afraid there is no dedicated method for that. You could try if applyProperties() causes a repaint. But I'm not sure why one would want to do that in the first place.
It would be helpful if you tell us more about the data you want to refresh. What kind of data, where does it come from etc.

Resources