If I want show only one item for today, nothing are shown, ex: (Change the date for today)
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2021-12-16'},
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
Example Code Pen: https://codepen.io/nuno-soares-the-scripter/pen/xxXqvLP
The linked CodePen is using vis.js v4.21.0 which was released in October 2017 and is now deprecated as per https://github.com/almende/vis. The issue described at https://github.com/almende/vis/issues/3616 is occurring in this older version. This causes visibility: hidden; to be added to the visualization elements inline CSS.
Two ways to resolve this:
1. Update to vis-timeline
Update from the depreciated vis.js v4.21.0 to the latest version. After vis.js was depreciated the components were split into separate modules, the module for the timeline being vis-timeline at https://github.com/visjs/vis-timeline.
As per the GitHub example the JavaScript and CSS sources should be updated. Updating these on the CodePen displays the timeline.
<script type="text/javascript" src="https://unpkg.com/vis-timeline#latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline#latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
2. Set Start Date
If you cannot use vis-timeline and must remain on this depreciated version then adding a start date to the options object will also display the timeline.
var options = {start:'2021-12-16'};
Related
I was wondering how I would go about dragging/sliding left to reveal the timestamp on react native. I am using a flatlist in react-native and I have the timestamp data but I am unsure of how to render the timestamps on slight drag. Anyone have detailed ideas on how to do this. I have included images of current implementation and iMessage slide/drag. This feature is also on Instagram (ios version at least). I should add that I'm not trying to do a drag and drop feature more like just a solution review what is not currently in the view from a slide/drag
Current App
Current iMessage
This is the eventual solution i came up with all credit from #Abe and reading the gesture-handler documentation referenced above. I
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
const translateX = useSharedValue(0)
const startX = useRef(0)
My flatlist renders elements like this now
<Animated.View
className="mx-2 flex-1 flex-row"
style={sty}
onTouchStart={(e) => {
startX.current = e.nativeEvent.pageX
}}
onTouchMove={(e) => {
const delta = startX.current - e.nativeEvent.pageX
if (delta > 0) {
translateX.value = -delta / 2
}
}}
onTouchEnd={() => {
translateX.value = withSpring(0)
}}>
...
</Animated.View>
The most common way to handle this is with a PanGestureHandler from react-native-gesture-handler and an Animated.View from react-native-reanimated.
Wrap your component in one, and make the View that you want to move into an Animated.View. (The component that the PanGestureHandler wraps also should be an Animated.View.) Create a shared value (from Reanimated) that represents the x offset of the component. Then create a handler method that responds to the drag gesture and changes the shared value. You may want to add some limits, like not scrolling past a certain offset in either direction. Then, use the shared value in an animated style (something like left: offsetX,) that you apply to your Animated.View.
Since you're using this inside a scrollable list, make sure to set the activeOffsetX prop to something like [-5, 5]. This means that if the user is only trying to scroll up and down, your gesture handler won't steal that touch.
The example in the gesture-handler docs should help.
So I saw an old post here:
https://discourse.threejs.org/t/is-there-a-way-to-increase-scene-environment-map-exposure-without-affecting-unlit-materials/13458/4
That says... "If you apply the env map to Scene.environment, it is automatically used as the environment map for all physical materials in the scene (assumed the material’s envmap is not set)."
So tried this using an Aframe component on the scene:
AFRAME.registerComponent('setenvironment', {
init: function () {
var sceneEl = this.el;
var loader = new THREE.CubeTextureLoader();
loader.setPath('./');
var textureCube = loader.load([
'./images/py.png', './images/pz.png',
'./images/nx.png', './images/ny.png',
'./images/px.png', './images/nz.png'
]);
textureCube.encoding = THREE.sRGBEncoding;
sceneEl.object3D.environment = textureCube;
}
});
The environment attribute is successfully set, but the other objects materials still have envMap set to null and the environment lighting does not take effect on the materials.
Any ideas?
aframe 1.0.4 uses three.js revision 111dev. The scene's environment property was introduced in revision 112 (source).
If you use the aframe master build - it seems to be working properly (as its based on three.js r119).
Otherwise, you'll have to iterate through the meshes, and set the material.envMap property manually.
It's very convenient to load GLTF- model in aframe, but no case is found that contains envmap texture. I'd like to see that the official can provide the same case as three official. pmremGenerator.fromEquirectangular(texture) function is used to make gltf model produce real reflection effect
https://threejs.org/examples/#webgl_loader_gltf
https://threejs.org/examples/#webgl_materials_envmaps_hdr
One way would be creating a custom component, which will:
wait until the model is loaded
traverse through the object's children
if they have a material property - apply the envMap
The envmap needs to be a CubeTexture - which adds another level of complication, when you want to use a panorama. You can use a the WebGLRenderTargetCube - It's an object which provides a texture from a Cube Camera 'watching' the panorama.
Overall The component code could look like this:
// create the 'cubecamera' objct
var targetCube = new THREE.WebGLRenderTargetCube(512, 512);
var renderer = this.el.sceneEl.renderer;
// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
let mesh = this.el.getObject3D("mesh");
// load the texture
var texture = new THREE.TextureLoader().load( URL,
function() {
// create a cube texture from the panorama
var cubeTex = targetCube.fromEquirectangularTexture(renderer, texture);
mesh.traverse(function(node) {
// if a node has a material attribute - it can have a envMap
if (node.material) {
node.material.envMap = cubeTex.texture;
node.material.envMap.intensity = 3;
node.material.needsUpdate = true;
}
});
}
Check it out in this glitch.
I was having the same issue and i found that cube-env-map from a-frame-extras works like a charm.
View component on GitHub
Its docs describe it as:
Applies a CubeTexture as the envMap of an entity, without otherwise
modifying the preset materials
And the code is super simple:
yarn add aframe-extras
import 'aframe-extras'
<a-entity
gltf-model="src: url('/path/to/file.glb')"
cube-env-map="path: /cubeMapFolder/;
extension: jpg;
reflectivity: 0.9;">
</a-entity>
In THREE demo, I remember that WebGLRenderTargetCube was used to produce envmap, but recently it was found thatPMREMGenerator was basically used to generate envmap texture with mipmap. It also supports HDR image format, making gltf model better than JPG texture.
I don't know how these JS modules PMREMGenerator and RGBELoader are used together with the components of Aframe. Can someone provide such an example in Aframe ,Thanks
That's the same High dynamic range (RGBE) Image-based Lighting (IBL) using run-time generated pre-filtered roughness mipmaps (PMREM)
I am using Masonry (and imagesLoaded) with Wordpress:
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
and my site includes a number of images that ranges between 1 to 8 MB. I have noticed that the loading times are very long (I am using no pagination on Wordpress, so the page loads all content) and the grid keeps resizing until all images are loaded.
Is there a way to fix this?
This is my custom js:
$(document).ready(function() {
let $masonryGrid = $('.masonry-grid');
$masonryGrid.imagesLoaded(() => {
$masonryGrid.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
gutter: 0,
percentPosition: true,
transitionDuration: 0
});
});
});
You can create a preview version for all of your images - same dimensions, but drastically downscaled quality. Maybe with a "Loading" text or symbol over them.
Those previews should have the same filename with a suffix. You will have pairs of images like this
image001.jpg
image001_thumb.jpg
Then the individual image elements will then automatically start loading the full version :
<img src="image001_thumb.jpg" onload="this.src=this.src.replace('_thumb','');" />
And if you cannot directly influence image elements like this, add this to your custom .ready function (this is an example that would affect all images, just to give you an idea, you have to filter out only the images that are inside the grid)
var images = document.getElementsByTagName('img');
for(var i=0;i<images.length;i++){
// If the image is already loaded, change it immediately
if(images[i].naturalWidth != 0) images[i].src = images[i].src.replace('_thumb','');
else // If not, give it an onLoad function to change after it does
images[i].onload = function(){
this.src = this.src.replace('_thumb','');
}
}
For a better experience, maybe you can try to reveal each item after its image has loaded.
See the extra exemples section on Masonry docs
Iteratively reveal items after each image is loaded. See explanation on issue #501
I am trying to use Jcrop with preview pane in the page of changing avatar. However, after uploading new image file, when I call setImage to set the new image(with different width/height) and also set the attr of the preview image, the preview pane show up incorrectly. I use firebug the trace, it seems the img is still using the height, width of previous image. I modify the tutorial3 in the download package, simply adding a botton to change the image to see if the preview pane is correct or not. I seem to be the same error. Here below is the code for button click function.
Any solutions?
$('#img1').click(function(e) {
$('#preview').attr('src','demo_files/img50d5753eb067c.jpg');
jcrop_api.setImage('demo_files/img50d5753eb067c.jpg');
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
boxWidth: 450
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
});
I see the same problem with yours in this topic Change an Image while using JCrop and the answer of AdmSteck in which is the best one.
Hope this help!
within the unminified version of the plugin "boundx and boundy" are declared as local variables that do not get updated outside of the setImage function. All you need to do is remove the 'var' for these two variables and make them global.
from line 328,
var boundx = $img.width(),
boundy = $img.height(),
$div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
change to
boundx = $img.width();
boundy = $img.height();
var $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);