Is it possible to have #include span(3 of 12) return in pixels instead of a %?
I'm trying to create square elements, and I want the height of this element to be equal to its width.
.myElement {
width: span(3 of 12)
height: span(3 of 12)
}
Of course this causes height to be a %, which is really a % of its parent container, so it is not equal to the width! Any ideas?
Not impossible at all — just tricky (if you want a fluid square).
// Static width/height is simple
.square-a {
#include span(2 static);
height: span(2 static);
}
// Fluid takes a bit more work
.square-b {
#include span(2);
height: 0;
// %-Padding is always relative to parent width
padding-top: span(2);
position: relative;
// Inner element positioned to fit space
span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
Here's a demo of both.
Related
Basically I created this animation with p5js and I wanted to figure out how I can export it to upload it as an NFT. Since it's an animation that keeps changing the export can't be jpg, gif or mp4 type. But it has to be of another type. I've heard of SVGs but I'm not sure if they could be the solution to the problem.
That's the javascript file in p5js:
var msEndMvm = 0;
var delayMvm = 10;
var x = 0;
var flag = true; //true is right false left
// Create a new canvas to the browser size
function setup() {
createCanvas(400, 400, SVG);
background('#FFFFFF');
strokeJoin(MITER);
strokeWeight(random(1, 5));
rectMode(CENTER);
}
// On window resize, update the canvas size
function windowResized() {
resizeCanvas(400, 400);
}
// Render loop that draws shapes with p5
function draw() {
if (millis() >= msEndMvm) {
background('#FFFFFF');
rect(x, 200, 20, 10);
msEndMvm = millis() + delayMvm;
if (flag) {
x++;
if (x >= 400) {
flag = false;
}
} else {
x--;
if (x <= 0) {
flag = true;
console.log(millis());
}
}
}
}
canvas {
padding: 0;
margin: auto;
display: block;
width: 800px;
height: 600px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
body {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://unpkg.com/p5.js-svg#1.1.1"></script>
An NFT can be based on any digital file type, but only certain file types can encode animations. Technically SVG does support animation and most modern web browsers support it, however p5js-svg doesn't appear to have any support for this, which makes sense because p5.js frames are drawn one by one, not with persistent objects (i.e. when you animate a rectangle moving across the screen you clear the screen and draw a new rectangle for each frame, as opposed to updating the position of the existing rectangle).
If you want to generate an animation or video file from p5.js you can use saveFrames() (for very short animations), a library such as ccapture.js, or screen recording software on your computer.
Can you help me to write some code for create sprite template in Less via gulp spritesmith?
I have sprite.template.mustache with Sass functions and mixins:
$icons: (0:0)
{{#items}}
$icons: map-merge($icons,({{name}}: (X: {{px.offset_x}}, Y:{{px.offset_y}}, W: {{px.width}}, H: {{px.height}}, TW: {{px.total_width}}, TH: {{px.total_height}}, IMG: '{{{escaped_image}}}')))
{{/items}}
{{#options.functions}}
// Gets an attribute from the sass map
#function icon-attr($icon, $attr)
$icon: map-get($icons, $icon)
#return map-get($icon, $attr)
#mixin sprite($iconName)
background-image: url(icon-attr($iconName, IMG))
width: icon-attr($iconName, W)
height: icon-attr($iconName, H)
background-position: icon-attr($iconName, X) icon-attr($iconName, Y)
#mixin sprite-position($iconName)
background-position: icon-attr($iconName, X) icon-attr($iconName, Y)
#mixin sprite-retina($iconName)
background-image: url(icon-attr($iconName, IMG))
$width: icon-attr($iconName, W)
$height: icon-attr($iconName, H)
width: $width/2
height: $height/2
$x: icon-attr($iconName, X)
$y: icon-attr($iconName, Y)
background-position: $x/2 $y/2
$tw: icon-attr($iconName, TW)
$th: icon-attr($iconName, TH)
background-size: $tw/2 $th/2
{{/options.functions}}
I have some trouble with rewriting functions: "map-merge" and "map-get" to Less.
I know that there are no such functions in LESS, but I also know that there are own arrays that can be configured.
Here is the result that I got:
{{#items}}
#{{name}}: {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}';
{{/items}}
// #{{name}} - name of the img.
{{#options.functions}}
.icon-attr(#icon){
#url: extract(#icon, 7);
#width: extract(#icon, 3);
#height: extract(#icon, 4);
#positionX: extract(#icon, 1);
#positionY: extract(#icon, 2);
#total_width: extract(#icon, 5);
#total_height: extract(#icon, 6);
}
{{/options.functions}}
.sprite(#icon){
.icon-attr(#icon);
display: inline-block;
background-image: url(#url);
width: #width;
height: #height;
background-position: #positionX #positionY;
}
.sprite-position(#icon){
.icon-attr(#icon);
background-position: #positionX #positionY;
}
.sprite-retina(#icon){
.icon-attr(#icon);
background-image: url(#url);
#width_retina: #width;
#height_retina: #height;
width: #width_retina/2;
height: #height_retina/2;
#x: #positionX;
#y: #positionY;
background-position: #x/2 #y/2;
#tw: #total_width;
#th: #total_height;
background-size: #tw/2 #th/2;
}
Example of use:
.icon-search {
.sprite(#search);
}
For a complex map-like data structures manipulation see Lists Less plugin.
But for this particular snippet you don't in fact need any complex structures and thus extra plugins/functions. Plain mixins can serve as a map and its functions in this case just perfect.
Minimal illustrative example:
// declare icon map, each item is injected via {{#items}} template:
.icon(foo) {
#x: 11;
#y: 22;
// etc.
}
.icon(bar) {
#x: 33;
#y: 44;
// etc.
}
// using the map:
.sprite-retina(#icon-name) {
// expand icon properties into this scope:
.icon(#icon-name);
// use the propertes:
x: #x;
y: #y;
// etc.
}
With the following data, how can I bin by the class column (high, middle, low) and total the values
and display each total with its own dc.numberDisplay in this form?
Well, this is pretty close.
Because the number display only displays one number, we need to generate a div for each value we want to display.
First, the usual crossfilter stuff, creating a group that bins by class:
var data = d3.csv.parse(d3.select('pre#data').text());
data.forEach(function(d) {
d.value = +d.value;
})
var cf = crossfilter(data);
var classDim = cf.dimension(function(d) { return d.class; });
var classGroup = classDim.group().reduceSum(function(d) { return d.value; });
Now we're going to need to pull the individual values out as if they were different groups. We can create a "fake group" that pulls an individual value by index. Note: this won't work if the number of groups changes over time. But that usually doesn't happen.
function subgroup(group, i) {
return {
value: function() {
return group.all()[i];
}
};
}
Now we need to know the index for each bin we're interested in:
var bins = ['high', 'middle', 'low'];
var indices = {};
classGroup.all().forEach(function(kv, i) {
if(bins.indexOf(kv.key) >= 0)
indices[kv.key] = i;
})
We'll build a div for each of those bins, coloring it and adding a heading based on the name of the bin, and using an array of colors for the background color:
var colors = ['rgb(219,41,0)', 'rgb(255,143,31)', 'rgb(255,198,82)'];
var display = d3.select('#numbers').selectAll('div').data(bins);
display.enter().append('div')
.attr('class', 'display')
.style('background-color', function(d, i) {
return colors[i];
})
.append('span')
.attr('class', 'heading')
.text(function(d) { return d.toUpperCase(); });
Here's the CSS to get it to look approximately as you showed above:
.display {
min-width: 100px;
min-height: 100px;
text-align: center;
vertical-align: middle;
font: 36pt sans-serif;
line-height: 100px;
position: relative;
color: white;
}
.display span.heading {
position: absolute;
top: 4px;
left: 0;
right: 0;
margin: auto;
font: 8pt sans-serif;
color: white;
}
Now, finally, we can actually generate the numberDisplay widgets for each of those divs. This is the easy part!
display.each(function(d) {
var numberDisplay = dc.numberDisplay(this)
.group(subgroup(classGroup, indices[d]))
.formatNumber(d3.format('d'));
});
dc.renderAll();
Screenshot below.
And the fiddle: http://jsfiddle.net/aw9h8d93/9/
I'm having this very strange problem where a window seems to be erasing its content and not redrawing it after erasing it. This dialog is derived from CDHtmlDialog, which I think is part of the problem. There is some sort of non-deterministic code execution happening resulting in some code being executed prior to others in certain cases and the opposite in others.
Message handlers that are involved are:
BEGIN_MESSAGE_MAP(CCalcDrillDownDlg, CDHtmlDialog)
ON_WM_PAINT()
END_MESSAGE_MAP()
BEGIN_EVENTSINK_MAP(CCalcDrillDownDlg, CDHtmlDialog)
ON_EVENT(CCalcDrillDownDlg, AFX_IDC_BROWSER, 250 /* BeforeNavigate2 */, _OnBeforeNavigate2b, VTS_DISPATCH VTS_PVARIANT VTS_PVARIANT VTS_PVARIANT VTS_PVARIANT VTS_PVARIANT VTS_PBOOL)
END_EVENTSINK_MAP()
The OnInitDialog() function is as follows:
BOOL CCalcDrillDownDlg::OnInitDialog()
{
SetHostFlags(DOCHOSTUIFLAG_FLAT_SCROLLBAR);
CDHtmlDialog::OnInitDialog(); // << will eventually call _OnBeforeNavigate2b()
// Set the icon for this dialog. The framework does this automatically
// when the application's main window is not a dialog
SetIcon(m_hIcon, TRUE); // Set big icon
SetIcon(m_hIcon, FALSE); // Set small icon
LoadFromResource(IDR_CALC_DRILLDOWN); // << will eventually call _OnBeforeNavigate2b()
CString title = getStr2Ptr(22574);
SetWindowText(title);
ShowWindow(SW_SHOW);
return TRUE; // return TRUE unless you set the focus to a control
}
This is the OnPaint() function:
void CCalcDrillDownDlg::OnPaint()
{
if (IsIconic())
{
CPaintDC dc(this); // device context for painting
SendMessage(WM_ICONERASEBKGND, (WPARAM) dc.GetSafeHdc(), 0);
// Center icon in client rectangle
int cxIcon = GetSystemMetrics(SM_CXICON);
int cyIcon = GetSystemMetrics(SM_CYICON);
CRect rect;
GetClientRect(&rect);
int x = (rect.Width() - cxIcon + 1) / 2;
int y = (rect.Height() - cyIcon + 1) / 2;
// Draw the icon
dc.DrawIcon(x, y, m_hIcon);
}
else
{
CDHtmlDialog::OnPaint();
}
}
I've not put the contents of the _OnBeforeNavigate2b() function as it appears not to have anything to do with the redrawing system.
So what appears to happen is that sometimes, the dialog contents will be painted somehow prior to calling CCalcDrillDownDlg::OnPaint(). If this happens, then the call to CDHtmlDialog::OnPaint() will wipe the contents off the window.
Other times, the contents are not painted on the window prior to calling CCalcDrillDownDlg::OnPaint(). If this happens, then the call to CDHtmlDialog::OnPaint() will probably still wipe the contents off the window, which hasn't been painted yet, and then sometime after the call to CCalcDrillDownDlg::OnPaint(), it gets redrawn.
Spy++ doesn't capture any messages when the system properly redraws the window, so I've removed the messages generated from this question.
Does anyone have any idea as to how the redrawing is getting done and why the order gets foobarred sometimes?
Edit
Here is the contents of the IDR_CALC_DRILLDOWN resource:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculation Drilldown</title>
<style type="text/css">
body { overflow-y: auto; font-family: arial, Helvetica, sans-serif; font-size: 90%; }
a:link { color: black; }
a:visited { color: black; }
table { border-collapse: collapse; }
tr.runcache td { background-color: #B5B5B5; color: black; }
tr.runcache td a:link { color: black; }
tr.runcache td a:visited { color: black; }
tr.tracker td { background-color: white; color: black; }
tr.tracker td a:link { color: black; }
tr.tracker td a:visited { color: black; }
td.numericvalue { text-align: right; }
tr.paramTitle td { background-color: #4A4A4A; color: white; }
tr.resultTitle td { background-color: #4A4A4A; color: white; }
tr.resultTitle td a:link { color: white; }
tr.resultTitle td a:visited { color: white; }
tr.param td { background-color: white; color: black; }
tr.param td a:link { color: black; }
tr.param td a:visited { color: black; }
span.selection { background-color: #EBEBEB; }
</style>
</head>
<body>
<div id="calculation"></div>
<div id="details" style="padding-left: 0.1in; display: none;"></div>
</body>
</html>
Edit #2
Further investigation seems to show that the CDHtmlDialog class (or a base class thereof) will draw the window, irrespective of if my CCalcDrillDownDlg::OnPaint() calls CDHtmlDialog::OnPaint() or not, which is just weird and not intuitive. :(
Also, it seems that this is possibly threading related, as this seems to be dependant on how long it takes to render the window. If it takes a short time, it displays fine. If it takes a half a second or more, it screws up.
For the moment, I'm using a workaround where I have a m_bRepaint flag in the class which is initially set to true. Upon calling CCalcDrillDownDlg::OnPaint() and it is not iconic, I check the flag and force a resize. This is not optimal as it causes an initial flicker, but it at least it makes sure that the window's contents are drawn.
if (!m_bRepaint)
{
CDHtmlDialog::OnPaint();
}
else
{
CRect winRect;
GetWindowRect(&winRect);
SetWindowPos(NULL, 0, 0, winRect.Width() - 1, winRect.Height(), SWP_NOMOVE | SWP_NOZORDER);
SetWindowPos(NULL, 0, 0, winRect.Width() , winRect.Height(), SWP_NOMOVE | SWP_NOZORDER);
m_bRepaint = false;
}
Using Invalidate() does not work. I have to resize it to something other than it's current size and resize it back.
This CDHtmlDialog class is a PITA to work with and I wouldn't recommend anybody use it if they have a choice.
Ok, so it would seem that this is caused by the windows message queue not being deterministic, so it would seem that the underlying COM control is painting on it's DC prior to the WM_PAINT message.
To workaround the issue, I wait for the window to show itself by waiting for WM_WINDOWPOSCHANGED message, posting another application message which will then call Invalidate() and UpdateWindow(), thus forcing the redrawing of the window.
This technique is described here on Raymond Chen's blog "The Old New Thing".
Don't handle WM_ERASEBKGND.Set WM_CLIPCHILDREN style on the dialog.
ON_WM_ERASEBKGND()
...
BOOL CCalcDrillDownDlg::OnEraseBkgnd(CDC* pDC)
{
// TODO: Add your message handler code here and/or call default
return TRUE;
}
Long story short..I need my navbar to float on top of an image background (don't want to make the image into a background image). I have managed to place the navbar on the image but its in the left corner. I need it in the right corner! Please help.
http://vetamera.nu/DK/index.html
Just add right: 0; to your .top-nav class.
.top-nav {
position: absolute;
top: 5px;
right: 0;
width: 750px;
}