I 'm new in the world of mxGraph and I have a few questions.
1 - It's possible to insert a "div" in a vertex ? If yes, how ?
2 - Can we draw a background grid which scale when we zoom on our graph ? For the moment, I just have a picture of a grid for my background.
3 - When we write text in a vertex, how can we change the size of the box in function of the text length ?
Thank you all for your response :)
Yes, yes, yes.
You have loads of examples there to do all you need : https://jgraph.github.io/mxgraph/javascript/
1 - You need to override the renderer of boxes (I think the function is getLabel) and render your own HTML instead of just the "text" of the box as most examples do. I think this is the most relevant : https://jgraph.github.io/mxgraph/javascript/examples/htmllabel.html
2 - https://jgraph.github.io/mxgraph/javascript/examples/grid.html
3 - There may be several way of doing that. The way I did is override function getPreferredSizeForCell and I recalculate the size of the cell. Specifically; I generate the HTML (as mentioned in question 1), I 'measure' it and apply the size to the boxes. There is probably a better way of doing but this does the job.
Related
I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :
(here is the codesandbox corresponding :https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js)
first and foremost I want a smooth scroll and can't seem to be able to make it, I used the lerp function to make it but the result doesn't work very well :
let scroll = 0;
scroll = (scroll - scrollTargetMapped) * 0.03;
// any other frame, groupRef.current is undefined, don't really know why
// but because of it, i must put my logic inside an if loop
if (groupRef.current) {
groupRef.current.position.x = THREE.MathUtils.lerp(
scroll,
-scrollTarget,
0.01
);
}
secondly, the elements on my scene are placed kind of in a random way and the scene is not at all responsive. I would love to mimic the html logic and put my first element like 50px away from the left side of the screen but not sure if it's really possible with react threejs :)
If someone has any answer to one of those question, I take it 🙂
Thanks in advance !
For those interested, I managed to find a solution, using one of drei components : ScrollControl, it works perfectly !
https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js
For more info on the said component, check out the doc : https://docs.pmnd.rs/drei/controls/scroll-controls
I followed multiple example, to train a custom object detector in TensorflowJS . The main problem I am facing every where it is using pretrained model.
Pretrained models are fine for general use cases, but custom scenario it fails. For example, take this this is example form official Tensorflowjs examples, here it is using mobilenet, and mobilenet and mobilenet has image size restriction 224x224 which defeats all the purpose, because my images are big and also not of same ratio so resizing is not an option.
I have tried multiple example, all follows same path oneway or another.
What I want ?
Any example by which I can train a custom objector from scratch in Tensorflow.js.
Although the answer sounds simple but trust me I searching for this for multiple days. Any help will be greatly appreciated. Thanks
Currently it is not yet possible to use tensorflow object detection api in nodejs. But the image size should not be a restriction. Instead of resizing, you can crop your image and keep only the part that contain your object to be detected.
One approach will be like partition the image in 224x224 and run for all partitions but what if the object is between two partitions
The image does not need to be partitioned for it. When labelling the image, you will need to know the x, y coordinates (from the top left) and the w, h of the detected box. You only need to crop a part of the image that will contain the box. Cropping at the coordinates x - (224-w)/2, y- (224-h)/2 can be a good start. There are two issues with these coordinates:
the detected boxes will always be in the center, so the training will be biaised. To prevent it, a randomn factor can be used. x - (224-w)/r , y- (224-h)/r where r can be randomly taken from [1-10] for instance
if the detected boxes are bigger than 224 * 224 maybe you might first choose to resize the video keeping it ratio before cropping. In this case the boxe size (w, h) will need to be readjusted according to the scale used for the resizing
stupid question but I m having an issue with that.
Can you make more than 1 attribute paintable on the same shape ?
I am adding 3 double array attributes for testing purpose and I make them paintable trough a loop while adding them.
When I do that, I can t paint them through my test and to verify that i tried painting it via right click on the mesh -> paint -> mesh and I only see the usual paintable attributes + the first one I defined...
Is there anything specific to do to declare more than 1 attributes paintable ?
Thanks !
I found out why it wasn't working. The documentation for makePaintable is wrong ...
cmds.makePaintable('node','attribute') like shown in the documentation doesn't work. Instead, you have to do cmds.makePaintable('nodeType','attribute') and your mesh has to be selected (I suppose as you don't specify it in the command)
It is now working.
I'm creating a TimeSeries chart with 2 TimeSerieses in it (i.e. A Dataset holding 2 TimeSeries objects.
It happens that both TimeSeries objects holds the same exact values and they are simply overlapping but that's not clear to the client as he only sees the result color or mixing the colors of both TimeSeries objects !
So he's seeing that the chart is displaying 2 sets of data, while only one line is drawn !
Is their a build-in way to deal with that ? How would you fix that ?
Personally I'm thinking of splitting this chart into 2 for it to be clear to the customer but I'm wondering if there is a way with less effort\more efficient to solve this situation.
EDIT: Final output should be images so this isn't a desktop application (i.e. Swing)
Thank you.
One approach is to let the user control series visibility using a suitable Action, a shown in this example.
I'm currently writing an eBook reader for Windows Phone Seven, and I'm trying to style it like the Kindle reader. In order to do so, I need to split my books up into pages, and this is going to get a lot more complex when variable font sizes are added.
To do this at the moment, I just add a word at a time into the textblock until it becomes higher than its container. As you can imagine though, with a document of over 120,000 words, this takes an unacceptable period of time.
Is there a way I can find out when the text would exceed the bounds (logically dividing it into pages), without having to actually render it? That way I'd be able to run it in a background thread so the user can keep reading in the meantime.
So far, the only idea that has occurred to me is to find out how the textblock decides its bounds (in the measure call?), but I have no idea how to find that code, because reflector didn't show anything.
Thanks in advance!
From what I can see the Kindle app appears to use a similar algorithm to the one you suggest. Note that:
it generally shows the % position through the book - it doesn't show total number of pages.
if you change the font size, then the first word on the page remains the same (so that's where the % comes from) - so the Kindle app just does one page worth of repagination assuming the first word of the page stays the same.
if you change the font size and then scroll back to the first page, then actually there is a discontinuity - they pull content forwards again in order to fill the first page.
Based on this, I would suggest you do not index the whole book. Instead just concentrate on the current page based on a "position" of some kind (e.g. character count - displayed as a percentage). If you have to do something on a background thread, then just look at the next page (and maybe the prev page) in order that scrolling can be more responsive.
Further to optimise your experience, there are a couple of changes you could make to your current algorithm that you could try:
try a different starting point and search increment for your algorithm - no need to start at one word and to then only add one word at a time.
assuming most of your books are ASCII, try caching the width of the common characters, and then work out the width of textblocks yourself.
Beyond that, I'd also quite like to try using <Run> blocks within your TextBlock - it may be possible to get the relative position of each Run within the TextBlock - although I've not managed to do this yet.
I do something similar to adjust font size for individual textboxes (to ensure they all fit). Basically, I create a TextBlock in code, set all my properties and check the ActualWidth and ActualHeight properties. Here is some pseudo code to help with your problem:
public static String PageText(TextBlock txtPage, String BookText)
{
TextBlock t = new TextBlock();
t.FontFamily = txtPage.FontFamily;
t.FontStyle = txtPage.FontStyle;
t.FontWeight = txtPage.FontWeight;
t.FontSize = txtPage.FontSize;
t.Text = BookText;
Size Actual = new Size();
Actual.Width = t.ActualWidth;
Actual.Height = t.ActualHeight;
if(Actual.Height <= txtPage.ActualHeight)
return BookText;
Double hRatio = txtPage.ActualHeight / Actual.Height;
return s.Substring((int)((s.Length - 1) * hRatio));
}
The above is untested code, but hopefully can get you started. Basically it sees if the text can fit in the box, if so you're good to go. If not, it finds out what percentage of the text can fit and returns it. This does not take word breaks into account, and may not be a perfect match, but should get you close.
You could alter this code to return the length rather than the actual substring and use that as your page size. Creating the textblock in code (with no display) actually performs pretty well (I do it in some table views with no noticeable lag). I wouldn't send all 120,000 words to this function, but a reasonable subset of some sort.
Once you have the ideal length you can use a RegEx to split the book into pages. There are examples on this site of RegEx that break on word boundaries after a specific length.
Another option, is to calculate page size ahead of time for each potential fontsize (and hardcode it with a switch statement). This could easily get crazy if you are allowing any font and any size combinations, and would be awful if you allowed mixed fonts/sizes, but would perform very well. Most likely you have a particular range of readable sizes, and just a few fonts. Creating a test app to calculate the text length of a page for each of these combinations wouldn't be that hard and would probably make your life easier - even if it doesn't "feel" right as a programmer :)
I didn't find any reference to this example from Microsoft called: "Principles of Pagination".
It has some interesting sample code running in Windows Phone.
http://msdn.microsoft.com/en-us/magazine/hh205757.aspx
You can also look this article about Page Transitions in Windows Phone and this other about the final touches in the E-Book project.
The code is downloadable: http://archive.msdn.microsoft.com/mag201111UIFrontiers/Release/ProjectReleases.aspx?ReleaseId=5776
You can query the FormattedText class that is used AFAIK inside textBlock. since this is the class being used to format text in preparation for Rendering, this is the most lower-level class available, and should be fast.