I am building a webstore, where the quantity of displayed products is dinamically changing, by pressing "Show more" button. Background color should be changing multiple times while scrolling down and I found this article, which solves this problem, but it has fixed page height. Is it possible to change that?
You use a parameter to control the adaption rate and set this according to your needs if you don't know the page size on forehand (because a dynamic load for instance).
cStart = [250, 195, 56] // Gold
, cEnd = [179, 217, 112] // Lime
, cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]];
$(document).ready(function(){
$(document).scroll(function() {
var speed = 0.0005;
var p = $(this).scrollTop()* speed;
p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
$("body").css('background-color', 'rgb(' + cBg.join(',') +')');
});
});
Related
I have a VboxContainer as a child of a ScrollContainer and some text and buttons in it – a long list I can scoll through by finger-swiping on a touchscreen.
The code (based on https://github.com/godotengine/godot/issues/21137#issuecomment-414959543):
extends ScrollContainer
var swiping = false
var swipe_start
var swipe_mouse_start
var swipe_mouse_times = []
var swipe_mouse_positions = []
signal finger_is_swiping
func _ready():
mouse_filter = Control.MOUSE_FILTER_IGNORE
func _input(ev):
if ev is InputEventMouseButton:
if ev.pressed:
swiping = true
swipe_start = Vector2(get_h_scroll(), get_v_scroll())
swipe_mouse_start = ev.position
swipe_mouse_times = [OS.get_ticks_msec()]
swipe_mouse_positions = [swipe_mouse_start]
else:
swipe_mouse_times.append(OS.get_ticks_msec())
swipe_mouse_positions.append(ev.position)
var source = Vector2(get_h_scroll(), get_v_scroll())
var idx = swipe_mouse_times.size() - 1
var now = OS.get_ticks_msec()
var cutoff = now - 100
for i in range(swipe_mouse_times.size() - 1, -1, -1):
if swipe_mouse_times[i] >= cutoff: idx = i
else: break
var flick_start = swipe_mouse_positions[idx]
var flick_dur = min(0.3, (ev.position - flick_start).length() / 1000)
if flick_dur > 0.0:
var tween = Tween.new()
add_child(tween)
var delta = ev.position - flick_start
var target = source - delta * flick_dur * 8.0
#tween.interpolate_method(self, 'set_h_scroll', source.x, target.x, flick_dur, Tween.TRANS_QUAD, Tween.EASE_OUT)
tween.interpolate_method(self, 'set_v_scroll', source.y, target.y, flick_dur, Tween.TRANS_QUAD, Tween.EASE_OUT)
tween.interpolate_callback(tween, flick_dur, 'queue_free')
tween.start()
swiping = false
elif swiping and ev is InputEventMouseMotion:
var delta = ev.position - swipe_mouse_start
set_h_scroll(swipe_start.x - delta.x)
set_v_scroll(swipe_start.y - delta.y)
swipe_mouse_times.append(OS.get_ticks_msec())
swipe_mouse_positions.append(ev.position)
emit_signal("finger_is_swiping")
print ("finger is swiping")
It works quite nicely, but there are three hurdles I need help with:
While swiping, the print "finger is swiping" is being printed all the time, many times, and I therefore assume that the signal "finger_is_swiping" is being emitted as often as well. How can I have the signal being emitted only once per swipe? (Or is that a problem at all?)
How can I set a signal when my finger stops swiping (so when it's lifted from the touchscreen)?
I'd like the swipe-movement not to cause scrolling at all when touching a button in the list first. (My buttons work in a way so I can hold them down and make them not trigger by dragging the finger off... in such a case I'd like the list not to scroll despite the dragging.) I'd assume that I could have the button emit a signal which causes some "ignore swipe" or set the swipe speed to 0 maybe?
EDIT:
Yes, a simple swiping = false does this trick!
Have simple app using Cesium. I have basic entity with ellipse graphics, moving around, and I need to display its path, using PathGraphics, but it doesn't seem to work for me.
Here's code sample.
const position = new SampledPositionProperty();
const start = [16.096912, 40.4100289];
const startTime = JulianDate.now();
position.addSample(startTime, Cartesian3.fromDegrees(...start));
const diff = 0.0002;
const [x, y] = start;
for (let i = 0; i < 10; i += 1) {
const d = JulianDate.addSeconds(startTime, i + 1, new JulianDate());
const newPos = [x + diff * (i + 1), y + diff * (i + 1)];
position.addSample(d, Cartesian3.fromDegrees(...newPos));
}
app.entities.add({
ellipse: {
semiMinorAxis: 10,
semiMajorAxis: 10,
material: Color.RED,
},
path: {
resolution: 1,
width: 5,
material: Color.YELLOW,
},
position,
});
But when I launch it all I see is moving ellipse, but no path is drawn. Everywhere I searched they say you just have to have position as SampledProperty and it will work, but it doesn't seem to work for me.
In this case, as you can see, I generate data beforehand, but I also tried adding it in runtime - same result. The only working examples i was able to find where using czml - but it doesn't fit my needs - it will be real-time app.
I found the solution by digging through Cesium Sandcastle - you have to set availability property to entity with time range you want path to be shown. Would be cool if it was covered in documentation at least in some way.
Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.
Here's the code:
var element = document.getElementById('target'),
stage = new Kinetic.Stage({
container: element,
width: element.offsetWidth,
height: element.offsetHeight
}),
layer = new Kinetic.Layer();
layer.add(new Kinetic.Line({
points: [10, 10, 190, 190],
stroke: 'black',
strokeWidth: 1,
dashArray: [5, 4]
}));
stage.add(layer);
And you can see the behavior for yourself in here.
Fixed in IE-11 !
Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).
You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).
Code is taken from this SO post: dotted stroke in <canvas>
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dx ? dy/dx : 1e15;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0) xStep = -xStep;
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in
Lacrosse.
Short answer: Not supported.
Via a thread here, the creator of KineticJS addresses this issue:
"[T]he dashArray property now uses the browser-implemented dashArray
property of the canvas context, according to the w3c spec. Firefox is
a little behind at the moment."
If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.
I have never scripted in photoshop before, so I am wondering if this is possible. The following is currently done manually for over than 300 files. The next time round is for 600 files, therefore I am looking into automating it.
Steps:
Make Image Size to 54pixels Hight and 500px Width -- Found that this is doable.
Align Image Left.
Create a text layer and insert text -- Found that this is doable.
Align Text layer 1px to the right of the image.
Trim empty space.
Would appreciate any help and pointers. Thanks.
This script will get you started: Note that in your request you didn't mention what what the original image was going to be and shrinking it to 500 x 54 is going to stretch it one way or another. Step 2, Align the image left, was omitted as you didn't mention what you are aligning this image to. I suspect you are dealing with a large image and what to shrink it down (as long as it's not smaller than 500 x 54) and work from there. I've also omitted stage 4 as I've hard coded the position of the text to be 1 px from the right hand edge (and it vertically centered with Arial font size 18)
Anhyoo.. you should be able to alter the script to your needs.
// set the source document
srcDoc = app.activeDocument;
//set preference units
var originalRulerPref = app.preferences.rulerUnits;
var originalTypePref = app.preferences.typeUnits;
app.preferences.rulerUnits = Units.POINTS;
app.preferences.typeUnits = TypeUnits.POINTS;
// resize image (ignoring the original aspect ratio)
var w = 500;
var h = 54;
var resizeRes = 72;
var resizeMethod = ResampleMethod.BICUBIC;
srcDoc.resizeImage(w, h, resizeRes, resizeMethod)
//create the text
var textStr = "Some text";
createText("Arial-BoldMT", 18.0, 0,0,0, textStr, w-1, 34)
srcDoc.activeLayer.textItem.justification = Justification.RIGHT
//set preference units back to normal
app.preferences.rulerUnits = originalRulerPref;
app.preferences.typeUnits = originalTypePref;
//trim image to transparent width
app.activeDocument.trim(TrimType.TRANSPARENT, true, true, true, true);
// function CREATE TEXT(typeface, size, R, G, B, text content, text X pos, text Y pos)
// --------------------------------------------------------
function createText(fface, size, colR, colG, colB, content, tX, tY)
{
// Add a new layer in the new document
var artLayerRef = srcDoc.artLayers.add()
// Specify that the layer is a text layer
artLayerRef.kind = LayerKind.TEXT
//This section defines the color of the hello world text
textColor = new SolidColor();
textColor.rgb.red = colR;
textColor.rgb.green = colG;
textColor.rgb.blue = colB;
//Get a reference to the text item so that we can add the text and format it a bit
textItemRef = artLayerRef.textItem
textItemRef.font = fface;
textItemRef.contents = content;
textItemRef.color = textColor;
textItemRef.size = size
textItemRef.position = new Array(tX, tY) //pixels from the left, pixels from the top
}
Everything you listed is doable in a script. I suggest you start by reading 'Adobe Intro To Scripting' in your ExtendScript Toolkit program files directory (e.g. C:\Program Files (x86)\Adobe\Adobe Utilities - CS6\ExtendScript Toolkit CS6\SDK\English)
How does one go about giving a title to the axis in prefuse scatter plot?
At the moment my code reads the data from the file and a range for both x and y axis works in the code. All I need to do now is to add titles/names for the axis. The code I have at the moment shows:
//set up the actions
AxisLayout xaxis = new AxisLayout(group, "GD",
Constants.X_AXIS, VisiblePredicate.TRUE);
AxisLayout yaxis = new AxisLayout(group, POINTS,
Constants.Y_AXIS, VisiblePredicate.TRUE);
//yaxis.setScale(Constants.LOG_SCALE);
yaxis.setRangeModel(receiptsQ.getModel());
receiptsQ.getNumberModel().setValueRange(0,120,0,120);
xaxis.setLayoutBounds(m_dataB);
yaxis.setLayoutBounds(m_dataB);
// sets group,axis,values,bounds
AxisLabelLayout ylabels = new AxisLabelLayout("ylab", yaxis, m_ylabB);
NumberFormat nf= NumberFormat.getInstance();
nf.setMaximumFractionDigits(0);
ylabels.setNumberFormat(nf);
// AxisLabelLayout xlabels = new AxisLabelLayout("goal diff", xaxis, m_xlabB, 15);
AxisLabelLayout xlabels = new AxisLabelLayout("xlab",xaxis,m_xlabB,5);
// vis.putAction("xlabels", xlabels);
vis.putAction("xlabels", xlabels);
You have to do it by hand. I've done this and my code is open source, so you're welcome to take a look at it:
https://github.com/brycecr/msmexplorer/blob/acacia/MSMExplorer/src/edu/stanford/folding/msmexplorer/util/axis/AxisRotateRenderer.java
https://github.com/brycecr/msmexplorer/blob/acacia/MSMExplorer/src/edu/stanford/folding/msmexplorer/util/axis/AxisLabelLabelLayout.java
In the label renderer, all the labels are drawn as a combination of a line and a label. In this class, we just add an additional item to the layout with our graph.
This is not super clean at all...in particular, a line (actually one pixel) is still rendered for the label, but I'm lazy and this suits my needs...I think you could improve this if necessary, but you'd probably need to reach into the axis renderer and make it draw no line for your label items.
Let me know if you have any questions about the operation of this.
#Override
public void run(double frac) {
super.run(frac);
setLabPos(item, length/2.0d + width, bounds);
}
/**
* Set the layout values for an axis label item.
*/
protected void setLabPos(VisualItem item, double xOrY, Rectangle2D b) {
switch (getAxis()) {
case Constants.X_AXIS:
xOrY = super.isAscending() ? xOrY + b.getMinX() : b.getMaxX() - xOrY;
PrefuseLib.updateDouble(item, VisualItem.X, xOrY);
PrefuseLib.updateDouble(item, VisualItem.Y, b.getMaxY() + label.getFont().getSize()/3.0d + gridLab.getFont().getSize());
PrefuseLib.updateDouble(item, VisualItem.X2, xOrY);
PrefuseLib.updateDouble(item, VisualItem.Y2, b.getMaxY() + label.getFont().getSize()/3.0d + gridLab.getFont().getSize());
break;
case Constants.Y_AXIS:
xOrY = super.isAscending() ? b.getMaxY() - xOrY - 1 : xOrY + b.getMinY();
PrefuseLib.updateDouble(item, VisualItem.X, b.getMinX());
PrefuseLib.updateDouble(item, VisualItem.Y, xOrY);
PrefuseLib.updateDouble(item, VisualItem.X2, b.getMinX());
PrefuseLib.updateDouble(item, VisualItem.Y2, xOrY);
}
}
}