I am trying to draw a Markups in forge Viewer but it's working when loading extension
var extensionOptions = {
hideIssuesButton: false,
hideFieldIssuesButton: true,
};
// Use the `viewer` reference to call `loadExtension` with the extension name and the extension options:
viewer["3d"].loadExtension('Autodesk.BIM360.Extension.PushPin', extensionOptions).then(function (extension)
{
PushPinExtensionHandle = extension;
});
but draw Thickness and Font Size is very small.How to increases the size?
Please find the attachment for reference.
here are some properties which u can adjust to set the size and width of your Text
var textgeometry = new Three.TextGeometry(text,
Object.assign({}, {
font: fonts,
bevelEnabled: false,
curveSegments: 2,
bevelThickness: 0,
color: 0xFFA500,
bevelSize: 0.21,
height: 3,
size: 1
}));
here is the link for reference how u can add Text Geometry
TextGeometry
It looks to me the post is about how to set font size and freehand thickness of Markup in Forge Viewer. I am not sure why the code snippet is about loading Pushpin Extension.
anyway, let me try to answer the question of font size and freehand thickness.
Markup Core extension provides the parameter to set font style when you create text. The parameter is a json, in which font-size is one key. So to set font size, the code is like below:
markupExt.enterEditMode();
var text1= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:10,y:10}, {x:100,y:100},'My Test String Small', {"font-size":5})
text1.execute();
var text2= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:30,y:30}, {x:130,y:130},'My Test String Big', {"font-size":20})
text2.execute();
As to thickness, the other post tells now to set stroke width.
Autodesk Forge Viewer Markup Style Object
Related
I am using open layers 6 lib for map rendering and events.
my application needed same like this example http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html i.e. Example have ol.source.GeoImage..
I have tried
I am displaying raster images on map using this sample code is
const url = imagurl;
const extent = [0, 0, imageData.width, imageData.height];
const projection = new Projection({
code: 'xkcd-image',
units: 'pixels',
extent,
});
const imageLayer = new ImageLayer({
source: new Static({
url,
projection,
imageExtent: extent,
}),
});
and i am using affine transformation lib and returns scaling, rotation and transformation..
its giving the values
scaling : 327.805670381418,327.805670381418
rotation : -0.1310210334156003
transformation : 7179251.8557908312,6022627.228704552
i need to add this code into ol-6 static image source
source: new ol.source.GeoImage(
{ image,
imageCenter: transformation,
imageScale: scaling,
imageRotate: rotation,
//projection: pixelProjectio
})
suggest or help on this.. thanks in advance.. and save my days..
I've generated a generated a GLB file using khronos's SharpGLTF libraries and have got the model loading in cesium, the model appears correctly. The problem is the material for the model does not show. I have tested the generated GLB in other viewers and the material does show.
I'm using the following code in cesium:
var entity = viewer.entities.add({
name : 'url_here',
position : center,
orientation : orientation,
model : {
uri : 'url_here',
minimumPixelSize : 128,
maximumScale : 20000,
}
});
also tried
var model = scene.primitives.add(Cesium.Model.fromGltf({
id: 'here',
url: 'url here'
modelMatrix : modelMatrix,
scale : 1.0,
}));
I've tried using the color modifiers for cesium and the only option that responds is "color" which doesn't help as it doesn't apply any lighting to the color.
Below is a picture of what cesium is outputting. However there should be more effects to the material than just red. It seems to respect only KnownChannel.BaseColor and that's it.
Any ideas?
When loading text markups from a database, the text markups show up in a different size based on the current zoom of the viewer. How do I make text markups show at a static size regardless of zoom?
function saveFreeformMarkup(markup){
let markupObject = {
x: markup.position.x,
y: markup.position.y,
width: markup.size.x,
height:markup.size.y,
type: TEXT_MARKUP_TYPE,
text: $(`#freeText`).val(),
urn_id: urn[`id`],
active: ACTIVE
};
$.ajax({
... send markupObject to database ...
});
}
function loadSingleMarkup(markup, markupTool){
let MarkupsCore = Autodesk.Viewing.Extensions.Markups.Core;
let text = new MarkupsCore.MarkupText(markup.id + ID_INCREMENT, markupTool, markup.text);
markupTool.addMarkup(text);
text.setSize({ x: markup.x, y: markup.y}, markup.width, markup.height);
text.setText(markup.text);
text.updateStyle(true);
}
This is because there's an handler attached to the camera change event that adjusts the viewbox of the SVG per the updated bounds of the current view when navigation (scaling/panning) occurs.
To overcome this you can piggyback the onCameraChange handler of the MarkupCore extension (be sure to do this prior to the event binding to the upper chain that is before entering the edit mode) and apply scaling to the SVG based on the current camera pivot values and the ones recorded when you added the markups:
MarkupsCore.originalOnCameraChange = MarkupsCore.onCameraChange;
MarkupsCore.onCameraChange = function(event){
let scaleString = calculateScale(originalPivot, viewer.autocam.pivot);
this.svg.setAttribute('transform', scaleString);
this.originalOnCameraChange(event)
}
See here for details on SVG transform.
Will leave it up to you to implement the calculations or even a better approach to transform the markups in response to navigation.
I was able to fix the issue by changing the loadSingleMarkup() function to the following
const FONT_SIZE_SCALE = 90;
function loadSingleMarkup(markup, markupTool){
let MarkupsCore = Autodesk.Viewing.Extensions.Markups.Core;
let text = new MarkupsCore.MarkupText(markup.id + ID_INCREMENT, markupTool, markup.text);
markupTool.addMarkup(text);
text.setSize({ x: markup.x, y: markup.y}, markup.width, markup.height);
text.setText(markup.text);
text.style[`font-size`] = 12 / FONT_SIZE_SCALE;
text.updateStyle(true);
}
(adding text.style[`font-size`] = 12 / FONT_SIZE_SCALE;)
I have this code, which adds polyline primitive to scene.
function createPolyline(startPosition, endPosition) {
Cesium.SimplePolylineGeometry({
positions : [startPosition, endPosition]
});
var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
return scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : geometry,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.SPRINGGREEN)
}
}),
appearance : new Cesium.PerInstanceColorAppearance()
}));
}
How do I set width of this polyline?
The recommended way to add a polyline is with the Entity API, like this
var greenLine = viewer.entities.add({
polyline : {
positions : [startPosition, endPosition],
width : 5,
material : Cesium.Color.SPRINGGREEN
}
});
But, if you want to skip the Entity layer and use the Primitive Graphics layer directly, you can do that too. Your sample code above has some issues. First, you're calling the Cesium.SimplePolylineGeometry constructor without the new keyword, and without saving the result, and this is not the correct use pattern for this kind of code. Second, the SimplePolylineGeometry class itself does not support line widths greater than what the WebGL implementation supports, which on Windows machines running ANGLE, is only 1 pixel wide. To get around this limitation, use the normal (non-simple) polylines, like this:
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
positions : Cesium.PolylinePipeline.generateCartesianArc({
positions : [startPosition, endPosition]
}),
material : Cesium.Material.fromType('Color', {
color : Cesium.Color.SPRINGGREEN
}),
width: 5
});
SimplePolylineGeometry does not support line width. You need to use PolylineGeometry instead and pass the "width" options to the constructor. Also, you should be using PolylineColorAppearance as your appearance, not PerInstanceColorAppearance.
I'm trying to make some tasty live tile action for my windows phone 8 app. I've chosen to use the Cycle Tile template for some awesome gliding images but there is a problem: Microsoft seem to have kindly added a grey translucent filter to all the images so that the title text at the bottom is legible even in the case of a white image. This is annoying if the developer intends to make a metro style collage by using WritableBitmap. Whites come out as an off-white grey and the theme colour is a shade darker than all the other tiles:
The code (in a usercontrol in the visual tree):
const double TILE_H = 336;
const double TILE_W = 691;
Size TILE_SIZE = new Size(TILE_W, TILE_H);
const string FILEDIREC = "/Shared/ShellContent";
LayoutRoot.Height = TILE_H;
LayoutRoot.Width = TILE_W;
LayoutRoot.Clip = new RectangleGeometry() { Rect = new Rect(new Point(), TILE_SIZE) };
LayoutRoot.Background = new SolidColorBrush(
((Color)Application.Current.Resources["PhoneAccentColor"]));
TextBlock tb = new TextBlock();
Canvas.SetLeft(tb, 200.0);
tb.Text = "Why is this text grey? + lots more text";
tb.FontSize = 50;
tb.Width = 300;
tb.Foreground = new SolidColorBrush(Colors.White);
tb.TextWrapping = TextWrapping.Wrap;
LayoutRoot.Children.Add(tb);
var bmp = new WriteableBitmap((int)TILE_W, (int)TILE_H);
bmp.Render(LayoutRoot, null);
bmp.Invalidate();
var isf = IsolatedStorageFile.GetUserStoreForApplication();
var filename = FILEDIREC + "/tile.jpg";
if (!isf.DirectoryExists(FILEDIREC))
{
isf.CreateDirectory(FILEDIREC);
}
using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))
{
bmp.SaveJpeg(stream, (int)TILE_W, (int)TILE_H, 0, 100);
}
imageURIs.Add(new Uri("isostore:" + filename, UriKind.Absolute));
//similar process for other images used by CycleTileData
//these images then added to CycleTileData in the usual way
Any help, explanation, advise or workarounds to get degreying will be greatly appreciated. Thanks. I've tried using the images in different tile types, eg. the front of the flip tile has no issues.
I don't see any obvious issues with the code, but something I would try is to use the Isolated Storage Explorer and download the file and see what it looks like.
When generating custom tiles you may want to consider generating a PNG instead of a JPG. One of the benefits is that you then can generate a transparent image (which means your tile will always have the right theme background color) and PNG also uses a non-lossy compression scheme so there are no compression artifacts introduced.
Take a look at this answer where I describe how I generate tiles in one of my apps. Hopefully that will be of some use to you.