I am looking for a simple method to retrieve a .png from a file folder, and place it in a shiny dashboard. I tried the suggested img(src='myImage.png', align = "right") from Embedding Image in Shiny App but I continue to get an error "unused arguments (src = "Slide1.PNG", align = "right")". I've tried to place my image in a dashboard, box, etc. without success.
You should show your code so that someone can review and point out issues in your usage. It really depends on where you want to place your image. The solution you pointed to shows you how to place an image in the main panel. The code below shows how to place an image in the header Title or to the right of title.
dashboardHeader(title = div("Testing",
img(src = 'YBS.png',
title = "A Clinical Graphics Application", height = "30px"),
style = "position: relative; margin:-3px 0px 0px 5px; display:right-align;"
),
titleWidth=450,
tags$li(div(
img(src = 'YBS.png',
title = "A Clinical Graphics Application", height = "30px"),
style = "padding-top:10px; padding-right:100px;"),
class = "dropdown"),...
In a tabBox the following should work
div(tags$img(height="50px", src="YBS.png", style="text-align: right;"))
Related
I am trying to build a webpage where users can zoom in to a photo and look at the image in greater detail. The idea is that I will have a "zoom in" button, that, when clicked, will show a higher resolution version of the image. Use case: historical/archival image gallery
I recently came upon this article written by Cloudinary on how to create JavaScript functions for zooming in and out of photos. However, the article did not actually provide an example of using the Cloudinary service.
Article: Cool Tricks for Resizing Images in JavaScript (cloudinary.com)
https://cloudinary.com/blog/cool_tricks_for_resizing_images_in_javascript
Does anyone have advice/tips on how to make this work with Cloudinary stored images? I want to ensure I'm serving the highest quality/resolution version of the original image when zoomed in.
I have a codesandbox demo: https://codesandbox.io/s/cloudinary-zoom-image-542b1?file=/src/App.vue
The best practice is to upload the images to Cloudinary in the best quality/resolution. Assuming that the images would be scaled down when displayed on your site, once the zoom button is clicked, you can use Cloudinary transformations to request the images in larger dimensions, and possibly even their original dimensions.
For instance, in the following example, the image is originally scaled down to a width of 400px (c_scale,w_400). Once the "Zoom In" button is clicked, I'm changing the transformation URL in a way that crops a size of 400px width of the original image (height is implicitly set to retain the image aspect ratio) - c_crop,w_400. This way the zoomed-in image is in it's original resolution/quality:
function zoomin() {
var myImg = document.getElementById("my-image");
var src = myImg.src;
var splitted = src.split("c_scale,w_400/");
splitted[0] += "c_crop,w_400";
myImg.src = splitted.join("/");
// results in https://res.cloudinary.com/demo/image/upload/q_auto/c_crop,w_400/sample.jpg
}
function zoomout() {
var myImg = document.getElementById("my-image");
myImg.src = "https://res.cloudinary.com/demo/image/upload/q_auto/c_scale,w_400/sample.jpg";
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
<button type="button" onclick="zoomin()">Zoom In</button>
<button type="button" onclick="zoomout()">Zoom Out</button>
<img src="https://res.cloudinary.com/demo/image/upload/q_auto/c_scale,w_400/sample.jpg" id="my-image" width="400px" alt="Flowers and Bee">
That's just a simple example. There are many ways you could implement a zoom-in effect in general, and by using Cloudinary transformations in particular.
I have tried this jsfiddle and can't get the background canvas to be at full size of the window. I have tried video.width = window.innerWidth but with no luck. Can some explain?
update:
the problem i think is with this code (and if this is the case I think the title should be "Give PlaneGeometry the dimensions of window.innerWindth, window.innerHeight"
//the geometry on which the movie will be displayed;
//movie image will be scaled to fit these dimensions.
movieGeometry = new THREE.PlaneGeometry( 2,2,0 );
movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
// movieScreen.position.set(0,50,0);
movieScreen.material.depthTest = false;
movieScreen.material.depthWrite = false
when I change the parameters of the PlaneGeometry the movie image will be scaled to fit these dimensions. The problem is that I can't find the right dimensions.
body has a margin.
add:
body {
margin: 0px;
}
fiddle
I am trying to create a pdf from a webpage using phantomJS. I want the pdf to just be a single page long that is the same height as my webpage. If I don't set paperSize or viewportSize at all then it creates a page that is almost the right height, it is just a little short by about 100px. If I detect page height and use that to set viewportSize I have the exact same problem, it's short by about 100px. Is there a way to get phantomJS to just create a pdf based on the webpage's size? I want it to be exact because the page is a dark colour and it looks really bad to have a big white block at the end of the page (which is what is there if I add a constant to viewport height to make it fit everything in one page).
My code to find height(Note: the height is the same whether I use body or the classname below to find it):
var size = page.evaluate(function() {
var height = $('.export-athlete-detail-report').outerHeight(true);
return {width: 700, height:height};
});
page.paperSize = size;
page.render(reportFile);
I'm trying to dynamically set the max-height of Bootstraps modal-body elements for all modal dialog boxes. I've written the following, which seems to work when the dialog is opened. I'm depending on the enforceFocus method to exist and to be called once the dialog is rendered. I realize there may be moment before the CSS property is set where the dialog will not be rendered exactly right, but I'm okay with that. Is there anything wrong with this solution? I know I have yet to account for resizing the screen with a modal open, but that seems the easier problem to solve.
(function ($) {
$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.Constructor.DEFAULTS.keyword = false;
var oldEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function () {
oldEnforceFocus.call(this);
var $element = this.$element;
var maxHeight =
$("body").height() // full page
- $element.find(".modal-header").outerHeight(true) // modal header
- $element.find(".modal-footer").outerHeight(true) // modal footer
- ($element.find(".modal-dialog").outerHeight(true) - $element.find(".modal-dialog").height()) // dialog margins
- 5; // fudge factor
$element.find(".modal-body").css("max-height", maxHeight);
}
})(jQuery);
Thanks!
edit: To give credit where credit is due, this is based on
Correct way to extend Bootstrap Modal - lock, unlock.
If you don't want to use javascript, you can use CSS media queries and get close-ish to the height you need by using min-height. For example, define a media query on min-height: 540px, and set the max-height of the modal to something like max-height: 500px. Then define a media query at say min-height: 680px and set the modal to max-height: 640px. It's not fluid, and it requires several media queries to inch up to the largest size you want to plan for, but it will get you there.
#Josh solution is good with CSS and media queries but writing so many media queries where small devices has different screen heights e.g Iphone and SamSung G and N series, required alot of media queries to even calculate close-ish modal height on different screen sizes.
so setting height of modal (modal-body) dynamically according to media screen size and on small devices where there will be 2 types of media screen landscape and portrait, following few lines of code will put you very close-ish to your goal
Rendering modal HTML according to screen size with-in sec and later if screen size changes adjust it's height according to screen size
$(document).ready(function () {
setInterval(Dimension, 100);
function Dimension() {
var doc = $(document).height(); // document height
var head = $(".modal-header").height(); // modal header height
var footer = $(".modal-footer").height(); // modal footer height
var modheight = doc - head - footer - 65; // 65 is extra margins and it will not effect the height of modal any way if not changed.
$('.modal-body').css('height', modheight);
}
});
Note
Few Changes required in Modal CSS
CSS
.modal-dialog {
margin: 0px auto !important;
}
.modal-body {
overflow-y: scroll; // In-case the content in modal-body overflow so it will have scrolling.
}
Fiddle
You can check the modal height adjust itself by increasing and decreasing the fiddle result window's height and width.
I am trying to create a clipping mask in VML that would correspond to clip-path in SVG? Is that possible?
Based on numerous, but fairly limited, examples I have tried drawing the shape:
<vml:group style="WIDTH: 1px; HEIGHT: 1px" class=vml-element coordsize = "1,1">
<vml:shape style="WIDTH: 1px; HEIGHT: 1px" id=vectorObject2 class=vml-element _fill-color="red" _fill-opacity="1" _stroke-color="black" _stroke-opacity="1" _stroke-width="1" coordsize = "1,1" filled = "t" fillcolor = "red" stroked = "t" strokecolor = "black" strokeweight = ".75pt" path = "m0,0 l100,0,0,100 xe">
<vml:fill class=vml-element opacity = "1"></vml:fill>
<vml:stroke class=vml-element opacity = "1"></vml:stroke>
</vml:shape>
</vml:group>
and then masking it using vmlframe:
<vml:vmlframe class=vml-element clip = "t" size = "15pt,37.5pt" src = "#vectorObject2"> </vml:vmlframe>
Drawing of shape (triangle) works as expected but I cannot find I way to mask it using vmlframe. Is that the right way to achieve masking?
Please ignore all bunch of weird custom attributes as majority of VML code was generated via 3rd party library.
Thanks in advance!
Use the CSS clip property to emulate clip-path as demonstrated in the Dojo GFX library or something like jsgraphics.