I am writing and app which needs to show a transparent image over the camera, for example as a guide for composition. The app has to be shipped at least on iOS and Android.
So far, I have found a plugin with a functioning iOS source (okstate-plugin-camera-overlay, available on Github), and a possibly working solution for Android.
None of these is satisfying, both compile and run with a host of warnings and quirks. I think I want to plan a new plugin with this functionality and a clean and minimal implementation.
Where could I look for directions for creating a lean plugin supporting both platforms and for a way of decorating the camera functionality in the least intrusive way on both platforms?
update
see the comments: I make a fork in cordoba-plugin-camera and made it work for iOS. Now I need directions to create a transparent overlay over the camera in Android.
update 2
I am using successfully the version of the plugin that Weston Granger has modified, and it has none of the problems that plague the original version.
It works for me on iOS and Android with equal smoothness.
This is the code I am using
I am using the version of the plugin that Weston Granger has modified
This is the relevant portion of code. It will show the camera behind an image.
CameraPreview.startCamera({
x: 0,
y: 0,
width: screen.width,
height: screen.height,
camera: "back",
tapPhoto: true,
previewDrag: false,
toBack: true
});
CameraPreview.setOnPictureTakenHandler(function (picture) {
savePicture(picture);
CameraPreview.hide();
CameraPreview.stopCamera();
history.back();
});
$("#clickButton").click(takePicture);
$("#switchCamera").click(CameraPreview.switchCamera);
$("#exitButton").click(function () {
CameraPreview.hide();
CameraPreview.stopCamera();
history.back();
});
Regarding the html template for the image, it is just a page with transparent body and an image. The image should have transparent area, if you want to see through the camera preview.
I have shown also the buttons, but this is code you should tailor to your needs.
<!-- camera.html -->
<style>
body {
background-color: transparent;
background-image: none;
}
div.cameraButtons {
position: fixed;
text-align: center;
background-color: black;
bottom: 0px;
width: 100%;
}
</style>
<div class="cameraContainer">
<img align="center" src="assets/{{frame_image}}" />
</div>
<div class="cameraButtons">
<a id="switchCamera" style="float: right; margin-right: 8px">
<i class="material-icons md-48" >camera_rear</i>
</a>
<a id="clicButton" >
<i class="material-icons md-48" >photo_camera</i>
</a>
<a id="exitButton" style="float: left;">
<i class="material-icons md-48" >backspace</i>
</a>
</div>
<!-- /camera.html -->
Related
I want to embed a .webm video in my website. At first I used .gif, but I wanted to speed up my website, so I followed the advice from Lighthouse to use .webm in my website. This reduced the size enormous, but due to the lack of support on Ios/OSX/Safari, I show the .gif on that devices.
Webm is supported on chrome, on my desktop it shows perfectly. But when I view it on android in chrome the background of the video is black instead of transparent. You can view it here: https://codepen.io/Vendio-Websolutions/pen/jdpveV. I added buttons for different background colors to make the problem more clear.
html
<div class="buttons">
<button id="blue">Make background blue</button>
<button id="green">Make background Green</button>
<button id="red">Make background red</button>
</div>
<div class="video-div">
<video autoplay="" src="http://vendio.offline/wp-content/uploads/2019/01/webdevelopment.webm" alt="Webdevelopment" muted="" style="background-color: transparent; opacity: 1; filter: blur(0px); z-index: 1; display: inline;"></video>
</div>
css
.buttons {
display: flex;
}
.buttons button {
background: black;
color: white;
border: none;
padding: 10px;
margin: 10px;
cursor: pointer;
}.video-div {
padding: 30px;
}
js
$("#blue").click(function(){
$(".video-div").css("background-color", "blue");
});
$("#green").click(function(){
$(".video-div").css("background-color", "green");
});
$("#red").click(function(){
$(".video-div").css("background-color", "red");
});
I tried to use this script to detect the support for the transparent alpha layer: How to (feature) detect if browser supports WebM alpha transparency?. But this only detects if the browser supports .webm not if it supports tranparency.
Does anyone know how I can make the video transparent on chrome in Android. Or does anyone know a script to detect if alpha layers are supported?
I am making a web app that is adapted/responsive to mobile. I have a toolbar that is positioned on the right side of the screen on my computer browser, and it is supposed to be placed fixed at the bottom of the screen on mobile. The strange thing is, when it is opened using an iPhone, the toolbar appears properly fixed at the bottom, but when I open the app on an Android device, such as my Samsung Galaxy S5, the toolbar is not appearing at all. Doing some testing, when I changed my styling to be relative instead of fixed, the toolbar is displayed in the same position in the middle of the screen on both iPhone and Android. What do you think the issue may be?
Here is the code:
<div class="col-sm-2">
<div class="sidebar-nav-right">
<div class="navbar navbar-default navbar-style" role="navigation">
<div class="nav">';
<a class="brand font-26 block brand-color">Tools</a>
<ul class="nav navbar-nav center">
<li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
</div>
.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}
This styling is inside a media query for smaller screen sizes and, as stated above, is adapting on a mobile device of one brand so I know there isn't a problem with the media query.
If add {left: 0} can't solve it, I guess maybe the parent node of .sidebar-nav-right have the transform; then the position origin has been reset.
this is a common problem on older Android browsers. Simply add -webkit-backface-visibility: hidden; to the fixed element.
There are two ways to fix this. See this article by Brad Frost for a list of Javascript solutions: http://bradfrost.com/blog/mobile/fixed-position/
Or try the above mentioned fix by Ben Frain: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
See this CodePen by Ben Frain as well: http://codepen.io/benfrain/full/wckpb
I think #GoreWang's comment is spot on. You should try the following 2 things:
(1) With fixed position, sometimes not having a left property set causes the fixed element to not appear when the page loaded. Try adding the following:
.sidebar-nav-right {
left: 0;
}
(2) Add following code to your fixed element:
.sidebar-nav-right {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.(Known bug)
i have a issue in my website menu in android mobile chrome browser that is not able to show unicode ☰ . but if i am check my web application in iPhone or other android browser it is rendering or working properly.
I am used this icon in this structure
<ul>
<li>☰☰</li>
<li>Home</li>
<li>About Us</li>
</ul>
But it is not show in mobile chrome browser
How to fix it!
The other alternative is to use ≡ instead: it looks very similar:
≡ instead of ☰
We can also create hamburger/menu icon using some CSS and HTML stuff that works fine on all versions of browsers without making any break. It works fine on all mobile and desktop browsers.
.hamburger-icon {
margin: 0;
padding: 19px 16px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.hamburger-icon span {
width: 40px;
background-color: #000;
height: 5px;
display: block;
margin-bottom: 6px;
}
.hamburger-icon span:last-child {
margin-bottom:0px;
}
<label class="hamburger-icon">
<span> </span>
<span> </span>
<span> </span>
</label>
Apparently the reason is that no font in the system where the browser runs contains a glyph for “☰” U+2630 TRIGRAM FOR HEAVEN.
The alternatives are:
Use an image instead.
Use a downloadable font with #font-face. This may mean that a few megabytes need to be loaded in the user’s system.
For general advice on such matters, see my Guide to using special characters in HTML.
You could easily use three pipe characters | and rotate them 90degrees using the transform: rotate(90deg) function! Here's what I've done:
<nav role="navigation" id="nav-hamburger-wrapper">
<input type="checkbox" id="nav-hamburger-input"/>
<label for="nav-hamburger-input">|||</label>
</nav>
and in CSS:
#nav-hamburger-wrapper label,
#nav-hamburger-input {
transform: rotate(90deg);
transition-duration: 0.3s; /* give it a rotation effect when checked */
}
#nav-hamburger-wrapper input:checked + label {
transform: rotate(0);
}
Enjoy ;-)
I've been trying to make a somewhat responsive layout for my website. But I'm late on the project and I've started it without one, which means my basic template has big flaws.
I'd like to know how can I make such template? I believe it would be really simple to make a template like this (in the picture) but I don't really know how as the divs seem to be moving as they wish, not as I command.
What I want from that picture is exactly what's written there. As the browser view port is smaller the divs should behave in the way I've exemplified in the image.
If anyway could point me out how to make such things I'd appreciate :)
Here is the link to the image: http://i.imgur.com/8n0TOlo.jpg
I'm the author of PocketGrid, a micro CSS grid for responsive layouts.
As Luca suggested, you can use PocketGrid to make your layout.
I did a JSFiddle for you : http://jsfiddle.net/arleray/5Mvph/
The HTML is really simple:
<div id="LAYOUT" class="block-group">
<div id="HEADER" class="block">
<div class="box">HEADER</div>
</div>
<div id="WORK_AREA" class="block-group">
<div id="LEFT_BAR" class="block">
<div class="box">LEFT_BAR</div>
</div>
<div id="CONTENT" class="block">
<div class="box">CONTENT</div>
</div>
</div>
<div id="TOOLBOX" class="block-group">
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
<div class="TOOLBOX_ITEM block">
<div class="box">TOOLBOX ITEM</div>
</div>
</div>
</div>
For your CSS, I suggest you to use the "mobile-first" strategy:
1 - Start with the "mobile" version (the smallest):
#LAYOUT { min-width: 800px; }
#HEADER { height: 30px; }
#WORK_AREA { width: 100%; }
#LEFT_BAR { width: 300px; }
#CONTENT {
overflow: hidden; /* Trick to fill the remaining space */
float: none;
width: auto;
}
#TOOLBOX {
min-width: 300px;
width: 100%;
}
2 - Then add media queries for larger versions (> 1100px) to only add changes from the mobile version:
#media (min-width: 1100px) {
#WORK_AREA { width: calc(100% - 300px); }
#TOOLBOX { width: 300px; }
}
For the fluid CONTENT width, I used the "overflow:hidden" trick to make it fill the remaining space of the WORK_AREA, after the LEFT_BAR.
Nevertheless, to make the WORK_AREA fluid with the fixed toolbar on the right, I could not use "overflow:hidden" (because it fills the remaining space on the right).
So I had to use the calc() function to compute the WORK_AREA width because of the right fixed-width toolbox.
Note: The calc() function is only compatible with Android 4.4+ (http://caniuse.com/calc) but it's the only mean (with pure CSS) to have a fluid WORK_AREA on the left of the right sidebar, because the TOOLBOX is declared after the WORK_AREA.
You may try using this calc() polyfill (in JS): https://github.com/CJKay/PolyCalc
To use the "overflow:hidden" trick instead of the calc() function, you should place your toolbox BEFORE the WORK_AREA, like in this other JSFiddle: http://jsfiddle.net/arleray/5Mvph/11/
For more information about PocketGrid, you can see many examples here: http://arnaudleray.github.io/pocketgrid/docs/
Hope this helps!
You can use media query in css refer media queries here or you can use framework like Bootstrap. This will help you to control divs based on devices sizes.
try bootstrap.It will make your life easy link is here.hope that helps
I suggest you another very very simple and minimalistic Grid system: PocketGrid. Only 1 KB minified. Loot at demos and description. ;-)
I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.
Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).
The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.
Here are some code snippets:
HTML:
...
<div class="pin">
<a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a>
<div class="comment_wrapper">
<div class="divider bottom_shadow"></div>
<div class="comment">
<!-- Content appended here -->
</div>
<div class="divider top_shadow" style="margin-top: 0"></div>
</div>
</div>
<div class="pin"> ... </div>
CSS:
.comment_wrapper {
-webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out;
position: relative;
overflow: hidden;
width: 100%;
float: left;
height: 0;
}
.comment {
background: #f4eeee;
margin-left: -10px;
padding: 10px;
height: 100%;
width: 100%;
float: left;
}
Javascript (using jQuery):
function showSheet(button, wrapper, height) {
// Animate the wrapper in.
var css = wrapper.css({
'height': height + 'px',
'overflow': 'visible',
'margin-bottom': '20px',
'margin-top': '10px'
});
button.addClass('pressed');
}
$('.comment_btn').click(function() {
showSheet($(this), $(this).siblings('.comment_wrapper'), 150);
});
Screenshots : http://imgur.com/nGcnS,btP3W
Here are the problems I encountered with Webkit Transforms that I can't quite figure out:
Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.
Thanks a lot!
With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:
http://code.google.com/speed/articles/reflow.html
When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.
I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.
.comment_wrapper {
height: 200px;
position: absolute;
width: 100%;
bottom: 0;
-webkit-transform: translate(0, 100%);
}
var css = wrapper.css({
'-webkit-transform': 'translate(0, 100%)'
});
You want traslate3d. Should use the GPU if the device supports it.
check this out...
http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/