I am trying to add fixed text in a-frame. I can add a a-text tag like this:
<a-camera wasd-controls-enabled="true" position="0 1 0" look-controls>
<a-text position="0 0 -1" value="Test" color="#fff"></a-text>
</a-camera>
But this method does not make the text fixed to the side of the screen so the text will overflow when I change the screen size. Is this even possible?
It's generally best practice to add the text to the scene rather than to the camera. This gives the user the option to look in either direction so they can see everything.
https://aframe.io/docs/0.8.0/components/camera.html#fixing-entities-to-the-camera
If you still decide to anchor the text to the camera, the simple solution would be to make sure that the text is at a distance great enough that all of it can be seen comfortably at the smallest screen size (vertical phone orientation, etc.).
A more complex solution would be to change the size of the <a-text> primitive (or containing entity using the text component) on the window.resize event, and adjusting the text container accordingly. This can be done by creating a custom component.
Here is a rudimentary example:
AFRAME.registerComponent('resize-text', {
init: function() {
var self = this;
window.addEventListener('resize', function(e) {
var height = window.innerHeight;
var width = window.innerWidth;
// console.log('resized!', height, width);
self.el.setAttribute('width', ( width / 100 ));
});
}
});
And here is a demo of that code in action: https://codepen.io/dansinni/pen/pVJmQg
Resize the window or drag the center divider and you will see that the text size changes.
Hope this helps.
Related
Is there a way to preserve image proportions when using an tag?
The docs mention hard coding the dimensions but that's problematic when requesting arbitrary images
https://aframe.io/docs/0.6.0/primitives/a-image.html
as far as i see, the a-image is just a a-plane with an image source in a material.
It means the image will be streched over the plane, you can only mess with the
<a-image> height and width, which are the a-plane's height and width in meters,
<img> height and width, which specify the image dimensions in px, but the image still will be streched over the plane.
You could try to do it automatically, within a component, setting the a-planewidth and height depending on the input <img> width and height, having a px-meters ratio:
AFRAME.registerComponent('imageSetter',{
schema:{
img:{type:'selector'}
},
init:function(){
let lowResRatio = 0.01;
this.el.setAttribute('height',this.data.img.height*lowResRatio);
this.el.setAttribute('width',this.data.img.width*lowResRatio);
}
});
Check it out in my fiddle: https://jsfiddle.net/gftruj/5d9j9nqm/2/.
Otherwise, You need to prepare the images earlier on.
UPDATE
You can modify the component so it gets the image dimensions, gets a height/width ratio, and sets the width and height accordingly:
AFRAME.registerComponent('foo',{
schema:{
img:{type:'selector',default:''},
height:{}
},
init:function(){
let data = this.data;
let ratio = 1/100;
this.el.setAttribute('width',data.img.width*ratio);
this.el.setAttribute('height',data.height);
this.el.addEventListener('materialtextureloaded', (e)=>{
var w = e.detail.texture.image.videoWidth || e.detail.texture.image.width;
var h = e.detail.texture.image.videoHeight || e.detail.texture.image.height;
let ratio = w/h;
this.el.setAttribute('width',data.height*ratio);
});
}
})
live fiddle here: https://jsfiddle.net/5d9j9nqm/4/
Now it's fixing itself to a given height.
my website sidebar widgets look fine when I view www.aryaziai.com from my desktop. However, The ONLY issue I have is that when I view my mobile version of my site, the "featured video" sidebar sticks out of the frame and overlaps a bit with the black background.
At the end of the day I don't want to manually change the width/height of the youtube video, I just want the width of the "featured video" widget to automatically resize to the size of widget title (the blue block thing).. Its interesting because the size of the youtube video is the same as the widget title when viewing on a desktop, but the widget title remains at a perfect size in the mobile..
Any 100% width codes out there that can fix this? Thanks
If I understand correctly, you're having a problem getting your YouTube video to adjust to the screen width even if the div you're wrapping it in is correctly resized. If so, please read Chris Coyier's article on resizing YouTube videos.
You can do all of this in jQuery (if you're using it), here's Chris' code:
$(function() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
I am trying to achieve a layout like this:
where:
Navbar is just a bootstrap-like top menu, 60px of height, always on top
Pop-up menu is fixed in that position (not always visible), always on top
The entire free area (windows w.o. navbar) is filled with Canvas.
Live example: jsFiddle
I have a problem with Canvas. I currently have a simple style:
<canvas id="le_canvas">Y U NO CANVAS</canvas>
...
#le-canvas {
position:absolute;
width:100%;
height:100%;
}
and the canvas is filling the background, but:
the resolution is very low
it doesn't maintain ratio during window resizes.
What I'd like (if it is possible):
full resolution of the area to fill (1:1 pixel on canvas and on screen)
set the ratio of the area to fill
bonus: update the above after window resize
Setting the canvas element in per-centage will not set the actual canvas size which must be set in absolute pixels. What happens here is that you get a canvas with a default size which then is stretched by the html-rendering giving the blurry look.
You therefor need to set the size by using f.ex. the window's sizes in absolute pixels.
You can do this like this (update of fiddle here: http://jsfiddle.net/x5LpA/3/ ) -
Create a function that sets the canvas size based on window size (you will of course need to subtract height of bars etc, but to show the principle):
function initCanvasArea(cnv) {
cnv.width = window.innerWidth;
cnv.height = window.innerHeight;
}
As the canvas content are cleared when the canvas is re-sized you need to render the content again for each time. Therefor it will be smart to extract the render content into a separate function like f.ex:
function renderCanvas(ctx) {
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(0, 0, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(20, 20, 55, 50);
}
Now, make the main function a self-invoking one where you also attach an event handler for windo.resize to update the canvas:
$(function () {
var canvas = $('#le_canvas')[0];
var ctx = canvas.getContext('2d');
initCanvasArea(canvas);
renderCanvas(ctx);
window.onresize = function(e) {
initCanvasArea(canvas);
renderCanvas(ctx);
};
})();
And finally edit the CSS-rule by removing the width/height set to 100%;
#le_canvas {
position:absolute;
}
(Tip: a better approach here is to use the fixed attribute for position - plus use a wrapper element, padding, box-sizing.. but that is out of scope for this question).
Is this what you are after? I used $(document).width() and $(document).height() to get the width and height for the rectangle. http://jsfiddle.net/x5LpA/1/
I have a div with some text:
<div style="white-space:nowrap;overflow:none;width:50px;">
With some text in it
</div>
How can I scale the font size of the text so all of the text is visible?
Contrary-wise. You could wrap the text in an interior DIV, measure its width with JavaScript. Test if that width is wider than the parent DIV. Get the current font size, and incrementally move it down 1px at a time until inner DIV's width is less than or equal to the outer DIV's width.
I've been doing something like this, to set the text scale relative to the parent (or window) width / height. You can avoid jQuery by using offsetWidth and offsetHeight instead of width.
var setBodyScale = function () {
var scaleSource = $(window).width(), // could be any div
scaleFactor = 0.055,
maxScale = 500,
minScale = 75; //Tweak these values to taste
var fontSize = (scaleSource * scaleFactor) - 8; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('html').css('font-size', fontSize + '%'); // or em
}
Short Answer: You don't.
You would have to try a size, render it, see if it fits, try another size, render it see if it fits, etc. Then you have to handle the case where the calculated font size is so small no one can read the text.
There are other options, if the text doesn't fit, add an ellipsis (...) to the end of the text, when you mouse over it, the div could expand, you could use a popup window or tooltip with the full text, or put the full text in a larger area of the screen.
Find another way.
Came across this JQuery plugin in my quest to find the same.
Github
Demo
Also came across this Jquery script when I was looking for the same thing. It has the added benefit over the others, as far as I quickly tell, is that it also adjusts for height as well as width.
Comes from here: http://www.metaltoad.com/blog/resizing-text-fit-container
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
$(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
adjustHeights(elem);
}
}
The Flex Canvas container is limited to 10,000x10,000 pixels. Yet, I've seen Flex apps that are scrolling way more than 10,000 pixels. Any idea how this can be done?
The content I want to scroll is in pieces already, but I need to add those pieces to something that can scroll vertically more than 10,000 pixels.
Depending on what you actually want to display you may be able to split your content into tiles. This is how Google Maps works, every time the map is moved the program determines which tiles are visible on the screen and loads them in. Any markers or overlays that are on the map are notified that the map has moved and determine where their new location is. If their location is off the screen they can be removed from the canvas. For example, the width of all the tiles at zoom level 20 on Google Maps is (256 pixels * 2^20) which equals 268,435,456 total pixels.
Essentially you just need to create a special Sprite that keeps track of the actual x,y location it is supposed to be positioned at. Any time the container moves you simply iterate through all of the child objects and determine where to put them.
function onCanvasScroll() {
//determine the top left coordinates of the canvas
//you will figure out how to do this depending on how the scrolling window
//is implemented
var canvas_scroll_x;
var canvas_scroll_y;
//create a bounding box for the canvas
var view_bounds = new Rectangle(canvas_scroll_x, canvas_scroll_y, canvas.width, canvas.height);
for (child in canvas) {
var x = child.actual_x - view_bounds.x;
var y = child.actual_y - view_bounds.y;
var childBounds = new Rectangle(x, y, child.width, child.height);
//determine if the component is visible on screen
if (view_bounds.intersects(child_bounds)) {
child.visible = true;
child.x = x;
child.y = y;
}
else {
child.visible = false;
}
}
}
So if you have a canvas that is positioned at (100, 20000), a sprite that is positioned at (300, 20100), and a window that is (640,408), you would place it at (200, 100) and it would be visible on the screen.
Instead of just setting visible to true or false a better approach would be to remove the items from the canvas entirely when they are not within the bounds of the view.