I'm currently trying to create a usable HTML/CSS/JS based dashboard that behaves reasonably well on an iPad. The Dashboard will contain several widgets with mainly charts. I started using gridster and it works well on an iPad (the only one i found, the rest are either based on gridster[2], don't support an iPad or to overweight / slow [3]).
However, when the widget content is more complex (e.g. a chart), everything behaves really slow. I'm currently trying to reconfigure gridster to not render the content when dragging, or for another widget solution that behaves fluently on the iPad, even when more complex content is dragged. Any suggestions?
A related point: Would CSS3 transitions a way to optimize this, because as I understand them, they are hardware supported and don't rely on JavaScript for rendering? Or are they not suited for small, real-time movements that are calculated on the fly.
We didn't find anything that worked better than gridster and was faster. So we made gridster "faster" by basically hiding the widget content while dragging, this performs better on iPad and older devices.
Related
Short version: Kieth Clark has a 3D html fps shooter demo. It uses 3d tansforms on html5 elements to produce a 3D world experience. It is not VR. Is there an API to view it stereoscopically?
I have a similar engine. I came up with a way to view it stereoscopically using Cardboard-style viewer, 3D TV/Monitor, or red/cyan anaglyph glasses. I had to use a pair of iframes, however, and load a copy of the "world" document into each frame, however.
This doubles the load on the gpu, however, requires duplicates of all changes to "the world" for both iframes, and workarounds for focusable items such as textareas. This all works great, but diminishes the capacity for detail without RAF noticably slowing down and getting jumpy. Especially true in Firefox on mobile, and of course there is also the added problem of security limitations on iframes.
If theres an API to just view and control a 3D html5 page in stereo without explicitly duplicating everything that would make things a lot simpler and more efficient.
I'm using a Google Chrome on Galaxy Note 3 as my standard-level target-device, if anyone needs to know.
Long version (old):
I have a 3d game I'm writing with native html5/css3/javascript. It is primarily for mobile and already contains a fully-functional camera system with the ability to zoom in or out of first-person, second-person, overhead etc, rotate the yaw and pitch of the view, as well as location on the map around the avatar, etc. Is there an easy way to view it stereoscopically? It will be embedded in an Android app, or at least accessed through one, or through Chrome as a web-app. I thought Chrome Dev with VR Shell would be a possibility to try it out and hopefully integrate into an app eventually. Not having luck with that yet. Theoretically, I just need to be able to view an ordinary html5 page that has css3 3d transforms. For example, if you had a 3d cube made of divs or whatever, to view it with two points of view, one for each eye, without changing anything in the page itself. Basically, if you could view anything 3d in the page stereoscopically, much like the VR Shell sounds like, it should work. All I seem to come up with is how to turn on the flag in Chrome Dev, but I'm not seeing anything to actually activate it. It's been fully restarted etc. The page is already 3d and fully-functional with orientation control in first-person or otherwise. All I seem to find are how to turn it on or about 3d videos. Can this be done in Googles VR libs for Studio without using all the other stuff? I just need the second eyeball.
Ok. Was hoping an api existed for this, but my solution was to make a parent document with two iFrames and load the doc with the 3d tranforms into both iframes. Then offset the perspective-origin in each about 1% (i.e. 49% in one and 51% in the other). Worked great without added mods using device orientation, but obvi not for mouse control. Ideally, both iframed documents should be controlled from js in the parent doc. Downside is you have to control two objects for every change, and complications arise if you have inputs or textareas that take exclusive focus. Fixed all that, but this is the down-low version of the solution.
We have website that was developed for desktops and now I've been blessed with a task of creating mobile version of it. The mobile design might be quite different from desktop version and the website is build on Wordpress. Now I'm not sure what would be best approach:
shall I stick to CSS changes only (as much as possible) and use media queries to target smaller screens? I'm worried about large images still being downloaded even if these are display:none. There is also quite a bit of JS happening on every page and this JS will not be used in mobile version of the site so I would have to build in additional checks possibly etc. Any other possbile problems with this approach?
server side code should detect if its mobile browser and should return custom html? Any other possbile problems with this approach?
mixture of two above?
any other options?
If anyone has experience with similar project and could point me to what proffered solution would be that would be great.
Use media queries as much as possible for layout changes.
For you JS, create yourself a small breakpoint handler that will trigger the js to run or stop.
I think a lot of people don't realize that a 2x image compressed is smaller than a 1x image compressed. So, if you use compression for you images, you will actually get a better network performance using just large images. How much of that image gets displayed is a potential issue that can cause negative performance, but I imagine that it's insignificant.
Are you using completely different UI for mobile than for desktop or is is just a different positioning of elements? If you have to support two templates then you will want o think about Adaptive(responsive from the server), where the server will determine based on the UserAgent which template to send to the client. UserAgent wont really get you much except for the type of Browser the client has. To figure out the dimensions of the device's screen you will need to know the dimensions or use a service like WURFL.
If you can do all of your UI change in one template using media queries then it might be best to start working on this from a Mobile First approach and basically start from scratch on your mobile look of the site and then figure out how you can re-position the elements on the page to match as close as possible to the current desktop look. Using the Responsive vs Adaptive approach will eliminate the need for UserAgent detection and you will only work with the width of the device.
Thinking of Responsive in "Mobile" vs "Desktop" is really limiting and causes a bit of confusion. Mobile should refer to devices that change location. Try using names like small, medium, and large to describe the layouts(breakpoints) for your Responsive Page.
Finally, there is not preferred way of doing "Responsive." Each site will have it's own requirements that need to be met. It is up to you to learn as much as possible and create the preferred way for your needs.
I am a big fan of the Responsive Theme Wordpress has. It is very customizable, and will allow you to use one site for both Mobile and Desktop.
https://wordpress.org/themes/responsive
You could always use:
<meta name = "viewport" content = "width = device-width">
in your header. Then the whole site will resize to fit the mobile device.
All your js should still work on mobile devices. It would just be 'flash' that wouldn't.
The site isn't "responsive" with this but, depending on the site and how much interaction etc the visitor needs, sometimes this is adequate and simple?
I have been looking for a Javascript based datagrid to use for Mobile websites/applications with no luck. I have tried jqGrid, which seemed to work fine except for the lack of kinetic scrolling. I know jqGrid does now have a (beta) mobile version, but unfortunately is is built upon jquery mobile, and I am using a different framework (which spat the dummy when I included the jqquery mobile scripts)
So, my question is, does anyone know of a Javascript grid that does support Kinetic scrolling (or know how to apply this to an existing grid)?
Would need this to not be reliant on any other UI framework (such as jquery mobile - nothing against this, I just happen to be using another one and it didn't seem to want to coexist)
If it supported knockout type of binding then even better!!! (I know this is expecting too much).
Any pointers would be greatly appreciated.
Thanks in advance for any info!
Kinetic scrolling is a built-in feature in Webix DataTable http://webix.com/widget/datatable.
The grid control processes all touch events without a hitch. It runs scrolling touch events especially well http://webix.com/blog/datatable-1000-columns-and-more/.
I know this is a really old question, but I just wanted to leave a note here as well if someone ends up here using the search.
You should check out , which is a top-notch Javascript grid component, and has kinetic scrolling on touch devices. It’s part of Vaadin Components: http://www.vaadin.com/components
Any recommendations on zooming a large image and panning around? ideally inline on the page.
I've been using PanoJS (aka GSV2), but now more people are using iPhone/iPad/Android type devices, this library is either too slow, or the older versions do not support dragging (the one I'm using at the moment).
http://code.google.com/p/panojs/
http://www.dimin.net/software/panojs/
My current thought is that using the tiled images approach is too much for these little processors (at maximum zoom trying to drag 144 individual images, from a 3000 x 3000px original image, where each tile is 250x250px).
So probably looking more at loading the original image in an with a set width/height... and either writing my own JS to zoom/drag, or using another library (which I can't seem to find at the moment)... then there is the question of using jQuery (with jQuery UI for draggable support), or just writing the raw JS myself to keep the amount of code down.
More so answering my own question, as the standard libraries don't seem to work as well as I needed, I ended up creating my own solution:
https://github.com/craigfrancis/zoomify
The intention is that you can copy this code and then customise it to your own particular requirements... so ideally you should be able to read/understand the code, rather than just dropping it into your project and hoping for the best.
I would suggest making a viewport for mobile devices of screen width.
set all the images that are outside the viewport for more than one tile to display:none.
Then when the user pans just update the display property.
That way the browser will mainly compute a large element moving with a few images, and then compute the on and off state of some images.
a lot less graphics intensive than to recalculate a graphics heavy div element.
After looking around for this too, I decided to use OpenSeadragon (New BSD licence), an open-source, web-based viewer for high-resolution zoomable images (desktop and mobile). I needed it for the Image Pyramid sources with Multi-Image support and filtering capabilities (via one of a multitude of plugins)
Another strong contender was OpenLayers (2-Clause BSD). Here's a simple example with a static image, and here's the complete list of examples.
I'm making an TV Guide. See http://i.tv/guide for an example implementation using Canvas.
I need to make lots of little boxes representing each show. I need to be able to scroll them around, both vertically (channels) and horizontally (time). To make it with Canvas, my understanding is that the only way to implement scrolling is to intercept the correct events, and redraw the canvas smoothly with new offsets many times a second.
If I were to use divs, I could slap scrollbars on it and let it scroll normally. I could position them once, and let the scrolling move them around, rather than re-calculating their new offsets.
Which should I pick for this kind of project? If I use divs will it be too slow? Some lineups have 500 channels. I want to display up to 4 hours at once.
Thanks!
I would strongly recommend using plain HTML in preference to canvas, for interactive elements. Apart from the speed issue (divs are usually going to be faster than drawing it all manually yourself), HTML is designed to offer accessibility and usability features for free, which you'd have to do a lot of work to get even partially from canvas.
The canvas-based guide as linked has the following drawbacks:
very slow to render/scroll, for me;
impervious to keyboard navigation;
no HTML link actions (like middle-click-link-to-open-in-new-tab or right-click-bookmark);
text not copy/pastable;
a dead loss for accessibility tools like screen-readers;
reduced browser compatibility;
invisible to search engines.
Use canvas for pretty graphical and interactive effects you can't achieve with plain HTML. To be honest I don't even see any of that on i.tv's site; I have no idea why they have implemented it in this seemingly-crazy way.
Doing it with DIV's wont have issues with speed. Browsers rendering engines are built to render elements. DOM rendering is faster than canvas rendering in a lot of cases, take isogenicengine they use DOM based rendering to render thousands of elements to make games You should implement it based on your technical ability. Both technologies will be able to do what you want. Personally I would choose canvas but I see no issue with DOM rendering.
Good Luck.