how to set the scrollbar position to max? its not 1.0 as stated in the docs - qml

UPDATE
Fixed by calculating the needed position using the max content.x position and a 0.0-1.0 factor
Component.onCompleted:
{
var maxContentX = content.width - frame.width
var factor = 1.0 // 0, 0.5, 1.0
var newPosition = (maxContentX*factor)/content.width
hbar.position = newPosition
}
Qt-Docs: ScrollBar QML Type
Position Property
This property holds the position of the scroll bar, scaled to 0.0 -
1.0.
but the position never reaches 1.0 - because the position only holds 1 minus bar size
i don't understand whats the sense is of scaling the position between 0 and 1 but then make it directly related to bar size
are there any meaningful usages for position values above (1 minus bar-size)?
is there a way to get the bar size?
any idea how to calculate the correct mid/max values for the position?
i want to build a timer that toggles between 0%, 50% and 100% position
Qt-Sample: Non-attached Scroll Bars
import QtQuick 2.15
import QtQuick.Controls 2.15
Item
{
height: 300
width: 300
Column
{
Text { text: "vbar.position: "+vbar.position }
Text { text: "hbar.position: "+hbar.position }
}
Rectangle {
id: frame
clip: true
width: 160
height: 160
border.color: "black"
anchors.centerIn: parent
Text {
id: content
text: "ABC"
font.pixelSize: 160
x: -hbar.position * width
y: -vbar.position * height
}
ScrollBar {
id: vbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: frame.height / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
ScrollBar {
id: hbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Horizontal
size: frame.width / content.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}

I don't think I can answer the "why" part of your question. But to get the bar size, I believe you can use the Scrollbar's contentItem property. To get 0%, 50%, and 100%, you could probably do something like this (for a horizontal scrollbar):
// 0%
position: 0
// 50%
position: (width - contentItem.width) / width / 2
// 100%
position: (width - contentItem.width) / width

Related

Can I use drawPath to both fill shape and draw border only one time in Jetpack Compose

I use Code A to draw a shape with a path, I hope to fill the shape in a color, and draw border with different color and width. I get the Image A as I expected.
I find Code A to launch drawPath operation two times, maybe it's not good way, can I use drawPath to both fill shape and draw border only one time?
Code A
fun setProcess(drawScope: DrawScope, dataList: List<Double>){
drawScope.drawIntoCanvas{
val step = xAxisLength / maxPointCount
val shadowPath = Path()
shadowPath.moveTo(0f.toX, 0f.toY)
for (i in dataList.indices) {
...
}
shadowPath.close()
it.drawPath(shadowPath, paintTablePath)
it.drawPath(shadowPath, paintTableBorder)
}
}
val paintTablePath = Paint().also {
it.isAntiAlias = true
it.style = PaintingStyle.Fill
it.strokeWidth = 1f
it.color = Color(0xffdfecfe)
}
val paintTableBorder = Paint().also {
it.isAntiAlias = true
it.style = PaintingStyle.Stroke
it.strokeWidth = 3f
it.color = Color.Red
}
Image A
What you ask is neither available in Compose nor Android Canvas. As you can check here but with Jetpack Compose Canvas.
You don't need to use the ones with Paint unless you need some properties of Paint or functions like drawText
DrawScope already has functions such as
fun drawPath(
path: Path,
color: Color,
/*#FloatRange(from = 0.0, to = 1.0)*/
alpha: Float = 1.0f,
style: DrawStyle = Fill,
colorFilter: ColorFilter? = null,
blendMode: BlendMode = DefaultBlendMode
)
And instead of passing DrawScope as parameter it would help creating extension functions of DrawScope as default Compose source code often does.
inline fun DrawScope.rotate(
degrees: Float,
pivot: Offset = center,
block: DrawScope.() -> Unit
) = withTransform({ rotate(degrees, pivot) }, block)
inline fun DrawScope.clipRect(
left: Float = 0.0f,
top: Float = 0.0f,
right: Float = size.width,
bottom: Float = size.height,
clipOp: ClipOp = ClipOp.Intersect,
block: DrawScope.() -> Unit
) = withTransform({ clipRect(left, top, right, bottom, clipOp) }, block)

How to make the label size in QML according to the size of the text?

I can't make the height of the label exactly the height of the font, there is a gap at the bottom. Can you please tell me how to remove it? my label image
Label
{
id: autoLabel
leftInset: 0
topInset: 0
bottomInset: 0
background: Rectangle
{
anchors.bottomMargin: 0
color: "white"
border.width: 0
}
Text
{
id: autoText
anchors.fill: autoLabel
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.bottomMargin: 0
color: PendulumStyle.primaryTextColor
text: "AUTO"
font.family: PendulumStyle.fontFamily
font.pixelSize: 35
font.styleName: "Bold"
padding: 0
}
width: autoText.contentWidth
height: autoText.contentHeight
x: mainRectangle.x + 30
y: checkBox.y - checkBox.height / 2
}
The Label actually IS the size of your font. The text you're using just doesn't show it. Fonts have a concept of an ascent and descent above and below the baseline.
The ascent is the distance from the baseline to the top of the tallest character, and the descent is the distance from the baseline to the bottom of the lowest character. (Those might not be the technical definitions, but at least how I think of them. i.e. There may still be padding, etc.) So therefore, the total height of a font should be (ascent + descent).
In your case, you've used the word "AUTO". None of those characters go below the baseline. But the font height stays the same no matter what text you use.
If you still want your Rectangle to just fit around the word "AUTO", then it should just use the ascent height, and ignore the descent. To do that, QML provides a FontMetrics object that can help you.
Label
{
id: autoLabel
width: autoText.contentWidth
height: fm.ascent
FontMetrics {
id: fm
font: autoText.font
}
background: ...
Text
{
id: autoText
text: "AUTO"
font.family: PendulumStyle.fontFamily
font.pixelSize: 35
font.styleName: "Bold"
}
}

change font size if character more than specific number of characters

How can I change the font size if the name is more than 15 or 20 characters in vueJS?
Here's my code
<p class="name" v-if="roleProfile"><b>{{ roleProfile.company_name }}</b></p>
Create a computed property to add a class to the <p> tag based on the length of roleProfile.company_name:
computed: {
profileClass() {
let profileClass = "name";
if (this.roleProfile.company_name.length > 15) {
profileClass += " smallFont";
}
return profileClass;
}
}
Then in your template:
<p :class="profileClass" v-if="roleProfile">
<b>{{ roleProfile.company_name }}</b>
</p>
I've made a function and assigned it to my div with :style="{ fontSize: heroFontSize }"
Basically I used the reverse ratio, I have defined the minimum and maximum character sizes, and compared to the maximum and minimum number of characters. I have come to the conclusion thet for every 2.5 characters I have to decrease the size by 1px. So below you find the result.
heroFontSize() {
//we map the font sizes between 60chars and 200 chars from 100px to 50px
// there's a reverse ratio between character count and the font size
var minSize = 60;
var textLength = this.question.length;
//for every 2.5 characters we decrease the size with 1px
var multiplier = 2.5;
return 100 - (textLength - minSize) / multiplier + "px";
},

How do I perform sequence labeling in caffe using LSTM

I have looked at the LRCN example (http://tutorial.caffe.berkeleyvision.org/caffe-cvpr15-sequences.pdf) which use LSTM for classification. For video classification a majority voting is done. Why is that? I would assume one waits until the end of a sequence?
In my toy, example binary counting, I inputted the labels in two different ways.
First I labelled every timestep with the sequence label. Secondly I labelled every timestep with an ignore_label but the last one. For simplicity I used a sequence length of 50 and a batchsize of 50 as well.
Both approaches lead to a network, where when I deploy it, I receive the same output for every timestep.
Edit:
The toy example works, if instead of classifying a whole sequence, one predicts the next number. Thus for each number a label exists. This is no solution for a real-world sequence classification task. Using the post by Kaparthy (http://karpathy.github.io/2015/05/21/rnn-effectiveness/) I have created following network:
name: "BasicLstm"
layer {
name: "data"
type: "HDF5Data"
top: "data"
top: "cont"
top: "label"
include {
phase: TRAIN
}
hdf5_data_param {
source: "./path_to_txt.txt"
batch_size: 2000
}
}
layer {
name: "lstm1"
type: "LSTM"
bottom: "data"
bottom: "cont"
top: "lstm1"
recurrent_param {
num_output: 5
weight_filler {
type: "uniform"
min: -0.08
max: 0.08
}
bias_filler {
type: "constant"
value: 0
}
}
}
layer {
name: "lstm2"
type: "LSTM"
bottom: "lstm1"
bottom: "cont"
top: "lstm2"
recurrent_param {
num_output: 4
weight_filler {
type: "uniform"
min: -0.08
max: 0.08
}
bias_filler {
type: "constant"
value: 0
}
}
}
layer {
name: "predict"
type: "InnerProduct"
bottom: "lstm2"
top: "predict"
param {
lr_mult: 1
decay_mult: 1
}
param {
lr_mult: 2
decay_mult: 0
}
inner_product_param {
num_output: 39
weight_filler {
type: "gaussian"
std: 0.01
}
bias_filler {
type: "constant"
value: 0
}
axis: 2
}
}
layer {
name: "softmax_loss"
type: "SoftmaxWithLoss"
bottom: "predict"
bottom: "label"
top: "loss"
loss_weight: 20
softmax_param {
axis: 2
}
loss_param {
ignore_label: -1
}
}
The important parts of the solver: I already have played a little bit with lr_policy: INV but in the end I tried it with fixed
net: "Basic.prototxt"
test_initialization: false
base_lr: 0.001
momentum: 0.9
lr_policy: "fixed"
display: 50
max_iter: 1000000
solver_mode: GPU
No sequence ranges over 2000.
I have put 10 sequences side by side.
I embedded my data in a one hot vector of size 132.
My data HDF5 file has these dimensions: XX*10*132*1
My data has a label at the end of each sequence. Every other label is -1 and will be ignored during backpropagation.
To increase efficiency I packed multiple short sequences together (they are below 2000 timesteps).
For classification I have used the python interface. When I classify a sequence following arises:
net.blobs['data'].reshape(726, 1, 132, 1)
net.blobs['cont'].reshape(726, 1)
net.blobs['data'].data[...] = data
net.blobs['cont'].data[...] = cont
output = net.forward()
output_prob = output['prob']
for i in range(726):
plt.plot(output_prob[i][0])
In the image one can see that for every timestep the same probabilities have been calculated.

how do I find the h&w of an image and convert to vars, then use those vars

ok, here's the deal:
I'm using a nice plugin I got from http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/
It's nice and all, but it doesn't solve a particular problem: I'll have users uploading images of differing sizes and aspect ratios, so, here's what they provided:
function preview(img, selection) {
var scaleX = 160 / selection.width;
var scaleY = 160 / selection.height;
$('#thumbnail + div > img').css({
width: Math.round(scaleX * 500) + 'px',
height: Math.round(scaleY * 375) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
where the numbers after scaleX and scaleY are the actual pixel dimensions of the image they use in their demo. I want to be able to have a user upload a pic, then have .js create vars to have those values become the scaleX and scaleY multipliers, such that:
width: Math.round(scaleX * width) + 'px',
height: Math.round(scaleY * height) + 'px',
I found this earlier on the site:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
So, how does a relative newbie like me make all this stuff work together?
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});
});