Page 1 of 1

Scaletofit not working

Posted: Saturday 18 February 2023 20:29
by Beschuitje
I am trying to add a RSS feed in Dashticz. The RSS is a catoon and therefore needs to be in a small block.

The feed itself works.

Code: Select all

blocks['FokSuk'] = {
        feed: "http://rss.xiffy.nl/cache/foksuk.xml"
This gives;
Fok1.png
Fok1.png (85.07 KiB) Viewed 273 times
When i set a width of 6 i get;
fok2.png
fok2.png (29.65 KiB) Viewed 273 times
I can also set a height but everything below 500 (even 499) gives the same image as the one above.
When is set the height to 500 the block dropes down out of picture (probably to the original image size)

When i set 'scaletofit' to 256 and aspectratio to 1, nothing happens.

When i set block size in CSS the block size is correct

Code: Select all

.dt_block[data-id='FokSuk'] {
 height:295px !important;
 width:295px !important;
 }
fok3.png
fok3.png (242.43 KiB) Viewed 273 times
But the image is still droping down out of sight (to the original image size

I tried different CSS things like;

Code: Select all

div {
    background-image:url('httpsxxxxxxxx');
    background-repeat:no-repeat;
    background-size:50%;}

Code: Select all

div {
    background-image:url('https:xxxxxxx');
    background-repeat:no-repeat;
    background-size:200px;}
object-fit: cover/initial/scale-down/fill but sadly nothing works

Does anybody have any suggestions?

Re: Scaletofit not working

Posted: Sunday 19 February 2023 14:43
by Beschuitje
Decided a 'news' block with RSS feed was not the way. Used var frames instead with the website url "www.foksuk.nl"
I first searched different fora and watched YT videos to understand how to make an iframe of a website since my coding skills are not that good.
I came up with;

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="FokSuk" content="width=device-width, initial-scale=1.0">
	<title>Fokke en Sukke</title>
		
	<style>
			.iframeContainer{
				position: relative;
				width: 500px;
				height: 800px;
				overflow: hidden;
			}
				
			.iframeContent{
				position: absolute;
				top: -180px;
				left: -235px;
				width: 800px;
				height: 500px;
			}
			
		</style>
			
</head>
<body>
		<div> class="iframeContainer">
			<iframe width="256" height="256" src="http://www.foksuk.nl/" scrolling="no" style="-webkit-transform:scale(0.7);moz-transform-scale(0.7);" class="iframeContent"/>
		<div>
</body>
</html>
Saved this as a HTM file and placed this file in the /img folder on my Pi.

I then setup a frame in Dashticz with the frameurl reffering to the htm file in the /img folder

Code: Select all

var frames = {}
	frames.foksuk = {
		frameurl: "img/FokSuk.htm",
		height: 240,
		scrollbars: false,
		width: 6
}
The iframe was loaded in the Dashticz frame but was out of sync. I then changed the height, width, top and left pixel settings of the iframeContent in the.htm file bit by bit until the image was in center of the block.
frames.png
frames.png (186.06 KiB) Viewed 230 times