I have one custom control . I want to set the options in script side before the control rendered how can i pass the options ?
i want to pass the options through script in the same html page.
<script type="text/javascript">
$(document).ready(function ()
{
var myDiv = document.getElementById("svgChart").winControl;
WinJS.UI.setOptions(myDiv, {
seriesList: [{
label: "s1",
legendEntry: true,
data: { x: [1, 2, 3, 4, 5], y: [-5, -3, 1, 7, 2] }
}, {
label: "s2",
legendEntry: true,
data: { x: [1, 2, 3, 4, 5], y: [-2, -6, 2, 4, 3] }
}, {
label: "s3",
legendEntry: true,
data: { x: [1, 2, 3, 4, 5], y: [-3, -5, 3, 2, 5] }
}]
});
});
</script>
but wincontrol returns undefined element ? when can i set the options before the control created ?
When using a control with the WinJS contract, there are three ways to create a control instance:
By calling the constructor from script. E.g. var myControl = new Mynamespace.MyControl(element, options)
By Calling WinJS.UI.processAll on the DOM tree.This is called for you by the default templates when creating a new project in VS
By Calling WinJS.UI.process on the specific DOM element
When using 1, you can clearly pass your options however you want to.
However, when using the other two, you can pass options to the control declaratively:
<div data-win-control="Mynamespace.MyControl"
data-win-options="{ aProp: 'val', bProb: 3.14}">
<!-- your other content --->
</div>
This will be the options parameter to your controls constructor. If you want all those properties applied to your instance, you can use WinJS.UI.setOptions(instance, optionsObject) to set them.
In your specific case, it looks like you already have some markup, and a control -- you just need to wait till after the control has been created to set options on it.
Related
So Im literally going crazy trying to understand why I can't retrieve an individual value from a dictionary that's being passed to my template.
def createCharacterSkills(request):
user = request.user
if user.is_authenticated and request.method=="GET":
characterid = request.session["characterid"]
print(characterid)
characterrecord = character.objects.filter(pk=characterid)
print(characterrecord.values())
return render(request, "characters/createcharacter2.html", {'characterrecord':characterrecord})
Is what I am passing to my template. Below is the relevant code in my template:
<b>Name: </b>{{ characterrecord.values }} <br>
<b>Player Reference: </b>{{ characterrecord.id }}<br>
The characterrecord.values is working correctly and returning the whole dictionary as expected.
<QuerySet [{'id': 48, 'player_id': 1, 'character_name': 'Avalon', 'character_race': 'Dwarf', 'character_faction': 'Jhereg', 'character_group': 'Moredhel', 'ambidexterity': 0, 'dagger': 0, 'one_handed_weapon': 0, 'pole_arms': 0, 'projectile_weapons': 0, 'shield': 0, 'two_handed_weapons': 0, 'thrown_weapons': 0, 'wear_light_armour': 0, 'wear_medium_armour': 0, 'wear_heavy_armour': 0, 'wear_extra_heavy_armour': 0, 'body_development': 0, 'literacy': 0, 'surgeon': 0, 'numeracy': 0, 'alchemist': 0, 'crafting': 0, 'evaluate': 0, 'ranger_1': 0, 'ranger_2': 0, 'make_and_read_maps': 0, 'recongnise_forgery': 0, 'poison_lore_1': 0, 'posion_Lore_2': 0, 'potion_lore_1': 0, 'potion_lore_2': 0, 'ritual_contribute': 0, 'ritual_magic': 0, 'invocation': 0, 'corporeal_1': 0, 'corporeal_2': 0, 'mage_1': 0, 'mage_2': 0, 'shamanism_1': 0, 'shamanism_2': 0, 'forage': 0, 'meditation': 0, 'vet_ritual_magic': 0, 'vet_ritual_contribute': 0, 'chameleon': 0, 'fearless': 0, 'natural_armour': 0, 'sense_magic': 0, 'track': 0, 'intuition': 0, 'poison_resistance': 0, 'resist_magic': 0, 'sense_trap': 0, 'iron_will': 0, 'resist_disease': 0, 'discern_truth': 0, 'scrounge': 0, 'tricks_of_the_trade': 0, 'versatility': 0, 'regeneration': 0, 'extra_body_dev': 0}]>
However when I try to address and individual key in the dictionary I have no value in the template. I have done this numerous times in the past with no issue so I am at a loss as to why I am having this issue now.
Any help would be greatly appreciated.
Loop through querysets you cannot access querysets data directly
{% for character_record in characterrecord %}
<b>Name: </b>{{ character_record.character_name}} <br>
<b>Player Reference: </b>{{ character_record.player.id}}<br>
{% endfor %}
You here have a QuerySet of dictionaries, so in that case you should enumerate over the QuerySet.
But here you filter on the primary key, so you can obtain a single item:
from django.contrib.auth.decorators import login_required
from django.shortcuts import get_object_or_404
#login_required
def createCharacterSkills(request):
characterrecord = get_object_or_404(character, pk=request.session['characterid'])
return render(request, 'characters/createcharacter2.html', {'characterrecord': characterrecord})
there is no need to use .values(…) [Django-doc]: by using a model object, you do not erase the model layer.
Note: It is often better to use get_object_or_404(…) [Django-doc],
then to use .get(…) [Django-doc] directly. In case the object does not exists,
for example because the user altered the URL themselves, the get_object_or_404(…) will result in returning a HTTP 404 Not Found response, whereas using
.get(…) will result in a HTTP 500 Server Error.
Note: You can limit views to a view to authenticated users with the
#login_required decorator [Django-doc].
So, I think this is a basic functionality of paper.js but fail to understand the docs or concept...
I want to convert a shape drawn with paper.js to a single SVG path. Especially, I want to convert strokes to paths.
When I draw a line with a 4px wide stroke like this:
var path = new Path.Line({
from: [10, 10],
to: [100, 10],
strokeColor: 'black',
strokeWidth: 4
});
console.log(path.exportSVG().getAttribute('d'));
All I get back as path is a single line M10,10 h90. However, what I do want to get back is a path that describes the outline of the 4px wide stroke of the path.
Something like M10,8 h90 v4 h-90 z.
How do I do that?
This is still an open issue in paper.js, but there is an extension library that can do it for you: paperjs-offset
const canvas = document.querySelector('canvas');
paper.setup(canvas);
const path = new paper.Path.Line({
from: [10, 40],
to: [100, 10],
strokeColor: 'black',
//strokeWidth: 4
});
//console.log(path.exportSVG().getAttribute('d'));
const strokePath = PaperOffset.offsetStroke(
path,
10,
{ cap: 'round' }
);
strokePath.fillColor = 'transparent';
strokePath.strokeColor = 'blue';
strokePath.strokeWidth = 1;
console.log(strokePath.exportSVG().getAttribute('d'));
<script src="https://unpkg.com/paper#0.12.15/dist/paper-full.min.js"></script>
<script src="https://unpkg.com/paperjs-offset#1.0.8/dist/paperjs-offset.js"></script>
<canvas width="200" height="100"></canvas>
I was wondering if we could change the numbers of the pages ?
Let say I'v got 10K lines rendered by 1000 lines on each page. so we've got 10 pages and I've set 5 buttons so I've got pages 1, 2, 3, 4, 5 and the navigation buttons.
I'd like to insert for exemple "..." instead of the last page button (5 in our case) when I've got more than 5 pages.
Thank you for any help !
const defaultOptions = {
// Datas
columns: tableColumns,
ajaxURL: props.ajaxURL,
// Layout
pagination: 'remote',
ajaxFiltering: true,
ajaxSorting: true,
paginationButtonCount:5,
paginationSize: 50,
paginationSizeSelector: [10, 50, 250, 1000],
layout: "fitColumns", // fitColumns, fitDataTable, fitDataStretch, fitDataFill, fitData,
responsiveLayout: "collapse",
height: '100%',
keybindings: true,
cellVertAlign: 'middle'
}
If you want to change the text of the "last" page button to be "..." you can do this in the localisation options:
const defaultOptions = {
langs:{
default:{
pagination:{
last:"...",
}
}
}
}
Full details can be found in the Localization Documentation
I have created a graph in the plotly. When i have tried that in internet explorer, its stuck. It show enything on the graph. When i tried the development option it shows 'Uint8ClampedArray' is undefined. What is the problem? How can i overcome this problem. Will you please help me to solve this?
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<title>Untitled</title>
</head>
<body>
<div id="tester" style="width:600px;height:250px;"></div>
<script>
TESTER = document.getElementById('tester');
Plotly.plot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } } );
</script>
</body>
</html>
The errors shown are given below.
SCRIPT5009: 'Uint8ClampedArray' is undefined
SCRIPT5009: 'Plotly' is undefined
I have solved the problem. The problem was with Internet Explorer and i have updated to a latest version. Hence it support Uint8ClampedArray and now its work.
Thank you everyone who consider my question
I have a problem in Rappid/jointJS
I have in stencil.js 4 shapes(2 basic.Circle and 2 basic.Rect) with names START(basic.Circle), END(basic.Circle), Activity(basic.Rect) and Workitem( basic.Rect) and I want in my main.js from all my graph to get the basic shape with name(I mean with attrs text ) "Activity".
This is the Stencil description for "Activity" :
new joint.shapes.basic.Rect({ size: { width: 5, height: 3 },
attrs: {
rect: {
rx: 2, ry: 2, width: 50, height: 30,
fill: '#0000FF'
},
text: { text: 'Activity', fill: '#ffffff', 'font-size': 10,
stroke: '#000000', 'stroke-width': 0 }
}
}),
How wil I get it? The only way I can search in my graph so far is if a cell has type basic.Circle(use of get('type') === 'basic.Circle')). but with type Circle I have two items:Activity and Workitem.
Is it so difficult to search for the graph element with name : "Activity"?
Thank you in advance
You can obtain all the elements (except for links) from following method
var allElement = graph.getElements()
Next if you want to obtain elements with 'Activity' do as follows
var activityElements = [];
allElement.forEach(elem => {
var textVal = elem.attributes.attrs.text.text;
if(textVal !== undefined && textVal === 'Activity') {
activityElements.push(elem);
}
});
Now the activityElements array will contain all the elements you require.
I solved my problem by taking element data in JSON format:
_.each(this.graph.getElements(), function(element) {
if(element.attributes.attrs["text"]["text"] == "Activity"){
//alert("YEAHHHHHH");
}
});
you could use the api on element as well, element.attr('text') returns the text object from the shape: { text: 'Activity', fill: '#ffffff', 'font-size': 10,
stroke: '#000000', 'stroke-width': 0 }
You could also set an "id" attribute to your shape and use graph.getCell('id_name_goes_here'); which would be much simpler if you didn't mind adding an id field to each shape.