How do I generate an A4-sized single card in squib? - ruby

I'm trying to use Squib to generate a map for a boardgame by printing one "card" which is the size of an entire A4 sheet of paper.
There must be some default in Squib that is cropping the resulting images and text, however, so that only a portion of it is visible.
Here is some sample code demonstrating the problem:
require 'squib'
Squib::Deck.new cards: 1, layout: [] do
rect x: 0, y: 0, width: 3457, height: 2438, fill_color: 'BLUE'
circle x: 1728, y: 1218 , radius: 1218, fill_color: 'RED'
save_pdf file: 'maps_1.pdf'
end
At 300 dpi, a landscape A4 piece of paper should be 3457x2438 pixels, so this ought to display a blue box with a red circle, filling the page. Instead it displays a poker-card-sized chunk of that image in the upper left hand corner:
resulting pdf
The result is much the same if I use millimeters, with a sprue:
require 'squib'
Squib::Deck.new cards: 1, layout: [] do
rect x: 0, y: 0, width: '295mm', height: '208mm', fill_color: 'BLUE'
circle x: '147.5mm', y: '104mm' , radius: '104mm', fill_color: 'RED'
save_pdf file: 'maps_1.pdf', sprue: 'layouts/map-sprue.yml'
end
Sprue:
---
sheet_width: 297mm
sheet_height: 210mm
card_width: 295.0mm
card_height: 208.0mm
cards:
- x: 0.0mm
y: 0.0mm
crop_line:
lines:
- type: :vertical
position: 0.0mm
- type: :vertical
position: 295.0mm
- type: :horizontal
position: 0.0mm
- type: :horizontal
position: 208.0mm
Does anyone know what is forcing squib only to address a portion of the A4 page?
thanks

You want width and height as parameters to Squib::Deck.new
To make your "card" the entire size of an A4 page, use something like this:
Squib::Deck.new(width: '210mm', height: '297mm') do
end
HOWEVER If you are planning on printing to an A4 page I recommend making it a tad smaller so that your printer doesn't autoscale or cut things off. My printer does fine with 6mm margin, probably something like 200x290.
You probably don't need sprues in this situation.

Related

Determining cumulative layout shift when attributed node is null

I am trying to reduce CLS (cumulative layout shift) on a website. Using the webvitals JS library from Google, I am seeing that one of the largest sources of CLS is the below, which has "null" for the node causing the layout shift. Anyone know how to address this? If the node causing the shift is null, how would I update the CSS or HTML to prevent this shift?
sources: Array(1)
0: LayoutShiftAttribution
currentRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
node: null
previousRect: DOMRectReadOnly {x: 0, y: 0, width: 375, height: 329, top: 0, …}
__proto__: LayoutShiftAttribution
I'm looking into this myself currently, I use a lot of loading skeletons to inform users that content is loading, once content has been fetched, I think they become null, they're essentially DOM nodes that have been replaced in some way.

How do you position a label in the center of screen in a scrollview within Kivy?

I'm having difficulty in positioning a label that has an image added using canvas within a scrollview. The desirable output is to have a label with text content as a paragraph followed by a label with an image and then followed by another label with text content as a paragraph.
The image is displaying in the correct position vertically as in its between the two text labels, but it is not positioning center when I attempt to scale down the image by multiplying the self.parent.width by .9 or whatever the decimal. It's binding it to the left screen and padding in the label is not working whereas it does work in the labels with text content. I have searched for documentation and other examples but could not find a solution to this. If anyone has experience with this or can provide any guidance, I'd greatly appreciate it. Please see my code below:
BoxLayout:
size_hint_y: .7
orientation: 'vertical'
canvas.before:
Color:
rgba: rgba('#FFFFFF')
Rectangle:
pos: self.pos
size: self.size
ScrollView:
id: sv
size_hint_y: None
height: self.parent.height
effect_cls: 'ScrollEffect'
GridLayout:
id: Content
cols: 1
size: self.minimum_size
size_hint: (1, None)
height: labelscroll1.texture_size[1]
Label:
id: labelscroll1
padding: ['20dp', '0dp']
color: rgba('#000000')
font_size: mtx.sp(14)
text_size: self.width, None
size: self.parent.width, self.texture_size[1]
size_hint: (None,None)
text: "Some text"
Label:
id: labelscroll2
padding: ['5dp','0dp']
size_hint: (None, None)
width: max(self.texture_size[0], self.parent.width)
height: 300
halign: 'center'
markup: True
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: 'Table.png'
Label:
id: labelscroll3
padding: ['20dp', '0dp']
color: rgba('#000000')
font_size: mtx.sp(14)
text_size: self.width, None
size: self.parent.width, self.texture_size[1]
size_hint: (None,None)
text: "Some text"
The indentations are four spaces in actual code but the formatting might be slightly off in here due to pasting.
Without seeing your actual code, I can only guess at what the problem actually is. But a good way to get something centered within a GridLayout cell is to use the AnchorLayout. Try replacing your middle Label in your kv with:
AnchorLayout:
size_hint: (1.0, None)
height: 300
Label:
id: labelscroll2
padding: ['5dp','0dp']
size_hint: (None, None)
width: max(self.texture_size[0], self.parent.width)
height: 300
halign: 'center'
markup: True
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: 'Table.png'

