I'm trying to dynamically build an html file and one of the variables will depend on the number of files in a directory that match a pattern. Here is the code:
html <- '
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>Sankey Plot Test</title>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<iframe src = "plot0.html" width = 100% height = 1000px id = "sankey" style = "border: none"></iframe>
<script>
$(function() {
var selector = $("#sankey");
var delay_sec = 1;
var num = 1,
len = %d;
setInterval(function() {
num = (num === len) ? 0 : num;
selector.attr("src", "plot" + num + ".html");
num++;
}, delay_sec * 1000);
});
</script>
</body>
</html>'
n <- list.files(path = "path/to/files", pattern = "plot\\d+.html") %>% length()
html <- sprintf(html, n)
It's returning an error saying that the format is incorrect for my integer object, despite using %d. I saw a couple other questions on SO that mentioned incorrect format errors when using %d with sprintf, but none like what I'm seeing.
Any insight about what's going on would be appreciated. Thanks!
Your problem is in this line:
<iframe src = "plot0.html" width = 100% height
Notice the %. You can escape the % with another % like this:
<iframe src = "plot0.html" width = 100%% height
When sprintf runs through the string it will output the 100% correctly.
Related
I have designed a shape and I want to determine its height based on a TypeScript-function, but the ngStyle does not apply the height to the shape.
HTML:
<div class = "card" [ngStyle] = "{'height': CalculateHeight()}" (click) = 'onSelect()'>
Function:
CalculateHeight(): number {
let CardHeight = ((this.Card.duration.Hours * 60) +
(this.Card.duration.Minutes)) * 2;
if (CardHeight <= 60) {
CardHeight = 60;
}
console.log(CardHeight);
return CardHeight;
}
What is the problem?
CalculateHeight returns just a number. But height to work properly, there need to be the unit as well.
Try the following line.
< div class = "card" [ngStyle] = "{'height.px': CalculateHeight()}" (click) = 'onSelect()' >
Note the .px. It will do the trick.
OR. you can make CalculateHeight to return a string with the height unit attached at the end. For example 400px.
You will also need px in your html file like this
<div class="card" [ngStyle]="{'height': CalculateHeight() + 'px'}" (click)="onSelect()">
The problem is that you don't set any unit to your height.. its like "300 what?, eggs?, cars?, pixels?" :P
Just return your result with a valid unit. This could simply be done by adding + 'px' to your returned value:
CalculateHeight(): number {
let CardHeight = ((this.Card.duration.Hours * 60) +
(this.Card.duration.Minutes)) * 2;
if (CardHeight <= 60) {
CardHeight = 60;
}
console.log(CardHeight);
return CardHeight + 'px';
}
You should also change your HTML from (click)='onSelect()' to (click)="onSelect()" because its recommend to use doublequotes instead of singlequotes, when quoting attributes values.
To learn more take a look at the recommend style-rules, especialy for HTML Quotation Marks.
I'm making a website with a FlipClock countdown. By default it is too small. It has to be scaled using transform: scale() or zoom, changing the width and height property only increases the amount of white around the countdown.
On a screen not 1920*1080 the clock is not correctly sized.
I've tried some JS scalers, however these use pixel size to scale, so it doesn't work. I've also tried a simple viewport.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="clock" style="margin:2em; transform: scale(2.5);"></div>
<script type="text/javascript">
var clock;
$(document).ready(function() {
var currentDate = new Date();
var futureDate = new Date("Dec 24, 2019 00:00:00");
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true,
});
});
</script>
I found a way to do what I wanted using JS.
let perpx = 2.5/1920;
let ratio = perpx * window.screen.width;
document.getElementById('clock').style.transform = "scale(" + ratio + ")";
I'm facing an issue in changing the extents of the map in my openlayers 3 code.
I'm using EPSG:4326 as the projection format and I intent to change the bounds
to my 'bounds' variable. I'm using
map.getView().fitExtent(bounds, map.getSize());
for changing the extent of the map. The issue is that first I'm providing bounds
values to be [76.9501571655273, 76.9501571655273,78.5841217041016, 78.5841217041016], and after fitting the extent of the map to this value, when I enquire the map extents using
map.getView().calculateExtent(map.getSize());
I'm getting [76.39384841918945, 76.39384841918945, 79.14043045043945, 79.14043045043945] as output. I have a feeling that this might be a projection issue, but I can't figure out where I have done wrong. Can someone please let me know what am I doing wrong?
Here is the Full Code (I've removed unnecessary code to make it more readable):
<!doctype html>
<html lang="en">
<head>
<script src="http://openlayers.org/en/v3.5.0/build/ol-debug.js"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<div id="map" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
var format = 'image/png';
var bounds = [76.9501571655273, 76.9501571655273,
78.5841217041016, 78.5841217041016];
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:9000/geoserver/TargetWorkspace/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'TargetWorkspace:hyderbadtargets',
STYLES: '',
}
})
});
var projection1 = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [
untiled
],
view: new ol.View({
projection: projection1,
center: [77.7671394348, 77.7671394348],
zoom: 0
})
});
var ext = map.getView().calculateExtent(map.getSize());
console.log("Map Bound Before: " + ext[0] + " " + ext[1] + " "+ ext[2] + " "+ ext[3] + " ");
map.getView().fitExtent(bounds, map.getSize());
var ext2 = map.getView().calculateExtent(map.getSize());
console.log("Map Bound After: " + ext2[0] + " " + ext2[1] + " "+ ext2[2] + " "+ ext2[3] + " ");
</script>
</body>
</html>
Thank You,
Sourabh
WMS provides images with predefined scales/resolutions, for example zoom 8 can have resolution 1222.992452 and scale 1:3000000. How is possible to adapt discrete zoom values to the bounds that you provides? OL3 finds for you the best zoom level whose bound coordinates are closed to the bounds that you wants.
Additionally, i have noticed in your code that you redefine projection EPSG:4386 with:new ol.proj.Projection({......
However, OL3 contains already in the library itself this projection. Better to use: new ol.proj.get('EPSG:4326');
If you are calling fitExtent OpenLayers adjusts the view bounds so that the given extent is visible. If the dimensions of the extent do not match the dimensions of the size of the map, the actual view extent might be larger.
As stated in the answer by favero, it only uses diescrete zoom values at default, however this can be avoided by setting the option constrainResolution false. Then the zoom level is allowed to be a floating point number.
Also note that fitExtent is now called fit
map.getView().fit(bounds, { constrainResolution: false })
In this simple example: http://jsfiddle.net/2VeGY/1/
<!doctype html>
<meta charset="utf-8">
<title>single column</title>
<style>
*{margin:0,padding:0}
input{width:800px;}
nav{border:1px solid gray; width:850px;}
li{display:inline-block; height:30px; }
li:hover{opacity:0.8}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<input value="[{"v":0,"c":"red"},{"v":100,"c":"#005"},{"v":200,"c":"#12d"}, {"v&quo\
t;:300,"c":"#1dd"}, {"v":400,"c":"red"} ]">
<nav>
<ul>
</ul>
</nav>
<script>
var wscale = d3.scale.linear().range(["0px","800px"])
update()
d3.select("input").on("change",update)
function update(){
var data = JSON.parse(d3.select("input").property("value"));
var li=d3.select("ul").selectAll("li").data(data);
wscale.domain(d3.extent(data,function(d){return d.v}))
li.enter().append("li")
li
.style("width",function(d,i){
start=d.v
i+1 == data.length ? end=d.v : end=data[i+1].v;
return wscale(end-start)
})
.style("background-image",function(d,i){
start=d.c;
i+1 == data.length ? end=d.c : end=data[i+1].c;
return "linear-gradient(to right, "+start+","+end+")"});
li.exit().remove()
}
</script>
you can change the color scale of the steps data[...].c and their position data[...].v.
The scale is updated dynamically.
My problem is the following: Why it messes up if the first value is different than zero?
Thanks a lot for your help!
You're seeing this behaviour because with your current code, you always pass 0 as an input value to wscale. For the last li element, end is going to be the same as start in your function to set the width and therefore what you're passing to wscale will be 0. The input domain of wscale is determined as the extent of the input values and doesn't take this additional value into account.
You can easily fix this by changing how the domain is determined:
wscale.domain([0, d3.max(data,function(d){return d.v})]);
This assumes that all of your v values are positive.
However, what you really want to do is take into account the differences between the values, as that's what you're passing to the scale. That is, the total sum of differences should be equal to the maximum width. You can compute this as follows.
var sumdiff = 0;
for(var i = 0; i < data.length - 1; i++) {
sumdiff += data[i+1].v - data[i].v;
}
Then the scale becomes
wscale.domain([0, sumdiff]);
Complete example here.
you shouldn't put the quotation marks in the range, it should be like so:
.range([0,800])
I have been playing around with CSS Style Switching on my blog www.whataboutki.com and have also added Google Friend Connect. I would now like to change the colours of the GFC widget when the user changes styles. This is the script for GFC... the div id="div-1229769625913" does that mean I can access that from my css files? If so how would I go about doing so?
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '385';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1229769625913',
site: '10794935298529647173'},
skin);
</script>
I'd experiment to see if div-1229769625913 changes between pages first. If it doesn't then you could restyle in your CSS files, otherwise you will have to change the colours for skin in your style-switcher (which I assume is JS).
The ID is generated by GFC. It populates the DIV with an iFrame hosting your gadget code on their *.gmodule.com servers
In theory you could access and modify their DOM after it's loaded to change their style
Try changing the values in the "skin" map for style
eg. skin['ALTERNATE_BG_COLOR'] = '#ffffff';
Good luck!
The div id stays the same between pages, however, it generates an iframe and the GFC gadget is displayed within that iframe. Your CSS stylesheets don't have any control over the styling of the contents of that iframe, so the only way to accomplish this would be with some javascript.
The simplest solution would be to rip out all of the values in that hash, and prior to rendering the gadget, substitute whatever values are appropriate based on the currently used stylesheet. That way you don't have to mess with the DOM of the iframe, which would be non-trivial and unreliably fragile, since Google doesn't expect you to do this.
So your code might look something like this:
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
function currentSkin() {
// Put some real code that detects what the
// right color scheme is here.
return 'VERY_BLUE';
}
var skins = {};
skins['VERY_BLUE'] = {};
skins['VERY_RED'] = {};
skins['VERY_BLUE']['HEIGHT'] = '385';
skins['VERY_BLUE']['BORDER_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ALTERNATE_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_SECONDARY_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_SECONDARY_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_HEADLINE_COLOR'] = '#0000ff';
skins['VERY_RED']['HEIGHT'] = '385';
skins['VERY_RED']['BORDER_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['ALTERNATE_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_SECONDARY_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_SECONDARY_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_HEADLINE_COLOR'] = '#ff0000';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1229769625913',
site: '10794935298529647173'},
skins[currentSkin()]);
</script>