I am trying to create a blank widget in the Hugo Academic theme to display some images of my art work. I would like two columns, so that two images are displayed within the blank widget. I have the following code below. Note that I have made the widget active and updated the menu to display the widget... which it does. However, the images are not displayed. Any help is appreciated!
+++
# Blank widget.
widget = "blank"
headless = true
active = true
weight = 25
title = "Art Work"
[design]
columns = "2"
[[item]]
title = ""
content = ""
align = "left" # Choose `center`, `left`, or `right`.
overlay_img = "static/img/AMELIORATE.jpeg"
[[item]]
title = ""
content = ""
align = "right"
overlay_img = "static/img/THROUGH.jpeg" # Image path relative to your `static/img/` folder.
[[item]]
title = ""
content = ""
align = "left"
overlay_img = "static/img/USE ME UP.jpeg" # Image path relative to your `static/img/` folder.
[[item]]
title = ""
content = ""
align = "right"
overlay_img = "static/img/VENOM.jpeg" # Image path relative to your `static/img/` folder.
[[item]]
title = ""
content = ""
align = "left"
overlay_img = "static/img/CHAOS.jpeg" # Image path relative to your `static/img/` folder.
[[item]]
title = ""
content = ""
align = "right"
overlay_img = "static/img/ROSE.jpeg" # Image path relative to your `static/img/` folder.
+++
Related
HoverExample
How to add hover text like that of the above image to a custom extension in jupyterlab. I'm making an extension in jupyter lab using react, but I want to add a description of the extension in a hoverbox. However I cant figure it out.
To add a hover box in the extension, you have to pass value to [widgetInstance].title.caption
For example:
const extension: JupyterFrontEndPlugin<void> = {
id: 'some-id',
autoStart: true || false,
activate: async(app: JupyterFrontEnd, palette: ICommandPalette) => {
const { commands } = app;
let widget1: widget= new widget(); // create the widget
widget1.id = 'widget1-id';
widget1.title.label = 'widget Label';
widget1.title.caption="widget hovering text description"; // this will show the text when you hover over an extension
app.shell.add(widget1, 'right', { rank: 1 });
...
...
... rest of your code ...
}
I am using google-map-react to render a google map, for a path, using GPS positions. At the moment, I am rendering a path in a single colour.
I would like to change the colour of the line, based on speed. Is there a way to update the colour of the path samples, based on some criteria?
At the moment, I only see how to set the colour for the whole path:
var flightPath = new maps.Polyline(
{
path: path,
geodesic: true,
strokeColor: "#FF0033",
strokeOpacity: 2,
strokeWeight: 4
});
flightPath.setMap(map);
With path being specified as:
const path = places ? places.map((event) => {
return {
lat: event.position.lat,
lng: event.position.lng
}
}) : [];
Is it possible to set each event in the path's colour?
I'm a UI5 beginner and I want to create two responsive sap.m.Buttons. The width should be 50% of the view per Button. The problem is, I don't really get how to set the width for a responsive button.
var oButtonNeuePal = new sap.m.Button({
icon : "sap-icon://add-document",
text : "{i18n>lieferschein.btnNeuePal}",
press : [ 'NEUEPAL', oController.onButton, oController ]
});
var oButtonProtokoll = new sap.m.Button({
icon : "sap-icon://list",
text : "{i18n>lieferschein.btnProtokoll}",
press : [ 'PROTOKOLL', oController.onButton, oController ]
});
/***********************************************************************
* Page
*/
var oForm = new sap.ui.layout.form.SimpleForm({
layout : sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout
});
var oGroupH = new sap.m.HBox({
justifyContent : sap.m.FlexJustifyContent.SpaceBetween,
});
oGroupH.addItem(oButtonNeuePal);
oGroupH.addItem(oButtonProtokoll);
var oGroupV = new sap.m.VBox();
oGroupV.addItem(oGroupH);
//I removed some labels and Inputfield
oForm.addContent(oGroupV);
var oPage = new sap.m.Page({
customHeader : oBar
});
oPage.addContent(oForm);
This might be interesting for you: Flex Box - Size Adjustments
When filling a HBox/FlexBox with content, not every control (maybe even no control) will automatically take the whole available space.
You have to give the Button a width of 100% and set the growFactor of its layout to 1.
In XML (from my sample link):
<Button text="{i18n>lieferschein.btnNeuePal}" width="100%">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Button>
In JS (probably):
var oButtonNeuePal = new sap.m.Button({
icon : "sap-icon://add-document",
text : "{i18n>lieferschein.btnNeuePal}",
layoutData: new sap.m.FlexItemData({ growFactor: 1}),
width: "100%",
press : [ 'NEUEPAL', oController.onButton, oController ]
});
My app has a ARSCNView and recognises an image with image detection
The goal is to look for an image and once it is recognised change the world position to its center
Something is not working. Any help would be greatly appreciated!
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
guard let imageAnchor = anchor as? ARImageAnchor else {return}
if let imageName = imageAnchor.referenceImage.name {
switch imageName {
case "myImage":
//OK, the image gets recognized
let refSphere = SCNSphere(radius: 0.02)
let refNode = SCNNode(geometry: refSphere)
refSphere.firstMaterial?.diffuse.contents = UIColor.red.withAlphaComponent(0.8)
node.addChildNode(refNode) // OK, there's a sphere representation on top of the recognized image
sceneView.session.pause()
self.sceneView.session.setWorldOrigin(relativeTransform: node.simdTransform) // Trying to move the world Origin to the center of recognized image
sceneView.session.run(configuration, options: [.resetTracking])
let box = SCNBox(width: 0.05, height: 0.05, length: 0.05, chamferRadius: 0.01)
let boxNode = SCNNode(geometry: box)
box.firstMaterial?.diffuse.contents = UIColor.green.withAlphaComponent(0.9)
boxNode.position = SCNVector3(0,0,0)
sceneView.scene.rootNode.addChildNode(boxNode) // Not OK - I was expecting to have world Origin in the center of the recognized image and a green box on top of it
default:
print("other")
}
}
}
I did it this way:
self.sceneView.session.setWorldOrigin(relativeTransform: imageAnchor.transform)
Don't know if it's still relevant to you, but after you change the world origin, with self.sceneView.session.setWorldOrigin, you resume session with .resetTracking option, which sets your world origin to the location of the camera.
Getting rid of that option should help.
is there any way to manage items in legend? I mean e.q. remove some items from legend but not from whole plot? I know that each serie in plot is linked with one item in legend, but i want to break this rule and put to legend only selected series.
Thanks for your request.
If you don't assign a title to the series (LineSeries, etc), it won't be represented on the legend:
var plotModel = new PlotModel();
plotModel.LegendTitle = "Legend";
plotModel.LegendPosition = LegendPosition.RightBottom;
plotModel.Series.Add(new LineSeries
{
ItemsSource = someItemSource,
Color = OxyColors.Red,
//Title = "title" <- Title commented
});
Starting v2.0.1, the legend doesn't automatically appear and all PlotModel.LegendXxx members have been removed. You now have to manually add one legend:
var plotModel = new PlotModel();
plotModel.Legends.Add(new Legend() {
LegendTitle = "Legend",
LegendPosition = LegendPosition.RightBottom,
});
plotModel.Series.Add(new LineSeries
{
ItemsSource = someItemSource,
Color = OxyColors.Red,
//Title = "title" <- Title commented
});