How to make c3chart take 100% of the width

I use the library C3.js to build a graph on the page. The graph should occupy the entire width of the screen (because I hidden legend and axis), but chart zone always has an indent about 1% from window's width.
Can I make this?
Example
axis: {
y: {
show: false
},
x: {
show: false
}
Very Strange, you can put negative padding to get rid of it, I have no idea why its there either. you can add padding: { left: -20, right: -20 } to your chart object as quick hack around.
https://codepen.io/anon/pen/oBxPPL
c3js Padding Options

how to handle different screen sizes in react native?

I am developing an application on react-native. I have made a UI which works fine on iPhone 6 but not working fine on iPhone 5 or lower versions.
How should I fix this ?
You need to think about proportion when building your UI.
1, Use percentage(%) for width and aspectRatio for height, or vice versa.
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%" of your width
}
2, Use flex for the jobs percentage can't do. For example, if you have arbitrary size of items in a list and you want them to share equal sizes. Assign each of them with flex: 1
3, Use rem from EStyleSheet instead of pixels. rem is a scale fator. For example, if your rem is 2 and your “11rem” will become “11*2” = “22”. If we make rem proportion to the screen sizes, your UI will scale with any screen sizes.
//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});
//how to use rem
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%"
padding: "8rem", //it'll scale depend on the screen sizes.
}
4, Use scrollView for contents that could potentially scale out of the boxes. For example, a TextView
5, Every time you think about using pixels, consider use rem in method 3.
For a detailed explanation, you can read the article here. 7 Tips to Develop React Native UIs For All Screen Sizes
Have you designed the app using fixed widths and heights? You should definitely use the capabilities of flexbox and try to avoid settings fixed sizes as much as possible. The flex property can be used to define how much space a <View /> should use releative to others, and the other properties on that page can be used to lay out elements in a flexible way that should give the desired results on a range of different screen sizes.
Sometimes, you may also need a <ScrollView />.
When you do need fixed sizes, you could use Dimensions.get('window').
You need to calculate sizes dynamically, relying on screen size.
import { Dimensions, StyleSheet } from 'react-native'
[...]
const { width, height } = Dimensions.get('window')
[...]
const styles = StyleSheet.create({
container: {
flex: 1.
flexDirection: 'column',
},
myView: {
width: width * 0.8, // 80% of screen's width
height: height * 0.2 // 20% of screen's height
}
})
If you are using TabbarIOS, remember that Dimensions.get('window') gives you the whole screen's height, this means that you'll have to take in account that the tabbar has fixed-height of 56.
So for example, when using TabbarIOS:
const WIDTH = Dimensions.get('window').width,
HEIGHT = Dimensions.get('window').height - 56
Then use WIDTH and HEIGHT as above.

Xamarin.Forms - Animating 2 Things at the Same Time (Push Animation)

I have a Xamarin forms page that contains an absolute layout that wraps everything. Inside that, I have content that fills the whole space and has left padding of 80, and then I have a left nav sidebar that is 80 wide and sits on top of the main content:
I want a sort of modified "push" animation, which means doing two things:
Increase the width of left nav by 100 (to 180)
TranslateX the main content by 100
(Note that using TranslateTo() would be super easy, but the left nav needs to increase in width, not shift to the right, and there's no WidthTo() method).
I can do #1 by itself just fine.
I can do #2 by itself just fine.
But I can't get them to both animate. If I run the left nav animation first (via .Commit()), only the main content animates. If I run the main content animation first, neither animates. Strange! What is going on here?
Here's the basic code I'm using:
var leftNavAnimation = new Animation(
callback: x => leftNav.WidthRequest = x,
start: 80,
end: 180,
easing: Easing.Linear
);
var mainContentAnimation = new Animation(
callback: x => mainContent.TranslationX = x,
start: 0,
end: 100,
easing: Easing.Linear
);
leftNavAnimation.Commit(this, "leftNavAnimationName", length: animationLength);
pageContentAnimation.Commit(this, "mainContentAnimationName", length: animationLength);
I figured out that the first parameter of .Commit() needs to refer to the element you're animating. So changing from:
mainContentAnimation.Commit(this, "mainContentAnimationName", length: animationLength);
To:
mainContentAnimation.Commit(mainContent, "mainContentAnimationName", length: animationLength);
Fixed it.

Resources