Creating a path in dart:svg - svg

I'm new to using Dart, and I've been trying to port over some javascript code that I had which worked with svg, creating a path with some segments in it, but I'm struggling to understand how the API for it works.
The following code won't run, but it perhaps illustrates what I'd like to do:
Element i = query("#divsvg");
svg.SvgSvgElement s = new svg.SvgSvgElement();
i.append(s);
svg.PathElement p = new svg.PathElement();
p.pathSegList.add(
p.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false)
);
s.children.add(p);
However, as far as I understand from the documentation:
createSvgPathSegArcAbs creates an un-parented path segment
pathSegList is final, so you can't add to it after construction
The PathElement constructor doesn't seem to take any arguments
Am I missing something about how Dart works, or something in the documentation for the svg library? I've spent a few hours looking at the docs, googling, and looking at the tests, but I haven't found anything that seems to cover this (the tests seem to create things using HTML code, rather than the API).
Anything that points me in the right direction will be very much appreciated!
Update
I've spent more time looking at the functions, and the 'finality' of the pathSegList shouldn't prevent it from being changed (it's not const), just replaced.
However, various functions like "add" are explicitly implemented with exceptions if you try and call them, while a few functions (like append) are implemented natively.
According to the debugger:
p.pathSegList.append(
p.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false)
);
Will append a path segement, but this will not be present in the 'innerHTML' attribute nor in the final page HTML...
I'm starting to think that the svg support is simply not a "finished", and am getting a bit tempted to just port to canvas, and/or WebGL.

I was able to create a path element and add path segments to it using the appendItem method of PathSegList:
var div = query('#container');
var svgElement = new svg.SvgSvgElement();
div.append(svgElement);
path = new svg.PathElement();
svgElement.append(path);
segList = path.pathSegList;
segList.appendItem(path.createSvgPathSegMovetoAbs(50, 50));
segList.appendItem(path.createSvgPathSegArcAbs(200, 200, 50, 50, 180, false, false));
segList.appendItem(path.createSvgPathSegClosePath());

Related

Amcharts v4 custom SVG

Is there a way to dynamically build an SVG using sprites in amcharts 4?
Example: screenhot
There are 20 different types which are represented by colors.
Each pin can contain a multitude of types.
So an example can be that a pin has 3 types and will consist out of 3 colors.
I have an SVG path which is a circle.
With regular JS and SVG i can create a path for each type and change the stroke color, strokedasharray and strokedashoffset.
This results in the nice circle with 3 colors.
However this seems to be impossible to do with amcharts 4.
For starters, strokedashoffset is not even a supported property for a sprite. Why would you bother supporting strokedasharray and then ignore strokedashoffet?!
The second problem is finding out how to pass data to the sprite.
This is an example of a data object I pass to the mapImageSeries class.
[{
amount: 3,
client: undefined,
colorsArr: {0: "#FFB783", 1: "#FD9797", 2: "#77A538"},
dashArray: "500,1000",
dashOffset: 1500,
divided: 500,
global: true,
groupId: "minZoom-1",
hcenter: "middle",
id: "250",
latitude: 50.53398,
legendNr: 8,
longitude: 9.68581,
name: "Fulda",
offsetsArr: {0: 0, 1: 500, 2: 1000},
scale: 0.5,
title: "Fulda",
typeIds: (3) ["4", "18", "21"],
typeMarker: " type-21 type-18 type-4",
vcenter: "bottom",
zoomLevel: 5
}]
It seems impossible to pass the colors down to the sprite.
var svgPath = 'M291,530C159,530,52,423,52,291S159,52,291,52s239,107,239,239c0,131.5-106.3,238.3-237.7,239'
var mainPin1 = single.createChild(am4core.Sprite)
mainPin1.strokeWidth = 100
mainPin1.fill = am4core.color('#fff')
mainPin1.stroke = am4core.color('#ff0000')
mainPin1.propertyFields.strokeDasharray = 'dashArray'
mainPin1.propertyFields.strokeDashoffset = 'dashOffset'
mainPin1.path = svgPath
mainPin1.scale = 0.04
mainPin1.propertyFields.horizontalCenter = 'hcenter'
mainPin1.propertyFields.verticalCenter = 'vbottom'
With what you've provided, simulating your custom SVGs is beyond the scope of what can be answered, so I'll try tackling:
applying stroke-dashoffset despite lack of innate library support. (I see you've added a feature request on GitHub for it, so why the library doesn't include it, when/if it will, can be left for discussion there.)
passing data/colors to the Sprite
For both we're going to have to wait until the instances of Sprites are ready along with their data. Presuming your single variable is a reference to a MapImageSeries.mapImages.template, we can set up an "inited" event like so:
single.events.once("inited", function(event){
// ...
});
Our data and data placeholders don't really support nested arrays/objects in general, since your colors are nested within a field, we can find them via:
event.target.dataItem.dataContext.colorsArr
You can then set the fill and stroke on the Sprite or event.target.children.getIndex(0) manually from there (in my demo below, the index will be 1 because mainPin1 is not the first/only child created on the MapImage template).
As for stroke-dashoffset, you can access the actual rendered SVGElement via sprite.group.node and just use setAttribute.
I forked our map image demo from our map image data guide and added all the above to it here:
https://codepen.io/team/amcharts/pen/6a3d87ff3bdee7b85000fe775af9e583

