I am trying to create a world that does not have a background so that I can add objects to it and then run this world over a background configured in html. Is something like this possible?
Here is a link to the site I am working on. To clarify: I am trying to figure out how to make the black transparent so that the background behind it is visible. Here is the repo. Thanks.
I decided to use CSS for now instead.
Simply use:
const world = new WHS.World({
background: {
opacity: 0; // Opacity is 0. Fully transparent
},
renderer: {
alpha: true // Allow transparency in renderer.
}
});
UPDATE
In v2.x.x use the following approach:
const app = new WHS.App([
// ...
new WHS.app.RenderingModule({
bgOpacity: 0,
renderer: {
alpha: true
}
})
]);
Related
I am using Leaflet Draw . I start drawing a rectangle with something like this:
polygon_options = {
showArea: true,
shapeOptions: {
color: '#ff0000',
}
}
var rectangleDrawer = new L.Draw.Rectangle(map, polygon_options);
rectangleDrawer.enable();
While I draw the new rectangle I can see its area. After it's created I can go to edit mode to modify it. In that mode, it doesn't show the area value. Does anyone know who to make it show the area?
Thanks!
Highcharts can have a customized credits section; and that also has an alignment.
I would like to have both a url on the bottom-right, and a custom text (i.e. the current date/time) on the bottom-left.
What would be the best way to add that, keeping the same look-and-feel as the credits?
Use the SVGRenderer tool to render a custom text.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
Check the included demo.
EDIT:
Here is a simple example how you can achieve it: https://jsfiddle.net/BlackLabel/x3om10L8/
chart: {
events: {
render() {
let chart = this,
credits = chart.credits,
creditsBB = credits.getBBox();
if (chart.customLabel) {
// keep label responsive
chart.customLabel.destroy();
}
chart.customLabel = chart.renderer.label('my custom text', 0, creditsBB.y - 5).css(credits.styles).add();
}
}
},
API: https://api.highcharts.com/highcharts/chart.events.render
I am using blessed and I am trying to add a prompt to my application. It works fine, but I can't read its text. I have prepared a minimal example, that illustrates, what I see.
I would like to know how I can style the text in the inputs. The style-Attributes as mentioned in the docs seem to have no effect.
Here's what I see (there is text in the input and on the two buttons, but it is black on black).
Here's code that reproduces the error on Debian 9 with standard terminal and standard theme:
var blessed = require('blessed');
var screen = blessed.screen({});
var prompt = blessed.prompt({
left: 'center',
top: 'center',
height: 'shrink',
width: 'shrink',
border: 'line',
});
screen.append(prompt);
screen.key(['q', 'C-c'], function quit() {
return process.exit(0);
});
screen.render();
prompt.input('Search:', 'test', function() {});
Disclaimer: I'm not very familiar with the blessed codebase, so there might be a more native way of doing this. If there isn't, then it sounds like this feature should be requested / implemented.
Observation 1 - Your terminal's color settings are contributing to the problem
Based on the screenshot you gave, your terminal's default colors have a black foreground against a white background. If you invert this in your terminal settings, you should be able to see the expected behavior.
But! Your application should no matter what the user's settings are, so that isn't a good solution...
Observation 2 - The Prompt constructor hardcodes it's children with a black background
When in doubt, go to the source! Here is part of prompt.js as of 2017-09-30:
// ...
function Prompt(options) {
// ...
Box.call(this, options);
this._.input = new Textbox({
// ...
bg: 'black'
});
this._.okay = new Button({
// ...
bg: 'black',
hoverBg: 'blue',
});
this._.cancel = new Button({
// ...
bg: 'black',
hoverBg: 'blue',
});
}
// ...
So, it seems like the only way to fix your issue is to overwrite these children's style properties after the Prompt has been created.
Solution 1 - Overwrite child style properties after creation
After you create the prompt, you can overwrite the style of each child. It's probably most straightforward to just make the foreground white (as it should be)...
Also, for maintainability's sake, this hack really should be in it's own function.
function createBlessedPrompt(options) {
var prompt = blessed.prompt(options);
// NOTE - Not sure if blessed has some sortof `children()` selector.
// If not, we probably should create one.
// Nevertheless, temporarily hardcoding the children here...
//
var promptChildren = [prompt._.input, prompt._.okay, prompt._.cancel];
promptChildren.forEach(x => {
Object.assign(x.style, {
fg: 'white',
bg: 'black'
});
});
return prompt;
}
Solution 2 - Submit a bug fix to the blessed repository
This really seems like an issue with blessed itself. If you can think of a way that Prompt should properly handle this case, you should totally help your fellow coder and write an issue / pull request that fixes this.
Good luck!
I tried this sample on Win 10 and Ubuntu 16. The only change I made to your code is screen definition has been moved before the promt definition (without it I got 'No active screen' error), and also I added styles according to the documentation. My repro:
1) run npm install blessed inside an empty folder
2) create index.js in that folder with the following code
var blessed = require('blessed');
var screen = blessed.screen({});
var prompt = blessed.prompt({
left: 'center',
top: 'center',
height: 'shrink',
width: 'shrink',
border: 'line',
style: {
fg: 'blue',
bg: 'black',
bold: true,
border: {
fg: 'blue',
bg: 'red'
}
}
});
screen.append(prompt);
screen.key(['q', 'C-c'], function quit() {
return process.exit(0);
});
screen.render();
prompt.input('Search:', 'test', function() {});
3) run node index
4) got
Is that want you wanted?
I'm using datamaps (http://datamaps.github.io/) and trying to make the map transparent. I cannot find a built in feature for fillOpacity for the countries, only for the bubbles.
Since this is built on top of D3 I was wondering if there is a hacky workaround to achieve my goal. Eventually I'll probably switch over to D3 for the control.
You can change the default fill color with an RGBA value where the A (alpha) is used for transparency/ opacity. The main Github page for datamaps currently has demo code for that, for example:
const opacity = 0.2;
const map = new Datamap({
element: document.getElementById('container'),
fills: {
defaultFill: 'rgba(255, 0, 0, ' + opacity + ')'
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
I'm using JS libraries: GSAP along with ScrollMagic.io by Jan Paepke.
Scrollmagic.io allows me to trigger some CSS changes on scrolling once certain trigger element is reached, the JS script looks like this:
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
.setTween(new TimelineMax().add([
TweenMax.to("header", 0.5, {backgroundColor: "rgba(40,80,01, 0.95)", height:"6%", width:"100%", top:"0", borderRadius:"0px"}),
TweenMax.to(".headernav", 0.5, {color:"white", fontSize:"1.5em", marginTop:"10px"}),
TweenMax.to(".circle", 0.5, {height:"35px", marginTop:"10px"}),
TweenMax.to("#logo", 0.5, {width:"70px", marginTop:"-10px", marginRight:"500px"})
]))
.addTo(controller);
In general - it would change position, background-color and font color of my menu once it is scrolled over white area of website so that it will still be noticable and easy to read.
The problem is my a:hover within menu stopped working.
I've found a workaround by using this:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
}
function out(){
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
This makes it work fine, but there's still one thing to be worked out - while background of menu is "white", color:"dimgray" of font is well noticable/readable, but it will also remain "dimgray" on the green background after scrolling.
Here's screenshot explanation to show it more clearly:
Default menu state with no hovers:
On:hover using js - changes color using script shown above:
Here some properties of menu have changed along with font color to be more readable on green background:
And here's how it looks like when the mouse is OUT of the link, leaving it "dimgray" because the script makes it:
My question is - how may I implement a conditional into this script:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
}
function out(){
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
so that it would read the current color value and run TweenMax.to with specific color according to this value?
I'm fairly green with JS so any kind of advice would be highly appreciated.
Regards,
Damian.
Actually it seems that the longer I don't get answer, the more creative i become.
Already worker it out, pretty much basic JS/jQuery was needed, posting it so maybe somebody could have some use of it later on.
Here's working code of function hover:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
};
function out(){
var kolor = $("header").css("background-color");
if (kolor == "rgba(255, 255, 255, 0.901961)") {
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
else {
TweenMax.to(this, 0.5, {color:"white", scale:"1"})
}
};