I'm using the simile timeline widget to create a timeline and I need to add images to the timeline. The images will probably be positioned at the bottom of a "band" but chances are I'll have to set the "top" and "left" styles per image (we want to put images in some of the empty areas to make it look nicer).
I know I can change the "icon" of an event and that will set an image but it's always at the top of the band and the image gets in the way of other events and since these images are not technically events I don't think they should be a part of the events database (right now it's all in a Google Doc which makes changing the timeline really easy).
I've tried to add new divs to the timeline div by manapulating the DOM (jQuery, appendTo) but that never works . . . not sure if it's a z-index thing or what.
I've explored using a "decorator" and maybe making my own custom decorator but, well, it seems to me someone MUST have wanted this before and I'm missing something easy. Ideas?
I got it! Basically, I created my own "decorator". First, it came in handy to be able to add decorators after the initial render. I found this on the simile google group.
Timeline._Band.prototype.addDecorator = function(decorator) {
this._decorators.push(decorator);
decorator.initialize(this,this._timeline);
decorator.paint();
}
Then, looking at the Timeline source for decorators, I copied the code for Timeline.PointHighlightDecorator and made my own . . called Timeline.PointPicture for now.
Related
I'll try to describe what I'd like to have.
At the moment, I have custom control Desk with:
an Accordion Container (dojo)
several Accordion Panes, of which
one contains custom control Agenda
In custom control Agenda, there's nothing really special, expect for
custom control Tiles
In custom control Tiles, I display meeting info in a nice way, as tiles. There can be multiple tiles on one row. In order to make things looking perfect, I have to spread these tiles over the full line, justified, using CSS (that part works, 99%). What doesn't work is that when the accordion is hidden when the page loads, I have no details on the size of each tile so I can't do my calculations (i.e. offsetWidth==0).
So I have to delay the calculations to when the accordion is activated and onShow is triggered. But how to pass this on downwards, all the way to the custom control Tiles?
Tiles is used in other places too, so it cannot be a fixed reference. It doesn't even know that it's inside an accordion...
Question:
How can I call/trigger a function that's inside the Tiles custom control from the top custom control, Desk, in a transparent way?
NB A code example, even an illustrative one, would be very complicated to make (I think).
Could someone give me a push into the right direction? Events and triggers maybe? Pass accordion id down to the Tiles cc and then do something brilliant?
Thanks!!
I have a solution right now, but it isn't exactly a beautiful and transparent one.
I gave the Tiles a styleClass="Tiles", and then I can find these Tiles using getElementsByClassName. It's not the proper way, but it's a way, the pragmatic one.
In a program I am creating, I need to have dragging. I figured out this part through W3schools but I can't seem to figure out how to customize it... What I'm trying to achieve is dragging but no ghost effect, and making it so the original image is hidden so it looks like it is only one image. Another thing I'm trying to do is get rid of the symbols. I'm clueless as to how to get rid of the symbols, and I can't manage to change the opacity of the ghost image... I've looked at a few other answers but I can't seem to get it to work.
My JSFiddle
#pointer1{pointer-events:none} //This prevents selecting of the drag. Not what I wanted
#pointer1{/*How to change the ghost?*/}
I would use jQuery for this. It will let you set options for the things you're looking for.
jQuery UI Drag Documentstion
I loaded individual STL structures into my 3-D viewer using three.js and I want to be able to click on individual structures in my 3-D viewer and a name tag appears onMouseClick or onMouseOver for that specific structure.
I think it has something to do with a coordinate point of that specific object or maybe just the total surface area of that object and then use a onMouseClick eventHandler to create a window but I'm not sure.
Is there any sample or open source code I can take a look at?
Thanks!!
Check any of the collision detection examples in the examples folder. Probably webgl_interactive_cubes.html is what you're after:
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html
This will show you how to find which element is behind the mouse.
I also wrote a tutorial on picking objects with three.js if you want to know a bit more about how the thing works internally:
http://soledadpenades.com/articles/three-js-tutorials/object-picking/
Then --you already know where the mouse is from the mousemove or mouseclick event-- just create a span or something similar, and place it in that position with css's left and top properties, for example
I'm developing an iPad app using PhoneGap and jQuery Mobile and I'd like to create a preview pane in a carousel. The preview pane would include a smaller version of each of the other panes, scaled so they fit inside the single pane. The panes are not static and can be updated at any time using WebSockets, and the preview should be updated simultaneously. There can also be any number of panes (although to keep things simple, assume an upper limit of 9). For performance purposes, assume each pane can have upwards of 200 DOM objects attached to it. To make it slightly more complicated, the carousel can exist on more than one different page.
I've been contemplating the best way to go about implementing this preview pane, and, before inventing a pair of Complicator's Gloves, would like to hear back from the community on any possible better strategies.
A couple methods I have been considering include:
Cloning each pane and then using a CSS transform to scale it to an appropriate size, based on how many panes there are, and then attaching the clones to the preview pane.
Store each pane as a jQuery object in a variable and draw each pane and the preview pane using that object (possibly necessitating redrawing the entire carousel every time there is an update, depending on how much effort I want to make identifying and updating deltas).
Repositioning all the panes so that they exist inside the preview pane when the preview pane is active (this might break the carousel, or at least make it look slightly bizarre as a user swipes a pane over but hasn't actually moved on to that pane yet).
Is there anything I'm missing? It would be nice if there was an easy way to "link" two elements together to make one mirror the other, but apply different CSS to one or the other (for zooming). I suppose it might be possible to do this by creating an event that would fire and then adding a listener to its clone, which would then copy the html of the updated element to itself (probably wouldn't be too terribly to difficult to write a jquery plugin to manage this).
Any better suggestions?
I am not sure what phonegap allows for as far as rendering options go, but my first instinct would be to take a screen shot of the relevant pane. Perhaps phonegap has this built in?
Another option is a javascript library which will clone the DOM and create an HTML5 canvas element. You can either then display the canvas natively, or convert the canvas data in to image data.
Here is one such library: http://html2canvas.hertzen.com/
Given the large number of elements needed, I would hesitate to clone those over and over again. However, if live previews are a necessity, that might be more efficient than using image files or the canvas. You could fire off the canvas draw function after major changes, but probably wouldn't want to do it after the end of every frame of animation.
Using OpenLayers, is there an easy way to tell if a map image has loaded correctly, perhaps using the “loadend” event?
We are reading map tiles from GeoServer, and using OpenLayers to display them. Most of the time, the image displays in a reasonable time. Occasionally (especially when scrolling back and forth using the mouse wheel), the “loadend” event is fired as if the image was loaded, but nothing is displayed.
When I investigate the HTML, it seems that the image has the correct URL, but has a background colour of pink (usually it is transparent), and I can’t see anything useful in the event object.
Any ideas?
It is likely that GeoServer is simply failing to generate the tiles from time to time. There may be some tweaking you can do to improve the performance, so I might invest some time looking into that.
From an OpenLayers perspective, there are a few simple things you can do that may help. First, there is a property called OpenLayers.IMAGE_RELOAD_ATTEMPTS that tells the layer how many times to retry if it fails to get the image. This value defaults to 0 (zero). I would try setting it to 3 at the top of your code and see if that helps.
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
Also, if you get a broken tile and want it to show up as something other than pink, you can update the OpenLayers.Util.onImageLoadErrorColor value at the top of your code.
OpenLayers.Util.onImageLoadErrorColor = 'transparent';
You can browse the source for all of this here: http://trac.openlayers.org/browser/trunk/openlayers/lib/OpenLayers/Util.js
with OpenLayers 2.12 the css needed is
.olImageLoadError
{
display: none !important;
}
If there was an error it should have the following CSS class in the HTML:
olImageLoadError
if you want to hide it add the following to your stylesheet:
.olImageLoadError {
display: none;
}