I'm trying my hand at scss using Bootstrap 4 and I don't know how to overwrite variable (using map) correclty
custom.scss
// Your variable overrides
$primary: rgb(40, 167, 36);
$spacer: 1;
$spacers: (
0: 0,
1: ($spacer * .2),
2: ($spacer * 3),
3: $spacer,
4: ($spacer * 8),
5: ($spacer * 12),
6: ($spacer * 50)
);
// Bootstrap and its default variables
#import "../node_modules/bootstrap/scss/bootstrap";
Primary color overwrite works fine but the spacers don't.
As is it now it seems like all the value are equal to 0, whenever I add a class like "mt-5" it doesn't change anything.
I don't know what I'm doing wrong.
Here's how to add spacers to the map. The issue is that the spacer has no units. Use px or rem to define the spacer unit...
$spacer: 1rem;
$spacers: (
0: 0,
1: ($spacer * .2),
2: ($spacer * 3),
3: $spacer,
4: ($spacer * 8),
5: ($spacer * 12),
6: ($spacer * 50)
);
https://www.codeply.com/go/TY8XqnvzO9
Related
I want a fullscreen GUI with a gutter net of 96x96 pixels and a small gutter border (maybe a pixel). The GUI should be a transparent overlay (just the gutter net should be displayed).
Why? I often work with sprite-sheet images (create, resize or rearrange them). I do not have software which supports gutter lines as help view. It would be great to have for a quick accurate adjustment.
I use a fullscreen GUI as $WS_POPUP (borderless) window. The gutter is a label with specific background color. I have to manually create these so I hope you have a better idea.
My code so far:
#include <GuiConstantsEx.au3>
#include <WindowsConstants.au3>
$iGuiW = #DesktopWidth
$iGuiH = #DesktopHeight
$iGuiGutterSize = 96
$hColor = 0x00FF00
$hGui = GUICreate("", #DesktopWidth, #DesktopHeight, 0, 0, $WS_POPUP, $WS_EX_TOOLWINDOW + $WS_EX_TOPMOST)
; From left to right.
GUICtrlCreateLabel("", 0, 0, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", 0, $iGuiGutterSize, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", 0, $iGuiGutterSize * 2, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", 0, $iGuiGutterSize * 3, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
; From top to bottom.
GUICtrlCreateLabel("", 0, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", $iGuiGutterSize, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", $iGuiGutterSize * 2, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", $iGuiGutterSize * 3, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUISetState( #SW_SHOW, $hGui )
While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
GUIDelete($hGui)
Exit
EndSwitch
WEnd
How to get the GUI to be transparent except the gutter lines?
How can I do it without manually setting label by label for each line (row and column)?
Yes it's like a grid design but just the borders as lines.
Notice:
It's a bit unclear that my suggestion fits your imaginations, but I guess you mean something like a grid design. As you mentioned the GUI is like a overlay (transparent) and just the grid lines are visible.
The solution is in the _createGridStructure() function which uses some WinAPI functions to provide such a grid (rectangle design). I extracted your GUIDelete($hGui) and Exit in a separat function _disposeAndExit(). I also extracted the GUI creation part in a function to be a bit more flexible.
Approach:
#include-once
#include <GuiConstantsEx.au3>
#include <WinAPI.au3>
#include <WindowsConstants.au3>
Global $iGuiWidth = #DesktopWidth
Global $iGuiHeight = #DesktopHeight
Global $iGridSize = 96 ; change the size if you want
Global $vGridColor = 0x00FF00 ; change the grid line color if you want
Global $hMainGui
Func _createGui()
$hMainGui = GUICreate( '', $iGuiWidth, $iGuiHeight, 0, 0, $WS_POPUP, $WS_EX_TOOLWINDOW + $WS_EX_TOPMOST )
GUISetBkColor( $vGridColor )
GUISetState( #SW_SHOW, $hMainGui )
EndFunc
Func _createGridStructure()
Local $iGridLinesX = Floor( $iGuiWidth / $iGridSize )
Local $iGridLinesY = Floor( $iGuiHeight / $iGridSize )
Local $hMainRegion = _WinAPI_CreateRectRgn( 0, 0, 0, 0 )
For $i = 0 To $iGridLinesX Step 1
$hRegion = _WinAPI_CreateRectRgn( $i * $iGridSize, 0, ( $i * $iGridSize ) + 1, $iGuiHeight )
_WinAPI_CombineRgn( $hMainRegion, $hRegion, $hMainRegion, 2 )
_WinAPI_DeleteObject( $hRegion )
Next
For $i = 0 To $iGridLinesY Step 1
$hRegion = _WinAPI_CreateRectRgn( 0, $i * $iGridSize, $iGuiWidth, ( $i * $iGridSize ) + 1 )
_WinAPI_CombineRgn( $hMainRegion, $hRegion, $hMainRegion, 2 )
_WinAPI_DeleteObject( $hRegion )
Next
_WinAPI_SetWindowRgn( $hMainGui, $hMainRegion )
EndFunc
Func _disposeAndExit()
GUIDelete( $hMainGui )
Exit
EndFunc
_createGui()
_createGridStructure()
While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
_disposeAndExit()
EndSwitch
WEnd
Now you don't have to manually adjust the grid lines if you switch the monitor resolution.
I am having trouble getting an stacked area chart with dates to populate. I have followed the example located in: Stack Overflow Example
However this example does not populate the data. Here is my code:
data = {'A': {0: 30.0, 1: 40.0, 2: 39.0, 3: 30.0, 4: 21.0},
'All': {0: 374.0, 1: 414.0, 2: 373.0, 3: 362.0, 4: 351.0},
'B': {0: 237.0, 1: 246.0, 2: 216.0, 3: 187.0, 4: 202.0},
'C': {0: 93.0, 1: 120.0, 2: 103.0, 3: 136.0, 4: 118.0},
'D': {0: 14.0, 1: 8.0, 2: 15.0, 3: 9.0, 4: 9.0},
'DEPT': {0: 'All', 1: 'All', 2: 'All', 3: 'All', 4: 'All'},
'E': {0: 0.0, 1: 0.0, 2: 0.0, 3: 0.0, 4: 1.0},
'YEAR_WEEK': {0: '2017_01',
1: '2017_02',
2: '2017_03',
3: '2017_04',
4: '2017_05'}}
df_all = pd.DataFrame(data)
output_notebook()
def stacked(df):
df_top = df.cumsum(axis=1)
df_bottom = df_top.shift(axis=1).fillna({'A': 0})[::-1]
df_stack = pd.concat([df_bottom, df_top], ignore_index=True)
return df_stack
areas = stacked(df_all[['A','D','B','C','E']])
colors = brewer['Spectral'][areas.shape[1]]
x2 = np.hstack((df_all.index[::-1], df_all.index))
source = ColumnDataSource(df_all)
"""This works and shows data but does not have date tag"""
p = figure()
"""This does not show data but chart does have date tag"""
# p = figure(x_range = FactorRange(factors = df_all.YEAR_WEEK.tolist()), y_range =(0,1200))
p.patches([x2] * areas.shape[1], [areas[c].values for c in areas],color=colors, alpha=0.8, line_color=None)
p.xaxis.major_label_orientation = 'vertical'
show(p)
The current version of Bokeh is known to have this issue: https://github.com/bokeh/bokeh/issues/6458
I'm trying to build the Figuration source files and am running into this error:
Running "sass:core" (sass) task
>> Error: Duplicate key 1_5 in map (0: x: 0, y: 0, 0_25: x: $spacer-x * .25,
y: $spacer-y * .25, 0_5: x: $spacer-x * .5, y: $spacer-y * .5, 1: x: $spacer-
x, y: $spacer-y, 1_5: x: $spacer-x * 1.5, y: $spacer-y * 1.5, 2: x: $spacer-x
* 2, y: $spacer-y * 2).
>> on line 138 of scss/_settings.scss
>> >> $spacers: (
>> ----------^
However, in _settings.scss the offending map looks fine to me:
$spacers: (
0: (
x: 0,
y: 0
),
0_25: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
0_5: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
1: (
x: $spacer-x,
y: $spacer-y
),
1_5: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
2: (
x: ($spacer-x * 2),
y: ($spacer-y * 2)
)
) !default;
Googling has only turned up issues for much older versions of SASS and claims that it's been fixed, so I'm at a loss.
sass -v confirms I'm using selective steve.
Enclosing the keys in quotation marks did the trick.
i have a Settingsscript for a small simulation.
The BackgroundColor of the camera is black. When i have a GUI.HorizontalSlider with a Label i need to change the Slidercolor. Otherwise you can not see it well.
Can someone tell me where and how to set these Colors? "ContentColor", "BackgroundColor" are not working..
My Code:
private int planetObjectsCount = 1; // number of objects in the next scene
private int skyObjectsCount = 1; // number of objects in the next scene
private int spaceObjectsCount = 1; // number of objects in the next scene
private void OnGUI()
{
GUI.color = SetGUIColor(); // Give GUI Elements a default Color
planetObjectsCount = Mathf.RoundToInt(GUI.HorizontalSlider(GetGuiRect(Screen.width / 2, Screen.height * 2 / 8), planetObjectsCount, 1, 300)); // The Slider Element - store the value
skyObjectsCount = Mathf.RoundToInt(GUI.HorizontalSlider(GetGuiRect(Screen.width / 2, Screen.height * 4 / 8), skyObjectsCount, 1, 100)); // The Slider Element - store the value
spaceObjectsCount = Mathf.RoundToInt(GUI.HorizontalSlider(GetGuiRect(Screen.width / 2, Screen.height * 6 / 8), spaceObjectsCount, 1, 100)); // The Slider Element - store the value
GUI.Label(GetGuiRect(Screen.width / 2, Screen.height * 3 / 8), "Objects on the Planet: " + planetObjectsCount.ToString()); // The Label for the Slider
GUI.Label(GetGuiRect(Screen.width / 2, Screen.height * 5 / 8), "Objects in the Sky: " + skyObjectsCount.ToString()); // The Label for the Slider
GUI.Label(GetGuiRect(Screen.width / 2, Screen.height * 7 / 8), "Objects in Space: " + spaceObjectsCount.ToString()); // The Label for the Slider
if (GUI.Button(GetGuiRect(Screen.width * 0.85f, Screen.height / 2), "Build")) // Menu Button
{
PlayerPrefs.SetInt("planetObjectsCount", planetObjectsCount); // Store the values to the PlayerPrefs
PlayerPrefs.SetInt("skyObjectsCount", skyObjectsCount); // Store the values to the PlayerPrefs
PlayerPrefs.SetInt("spaceObjectsCount", spaceObjectsCount); // Store the values to the PlayerPrefs
LoadScene("Ingame"); // Load the simulation
}
if (GUI.Button(GetGuiRect(Screen.width * 0.15f, Screen.height / 2), "Back")) // Menu Button
{
LoadScene("MainMenu"); // Back to MainMenu
}
}
internal Rect GetGuiRect(float xPos, float yPos) // Return a Rectangle for GUI Elements
{
float rectWidth = Screen.width / 5;
float rectHeight = Screen.height / 10;
xPos -= rectWidth / 2;
yPos -= rectHeight / 2;
return new Rect(xPos, yPos, rectWidth, rectHeight);
}
internal Color SetGUIColor() // Set the GUI Color
{
return Color.cyan;
}
Not quite sure what you want.
But I believe you will fix your problem by using GUIStyle or GUISkin.
Through GUIStyle you can change a lot of properities as the Font you will use and its color. So you create it and set a GUI component to use it. At GUILabel, for instance, you can pass the GUIStyle as the third parameter:
public static void Label(Rect position, string text, GUIStyle style);
And the GUISkin is a collection of these GUIStyles divided in all the UI components, so that you can create a whole new UI style.
However, I think you should know that Unity also provides a whole UI system, that you can twitch without needing code and quite frankly is way better then using OnGUI. To exemplify, here are the links of the Unity manual teaching how to created the Slider and the Label with it.
I want to rotate line pattern fill inside openlayers feature. The rotation works well when testing outside openlayers, but when try to use it as feature fill color, rotation doesn't work.
p = ctx.createPattern(canvasPattern, 'repeat');
//the following code has no effect on p in openlayers, while it works independent on canvas
ctx.fillStyle = p;
ctx.translate(cw / 2, ch / 2);
ctx.rotate(0.5 * Math.PI / 4); // the most important!
ctx.fillRect(-cw, -ch, cw * 2, ch * 2);
ctx.setTransform(1, 0, 0, 1, 0, 0);
featurePoly.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: p
})
}));
https://jsfiddle.net/nt6ae1Ld/23/