I am using GeoServer environment. I am trying to setup font size using sld based on scale. So far I have the following:
<CssParameter name="font-size">
<ogc:Mult>
<ogc:Function name="env">
<ogc:Literal>wms_scale_denominator</ogc:Literal>
</ogc:Function>
<ogc:Literal>.001</ogc:Literal>
</ogc:Mult>
</CssParameter>
But am getting a log error in GeoServer : "Null font size specified". Why is the multiplication function not working to set a font size?
Update: No need to use the multiplication function to set font size based on scale. Use instead the Categorize function as seen in below example.
Dont ask me how this worked but it works perfect!
<CssParameter name="font-size">
<ogc:Function name="Categorize">
<!-- Value to transform -->
<ogc:Function name="env">
<ogc:Literal>wms_scale_denominator</ogc:Literal>
</ogc:Function>
<!-- Output values and thresholds -->
<!-- Font Size Range [<= 5000]=14, [5000-10000]=10, and [>10000]=6 -->
<ogc:Literal>14</ogc:Literal>
<ogc:Literal>5000</ogc:Literal>
<ogc:Literal>10</ogc:Literal>
<ogc:Literal>10000</ogc:Literal>
<ogc:Literal>6</ogc:Literal>
</ogc:Function>
</CssParameter>
Note: Adjust the font size/range based on your scale denominators.
Related
#macro(logoLiveAreaSection)
<fo:block-container width="52mm" height="18mm" position="relative">
<fo:block position="absolute" top="0" left="0">
$liveArea.render("logo_live_area")
</fo:block>
</fo:block-container>
#end
I am trying to fit the new logo in container in pdf but it is coming out of that specified size, it should be fit within (52x18)mm space
Any suggestion, What should be done to solve it?
I am using this code
I tried using overflow property but no luck
another way to insert logo is to set a variable and specify your file
#set ($logo1Url="url('file:/data/logos/yourlogo.png')")
And you can use your variable in the code below
<fo:inline >
<fo:external-graphic src="$logo1Url" content-height="64px" content-width="64px"/>
</fo:inline>
external-graphic is used for a graphic where the graphics data resides outside of the XML result tree.
To specify size, use content-height and content-width.
Documentation is available here
using IronBarCode;
GeneratedBarcode barcode = QRCodeWriter.CreateQrCodeWithLogo("3255842", #"stack.jpg", 500);
ser.InnerHtml += barcode.ToHtmlTag();
How can I access and resize the logo image?
You can size your logo before loading, or logo you specify in the IronBarcode QRCodeWriter.CreateQrCodeWithLogo method will automatically be sized appropriately and snapped to the QR grid.
The Advanced QR Code Writing code example shows the additional QR creation options exposed when using QRCodeWriter instead of BarcodeWriter.CreateBarcode
See the code example below:
using IronBarCode;
GeneratedBarcode QRWithLogo = QRCodeWriter.CreateQrCodeWithLogo("3255842", #"stack.jpg");
//can also set margins, background color
QRWithLogo.ResizeTo(500, 500).SetMargins(10).ChangeBarCodeColor(Color.DarkGreen);
ser.InnerHtml += QRWithLogo.ToHtmlTag();
Disclaimer: I work for Iron Software.
This is my first question here so I apologize if it's not in the right formt. I don't know why but images work perfectly fine in my desktop computer but are out of place in my mobile devices. I used chrome's mobile simulator and it works fine there too. But not in the real mobile device.
Please help :(
There are many possibilities...
Without a look at your code, or knowing the OS for the device used it is impossible to provide a precise answer.
However, I experience similar issue with Foundation right out of the box... not sure why as well. In my application my up-loader re sizes each image and stores them in small, medium, and large folders. As a result, I need precise control on which image to load depending on device.
I came up with the system below which allows for the application of CSS to be applied according to device: This may or may not resolve you issue.
Mobile Detect
I went here to get Mobile Detect which I identifies the device used.
Code to call Mobile Detect
This calls the detect script and assigns device size to the variable: $thisImg
# mobile detect
require_once ($level.'core/ini/mobile-detect.php');
$detect = new Mobile_Detect; $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
if($layoutType == 'mobile'){$thisImg = 'small';}
elseif($layoutType == 'tablet'){$thisImg = 'medium';}
elseif($layoutType == 'classic'){$thisImg = 'large';}
Store Device Size
To store the device size I use a hidden input with an id of img_sizer
echo '<input type="hidden" id="img_sizer" value="'.$this_img.'">';
jQuery
By assigning a class to the image you can now control the CSS on all the images with that assigned class according to device and can manage various image classes through jQuery.
$('img.respond').each(function(){
var which_size = $('#img_sizer').val(); // my hidden input
if(which_size == 'small'){$(this).addClass( "text-center" );} // add center class for small
})
Determining Folder Path
In my application I use the following jQuery to assign the proper folder path to the image source. The code came from Stack here
$('img.respond').each(function(){
var which_size = $('#img_sizer').val(); // my hidden input
var msrc=$(this).attr('src');
msrc=msrc.split('/'); //images, services, image.jpg
var lastelem = msrc.pop(); //images, services // lastelem: image.jpg
msrc.push(which_size); //images, services, large // lastelem: image.jpg
msrc.push(lastelem); //images, services, large, image.jpg
msrc=msrc.join('/'); //"images/services/large/image.jpg"
$(this).attr('src', msrc);
if(which_size == 'small'){$(this).addClass( "text-center" );} // add center class for small
})
I have just simple rectangle button realized as image content and i wanna to show it on screen without any tracking and without using screen anchors.
You can see i have no translation and rotation, but screen is still empty.
<object id="button1">
<title><![CDATA[Button 'images']]></title>
<assets3d>
<model><![CDATA[html/resources/0cde94934f9b4dab0998a3d73b2865ba/0cde94934f9b4dab0998a3d73b2865ba.zip]]></model>
<transform>
<translation>
<x>0.0</x>
<y>0.0</y>
<z>0.0000000000</z>
</translation>
<rotation type="eulerdeg">
<x>0.0000000000</x>
<y>0.0000000000</y>
<z>0.0000000000</z>
</rotation>
<scale>
<x>0.0</x>
<y>0.0</y>
<z>0.0</z>
</scale>
</transform>
<properties>
<coordinatesystemid>0</coordinatesystemid>
<screenanchor flags="4">0</screenanchor>
</properties>
</assets3d>
<viewparameters/>
</object>
You can use Dummy-Tracking: http://helpdesk.metaio.com/questions/7548/explanation-on-dummy-tracking
In general the best place to ask questions about AREL or the metaio SDK is http://helpdesk.metaio.com
There you should get an answer quickly.
I think that the problem is here:
<scale>
<x>0.0</x>
<y>0.0</y>
<z>0.0</z>
</scale>
The 0.0 is not a neutral scaling value.Your scaling transformation results in an object with no dimension. As it is shown on http://www.advancedmetaio.com/explaining-the-arel-xml-structure-part-2-transformations/, if you don't want to apply any scaling transformation your scaling values should be (1, 1, 1) :
<scale>
<x>1.0</x>
<y>1.0</y>
<z>1.0</z>
</scale>
I'm creating a blog (via tumblr) and I'd like my page titles to automatically scale to fill the available space horizontally, and perhaps to push the content down a little at the same time.
(by scale, I mean the changing the font size, and perhaps word spacing)
The page titles will all be four words long, so there will probably be between 16 and 40 characters.
I know very little about html, and I'd be extremely grateful to anyone who could help me out. Cheers!
Notice : It's not a pure html/css solution .. I don't think it possible to do it with only html and css so It uses javascript intensively. Also I'm using jquery to do it but it could be easily reproduced with any of the javascript libraries out there. (I'm using a javascript library mainly for two reasons : 1st is the cross-browser compatibility that those libraries brings, as well as the well-tought shortcuts/utility functions and the 2nd reason is the high quantity of plugins that those libraries have to handle most of the situations or to bring free eye-candy to websites)
Hi I didn't find any 'out-of-the-box' solution for this, but it's something I always liked in iphone development and that I missed back in web dev so I decided to give it a try
Here is my solution, it's not perfect but it kinda works :p . I tough it would be not too difficult but I took me some time, anyway I think I might use it some day ... or some knowledge I acquired in the process ...
It has inspirations from this question where they depict a solution based on a loop where they increase/decrease the text size until it fits. But I was not satisfied with a loop for each text to resize and I was sure it could be calculated directly instead of trial-error'ed !
It has also inspirations from here for the window resize handling.
Now stop the chatting, here is the code :
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
And here is a test page
It's not really robust .. it doesn't work well when the window is less than 400 px wide, and I only tested it on safari,firefox,chrome on mac.
A little tricky part is that I wanted it to work with multiple texts and so the $(".sc_container").each loop that runs on all the objects with css class ".sc_container".
A last trick is that I use the power of the css 'em' unit : for example '3em' mean 3 times the original text size, so here I can use this to scale from the original text size to the desired text size .. that's why I save the original text width on the DOM objects themselves : $sc[0].orig_width=$sc.width(); and reused it for computations later on resize, otherwise it was messed up after multiple resizes.
What do you guys think about it ?