Hololens Placing Objects With Spatial Understanding

I have been running SpatialUnderstandingExample scene from holo-toolkit. Couldnt figure out how to place my objects into the scene. I want to replace those small boxes that comes default with my own objects. How can I do that?
Thanks
edit: found the draw box but how do i push my object there?
edit2: finally pushed an object at the position but still code is very complicated its messing up with the size and shape of my object. Will try to make it clean and neat.
It's been a while since I've looked at that example so hopefully I remember its method name's correctly. It contains a "DrawBox" method that is called after a successful call to get a location from spatial understanding. The call that creates the box looks something like this:
DrawBox(toPlace, Color.red);
Replace this call with the following (assuming "toPlace" contains the results from the spatial understanding call and "model" contains the model you are trying to place there):
var rotation = Quaternion.LookRotation(toPlace.Normal, Vector3.up);
// Stay center in the square but move down to the ground
var position = toPlace.Postion - new Vector3(0, RequestedSize.y * .5f, 0);
// instantiate the hologram from a model
GameObject newObject = Instantiate(model, position, rotation) as GameObject;
if (newObject != null)
{
// Set the parent of the new object the GameObject it was placed on
newObject.transform.parent = gameObject.transform;
}

how it works pagination in prestashop?

I have done some modification and now need to build my own pagination.
So i know prestashop have his own so how can i use them?
I was trying to use in classes/controller/FrontController.php
Use function:
public function pagination($nbProducts = 10)
{....
But can't understand well where and how is formed a pagination itself... i think my php knowledgment is low so i need some help if somebody get understand how is pagination of Prestashop works.
Front Controller assign products and the number of products in smarty variables for the page you want to see.
Here the example with BestSales Page in BestSalesController :
$nbProducts = (int)ProductSale::getNbSales();
$bestSales = ProductSale::getBestSales($this->context->language->id, $this->p - 1, $this->n, $this->orderBy, $this->orderWay);
....
// then assign it to smarty
$this->context->smarty->assign(array(
'nbProducts' => $nbProducts,
'products' => $bestSales
));
There is nothing special or custom things you can do in Front Controller.
If you want to make a custom pagination, take a look at the blocklayered module.
For example, in modules/blocklayered/blocklayered.php at ajaxCall() function, you can specify custom choices for 'the number of products by page' by editing this line :
$nArray = (int)Configuration::get('PS_PRODUCTS_PER_PAGE') != 10 ? array((int)Configuration::get('PS_PRODUCTS_PER_PAGE'), 10, 20, 50) : array(10, 20, 50);
This line display 10, 20, 50 and default number of products per page specified in Back-Office/Preferences/Products but you can change it as your wish, example :
$nArray = array(10, 20, 30, 40, 50, 60);
If you want to make customizations, you have to made them in this module, but it wouldn't be simple (the file is hitting 4200 lines, so good luck !).

How to get reference to SVG (child) elements nested in another SVG element (parent) using D3?

I have several groups (SVG G elements) nested in another group and I would like to get their ID's. I used the D3 javascript library to create the SVG and the code looks similar to this.
var body = d3.select("body");
var svg = body.append("svg")
.attr("width", '100%')
.attr("height", '100%')
var outerG = svg.append("g")
.attr('id','outerG')
var innerG1 = outerG.append('g')
.attr('id','innerG1')
var innerG2 = outerG.append('g')
.attr('id','innerG2')
I tried to use childNodes attribute, but console.log(outerG[0].childNodes) gives me undefined. Could not find the right answer searching with google, could please someone give me a hint how to do that ?
This will work:
console.log(outerG[0][0].childNodes);
See jsFiddle here
The reason you need two nested indices is that all selections are grouped implicitly. If you'd like to know the deeper reasons for this, or want to understand selections better in general, see this article

Direct3D 10, failed on creating input layout

My application keeps failing to compile when I try to create a Vertex Layout in direct3D 10. Heres the code:
// Create the vertex input layout.
D3D10_INPUT_ELEMENT_DESC vertexDesc[] =
{
{"POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D10_INPUT_PER_VERTEX_DATA, 0},
{"COLOR", 0, DXGI_FORMAT_R32G32B32A32_FLOAT, 0, 12, D3D10_INPUT_PER_VERTEX_DATA, 0}
};
// Create the input layout
D3D10_PASS_DESC PassDesc;
mTech->GetPassByIndex(0)->GetDesc(&PassDesc);
HR(md3dDevice->CreateInputLayout(vertexDesc, 2, PassDesc.pIAInputSignature,
PassDesc.IAInputSignatureSize, &mVertexLayout));
It fails in CreateInputLayout(), I was also under the impression that HR() is meant to catch problems such as these and make suggestions in these cases, however it doesn't appear to do that. Although as with many cases I may be completely wrong on that. The prompt that comes up is :
Unhandled exception at 0x757fd36f in CourseworkApp.exe: 0x0000087A: 0x87a.
I think this is mainly related to errors with pointers but I am unsure. Any help would be much appreciated.
You should make your color format "DXGI_FORMAT_R8G8B8A8_UNORM" and change "HR(md3dDevice->CreateInputLayout..." to "if(FAILED(md3dDevice->CreateInputLayout...)) {//Handle errors}".
I think that might help fix the problem.

Resources