I am trying to achive a feature where the user will be able to drag a card component up or down for either extending the content and make the card cover the screen or close the card. The card is resting above a map.
I found this one svelte-gestures package with pan. It works like a sharm when the card sits on the top of the screen but when i put it at the bottom and try to get it to move up i run into all kind of diffcult models that doesnt work.
Here is the code that works with a card at the top extending its height downwards:
<script>
import { pan } from 'svelte-gestures';
let cardHeight = 100;
let initialY = 0;
let screenheight = window.innerHeight;
function handlePan(event) {
let delta = event.detail.y - initialY;
cardHeight += delta;
initialY = event.detail.y;
}
</script>
<div
use:pan="{{delay: 0}}"
on:pan="{handlePan}"
style="height: {cardHeight}px; background-color: lightblue; overflow: hidden; position: absolute; left: 0; right: 0;"
>
<!-- Card content here -->
<div style="height: {cardHeight}px;">
<h1>Card</h1>
<p>Extend and de-extend me!</p>
</div>
</div>
I tried using screenheight and inverting the logic but i just seem to run into very strange problems with the card lagging or flipping all over the place.
Any help would be appreciated!
Best Regards,
Rasmus
Related
I want a scrollbar for a label when the label more then the chart height. I mentioned in image where I want scrollbar. Actually sometime I have many labels therefore.
As described in the Documentation here:
https://www.amcharts.com/docs/v4/tutorials/chart-legend-in-an-external-container/#Making_legend_scrollable
You need to put the Legend into an external div thats inside a wrapper div.
The Div Structure:
<div id="legendwrapper">
<div id="legenddiv"></div>
</div>
Putting the legend in the external div:
var legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
Then you can make it scrollable by styling it like this:
#legenddiv {
width: 150px;
}
#legendwrapper {
max-width: 120px;
overflow-x: none;
overflow-y: auto;
}
A simple way to do this with AMCharts 4
chart.legend = new am4charts.Legend();
chart.legend.position = "right"; // Positionning your legend to the right of the chart
chart.legend.scrollable = true: // Make it scrollable
See a full example as below :
https://codepen.io/team/amcharts/pen/eYmLvoR
I have a xychart with labels on the y axis. Every second label is being hidden:
Google suggests that I can set:
valueAxis.autoGridCount = false;
and:
valueAxis.gridCount
to the number of grids required by the data.
...but it doesn't have any effect, autoGridCount seems to be missing in the V4 documentation and there is no mention of it being removed.
How can I programmatically set gridcount?
EDIT: JSFiddle here
As you already figured out you can use axis.renderer.minGridDistance to show all labels:
categoryAxis.renderer.minGridDistance = 0;
To adjust the row height you can use series.columns.template.height to adjust the height of each element. I would suggest to set it to 100% and set a small border to the items:
series.columns.template.stroke = am4core.color('#fff');
series.columns.template.strokeWidth = 1;
series.columns.template.strokeOpacity = 1;
series.columns.template.height = am4core.percent(100);
To adjust the row height I would recommend increasing the chart height in general, because amcharts is trying to display all data in the area you provide. So increasing the height of the chart will cause all rows to have equal height and fill the provided area.
If you have varying data and don't know the number of rows, you can set the height of the chart dynamically according to the length of your data array and use an html scrollbar:
JavaScript:
document.getElementById('chart').style.height = `${chart.data.length * 50}px`;
HTML:
<div class="container">
<div id="chartdiv"></div>
</div>
CSS:
.container {
max-height: 300px;
overflow-y: auto;
}
#chartdiv {
min-height: 200px;
}
Here I created a code pen to show my suggestion.
How do I put the canvas on top of my website, with position: absolute, so that my animation happens on top of my regular website. Now when I animate, the canvas background becomes white so I can't see my website. BUT I want to see both my website and the animation that is lying on top of it.?
My end goal is to have tiny circles follow my fingers when I touch the screen on a mobile phone, but before I can achieve that, I have to know that I can animate on top of other elements first. At least, that is what I think at the moment.
Please help :)
Use ctx.clearRect() for your animation. I also added background-color:transparent just in case, but it works without it.
var ctx = canvas.getContext('2d');
canvas.height = innerHeight;
canvas.width = innerWidth;
function rad(deg){
return deg*Math.PI/180;
}
var t = 360;
function loop(){
requestAnimationFrame(loop);
ctx.clearRect(0,0,innerHeight,innerWidth);
ctx.beginPath();
ctx.arc(100+50*Math.sin(rad(t)),100+50*Math.cos(rad(t)),40+20*Math.sin(rad(t)),0,Math.PI*2);
ctx.fillStyle='rgba(255,255,20,0.8)';
ctx.strokeStyle='red';
ctx.lineWidth = 5;
ctx.fill();
ctx.stroke();
t=t>0?t-5:360;
}
loop();
canvas{
position:absolute;
background-color:transparent;
}
<canvas id=canvas></canvas>
<h1>
Your website.
</h1>
<h2>
Words words words.
</h2>
words words words words
This is related a question I posted earlier
d3 got slow all of a sudden
In that question, I pointed out a slowdown in d3.js that happened a few versions back (3.2). The slowdown is most noticeable in IE, but is definitely there in other browsers as well. The problem comes up when clicking the mouse, and it takes a long time (2.5 seconds in IE) before the mouse event even gets to our code. The problem is caused by the amount of data in the plot. Simple scatterplots do not have this problem.
No answers were forthcoming on the topic, so I am solving the problem a different way. I am using nested divs like this:
<div class = "plot_container" id = "thing_plot_container">
<div class = "ghost_container" id = "thing_ghost_container"></div>
</div>
And this set of styles:
div.plot_container {
position: relative;
margin:0px; padding:0px; /* insurance */
border: none;
}
div.ghost_container {
position: absolute;
margin:0px; padding:0px; /* insurance */
top: 0px;left: 0px;
width:0px; height:0px; /* width and height are irrelevant */
overflow: visible; /* insurance */
border: none;
}
This lets me put my d3.js plot in the outer plot_container div and a separate div in ghost_container that I attach mouse events to.
Here is the rest of the relevant code. First the main d3 svg:
var div = d3.select("body").append("div")
.attr("class","tooltip")
.style("opacity",0);
var viewportWidth = window.innerWidth - 40;
var viewportHeight = window.innerHeight - 80;
var svg = d3.select("#thing_plot_container").append("svg")
.attr("id", "mySVG")
.attr("width",viewportWidth)
.attr("height",viewportHeight)
.call(zoom)
.on("dblclick.zoom", null)
//.on("mousewheel.zoom", zoomFun)//for FF
.on("DOMMouseScroll.zoom", zoomFun)//for FF(1.7 or earlier)
.on("wheel.zoom", zoomFun)
.append("g")
.attr("class", "main")
.attr("transform","translate("+(left_shift)+","+(top_shift)+")");
And this is the ghost div overlaying the regular div:
//
// set up ghost/overlay svg element to handle mouse clicks
//
var use_overlay = true;
var catcherWidth = viewportWidth;
var catcherHeight = viewportHeight;
var svgns = "http://www.w3.org/2000/svg";
if (use_overlay == true){
var mouse_div = document.getElementById('thing_ghost_container');
var mouse_svg_container = document.createElementNS(svgns, "svg");
console.log('replace these magic numbers with viewportWidth and height');
mouse_svg_container.setAttribute("width",catcherWidth+"px"); // clips on chrome/ff if not done this way
mouse_svg_container.setAttribute("height",catcherHeight+"px");
mouse_div.appendChild(mouse_svg_container);
var rect_mouse = document.createElementNS(svgns, "rect");
rect_mouse.setAttribute("x",0);
rect_mouse.setAttribute("y",0);
rect_mouse.setAttribute("fill","blue");
rect_mouse.setAttribute("fill-opacity",0.05); // set this to 0.0 when working
rect_mouse.setAttribute("width", catcherWidth+"px");
rect_mouse.setAttribute("height", catcherHeight+"px");
rect_mouse.setAttribute("onclick", "ghost_click(evt)"); // this HAS to be evt to get all browsers cooperating
// leaving these mouse down/mouseup events to the original svg does not work. The overaly svg kills it
rect_mouse.setAttribute("onmousedown", "ghost_mousedown(evt)");
rect_mouse.setAttribute("onmouseup", "ghost_mouseup(evt)");
mouse_svg_container.appendChild(rect_mouse)
}
This works very well as far as it goes. This completely sidesteps the slowdown issue with element-heavy plots like scatter plots. The mouse click event immediately gets served this way. The problem is that I cannot grab with the mouse and pan my chart! I need help getting the mouse events passed into the d3 pan/zoom code.
Here is a fiddle showing what I have so far:
https://jsfiddle.net/pkrouse/5sbqchnn/
Is it possible to detect screen rotation? I'm woking on the touch screen driver on mac, so I want to know if the screen is rotated.
MacBooks (and Thinkpads) have an accelerometer used to detect sudden motion (i.e. being dropped) to prevent the HD head from crashing. The accelerometer data is exposed via webkit APIs.
Native APIs for accelerometer data are only exposed via private Apple-only interfaces, but Amit Singh has published his documentation for the sudden motion sensor API here.
Note that he's already published a free program that does what you're trying to do, called SMSRotateD. It'll rotate the MacBook screen as you flip the device. There's also a cool sample that has a "gyroscopic" window which will remain top-up as you tilt your device randomly.
Hope this HTML will be helpful (below and working version http://jsfiddle.net/b7Efq/)
Also, you can check SeisMac. They also provide a working library
<html>
<head>
<style>
.angle { height: 100px; }
#alpha { background-color: red; }
#beta { background-color: green; }
#gamma { background-color: blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var set_bar = function( id, value ) {
var max_width = $(window).width();
$( id ).width( value * max_width );
}
var normalize_angle = function( deg ) {
var x = ( (deg + 180) / 360 ) % 1.0;
return (x < 0) ? (x + 1.0) : x;
}
window.addEventListener("deviceorientation", function(event) {
set_bar( "#alpha", normalize_angle(event.alpha));
set_bar( "#beta", normalize_angle(event.beta + 180));
set_bar( "#gamma", normalize_angle(event.gamma));
}, true);
</script>
</head>
<body>
<div class="angle" id="alpha"> </div>
<div class="angle" id="beta"> </div>
<div class="angle" id="gamma"> </div>
</body>
</html>