I have a fixed set of 9 objects that are equidistant. When they pass off screen right edge, they wrap to screen left.
when object0.x hits the right edge of the screen (720 or 1280) it needs to wrap to the left of object9 which is probably offscreen to the left, and maintain its distance from object9, likewise for the other sprites when they go off screen, they need to wrap to the opposite maintaining distance between the previous object. Same of course needs to be true when moving opposite direction.
Currently, things are wrapping and getting way out of position.
Here is my current code: (getstartpos() is thanks to petar-ivanov)
function getstartpos(objectWidth as integer, startPosition as integer, objectNumber as integer, space as integer)
return startPosition + objectNumber * (objectWidth + space)
end function
sub screenupdate()
m.p0x=m.p0x+ int(m.inc)
if m.p0x > 720
m.p0x = -getstartpos(120,m.p9x,9,20)
?m.p0x
endif
m.p0.MoveTo(m.p0x, m.p0y)
m.p1x = m.p1x + int(m.inc)
if m.p1x > 720
m.p1x = -getstartpos(120,m.p0x,0,20)
?m.p1x
endif
m.p1.MoveTo(m.p1x, m.p1y)
m.p2x = m.p2x + int(m.inc)
if m.p2x > 720
m.p2x = -getstartpos(120,m.p1x,1,20)
?m.p2x
endif
m.p2.MoveTo(m.p2x, m.p2y)
...
m.p9x = m.p9x + int(m.inc)
if m.p9x > 720
m.p9x = -getstartpos(120,m.p8x,8,20)
?m.p9x
endif
m.p9.MoveTo(m.p9x, m.p9y)
end sub
Ok, what I've done is to base the calculation on the number of objects on the screen and a subset of the screen width - the actual displayed area as opposed to the screen width itself. This seems to work, but since everything is hardcoded, it feels like a "hack" instead of a solution, which would be a formula for doing this for any arbitrary display width and arbitrary object width, but the problem IS solved for immediate situation.
m.p0x=m.p0x+ int(m.inc)
if m.p0x > 650 then
m.p0x = (m.p5x -125)
?"m.p0x moved to:";m.p0x
?m.p5x
?"difference: ";m.p5x -m.p0x
endif
m.p0.MoveTo(m.p0x, m.p0y)
m.p1x = m.p1x + int(m.inc)
if m.p1x > 650
m.p1x = m.p0x-125
endif
m.p1.MoveTo(m.p1x, m.p1y)
m.p2x = m.p2x + int(m.inc)
if m.p2x > 650
m.p2x = m.p1x-125
endif
m.p2.MoveTo(m.p2x, m.p2y)
m.p3x = m.p3x + int(m.inc)
if m.p3x > 650
m.p3x = m.p2x-125
endif
m.p3.MoveTo(m.p3x, m.p3y)
m.p4x=m.p4x+ int(m.inc)
if m.p4x > 650
m.p4x = m.p3x-125
endif
m.p4.MoveTo(m.p4x, m.p4y)
m.p5x = m.p5x + int(m.inc)
if m.p5x > 650
m.p5x = m.p4x-125
endif
m.p5.MoveTo(m.p5x, m.p5y)
(etc up to m.p9)
Related
I'd like to show the list's introduction to users, and I've used the Association rule in Django for this project.
views.py
def user_detail(req, id):
AllParcel = Add_Parcel.objects.filter(id=id).first()
df = pd.read_csv('myapp/recommend.csv')
df = df.drop_duplicates().reset_index(drop=True)
df = df.pivot(index='item_id', columns='user_id', values='user_id')
df = df.notnull().astype(int)
frequent_itemsets = apriori(df, min_support=0.5, use_colnames=True)
rules = association_rules(frequent_itemsets, metric="confidence", min_threshold=0.5)
user_loans = LoanParcel.objects.filter(user=req.user)
user_borrowed = [loan.parcel_item.name for loan in user_loans]
recommended_items = []
for item in rules['antecedents']:
if set(item).issubset(set(user_borrowed)):
recommended_items.extend(list(Add_Parcel.objects.filter(name__in=rules[rules['antecedents'] == item]['consequents'].tolist()[0])))
context = {
"AllParcel": AllParcel,
"recommended_items" : recommended_items,
}
return render(req,'pages/user_detail.html',context)
I wanted to render recommended_items to display similar to Add_Parcel using data from Add_Parcel's database to display, but when I put the display command in HTML, it returned as a blank value. How should I fix it?
user_detail.html
<h2>Recommended Items</h2>
<ul>
{% for parcel in recommended_items %}
<li>{{ parcel.name }} ({{ parcel.nametype }}) - {{ parcel.description }}</li>
{% endfor %}
</ul>
recommend.csv
item_id,user_id
1,1
1,2
1,3
1,4
1,5
1,6
1,7
3,8
3,9
3,10
3,11
1,12
1,11
1,10
2,9
2,8
2,7
#views.py
.
.
.
detailedStatement = {
'selectedOption1' : '90 degrees',
'correctAnswer1' : '180 degrees',
'selectedOption2' : 'angle',
'correctAnswer2' : 'side'
}
#Above dictionary contains 200 elements
diction = {
'detailedStatement' : detailedStatement
}
return render(request, "result.html", diction);
So while on an html file I wanted to access the dictionary's every element via a loop. Like every element should be listed in the html table row like following.
| Sr | Selected Option | Correct Answer |
| 1 | 90 degrees | 180 degrees |
| 2 | angle | side |
Above table is just a representation of html table not an actual table.
But the issue I am facing is... I am not able to access its index in a dynamic way.
I wrote a for loop in Django html template but
{% for dr in detailedResult.items %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{dr.option.forloop.counter}}</td>
<td>{{dr.answer.forloop.counter}}</td>
</tr>
{% endfor %}
I want my code to automatically put 1 after option and answer like option1, answer1;
How can we do this?
I think you should model this with a list instead of including an index in your variable names, e.g.
# views.py
detailed_statements = [{'option': '90 degrees', 'answer': '180 degrees'}, ... ] # contains 200 elements
Then in your template
{% for dr in detailed_statements %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{dr.option}}</td>
<td>{{dr.answer}}</td>
</tr>
{% endfor %}
I was a bit confused by the nested for loops in your template code - I think you only need one?
I have text which comes from for loop, for example "Hello: how are you?" and "Hi: I am fine".
I want to make the text before : to be in bold. So above example I need "Hello" and "Hi" to be bold as they are in front of ":"
So actually my html is . There is a for loop on node
<div >
<a>
{{node.childrenCount == 0 ? node.code + ': ' + node.name: node.code + ': '+ node.name + ' ('+ node.childrenCount + ')' }}
</a>
</div>
How do I do that using CSS?
It's not possible with CSS without modifying the markup.
If you can modify the template, you could write:
<div>
<a><strong>{{ node.code }}</strong>: {{ node.name }}</a>
</div>
(Edit to address ternary in updated question)
That ternary is conditionally rendering the childrenCount in parentheses if it isn't equal to 0, which could be written as:
<div>
<a><strong>{{ node.code }}</strong>: {{ node.name }}{{ node.childrenCount !== 0 ? ' (' + node.childrenCount + ')' : '' }}</a>
</div>
Try to use:
let str = "Hello: how are you? Hi: Im fine?";
str = str.replace(/[a-zA-Z]+:/g, '<strong>$&</strong>');
//result: "<strong>Hello:</strong> how are you? <strong>Hi:</strong> Im fine?"
Using strong tag helps screen readers, but you can also use b tag or modify a span tag with css property font-weight:bold;.
<strong>Hello:</strong>How are you?
just wrap what you want in < b > tags
<b>Hello:</b>How are you? <br>
<b>Hi:</b> I am fine".
Dear stackoverflow users,
I am creating a website with flask as a backend. It will fetch some data from different systems e.x. jenkins.
one of the "data packs" will be a list of Jenkins jobs
the main .py file will include route to a page
#app.route("/simplejenkins")
def simple_jenkins():
return render_template('simplejenkins.html', job_list=job_list)
and the simplejenkins.html will iterate over the job_list and list them
{% for job in jobs_list %}
<tr>
<td>{{ job }}</td>
<td>
<p>Successful!</p>
</td>
</tr>
{% endfor %}
the idea is that the number of elements in the list will change over time.
and I want to put them in the table - each element (job) in different cell. And let's say I want to have 6 columns (depends on the screen resolution, but let's ignore this for now). So in case of 44 jobs I should have 7 full rows and 2 more job in 8th row.
and my question is, how to achieve this?
the script below generates a table with dynamic number of rows and columns but how to populate the cells using jinja?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Dynamic Table</title>
<script>
window.onload = createTable;
function createTable()
{
rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns",1);
for(var r=0;r<parseInt(rn,10);r++)
{
var x=document.getElementById('myTable').insertRow(r);
for(var c=0;c<parseInt(cn,10);c++)
{
var y= x.insertCell(c);
y.innerHTML="Row-"+r+" Column-"+c;
}
}
}
</script>
<style type="text/css">
body {margin: 30px;}
</style>
</head>
<body>
<table id="myTable" border="1">
</table><form>
</form>
</body>
</html>
i don't expect full solution of course, a link to existing similar case should be more than enough... somehow i cannot find one
thanks in advance for help
regards
Mariusz
To use that JS script all you need is an ajax call, once the page is ready, the ajax call will retrieve the data (jobs) from your flask route as JSON data and insert it in the table, with no need for jinja at all.
Or if it's not necessary for you to use a table, you can use the inline display in your frontend where your jobs will float next to each other as long as there is space, otherwise they will fall to the next line, you will loop over those jobs exactly as you did, but instead of having rows and cells you will have divs or something like that.
would you mind trying this ?
<table>
{% max_columns = 6 %}
{% interval = jobs_list|length / max_columns }
{% rows = interval|int + 1 } # +1 for the last/incomplete row
{% for p in range(rows) %}
<tr>
{% for n in range(max_columns) %}
{% cell_pos = (p * max_columns) + n }
<td>{{ jobs_list[cell_pos] }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
I'm starting with this code:
{% for award in data.profile.awards %}
<img src="media/{{ award.Medals.ribbon }}">
{% if forloop.counter|divisibleby:3 %}
<br />
{% endif %}
{% endfor %}
my problem is that it goes from top down. Meaning that it produces the first three, then a break, then another three, and repeat from there.
What I need is to go from bottom up. in my case, If there's 4 images, I want 1 on top, and 3 on bottom. If there's 8, then there's 2 on top, 3 in the middle, then 3 on bottom. How do I do that?
Thanks.
You could possibly try to invert your loop and count from end, like this:
{% if forloop.revcounter|divisibleby:3 %}
<br>
{% endif %}
So, if for example you have 10 images, 1 images will be displayed, then condition will insert break, and break will be occurred after each 3 images.
Hope it helps!
I don't know django template language well enough, so here it is in pure js, maybe you can translate it:
var total_cells = 8;
var columns = 3;
var remainder = total_cells % columns;
for(var i=1;i<=total_cells;i++){ //starting from 1 similar to django's forloop.counter
console.log('<img>');
if((columns - remainder + i) % columns == 0){
console.log('<br>')
}
}
The idea is to calculate the remainder from total cells divided by the number of columns, which for 8 will be 2, and then insert breaks not at every 3rd position, but at every (3-remainder+1) position.